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

package/dist/published/components/custom/Form/FormComponents/ObjectComponent/InstanceLookup.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+import { ApiServices, Obj, ObjectInstance, Property } from '@evoke-platform/context';
+export declare type InstanceLookUpProps = {
+    object: Obj;
+    instanceId?: string;
+    apiServices: ApiServices;
+    setSelectedInstance: (selectedInstance: ObjectInstance) => void;
+    setRelationType: (relationType: 'new' | 'existing') => void;
+    mode: 'default' | 'existingOnly';
+    nestedFieldsView?: boolean;
+    filter?: Record<string, unknown>;
+};
+export declare type SearchFieldProps = {
+    searchableColumns: Property[];
+    filter: Record<string, unknown> | undefined;
+    setFilter: (filter: Record<string, unknown> | undefined) => void;
+    searchString: string;
+    setSearchString: (searchStrig: string) => void;
+};
+export declare const InstanceLookup: (props: InstanceLookUpProps) => JSX.Element;

package/dist/published/components/custom/Form/FormComponents/ObjectComponent/InstanceLookup.js

@@ -0,0 +1,229 @@
+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 { Clear, Search } from '@mui/icons-material';
+import { debounce, get, startCase } from 'lodash';
+import { DateTime } from 'luxon';
+import React, { useEffect, useState } from 'react';
+import { Button, IconButton, InputAdornment, TextField, Typography, } from '../../../../core';
+import { BuilderGrid } from '../../../../custom';
+import { Box, Grid } from '../../../../layout';
+import { getPrefixedUrl } from '../../utils';
+const SearchField = (props) => {
+    const { searchableColumns, filter, setFilter, searchString, setSearchString } = props;
+    const clearSearch = () => {
+        setSearchString('');
+        setFilter(undefined);
+    };
+    const handleSearch = (e) => __awaiter(void 0, void 0, void 0, function* () {
+        const searchProperties = searchableColumns.map((column) => {
+            const columnId = column.id;
+            return {
+                [columnId]: {
+                    like: e.target.value,
+                    options: 'i',
+                },
+            };
+        });
+        if (e.target.value.trim() === '' || !e.target.value) {
+            clearSearch();
+        }
+        else {
+            setSearchString(e.target.value);
+            setFilter(Object.assign(Object.assign({}, filter), { where: {
+                    or: searchProperties,
+                }, limit: 100 }));
+        }
+    });
+    return (React.createElement(TextField, { autoFocus: true, placeholder: "Search", value: searchString, onChange: (e) => handleSearch(e), size: "medium", fullWidth: true, sx: { marginBottom: '15px', marginTop: '15px' }, InputProps: {
+            endAdornment: (React.createElement(InputAdornment, { position: "end" },
+                React.createElement(IconButton, { sx: {
+                        visibility: searchString.length > 0 ? 'visible' : 'hidden',
+                    }, onClick: () => clearSearch() },
+                    React.createElement(Clear, { sx: {
+                            fontSize: '22px',
+                        } })))),
+            startAdornment: (React.createElement(InputAdornment, { position: "start" },
+                React.createElement(Search, { sx: { fontSize: '22px', color: '#637381' } }))),
+        } }));
+};
+export const InstanceLookup = (props) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    const { object, apiServices, setSelectedInstance, mode, nestedFieldsView, setRelationType, filter: criteriaFilter, } = props;
+    const [rows, setRows] = useState([]);
+    const [loading, setLoading] = useState(false);
+    const [filter, setFilter] = useState();
+    const [searchString, setSearchString] = useState('');
+    const [searchableColumns] = useState((_b = (_a = object.properties) === null || _a === void 0 ? void 0 : _a.filter((property) => property.searchable)) !== null && _b !== void 0 ? _b : []);
+    const retrieveColumns = (tableViewLayout) => {
+        var _a, _b, _c;
+        let columns = [];
+        if (tableViewLayout === null || tableViewLayout === void 0 ? void 0 : tableViewLayout.properties) {
+            for (const prop of tableViewLayout.properties) {
+                const propertyId = prop.id.split('.')[0];
+                const property = (_a = object.properties) === null || _a === void 0 ? void 0 : _a.find((p) => p.id === propertyId);
+                if (property) {
+                    if (property.type === 'address') {
+                        columns.push({
+                            field: prop.id,
+                            headerName: `${property.name} - ${startCase(prop.id.split('.')[1])}`,
+                            type: 'string',
+                            flex: 1,
+                            valueGetter: (params) => {
+                                var _a;
+                                return (_a = get(params.row, prop.id)) !== null && _a !== void 0 ? _a : '';
+                            },
+                        });
+                    }
+                    else if (property.type === 'object' || property.type === 'user') {
+                        columns.push({
+                            field: prop.id,
+                            headerName: property.name,
+                            type: 'string',
+                            flex: 1,
+                            valueGetter: (params) => {
+                                var _a;
+                                return ((_a = get(params.row, !prop.id.includes('.') ? `${prop.id}.name` : prop.id)) !== null && _a !== void 0 ? _a : '');
+                            },
+                        });
+                    }
+                    else if (property.type === 'document') {
+                        columns.push({
+                            field: prop.id,
+                            headerName: property.name,
+                            type: 'string',
+                            flex: 1,
+                            valueGetter: (params) => {
+                                var _a, _b;
+                                const row = params.row;
+                                return ((_b = (_a = row[prop.id]) === null || _a === void 0 ? void 0 : _a.map((v) => v.name).join(', ')) !== null && _b !== void 0 ? _b : '');
+                            },
+                        });
+                    }
+                    else if (property.type === 'date') {
+                        columns.push({
+                            field: prop.id,
+                            headerName: property.name,
+                            type: 'string',
+                            flex: 1,
+                            valueFormatter: (params) => {
+                                if (!params.value) {
+                                    return params.value;
+                                }
+                                // The value should really be typed as string | undefined so once asserted as defined
+                                // the value must be a string.
+                                return DateTime.fromISO(params.value).toLocaleString(DateTime.DATE_SHORT);
+                            },
+                        });
+                    }
+                    else if (property.type === 'date-time') {
+                        columns.push({
+                            field: prop.id,
+                            headerName: property.name,
+                            type: 'string',
+                            flex: 1,
+                            valueFormatter: (params) => {
+                                if (!params.value) {
+                                    return params.value;
+                                }
+                                // The value should really be typed as string | undefined so once asserted as defined
+                                // the value must be a string.
+                                return DateTime.fromISO(params.value).toLocaleString(DateTime.DATETIME_SHORT);
+                            },
+                        });
+                    }
+                    else if (property.type === 'time') {
+                        columns.push({
+                            field: prop.id,
+                            headerName: property.name,
+                            type: 'string',
+                            flex: 1,
+                            valueFormatter: (params) => {
+                                if (!params.value) {
+                                    return params.value;
+                                }
+                                // The value should really be typed as string | undefined so once asserted as defined
+                                // the value must be a string.
+                                return DateTime.fromISO(params.value).toLocaleString(DateTime.TIME_SIMPLE);
+                            },
+                        });
+                    }
+                    else {
+                        columns.push({
+                            field: prop.id,
+                            headerName: property.name,
+                            type: 'string',
+                            flex: 1,
+                        });
+                    }
+                }
+            }
+        }
+        else {
+            const name = (_b = object.properties) === null || _b === void 0 ? void 0 : _b.find((property) => property.id == 'name');
+            columns = [{ field: 'name', headerName: (_c = name === null || name === void 0 ? void 0 : name.name) !== null && _c !== void 0 ? _c : 'Name', type: 'string', flex: 1 }];
+        }
+        return columns;
+    };
+    function fetchObjectInstance() {
+        var _a;
+        setLoading(true);
+        const combinedFilter = Object.assign(Object.assign(Object.assign({}, criteriaFilter), filter), { where: (criteriaFilter === null || criteriaFilter === void 0 ? void 0 : criteriaFilter.where)
+                ? {
+                    and: [criteriaFilter.where, filter === null || filter === void 0 ? void 0 : filter.where],
+                }
+                : filter === null || filter === void 0 ? void 0 : filter.where });
+        apiServices.get(getPrefixedUrl(`/objects/${object.id}/instances`), (_a = { params: { filter: JSON.stringify(combinedFilter) } }) !== null && _a !== void 0 ? _a : {}, (error, objectInstances) => {
+            if (error) {
+                console.error(error);
+            }
+            else {
+                !!objectInstances && setRows(objectInstances);
+            }
+            setLoading(false);
+        });
+    }
+    useEffect(() => {
+        if (filter || searchString.length) {
+            debounce(() => fetchObjectInstance(), 500)();
+        }
+        else if (searchString === '') {
+            setRows([]);
+        }
+    }, [filter, searchString.length]);
+    return (React.createElement(Grid, { container: true, sx: { paddingBottom: '30px' } },
+        React.createElement(Grid, { item: true, xs: 12 }, searchableColumns.length ? (React.createElement(SearchField, { searchString: searchString, setSearchString: setSearchString, filter: filter, setFilter: setFilter, searchableColumns: searchableColumns })) : (React.createElement(Typography, { sx: { fontSize: '16px', fontWeight: '700' } }, "There are no searchable properties configured for this object"))),
+        React.createElement(BuilderGrid, { item: 'instances', rows: rows, columns: retrieveColumns((_c = object.viewLayout) === null || _c === void 0 ? void 0 : _c.table), onRowClick: (params) => setSelectedInstance(params.row), initialSort: {
+                field: (_g = (_f = (_e = (_d = object.viewLayout) === null || _d === void 0 ? void 0 : _d.table) === null || _e === void 0 ? void 0 : _e.sort) === null || _f === void 0 ? void 0 : _f.colId) !== null && _g !== void 0 ? _g : 'name',
+                sort: (_l = (_k = (_j = (_h = object.viewLayout) === null || _h === void 0 ? void 0 : _h.table) === null || _j === void 0 ? void 0 : _j.sort) === null || _k === void 0 ? void 0 : _k.sort) !== null && _l !== void 0 ? _l : 'asc',
+            }, sx: {
+                height: '360px',
+                width: '100%',
+            }, hideToolbar: true, loading: loading, hideEmptyContent: true, localeText: {
+                noRowsLabel: searchString.length > 0
+                    ? `No Results Found. Refine your search ${mode !== 'existingOnly' ? 'or create a new record.' : '.'}`
+                    : 'Search to view results',
+            }, noRowsOverlay: React.createElement(Box, { sx: { height: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center' } }, searchString.length > 0 ? (React.createElement(React.Fragment, null,
+                React.createElement(Box, null,
+                    React.createElement(Typography, { sx: {
+                            fontSize: '14px',
+                            fontWeight: 700,
+                            textAlign: 'center',
+                        } }, "No Results Found"),
+                    React.createElement(Typography, { sx: {
+                            fontSize: '14px',
+                            textAlign: 'center',
+                        } },
+                        "Refine your search",
+                        !nestedFieldsView && mode !== 'existingOnly' && (React.createElement(React.Fragment, null,
+                            ' or ',
+                            React.createElement(Button, { variant: "text", onClick: () => setRelationType('new'), sx: {
+                                    padding: '3px 5px',
+                                } }, "enter a new record"))))))) : (React.createElement(Typography, { sx: { fontSize: '16px' } }, "Search to view results"))) })));
+};

