@evoke-platform/ui-components 1.0.0-dev.217 → 1.0.0-dev.218

package/dist/published/components/custom/Form/FormComponents/RepeatableFieldComponent/ManyToMany/DropdownRepeatableField.js

@@ -0,0 +1,158 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { useNotification, } from '@evoke-platform/context';
+import { debounce, isEmpty, isObject } from 'lodash';
+import React, { useCallback, useEffect, useState } from 'react';
+import { Skeleton } from '../../../../../core';
+import { getMiddleObject, getPrefixedUrl, transformToWhere } from '../../../utils';
+import { DropdownRepeatableFieldInput } from './DropdownRepeatableFieldInput';
+export const DropdownRepeatableField = (props) => {
+    var _a;
+    const { id, property, criteria, instance, readOnly, apiServices, initialMiddleObjectInstances, middleObject, getMiddleObjectInstances, fieldHeight, } = props;
+    const [middleObjectInstances, setMiddleObjectInstances] = useState(initialMiddleObjectInstances);
+    const [endObject, setEndObject] = useState();
+    const [endObjectInstances, setEndObjectInstances] = useState([]);
+    const [viewLayout, setViewLayout] = useState();
+    const [loading, setLoading] = useState(false);
+    const [initialLoading, setInitialLoading] = useState(true);
+    const [selectedOptions, setSelectedOptions] = useState([]);
+    const [snackbarError, setSnackbarError] = useState({
+        showAlert: false,
+        isError: true,
+    });
+    const [searchValue, setSearchValue] = useState('');
+    const { instanceChanges } = useNotification();
+    const fetchMiddleObjectInstances = () => __awaiter(void 0, void 0, void 0, function* () {
+        const newInstances = yield getMiddleObjectInstances();
+        setMiddleObjectInstances(newInstances);
+    });
+    const setDropDownSelections = (instances) => {
+        setSelectedOptions(instances
+            .filter((currInstance) => property.manyToManyPropertyId in currInstance)
+            .map((currInstance) => {
+            var _a;
+            return ({
+                label: (_a = currInstance[property.manyToManyPropertyId]) === null || _a === void 0 ? void 0 : _a.name,
+                endObjectId: currInstance[property.manyToManyPropertyId].id,
+                middleObjectId: currInstance.id,
+            });
+        })
+            .sort((instanceA, instanceB) => instanceA.label.localeCompare(instanceB.label)));
+    };
+    useEffect(() => {
+        var _a;
+        const endObjectProperty = (_a = middleObject === null || middleObject === void 0 ? void 0 : middleObject.properties) === null || _a === void 0 ? void 0 : _a.find((currProperty) => property.manyToManyPropertyId === currProperty.id);
+        if (endObjectProperty && endObjectProperty.objectId) {
+            apiServices.get(getPrefixedUrl(`/objects/${endObjectProperty.objectId}/effective`), { params: { filter: { fields: ['id', 'name', 'properties', 'viewLayout'] } } }, (error, effectiveObject) => {
+                var _a;
+                if (error) {
+                    console.error(error);
+                }
+                else {
+                    // If there's no error then the effective object is defined.
+                    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                    const endObject = effectiveObject;
+                    setEndObject(endObject);
+                    if ((_a = endObject.viewLayout) === null || _a === void 0 ? void 0 : _a.dropdown) {
+                        setViewLayout(endObject.viewLayout.dropdown);
+                    }
+                }
+            });
+        }
+    }, [middleObject, apiServices]);
+    useEffect(() => {
+        instanceChanges === null || instanceChanges === void 0 ? void 0 : instanceChanges.subscribe(middleObject.rootObjectId, () => {
+            fetchMiddleObjectInstances();
+        });
+        return () => instanceChanges === null || instanceChanges === void 0 ? void 0 : instanceChanges.unsubscribe(middleObject.rootObjectId);
+    }, [instanceChanges, fetchMiddleObjectInstances]);
+    const fetchEndObjectInstances = useCallback((searchedName) => {
+        var _a;
+        if (property.objectId && property.manyToManyPropertyId) {
+            setLoading(true);
+            const endObjectProperty = (_a = middleObject.properties) === null || _a === void 0 ? void 0 : _a.find((currProperty) => property.manyToManyPropertyId === currProperty.id);
+            if (endObjectProperty === null || endObjectProperty === void 0 ? void 0 : endObjectProperty.objectId) {
+                const filter = {
+                    limit: 100,
+                    order: 'name ASC',
+                };
+                let searchCriteria = criteria && !isEmpty(criteria) ? transformToWhere(criteria) : {};
+                if (searchedName === null || searchedName === void 0 ? void 0 : searchedName.length) {
+                    const nameCriteria = transformToWhere({
+                        name: {
+                            like: searchedName,
+                            options: 'i',
+                        },
+                    });
+                    searchCriteria = !isEmpty(criteria)
+                        ? {
+                            and: [searchCriteria, nameCriteria],
+                        }
+                        : nameCriteria;
+                }
+                filter.where = searchCriteria;
+                apiServices.get(getPrefixedUrl(`/objects/${endObjectProperty.objectId}/instances`), { params: { filter: JSON.stringify(filter) } }, (error, instances) => {
+                    if (!error && instances) {
+                        setEndObjectInstances(instances);
+                    }
+                    setInitialLoading(false);
+                    setLoading(false);
+                });
+            }
+        }
+    }, [property.objectId, property.manyToManyPropertyId, apiServices, middleObject]);
+    const debouncedEndObjectSearch = useCallback(debounce(fetchEndObjectInstances, 500), [fetchEndObjectInstances]);
+    useEffect(() => {
+        debouncedEndObjectSearch(searchValue);
+        return () => debouncedEndObjectSearch.cancel();
+    }, [searchValue, debouncedEndObjectSearch]);
+    useEffect(() => {
+        fetchEndObjectInstances();
+    }, [criteria, middleObject, property, fetchEndObjectInstances]);
+    const saveMiddleInstance = (endObjectId, endObjectName) => {
+        if (property.objectId) {
+            const middleObject = getMiddleObject(instance, property, endObjectId, endObjectName);
+            apiServices.post(getPrefixedUrl(`/objects/${property.objectId}/instances/actions`), { actionId: `_create`, input: middleObject }, (error, newInstance) => {
+                if (!error && newInstance && isObject(newInstance)) {
+                    setMiddleObjectInstances((prevObjectInstances) => [
+                        ...prevObjectInstances,
+                        newInstance,
+                    ]);
+                }
+                else {
+                    if (error) {
+                        setSnackbarError({
+                            showAlert: true,
+                            message: 'An error occured while adding an instance',
+                            isError: true,
+                        });
+                        setDropDownSelections(middleObjectInstances);
+                    }
+                }
+            });
+        }
+    };
+    const removeMiddleInstance = (instanceId) => {
+        apiServices.post(getPrefixedUrl(`/objects/${property.objectId}/instances/${instanceId}/actions`), { actionId: '_delete' }, (error, res) => {
+            if (!error) {
+                setMiddleObjectInstances((prevInstances) => prevInstances.filter((curr) => curr.id !== instanceId));
+            }
+            else {
+                setDropDownSelections(middleObjectInstances);
+                setSnackbarError({
+                    showAlert: true,
+                    message: 'An error occurred while deleting the instance',
+                    isError: true,
+                });
+            }
+        });
+    };
+    return initialLoading ? (React.createElement(Skeleton, null)) : (React.createElement(React.Fragment, null, middleObjectInstances && endObject && (React.createElement(DropdownRepeatableFieldInput, { id: id, property: property, readOnly: readOnly || !((_a = middleObject.actions) === null || _a === void 0 ? void 0 : _a.some((action) => action.id === '_create')), viewLayout: viewLayout, middleObjectInstances: middleObjectInstances, endObjectInstances: endObjectInstances !== null && endObjectInstances !== void 0 ? endObjectInstances : [], endObject: endObject, searchValue: searchValue, loading: loading, handleSaveMiddleInstance: saveMiddleInstance, handleRemoveMiddleInstance: removeMiddleInstance, setSearchValue: setSearchValue, setSnackbarError: setSnackbarError, snackbarError: snackbarError, selectedOptions: selectedOptions, setSelectedOptions: setSelectedOptions, setDropdownSelections: setDropDownSelections, fieldHeight: fieldHeight }))));
+};

