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

package/src/components/EditLibraryModal/EditLibraryModal.tsx

@@ -1,178 +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 {gql, useApolloClient} from '@apollo/client';
-import {localizedTranslation} from '@leav/utils';
-import {Button, Modal, ModalProps, Popconfirm} from 'antd';
-import {useState} from 'react';
-import {
-    PermissionsActions,
-    PermissionTypes,
-    SaveLibraryMutation,
-    useDeleteLibraryMutation,
-    useIsAllowedQuery
-} from '_ui/_gqlTypes';
-import {useLang} from '../../hooks';
-import {useSharedTranslation} from '../../hooks/useSharedTranslation';
-import {extractPermissionFromQuery} from '../../_utils';
-import {ErrorDisplay} from '../ErrorDisplay';
-import {Loading} from '../Loading';
-import EditLibrary from './EditLibrary/EditLibrary';
-
-// License text available at https://www.gnu.org/licenses/lgpl-3.0.txt
-interface IEditLibraryModalProps {
-    libraryId?: string;
-    open: boolean;
-    onPostCreate?: (library: SaveLibraryMutation['saveLibrary']) => Promise<void>;
-    onClose?: () => void;
-    width?: ModalProps['width'];
-    indexationTask?: string;
-}
-
-function EditLibraryModal({
-    open,
-    libraryId,
-    onClose,
-    onPostCreate,
-    width,
-    indexationTask
-}: IEditLibraryModalProps): JSX.Element {
-    const {t} = useSharedTranslation();
-    const {lang} = useLang();
-    const apolloClient = useApolloClient();
-
-    const isEditing = !!libraryId;
-    const permissionsQueryResult = useIsAllowedQuery({
-        fetchPolicy: 'cache-and-network',
-        variables: {
-            type: PermissionTypes.admin,
-            actions: isEditing
-                ? [PermissionsActions.admin_edit_library, PermissionsActions.admin_delete_library]
-                : [PermissionsActions.admin_create_library]
-        }
-    });
-    const isReadOnly = !extractPermissionFromQuery(
-        permissionsQueryResult,
-        isEditing ? PermissionsActions.admin_edit_library : PermissionsActions.admin_create_library
-    );
-
-    const canDelete = extractPermissionFromQuery(permissionsQueryResult, PermissionsActions.admin_delete_library);
-
-    const [deleteLibrary] = useDeleteLibraryMutation();
-
-    const [submitFunction, setSubmitFunction] = useState<() => Promise<SaveLibraryMutation['saveLibrary']>>();
-    const [submitLoading, setSubmitLoading] = useState(false);
-
-    const _handleSubmit = async () => {
-        if (!submitFunction) {
-            return;
-        }
-        setSubmitLoading(true);
-        try {
-            const savedLibrary = await submitFunction();
-
-            if (onPostCreate) {
-                await onPostCreate(savedLibrary);
-            }
-
-            onClose();
-        } catch (e) {
-            console.error(e);
-        } finally {
-            setSubmitLoading(false);
-        }
-    };
-
-    const _handleDelete = async () => {
-        if (!libraryId) {
-            return;
-        }
-
-        const deleteRes = await deleteLibrary({
-            variables: {
-                id: libraryId
-            }
-        });
-
-        // Remove library from apollo cache
-        apolloClient.cache.evict({
-            id: apolloClient.cache.identify(deleteRes.data.deleteLibrary)
-        });
-
-        onClose();
-    };
-
-    const _handleSetSubmitFunction = submitFunc => {
-        setSubmitFunction(() => submitFunc);
-    };
-
-    // Get application label from apollo cache if present
-    const libraryLabel = isEditing
-        ? apolloClient.readFragment({
-              id: apolloClient.cache.identify({
-                  __typename: 'Library',
-                  id: libraryId
-              }),
-              fragment: gql`
-                  fragment LibraryLabel on Library {
-                      label
-                  }
-              `
-          })?.label
-        : t('libraries.new_library');
-
-    const buttons = isEditing
-        ? [
-              canDelete ? (
-                  <Popconfirm
-                      key="delete_confirm"
-                      title={t('libraries.delete_confirm')}
-                      description={t('libraries.delete_confirm_warning')}
-                      okText={t('global.submit')}
-                      cancelText={t('global.cancel')}
-                      onConfirm={_handleDelete}
-                  >
-                      <Button key="delete" danger>
-                          {t('libraries.delete')}
-                      </Button>
-                  </Popconfirm>
-              ) : null,
-              <Button key="close" onClick={onClose}>
-                  {t('global.close')}
-              </Button>
-          ]
-        : [
-              <Button key="cancel" onClick={onClose}>
-                  {t('global.cancel')}
-              </Button>,
-              <Button key="submit" type="primary" onClick={_handleSubmit} loading={submitLoading}>
-                  {t('global.submit')}
-              </Button>
-          ];
-
-    return (
-        <Modal
-            open={open}
-            title={isEditing ? localizedTranslation(libraryLabel, lang) : t('libraries.new_library')}
-            width={width ?? 800}
-            footer={buttons}
-            onCancel={onClose}
-            centered
-        >
-            {permissionsQueryResult.loading ? (
-                <Loading />
-            ) : permissionsQueryResult.error ? (
-                <ErrorDisplay message={permissionsQueryResult.error.message} />
-            ) : (
-                <EditLibrary
-                    libraryId={libraryId}
-                    onSetSubmitFunction={_handleSetSubmitFunction}
-                    readOnly={isReadOnly}
-                    indexationTask={indexationTask}
-                />
-            )}
-        </Modal>
-    );
-}
-
-export default EditLibraryModal;

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