package/dist/published/components/custom/Form/FormComponents/ObjectComponent/ObjectComponent.d.ts

@@ -0,0 +1,34 @@
+import { Obj, Reference } from '@evoke-platform/context';
+import { ReactComponent } from '@formio/react';
+import { Root } from 'react-dom/client';
+import { BaseFormComponentProps } from '../../types';
+declare type ObjectComponentProps = BaseFormComponentProps & {
+    mode: 'default' | 'existingOnly';
+    defaultValueCriteria?: Record<string, unknown>;
+};
+export declare class ObjectComponent extends ReactComponent {
+    relatedObject?: Obj;
+    [x: string]: any;
+    static schema: any;
+    component: ObjectComponentProps;
+    errorDetails: any;
+    componentRoot?: Root;
+    criteria?: Record<string, unknown>;
+    updatedCriteria: Record<string, unknown>;
+    defaultValueCriteria?: Record<string, unknown>;
+    updatedDefaultValueCriteria: Record<string, unknown>;
+    constructor(component: ObjectComponentProps, options: any, data: any);
+    init(): void;
+    clearErrors(): void;
+    handleValidation(): void;
+    hasErrors(): boolean;
+    errorMessages(): string;
+    /**
+     * Synchronizes out-of-the-box formio errors with this field's errorDetails object
+     */
+    manageFormErrors(): void;
+    handleChangeObjectProperty: (key: string, value?: Reference | null) => void;
+    beforeSubmit(): void;
+    attachReact(element: Element): void;
+}
+export {};