package/dist/published/components/custom/Form/FormComponents/RepeatableFieldComponent/ManyToMany/DropdownRepeatableFieldInput.d.ts

@@ -0,0 +1,39 @@
+/// <reference types="react" />
+import { DropdownViewLayout, Obj, ObjectInstance, Property } from '@evoke-platform/context';
+import { AutocompleteOption } from '../../../../../core';
+declare type DropdownRepeatableFieldInputProps = {
+    id: string;
+    property: Property;
+    readOnly: boolean;
+    viewLayout?: DropdownViewLayout;
+    middleObjectInstances: ObjectInstance[];
+    endObjectInstances: ObjectInstance[];
+    endObject: Obj;
+    searchValue: string;
+    loading: boolean;
+    fieldHeight?: 'small' | 'medium';
+    handleSaveMiddleInstance: (endObjectId: string, endObjectName: string) => void;
+    handleRemoveMiddleInstance: (instanceId: string) => void;
+    setSearchValue: (value: string) => void;
+    setSelectedOptions: (selectedOptions: DropdownRepeatableFieldInputOption[]) => void;
+    selectedOptions: DropdownRepeatableFieldInputOption[];
+    setSnackbarError: (snackbarError: {
+        showAlert: boolean;
+        message?: string;
+        isError: boolean;
+    }) => void;
+    snackbarError: {
+        showAlert: boolean;
+        message?: string;
+        isError: boolean;
+    };
+    setDropdownSelections?: (middleObjectInstances: ObjectInstance[]) => void;
+};
+export declare type DropdownRepeatableFieldInputOption = AutocompleteOption & {
+    endObjectId: string;
+    middleObjectId?: string;
+    subLabel?: string;
+    hidden?: boolean;
+};
+export declare const DropdownRepeatableFieldInput: (props: DropdownRepeatableFieldInputProps) => JSX.Element;
+export {};

