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

package/src/components/RecordEdition/EditRecordSidebar/ValueDetails/ValueDetails.tsx

@@ -1,109 +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 {isTypeStandard, localizedTranslation} from '@leav/utils';
-import {Collapse, Divider} from 'antd';
-import styled from 'styled-components';
-import {useSharedTranslation} from '_ui/hooks/useSharedTranslation';
-import useLang from '../../../../hooks/useLang';
-import {
-    AttributeType,
-    RecordFormAttributeFragment,
-    RecordFormAttributeTreeAttributeFragment
-} from '../../../../_gqlTypes';
-import {IRecordPropertyTree, RecordProperty} from '../../../../_queries/records/getRecordPropertiesQuery';
-import {MetadataSubmitValueFunc} from '../../EditRecord/_types';
-import {EditRecordReducerActionsTypes} from '../../editRecordModalReducer/editRecordModalReducer';
-import {useEditRecordModalReducer} from '../../editRecordModalReducer/useEditRecordModalReducer';
-import AttributeDetails from './AttributeDetails';
-import TreeValuePath from './TreeValuePath';
-import ValueInfo from './ValueInfo';
-import ValueMetadata from './ValueMetadata';
-
-interface IValueDetailsProps {
-    attribute: RecordFormAttributeFragment;
-    onMetadataSubmit: MetadataSubmitValueFunc;
-    value: RecordProperty;
-}
-
-const AttributeTitle = styled.div`
-    padding: 1rem;
-
-    .attribute-label {
-        font-weight: bold;
-    }
-`;
-
-const AttributeDescription = styled.div`
-    color: rgba(0, 0, 0, 0.5);
-    padding: 0 1rem;
-`;
-
-const CloseButton = styled(CloseOutlined)`
-    cursor: pointer;
-    position: absolute;
-    right: 1em;
-    top: 1em;
-`;
-
-const {Panel} = Collapse;
-
-function ValueDetails({attribute, value, onMetadataSubmit}: IValueDetailsProps): JSX.Element {
-    const {lang} = useLang();
-    const {t} = useSharedTranslation();
-    const {state, dispatch} = useEditRecordModalReducer();
-
-    const _handleClose = () => dispatch({type: EditRecordReducerActionsTypes.SET_ACTIVE_VALUE, value: null});
-
-    const metadataFields = (attribute?.metadata_fields ?? []).filter(field => field.permissions.access_attribute);
-    const hasMetadata = metadataFields.length > 0 && value !== null;
-
-    const collapseItems = [];
-
-    if (hasMetadata) {
-        collapseItems.push({
-            key: 'metadata',
-            label: isTypeStandard(attribute.type)
-                ? t('record_edition.metadata_section')
-                : t('record_edition.metadata_section_link'),
-            children: <ValueMetadata value={value} attribute={attribute} onMetadataSubmit={onMetadataSubmit} />
-        });
-    }
-
-    if (attribute.type === AttributeType.tree && value) {
-        collapseItems.push({
-            key: 'path',
-            label: t('record_edition.path_section'),
-            children: (
-                <TreeValuePath
-                    value={value as IRecordPropertyTree}
-                    attribute={attribute as RecordFormAttributeTreeAttributeFragment}
-                />
-            )
-        });
-    }
-
-    return (
-        <>
-            <CloseButton onClick={_handleClose} />
-            <AttributeTitle>
-                {t('record_edition.attribute.info_title')}:
-                <span className="attribute-label">{localizedTranslation(attribute.label, lang)}</span>
-            </AttributeTitle>
-            <AttributeDescription>{localizedTranslation(attribute.description, lang)}</AttributeDescription>
-            <AttributeDetails attribute={attribute} />
-            <Divider style={{margin: '.5em 0'}} />
-            <ValueInfo />
-            <Collapse
-                items={collapseItems}
-                bordered={false}
-                defaultActiveKey={['value', 'metadata']}
-                style={{background: 'none'}}
-                destroyInactivePanel
-            />
-        </>
-    );
-}
-
-export default ValueDetails;

package/src/components/RecordEdition/EditRecordSidebar/ValueDetails/ValueInfo/ValueInfo.tsx