package/src/components/EditTreeModal/EditTree/EditTree.tsx

@@ -1,68 +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 {Tabs, TabsProps} from 'antd';
-import styled from 'styled-components';
-import {TreeDetailsFragment, useGetTreeByIdQuery} from '../../../_gqlTypes';
-import {useSharedTranslation} from '../../../hooks/useSharedTranslation';
-import {ErrorDisplay} from '../../ErrorDisplay';
-import {Loading} from '../../Loading';
-import {EditTreeInfo} from './EditTreeInfo';
-
-interface IEditTreeProps {
-    treeId?: string;
-    onSetSubmitFunction?: (submitFunction: () => Promise<TreeDetailsFragment>) => void;
-    readOnly?: boolean;
-}
-
-const TabContentWrapper = styled.div`
-    height: calc(95vh - 15rem);
-`;
-
-function EditTree({treeId, onSetSubmitFunction, readOnly: isReadOnly}: IEditTreeProps): JSX.Element {
-    const {t} = useSharedTranslation();
-    const isEditing = !!treeId;
-
-    const {loading, error, data} = useGetTreeByIdQuery({
-        fetchPolicy: 'cache-and-network',
-        variables: {
-            id: [treeId]
-        },
-        skip: !treeId
-    });
-
-    if (loading) {
-        return <Loading />;
-    }
-
-    if (error) {
-        return <ErrorDisplay message={error?.message} />;
-    }
-
-    const treeData = data?.trees?.list[0] ?? null;
-
-    const treeInfoComp = (
-        <EditTreeInfo tree={treeData} onSetSubmitFunction={onSetSubmitFunction} readOnly={isReadOnly} />
-    );
-
-    // If creating new library, return the form directly
-    if (!isEditing) {
-        return treeInfoComp;
-    }
-
-    if (!treeData) {
-        return <ErrorDisplay message={t('trees.unknown_tree')} />;
-    }
-
-    const tabs: TabsProps['items'] = [
-        {
-            key: 'info',
-            label: t('global.info'),
-            children: <TabContentWrapper>{treeInfoComp}</TabContentWrapper>
-        }
-    ];
-
-    return <Tabs items={tabs} />;
-}
-
-export default EditTree;

package/src/components/EditTreeModal/EditTree/EditTreeInfo/EditTreeInfo.tsx

