fuse-importer 0.1.2-testing → 0.1.3-testing
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/esm/Importer/ImporterWithContext.d.ts +2 -0
- package/lib/esm/Importer/ImporterWithContext.js +12 -8
- package/lib/esm/Importer/Review/ReviewContextProvider.js +1 -1
- package/lib/esm/Importer/Uploader/DragAndDropImporter/ImporterDropzone.js +19 -11
- package/lib/esm/Importer/common/Spreadsheet/SpreadsheetContextProvider/filterMethods.js +2 -9
- package/lib/esm/Importer/common/Spreadsheet/SpreadsheetContextProvider/index.d.ts +2 -3
- package/lib/esm/Importer/common/Spreadsheet/SpreadsheetContextProvider/index.js +66 -15
- package/lib/esm/Importer/common/Spreadsheet/SpreadsheetContextProvider/useSpreadsheetFilter.d.ts +1 -1
- package/lib/esm/Importer/common/Spreadsheet/SpreadsheetContextProvider/utils.d.ts +1 -0
- package/lib/esm/Importer/common/Spreadsheet/SpreadsheetContextProvider/utils.js +7 -0
- package/lib/esm/Importer/common/Spreadsheet/components/SpreadsheetData.js +2 -2
- package/lib/esm/Importer/common/Spreadsheet/components/SpreadsheetRowCheckboxes.js +1 -7
- package/lib/esm/Importer/common/Spreadsheet/components/fields/SpreadsheetInput.js +1 -1
- package/lib/esm/Importer/common/Spreadsheet/components/fields/index.js +3 -7
- package/lib/esm/Importer/common/Spreadsheet/hooks.d.ts +1 -2
- package/lib/esm/Importer/common/Spreadsheet/hooks.js +21 -39
- package/lib/esm/Importer/common/Spreadsheet/transformation/transformators.js +1 -25
- package/lib/esm/common/Table/TableActions/CustomActions/CustomActions.js +81 -31
- package/lib/esm/common/Table/TableActions/DeleteSelectedRows.js +9 -1
- package/lib/esm/common/Table/TableActions/RowFilters.js +10 -6
- package/lib/esm/common/columnsTransformations.js +0 -8
- package/lib/esm/common/inputs/SelectMenu.js +6 -2
- package/lib/esm/common/inputs/TextInput.js +1 -1
- package/lib/esm/locales/de.d.ts +2 -1
- package/lib/esm/locales/de.js +2 -1
- package/lib/esm/locales/en.d.ts +2 -1
- package/lib/esm/locales/en.js +2 -1
- package/lib/esm/locales/es.d.ts +2 -1
- package/lib/esm/locales/es.js +2 -1
- package/lib/esm/locales/fr.d.ts +2 -1
- package/lib/esm/locales/fr.js +2 -1
- package/lib/esm/types.d.ts +9 -5
- package/lib/esm/types.js +0 -1
- package/lib/main.js +8 -8
- package/package.json +1 -1
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
type LayoutProps = {
|
|
2
2
|
zIndex: number;
|
|
3
|
+
isModal?: boolean;
|
|
3
4
|
};
|
|
4
5
|
export declare const Layout: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../styled").CSSProps & LayoutProps, never>;
|
|
6
|
+
export declare const Backdrop: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
5
7
|
export declare const ImporterWithContext: () => JSX.Element;
|
|
6
8
|
export {};
|
|
@@ -32,17 +32,21 @@ import { Footer } from "./common/Footer";
|
|
|
32
32
|
import { GlobalStyle } from "./common/GlobalStyle";
|
|
33
33
|
import { ImporterFonts } from "./common/ImporterFonts";
|
|
34
34
|
import { useImporterContext } from "./contexts/ImporterContextProvider";
|
|
35
|
-
import { AppLoadingContextProvider } from "../common/AppLoadingContextProvider";
|
|
36
|
-
export var Layout = styled(Div)(
|
|
35
|
+
import { AppLoadingContextProvider, } from "../common/AppLoadingContextProvider";
|
|
36
|
+
export var Layout = styled(Div)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n background: ", ";\n display: flex;\n flex-direction: column;\n position: fixed;\n z-index: ", ";\n ", ";\n ", "\n"], ["\n background: ", ";\n display: flex;\n flex-direction: column;\n position: fixed;\n z-index: ", ";\n ", ";\n ", "\n"])), function (_a) {
|
|
37
37
|
var theme = _a.theme;
|
|
38
38
|
return theme.colors.backgroundInterface;
|
|
39
|
-
}, function (p) { return p.zIndex; }, function (p) { return p.theme.css.scrollbarDark; })
|
|
40
|
-
|
|
39
|
+
}, function (p) { return p.zIndex; }, function (p) { return p.theme.css.scrollbarDark; }, function (p) {
|
|
40
|
+
return p.isModal
|
|
41
|
+
? css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n top: 27px;\n bottom: 27px;\n left: 29px;\n right: 29px;\n border-radius: 4px;\n overflow: hidden;\n "], ["\n top: 27px;\n bottom: 27px;\n left: 29px;\n right: 29px;\n border-radius: 4px;\n overflow: hidden;\n "]))) : css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n height: 100vh;\n width: 100vw;\n top: 0;\n left: 0;\n overflow-y: auto;\n "], ["\n height: 100vh;\n width: 100vw;\n top: 0;\n left: 0;\n overflow-y: auto;\n "])));
|
|
42
|
+
});
|
|
43
|
+
export var Backdrop = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n background: rgba(0, 0, 0, 0.75); // Opaque black\n position: fixed;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n z-index: -1;\n"], ["\n background: rgba(0, 0, 0, 0.75); // Opaque black\n position: fixed;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n z-index: -1;\n"])));
|
|
44
|
+
var Content = styled(Div)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
41
45
|
var colors = _a.theme.colors, inTrialMode = _a.inTrialMode;
|
|
42
|
-
return css(
|
|
46
|
+
return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n background-color: ", ";\n flex: ", ";\n "], ["\n background-color: ", ";\n flex: ", ";\n "])), colors.backgroundInterface, inTrialMode ? "none" : 1);
|
|
43
47
|
});
|
|
44
48
|
export var ImporterWithContext = function () {
|
|
45
|
-
var _a = useImporterContext(), inTrialMode = _a.inTrialMode, currentStepIndex = _a.currentStepIndex, matcherSubstep = _a.matcherSubstep, templateHeaders = _a.templateHeaders, theme = _a.theme, logoURL = _a.logoURL, previewFirstTime = _a.previewFirstTime, initialRecords = _a.initialRecords, _b = _a.importerOptions, zIndex = _b.zIndex, previewMode = _b.previewMode;
|
|
49
|
+
var _a = useImporterContext(), inTrialMode = _a.inTrialMode, currentStepIndex = _a.currentStepIndex, matcherSubstep = _a.matcherSubstep, templateHeaders = _a.templateHeaders, theme = _a.theme, logoURL = _a.logoURL, previewFirstTime = _a.previewFirstTime, initialRecords = _a.initialRecords, _b = _a.importerOptions, zIndex = _b.zIndex, previewMode = _b.previewMode, isModal = _b.modal;
|
|
46
50
|
var layoutRef = useRef(null);
|
|
47
51
|
var t = useTranslation().t;
|
|
48
52
|
useEffect(function () {
|
|
@@ -58,6 +62,6 @@ export var ImporterWithContext = function () {
|
|
|
58
62
|
return (_jsxs(_Fragment, { children: [_jsxs(Div, { children: [previewMode && _jsx(PreviewModeBanner, {}), !previewMode && _jsx(TrialModeBanner, {}), _jsx(Stepper, { stepLabels: stepLabels, logoURL: logoURL })] }), _jsxs(Content, { children: [currentStepIndex === 0 && _jsx(Uploader, {}), currentStepIndex === 1 && _jsx(Matcher, {}), currentStepIndex === 2 && templateHeaders && _jsx(Review, {})] }), inTrialMode && (_jsx(Content, __assign({ inTrialMode: inTrialMode }, { children: _jsx(Footer, {}) })))] }));
|
|
59
63
|
}
|
|
60
64
|
var shouldShowPreviewFirstTime = previewFirstTime && previewMode;
|
|
61
|
-
return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsxs(AppLoadingContextProvider, { children: [_jsx(Toast, {}), _jsx(GlobalStyle, {}), _jsx(ImporterFonts, {}), templateHeaders ? (_jsx(ReviewContextProvider, __assign({ initialRecords: initialRecords }, { children: _jsx(Layout, __assign({ zIndex: zIndex, ref: layoutRef }, { children: shouldShowPreviewFirstTime ? (_jsx(PreviewFirstTime, {})) : (renderContent()) })) }))) : (_jsx(AppLoading, {}))] }) })));
|
|
65
|
+
return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsxs(AppLoadingContextProvider, { children: [_jsx(Toast, {}), _jsx(GlobalStyle, {}), _jsx(ImporterFonts, {}), templateHeaders ? (_jsx(ReviewContextProvider, __assign({ initialRecords: initialRecords }, { children: _jsxs(_Fragment, { children: [isModal && _jsx(Backdrop, {}), _jsx(Layout, __assign({ zIndex: zIndex, ref: layoutRef, isModal: isModal }, { children: shouldShowPreviewFirstTime ? (_jsx(PreviewFirstTime, {})) : (renderContent()) }))] }) }))) : (_jsx(AppLoading, {}))] }) })));
|
|
62
66
|
};
|
|
63
|
-
var templateObject_1, templateObject_2, templateObject_3;
|
|
67
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
|
|
@@ -292,7 +292,7 @@ export var ReviewContextProvider = function (_a) {
|
|
|
292
292
|
});
|
|
293
293
|
}); })();
|
|
294
294
|
}
|
|
295
|
-
}, [
|
|
295
|
+
}, [currentStepIndex, templateHeaders, uploadedData]);
|
|
296
296
|
var value = {
|
|
297
297
|
previewInitialDataSet: previewInitialDataSet,
|
|
298
298
|
previewFields: previewFields,
|
|
@@ -58,22 +58,25 @@ var ImporterDropzone = function () {
|
|
|
58
58
|
setIsUploading(true);
|
|
59
59
|
setFileName(file.name);
|
|
60
60
|
var reader = new FileReader();
|
|
61
|
+
var isCsvFile = file.type === "text/csv";
|
|
61
62
|
reader.onabort = function () { return console.log("file reading was aborted"); };
|
|
62
63
|
reader.onerror = function () { return console.log("file reading has failed"); };
|
|
63
64
|
reader.onload = function (event) {
|
|
64
65
|
var _a;
|
|
65
66
|
var results = event.target.result;
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
67
|
+
if (isCsvFile) {
|
|
68
|
+
Papa.parse(results, {
|
|
69
|
+
worker: true,
|
|
70
|
+
complete: function (parserResults) {
|
|
71
|
+
setUploadedData(parserResults.data);
|
|
72
|
+
setIsUploading(false);
|
|
73
|
+
},
|
|
74
|
+
});
|
|
75
|
+
return;
|
|
76
|
+
}
|
|
69
77
|
var getDataFromFile = function (fileResults) {
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
? fileResults
|
|
73
|
-
: new TextEncoder().encode(fileResults));
|
|
74
|
-
var data = Papa.parse(csvString).data;
|
|
75
|
-
return data;
|
|
76
|
-
}
|
|
78
|
+
// rounded value to 20MB
|
|
79
|
+
var isLargeFile = file.size > 20000000;
|
|
77
80
|
var workBook = XLSX.read(fileResults, {
|
|
78
81
|
type: "array",
|
|
79
82
|
codepage: 65001,
|
|
@@ -91,7 +94,12 @@ var ImporterDropzone = function () {
|
|
|
91
94
|
}
|
|
92
95
|
setIsUploading(false);
|
|
93
96
|
};
|
|
94
|
-
|
|
97
|
+
if (isCsvFile) {
|
|
98
|
+
reader.readAsText(file);
|
|
99
|
+
}
|
|
100
|
+
else {
|
|
101
|
+
reader.readAsArrayBuffer(file);
|
|
102
|
+
}
|
|
95
103
|
});
|
|
96
104
|
};
|
|
97
105
|
var onDropRejected = function (rejectedFiles) {
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { rowIsEmpty } from "./utils";
|
|
1
2
|
//Filter records by search value
|
|
2
3
|
export var filterRecordsBySearchValue = function (obj, value) {
|
|
3
4
|
var isObject = function (value) {
|
|
@@ -28,18 +29,10 @@ export var filterRecordsBySearchValue = function (obj, value) {
|
|
|
28
29
|
};
|
|
29
30
|
export var filterRecordsByType = function (obj, filterType) {
|
|
30
31
|
var _a, _b;
|
|
31
|
-
var rowIsEmpty = function (row) {
|
|
32
|
-
return Object.keys(row).every(function (key) {
|
|
33
|
-
if (key === "_meta")
|
|
34
|
-
return true;
|
|
35
|
-
return !row[key];
|
|
36
|
-
});
|
|
37
|
-
};
|
|
38
32
|
var filteredObj = {};
|
|
39
33
|
for (var key in obj) {
|
|
40
34
|
if (filterType === "all" ||
|
|
41
|
-
(((_b = (_a = obj[key]) === null || _a === void 0 ? void 0 : _a._meta) === null || _b === void 0 ? void 0 : _b.isInvalid)
|
|
42
|
-
!rowIsEmpty(obj[key]))) {
|
|
35
|
+
(((_b = (_a = obj[key]) === null || _a === void 0 ? void 0 : _a._meta) === null || _b === void 0 ? void 0 : _b.isInvalid) && !rowIsEmpty(obj[key]))) {
|
|
43
36
|
filteredObj[key] = obj[key];
|
|
44
37
|
}
|
|
45
38
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { SpreadsheetOptions } from "../../../..";
|
|
3
|
-
import { BatchValidationErrors, Field, Record, RecordDataSet } from "../../../../types";
|
|
3
|
+
import { BatchValidationErrors, DuplicateRecords, Field, Record, RecordDataSet } from "../../../../types";
|
|
4
4
|
import { SortBy, SpreadsheetProps } from "../common/types";
|
|
5
5
|
import { ValidationState } from "../hooks";
|
|
6
6
|
import { SpreadsheetFilter } from "./useSpreadsheetFilter";
|
|
@@ -9,7 +9,6 @@ export type OnValidationStateChanged = (state: ValidationState) => void;
|
|
|
9
9
|
type State = {
|
|
10
10
|
data: Record[];
|
|
11
11
|
fields: Field[];
|
|
12
|
-
isLoading: boolean;
|
|
13
12
|
isReadOnly?: boolean;
|
|
14
13
|
errors: BatchValidationErrors;
|
|
15
14
|
warnings: BatchValidationErrors;
|
|
@@ -17,7 +16,6 @@ type State = {
|
|
|
17
16
|
sortByFieldErrors: string;
|
|
18
17
|
sortByFieldWarnings: string;
|
|
19
18
|
updateRecord: (record: Record) => void;
|
|
20
|
-
setIsLoading: React.Dispatch<React.SetStateAction<boolean>>;
|
|
21
19
|
setSortByFieldErrors: React.Dispatch<React.SetStateAction<string>>;
|
|
22
20
|
selectedRows: string[];
|
|
23
21
|
setSelectedRows: React.Dispatch<React.SetStateAction<string[]>>;
|
|
@@ -39,6 +37,7 @@ type State = {
|
|
|
39
37
|
setSortBy: React.Dispatch<React.SetStateAction<SortBy>>;
|
|
40
38
|
setIsTransformTooltipOpened: React.Dispatch<React.SetStateAction<boolean>>;
|
|
41
39
|
isTransformTooltipOpened: boolean;
|
|
40
|
+
duplicateRecords: DuplicateRecords;
|
|
42
41
|
} & ValidationState;
|
|
43
42
|
type Props = SpreadsheetProps & {
|
|
44
43
|
children: JSX.Element;
|
|
@@ -27,7 +27,7 @@ import { addMeta } from "../../../data";
|
|
|
27
27
|
import { useValidationState } from "../hooks";
|
|
28
28
|
import { useSpreadsheetFilter, } from "./useSpreadsheetFilter";
|
|
29
29
|
import { filterRecordsByType, filterRecordsByError, filterRecordsBySearchValue, } from "./filterMethods";
|
|
30
|
-
import { hasValueInAnyField } from "./utils";
|
|
30
|
+
import { hasValueInAnyField, rowIsEmpty } from "./utils";
|
|
31
31
|
var getDefaultSortCompareFn = function (sortBy) {
|
|
32
32
|
return function (a, b) {
|
|
33
33
|
var aField = get(a, sortBy.field);
|
|
@@ -47,24 +47,22 @@ var SpreadsheetContext = createContext({});
|
|
|
47
47
|
export var SpreadsheetContextProvider = function (_a) {
|
|
48
48
|
var initialDataSet = _a.initialDataSet, fields = _a.fields, options = _a.options, isReadOnly = _a.isReadOnly, children = _a.children, onValidateRecord = _a.onValidateRecord, onDataSetChanged = _a.onDataSetChanged, onValidationStateChanged = _a.onValidationStateChanged, selectedRows = _a.selectedRows, setSelectedRows = _a.setSelectedRows, _b = _a.getSortCompareFn, getSortCompareFn = _b === void 0 ? getDefaultSortCompareFn : _b;
|
|
49
49
|
var _c = useState(initialDataSet), dataSet = _c[0], setDataSet = _c[1];
|
|
50
|
-
var _d = useState(
|
|
51
|
-
var _e = useState(null),
|
|
52
|
-
var _f = useState(
|
|
53
|
-
var _g = useState(
|
|
54
|
-
var _h = useState(null), sortBy = _h[0], setSortBy = _h[1];
|
|
50
|
+
var _d = useState(null), sortByFieldErrors = _d[0], setSortByFieldErrors = _d[1];
|
|
51
|
+
var _e = useState(null), sortByFieldWarnings = _e[0], setSortByFieldWarnings = _e[1];
|
|
52
|
+
var _f = useState(""), filteredInputValue = _f[0], setFilteredInputValue = _f[1];
|
|
53
|
+
var _g = useState(null), sortBy = _g[0], setSortBy = _g[1];
|
|
55
54
|
var addRowTimeoutRef = useRef(null);
|
|
56
|
-
var
|
|
57
|
-
var
|
|
58
|
-
var
|
|
55
|
+
var _h = useState(false), isTransformTooltipOpened = _h[0], setIsTransformTooltipOpened = _h[1];
|
|
56
|
+
var _j = useSpreadsheetFilter(), spreadsheetFilter = _j.spreadsheetFilter, filterRecordsByRowType = _j.filterRecordsByRowType, filterRecordsByFieldErrors = _j.filterRecordsByFieldErrors, resetSpreadsheetFilter = _j.resetSpreadsheetFilter;
|
|
57
|
+
var _k = useValidationState({
|
|
59
58
|
dataSet: dataSet,
|
|
60
59
|
initialDataSet: initialDataSet,
|
|
61
60
|
fields: fields,
|
|
62
61
|
options: options,
|
|
63
62
|
isReadOnly: isReadOnly,
|
|
64
63
|
setDataSet: setDataSet,
|
|
65
|
-
setIsLoading: setIsLoading,
|
|
66
64
|
onValidateRecord: onValidateRecord,
|
|
67
|
-
}), updateRecordAndRevalidate =
|
|
65
|
+
}), updateRecordAndRevalidate = _k.updateRecordAndRevalidate, deleteRecords = _k.deleteRecords, warnings = _k.warnings, errors = _k.errors, validationState = __rest(_k, ["updateRecordAndRevalidate", "deleteRecords", "warnings", "errors"]);
|
|
68
66
|
var addNewRowsToSpreadsheet = function () {
|
|
69
67
|
addRowTimeoutRef.current = setTimeout(function () {
|
|
70
68
|
var _a, _b;
|
|
@@ -83,10 +81,62 @@ export var SpreadsheetContextProvider = function (_a) {
|
|
|
83
81
|
var handleDeleteErrors = function (selectedRows) {
|
|
84
82
|
deleteRecords(selectedRows, errors, warnings);
|
|
85
83
|
};
|
|
84
|
+
var duplicateRecords = useMemo(function () {
|
|
85
|
+
if (isReadOnly)
|
|
86
|
+
return { records: {}, count: 0 };
|
|
87
|
+
var uniqueRecords = new Map();
|
|
88
|
+
var duplicateGroups = [];
|
|
89
|
+
var _loop_1 = function (recordKey) {
|
|
90
|
+
if (Object.prototype.hasOwnProperty.call(dataSet, recordKey)) {
|
|
91
|
+
var record_1 = dataSet[recordKey];
|
|
92
|
+
if (rowIsEmpty(record_1))
|
|
93
|
+
return "continue";
|
|
94
|
+
var key = fields.map(function (field) { return record_1[field.name]; }).join("|");
|
|
95
|
+
if (uniqueRecords.has(key)) {
|
|
96
|
+
var saved_1 = uniqueRecords.get(key);
|
|
97
|
+
var existingGroup = duplicateGroups.find(function (group) {
|
|
98
|
+
return group.some(function (item) { return item._meta.id === saved_1._meta.id; });
|
|
99
|
+
});
|
|
100
|
+
if (existingGroup) {
|
|
101
|
+
existingGroup.push(record_1);
|
|
102
|
+
}
|
|
103
|
+
else {
|
|
104
|
+
duplicateGroups.push([saved_1, record_1]);
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
else {
|
|
108
|
+
uniqueRecords.set(key, record_1);
|
|
109
|
+
}
|
|
110
|
+
}
|
|
111
|
+
};
|
|
112
|
+
for (var recordKey in dataSet) {
|
|
113
|
+
_loop_1(recordKey);
|
|
114
|
+
}
|
|
115
|
+
var count = duplicateGroups.length;
|
|
116
|
+
var records = {};
|
|
117
|
+
for (var i = 0; i < duplicateGroups.length; i++) {
|
|
118
|
+
var group = duplicateGroups[i];
|
|
119
|
+
for (var j = 0; j < group.length; j++) {
|
|
120
|
+
var record = group[j];
|
|
121
|
+
records[record._meta.id] = __assign({}, record);
|
|
122
|
+
}
|
|
123
|
+
}
|
|
124
|
+
return { records: records, count: count };
|
|
125
|
+
}, [dataSet]);
|
|
86
126
|
var dataSnapshot = useMemo(function () {
|
|
87
|
-
var filteredData =
|
|
88
|
-
|
|
89
|
-
:
|
|
127
|
+
var filteredData = dataSet;
|
|
128
|
+
switch (spreadsheetFilter.type) {
|
|
129
|
+
case "rowBased":
|
|
130
|
+
if (spreadsheetFilter.byRow === "duplicates") {
|
|
131
|
+
filteredData = duplicateRecords.records;
|
|
132
|
+
break;
|
|
133
|
+
}
|
|
134
|
+
filteredData = filterRecordsByType(dataSet, spreadsheetFilter.byRow);
|
|
135
|
+
break;
|
|
136
|
+
case "columnBased":
|
|
137
|
+
filteredData = filterRecordsByError(dataSet, spreadsheetFilter.byColumn.field, errors);
|
|
138
|
+
break;
|
|
139
|
+
}
|
|
90
140
|
var filteredDatasetByString = filteredInputValue
|
|
91
141
|
? filterRecordsBySearchValue(filteredData, filteredInputValue)
|
|
92
142
|
: filteredData;
|
|
@@ -109,6 +159,7 @@ export var SpreadsheetContextProvider = function (_a) {
|
|
|
109
159
|
spreadsheetFilter,
|
|
110
160
|
sortBy,
|
|
111
161
|
Object.keys(dataSet).length,
|
|
162
|
+
duplicateRecords.count,
|
|
112
163
|
sortByFieldErrors,
|
|
113
164
|
sortByFieldWarnings,
|
|
114
165
|
]);
|
|
@@ -170,7 +221,7 @@ export var SpreadsheetContextProvider = function (_a) {
|
|
|
170
221
|
return updatedData;
|
|
171
222
|
});
|
|
172
223
|
}, [dataSet, dataSnapshot]);
|
|
173
|
-
var value = __assign(__assign({ data: updatedDataSnapshot, fields: fields
|
|
224
|
+
var value = __assign(__assign({ data: updatedDataSnapshot, fields: fields }, validationState), { isReadOnly: isReadOnly, sortByFieldErrors: sortByFieldErrors, sortByFieldWarnings: sortByFieldWarnings, options: options, recordsWithValuesCount: recordsWithValuesCount, filteredDataCount: filteredDataCount, sortBy: sortBy, warnings: warnings, errors: errors, setSortByFieldErrors: handleSortByFieldErrors, setSortByFieldWarnings: handleSortByFieldWarnings, onValidateRecord: onValidateRecord, updateRecord: updateRecordAndRevalidate, selectedRows: selectedRows, setSelectedRows: setSelectedRows, deleteRecords: handleDeleteErrors, filteredInputValue: filteredInputValue, setFilteredInputValue: setFilteredInputValue, lastClickedIndexRef: lastClickedIndexRef, addNewRowsToSpreadsheet: addNewRowsToSpreadsheet, spreadsheetFilter: spreadsheetFilter, resetSpreadsheetFilter: resetSpreadsheetFilter, filterRecordsByRowType: filterRecordsByRowType, filterRecordsByFieldErrors: filterRecordsByFieldErrors, checkboxColumnWidth: checkboxColumnWidth, setSortBy: setSortBy, isFiltering: isFiltering, setIsTransformTooltipOpened: setIsTransformTooltipOpened, isTransformTooltipOpened: isTransformTooltipOpened, duplicateRecords: duplicateRecords });
|
|
174
225
|
return (_jsx(SpreadsheetContext.Provider, __assign({ value: value }, { children: children })));
|
|
175
226
|
};
|
|
176
227
|
export var useSpreadsheetContext = function () { return useContext(SpreadsheetContext); };
|
|
@@ -12,3 +12,10 @@ export var hasValueInAnyField = function (record) {
|
|
|
12
12
|
return value !== null && value !== undefined;
|
|
13
13
|
});
|
|
14
14
|
};
|
|
15
|
+
export var rowIsEmpty = function (row) {
|
|
16
|
+
return Object.keys(row).every(function (key) {
|
|
17
|
+
if (key === "_meta")
|
|
18
|
+
return true;
|
|
19
|
+
return !row[key];
|
|
20
|
+
});
|
|
21
|
+
};
|
|
@@ -38,7 +38,7 @@ import { useImporterContext } from "../../../../Importer/contexts/ImporterContex
|
|
|
38
38
|
import useWindowDimensions from "../../../../utils/hooks/useWindowSize";
|
|
39
39
|
var getItemKey = function (record) { return record._meta.id; };
|
|
40
40
|
var SpreadsheetData = function (props) {
|
|
41
|
-
var _a = useSpreadsheetContext(), fields = _a.fields, data = _a.data,
|
|
41
|
+
var _a = useSpreadsheetContext(), fields = _a.fields, data = _a.data, isReadOnly = _a.isReadOnly, totalErrors = _a.totalErrors, validationPercentage = _a.validationPercentage, setSortByFieldErrors = _a.setSortByFieldErrors, options = _a.options, setSortByFieldWarnings = _a.setSortByFieldWarnings, selectedRows = _a.selectedRows, setSelectedRows = _a.setSelectedRows, checkboxColumnWidth = _a.checkboxColumnWidth, isFiltering = _a.isFiltering;
|
|
42
42
|
var currentStepIndex = useImporterContext().currentStepIndex;
|
|
43
43
|
var isOnSmallScreens = useWindowDimensions().isOnSmallScreens;
|
|
44
44
|
var canShowCheckboxOnCheckboxRowHover = currentStepIndex === 2;
|
|
@@ -105,6 +105,6 @@ var SpreadsheetData = function (props) {
|
|
|
105
105
|
var showValidationProgress = !isReadOnly && validationPercentage < 100;
|
|
106
106
|
var isReviewStep = currentStepIndex === 2;
|
|
107
107
|
return (_jsxs(S.SpreadSheetData, __assign({ h100: true, flexColumn: true, className: props.className }, { children: [_jsx(GlobalStyle, {}), showValidationProgress && (_jsx(Div, __assign({ h: 32 }, { children: _jsx(ValidationProgress, { totalErrors: totalErrors, validationPercentage: validationPercentage }) }))), _jsxs(S.SpreadSheetContainer, __assign({ flexColumn: true, w100: true, h100: true }, { children: [_jsx(Div, __assign({ w100: true, justifyCenter: true }, { children: isReviewStep && _jsx(TableActions, {}) })), _jsxs(S.SpreadSheetWrapper, __assign({ canShowCheckboxOnHover: !showValidationProgress && canShowCheckboxOnCheckboxRowHover, shouldShowOnlyCheckbox: (!showValidationProgress && selectedRows.length > 0) ||
|
|
108
|
-
currentStepIndex === 0, dflex: true, h100: true }, { children: [(options === null || options === void 0 ? void 0 : options.showCheckboxColumn) && (_jsx(SpreadsheetRowCheckboxes, { gridRef: rowCheckboxesGridRef, height: spreadsheetHeight, isLoadingData: showValidationProgress })), _jsx(S.TableView, { tableHeadersHeight: spreadsheetHeaderHeightPx, rowHeight: spreadsheetRowHeightPx, h: null, rowWidthScalingFactor: rowWidthScalingFactor, data: data, columns: columns,
|
|
108
|
+
currentStepIndex === 0, dflex: true, h100: true }, { children: [(options === null || options === void 0 ? void 0 : options.showCheckboxColumn) && (_jsx(SpreadsheetRowCheckboxes, { gridRef: rowCheckboxesGridRef, height: spreadsheetHeight, isLoadingData: showValidationProgress })), _jsx(S.TableView, { tableHeadersHeight: spreadsheetHeaderHeightPx, rowHeight: spreadsheetRowHeightPx, h: null, rowWidthScalingFactor: rowWidthScalingFactor, data: data, columns: columns, onTableScroll: onTableScroll, getItemKey: getItemKey, checkboxColumnWidth: checkboxColumnWidth, isFiltering: isFiltering })] }))] }))] })));
|
|
109
109
|
};
|
|
110
110
|
export default React.memo(SpreadsheetData, areEqual);
|
|
@@ -44,6 +44,7 @@ import { useSpreadsheetContext } from "../SpreadsheetContextProvider";
|
|
|
44
44
|
import { Checkbox } from "../../../../common/inputs/Checkbox";
|
|
45
45
|
import { useImporterContext } from "../../../contexts/ImporterContextProvider";
|
|
46
46
|
import ReactVirtualizedAutoSizer from "react-virtualized-auto-sizer";
|
|
47
|
+
import { rowIsEmpty } from "../SpreadsheetContextProvider/utils";
|
|
47
48
|
var StyledGrid = styled(Grid)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background: ", ";\n overflow-y: scroll;\n"], ["\n background: ", ";\n overflow-y: scroll;\n"])), function (_a) {
|
|
48
49
|
var theme = _a.theme;
|
|
49
50
|
return theme.colors.white50;
|
|
@@ -54,13 +55,6 @@ var gridStyles = {
|
|
|
54
55
|
overflowY: "hidden",
|
|
55
56
|
overflowX: "scroll",
|
|
56
57
|
};
|
|
57
|
-
var rowIsEmpty = function (row) {
|
|
58
|
-
return Object.keys(row).every(function (key) {
|
|
59
|
-
if (key === "_meta")
|
|
60
|
-
return true;
|
|
61
|
-
return !row[key];
|
|
62
|
-
});
|
|
63
|
-
};
|
|
64
58
|
export var SpreadsheetRowCheckboxes = function (_a) {
|
|
65
59
|
var height = _a.height, gridRef = _a.gridRef, isLoadingData = _a.isLoadingData, props = __rest(_a, ["height", "gridRef", "isLoadingData"]);
|
|
66
60
|
var _b = useSpreadsheetContext(), data = _b.data, selectedRows = _b.selectedRows, options = _b.options, lastClickedIndexRef = _b.lastClickedIndexRef, setSelectedRows = _b.setSelectedRows, checkboxColumnWidth = _b.checkboxColumnWidth, isTransformTooltipOpened = _b.isTransformTooltipOpened;
|
|
@@ -56,7 +56,7 @@ export var SpreadsheetInput = function (_a) {
|
|
|
56
56
|
? "".concat(totalInputSize, "px")
|
|
57
57
|
: "".concat(defaultWidthAsNumber, "px");
|
|
58
58
|
}, [value, record, columnWidth]);
|
|
59
|
-
return (_jsxs(SpreadsheetField, __assign({ validationError: validationError, validationWarning: validationWarning, isHighlighted: isHighlighted, defaultFieldWidth: defaultWidthAsNumber, expandedFieldWidth: expandedFieldWidth, shouldExpandInput: true }, { children: [_jsx(Input, __assign({ hasError: !!validationError, hasWarning: !!validationWarning, value: value || "", onChange: function (_a) {
|
|
59
|
+
return (_jsxs(SpreadsheetField, __assign({ validationError: validationError, validationWarning: validationWarning, isHighlighted: isHighlighted, defaultFieldWidth: defaultWidthAsNumber, expandedFieldWidth: expandedFieldWidth, shouldExpandInput: true }, { children: [_jsx(Input, __assign({ autoComplete: "off", hasError: !!validationError, hasWarning: !!validationWarning, value: value || "", onChange: function (_a) {
|
|
60
60
|
var value = _a.target.value;
|
|
61
61
|
return !isTransformTooltipOpened && setValue(value);
|
|
62
62
|
}, disabledWhen: isTransformTooltipOpened }, props)), ((_g = (_f = (_e = record === null || record === void 0 ? void 0 : record._meta) === null || _e === void 0 ? void 0 : _e.transformedRow) === null || _f === void 0 ? void 0 : _f[name]) === null || _g === void 0 ? void 0 : _g.original) &&
|
|
@@ -107,13 +107,9 @@ var ContentContainer = styled(Div)(templateObject_7 || (templateObject_7 = __mak
|
|
|
107
107
|
}, function (p) {
|
|
108
108
|
return p.isReadOnly && css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n pointer-events: none;\n "], ["\n pointer-events: none;\n "])));
|
|
109
109
|
});
|
|
110
|
-
var Wrapper = styled(Div)(function (_a) {
|
|
111
|
-
var isLoading = _a.isLoading;
|
|
112
|
-
return css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), isLoading && css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n pointer-events: none;\n "], ["\n pointer-events: none;\n "]))));
|
|
113
|
-
});
|
|
114
110
|
export var SpreadsheetField = function (_a) {
|
|
115
111
|
var validationError = _a.validationError, validationWarning = _a.validationWarning, children = _a.children, isHighlighted = _a.isHighlighted, expandedFieldWidth = _a.expandedFieldWidth, shouldExpandInput = _a.shouldExpandInput, defaultFieldWidth = _a.defaultFieldWidth;
|
|
116
|
-
var
|
|
117
|
-
return (_jsx(
|
|
112
|
+
var isReadOnly = useSpreadsheetContext().isReadOnly;
|
|
113
|
+
return (_jsx(Div, __assign({ dim: "100%" }, { children: _jsx(TooltipProvider, __assign({ tooltip: validationError || validationWarning }, { children: _jsx(Div, __assign({ dim: "100%" }, { children: _jsx(ContentContainer, __assign({ hasError: !!validationError, hasWarning: !!validationWarning, isHighlighted: isHighlighted, expandedFieldWidth: expandedFieldWidth, defaultFieldWidth: defaultFieldWidth, shouldExpandInput: shouldExpandInput, isReadOnly: isReadOnly, className: "input-content" }, { children: children })) })) })) })));
|
|
118
114
|
};
|
|
119
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7
|
|
115
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
|
|
@@ -5,7 +5,6 @@ import { BatchValidationErrors, Field, OnValidateRecord, Record, RecordDataSet }
|
|
|
5
5
|
type UseValidationStateArgs = {
|
|
6
6
|
onValidateRecord?: OnValidateRecord;
|
|
7
7
|
setDataSet: React.Dispatch<React.SetStateAction<RecordDataSet>>;
|
|
8
|
-
setIsLoading: React.Dispatch<React.SetStateAction<boolean>>;
|
|
9
8
|
initialDataSet: RecordDataSet;
|
|
10
9
|
dataSet: RecordDataSet;
|
|
11
10
|
fields: Field[];
|
|
@@ -30,5 +29,5 @@ type UseValidationStateReturnValue = ValidationState & {
|
|
|
30
29
|
deleteRecords: DeleteRecords;
|
|
31
30
|
updateRecordAndRevalidate: (record: Record) => Promise<void>;
|
|
32
31
|
};
|
|
33
|
-
export declare const useValidationState: ({ initialDataSet, dataSet, fields, options, isReadOnly, setDataSet,
|
|
32
|
+
export declare const useValidationState: ({ initialDataSet, dataSet, fields, options, isReadOnly, setDataSet, onValidateRecord, }: UseValidationStateArgs) => UseValidationStateReturnValue;
|
|
34
33
|
export {};
|
|
@@ -45,7 +45,6 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
|
|
|
45
45
|
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
|
|
46
46
|
}
|
|
47
47
|
};
|
|
48
|
-
import { omit, set } from "lodash";
|
|
49
48
|
import { useCallback, useEffect, useMemo, useState } from "react";
|
|
50
49
|
import { useTableActions, } from "../../../common/Table/TableActions/hooks";
|
|
51
50
|
import { selectValidatorsFor, validateRecord } from "./validation";
|
|
@@ -56,7 +55,7 @@ var checkIfHasErrors = function (errors) {
|
|
|
56
55
|
export var useValidationState = function (_a) {
|
|
57
56
|
var initialDataSet = _a.initialDataSet, //Initial Data Set, used to run the initial validation
|
|
58
57
|
dataSet = _a.dataSet, //Current Updated Data Set
|
|
59
|
-
fields = _a.fields, options = _a.options, isReadOnly = _a.isReadOnly, setDataSet = _a.setDataSet,
|
|
58
|
+
fields = _a.fields, options = _a.options, isReadOnly = _a.isReadOnly, setDataSet = _a.setDataSet, onValidateRecord = _a.onValidateRecord;
|
|
60
59
|
var _b = useState({}), errors = _b[0], setErrors = _b[1];
|
|
61
60
|
var _c = useState({}), warnings = _c[0], setWarnings = _c[1];
|
|
62
61
|
var _d = useState(0), validationPercentage = _d[0], setValidationPercentage = _d[1];
|
|
@@ -69,14 +68,14 @@ export var useValidationState = function (_a) {
|
|
|
69
68
|
}).deleteRecords;
|
|
70
69
|
// Validate record and update dataSet
|
|
71
70
|
var updateRecordAndRevalidate = useCallback(function (records) { return __awaiter(void 0, void 0, void 0, function () {
|
|
72
|
-
var recordsArray, newDataSet,
|
|
71
|
+
var recordsArray, newDataSet, newErrors, newWarnings, i, record, recordId, data, _a, recordErrors, recordWarnings, hasError, hasWarning;
|
|
73
72
|
return __generator(this, function (_b) {
|
|
74
73
|
switch (_b.label) {
|
|
75
74
|
case 0:
|
|
76
75
|
recordsArray = Array.isArray(records) ? records : [records];
|
|
77
76
|
newDataSet = __assign({}, dataSet);
|
|
78
|
-
|
|
79
|
-
|
|
77
|
+
newErrors = __assign({}, errors);
|
|
78
|
+
newWarnings = __assign({}, warnings);
|
|
80
79
|
i = 0;
|
|
81
80
|
_b.label = 1;
|
|
82
81
|
case 1:
|
|
@@ -100,51 +99,35 @@ export var useValidationState = function (_a) {
|
|
|
100
99
|
hasWarning = checkIfHasErrors(recordWarnings);
|
|
101
100
|
newDataSet[recordId]._meta.isInvalid = hasError;
|
|
102
101
|
newDataSet[recordId]._meta.hasWarning = hasWarning;
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
102
|
+
if (hasError) {
|
|
103
|
+
newErrors[recordId] = recordErrors;
|
|
104
|
+
}
|
|
105
|
+
else {
|
|
106
|
+
delete newErrors[recordId];
|
|
107
|
+
}
|
|
108
|
+
if (hasWarning) {
|
|
109
|
+
newWarnings[recordId] = recordWarnings;
|
|
110
|
+
}
|
|
111
|
+
else {
|
|
112
|
+
delete newWarnings[recordId];
|
|
113
|
+
}
|
|
109
114
|
_b.label = 3;
|
|
110
115
|
case 3:
|
|
111
116
|
i++;
|
|
112
117
|
return [3 /*break*/, 1];
|
|
113
118
|
case 4:
|
|
114
|
-
setErrors(
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
for (var errorId in errorUpdates) {
|
|
118
|
-
var updatedError = errorUpdates[errorId];
|
|
119
|
-
var hasUpdatedError = updatedError && Object.keys(updatedError).length > 0;
|
|
120
|
-
newErrors = hasUpdatedError
|
|
121
|
-
? set(currentErrors, errorId, updatedError)
|
|
122
|
-
: omit(currentErrors, errorId);
|
|
123
|
-
}
|
|
124
|
-
return newErrors;
|
|
125
|
-
});
|
|
126
|
-
setWarnings(function (warnings) {
|
|
127
|
-
var currentWarnings = __assign({}, warnings);
|
|
128
|
-
var newWarnings = {};
|
|
129
|
-
for (var warningId in warningUpdates) {
|
|
130
|
-
var updatedWarning = warningUpdates[warningId];
|
|
131
|
-
var hasUpdatedWarning = updatedWarning && Object.keys(updatedWarning).length > 0;
|
|
132
|
-
newWarnings = hasUpdatedWarning
|
|
133
|
-
? set(currentWarnings, warningId, updatedWarning)
|
|
134
|
-
: omit(currentWarnings, warningId);
|
|
135
|
-
}
|
|
136
|
-
return newWarnings;
|
|
137
|
-
});
|
|
138
|
-
setDataSet(newDataSet); //Update the dataSet
|
|
119
|
+
setErrors(newErrors);
|
|
120
|
+
setWarnings(newWarnings);
|
|
121
|
+
setDataSet(newDataSet); // Update the dataSet
|
|
139
122
|
return [2 /*return*/];
|
|
140
123
|
}
|
|
141
124
|
});
|
|
142
|
-
}); }, [dataSet, validatorsCache]);
|
|
125
|
+
}); }, [dataSet, errors, warnings, validatorsCache]);
|
|
143
126
|
// Initial data validation and update dataSet
|
|
144
127
|
useEffect(function () {
|
|
145
128
|
if (!initialDataSet || isReadOnly)
|
|
146
129
|
return;
|
|
147
|
-
|
|
130
|
+
setIsLoadingApp(true);
|
|
148
131
|
var initialValidation = function () { return __awaiter(void 0, void 0, void 0, function () {
|
|
149
132
|
var errors, warnings, initialData, length, _a, batchValidationDelayMs, _b, batchValidationSize, batchSize, batchCount, batchIdx, idx, batch, index, record, recordId, _c, recordErrors, recordWarnings, hasError, hasWarning, validationPercentage_1;
|
|
150
133
|
return __generator(this, function (_d) {
|
|
@@ -223,7 +206,6 @@ export var useValidationState = function (_a) {
|
|
|
223
206
|
case 2: return [4 /*yield*/, initialValidation()];
|
|
224
207
|
case 3:
|
|
225
208
|
_a.sent();
|
|
226
|
-
setIsLoading(false);
|
|
227
209
|
setIsLoadingApp(false);
|
|
228
210
|
return [2 /*return*/];
|
|
229
211
|
}
|
|
@@ -209,28 +209,4 @@ var integerTransformations = {
|
|
|
209
209
|
return isTransformationNeeded(fieldValue, valueWithCorrectType);
|
|
210
210
|
},
|
|
211
211
|
};
|
|
212
|
-
var
|
|
213
|
-
autodetect: function (fieldValue, _, fieldOptions) {
|
|
214
|
-
var options = fieldOptions.options.map(function (option) {
|
|
215
|
-
return option.toLowerCase();
|
|
216
|
-
});
|
|
217
|
-
if (!fieldValue || options.length === 0)
|
|
218
|
-
return {
|
|
219
|
-
transformationWasNeeded: false,
|
|
220
|
-
original: fieldValue,
|
|
221
|
-
transformed: null,
|
|
222
|
-
};
|
|
223
|
-
var parsedRecord = String(fieldValue).toLowerCase();
|
|
224
|
-
var trueOptionIndex = options.findIndex(function (option) { return option === "true" || option === "1"; });
|
|
225
|
-
var falseOptionIndex = options.findIndex(function (option) { return option === "false" || option === "0"; });
|
|
226
|
-
if (trueOptionIndex !== -1 && falseOptionIndex !== -1) {
|
|
227
|
-
var transformedValue_1 = parsedRecord === options[trueOptionIndex]
|
|
228
|
-
? fieldOptions.options[trueOptionIndex]
|
|
229
|
-
: fieldOptions.options[falseOptionIndex];
|
|
230
|
-
return isTransformationNeeded(fieldValue, transformedValue_1);
|
|
231
|
-
}
|
|
232
|
-
var transformedValue = fieldOptions.options[0];
|
|
233
|
-
return isTransformationNeeded(fieldValue, transformedValue);
|
|
234
|
-
},
|
|
235
|
-
};
|
|
236
|
-
export var fieldTransformations = __assign(__assign(__assign(__assign(__assign(__assign({}, stringFieldTransformations), datesDateTimesAndTimesTransformations), urlTransformations), floatTransformations), integerTransformations), enumTransformations);
|
|
212
|
+
export var fieldTransformations = __assign(__assign(__assign(__assign(__assign({}, stringFieldTransformations), datesDateTimesAndTimesTransformations), urlTransformations), floatTransformations), integerTransformations);
|