@evoke-platform/ui-components 1.6.0-dev.3 → 1.6.0-dev.30

package/dist/published/components/custom/FormV2/components/FormFieldTypes/UserProperty.js

@@ -0,0 +1,129 @@
+import { useApiServices } from '@evoke-platform/context';
+import { ExpandMore } from '@mui/icons-material';
+import React, { useEffect, useState } from 'react';
+import { useFormContext } from '../../../../../theme/hooks';
+import { Autocomplete, Paper, TextField, Typography } from '../../../../core';
+import { getPrefixedUrl, isOptionEqualToValue } from '../utils';
+const UserProperty = (props) => {
+    const { id, handleChange, error, value, fieldHeight, readOnly, hasDescription } = props;
+    const { fetchedOptions, setFetchedOptions } = useFormContext();
+    const [loadingOptions, setLoadingOptions] = useState(false);
+    const apiServices = useApiServices();
+    const [options, setOptions] = useState(fetchedOptions[`${id}Options`] || []);
+    const [openOptions, setOpenOptions] = useState(false);
+    const [users, setUsers] = useState();
+    const [userValue, setUserValue] = useState();
+    useEffect(() => {
+        if (value && typeof value == 'object' && 'name' in value && 'id' in value) {
+            setUserValue({ label: value.name, value: value.id });
+        }
+        else {
+            setUserValue(undefined);
+        }
+    }, [value]);
+    useEffect(() => {
+        if (!fetchedOptions[`${id}Options`]) {
+            setLoadingOptions(true);
+            apiServices.get(getPrefixedUrl(`/users`), (error, userList) => {
+                setUsers(userList);
+                setOptions((userList ?? []).map((user) => ({
+                    label: user.name,
+                    value: user.id,
+                })));
+                setFetchedOptions({
+                    [`${id}Options`]: (userList ?? []).map((user) => ({
+                        label: user.name,
+                        value: user.id,
+                    })),
+                });
+                setLoadingOptions(false);
+            });
+        }
+    }, [id]);
+    function handleChangeUserProperty(id, value) {
+        const updatedValue = typeof value.value === 'string' ? { name: value.label, id: value.value } : undefined;
+        handleChange(id, updatedValue);
+    }
+    return (options && (React.createElement(Autocomplete, { id: id, fullWidth: true, open: openOptions, popupIcon: userValue || readOnly ? '' : React.createElement(ExpandMore, null), PaperComponent: ({ children }) => {
+            return (React.createElement(Paper, { sx: {
+                    borderRadius: '12px',
+                    boxShadow: '0px 24px 48px 0px rgba(145, 158, 171, 0.2)',
+                    '& .MuiAutocomplete-listbox': {
+                        maxHeight: '25vh',
+                    },
+                    '& .MuiAutocomplete-noOptions': {
+                        fontFamily: 'sans-serif',
+                        fontSize: '14px',
+                        paddingLeft: '24px',
+                        color: 'rgba(145, 158, 171, 1)',
+                    },
+                    '& .MuiAutocomplete-loading': {
+                        fontFamily: 'sans-serif',
+                        fontSize: '14px',
+                        paddingLeft: '24px',
+                        color: 'rgba(145, 158, 171, 1)',
+                    },
+                } }, children));
+        }, sx: {
+            '& button.MuiButtonBase-root': {
+                ...(!loadingOptions && value ? { visibility: 'visible' } : {}),
+            },
+            '.MuiAutocomplete-clearIndicator': {
+                ...(!value ? { display: 'none' } : undefined),
+            },
+        }, noOptionsText: 'No options available', renderOption: (props, option) => {
+            return (React.createElement("li", { ...props, key: option.id },
+                React.createElement(Typography, { sx: { marginLeft: '8px', fontSize: '14px' } },
+                    option.label,
+                    " ",
+                    '',
+                    users?.find((user) => option.value === user.id)?.status === 'Inactive' ? (React.createElement("span", null, "(Inactive)")) : (''))));
+        }, onOpen: () => {
+            setOpenOptions(true);
+        }, onClose: () => setOpenOptions(false), value: userValue ?? '', options: options, getOptionLabel: (option) => {
+            if (typeof option === 'string') {
+                return options.find((o) => o.value === option)?.label ?? '';
+            }
+            else {
+                {
+                    if (users?.find((user) => option.value === user.id)?.status === 'Inactive') {
+                        return option.label + ' (Inactive)';
+                    }
+                    else {
+                        return option.label ?? '';
+                    }
+                }
+            }
+        }, onKeyDownCapture: (e) => {
+            // prevents keyboard trap
+            if (e.key === 'Tab') {
+                return;
+            }
+            if (value) {
+                e.preventDefault();
+            }
+        }, loading: loadingOptions, isOptionEqualToValue: isOptionEqualToValue, onChange: (event, value) => {
+            handleChangeUserProperty(id, value);
+        }, renderInput: (params) => (React.createElement(TextField, { ...params, placeholder: !readOnly ? 'Select' : undefined, readOnly: !loadingOptions && !value && readOnly, inputProps: {
+                ...params.inputProps,
+                ...(hasDescription ? { 'aria-describedby': `${id}-description` } : undefined),
+            }, sx: {
+                ...(!loadingOptions && value
+                    ? {
+                        '.MuiOutlinedInput-root': {
+                            background: 'white',
+                            border: 'auto',
+                        },
+                        '& fieldset': { borderColor: 'auto' },
+                        '&:hover .MuiOutlinedInput-notchedOutline': {
+                            border: 'auto',
+                        },
+                        caretColor: 'white',
+                        '& svg': {
+                            display: readOnly ? 'none' : 'block',
+                        },
+                    }
+                    : {}),
+            } })), size: fieldHeight ?? 'medium', readOnly: readOnly, error: error })));
+};
+export default UserProperty;