@@ -1,171 +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 {Form} from 'antd';
-import {useEffect} from 'react';
-import {useLang} from '../../../../hooks';
-import {
-    TreeDetailsFragment,
-    TreeInput,
-    useCheckTreeExistenceLazyQuery,
-    useSaveTreeMutation
-} from '../../../../_gqlTypes';
-import {EditTreeInfoForm} from './EditTreeInfoForm';
-
-interface IEditTreeInfoProps {
-    tree?: TreeDetailsFragment;
-    onSetSubmitFunction?: (submitFunction: () => Promise<TreeDetailsFragment>) => void;
-    readOnly?: boolean;
-}
-
-function EditTreeInfo({tree, onSetSubmitFunction, readOnly}: IEditTreeInfoProps): JSX.Element {
-    const {availableLangs} = useLang();
-    const [form] = Form.useForm();
-    const isEditing = !!tree;
-
-    const [saveTree, {loading}] = useSaveTreeMutation();
-
-    const [checkTreeExistence] = useCheckTreeExistenceLazyQuery({
-        fetchPolicy: 'no-cache',
-        nextFetchPolicy: 'no-cache',
-        partialRefetch: false
-    });
-
-    useEffect(() => {
-        if (onSetSubmitFunction) {
-            onSetSubmitFunction(_submitForm);
-        }
-    }, []);
-
-    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;
-            }, {});
-
-        const libraries: TreeInput['libraries'] = (form.getFieldValue('libraries') ?? []).map(library => {
-            const {__typename, ...settingsToSave} = library.settings;
-            return {
-                library: library.library.id,
-                settings: settingsToSave
-            };
-        });
-
-        try {
-            const res = await saveTree({
-                variables: {
-                    tree: {
-                        id: values.id,
-                        label,
-                        behavior: values.behavior,
-                        libraries
-                    }
-                }
-            });
-
-            return res.data.saveTree;
-        } 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) => {
-        // Consider boolean fields as always touched
-        if (!isEditing || (!form.isFieldTouched(field) && typeof value !== 'boolean')) {
-            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 === 'libraries') {
-            const librariesToSave: TreeInput['libraries'] = value.map(library => {
-                const {__typename, ...settingsToSave} = library.settings;
-                return {
-                    library: library.library.id,
-                    settings: settingsToSave
-                };
-            });
-
-            dataToSave = {
-                libraries: librariesToSave
-            };
-        } else {
-            dataToSave = {
-                [field]: value
-            };
-        }
-
-        try {
-            await saveTree({
-                variables: {
-                    tree: {
-                        id: tree.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 _isTreeUnique = async (value: any) => {
-        const {data: treeExistenceData} = await checkTreeExistence({
-            variables: {
-                id: value
-            }
-        });
-
-        return !treeExistenceData?.trees?.totalCount;
-    };
-
-    return (
-        <EditTreeInfoForm
-            form={form}
-            onCheckTreeUniqueness={_isTreeUnique}
-            onSubmitField={_submitField}
-            tree={tree}
-            loading={loading}
-            readOnly={readOnly}
-        />
-    );
-}
-
-export default EditTreeInfo;

package/src/components/EditTreeModal/EditTree/EditTreeInfo/EditTreeInfoForm/EditTreeInfoForm.tsx

@@ -1,216 +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 {idFormatRegex, slugifyString} from '@leav/utils';
-import {Form, FormInstance, Input, Select} from 'antd';
-import React, {useState} from 'react';
-import {useLang} from '../../../../../hooks';
-import {useSharedTranslation} from '../../../../../hooks/useSharedTranslation';
-import {TreeBehavior, TreeDetailsFragment} from '../../../../../_gqlTypes';
-import FieldsGroup from '../../../../FieldsGroup';
-import {SubmitStateNotifier} from '../../../../SubmitStateNotifier';
-import {TreeLibrariesForm} from './TreeLibrariesForm';
-
-export type FormValues = Partial<TreeDetailsFragment>;
-
-interface IEditTreeInfoFormProps {
-    form: FormInstance<FormValues>;
-    tree: TreeDetailsFragment;
-    loading: boolean;
-    onSubmitField: (field: string, value: any) => Promise<void>;
-    onCheckTreeUniqueness: (value: string) => Promise<boolean>;
-    readOnly?: boolean;
-}
-
-function EditTreeInfoForm({
-    form,
-    tree,
-    onSubmitField,
-    onCheckTreeUniqueness,
-    loading,
-    readOnly: isReadOnly
-}: IEditTreeInfoFormProps): JSX.Element {
-    const {t} = useSharedTranslation();
-    const {availableLangs, defaultLang} = useLang();
-    const [hasIdBeenEdited, setHasIdBeenEdited] = useState(false);
-    const [runningFieldsSubmit, setRunningFieldsSubmit] = useState<string[]>([]);
-    const [processedFieldsSubmit, setProcessedFieldsSubmit] = useState<string[]>([]);
-
-    const isEditing = !!tree;
-
-    const _getRequiredMessage = (field: string) =>
-        t('errors.field_required', {
-            interpolation: {escapeValue: false},
-            fieldName: t(`trees.${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 _handleTreeUniquenessValidation = async (rule, value) => {
-        if (value && (!isEditing || value !== formInitValues.id)) {
-            const isTreeUnique = await onCheckTreeUniqueness(value);
-
-            if (!isTreeUnique) {
-                throw new Error();
-            }
-        }
-    };
-
-    const _handleFieldSubmit = async (field: string, value: any) => {
-        if (!isEditing) {
-            return;
-        }
-
-        // Consider boolean fields as always touched
-        if (!form.isFieldTouched(field) && typeof value !== 'boolean') {
-            return;
-        }
-
-        setRunningFieldsSubmit([...runningFieldsSubmit, field]);
-
-        await onSubmitField(field, value);
-        setProcessedFieldsSubmit([...processedFieldsSubmit, field]);
-
-        setRunningFieldsSubmit(runningFieldsSubmit.filter(f => f !== field));
-    };
-
-    const _handleLibrariesChange = (libraries: TreeDetailsFragment['libraries']) => {
-        _handleFieldSubmit('libraries', libraries);
-    };
-
-    const _handleBlur = (field: string) => async (e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => {
-        _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: treeLabel, ...treeSettings} = tree ?? {};
-    const label = treeLabel
-        ? {
-              ...availableLangs.reduce((acc, availableLang) => {
-                  acc[`label_${availableLang}`] = tree.label[availableLang] ?? '';
-                  return acc;
-              }, {})
-          }
-        : {};
-
-    const formInitValues: FormValues = {
-        behavior: TreeBehavior.standard,
-        ...treeSettings,
-        ...label
-    };
-
-    const behaviorSelectOptions = Object.values(TreeBehavior).map(b => ({
-        key: b,
-        value: b,
-        label: t(`trees.behavior_${b}`)
-    }));
-
-    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';
-        }
-    };
-
-    return (
-        <Form
-            aria-label="tree_form"
-            form={form}
-            labelCol={{span: 6}}
-            wrapperCol={{span: 24}}
-            initialValues={formInitValues}
-            labelWrap
-            disabled={!isEditing && loading}
-        >
-            <FieldsGroup label={t('trees.label')} key="tree_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: _handleTreeUniquenessValidation,
-                        message: t('errors.id_already_exists')
-                    }
-                ]}
-                hasFeedback
-            >
-                <Input disabled={isReadOnly || isEditing} onChange={_handleIdChange} />
-            </Form.Item>
-            <Form.Item
-                name="behavior"
-                key="behavior"
-                label={t('trees.behavior')}
-                validateTrigger={['onBlur', 'onChange', 'onSubmit']}
-                rules={[{required: true, message: _getRequiredMessage('behavior')}]}
-                hasFeedback
-            >
-                <Select options={behaviorSelectOptions} disabled={isReadOnly || isEditing} aria-label="" />
-            </Form.Item>
-            <Form.Item name="libraries" key="libraries">
-                <TreeLibrariesForm
-                    readOnly={isReadOnly}
-                    onChange={_handleLibrariesChange}
-                    extra={<SubmitStateNotifier state={_getFieldState('libraries')} />}
-                />
-            </Form.Item>
-        </Form>
-    );
-}
-
-export default EditTreeInfoForm;