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

package/src/components/EditLibraryModal/EditLibrary/EditLibraryIndexation/EditLibraryIndexation.tsx

@@ -1,134 +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 {
-    GetLibraryByIdQuery,
-    useSaveLibraryMutation,
-    useCancelTaskMutation,
-    useIndexRecordsMutation
-} from '../../../../_gqlTypes';
-import {Divider, SelectProps} from 'antd';
-// eslint-disable-next-line no-duplicate-imports
-import {Select, Button, Alert, Space} from 'antd';
-import {localizedTranslation} from '@leav/utils';
-import {useLang} from '../../../../hooks';
-import {useEffect, useState} from 'react';
-import {useSharedTranslation} from '../../../../hooks/useSharedTranslation';
-
-interface IEditLibraryAttributesProps {
-    library: GetLibraryByIdQuery['libraries']['list'][number];
-    indexationTask?: string;
-    readOnly?: boolean;
-}
-
-function EditLibraryIndexation({library, indexationTask, readOnly}: IEditLibraryAttributesProps): JSX.Element {
-    const {t} = useSharedTranslation();
-    const {lang} = useLang();
-    const [saveLibrary] = useSaveLibraryMutation();
-    const [indexRecords] = useIndexRecordsMutation();
-    const [cancelTaskMutation] = useCancelTaskMutation();
-    const [fullTextAttributes, setFullTextAttributes] = useState<string[]>(library.fullTextAttributes.map(e => e.id));
-    const [isEdited, setIsEdited] = useState<boolean>(false);
-    const isReadOnly = readOnly || !(library.permissions?.admin_library ?? true);
-
-    const options: SelectProps['options'] = library.attributes.map(a => ({
-        label: localizedTranslation(a.label, lang),
-        value: a.id
-    }));
-
-    const _onChange = (value: string[]) => {
-        setFullTextAttributes(value);
-    };
-
-    const _onSubmit = async () => {
-        await saveLibrary({
-            variables: {
-                library: {
-                    id: library.id,
-                    fullTextAttributes
-                }
-            }
-        });
-    };
-
-    const _onRefresh = async () => {
-        await indexRecords({
-            variables: {
-                libraryId: library.id
-            }
-        });
-    };
-
-    const _onCancel = async () => {
-        await cancelTaskMutation({
-            variables: {
-                taskId: indexationTask
-            }
-        });
-    };
-
-    useEffect(() => {
-        const intersections = library.fullTextAttributes.filter(value => fullTextAttributes.includes(value.id));
-
-        setIsEdited(
-            intersections.length !== library.fullTextAttributes.length ||
-                intersections.length !== fullTextAttributes.length
-        );
-    }, [library.fullTextAttributes, fullTextAttributes]);
-
-    const _formatLabel = (label: string): string =>
-        label
-            .trim()
-            .toLowerCase()
-            .normalize('NFD') // split accents and base letter
-            .replace(/[\u0300-\u036f]/g, ''); // remove all previously split accents to leave only base letters
-
-    const _onFilter = (inputValue, option): boolean =>
-        _formatLabel(option.label.toString()).includes(_formatLabel(inputValue));
-
-    return (
-        <Space style={{display: 'flex'}} direction="vertical">
-            {!!indexationTask ? (
-                <Alert
-                    message={t('libraries.indexation_in_progress')}
-                    type="warning"
-                    showIcon
-                    action={
-                        <Button disabled={isReadOnly} size="small" danger onClick={_onCancel}>
-                            {t('global.cancel')}
-                        </Button>
-                    }
-                />
-            ) : (
-                <>
-                    <Button block type="primary" onClick={_onRefresh} disabled={isReadOnly}>
-                        {t('libraries.sync_indexation')}
-                    </Button>
-                    <Divider orientation="left">{t('libraries.indexed_attributes')}</Divider>
-                    <Select
-                        optionFilterProp="label"
-                        disabled={isReadOnly}
-                        mode="multiple"
-                        allowClear
-                        style={{width: '100%'}}
-                        placeholder={t('attributes.select_indexed_attributes')}
-                        defaultValue={library.fullTextAttributes.map(a => a.id)}
-                        onChange={_onChange}
-                        options={options}
-                        filterOption={_onFilter}
-                    />
-                    <Button
-                        style={{float: 'right'}}
-                        type="primary"
-                        onClick={_onSubmit}
-                        disabled={!isEdited || isReadOnly}
-                    >
-                        {t('global.submit')}
-                    </Button>
-                </>
-            )}
-        </Space>
-    );
-}
-
-export default EditLibraryIndexation;