@@ -1,106 +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 {isTypeLink, isTypeStandard} from '@leav/utils';
-import isEmpty from 'lodash/isEmpty';
-import styled from 'styled-components';
-import {themeVars} from '_ui/antdTheme';
-import {RecordCard} from '_ui/components/RecordCard';
-import {PreviewSize} from '_ui/constants';
-import {useSharedTranslation} from '_ui/hooks/useSharedTranslation';
-import {AttributeFormat} from '_ui/_gqlTypes';
-import {IRecordPropertyLink, IRecordPropertyTree} from '_ui/_queries/records/getRecordPropertiesQuery';
-import {getValueVersionLabel} from '_ui/_utils';
-import {useEditRecordModalReducer} from '../../../editRecordModalReducer/useEditRecordModalReducer';
-import PropertiesList from '../../PropertiesList';
-
-const Wrapper = styled.div`
-    padding: 1rem;
-`;
-
-const ValueLengthWrapper = styled.div`
-    background: ${themeVars.activeColor};
-    padding: 0px 15px;
-    border-radius: 1em;
-    width: fit-content;
-`;
-
-const Title = styled.div`
-    margin-bottom: 1rem;
-    display: flex;
-    gap: 1rem;
-`;
-
-function ValueInfo(): JSX.Element {
-    const {t} = useSharedTranslation();
-    const {state} = useEditRecordModalReducer();
-    const {value, attribute} = state.activeValue;
-
-    const valueDetailsContent = value?.modified_at
-        ? [
-              {
-                  title: isTypeStandard(attribute.type)
-                      ? t('record_edition.created_at')
-                      : t('record_edition.link_created_at'),
-                  value: `${new Date(value.created_at * 1000).toLocaleString()} ${
-                      value?.created_by ? ` ${t('record_edition.by')} ${value.created_by.whoAmI.label}` : ''
-                  }`
-              },
-              {
-                  title: t('record_edition.modified_at'),
-                  value: `${new Date(value.modified_at * 1000).toLocaleString()} ${
-                      value?.modified_by ? ` ${t('record_edition.by')} ${value.modified_by.whoAmI.label}` : ''
-                  }`
-              }
-          ]
-        : [];
-
-    if (value?.version && !isEmpty(value?.version)) {
-        valueDetailsContent.push({
-            title: t('values_version.version'),
-            value: getValueVersionLabel(value.version)
-        });
-    }
-
-    if (state?.record && value?.id_value && !isEmpty(value?.id_value)) {
-        valueDetailsContent.push({
-            title: t('record_edition.attribute.id'),
-            value: value?.id_value
-        });
-    }
-
-    const canCountValueLength =
-        isTypeStandard(attribute.type) && attribute.format === AttributeFormat.text && !!state.activeValue.value;
-
-    if (!valueDetailsContent.length && !canCountValueLength) {
-        return null;
-    }
-
-    const valueLength = canCountValueLength ? String(state.activeValue.editingValue).length : null;
-    const valueDetailsSectionTitle = isTypeStandard(attribute.type)
-        ? t('record_edition.value_details')
-        : t('record_edition.link_details');
-
-    const valueWhoAmI = isTypeStandard(attribute.type)
-        ? null
-        : isTypeLink(attribute.type)
-        ? (value as IRecordPropertyLink)?.linkValue?.whoAmI
-        : (value as IRecordPropertyTree)?.treeValue?.record?.whoAmI;
-
-    return (
-        <Wrapper>
-            <Title>
-                {valueDetailsSectionTitle}:
-                {canCountValueLength && (
-                    <ValueLengthWrapper>{t('record_edition.value_length', {length: valueLength})}</ValueLengthWrapper>
-                )}
-            </Title>
-            {valueWhoAmI && (
-                <RecordCard record={valueWhoAmI} size={PreviewSize.big} tile style={{marginBottom: '1rem'}} />
-            )}
-            <PropertiesList items={valueDetailsContent} />
-        </Wrapper>
-    );
-}
-
-export default ValueInfo;

package/src/components/RecordEdition/EditRecordSidebar/ValueDetails/ValueInfo/index.ts

@@ -1,5 +0,0 @@
-// Copyright LEAV Solutions 2017
-// This file is released under LGPL V3
-// License text available at https://www.gnu.org/licenses/lgpl-3.0.txt
-import ValueInfo from './ValueInfo';
-export default ValueInfo;

package/src/components/RecordEdition/EditRecordSidebar/ValueDetails/ValueMetadata/ValueMetadata.tsx

