@leav/ui 0.0.1-alpha-1 → 0.0.1-alpha-2

package/src/components/ImportModal/ImportModalSelectFileStep/ImportModalSelectFileStep.tsx

@@ -0,0 +1,212 @@
+// Copyright LEAV Solutions 2017
+// This file is released under LGPL V3
+// License text available at https://www.gnu.org/licenses/lgpl-3.0.txt
+import {extractArgsFromString} from '@leav/utils';
+import {message, Space, Spin} from 'antd';
+import {KitAlert, KitUpload} from 'aristid-ds';
+import {IKitDragger} from 'aristid-ds/dist/Kit/DataEntry/Upload/types';
+import {useState} from 'react';
+import {read as xlsxRead, utils as xlsxUtils} from 'xlsx';
+import {useSharedTranslation} from '_ui/hooks/useSharedTranslation';
+import {
+    AttributesByLibAttributeFragment,
+    AttributesByLibAttributeLinkAttributeFragment,
+    AttributeType,
+    ImportMode,
+    ImportType
+} from '_ui/_gqlTypes';
+import {ImportReducerActionTypes} from '../importReducer/importReducer';
+import {useImportReducerContext} from '../importReducer/ImportReducerContext';
+import {ISheet} from '../_types';
+
+interface IImportModalSelectFileStepsProps {
+    onGetAttributes: (library: string) => Promise<AttributesByLibAttributeFragment[]>;
+}
+
+const defaultType = ImportType.STANDARD;
+const defaultMode = ImportMode.upsert;
+
+function ImportModalSelectFileStep({onGetAttributes}: IImportModalSelectFileStepsProps): JSX.Element {
+    const {t} = useSharedTranslation();
+
+    const {state, dispatch} = useImportReducerContext();
+    const {file} = state;
+
+    const _setFileData = async content => {
+        const workbook = xlsxRead(content, {type: 'binary'});
+
+        const s: ISheet[] = [];
+
+        for (const sheetName in workbook.Sheets) {
+            if (workbook.Sheets.hasOwnProperty(sheetName)) {
+                // Use the sheet_to_json method to convert excel to json data
+                const sheetData: Array<{[col: string]: string}> = xlsxUtils.sheet_to_json(workbook.Sheets[sheetName], {
+                    blankrows: false,
+                    defval: null
+                });
+
+                // if sheet is empty we skip it
+                if (!sheetData.length) {
+                    continue;
+                }
+
+                // get columns' name
+                const sheetColumns = Object.keys(sheetData[0]);
+
+                // match only first line cells (A1, B1, etc.)
+                const firstRowAddresses = Object.keys(workbook.Sheets[sheetName]).filter(
+                    k => !!k.match(/\b[A-Z]+1\b/g)
+                );
+                const isMapped = !!workbook.Sheets[sheetName][firstRowAddresses[0]].c;
+
+                // Mapping is present.
+                if (isMapped) {
+                    const comments: string[] = [];
+
+                    for (const address of firstRowAddresses) {
+                        // get first line comments and delete "\n" characters
+                        comments.push(workbook.Sheets[sheetName][address].c?.[0]?.t?.replace(/\n/g, ' ') || null);
+                    }
+
+                    const params = extractArgsFromString(comments[0]);
+
+                    const sType = params.type ?? defaultType;
+                    const sLibrary = params.library;
+                    const sLinkAttribute = params.linkAttribute;
+                    const sMode = params.mode ?? defaultMode;
+                    let sMapping = [];
+                    const sTreeLinkLibrary = params.treeLinkLibrary;
+                    let sKeyColumnIndex: number;
+                    let sKeyToColumnIndex: number;
+
+                    let sKeyToAttributes: AttributesByLibAttributeFragment[] = [];
+
+                    const attributes = await onGetAttributes(sLibrary);
+
+                    // Extract mapping, keyIndex and keyToIndex from all columns comments
+                    for (const [index, comm] of comments.entries()) {
+                        const commArgs = extractArgsFromString(comm);
+                        sMapping.push(String(commArgs.id) ?? null);
+
+                        if (commArgs.key) {
+                            sKeyColumnIndex = index;
+                        }
+
+                        if (commArgs.keyTo) {
+                            sKeyToColumnIndex = index;
+                        }
+                    }
+
+                    const linkAttributeProps =
+                        sKeyToColumnIndex && sLinkAttribute
+                            ? (attributes.find(
+                                  a => a.id === sLinkAttribute
+                              ) as AttributesByLibAttributeLinkAttributeFragment)
+                            : null;
+
+                    if (linkAttributeProps && (linkAttributeProps.type !== AttributeType.tree || sTreeLinkLibrary)) {
+                        const keyToLibrary =
+                            linkAttributeProps.type === AttributeType.tree
+                                ? sTreeLinkLibrary
+                                : linkAttributeProps?.linked_library?.id;
+                        sKeyToAttributes = await onGetAttributes(keyToLibrary);
+                    }
+
+                    // Check if all mapping attributes actually exist
+                    sMapping = sMapping.map((mappingAttribute, index) => {
+                        const attributesToCheck = index === sKeyToColumnIndex ? sKeyToAttributes : attributes;
+                        return attributesToCheck.find(attribute => attribute.id === mappingAttribute)
+                            ? mappingAttribute
+                            : null;
+                    });
+
+                    s.push({
+                        name: sheetName,
+                        attributes,
+                        columns: sheetColumns,
+                        type: ImportType[sType],
+                        mode: ImportMode[sMode],
+                        library: sLibrary,
+                        linkAttribute: sLinkAttribute,
+                        linkAttributeProps,
+                        keyColumnIndex: sKeyColumnIndex,
+                        keyToColumnIndex: sKeyToColumnIndex,
+                        keyToAttributes: sKeyToAttributes,
+                        treeLinkLibrary: sTreeLinkLibrary,
+                        data: sheetData.length ? sheetData : null,
+                        mapping: sMapping
+                    });
+                } else {
+                    const sLibrary = state.defaultLibrary;
+                    const attributes = await onGetAttributes(sLibrary);
+
+                    s.push({
+                        name: sheetName,
+                        library: sLibrary,
+                        columns: sheetColumns,
+                        type: defaultType,
+                        mode: defaultMode,
+                        attributes,
+                        mapping: [],
+                        data: sheetData.length ? sheetData : null
+                    });
+                }
+            }
+        }
+
+        if (!s.length || s.every(sheet => sheet.data === null)) {
+            message.error(t('import.empty_file'));
+            return false;
+        }
+
+        dispatch({type: ImportReducerActionTypes.SET_SHEETS, sheets: s});
+
+        return true;
+    };
+
+    const [loading, setLoading] = useState(false);
+
+    const draggerProps: IKitDragger = {
+        name: 'file',
+        multiple: false,
+        accept: '.xlsx',
+        showUploadList: false,
+        description: t('import.file_selection_restriction', {allowedFormat: '.xlsx'}),
+        title: file?.name ?? t('import.file_selection_instruction'),
+        beforeUpload: fileToImport => {
+            // Read file to read mapping and display a preview on next step
+            const reader = new FileReader();
+            reader.readAsBinaryString(fileToImport);
+
+            reader.onload = async e => {
+                const res = await _setFileData(reader.result);
+                if (res) {
+                    dispatch({type: ImportReducerActionTypes.SET_FILE, file: fileToImport});
+                }
+                dispatch({type: ImportReducerActionTypes.SET_OK_BTN, okBtn: res});
+            };
+
+            reader.onloadstart = e => {
+                setLoading(true);
+            };
+
+            reader.onloadend = e => {
+                setLoading(false);
+            };
+
+            // Prevent default upload. We'll handle it ourselves later on
+            return false;
+        }
+    };
+
+    return (
+        <Space direction="vertical" style={{width: '100%'}}>
+            <Spin spinning={loading}>
+                <KitUpload.KitDragger {...draggerProps} />
+            </Spin>
+            <KitAlert message={t('import.first_line_info')} type="info" showIcon />
+        </Space>
+    );
+}
+
+export default ImportModalSelectFileStep;