package/src/components/EditLibraryModal/EditLibrary/EditLibraryIndexation/index.ts

@@ -1,4 +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
-export {default as EditLibraryIndexation} from './EditLibraryIndexation';

package/src/components/EditLibraryModal/EditLibrary/EditLibraryInfo/EditLibraryInfo.tsx

@@ -1,159 +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 {WithTypename} from '@leav/utils';
-import {Form} from 'antd';
-import {useEffect} from 'react';
-import {
-    GetLibraryByIdQuery,
-    SaveLibraryMutation,
-    useCheckLibraryExistenceLazyQuery,
-    useSaveLibraryMutation
-} from '../../../../_gqlTypes';
-import {useLang} from '../../../../hooks';
-import {EditLibraryInfoForm} from './EditLibraryInfoForm';
-
-interface IEditApplicationInfoProps {
-    library?: GetLibraryByIdQuery['libraries']['list'][number];
-    onSetSubmitFunction?: (submitFunction: () => Promise<SaveLibraryMutation['saveLibrary']>) => void;
-    readOnly?: boolean;
-}
-
-function EditApplicationInfo({library, onSetSubmitFunction, readOnly}: IEditApplicationInfoProps): JSX.Element {
-    const {availableLangs} = useLang();
-    const [form] = Form.useForm();
-    const isEditing = !!library;
-
-    const [saveLibrary, {loading}] = useSaveLibraryMutation();
-
-    const [checkLibraryExistence] = useCheckLibraryExistenceLazyQuery({
-        fetchPolicy: 'no-cache',
-        nextFetchPolicy: 'no-cache',
-        partialRefetch: false
-    });
-
-    const _submitForm = async () => {
-        await form.validateFields();
-        const values = form.getFieldsValue();
-
-        const label = Object.keys(values)
-            .filter(key => key.startsWith('label_'))
-            .reduce((acc, key) => {
-                acc[key.replace('label_', '')] = values[key];
-                return acc;
-            }, {});
-
-        try {
-            const res = await saveLibrary({
-                variables: {
-                    library: {
-                        id: values.id,
-                        label,
-                        behavior: values.behavior
-                    }
-                }
-            });
-
-            return res.data.saveLibrary;
-        } catch (e) {
-            // Display errors in form
-            form.setFields(
-                Object.keys(e.graphQLErrors?.[0]?.extensions?.fields ?? {}).map(fieldName => {
-                    return {
-                        name: fieldName,
-                        errors: [e.graphQLErrors[0].extensions.fields[fieldName]]
-                    };
-                })
-            );
-
-            throw e;
-        }
-    };
-
-    const _submitField = async (field: string, value: any) => {
-        if (!form.isFieldTouched(field) || !isEditing) {
-            return;
-        }
-
-        await form.validateFields([field]);
-
-        let dataToSave;
-        if (field.startsWith('label_')) {
-            const modifiedLang = field.replace('label_', '');
-            dataToSave = {
-                label: availableLangs.reduce((acc, lang) => {
-                    acc[lang] = lang === modifiedLang ? value : form.getFieldValue(`label_${lang}`);
-                    return acc;
-                }, {})
-            };
-        } else if (field.startsWith('recordIdentityConf')) {
-            const {__typename, ...existingConf} = (library.recordIdentityConf as WithTypename<typeof library>) || {};
-
-            dataToSave = {
-                recordIdentityConf: {
-                    ...existingConf,
-                    [field.replace('recordIdentityConf_', '')]: value ?? null
-                }
-            };
-        } else {
-            dataToSave = {
-                [field]: value
-            };
-        }
-
-        try {
-            await saveLibrary({
-                variables: {
-                    library: {
-                        id: library.id,
-                        ...dataToSave
-                    }
-                }
-            });
-
-            form.setFields([
-                {
-                    name: field,
-                    touched: false
-                }
-            ]);
-        } catch (err) {
-            // Display errors in form
-            form.setFields([
-                {
-                    name: field,
-                    errors: [err.graphQLErrors?.[0]?.extensions?.fields?.[field] ?? err.message]
-                }
-            ]);
-        }
-    };
-
-    const _isLibraryUnique = async (value: any) => {
-        const {data: libraryExistenceData} = await checkLibraryExistence({
-            variables: {
-                id: value
-            }
-        });
-
-        return !libraryExistenceData?.libraries?.totalCount;
-    };
-
-    useEffect(() => {
-        if (onSetSubmitFunction) {
-            onSetSubmitFunction(_submitForm);
-        }
-    }, []);
-
-    return (
-        <EditLibraryInfoForm
-            form={form}
-            onCheckLibraryUniqueness={_isLibraryUnique}
-            onSubmitField={_submitField}
-            library={library}
-            loading={loading}
-            readOnly={readOnly}
-        />
-    );
-}
-
-export default EditApplicationInfo;