@@ -1,96 +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 {FormFieldTypes, ICommonFieldsSettings, localizedTranslation} from '@leav/utils';
-import {Space} from 'antd';
-import useLang from '../../../../../hooks/useLang';
-import {
-    AttributeFormat,
-    FormElementTypes,
-    RecordFormAttributeFragment,
-    RecordFormQuery
-} from '../../../../../_gqlTypes';
-import {RecordProperty} from '../../../../../_queries/records/getRecordPropertiesQuery';
-import {formComponents} from '../../../EditRecord/uiElements';
-import StandardField from '../../../EditRecord/uiElements/StandardField';
-import {
-    DeleteValueFunc,
-    FormElement,
-    ISubmitMultipleResult,
-    ISubmittedValueStandard,
-    MetadataSubmitValueFunc,
-    SubmitValueFunc
-} from '../../../EditRecord/_types';
-
-type MetadataField = RecordFormQuery['recordForm']['elements'][0]['attribute']['metadata_fields'][0];
-
-interface IValueMetadataProps {
-    value: RecordProperty;
-    attribute: RecordFormAttributeFragment;
-    onMetadataSubmit: MetadataSubmitValueFunc;
-}
-
-const _inputTypeByFormat: {[format in AttributeFormat]: FormFieldTypes} = {
-    [AttributeFormat.text]: FormFieldTypes.TEXT_INPUT,
-    [AttributeFormat.numeric]: FormFieldTypes.TEXT_INPUT,
-    [AttributeFormat.date]: FormFieldTypes.DATE,
-    [AttributeFormat.boolean]: FormFieldTypes.CHECKBOX,
-    [AttributeFormat.date_range]: FormFieldTypes.DATE,
-    [AttributeFormat.encrypted]: FormFieldTypes.TEXT_INPUT,
-    [AttributeFormat.extended]: FormFieldTypes.TEXT_INPUT,
-    [AttributeFormat.color]: FormFieldTypes.TEXT_INPUT,
-    [AttributeFormat.rich_text]: FormFieldTypes.TEXT_INPUT
-};
-
-function ValueMetadata({value: parentValue, attribute, onMetadataSubmit}: IValueMetadataProps): JSX.Element {
-    const {lang} = useLang();
-
-    const _handleValueSubmit: (field: MetadataField) => SubmitValueFunc = field => (
-        values
-    ): Promise<ISubmitMultipleResult> => {
-        return onMetadataSubmit(parentValue, attribute, {
-            [field.id]: (values[0] as ISubmittedValueStandard).value
-        });
-    };
-
-    const _handleValueDelete: (field: MetadataField) => DeleteValueFunc = field => (
-        values
-    ): Promise<ISubmitMultipleResult> => {
-        return onMetadataSubmit(parentValue, attribute, {
-            [field.id]: null
-        });
-    };
-
-    return (
-        <Space direction="vertical" style={{width: '100%'}} size="small">
-            {attribute.metadata_fields.map(field => {
-                const formElement: FormElement<ICommonFieldsSettings> = {
-                    id: field.id,
-                    attribute: field as RecordFormAttributeFragment,
-                    containerId: '__root',
-                    type: FormElementTypes.field,
-                    uiElementType: _inputTypeByFormat[field.format],
-                    valueError: null,
-                    values: [parentValue?.metadata?.find(({name}) => name === field.id)?.value as unknown] ?? [],
-                    settings: {
-                        label: localizedTranslation(field.label, lang)
-                    },
-                    uiElement: formComponents[_inputTypeByFormat[field.format]]
-                };
-
-                return (
-                    <StandardField
-                        key={`${field.id}_${parentValue?.id_value}`}
-                        element={formElement}
-                        onValueSubmit={_handleValueSubmit(field)}
-                        onValueDelete={_handleValueDelete(field)}
-                        onDeleteMultipleValues={null}
-                        metadataEdit
-                    />
-                );
-            })}
-        </Space>
-    );
-}
-
-export default ValueMetadata;

package/src/components/RecordEdition/EditRecordSidebar/ValueDetails/ValueMetadata/index.ts

@@ -1,5 +0,0 @@
-// Copyright LEAV Solutions 2017
-// This file is released under LGPL V3
-// License text available at https://www.gnu.org/licenses/lgpl-3.0.txt
-import ValueMetadata from './ValueMetadata';
-export default ValueMetadata;

package/src/components/RecordEdition/EditRecordSidebar/ValueDetails/index.ts

@@ -1,5 +0,0 @@
-// Copyright LEAV Solutions 2017
-// This file is released under LGPL V3
-// License text available at https://www.gnu.org/licenses/lgpl-3.0.txt
-import ValueDetails from './ValueDetails';
-export default ValueDetails;

package/src/components/RecordEdition/EditRecordSidebar/ValuesVersions/ValuesVersions.tsx