package/dist/published/components/custom/Form/FormComponents/RepeatableFieldComponent/ManyToMany/DropdownRepeatableFieldInput.js

@@ -0,0 +1,89 @@
+import Handlebars from 'handlebars';
+import { difference, isEmpty, isObject } from 'lodash';
+import React, { useEffect, useState } from 'react';
+import { FormField } from '../../../..';
+import { Snackbar, TextField, Typography } from '../../../../../core';
+import { normalizeDates } from '../../../utils';
+const isDropdownRepeatableFieldInputOption = (option) => isObject(option) && 'label' in option && 'endObjectId' in option;
+export const DropdownRepeatableFieldInput = (props) => {
+    const { id, property, readOnly, viewLayout, middleObjectInstances, endObjectInstances, endObject, searchValue, loading, handleSaveMiddleInstance, handleRemoveMiddleInstance, setSearchValue, selectedOptions, setSnackbarError, snackbarError, setDropdownSelections, fieldHeight, } = props;
+    const [selectOptions, setSelectOptions] = useState([]);
+    useEffect(() => {
+        setDropdownSelections && setDropdownSelections(middleObjectInstances);
+    }, [middleObjectInstances]);
+    useEffect(() => {
+        var _a;
+        const manyToManyPropertyId = property.manyToManyPropertyId;
+        if (manyToManyPropertyId) {
+            const enums = endObjectInstances
+                .map((endObjectInstance) => {
+                const normalizedInstance = Object.assign({}, endObjectInstance);
+                normalizeDates([normalizedInstance], endObject);
+                return normalizedInstance;
+            })
+                .map((endObjectInstance) => ({
+                label: endObjectInstance.name,
+                subLabel: (viewLayout === null || viewLayout === void 0 ? void 0 : viewLayout.secondaryTextExpression)
+                    ? compileExpression(endObjectInstance, viewLayout.secondaryTextExpression)
+                    : undefined,
+                endObjectId: endObjectInstance.id,
+                value: undefined,
+            }));
+            setSelectOptions((_a = [
+                ...enums,
+                ...selectedOptions
+                    .filter((selectedOption) => !enums.find((availableOption) => availableOption.endObjectId === selectedOption.endObjectId))
+                    .map((option) => (Object.assign(Object.assign({}, option), { hidden: true }))),
+            ]) !== null && _a !== void 0 ? _a : []);
+        }
+    }, [endObjectInstances, viewLayout]);
+    const handleChange = (key, newSelectedOptions) => {
+        // Delete middle objects that have been removed
+        // Add middle objects that have been added
+        // You can only really add or remove one value at a time
+        const addedValues = difference(newSelectedOptions, selectedOptions);
+        if (!isEmpty(addedValues)) {
+            addedValues.forEach((newValue) => {
+                if (isDropdownRepeatableFieldInputOption(newValue) &&
+                    property.relatedPropertyId &&
+                    property.manyToManyPropertyId) {
+                    handleSaveMiddleInstance(newValue.endObjectId, newValue.label);
+                }
+            });
+        }
+        const removedValues = difference(selectedOptions, newSelectedOptions);
+        if (!isEmpty(removedValues)) {
+            removedValues.forEach((removedValue) => {
+                if (isObject(removedValue) && removedValue.middleObjectId) {
+                    handleRemoveMiddleInstance(removedValue.middleObjectId);
+                }
+            });
+        }
+    };
+    const compileExpression = (instance, expression) => {
+        const template = Handlebars.compile(expression);
+        return template(instance);
+    };
+    return (React.createElement(React.Fragment, null, !readOnly ? (property && (React.createElement(React.Fragment, null,
+        React.createElement(FormField, { id: id, property: Object.assign(Object.assign({}, property), { type: 'array', 
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                enum: selectOptions }), onChange: handleChange, defaultValue: selectedOptions, isOptionEqualToValue: (option, value) => isDropdownRepeatableFieldInputOption(value) &&
+                isDropdownRepeatableFieldInputOption(option) &&
+                option.endObjectId === value.endObjectId, size: fieldHeight !== null && fieldHeight !== void 0 ? fieldHeight : 'medium', renderOption: (props, option) => {
+                return isObject(props) && isDropdownRepeatableFieldInputOption(option) ? (React.createElement("li", Object.assign({}, props, { key: option.endObjectId }),
+                    React.createElement(Typography, null,
+                        option.label,
+                        React.createElement("br", null),
+                        React.createElement(Typography, { variant: "caption", color: "#586069" }, option.subLabel ? option.subLabel : '')))) : null;
+            }, disableCloseOnSelect: true, additionalProps: {
+                filterOptions: (options) => {
+                    return options.filter((option) => !option.hidden);
+                },
+                inputValue: searchValue,
+                renderInput: (params) => (React.createElement(TextField, Object.assign({}, params, { onChange: (event) => {
+                        setSearchValue(event.target.value);
+                    } }))),
+                loading: loading,
+            } }),
+        React.createElement(Snackbar, { open: snackbarError.showAlert, handleClose: () => setSnackbarError({ isError: snackbarError.isError, showAlert: false }), message: snackbarError.message, error: snackbarError.isError })))) : (React.createElement(Typography, null, selectedOptions && selectedOptions.map((option) => option.label).join(', ')))));
+};

package/dist/published/components/custom/Form/FormComponents/RepeatableFieldComponent/RepeatableField.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { ApiServices, ObjectInstance, Property, UserAccount } from '@evoke-platform/context';
+export declare type ObjectPropertyInputProps = {
+    property: Property;
+    instance: ObjectInstance;
+    canUpdateProperty: boolean;
+    apiServices: ApiServices;
+    queryAddresses?: unknown;
+    user?: UserAccount;
+};
+declare const RepeatableField: (props: ObjectPropertyInputProps) => JSX.Element;
+export default RepeatableField;