package/src/components/EditLibraryModal/EditLibrary/EditLibraryInfo/EditLibraryInfoForm/EditLibraryInfoForm.tsx

@@ -1,306 +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 {CloseOutlined} from '@ant-design/icons';
-import {idFormatRegex, localizedTranslation, slugifyString} from '@leav/utils';
-import {Form, FormInstance, Input, Select} from 'antd';
-import React, {useState} from 'react';
-import styled from 'styled-components';
-import {useLang} from '../../../../../hooks';
-import {useSharedTranslation} from '../../../../../hooks/useSharedTranslation';
-import {
-    AttributeType,
-    GetLibraryByIdQuery,
-    LibraryBehavior,
-    LibraryLinkAttributeDetailsFragment
-} from '../../../../../_gqlTypes';
-import FieldsGroup from '../../../../FieldsGroup';
-import {SubmitStateNotifier} from '../../../../SubmitStateNotifier';
-
-const SelectFormItem = styled(Form.Item)`
-    .ant-form-item-extra {
-        min-height: 0;
-    }
-`;
-
-interface IEditLibraryInfoFormProps {
-    form: FormInstance;
-    library: GetLibraryByIdQuery['libraries']['list'][number];
-    loading: boolean;
-    onSubmitField: (field: string, value: any) => Promise<void>;
-    onCheckLibraryUniqueness: (value: string) => Promise<boolean>;
-    readOnly?: boolean;
-}
-
-function EditLibraryInfoForm({
-    form,
-    library,
-    onSubmitField,
-    onCheckLibraryUniqueness,
-    loading,
-    readOnly
-}: IEditLibraryInfoFormProps): JSX.Element {
-    const {t} = useSharedTranslation();
-    const {lang, availableLangs, defaultLang} = useLang();
-    const isEditing = !!library;
-
-    const [hasIdBeenEdited, setHasIdBeenEdited] = useState(false);
-    const [runningFieldsSubmit, setRunningFieldsSubmit] = useState<string[]>([]);
-    const [processedFieldsSubmit, setProcessedFieldsSubmit] = useState<string[]>([]);
-    const isReadOnly = readOnly || (isEditing && !library?.permissions?.admin_library);
-
-    const _getRequiredMessage = (field: string) =>
-        t('errors.field_required', {
-            interpolation: {escapeValue: false},
-            fieldName: t(`libraries.${field}`)
-        });
-
-    const _handleLabelChange = (labelLang: string) => (e: React.ChangeEvent<HTMLInputElement>) => {
-        // If ID hasn't been edited manually, generate it from label
-        if (!isEditing && labelLang === defaultLang && !hasIdBeenEdited) {
-            form.setFieldsValue({id: slugifyString(e.target.value)});
-        }
-    };
-
-    const _handleIdChange = () => {
-        setHasIdBeenEdited(true);
-    };
-
-    const _handleLibraryUniquenessValidation = async (rule, value) => {
-        if (value && (!isEditing || value !== formInitValues.id)) {
-            const isLibUnique = await onCheckLibraryUniqueness(value);
-
-            if (!isLibUnique) {
-                throw new Error();
-            }
-        }
-    };
-
-    const _handleFieldSubmit = async (field: string, value: any) => {
-        if (!form.isFieldTouched(field)) {
-            return;
-        }
-
-        setRunningFieldsSubmit([...runningFieldsSubmit, field]);
-
-        await onSubmitField(field, value);
-        setProcessedFieldsSubmit([...processedFieldsSubmit, field]);
-
-        setRunningFieldsSubmit(runningFieldsSubmit.filter(f => f !== field));
-    };
-
-    const _handleSelectChange = (field: string) => (value: string) => {
-        _handleFieldSubmit(field, value);
-    };
-
-    const _handleBlur = (field: string) => async (e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => {
-        if (isEditing) {
-            _handleFieldSubmit(field, e.target.value);
-        }
-    };
-
-    const _handleSubmitOnEnter = (field: string) => (
-        e: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>
-    ) => {
-        // If shift is pressed, don't submit
-        if (e.shiftKey || !isEditing) {
-            return;
-        }
-
-        if (e.key === 'Enter') {
-            e.preventDefault();
-
-            _handleFieldSubmit(field, e.currentTarget.value);
-        }
-    };
-
-    const {label: libLabel, recordIdentityConf: libRecordIdentityConf, ...librarySettings} = library ?? {};
-    const label = libLabel
-        ? {
-              ...availableLangs.reduce((acc, availableLang) => {
-                  acc[`label_${availableLang}`] = library.label[availableLang] ?? '';
-                  return acc;
-              }, {})
-          }
-        : {};
-
-    const recordIdentityConf = Object.keys(libRecordIdentityConf ?? {})
-        .filter(key => key !== '__typename')
-        .reduce(
-            (acc, confKey) => ({
-                ...acc,
-                [`recordIdentityConf_${confKey}`]: libRecordIdentityConf[confKey] ?? null
-            }),
-            {}
-        );
-
-    const formInitValues = {
-        behavior: LibraryBehavior.standard,
-        ...librarySettings,
-        ...label,
-        ...recordIdentityConf
-    };
-
-    const _getFieldState = (field: string) => {
-        if (runningFieldsSubmit.find(f => f === field)) {
-            return 'processing';
-        } else if (processedFieldsSubmit.find(f => f === field)) {
-            return 'success';
-        } else if (form.getFieldError(field).length) {
-            return 'error';
-        } else {
-            return 'idle';
-        }
-    };
-
-    const _toAttributeSelectOption = a => ({
-        key: a.id,
-        value: a.id,
-        label: localizedTranslation(a.label, lang) || a.id
-    });
-
-    const behaviorOptions = Object.values(LibraryBehavior).map(b => ({
-        key: b,
-        value: b,
-        label: t(`libraries.behavior_${b}`)
-    }));
-
-    const attributesOptions = (library?.attributes ?? []).map(_toAttributeSelectOption);
-
-    const filesLinkAttributesOptions = (library?.attributes ?? [])
-        .filter(
-            a =>
-                (a.type === AttributeType.simple_link || a.type === AttributeType.advanced_link) &&
-                (a as LibraryLinkAttributeDetailsFragment).linked_library?.behavior === LibraryBehavior.files
-        )
-        .map(_toAttributeSelectOption);
-
-    const treeAttributesOptions = (library?.attributes ?? [])
-        .filter(a => a.type === AttributeType.tree)
-        .map(_toAttributeSelectOption);
-
-    const recordIdentityFields = [
-        {
-            fieldName: 'label',
-            options: attributesOptions
-        },
-        {
-            fieldName: 'subLabel',
-            options: attributesOptions
-        },
-        {
-            fieldName: 'preview',
-            options: filesLinkAttributesOptions
-        },
-        {
-            fieldName: 'color',
-            options: attributesOptions
-        },
-        {
-            fieldName: 'treeColorPreview',
-            options: treeAttributesOptions
-        }
-    ];
-
-    return (
-        <Form
-            aria-label="application_form"
-            form={form}
-            labelCol={{span: 6}}
-            wrapperCol={{span: 24}}
-            initialValues={formInitValues}
-            labelWrap
-            disabled={!isEditing && loading}
-        >
-            <FieldsGroup label={t('libraries.label')} key="app_label">
-                {availableLangs.map(availableLang => (
-                    <Form.Item
-                        key={`label_${availableLang}`}
-                        name={`label_${availableLang}`}
-                        label={availableLang.toLowerCase()}
-                        labelCol={{span: 2}}
-                        wrapperCol={{span: 22}}
-                        rules={[
-                            {required: availableLang === defaultLang, message: t('errors.default_language_required')}
-                        ]}
-                        style={{marginBottom: '0.5rem'}}
-                    >
-                        <Input
-                            aria-label={`label_${availableLang}`}
-                            onChange={_handleLabelChange(availableLang)}
-                            onBlur={_handleBlur(`label_${availableLang}`)}
-                            onKeyPress={_handleSubmitOnEnter(`label_${availableLang}`)}
-                            disabled={isReadOnly || !!runningFieldsSubmit.find(f => f === `label_${availableLang}`)}
-                            suffix={<SubmitStateNotifier state={_getFieldState(`label_${availableLang}`)} />}
-                        />
-                    </Form.Item>
-                ))}
-            </FieldsGroup>
-            <Form.Item
-                name="id"
-                key="id"
-                label={t('global.id')}
-                validateTrigger={['onBlur', 'onChange', 'onSubmit']}
-                rules={[
-                    {required: true, message: _getRequiredMessage('id')},
-                    {pattern: idFormatRegex, message: t('errors.invalid_id_format')},
-                    {
-                        validateTrigger: ['onBlur', 'onSubmit'],
-                        validator: _handleLibraryUniquenessValidation,
-                        message: t('errors.id_already_exists')
-                    }
-                ]}
-                hasFeedback
-            >
-                <Input disabled={isReadOnly || isEditing} onChange={_handleIdChange} />
-            </Form.Item>
-            <Form.Item
-                name="behavior"
-                key="behavior"
-                label={t('libraries.behavior')}
-                validateTrigger={['onBlur', 'onChange', 'onSubmit']}
-                rules={[{required: true, message: _getRequiredMessage('behavior')}]}
-                hasFeedback
-            >
-                <Select options={behaviorOptions} disabled={isReadOnly || isEditing} aria-label="" />
-            </Form.Item>
-            {isEditing && (
-                <FieldsGroup label={t('libraries.record_identity')} key="recordIdentityConf">
-                    {recordIdentityFields.map(({fieldName, options}) => (
-                        <SelectFormItem
-                            key={fieldName}
-                            name={`recordIdentityConf_${fieldName}`}
-                            label={t(`libraries.${fieldName}`)}
-                            labelCol={{span: 6}}
-                            style={{marginBottom: '0.5rem'}}
-                            extra={
-                                <SubmitStateNotifier
-                                    state={_getFieldState(fieldName)}
-                                    style={{
-                                        position: 'absolute',
-                                        right: '35px',
-                                        top: '0',
-                                        transform: 'translateY(6px)'
-                                    }}
-                                    aria-label=""
-                                />
-                            }
-                        >
-                            <Select
-                                allowClear={{clearIcon: <CloseOutlined />}}
-                                autoClearSearchValue
-                                showSearch
-                                onChange={_handleSelectChange(`recordIdentityConf_${fieldName}`)}
-                                options={options}
-                                disabled={isReadOnly || !!runningFieldsSubmit.find(f => f === fieldName)}
-                                aria-label=""
-                            />
-                        </SelectFormItem>
-                    ))}
-                </FieldsGroup>
-            )}
-        </Form>
-    );
-}
-
-export default EditLibraryInfoForm;

package/src/components/EditLibraryModal/EditLibrary/EditLibraryInfo/EditLibraryInfoForm/index.ts

@@ -1,4 +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
-export {default as EditLibraryInfoForm} from './EditLibraryInfoForm';

package/src/components/EditLibraryModal/EditLibrary/EditLibraryInfo/index.ts

@@ -1,4 +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
-export {default as EditLibraryInfo} from './EditLibraryInfo';