@leav/ui 0.2.7 → 0.2.8

package/dist/components/RecordEdition/EditRecord/uiElements/StandardField/StandardFieldValue/StandardFieldValue.js

@@ -0,0 +1,680 @@
+import {jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs} from 'react/jsx-runtime';
+// 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, ExclamationCircleOutlined} from '@ant-design/icons';
+import {Button, Form, Input, Popover, Space, theme} from 'antd';
+import moment from 'moment';
+import React, {useEffect, useRef} from 'react';
+import styled from 'styled-components';
+import {themeVars} from '../../../../../../antdTheme';
+import {FloatingMenu} from '../../../../../../components';
+import Dimmer from '../../../../../../components/Dimmer';
+import DeleteValueBtn from '../../../../../../components/RecordEdition/EditRecord/shared/DeleteValueBtn';
+import InheritedFieldLabel from '../../../../../../components/RecordEdition/EditRecord/shared/InheritedFieldLabel';
+import UpdatedFieldIcon from '../../../../../../components/RecordEdition/EditRecord/shared/UpdatedFieldIcon';
+import ValueDetailsBtn from '../../../../../../components/RecordEdition/EditRecord/shared/ValueDetailsBtn';
+import ValuesVersionBtn from '../../../../../../components/RecordEdition/EditRecord/shared/ValuesVersionBtn';
+import ValuesVersionIndicator from '../../../../../../components/RecordEdition/EditRecord/shared/ValuesVersionIndicator';
+import {FieldScope} from '../../../../../../components/RecordEdition/EditRecord/_types';
+import {EditRecordReducerActionsTypes} from '../../../../../../components/RecordEdition/editRecordModalReducer/editRecordModalReducer';
+import {useEditRecordModalReducer} from '../../../../../../components/RecordEdition/editRecordModalReducer/useEditRecordModalReducer';
+import {useSharedTranslation} from '../../../../../../hooks/useSharedTranslation';
+import {AttributeFormat} from '../../../../../../_gqlTypes';
+import {stringifyDateRangeValue} from '../../../../../../_utils';
+import {
+    newValueId,
+    StandardFieldReducerActionsTypes,
+    StandardFieldValueState
+} from '../../../reducers/standardFieldReducer/standardFieldReducer';
+import CheckboxInput from './Inputs/CheckboxInput';
+import ColorInput from './Inputs/ColorInput';
+import DateInput from './Inputs/DateInput';
+import DateRangeInput from './Inputs/DateRangeInput';
+import EncryptedInput from './Inputs/EncryptedInput';
+import NumberInput from './Inputs/NumberInput';
+import TextInput from './Inputs/TextInput';
+import ValuesList from './ValuesList';
+const ErrorMessage = styled.div`
+    color: ${themeVars.errorColor};
+    font-weight: bold;
+`;
+const FormWrapper = styled.div`
+    position: relative;
+    z-index: ${p => (p.$isEditing ? 2 : 0)};
+`;
+const InputWrapper = styled.div`
+    position: relative;
+
+    && input {
+        background: ${themeVars.defaultBg};
+        transition: none;
+        border-radius: 0;
+        line-height: 2.5em;
+        padding-left: 17px;
+    }
+
+    ${FormWrapper}:not(:last-child) & input:not(:hover) {
+        border-bottom: none;
+    }
+
+    ${FormWrapper}:first-child & input {
+        border-top-left-radius: 5px;
+        border-top-right-radius: 5px;
+    }
+
+    ${FormWrapper}:last-child & input {
+        border-bottom-left-radius: 5px;
+        border-bottom-right-radius: 5px;
+    }
+
+    &.editing input {
+        border-radius: 5px;
+    }
+
+    &.editing .field-wrapper,
+    &.editing .nested-input {
+        z-index: 0;
+    }
+
+    &.format-boolean label {
+        margin-right: 1em;
+    }
+
+    &:not(.format-boolean) label {
+        position: absolute;
+        left: 11px;
+        top: calc(50% - 0.9em);
+        font-size: 1.1em;
+        background: transparent;
+        padding: 0 0.5em;
+        color: ${themeVars.secondaryTextColor};
+        transition: all 0.2s ease;
+        transition-property: left, top, font-size;
+        z-index: 1;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        width: 100%;
+    }
+
+    &:not(.format-boolean):not(.editing):not(.has-value) label {
+        padding-right: 3rem;
+    }
+
+    input:disabled {
+        background: ${themeVars.defaultBg};
+    }
+
+    &.has-value:not(.format-boolean) label,
+    &.editing:not(.format-boolean) label {
+        top: 0px;
+        font-size: 0.9em;
+        background: transparent;
+        text-shadow: 0px 0px 4px #fff;
+        z-index: 2;
+        border-radius: 5px;
+    }
+
+    ${FormWrapper}.first-value &.has-value:not(.format-boolean) input:not(:first-child),
+    ${FormWrapper}.first-value &.editing:not(.format-boolean) input:not(:only-child),
+    ${FormWrapper}.first-value &.editing.format-date_range input,
+    ${FormWrapper}.first-value &.editing.format-date_range .ant-picker-range-separator {
+        padding-top: 1em;
+    }
+
+    &:not(.has-value):not(.editing):not(.format-boolean) input {
+        padding: 9px 0;
+    }
+
+    &:not(:hover) .floating-menu {
+        display: none;
+    }
+
+    .floating-menu {
+        top: 50%;
+        transform: translateY(-50%);
+    }
+`;
+const ActionsWrapper = styled.div`
+    position: absolute;
+    display: flex;
+    width: 100%;
+    flex-direction: column;
+`;
+const ButtonsWrapper = styled.div`
+    display: flex;
+    margin: 0.5em 0;
+    justify-content: flex-end;
+
+    & > button {
+        margin-left: 0.5em;
+    }
+`;
+const FormItem = styled(Form.Item)`
+    && {
+        margin: 0;
+    }
+`;
+const RichTextEditorInput = React.lazy(() => import('./Inputs/RichTextEditorInput'));
+const inputComponentByFormat = {
+    [AttributeFormat.text]: TextInput,
+    [AttributeFormat.date]: DateInput,
+    [AttributeFormat.date_range]: DateRangeInput,
+    [AttributeFormat.boolean]: CheckboxInput,
+    [AttributeFormat.numeric]: NumberInput,
+    [AttributeFormat.encrypted]: EncryptedInput,
+    [AttributeFormat.extended]: TextInput,
+    [AttributeFormat.color]: ColorInput,
+    [AttributeFormat.rich_text]: RichTextEditorInput
+};
+function StandardFieldValue({value: fieldValue, onSubmit, onDelete, onScopeChange, state, dispatch}) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    const {t, i18n} = useSharedTranslation();
+    const {token} = theme.useToken();
+    const actionsWrapperRef = useRef();
+    const inputRef = useRef();
+    const {state: editRecordState, dispatch: editRecordDispatch} = useEditRecordModalReducer();
+    const attribute = state.formElement.attribute;
+    const isValuesListEnabled = !!((_a =
+        attribute === null || attribute === void 0 ? void 0 : attribute.values_list) === null || _a === void 0
+        ? void 0
+        : _a.enable);
+    const isValuesListOpen = !!((_b = attribute === null || attribute === void 0 ? void 0 : attribute.values_list) ===
+        null || _b === void 0
+        ? void 0
+        : _b.allowFreeEntry);
+    // Scroll to input when editing field
+    useEffect(() => {
+        var _a;
+        if (fieldValue.isEditing) {
+            (_a = actionsWrapperRef === null || actionsWrapperRef === void 0 ? void 0 : actionsWrapperRef.current) ===
+                null || _a === void 0
+                ? void 0
+                : _a.scrollIntoView({block: 'nearest'});
+        }
+    }, [fieldValue.isEditing]);
+    // Cancel value editing if value details panel is closed
+    useEffect(() => {
+        if (editRecordState.activeValue === null && fieldValue.isEditing) {
+            dispatch({
+                type: StandardFieldReducerActionsTypes.CANCEL_EDITING,
+                idValue: fieldValue.idValue
+            });
+        }
+    }, [editRecordState.activeValue]);
+    useEffect(() => {
+        if (fieldValue.isEditing) {
+            editRecordDispatch({
+                type: EditRecordReducerActionsTypes.SET_EDITING_VALUE,
+                value: fieldValue.editingValue
+            });
+        }
+    }, [fieldValue.isEditing, fieldValue.editingValue]);
+    const _handleSubmit = async valueToSave => {
+        if (valueToSave === '') {
+            return _handleDelete();
+        }
+        const convertedValue = typeof valueToSave === 'object' ? JSON.stringify(valueToSave) : valueToSave;
+        onSubmit(fieldValue.idValue, convertedValue);
+    };
+    const _handlePressEnter = async () => {
+        if (!isValuesListEnabled) {
+            return _handleSubmit(fieldValue.editingValue);
+        }
+        const valuesList = _getFilteredValuesList();
+        if (!valuesList.length) {
+            return;
+        }
+        return _handleSubmit(valuesList[0].value);
+    };
+    const _handleDelete = async () => {
+        if (fieldValue.idValue === newValueId) {
+            return _handleCancel();
+        }
+        onDelete(fieldValue.idValue);
+    };
+    const _handleFocus = () => {
+        if (state.isReadOnly || fieldValue.isEditing || attribute.format === AttributeFormat.boolean) {
+            return;
+        }
+        dispatch({
+            type: StandardFieldReducerActionsTypes.FOCUS_FIELD,
+            idValue: fieldValue.idValue
+        });
+        if (!state.metadataEdit) {
+            editRecordDispatch({
+                type: EditRecordReducerActionsTypes.SET_ACTIVE_VALUE,
+                value: {value: fieldValue.value, editingValue: fieldValue.editingValue, attribute}
+            });
+        }
+    };
+    const _handleValueChange = value => {
+        dispatch({
+            type: StandardFieldReducerActionsTypes.CHANGE_VALUE,
+            idValue: fieldValue.idValue,
+            value
+        });
+    };
+    const _handleCloseError = () =>
+        dispatch({
+            type: StandardFieldReducerActionsTypes.SET_ERROR_DISPLAY,
+            displayError: false,
+            idValue: fieldValue.idValue
+        });
+    const _handleCancel = () => {
+        dispatch({
+            type: StandardFieldReducerActionsTypes.CANCEL_EDITING,
+            idValue: fieldValue.idValue
+        });
+        if (!state.metadataEdit) {
+            editRecordDispatch({
+                type: EditRecordReducerActionsTypes.SET_ACTIVE_VALUE,
+                value: null
+            });
+        }
+    };
+    const _handleClickSubmit = () => {
+        _handleSubmit(fieldValue.editingValue);
+    };
+    const _handleValueCopy = value => {
+        var _a;
+        (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0
+            ? void 0
+            : _a.focus();
+        _handleValueChange(value);
+    };
+    const _getInput = () => {
+        let inputStyle = {};
+        if (
+            !fieldValue.isEditing &&
+            attribute.format !== AttributeFormat.boolean &&
+            attribute.format !== AttributeFormat.rich_text
+        ) {
+            let displayedValue = String(fieldValue.displayValue);
+            let prefixValue;
+            if (
+                attribute.format === AttributeFormat.color &&
+                (fieldValue.value === null || fieldValue.value.value === null)
+            ) {
+                fieldValue.value = null;
+            }
+            const hasValue = fieldValue.value !== null;
+            if (hasValue) {
+                switch (attribute.format) {
+                    case AttributeFormat.date_range:
+                        const {editingValue} = fieldValue;
+                        const isParsable = typeof editingValue === 'string' && editingValue.length > 0;
+                        const convertedFieldValue = isParsable ? JSON.parse(editingValue) : editingValue;
+                        const dateRangeValue = {
+                            from: new Date(Number(convertedFieldValue.from) * 1000).toLocaleDateString(i18n.language),
+                            to: new Date(Number(convertedFieldValue.to) * 1000).toLocaleDateString(i18n.language)
+                        };
+                        displayedValue =
+                            (dateRangeValue === null || dateRangeValue === void 0 ? void 0 : dateRangeValue.from) &&
+                            (dateRangeValue === null || dateRangeValue === void 0 ? void 0 : dateRangeValue.to)
+                                ? stringifyDateRangeValue(dateRangeValue, t)
+                                : '';
+                        break;
+                    case AttributeFormat.encrypted:
+                        displayedValue = '•••••••••';
+                        break;
+                    case AttributeFormat.date:
+                        if (!isNaN(fieldValue.displayValue)) {
+                            displayedValue = new Intl.DateTimeFormat(i18n.language).format(
+                                new Date(Number(displayedValue) * 1000)
+                            );
+                        }
+                        break;
+                    case AttributeFormat.color:
+                        prefixValue = _getColorDisplay();
+                        displayedValue = '#' + displayedValue;
+                        inputStyle = {
+                            paddingLeft: '39px'
+                        };
+                }
+            }
+            return _jsxs(_Fragment, {
+                children: [
+                    prefixValue,
+                    _jsx(
+                        Input,
+                        {
+                            style: inputStyle,
+                            className: hasValue ? 'has-value' : '',
+                            value: displayedValue,
+                            onFocus: _handleFocus,
+                            disabled: state.isReadOnly
+                        },
+                        'display'
+                    )
+                ]
+            });
+        }
+        const InputComponent = inputComponentByFormat[attribute.format];
+        // This should never happen, unless we have some bad settings in DB
+        if (!InputComponent) {
+            return _jsx('div', {children: t('record_edition.invalid_format')});
+        }
+        return _jsx(InputComponent, {
+            state: state,
+            fieldValue: fieldValue,
+            onChange: _handleValueChange,
+            onFocus: _handleFocus,
+            onSubmit: _handleSubmit,
+            onPressEnter: _handlePressEnter,
+            settings: state.formElement.settings,
+            inputRef: inputRef
+        });
+    };
+    const _getColorDisplay = () => {
+        const colorValue = '#' + String(fieldValue.displayValue);
+        const colorPickerStyle = {
+            width: '16px',
+            height: '16px',
+            borderRadius: '2px',
+            backgroundColor: colorValue,
+            marginTop: fieldValue.index ? '15px' : '25px',
+            marginLeft: '5px'
+        };
+        return _jsx('label', {style: colorPickerStyle});
+    };
+    const _getFilteredValuesList = () => {
+        var _a, _b, _c, _d, _e, _f;
+        let values = [];
+        if (isValuesListEnabled) {
+            if (attribute.format === AttributeFormat.date_range) {
+                const valuesList =
+                    (_b =
+                        (_a = attribute === null || attribute === void 0 ? void 0 : attribute.values_list) === null ||
+                        _a === void 0
+                            ? void 0
+                            : _a.dateRangeValues) !== null && _b !== void 0
+                        ? _b
+                        : [];
+                values = valuesList
+                    .filter(val => {
+                        return fieldValue.state === StandardFieldValueState.PRISTINE || !fieldValue.editingValue;
+                    })
+                    .map(v => {
+                        const rangeValue = {
+                            from: moment(Number(v.from) * 1000).format('L'),
+                            to: moment(Number(v.to) * 1000).format('L')
+                        };
+                        return {
+                            value: stringifyDateRangeValue(rangeValue, t),
+                            rawValue: {from: v.from, to: v.to}
+                        };
+                    });
+            } else {
+                const valuesList =
+                    (_d =
+                        (_c = attribute === null || attribute === void 0 ? void 0 : attribute.values_list) === null ||
+                        _c === void 0
+                            ? void 0
+                            : _c.values) !== null && _d !== void 0
+                        ? _d
+                        : [];
+                values = valuesList
+                    .filter(val => {
+                        return (
+                            fieldValue.state === StandardFieldValueState.PRISTINE ||
+                            !fieldValue.editingValue ||
+                            attribute.format === AttributeFormat.date ||
+                            val.match(new RegExp(String(fieldValue.editingValue), 'i'))
+                        );
+                    })
+                    .map(v => ({value: v, rawValue: v}));
+            }
+        }
+        const hydratedValues = values.map(value =>
+            Object.assign(Object.assign({}, value), {
+                isNewValue: false,
+                canCopy:
+                    isValuesListOpen &&
+                    attribute.format !== AttributeFormat.date &&
+                    attribute.format !== AttributeFormat.date_range
+            })
+        );
+        // Display current value on top of values list as "new value". Don't do that for date range attribute as it
+        // doesn't make much sense
+        if (
+            isValuesListOpen &&
+            String(fieldValue.editingValue) &&
+            attribute.format !== AttributeFormat.date_range &&
+            !((_f =
+                (_e = attribute === null || attribute === void 0 ? void 0 : attribute.values_list) === null ||
+                _e === void 0
+                    ? void 0
+                    : _e.values) !== null && _f !== void 0
+                ? _f
+                : []
+            ).some(v => v === fieldValue.editingValue)
+        ) {
+            hydratedValues.unshift({
+                value: String(fieldValue.editingValue),
+                rawValue: String(fieldValue.editingValue),
+                isNewValue: true,
+                canCopy: false
+            });
+        }
+        return hydratedValues;
+    };
+    const errorContent = _jsx(ErrorMessage, {
+        children: _jsxs(
+            Space,
+            Object.assign(
+                {size: 'small'},
+                {
+                    children: [
+                        _jsx(ExclamationCircleOutlined, {}),
+                        fieldValue.error,
+                        _jsx(Button, {
+                            onClick: _handleCloseError,
+                            size: 'small',
+                            icon: _jsx(CloseOutlined, {}),
+                            style: {border: 'none'}
+                        })
+                    ]
+                }
+            )
+        )
+    });
+    const isErrorVisible = fieldValue.isErrorDisplayed;
+    const wrapperClasses = `
+        ${attribute.format ? `format-${attribute.format}` : ''}
+        ${
+            (
+                (_c = fieldValue === null || fieldValue === void 0 ? void 0 : fieldValue.value) === null ||
+                _c === void 0
+                    ? void 0
+                    : _c.value
+            )
+                ? 'has-value'
+                : ''
+        }
+        ${fieldValue.isEditing ? 'editing' : ''}
+    `;
+    const canDeleteValue =
+        !state.isReadOnly && fieldValue.idValue !== newValueId && attribute.format !== AttributeFormat.boolean;
+    const valuesList = _getFilteredValuesList();
+    const valueActions = [];
+    if (!fieldValue.isEditing) {
+        valueActions.push({
+            button: _jsx(ValueDetailsBtn, {value: fieldValue.value, attribute: attribute, shape: 'circle'})
+        });
+    }
+    const hasMultipleValuesDisplay =
+        attribute.multiple_values && !!Object.keys(state.values[state.activeScope].values).length;
+    if (
+        (_d = attribute === null || attribute === void 0 ? void 0 : attribute.versions_conf) === null || _d === void 0
+            ? void 0
+            : _d.versionable
+    ) {
+        const versions = {
+            [FieldScope.CURRENT]:
+                (_f = (_e = state.values[FieldScope.CURRENT]) === null || _e === void 0 ? void 0 : _e.version) !==
+                    null && _f !== void 0
+                    ? _f
+                    : null,
+            [FieldScope.INHERITED]:
+                (_h = (_g = state.values[FieldScope.INHERITED]) === null || _g === void 0 ? void 0 : _g.version) !==
+                    null && _h !== void 0
+                    ? _h
+                    : null
+        };
+        if (!hasMultipleValuesDisplay) {
+            valueActions.push({
+                title: t('values_version.title'),
+                button: _jsx(ValuesVersionBtn, {
+                    versions: versions,
+                    activeScope: state.activeScope,
+                    onScopeChange: onScopeChange
+                })
+            });
+        }
+    }
+    if (canDeleteValue && !fieldValue.isEditing && fieldValue.displayValue) {
+        valueActions.push({
+            title: t('global.delete'),
+            button: _jsx(DeleteValueBtn, {onDelete: _handleDelete, shape: 'circle'})
+        });
+    }
+    const valuesVersionIndicatorStyle = {
+        top: '1px',
+        left: '1px',
+        bottom: hasMultipleValuesDisplay ? '0' : '1px',
+        borderRadius: hasMultipleValuesDisplay ? 'none' : token.borderRadius
+    };
+    return _jsxs(_Fragment, {
+        children: [
+            fieldValue.isEditing && _jsx(Dimmer, {onClick: _handleCancel}),
+            _jsx(
+                FormWrapper,
+                Object.assign(
+                    {$isEditing: fieldValue.isEditing, className: !fieldValue.index ? 'first-value' : ''},
+                    {
+                        children: _jsx(Form, {
+                            children: _jsxs(FormItem, {
+                                children: [
+                                    _jsx(
+                                        Popover,
+                                        Object.assign(
+                                            {placement: 'topLeft', open: isErrorVisible, content: errorContent},
+                                            {
+                                                children: _jsxs(
+                                                    InputWrapper,
+                                                    Object.assign(
+                                                        {
+                                                            $isEditing: fieldValue.isEditing,
+                                                            className: wrapperClasses,
+                                                            'data-testid': 'input-wrapper'
+                                                        },
+                                                        {
+                                                            children: [
+                                                                _jsx(ValuesVersionIndicator, {
+                                                                    activeScope: state.activeScope,
+                                                                    style: valuesVersionIndicatorStyle
+                                                                }),
+                                                                !fieldValue.index &&
+                                                                    _jsxs(
+                                                                        'label',
+                                                                        Object.assign(
+                                                                            {
+                                                                                className: 'attribute-label',
+                                                                                onClick: _handleFocus
+                                                                            },
+                                                                            {
+                                                                                children: [
+                                                                                    state.formElement.settings.label,
+                                                                                    editRecordState.externalUpdate
+                                                                                        .updatedValues[
+                                                                                        attribute === null ||
+                                                                                        attribute === void 0
+                                                                                            ? void 0
+                                                                                            : attribute.id
+                                                                                    ] && _jsx(UpdatedFieldIcon, {}),
+                                                                                    state.activeScope ===
+                                                                                        FieldScope.INHERITED &&
+                                                                                        _jsx(InheritedFieldLabel, {
+                                                                                            version:
+                                                                                                state.values[
+                                                                                                    FieldScope.INHERITED
+                                                                                                ].version
+                                                                                        })
+                                                                                ]
+                                                                            }
+                                                                        )
+                                                                    ),
+                                                                _getInput(),
+                                                                !state.metadataEdit &&
+                                                                    _jsx(FloatingMenu, {actions: valueActions})
+                                                            ]
+                                                        }
+                                                    )
+                                                )
+                                            }
+                                        )
+                                    ),
+                                    _jsxs(
+                                        ActionsWrapper,
+                                        Object.assign(
+                                            {ref: actionsWrapperRef},
+                                            {
+                                                children: [
+                                                    fieldValue.isEditing &&
+                                                        ((_j =
+                                                            attribute === null || attribute === void 0
+                                                                ? void 0
+                                                                : attribute.values_list) === null || _j === void 0
+                                                            ? void 0
+                                                            : _j.enable) &&
+                                                        _jsx(ValuesList, {
+                                                            attribute: attribute,
+                                                            valuesList: valuesList,
+                                                            onValueSelect: _handleSubmit,
+                                                            onValueCopy: _handleValueCopy
+                                                        }),
+                                                    fieldValue.isEditing &&
+                                                        _jsxs(ButtonsWrapper, {
+                                                            children: [
+                                                                _jsx(
+                                                                    Button,
+                                                                    Object.assign(
+                                                                        {
+                                                                            size: 'small',
+                                                                            onClick: _handleCancel,
+                                                                            style: {background: '#FFF'}
+                                                                        },
+                                                                        {children: t('global.cancel')}
+                                                                    )
+                                                                ),
+                                                                (!isValuesListEnabled || isValuesListOpen) &&
+                                                                    _jsx(
+                                                                        Button,
+                                                                        Object.assign(
+                                                                            {
+                                                                                type: 'primary',
+                                                                                size: 'small',
+                                                                                onClick: _handleClickSubmit
+                                                                            },
+                                                                            {children: t('global.submit')}
+                                                                        )
+                                                                    )
+                                                            ]
+                                                        })
+                                                ]
+                                            }
+                                        )
+                                    )
+                                ]
+                            })
+                        })
+                    }
+                )
+            )
+        ]
+    });
+}
+export default StandardFieldValue;
+//# sourceMappingURL=StandardFieldValue.js.map