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

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

@@ -0,0 +1,134 @@
+// 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

@@ -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 EditLibraryIndexation} from './EditLibraryIndexation';

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

@@ -0,0 +1,159 @@
+// 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

@@ -0,0 +1,306 @@
+// 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

@@ -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 EditLibraryInfoForm} from './EditLibraryInfoForm';

package/src/components/EditLibraryModal/EditLibrary/EditLibraryInfo/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 EditLibraryInfo} from './EditLibraryInfo';