@reltio/profile 1.4.1585 → 1.4.1586-mui5

package/src/components/ProfileTableAttributeView/components/TableAttributeContent/hooks/useEditableAttribute.ts

@@ -0,0 +1,212 @@
+import {useCallback, useContext, useState, useMemo} from 'react';
+import {
+    createNewAttribute,
+    Entity,
+    getAttributeSource,
+    isEditableMode as checkIsEditableMode,
+    NestedAttributeValue,
+    AttributeItem,
+    isEmptyValue,
+    validateComplexAttribute,
+    ComplexAttributeValue,
+    EntitiesMap,
+    evaluateErrorPath,
+    getSingleAttributeEntity,
+    getEditableAttributeTypeSubAttributes
+} from '@reltio/mdm-sdk';
+import {ViewIdContext} from '@reltio/components';
+import mdmModule, {profile} from '@reltio/mdm-module';
+import {useDispatch, useSelector} from 'react-redux';
+import {propEq, pathOr, pipe, map, prop, equals, both, not, without, filter} from 'ramda';
+import {TableAttributeContext} from '../../../contexts/TableAttributeContext';
+import {isTempUri, createDefaultValues} from '@reltio/mdm-sdk';
+
+const emptyArray = [];
+
+export const useEditableAttribute = () => {
+    const [newAttributeUri, setNewAttributeUri] = useState<string>();
+    const [originalValues, setOriginalValues] = useState<ComplexAttributeValue[]>([]);
+
+    const dispatch = useDispatch();
+    const mode = useSelector(mdmModule.selectors.getMode);
+    const entityUri = useSelector(mdmModule.selectors.getEntityUri);
+    const metadata = useSelector(mdmModule.selectors.getMetadata);
+    const modifiedEntity = useSelector(
+        (state) => mdmModule.selectors.getModifiedEntity(state, entityUri) || ({} as Entity)
+    );
+
+    const viewId = useContext(ViewIdContext);
+    const {attributeType, values} = useContext(TableAttributeContext);
+
+    const isEditableMode = checkIsEditableMode(mode);
+    const attributeSource = getAttributeSource(attributeType);
+    const modifiedEntityValues: NestedAttributeValue[] = pathOr(
+        emptyArray,
+        [attributeSource, attributeType?.name],
+        modifiedEntity
+    );
+
+    const emptyEditorValue: ComplexAttributeValue = useMemo(
+        () =>
+            createNewAttribute({
+                parentUri: entityUri,
+                attributeType
+            }),
+        [entityUri, attributeType]
+    );
+
+    const isModifiedEntityValuesEmpty = isEmptyValue(modifiedEntityValues);
+    const showEmpty = attributeType.required && isModifiedEntityValuesEmpty;
+    const actualValues = useMemo(
+        () => (showEmpty ? [emptyEditorValue] : modifiedEntityValues),
+        [emptyEditorValue, modifiedEntityValues, showEmpty]
+    );
+
+    const modifiedValues = useMemo(() => {
+        const newValues = actualValues.filter(pipe(prop('uri'), both(isTempUri, pipe(equals(newAttributeUri), not))));
+
+        const oldValues = map((originalValue) => actualValues.find(propEq('uri', originalValue.uri)) || originalValue)(
+            values
+        );
+
+        return [...newValues, ...oldValues].map((value) => originalValues.find(propEq('uri', value.uri)) ?? value);
+    }, [actualValues, originalValues, newAttributeUri, values]);
+
+    const deletedUris = useMemo(
+        () =>
+            pipe(
+                map(prop('uri')),
+                filter((uri) => !actualValues.find(propEq('uri', uri)))
+            )(isEditableMode ? values : []),
+        [actualValues, values, isEditableMode]
+    );
+
+    const editingValues = actualValues.filter(
+        ({uri}) => uri === newAttributeUri || originalValues.find(propEq('uri', uri))
+    );
+
+    const onChangeAttribute = useCallback(
+        (params: AttributeItem) => pipe(profile.actions.modifyAttribute, dispatch)({...params, viewId}),
+        [viewId, dispatch]
+    );
+
+    const onDeleteAttribute = useCallback(
+        (params: AttributeItem) => pipe(profile.actions.removeAttribute, dispatch)({...params, viewId}),
+        [viewId, dispatch]
+    );
+
+    const onAdd = useCallback(() => {
+        const newAttribute = createNewAttribute({
+            parentUri: entityUri,
+            attributeType
+        });
+        setNewAttributeUri(newAttribute.uri);
+        onChangeAttribute({
+            value: {
+                ...newAttribute,
+                value: createDefaultValues({
+                    attributeTypes: getEditableAttributeTypeSubAttributes(metadata, attributeType),
+                    parentUri: newAttribute.uri,
+                    mode,
+                    metadata
+                })
+            },
+            uri: newAttribute.uri,
+            attributeType
+        });
+    }, [entityUri, attributeType, metadata, mode, onChangeAttribute]);
+
+    const onStartEditing = useCallback(
+        (attributeValue: ComplexAttributeValue) => {
+            setOriginalValues((prev) => {
+                if (!prev.find(propEq('uri', attributeValue.uri))) {
+                    return [...prev, attributeValue];
+                }
+                return prev;
+            });
+        },
+        [setOriginalValues]
+    );
+
+    const onCancel = useCallback(
+        (attributeValue: ComplexAttributeValue) => {
+            const editingValueOriginal = originalValues.find(propEq('uri', attributeValue.uri));
+            if (editingValueOriginal) {
+                const attributeItem = {attributeType, value: editingValueOriginal, uri: attributeValue.uri};
+                setOriginalValues((prev) => without([editingValueOriginal], prev));
+                if (!isModifiedEntityValuesEmpty) onChangeAttribute(attributeItem);
+            } else {
+                const attributeItem = {value: attributeValue, attributeType, uri: attributeValue.uri};
+                setNewAttributeUri(null);
+                onDeleteAttribute(attributeItem);
+            }
+            dispatch(profile.errors.actions.errorsSet([]));
+        },
+        [
+            onDeleteAttribute,
+            onChangeAttribute,
+            setOriginalValues,
+            isModifiedEntityValuesEmpty,
+            originalValues,
+            attributeType,
+            dispatch
+        ]
+    );
+
+    const validate = useCallback(
+        (attributeValue: ComplexAttributeValue, tempEntitiesMap: EntitiesMap) => {
+            const errors = validateComplexAttribute(metadata, attributeType, attributeValue, tempEntitiesMap).map(
+                (error) => ({
+                    ...error,
+                    path: evaluateErrorPath(
+                        {
+                            entityUri,
+                            metadata,
+                            entitiesMap: tempEntitiesMap || {
+                                [entityUri]: getSingleAttributeEntity(attributeType, attributeValue)
+                            }
+                        },
+                        error.uri || error.parentUri
+                    )
+                })
+            );
+            dispatch(profile.errors.actions.errorsSet(errors));
+            return errors.length === 0;
+        },
+        [dispatch, entityUri, attributeType, metadata]
+    );
+
+    const onApply = useCallback(
+        (attributeValue: ComplexAttributeValue, tempEntitiesMap?: EntitiesMap) => {
+            if (validate(attributeValue, tempEntitiesMap)) {
+                setNewAttributeUri(null);
+                setOriginalValues((prev) => {
+                    const original = prev.find(propEq('uri', attributeValue.uri));
+                    return original ? without([original], prev) : prev;
+                });
+            }
+        },
+        [setOriginalValues, setNewAttributeUri, validate]
+    );
+
+    const onReset = useCallback(() => {
+        setOriginalValues([]);
+        setNewAttributeUri(null);
+    }, []);
+
+    const checkHasChanges = (value: ComplexAttributeValue) => originalValues.find(propEq('uri', value.uri)) !== value;
+
+    return {
+        checkHasChanges,
+        onChangeAttribute,
+        onDeleteAttribute,
+        onAdd,
+        onCancel,
+        onApply,
+        onStartEditing,
+        onReset,
+        modifiedValues,
+        editingValues,
+        deletedUris
+    };
+};

