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

package/src/components/ImportModal/ImportModalConfigStep/ImportMappingRowTitle/index.ts

@@ -1,5 +0,0 @@
-// 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 ImportMappingRowTitle from './ImportMappingRowTitle';
-export default ImportMappingRowTitle;

package/src/components/ImportModal/ImportModalConfigStep/ImportModalConfigStep.tsx

@@ -1,298 +0,0 @@
-// 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 {KeyOutlined,LinkOutlined,WarningOutlined} from '@ant-design/icons';
-import {localizedTranslation} from '@leav/utils';
-import {Space,Table,Typography} from 'antd';
-import {ColumnsType} from 'antd/lib/table';
-import {KitSelect,KitTabs,KitTypography} from 'aristid-ds';
-import styled from 'styled-components';
-import {themeVars} from '_ui/antdTheme';
-import {useLang} from '_ui/hooks';
-import {useSharedTranslation} from '_ui/hooks/useSharedTranslation';
-import {
-    AttributesByLibAttributeFragment,
-    AttributesByLibAttributeLinkAttributeFragment,
-    AttributesByLibAttributeTreeAttributeFragment,
-    AttributeType,
-    ImportMode,
-    ImportType,
-    LibraryLightFragment
-} from '_ui/_gqlTypes';
-import {ImportReducerActionTypes} from '../importReducer/importReducer';
-import {useImportReducerContext} from '../importReducer/ImportReducerContext';
-import {ISheet} from '../_types';
-import ImportKeysSelector from './ImportKeysSelector';
-import ImportMappingRowTitle from './ImportMappingRowTitle';
-import ImportSheetSettings from './ImportSheetSettings';
-
-interface IImportModalConfigStepProps {
-    libraries: LibraryLightFragment[];
-    onGetAttributes: (library: string) => Promise<AttributesByLibAttributeFragment[]>;
-}
-
-enum KeysValues {
-    IMPORT = 'import_key',
-    LINK = 'link_key'
-}
-
-const SheetWrapper = styled.div`
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-`;
-
-function ImportModalConfigStep({libraries, onGetAttributes}: IImportModalConfigStepProps): JSX.Element {
-    const {lang} = useLang();
-    const {t} = useSharedTranslation();
-    const {state, dispatch} = useImportReducerContext();
-    const {sheets} = state;
-
-    const _changeSheetProperty = (sheetIndex: number, values: Partial<ISheet>) => {
-        sheets[sheetIndex] = {...sheets[sheetIndex], ...values};
-        dispatch({type: ImportReducerActionTypes.SET_SHEETS, sheets: [...sheets]});
-    };
-
-    const _handleLibrarySelect = async (sheetIndex: number, lib: string) => {
-        const attrs = await onGetAttributes(lib);
-
-        _changeSheetProperty(sheetIndex, {
-            library: lib,
-            attributes: attrs,
-            mapping: [],
-            linkAttribute: null,
-            keyToAttributes: null
-        });
-    };
-
-    const _handleImportTypeSelect = (sheetIndex: number, type: ImportType) => {
-        _changeSheetProperty(sheetIndex, {
-            type,
-            linkAttribute: null,
-            keyToAttributes: null
-        });
-    };
-
-    const _handleImportModeSelect = (sheetIndex: number, mode: ImportMode) => {
-        _changeSheetProperty(sheetIndex, {mode});
-    };
-
-    const _handleLinkAttributeSelect = async (sheetIndex: number, linkAttribute: string) => {
-        const sheet = sheets[sheetIndex];
-        const linkAttributeProps = sheet.attributes.find(a => a.id === linkAttribute) as
-            | AttributesByLibAttributeLinkAttributeFragment
-            | AttributesByLibAttributeTreeAttributeFragment;
-
-        const library =
-            linkAttributeProps.type === AttributeType.tree
-                ? sheet.treeLinkLibrary
-                : (linkAttributeProps as AttributesByLibAttributeLinkAttributeFragment)?.linked_library?.id;
-
-        let keyToAttributes = [];
-        if (library) {
-            keyToAttributes = await onGetAttributes(library);
-        }
-
-        const mapping = sheet.mapping;
-
-        _changeSheetProperty(sheetIndex, {
-            linkAttribute,
-            linkAttributeProps,
-            mapping,
-            keyToAttributes,
-            treeLinkLibrary:
-                linkAttributeProps.type === AttributeType.tree
-                    ? (linkAttributeProps as AttributesByLibAttributeTreeAttributeFragment).linked_tree.libraries
-                          .map(l => l.library.id)
-                          .includes(sheet.treeLinkLibrary)
-                        ? sheet.treeLinkLibrary
-                        : null
-                    : null
-        });
-    };
-
-    const _handleMappingSelect = (sheetIndex: number, selectedMappingIndex: number, attributeId: string | null) => {
-        const sheet = sheets[sheetIndex];
-        let mapping = [...sheet.mapping];
-        mapping[selectedMappingIndex] = attributeId;
-
-        // Prevent mapping the same attribute twice
-        // We may have the same attribute twice only if one is used as "keyTo". Otherwise, it's forbidden
-        mapping = mapping.map((mappingAttribute, columnIndex) => {
-            if (
-                columnIndex !== selectedMappingIndex &&
-                mappingAttribute === attributeId &&
-                sheet.keyToColumnIndex !== columnIndex &&
-                sheet.keyToColumnIndex !== selectedMappingIndex
-            ) {
-                return null;
-            }
-
-            return mappingAttribute;
-        });
-
-        _changeSheetProperty(sheetIndex, {mapping});
-    };
-
-    //TODO: fix import selectors width?
-
-    const _handleTreeLinkLibrarySelect = async (sheetIndex: number, treeLinkLibrary: string) => {
-        const keyToAttributes = treeLinkLibrary ? await onGetAttributes(treeLinkLibrary) : null;
-        _changeSheetProperty(sheetIndex, {treeLinkLibrary, keyToAttributes});
-    };
-
-    const tabItems = sheets.map((sheet, sheetIndex) => {
-        const isSheetIgnored = sheet.type === ImportType.IGNORE;
-        const displayedRows = sheet.data.slice(0, 3);
-        const _handleSelectKey = (columnIndex: number) => (keyType: 'key' | 'keyTo', value: boolean) => {
-            const newProps: Partial<ISheet> = {};
-            const colId = sheet.mapping[columnIndex];
-            const changedProp = keyType;
-            const otherPropToCheck = keyType === 'key' ? 'keyTo' : 'key';
-            const changedPropColumnIndex = keyType === 'key' ? 'keyColumnIndex' : 'keyToColumnIndex';
-            const otherPropToCheckColumnIndex = keyType === 'key' ? 'keyToColumnIndex' : 'keyColumnIndex';
-
-            newProps[changedProp] = value ? colId : null;
-            newProps[changedPropColumnIndex] = value ? columnIndex : null;
-
-            if (sheet[otherPropToCheckColumnIndex] === columnIndex) {
-                newProps[otherPropToCheck] = null;
-                newProps[otherPropToCheckColumnIndex] = null;
-            }
-
-            // If changing keyTo, empty mapping for this column as mappable attributes are not the same
-            if (keyType === 'keyTo') {
-                newProps.mapping = [...sheet.mapping];
-                newProps.mapping[columnIndex] = null;
-            }
-
-            _changeSheetProperty(sheetIndex, newProps);
-        };
-
-        const _setStyleOnMappingRow = (_, rowIndex) => ({
-            style: {
-                verticalAlign: 'top',
-                background:
-                    rowIndex === displayedRows.length // Set background color on last row (= mapping row)
-                        ? themeVars.secondaryBg
-                        : themeVars.defaultBg
-            }
-        });
-
-        const selectKeyOptions = [
-            {
-                value: KeysValues.IMPORT,
-                label: (
-                    <>
-                        <KeyOutlined /> {t('import.import_key')}
-                    </>
-                )
-            }
-        ];
-
-        if (sheet.type === ImportType.LINK) {
-            selectKeyOptions.push({
-                value: KeysValues.LINK,
-                label: (
-                    <>
-                        <LinkOutlined /> {t('import.link_key')}
-                    </>
-                )
-            });
-        }
-
-        const sheetColumns: ColumnsType<object> = Object.keys(sheet.data[0]).map((col, index) => ({
-            title: col,
-            dataIndex: col,
-            onCell: _setStyleOnMappingRow,
-            render: value => <KitTypography.Paragraph ellipsis={{rows: 2}}>{value}</KitTypography.Paragraph>
-        }));
-
-        sheetColumns.unshift({
-            title: <></>,
-            dataIndex: '__root',
-            onCell: _setStyleOnMappingRow,
-            width: '250px'
-        });
-
-        const sheetData = displayedRows.map((row, index) => ({...row, key: index}));
-
-        // Mapping row
-        if (sheet.type && sheet.library && (sheet.type !== ImportType.LINK || sheet.linkAttribute)) {
-            const mappingRow = {
-                key: sheetData.length,
-                __root: <ImportMappingRowTitle sheet={sheet} />,
-                ...Object.keys(sheet.data[0]).reduce((allCols, col, idx) => {
-                    const attributeSelectOptions = (sheet.keyToColumnIndex === idx
-                        ? sheet?.keyToAttributes ?? []
-                        : (sheet?.attributes ?? []).filter(
-                              a => a?.type === AttributeType.simple || a?.type === AttributeType.advanced
-                          )
-                    ).map(a => ({
-                        value: a.id,
-                        key: a.id,
-                        label: localizedTranslation(a.label, lang) || a.id
-                    }));
-
-                    allCols[col] = (
-                        <Space direction="vertical" style={{width: '100%'}}>
-                            <KitSelect
-                                style={{width: '100%'}}
-                                placeholder={t('import.do_not_import')}
-                                value={sheet.mapping?.[idx]}
-                                allowClear
-                                onClear={() => _handleMappingSelect(sheetIndex, idx, null)}
-                                onSelect={id => _handleMappingSelect(sheetIndex, idx, id)}
-                                options={attributeSelectOptions}
-                            />
-                            <ImportKeysSelector sheet={sheet} columnIndex={idx} onChange={_handleSelectKey(idx)} />
-                        </Space>
-                    );
-
-                    return allCols;
-                }, {})
-            };
-            sheetData.push(mappingRow);
-        }
-
-        const tabTitle = (
-            <Space>
-                {sheet.name}
-                {!!state.settingsError[sheet.name] && <WarningOutlined style={{color: themeVars.errorColor}} />}
-            </Space>
-        );
-
-        return {
-            label: tabTitle,
-            key: String(sheetIndex),
-            children: (
-                <SheetWrapper>
-                    <ImportSheetSettings
-                        sheetIndex={sheetIndex}
-                        libraries={libraries}
-                        onLibrarySelect={_handleLibrarySelect}
-                        onImportTypeSelect={_handleImportTypeSelect}
-                        onImportModeSelect={_handleImportModeSelect}
-                        onLinkAttributeSelect={_handleLinkAttributeSelect}
-                        onTreeLinkLibrarySelect={_handleTreeLinkLibrarySelect}
-                    />
-                    {!isSheetIgnored && (
-                        <Table
-                            title={() => <Typography.Title level={5}>{t('import.data_overview')}</Typography.Title>}
-                            columns={sheetColumns}
-                            dataSource={sheetData}
-                            size="small"
-                            tableLayout="auto"
-                            pagination={{hideOnSinglePage: true}}
-                            style={{width: '100%', overflow: 'auto'}}
-                        />
-                    )}
-                </SheetWrapper>
-            )
-        };
-    });
-
-    return <KitTabs type="card" items={tabItems} />;
-}
-
-export default ImportModalConfigStep;