@@ -1,91 +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 {GrUndo} from 'react-icons/gr';
-import styled from 'styled-components';
-import {useSharedTranslation} from '_ui/hooks/useSharedTranslation';
-import {themeVars} from '../../../../antdTheme';
-import {IValueVersion} from '../../../../types/values';
-import {BasicButton} from '../../../BasicButton';
-import ValuesVersionConfigurator from '../../../ValuesVersionConfigurator';
-import {EditRecordReducerActionsTypes} from '../../editRecordModalReducer/editRecordModalReducer';
-import {useEditRecordModalReducer} from '../../editRecordModalReducer/useEditRecordModalReducer';
-
-const Wrapper = styled.div`
-    display: grid;
-    grid-template-rows: 3em 1fr 3em;
-    height: 100%;
-`;
-
-const Header = styled.div`
-    background-color: ${themeVars.headerBg};
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 0.3rem 0.3rem 0.3rem 1rem;
-    font-weight: 700;
-    border-bottom: 1px solid ${themeVars.borderLightColor};
-`;
-
-const CloseButton = styled(CloseOutlined)`
-    cursor: pointer;
-    background: none;
-    box-shadow: none;
-    margin: 0.5rem;
-`;
-
-function ValuesVersions(): JSX.Element {
-    const {t} = useSharedTranslation();
-    const {state, dispatch} = useEditRecordModalReducer();
-    const isInCreation = !state?.record;
-
-    const _handleVersionChange = (version: IValueVersion) => {
-        dispatch({
-            type: EditRecordReducerActionsTypes.SET_VALUES_VERSION,
-            valuesVersion: version
-        });
-    };
-
-    const _handleClosePanel = () => {
-        dispatch({
-            type: EditRecordReducerActionsTypes.SET_SIDEBAR_CONTENT,
-            content: 'summary'
-        });
-    };
-
-    const _handleClickReset = () => {
-        dispatch({
-            type: EditRecordReducerActionsTypes.SET_VALUES_VERSION,
-            valuesVersion: state.originValuesVersion
-        });
-    };
-
-    return (
-        <Wrapper>
-            <Header>
-                <span>{t('values_version.title')}</span>
-                <span>
-                    {!isInCreation && (
-                        <BasicButton
-                            title={t('values_version.reset')}
-                            shape="circle"
-                            centered
-                            icon={<GrUndo />}
-                            onClick={_handleClickReset}
-                        />
-                    )}
-                    <CloseButton onClick={_handleClosePanel} />
-                </span>
-            </Header>
-            <ValuesVersionConfigurator
-                libraryId={state.libraryId}
-                selectedVersion={state.valuesVersion}
-                onVersionChange={_handleVersionChange}
-                readOnly={isInCreation}
-            />
-        </Wrapper>
-    );
-}
-
-export default ValuesVersions;

package/src/components/RecordEdition/EditRecordSidebar/ValuesVersions/index.ts

@@ -1,5 +0,0 @@
-// Copyright LEAV Solutions 2017
-// This file is released under LGPL V3
-// License text available at https://www.gnu.org/licenses/lgpl-3.0.txt
-import ValuesVersions from './ValuesVersions';
-export default ValuesVersions;

package/src/components/RecordEdition/EditRecordSidebar/index.ts

@@ -1,5 +0,0 @@
-// Copyright LEAV Solutions 2017
-// This file is released under LGPL V3
-// License text available at https://www.gnu.org/licenses/lgpl-3.0.txt
-import EditRecordSidebar from './EditRecordSidebar';
-export default EditRecordSidebar;

package/src/components/RecordEdition/editRecordModalReducer/editRecordModalReducer.test.ts