package/src/components/ImportModal/ImportModalSelectFileStep/index.ts

@@ -0,0 +1,5 @@
+// Copyright LEAV Solutions 2017
+// This file is released under LGPL V3
+// License text available at https://www.gnu.org/licenses/lgpl-3.0.txt
+import ImportModalSelectFileStep from './ImportModalSelectFileStep';
+export default ImportModalSelectFileStep;

package/src/components/ImportModal/_types.ts

@@ -0,0 +1,44 @@
+// Copyright LEAV Solutions 2017
+// This file is released under LGPL V3
+// License text available at https://www.gnu.org/licenses/lgpl-3.0.txt
+import {
+    AttributesByLibAttributeFragment,
+    AttributesByLibAttributeLinkAttributeFragment,
+    AttributesByLibAttributeTreeAttributeFragment,
+    ImportMode,
+    ImportType
+} from '_ui/_gqlTypes';
+
+export interface ISheet {
+    name: string;
+    columns: string[];
+    data: Array<{[col: string]: string}>;
+    attributes: AttributesByLibAttributeFragment[];
+    mapping: Array<string | null>;
+    type?: ImportType;
+    mode?: ImportMode;
+    library?: string;
+    linkAttribute?: string;
+    linkAttributeProps?: AttributesByLibAttributeLinkAttributeFragment | AttributesByLibAttributeTreeAttributeFragment;
+    keyColumnIndex?: number;
+    keyToAttributes?: AttributesByLibAttributeFragment[];
+    keyToColumnIndex?: number;
+    treeLinkLibrary?: string;
+}
+
+export enum ImportSteps {
+    SELECT_FILE = 0,
+    CONFIG = 1,
+    PROCESSING = 2,
+    DONE = 3
+}
+
+export enum SheetSettingsError {
+    TYPE = 'TYPE',
+    MODE = 'MODE',
+    LIBRARY = 'LIBRARY',
+    MAPPING = 'MAPPING',
+    LINK_ATTRIBUTE = 'LINK_ATTRIBUTE',
+    KEY_TO = 'KEY_TO',
+    KEY = 'KEY'
+}