package/src/components/ImportModal/ImportModalConfigStep/ImportScheduleModal/ImportScheduleModal.tsx

@@ -1,52 +0,0 @@
-// 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 {DatePicker, Modal} from 'antd';
-import dayjs from 'dayjs';
-import {useSharedTranslation} from '_ui/hooks/useSharedTranslation';
-
-interface IImportScheduleModalProps {
-    isModalOpen: boolean;
-    scheduleDate: dayjs.Dayjs;
-    onCancelImportScheduleModal: () => void;
-    onValidateScheduleImport: () => void;
-    onChangeScheduleDate: (date: dayjs.Dayjs) => void;
-}
-
-function ImportScheduleModal({
-    isModalOpen,
-    scheduleDate,
-    onCancelImportScheduleModal,
-    onChangeScheduleDate,
-    onValidateScheduleImport
-}: IImportScheduleModalProps): JSX.Element {
-    const {t} = useSharedTranslation();
-
-    const _onChange = (d, dateString) => {
-        onChangeScheduleDate(d);
-    };
-
-    const handleOk = async () => {
-        onValidateScheduleImport();
-    };
-
-    const handleCancel = () => {
-        onCancelImportScheduleModal();
-    };
-
-    return (
-        <Modal
-            title={t('import.import_schedule_title')}
-            open={isModalOpen}
-            okText={t('import.import_schedule')}
-            cancelText={t('global.cancel')} // FIXME:
-            onOk={handleOk}
-            onCancel={handleCancel}
-            okButtonProps={{disabled: scheduleDate === null}}
-        >
-            <DatePicker defaultValue={scheduleDate} onChange={_onChange} picker="date" showTime />
-        </Modal>
-    );
-}
-
-export default ImportScheduleModal;