package/dist/published/components/custom/Form/FormComponents/ObjectComponent/ObjectComponent.js

@@ -0,0 +1,150 @@
+import { ReactComponent } from '@formio/react';
+import dot from 'dot-object';
+import { cloneDeep, isEmpty } from 'lodash';
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import { FormComponentWrapper } from '../../Common';
+import { getAllCriteriaInputs, isPropertyVisible, transformToWhere, updateCriteriaInputs } from '../../utils';
+import { ObjectPropertyInput } from './ObjectPropertyInput';
+export class ObjectComponent extends ReactComponent {
+    constructor(component, options, data) {
+        var _a, _b;
+        super(Object.assign(Object.assign({}, component), { canUpdateProperty: !component.readOnly, hideLabel: true }), options, data);
+        this.handleChangeObjectProperty = (key, value) => {
+            // set the value on the form instance at this.root.data
+            this.setValue(value !== null && value !== void 0 ? value : '');
+            // update the value in the component instance
+            this.updateValue(value !== null && value !== void 0 ? value : {}, { modified: true });
+            this.handleValidation();
+            this.emit('changed-' + this.component.key, value);
+            this.attach(this.element);
+            this.component.autoSave && this.component.autoSave({ [key]: value });
+        };
+        this.errorDetails = {};
+        this.criteria = component.validate.criteria;
+        this.updatedCriteria = (_a = cloneDeep(component.validate.criteria)) !== null && _a !== void 0 ? _a : {};
+        this.defaultValueCriteria = component.defaultValueCriteria;
+        this.updatedDefaultValueCriteria = (_b = cloneDeep(component.defaultValueCriteria)) !== null && _b !== void 0 ? _b : {};
+        this.handleChangeObjectProperty = this.handleChangeObjectProperty.bind(this);
+    }
+    init() {
+        var _a, _b;
+        this.on('changed-' + this.component.conditional.when, (value) => {
+            //set default value when conditional field is shown
+            if (this.component.defaultValue && value === this.component.conditional.eq) {
+                this.setValue(this.component.defaultValue);
+                this.updateValue(this.component.defaultValue, { modified: true });
+            }
+            //clear data and errors when a true conditional field is hidden
+            if (this.component.conditional.show && value !== this.component.conditional.eq) {
+                this.setValue('');
+                this.updateValue('', { modified: true });
+                this.clearErrors();
+                super.detach();
+                // Detach the componentRoot when the component is hidden
+                if (this.componentRoot) {
+                    this.componentRoot.unmount();
+                    this.componentRoot = undefined;
+                }
+            }
+        });
+        const data = dot.dot(this.root._data);
+        if (this.criteria) {
+            const inputProps = getAllCriteriaInputs(this.criteria);
+            for (const inputProp of inputProps) {
+                // Parse data to update criteria when form is loaded.
+                updateCriteriaInputs(this.updatedCriteria, inputProp, data[inputProp], true);
+                // Parse data to update criteria when form field is updated
+                // Need to parse all fields again.
+                const compKeyFragments = inputProp.split('.');
+                let compKey = compKeyFragments[0];
+                if (['line1', 'line2', 'city', 'state', 'zipCode'].includes(compKeyFragments[1])) {
+                    compKey = inputProp;
+                }
+                this.on(`changed-${compKey}`, () => {
+                    var _a;
+                    const data = dot.dot(this.root._data);
+                    this.updatedCriteria = (_a = cloneDeep(this.criteria)) !== null && _a !== void 0 ? _a : {};
+                    for (const inputProp of inputProps) {
+                        updateCriteriaInputs(this.updatedCriteria, inputProp, data[inputProp], true);
+                    }
+                    this.attachReact(this.element);
+                });
+            }
+        }
+        if (this.defaultValueCriteria) {
+            const inputProps = getAllCriteriaInputs(this.defaultValueCriteria);
+            updateCriteriaInputs(this.updatedDefaultValueCriteria, 'user.id', (_b = (_a = this.component.user) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : '');
+            for (const inputProp of inputProps) {
+                // Parse data to update criteria when form is loaded.
+                updateCriteriaInputs(this.updatedDefaultValueCriteria, inputProp, data[inputProp], true);
+                // Parse data to update criteria when form field is updated
+                // Need to parse all fields again.
+                const compKeyFragments = inputProp.split('.');
+                let compKey = compKeyFragments[0];
+                if (['line1', 'line2', 'city', 'state', 'zipCode'].includes(compKeyFragments[1])) {
+                    compKey = inputProp;
+                }
+                this.on(`changed-${compKey}`, () => {
+                    var _a, _b, _c;
+                    const data = dot.dot(this.root._data);
+                    this.updatedDefaultValueCriteria = (_a = cloneDeep(this.defaultValueCriteria)) !== null && _a !== void 0 ? _a : {};
+                    updateCriteriaInputs(this.updatedDefaultValueCriteria, 'user.id', (_c = (_b = this.component.user) === null || _b === void 0 ? void 0 : _b.id) !== null && _c !== void 0 ? _c : '');
+                    for (const inputProp of inputProps) {
+                        updateCriteriaInputs(this.updatedDefaultValueCriteria, inputProp, data[inputProp], true);
+                    }
+                    this.attachReact(this.element);
+                });
+            }
+        }
+    }
+    clearErrors() {
+        this.errorDetails = {};
+        this.root.customErrors = this.root.customErrors.filter((error) => error.formattedKeyOrPath !== this.component.key);
+    }
+    handleValidation() {
+        if (!isPropertyVisible(this.component.conditional, this.root.data)) {
+            return;
+        }
+        //check for out-of-the-box formio errors which store on this.root.errors
+        this.checkValidity(this.dataValue, true, this.data);
+        this.manageFormErrors();
+    }
+    hasErrors() {
+        return !isEmpty(this.errorDetails);
+    }
+    errorMessages() {
+        return Object.values(this.errorDetails).join(', ');
+    }
+    /**
+     * Synchronizes out-of-the-box formio errors with this field's errorDetails object
+     */
+    manageFormErrors() {
+        var _a;
+        const outOfTheBoxError = (_a = this.root.errors.find((error) => {
+            return error.component.key === this.component.key;
+        })) === null || _a === void 0 ? void 0 : _a.message;
+        //add OoB formio error to errorDetails object to show under field
+        if (outOfTheBoxError) {
+            this.errorDetails['rootError'] = outOfTheBoxError;
+        }
+        else {
+            delete this.errorDetails['rootError'];
+        }
+    }
+    beforeSubmit() {
+        this.handleValidation();
+        this.element && this.attach(this.element);
+    }
+    attachReact(element) {
+        const updatedComponent = Object.assign(Object.assign({}, this.component), { instance: Object.assign(Object.assign({}, this.component.instance), { [this.component.key]: isEmpty(this.dataValue) ? null : this.dataValue }), defaultValueCriteria: this.updatedDefaultValueCriteria });
+        if (!this.componentRoot) {
+            this.componentRoot = createRoot(element);
+        }
+        // FormIO uses id for an enclosing div, so we need to give the input field a different id.
+        const inputId = `${this.component.id}-input`;
+        return this.componentRoot.render(React.createElement("div", null,
+            React.createElement(FormComponentWrapper, Object.assign({}, updatedComponent, { inputId: inputId, errorMessage: this.errorMessages() }),
+                React.createElement(ObjectPropertyInput, Object.assign({}, updatedComponent, { id: inputId, handleChangeObjectProperty: this.handleChangeObjectProperty, error: this.hasErrors(), filter: this.criteria ? { where: transformToWhere(this.updatedCriteria) } : undefined })))));
+    }
+}

package/dist/published/components/custom/Form/FormComponents/ObjectComponent/ObjectPropertyInput.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { ObjectPropertyInputProps } from '../../types';
+export declare const ObjectPropertyInput: (props: ObjectPropertyInputProps) => JSX.Element;