package/src/components/ImportModal/importReducer/ImportReducerContext.ts

@@ -0,0 +1,17 @@
+// Copyright LEAV Solutions 2017
+// This file is released under LGPL V3
+// License text available at https://www.gnu.org/licenses/lgpl-3.0.txt
+import {createContext, useContext} from 'react';
+import {IImportReducerState, ImportReducerAction, initialState} from './importReducer';
+
+const ImportReducerContext = createContext<{
+    state: IImportReducerState;
+    dispatch: React.Dispatch<ImportReducerAction>;
+}>({
+    state: initialState,
+    dispatch: () => initialState
+});
+
+export default ImportReducerContext;
+
+export const useImportReducerContext = () => useContext(ImportReducerContext);

package/src/components/ImportModal/importReducer/importReducer.test.ts

@@ -0,0 +1,125 @@
+// Copyright LEAV Solutions 2017
+// This file is released under LGPL V3
+// License text available at https://www.gnu.org/licenses/lgpl-3.0.txt
+import {ImportMode, ImportType} from '_ui/_gqlTypes';
+import {mockSheet} from '_ui/__mocks__/common/import';
+import {ImportSteps, SheetSettingsError} from '../_types';
+import importReducer, {ImportReducerActionTypes, initialState} from './importReducer';
+
+describe('importReducer', () => {
+    describe('SET_SHEETS', () => {
+        test('Set sheets data', async () => {
+            const newState = importReducer(initialState, {
+                type: ImportReducerActionTypes.SET_SHEETS,
+                sheets: [mockSheet]
+            });
+            expect(newState).toEqual({...initialState, okBtn: true, sheets: [mockSheet]});
+        });
+
+        test('Check errors on sheets data', async () => {
+            const mockSheetNoType = {
+                ...mockSheet,
+                type: null
+            };
+
+            const newStateNoType = importReducer(initialState, {
+                type: ImportReducerActionTypes.SET_SHEETS,
+                sheets: [mockSheetNoType]
+            });
+
+            expect(newStateNoType.okBtn).toBe(false);
+            expect(newStateNoType.settingsError[mockSheet.name]).toEqual(
+                expect.arrayContaining([SheetSettingsError.TYPE])
+            );
+
+            const mockSheetWithErrors = {
+                ...mockSheet,
+                type: ImportType.STANDARD,
+                mode: ImportMode.update,
+                mapping: null,
+                keyColumnIndex: null,
+                library: null
+            };
+
+            const newStateStandardSheet = importReducer(initialState, {
+                type: ImportReducerActionTypes.SET_SHEETS,
+                sheets: [mockSheetWithErrors]
+            });
+
+            expect(newStateStandardSheet.okBtn).toBe(false);
+            expect(newStateStandardSheet.settingsError[mockSheet.name]).toEqual(
+                expect.arrayContaining([SheetSettingsError.MAPPING, SheetSettingsError.LIBRARY, SheetSettingsError.KEY])
+            );
+
+            const mockLinkSheetWithErrors = {
+                ...mockSheet,
+                type: ImportType.LINK,
+                mode: null,
+                mapping: null,
+                keyColumnIndex: null,
+                keyToColumnIndex: null,
+                library: null
+            };
+            const newStateLinkSheet = importReducer(initialState, {
+                type: ImportReducerActionTypes.SET_SHEETS,
+                sheets: [mockLinkSheetWithErrors]
+            });
+
+            expect(newStateLinkSheet.okBtn).toBe(false);
+            expect(newStateLinkSheet.settingsError[mockSheet.name]).toEqual(
+                expect.arrayContaining([
+                    SheetSettingsError.MODE,
+                    SheetSettingsError.KEY_TO,
+                    SheetSettingsError.LIBRARY,
+                    SheetSettingsError.LINK_ATTRIBUTE
+                ])
+            );
+        });
+
+        test('Ignore errors on ignore sheets', async () => {
+            const mockSheetIgnored = {
+                ...mockSheet,
+                type: ImportType.IGNORE,
+                library: null
+            };
+
+            const newStateIgnored = importReducer(initialState, {
+                type: ImportReducerActionTypes.SET_SHEETS,
+                sheets: [mockSheetIgnored]
+            });
+
+            expect(newStateIgnored.okBtn).toBe(true);
+            expect(newStateIgnored.settingsError[mockSheetIgnored.name]).toBeUndefined();
+        });
+    });
+
+    test('SET_FILE', async () => {
+        const mockFile = new File([], 'test.xlsx');
+        const newState = importReducer(initialState, {type: ImportReducerActionTypes.SET_FILE, file: mockFile});
+        expect(newState).toEqual({...initialState, file: mockFile});
+    });
+
+    test('SET_CURRENT_STEP', async () => {
+        const newState = importReducer(
+            {...initialState, sheets: [mockSheet]},
+            {
+                type: ImportReducerActionTypes.SET_CURRENT_STEP,
+                currentStep: ImportSteps.CONFIG
+            }
+        );
+        expect(newState.currentStep).toBe(ImportSteps.CONFIG);
+    });
+
+    test('SET_OK_BTN', async () => {
+        const newState = importReducer(initialState, {type: ImportReducerActionTypes.SET_OK_BTN, okBtn: true});
+        expect(newState).toEqual({...initialState, okBtn: true});
+    });
+
+    test('SET_IMPORT_ERROR', async () => {
+        const newState = importReducer(initialState, {
+            type: ImportReducerActionTypes.SET_IMPORT_ERROR,
+            importError: 'test'
+        });
+        expect(newState).toEqual({...initialState, importError: 'test'});
+    });
+});