package/src/components/ImportModal/ImportModalConfigStep/ImportScheduleModal/index.ts

@@ -1,5 +0,0 @@
-// 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 ImportScheduleModal from './ImportScheduleModal';
-export default ImportScheduleModal;

package/src/components/ImportModal/ImportModalConfigStep/ImportSheetSettings/ImportSheetSettings.tsx

@@ -1,155 +0,0 @@
-// 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 {localizedTranslation} from '@leav/utils';
-import {Form, Space} from 'antd';
-import {KitSelect} from 'aristid-ds';
-import styled from 'styled-components';
-import useLang from '_ui/hooks/useLang';
-import {useSharedTranslation} from '_ui/hooks/useSharedTranslation';
-import {
-    AttributesByLibAttributeFragment,
-    AttributesByLibAttributeTreeAttributeFragment,
-    AttributeType,
-    ImportMode,
-    ImportType,
-    LibraryLightFragment
-} from '_ui/_gqlTypes';
-import {useImportReducerContext} from '../../importReducer/ImportReducerContext';
-
-interface IImportSettingsProps {
-    sheetIndex: number;
-    libraries: LibraryLightFragment[];
-    onLibrarySelect: (sheetIndex: number, library: string) => void;
-    onImportTypeSelect: (sheetIndex: number, type: ImportType) => void;
-    onImportModeSelect: (sheetIndex: number, mode: ImportMode) => void;
-    onLinkAttributeSelect: (sheetIndex: number, attribute: string) => void;
-    onTreeLinkLibrarySelect: (sheetIndex: number, library: string) => void;
-}
-
-const isLinkAttribute = (attribute: AttributesByLibAttributeFragment): boolean =>
-    attribute.type === AttributeType.simple_link ||
-    attribute.type === AttributeType.advanced_link ||
-    attribute.type === AttributeType.tree;
-
-const SettingsWrapper = styled(Space)`
-    && .ant-form-item-label {
-        padding: 0;
-        font-weight: bold;
-    }
-`;
-
-function ImportSheetSettings({
-    sheetIndex,
-    libraries,
-    onLibrarySelect,
-    onImportTypeSelect,
-    onImportModeSelect,
-    onLinkAttributeSelect,
-    onTreeLinkLibrarySelect
-}: IImportSettingsProps): JSX.Element {
-    const {lang} = useLang();
-    const {t} = useSharedTranslation();
-    const {state} = useImportReducerContext();
-    const sheet = state.sheets[sheetIndex];
-    const isSheetIgnored = sheet.type === ImportType.IGNORE;
-
-    const selectTreeLinkLibraryOptions =
-        sheet.type === ImportType.LINK && sheet.linkAttributeProps?.type === AttributeType.tree
-            ? (
-                  (sheet.linkAttributeProps as AttributesByLibAttributeTreeAttributeFragment)?.linked_tree?.libraries ??
-                  []
-              ).map(treeLib => ({
-                  key: treeLib.library.id,
-                  value: treeLib.library.id,
-                  label: localizedTranslation(treeLib.library.label, lang)
-              }))
-            : null;
-
-    const typeOptions = Object.values(ImportType).map(type => ({
-        key: type,
-        value: type,
-        label: t(`import.types.${type}`)
-    }));
-
-    const modeOptions = Object.values(ImportMode).map(mode => ({
-        key: mode,
-        value: mode,
-        label: t(`import.modes.${mode}`)
-    }));
-
-    const librariesOptions = libraries.map(l => ({
-        key: l.id,
-        value: l.id,
-        label: localizedTranslation(l.label, lang) || l.id
-    }));
-
-    const linkAttributeOptions = sheet.attributes.filter(isLinkAttribute).map(a => ({
-        key: a.id,
-        value: a.id,
-        label: localizedTranslation(a.label, lang) || a.id
-    }));
-
-    return (
-        <Form layout="vertical">
-            <SettingsWrapper direction="horizontal" size="middle" wrap>
-                <Form.Item label={t('import.type')} required>
-                    <KitSelect
-                        style={{minWidth: 200}}
-                        defaultValue={sheet.type}
-                        placeholder={t('import.select_type')}
-                        onChange={value => onImportTypeSelect(sheetIndex, value)}
-                        options={typeOptions}
-                    />
-                </Form.Item>
-                {!isSheetIgnored && (
-                    <>
-                        <Form.Item label={t('import.mode')} required>
-                            <KitSelect
-                                style={{minWidth: 240}}
-                                defaultValue={sheet.mode}
-                                placeholder={t('import.select_mode')}
-                                onChange={value => onImportModeSelect(sheetIndex, value)}
-                                options={modeOptions}
-                            />
-                        </Form.Item>
-                        <Form.Item label={t('import.library')} required>
-                            <KitSelect
-                                style={{minWidth: 200}}
-                                defaultValue={sheet.library ?? state.defaultLibrary}
-                                placeholder={t('import.select_library')}
-                                onChange={value => onLibrarySelect(sheetIndex, value)}
-                                options={librariesOptions}
-                            />
-                        </Form.Item>
-                        {sheet.type === ImportType.LINK && sheet.library && (
-                            <Form.Item label={t('import.link_attribute')} required>
-                                <KitSelect
-                                    style={{minWidth: 200}}
-                                    defaultValue={sheet.linkAttribute}
-                                    value={sheet.linkAttribute}
-                                    placeholder={t('import.select_link_attribute')}
-                                    onChange={value => onLinkAttributeSelect(sheetIndex, value)}
-                                    options={linkAttributeOptions}
-                                />
-                            </Form.Item>
-                        )}
-                        {sheet.type === ImportType.LINK && sheet.linkAttributeProps?.type === AttributeType.tree && (
-                            <Form.Item label={t('import.tree_link_library')} required>
-                                <KitSelect
-                                    style={{minWidth: 200}}
-                                    value={sheet.treeLinkLibrary}
-                                    placeholder={t('import.select_library')}
-                                    onChange={value => onTreeLinkLibrarySelect(sheetIndex, value)}
-                                    options={selectTreeLinkLibraryOptions}
-                                />
-                            </Form.Item>
-                        )}
-                    </>
-                )}
-            </SettingsWrapper>
-        </Form>
-    );
-}
-
-export default ImportSheetSettings;