@@ -1,174 +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 {mockAttributeSimple} from '_ui/__mocks__/common/attribute';
-import {mockRecord} from '_ui/__mocks__/common/record';
-import {mockRecordPropertyWithAttribute} from '_ui/__mocks__/common/value';
-import editRecordModalReducer, {
-    EditRecordReducerActionsTypes,
-    IEditRecordReducerState,
-    initialState
-} from './editRecordModalReducer';
-
-describe('editRecordReducer', () => {
-    const mockInitialState: IEditRecordReducerState = {
-        ...initialState,
-        record: mockRecord
-    };
-
-    test('SET_ACTIVE_VALUE', async () => {
-        const newState = editRecordModalReducer(mockInitialState, {
-            type: EditRecordReducerActionsTypes.SET_ACTIVE_VALUE,
-            value: mockRecordPropertyWithAttribute
-        });
-        expect(newState.activeValue).toEqual(mockRecordPropertyWithAttribute);
-        expect(newState.sidebarContent).toBe('valueDetails');
-
-        const newState2 = editRecordModalReducer(mockInitialState, {
-            type: EditRecordReducerActionsTypes.SET_ACTIVE_VALUE,
-            value: null
-        });
-        expect(newState2.sidebarContent).toBe('summary');
-    });
-
-    test('SET_SIDEBAR_CONTENT', async () => {
-        expect(
-            editRecordModalReducer(mockInitialState, {
-                type: EditRecordReducerActionsTypes.SET_SIDEBAR_CONTENT,
-                content: 'valueDetails'
-            }).sidebarContent
-        ).toBe('valueDetails');
-    });
-
-    describe('SET_EXTERNAL_UPDATE', () => {
-        const baseValue = {
-            id_value: null,
-            attribute: mockAttributeSimple,
-            created_at: null,
-            created_by: null,
-            modified_at: null,
-            modified_by: null,
-            version: null,
-            metadata: null
-        };
-
-        test('Multiple updates from different modifiers', async () => {
-            const newState = editRecordModalReducer(mockInitialState, {
-                type: EditRecordReducerActionsTypes.ADD_EXTERNAL_UPDATE,
-                modifier: mockRecord,
-                updatedValues: [
-                    {
-                        attribute: 'attribute1',
-                        value: {
-                            ...baseValue,
-                            value: 'test',
-                            raw_value: 'test',
-                            attribute: {...mockAttributeSimple, id: 'attribute1'}
-                        }
-                    }
-                ]
-            });
-
-            const newState2 = editRecordModalReducer(newState, {
-                type: EditRecordReducerActionsTypes.ADD_EXTERNAL_UPDATE,
-                modifier: {...mockRecord, id: 'modifier2'},
-                updatedValues: [
-                    {
-                        attribute: 'attribute2',
-                        value: {
-                            ...baseValue,
-                            value: 'test2',
-                            raw_value: 'test2',
-                            attribute: {...mockAttributeSimple, id: 'attribute2'}
-                        }
-                    }
-                ]
-            });
-
-            expect(newState2.externalUpdate).toEqual({
-                modifiers: [mockRecord, {...mockRecord, id: 'modifier2'}],
-                updatedValues: {
-                    attribute1: [
-                        {
-                            ...baseValue,
-                            value: 'test',
-                            raw_value: 'test',
-                            attribute: {...mockAttributeSimple, id: 'attribute1'}
-                        }
-                    ],
-                    attribute2: [
-                        {
-                            ...baseValue,
-                            value: 'test2',
-                            raw_value: 'test2',
-                            attribute: {...mockAttributeSimple, id: 'attribute2'}
-                        }
-                    ]
-                }
-            });
-        });
-
-        test('Multiple updates from same modifier', async () => {
-            const newState = editRecordModalReducer(mockInitialState, {
-                type: EditRecordReducerActionsTypes.ADD_EXTERNAL_UPDATE,
-                modifier: mockRecord,
-                updatedValues: [
-                    {
-                        attribute: 'attribute1',
-                        value: {
-                            ...baseValue,
-                            value: 'test',
-                            raw_value: 'test',
-                            attribute: {...mockAttributeSimple, id: 'attribute1'}
-                        }
-                    }
-                ]
-            });
-
-            const newState2 = editRecordModalReducer(newState, {
-                type: EditRecordReducerActionsTypes.ADD_EXTERNAL_UPDATE,
-                modifier: mockRecord,
-                updatedValues: [
-                    {
-                        attribute: 'attribute2',
-                        value: {
-                            ...baseValue,
-                            value: 'test2',
-                            raw_value: 'test2',
-                            attribute: {...mockAttributeSimple, id: 'attribute2'}
-                        }
-                    }
-                ]
-            });
-
-            expect(newState2.externalUpdate).toEqual({
-                modifiers: [mockRecord],
-                updatedValues: {
-                    attribute1: [
-                        {
-                            ...baseValue,
-                            value: 'test',
-                            raw_value: 'test',
-                            attribute: {...mockAttributeSimple, id: 'attribute1'}
-                        }
-                    ],
-                    attribute2: [
-                        {
-                            ...baseValue,
-                            value: 'test2',
-                            raw_value: 'test2',
-                            attribute: {...mockAttributeSimple, id: 'attribute2'}
-                        }
-                    ]
-                }
-            });
-        });
-    });
-
-    test('CLEAR_EXTERNAL_UPDATE', async () => {
-        const newState = editRecordModalReducer(mockInitialState, {
-            type: EditRecordReducerActionsTypes.CLEAR_EXTERNAL_UPDATE
-        });
-        expect(newState.externalUpdate).toEqual(initialState.externalUpdate);
-    });
-});