package/src/components/ProfileTableAttributeView/components/TableAttributeEditableContent/TableAttributeEditableContent.tsx

@@ -0,0 +1,96 @@
+import React, {useContext, useEffect} from 'react';
+import i18n from 'ui-i18n';
+import {useSelector} from 'react-redux';
+import mdmModule from '@reltio/mdm-module';
+import {
+    AttributeError,
+    AttributeItem,
+    checkCanCreateAttribute,
+    ComplexAttributeValue,
+    EntitiesMap,
+    TableAttributeViewConfig
+} from '@reltio/mdm-sdk';
+import {useConfigPermissions} from '@reltio/components';
+import Button from '@mui/material/Button';
+import AddIcon from '@mui/icons-material/Add';
+import {TableAttributeContext} from '../../contexts/TableAttributeContext';
+import {AttributeEditing} from '../AttributeEditing/AttributeEditing';
+import {useExpandAttributes} from './hooks/useExpandAttributes';
+import {useStyles} from './styles';
+
+type Props = {
+    config: TableAttributeViewConfig;
+    editingValues: ComplexAttributeValue[];
+    modifiedValues: ComplexAttributeValue[];
+    onChangeAttribute: (item: AttributeItem) => void;
+    onDeleteAttribute: (item: AttributeItem) => void;
+    onAdd: () => void;
+    onCancel: (value: ComplexAttributeValue) => void;
+    onApply: (value: ComplexAttributeValue, tempEntitiesMap?: EntitiesMap) => void;
+    onReset: () => void;
+    onStartEditing: (value: ComplexAttributeValue) => void;
+    checkHasChanges: (value: ComplexAttributeValue) => boolean;
+    highlightedError: AttributeError;
+    highlightedAttributeError: AttributeError;
+};
+
+export const TableAttributeEditableContent = ({
+    config,
+    editingValues,
+    modifiedValues,
+    onChangeAttribute,
+    onDeleteAttribute,
+    onAdd,
+    onCancel,
+    onApply,
+    onStartEditing,
+    onReset,
+    checkHasChanges,
+    highlightedError,
+    highlightedAttributeError
+}: Props) => {
+    const styles = useStyles();
+
+    const {attributeType} = useContext(TableAttributeContext);
+    const mode = useSelector(mdmModule.selectors.getMode);
+
+    const {canCreate: hasConfigToCreate} = useConfigPermissions();
+    useExpandAttributes({onStartEditing, modifiedValues, highlightedError, highlightedAttributeError});
+
+    const canCreate =
+        hasConfigToCreate(config) &&
+        attributeType &&
+        checkCanCreateAttribute({attributeType, mode}) &&
+        !editingValues.length;
+
+    useEffect(() => {
+        return () => onReset();
+    }, [onReset]);
+
+    return (
+        <div className={styles.editor}>
+            {canCreate && (
+                <Button
+                    color="primary"
+                    onClick={onAdd}
+                    className={styles.addButton}
+                    data-reltio-id="table-attribute-view-add-button"
+                >
+                    <AddIcon classes={{root: styles.icon}} />
+                    <div className={styles.buttonLabel}>{i18n.text('Add')}</div>
+                </Button>
+            )}
+            {editingValues.map((value) => (
+                <AttributeEditing
+                    key={value.uri}
+                    attributeValue={value}
+                    onChangeAttribute={onChangeAttribute}
+                    onDeleteAttribute={onDeleteAttribute}
+                    onCancel={onCancel}
+                    onApply={onApply}
+                    hasChanges={checkHasChanges(value)}
+                />
+            ))}
+        </div>
+    );
+};