package/src/components/ImportModal/ImportModalConfigStep/ImportSheetSettings/index.ts

@@ -1,5 +0,0 @@
-// 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 ImportSheetSettings from './ImportSheetSettings';
-export default ImportSheetSettings;

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

@@ -1,5 +0,0 @@
-// 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 ImportModalConfigStep from './ImportModalConfigStep';
-export default ImportModalConfigStep;

package/src/components/ImportModal/ImportModalDoneStep/ImportModalDoneStep.tsx

@@ -1,28 +0,0 @@
-// 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 {Result} from 'antd';
-import {useSharedTranslation} from '_ui/hooks/useSharedTranslation';
-import {useImportReducerContext} from '../importReducer/ImportReducerContext';
-
-interface IImportModalDoneStepProps {
-    resultExtraButtons?: JSX.Element[];
-}
-
-function ImportModalDoneStep({resultExtraButtons}: IImportModalDoneStepProps): JSX.Element {
-    const {t} = useSharedTranslation();
-
-    const {state} = useImportReducerContext();
-    const {importError} = state;
-
-    return (
-        <Result
-            status={importError ? 'error' : 'success'}
-            title={importError ? t('import.import_failure') : t('import.import_done')}
-            subTitle={importError ? importError : t('import.import_done_description')}
-            extra={!importError ? resultExtraButtons : []}
-        />
-    );
-}
-
-export default ImportModalDoneStep;

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

@@ -1,5 +0,0 @@
-// 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 ImportModalDoneStep from './ImportModalDoneStep';
-export default ImportModalDoneStep;

package/src/components/ImportModal/ImportModalProcessingStep/ImportModalProcessingStep.tsx

@@ -1,17 +0,0 @@
-// 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 styled from 'styled-components';
-import {useSharedTranslation} from '_ui/hooks/useSharedTranslation';
-
-const CenteredWrapper = styled.div`
-    text-align: center;
-`;
-
-function ImportModalProcessingStep(): JSX.Element {
-    const {t} = useSharedTranslation();
-
-    return <CenteredWrapper data-test-id="processing">{t('global.processing') + '...'}</CenteredWrapper>;
-}
-
-export default ImportModalProcessingStep;

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

@@ -1,5 +0,0 @@
-// 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 ImportModalProcessingStep from './ImportModalProcessingStep';
-export default ImportModalProcessingStep;