package/dist/published/components/custom/FormV2/components/FormFieldTypes/relatedObjectFiles/InstanceLookup.d.ts

@@ -0,0 +1,15 @@
+import { Obj, ObjectInstance, TableViewLayout } from '@evoke-platform/context';
+import React from 'react';
+import { BaseProps } from '../../types';
+export type InstanceLookUpProps = BaseProps & {
+    object: Obj;
+    instanceId?: string;
+    setSelectedInstance: (selectedInstance: ObjectInstance) => void;
+    setRelationType: (relationType: 'new' | 'existing') => void;
+    mode: 'default' | 'existingOnly';
+    nestedFieldsView?: boolean;
+    filter?: Record<string, unknown>;
+    layout?: TableViewLayout;
+};
+declare const InstanceLookup: (props: InstanceLookUpProps) => React.JSX.Element;
+export default InstanceLookup;

package/dist/published/components/custom/FormV2/components/FormFieldTypes/relatedObjectFiles/InstanceLookup.js

@@ -0,0 +1,226 @@
+import { useApiServices } from '@evoke-platform/context';
+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 { Box, Grid } from '../../../../../layout';
+import BuilderGrid from '../../../../BuilderGrid';
+import { getPrefixedUrl } from '../../utils';
+const SearchField = (props) => {
+    const { searchableColumns, filter, setFilter, searchString, setSearchString } = props;
+    const clearSearch = () => {
+        setSearchString('');
+        setFilter(undefined);
+    };
+    const handleSearch = async (e) => {
+        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({
+                ...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' } }))),
+        } }));
+};
+const InstanceLookup = (props) => {
+    const { object, setSelectedInstance, setRelationType, filter: criteriaFilter, mode, nestedFieldsView, layout, } = props;
+    const [rows, setRows] = useState([]);
+    const [loading, setLoading] = useState(false);
+    const [filter, setFilter] = useState();
+    const [searchString, setSearchString] = useState('');
+    const [searchableColumns] = useState(object.properties?.filter((property) => property.searchable) ?? []);
+    const apiServices = useApiServices();
+    const retrieveColumns = (tableViewLayout) => {
+        let columns = [];
+        if (tableViewLayout?.properties) {
+            for (const prop of tableViewLayout.properties) {
+                const propertyId = prop.id.split('.')[0];
+                const property = object.properties?.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) => {
+                                return get(params.row, prop.id) ?? '';
+                            },
+                        });
+                    }
+                    else if (property.type === 'object' || property.type === 'user') {
+                        columns.push({
+                            field: prop.id,
+                            headerName: property.name,
+                            type: 'string',
+                            flex: 1,
+                            valueGetter: (params) => {
+                                return (get(params.row, !prop.id.includes('.') ? `${prop.id}.name` : prop.id) ?? '');
+                            },
+                        });
+                    }
+                    else if (property.type === 'document') {
+                        columns.push({
+                            field: prop.id,
+                            headerName: property.name,
+                            type: 'string',
+                            flex: 1,
+                            valueGetter: (params) => {
+                                const row = params.row;
+                                return (row[prop.id]?.map((v) => v.name).join(', ') ??
+                                    '');
+                            },
+                        });
+                    }
+                    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 = object.properties?.find((property) => property.id == 'name');
+            columns = [{ field: 'name', headerName: name?.name ?? 'Name', type: 'string', flex: 1 }];
+        }
+        return columns;
+    };
+    function fetchObjectInstance() {
+        setLoading(true);
+        const combinedFilter = {
+            ...criteriaFilter,
+            ...filter,
+            where: criteriaFilter?.where
+                ? {
+                    and: [criteriaFilter.where, filter?.where],
+                }
+                : filter?.where,
+        };
+        apiServices.get(getPrefixedUrl(`/objects/${object.id}/instances`), { params: { filter: JSON.stringify(combinedFilter) } }, (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(layout), onRowClick: (params) => setSelectedInstance(params.row), initialSort: {
+                field: object.viewLayout?.table?.sort?.colId ?? 'name',
+                sort: object.viewLayout?.table?.sort?.sort ?? '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"))) })));
+};
+export default InstanceLookup;

package/dist/published/components/custom/FormV2/components/FormFieldTypes/relatedObjectFiles/ObjectPropertyInput.d.ts

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