package/src/components/ImportModal/importReducer/importReducer.ts

@@ -0,0 +1,171 @@
+// Copyright LEAV Solutions 2017
+// This file is released under LGPL V3
+// License text available at https://www.gnu.org/licenses/lgpl-3.0.txt
+import {ImportMode, ImportType} from '_ui/_gqlTypes';
+import {ImportSteps, ISheet, SheetSettingsError} from '../_types';
+
+export interface IImportReducerState {
+    defaultLibrary: string;
+    sheets: ISheet[];
+    file: File | null;
+    currentStep: ImportSteps;
+    okBtn: boolean;
+    importError?: string;
+    settingsError: {[sheetName: string]: SheetSettingsError[]};
+}
+
+export enum ImportReducerActionTypes {
+    SET_SHEETS = 'SET_SHEETS',
+    SET_FILE = 'SET_FILE',
+    SET_CURRENT_STEP = 'SET_CURRENT_STEP',
+    SET_OK_BTN = 'SET_OK_BTN',
+    SET_IMPORT_ERROR = 'SET_IMPORT_ERROR'
+}
+
+export const initialState: IImportReducerState = {
+    defaultLibrary: null,
+    sheets: [],
+    file: null,
+    currentStep: ImportSteps.SELECT_FILE,
+    okBtn: false,
+    importError: null,
+    settingsError: {}
+};
+
+export type ImportReducerAction =
+    | {
+          type: ImportReducerActionTypes.SET_SHEETS;
+          sheets: ISheet[];
+      }
+    | {
+          type: ImportReducerActionTypes.SET_FILE;
+          file: File | null;
+      }
+    | {
+          type: ImportReducerActionTypes.SET_CURRENT_STEP;
+          currentStep: ImportSteps;
+      }
+    | {
+          type: ImportReducerActionTypes.SET_OK_BTN;
+          okBtn: boolean;
+      }
+    | {
+          type: ImportReducerActionTypes.SET_IMPORT_ERROR;
+          importError: string;
+      };
+
+const _getSheetErrors = (sheet: ISheet): SheetSettingsError[] => {
+    if (sheet.type === ImportType.IGNORE) {
+        return [];
+    }
+
+    const checks: Array<{error: SheetSettingsError; condition: boolean}> = [
+        {
+            error: SheetSettingsError.TYPE,
+            condition: !sheet.type
+        },
+        {
+            error: SheetSettingsError.MODE,
+            condition: !sheet.mode
+        },
+        {
+            error: SheetSettingsError.LIBRARY,
+            condition: !sheet.library
+        },
+        {
+            error: SheetSettingsError.MAPPING,
+            condition: sheet.type && !(sheet?.mapping ?? []).filter(mappingCol => !!mappingCol).length
+        },
+        {
+            error: SheetSettingsError.LINK_ATTRIBUTE,
+            condition: sheet.type === ImportType.LINK && !sheet.linkAttribute
+        },
+        {
+            error: SheetSettingsError.KEY,
+            condition:
+                (sheet.mode === ImportMode.update || sheet.type === ImportType.LINK) &&
+                (typeof sheet.keyColumnIndex === 'undefined' ||
+                    sheet.keyColumnIndex === null ||
+                    !sheet.mapping[sheet.keyColumnIndex])
+        },
+        {
+            error: SheetSettingsError.KEY_TO,
+            condition:
+                sheet.type === ImportType.LINK &&
+                (typeof sheet.keyToColumnIndex === 'undefined' ||
+                    sheet.keyToColumnIndex === null ||
+                    !sheet.mapping[sheet.keyToColumnIndex])
+        }
+    ];
+
+    return checks.reduce((errors: SheetSettingsError[], check): SheetSettingsError[] => {
+        if (check.condition) {
+            errors.push(check.error);
+        }
+        return errors;
+    }, []);
+};
+
+const _getSettingsErrors = (sheets: ISheet[]) => {
+    return sheets.reduce((acc, s) => {
+        const sheetErrors = _getSheetErrors(s);
+        if (sheetErrors.length) {
+            acc[s.name] = sheetErrors;
+        }
+
+        return acc;
+    }, {});
+};
+
+const importReducer = (state: IImportReducerState, action: ImportReducerAction): IImportReducerState => {
+    switch (action.type) {
+        case ImportReducerActionTypes.SET_SHEETS: {
+            const settingsError = _getSettingsErrors(action.sheets);
+
+            return {
+                ...state,
+                sheets: action.sheets,
+                settingsError,
+                okBtn: !Object.keys(settingsError).length
+            };
+        }
+        case ImportReducerActionTypes.SET_FILE: {
+            return {
+                ...state,
+                file: action.file
+            };
+        }
+        case ImportReducerActionTypes.SET_CURRENT_STEP: {
+            let stateChanges: Partial<IImportReducerState> = {
+                currentStep: action.currentStep
+            };
+
+            if (action.currentStep === ImportSteps.CONFIG) {
+                const settingsError = _getSettingsErrors(state.sheets);
+
+                stateChanges = {...stateChanges, settingsError, okBtn: !Object.keys(settingsError).length};
+            }
+
+            return {
+                ...state,
+                ...stateChanges
+            };
+        }
+        case ImportReducerActionTypes.SET_OK_BTN: {
+            return {
+                ...state,
+                okBtn: action.okBtn
+            };
+        }
+        case ImportReducerActionTypes.SET_IMPORT_ERROR: {
+            return {
+                ...state,
+                importError: action.importError
+            };
+        }
+        default:
+            return state;
+    }
+};
+
+export default importReducer;

package/src/components/ImportModal/importReducer/index.ts

@@ -0,0 +1,5 @@
+// Copyright LEAV Solutions 2017
+// This file is released under LGPL V3
+// License text available at https://www.gnu.org/licenses/lgpl-3.0.txt
+import importReducer from './importReducer';
+export default importReducer;

package/src/components/ImportModal/index.ts

@@ -0,0 +1,4 @@
+// Copyright LEAV Solutions 2017
+// This file is released under LGPL V3
+// License text available at https://www.gnu.org/licenses/lgpl-3.0.txt
+export {default as ImportModal} from './ImportModal';