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

package/dist/published/components/custom/Form/FormComponents/UserComponent/UserProperty.js

@@ -0,0 +1,115 @@
+import { ExpandMore } from '@mui/icons-material';
+import React, { useEffect, useState } from 'react';
+import { Autocomplete, Paper, TextField, Typography } from '../../../../core';
+import { getPrefixedUrl } from '../../utils';
+export const UserProperty = (props) => {
+    const { id, property, apiServices, handleChangeUserProperty, error, filter, value, user, fieldHeight } = props;
+    const [loadingOptions, setLoadingOptions] = useState(false);
+    const [options, setOptions] = useState([]);
+    const [openOptions, setOpenOptions] = useState(false);
+    const [users, setUsers] = useState();
+    const [userValue, setUserValue] = useState();
+    useEffect(() => {
+        if (value === '$_CURRENT' && (user === null || user === void 0 ? void 0 : user.id)) {
+            const loggedInUser = users === null || users === void 0 ? void 0 : users.find((u) => u.id === user.id);
+            if (loggedInUser) {
+                setUserValue({ label: loggedInUser.name, value: loggedInUser.id });
+                handleChangeUserProperty({ label: loggedInUser.name, value: loggedInUser.id });
+            }
+        }
+        else {
+            if (value && typeof value == 'object' && 'name' in value && 'id' in value) {
+                setUserValue({ label: value.name, value: value.id });
+            }
+            else {
+                setUserValue(undefined);
+            }
+        }
+    }, [users, value]);
+    useEffect(() => {
+        if (property.type === 'user') {
+            setLoadingOptions(true);
+            apiServices.get(getPrefixedUrl(`/users`), (error, userList) => {
+                setUsers(userList);
+                setOptions((userList !== null && userList !== void 0 ? userList : []).map((user) => ({ label: user.name, value: user.id })));
+                setLoadingOptions(false);
+            });
+        }
+    }, [property, filter]);
+    return (options && (React.createElement(React.Fragment, null,
+        React.createElement(Autocomplete, { id: id, fullWidth: true, open: openOptions, popupIcon: userValue ? '' : 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': Object.assign({}, (!loadingOptions && value
+                    ? {
+                        visibility: 'visible',
+                    }
+                    : {})),
+            }, noOptionsText: 'No options available', renderOption: (props, option) => {
+                var _a;
+                return (React.createElement("li", Object.assign({}, props, { key: option.id }),
+                    React.createElement(Typography, { sx: { marginLeft: '8px', fontSize: '14px' } },
+                        option.label,
+                        " ",
+                        '',
+                        ((_a = users === null || users === void 0 ? void 0 : users.find((user) => option.value === user.id)) === null || _a === void 0 ? void 0 : _a.status) === 'Inactive' ? (React.createElement("span", null, "(Inactive)")) : (''))));
+            }, onOpen: () => {
+                setOpenOptions(true);
+            }, onClose: () => setOpenOptions(false), value: userValue !== null && userValue !== void 0 ? userValue : '', options: options, getOptionLabel: (option) => {
+                var _a, _b, _c, _d;
+                if (typeof option === 'string') {
+                    return (_b = (_a = options.find((o) => o.value === option)) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : '';
+                }
+                else {
+                    {
+                        if (((_c = users === null || users === void 0 ? void 0 : users.find((user) => option.value === user.id)) === null || _c === void 0 ? void 0 : _c.status) === 'Inactive') {
+                            return option.label + ' (Inactive)';
+                        }
+                        else {
+                            return (_d = option.label) !== null && _d !== void 0 ? _d : '';
+                        }
+                    }
+                }
+            }, onKeyDownCapture: (e) => {
+                if (value) {
+                    e.preventDefault();
+                }
+            }, loading: loadingOptions, isOptionEqualToValue: (option, value) => {
+                if (typeof value === 'string') {
+                    return option.value === value;
+                }
+                return option.value === (value === null || value === void 0 ? void 0 : value.value);
+            }, onChange: (event, value) => {
+                handleChangeUserProperty(value);
+            }, selectOnFocus: false, renderInput: (params) => (React.createElement(TextField, Object.assign({}, params, { placeholder: 'Select', sx: Object.assign({}, (!loadingOptions && value
+                    ? {
+                        '.MuiOutlinedInput-root': {
+                            background: 'white',
+                            border: 'auto',
+                        },
+                        '& fieldset': { borderColor: 'auto' },
+                        '&:hover .MuiOutlinedInput-notchedOutline': {
+                            border: 'auto',
+                        },
+                        caretColor: 'white',
+                    }
+                    : {})), size: fieldHeight !== null && fieldHeight !== void 0 ? fieldHeight : 'medium' }))), error: error }))));
+};

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

@@ -0,0 +1,20 @@
+import { ReactComponent } from '@formio/react';
+import { Root } from 'react-dom/client';
+import { BaseFormComponentProps } from '../types';
+export declare class ViewOnlyComponent extends ReactComponent {
+    [x: string]: any;
+    static schema: any;
+    componentRoot?: Root;
+    component: BaseFormComponentProps;
+    /**
+     * Called when the component has been instantiated. This is useful to define
+     * default instance variable values.
+     *
+     * @param component - The JSON representation of the component created.
+     * @param options - The global options for the renderer
+     * @param data - The contextual data object (model) used for this component.
+     */
+    constructor(component: BaseFormComponentProps, options: any, data: any);
+    showValue(value: unknown): {} | undefined;
+    attachReact(element: Element): void;
+}

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

@@ -0,0 +1,83 @@
+import { ReactComponent } from '@formio/react';
+import { get, isEmpty } from 'lodash';
+import { DateTime } from 'luxon';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
+import { Link, Typography } from '../../../core';
+import { FormComponentWrapper } from '../Common/FormComponentWrapper';
+export class ViewOnlyComponent extends ReactComponent {
+    /**
+     * Called when the component has been instantiated. This is useful to define
+     * default instance variable values.
+     *
+     * @param component - The JSON representation of the component created.
+     * @param options - The global options for the renderer
+     * @param data - The contextual data object (model) used for this component.
+     */
+    constructor(component, options, data) {
+        component.property = Object.assign({}, component.property);
+        super(Object.assign(Object.assign({}, component), { hideLabel: true }), options, data);
+        this.showValue = this.showValue.bind(this);
+    }
+    showValue(value) {
+        var _a, _b;
+        if (value == null || value == undefined)
+            return React.createElement("span", null, "\u00A0");
+        switch (this.component.type) {
+            case 'ViewOnlyObject':
+                if (this.component.defaultPages && this.component.property.objectId) {
+                    const defaultPagePath = this.component.defaultPages[this.component.property.objectId];
+                    return (React.createElement(Link, { sx: { cursor: 'pointer' }, href: defaultPagePath
+                            ? `${process.env.REACT_APP_API_ROOT ? '' : '/app'}${defaultPagePath.replace(':instanceId', value.id)}`
+                            : undefined }, value.name));
+                }
+                return value.name;
+            case 'ViewOnlyMultiSelect':
+                if (isEmpty(this.component.data)) {
+                    return value.join(', ');
+                }
+                else {
+                    return value
+                        .map((v) => {
+                        var _a, _b, _c;
+                        return (_c = (_b = (_a = this.component.data) === null || _a === void 0 ? void 0 : _a.values.find((val) => val.value === v)) === null || _b === void 0 ? void 0 : _b.label) !== null && _c !== void 0 ? _c : v;
+                    })
+                        .join(', ');
+                }
+            case 'ViewOnlySelect':
+                if (isEmpty(this.component.data)) {
+                    return this.component.property.type === 'array' ? value.join(', ') : value;
+                }
+                else {
+                    return ((_b = (_a = this.component.data.values.find((val) => val.value === value)) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : value);
+                }
+            case 'ViewOnlyUser':
+                return value.name;
+            case 'ViewOnlyDate':
+                return DateTime.fromISO(value).toFormat('MM/dd/yyyy');
+            case 'ViewOnlyDateTime':
+                return DateTime.fromISO(value).toFormat('MM/dd/yyyy hh:mm a');
+            case 'ViewOnlyTime':
+                return DateTime.fromISO(DateTime.now().toISODate() + 'T' + value).toFormat('hh:mm a');
+            case 'ViewOnlyBoolean':
+                return value ? 'Yes' : 'No';
+            default:
+                return value;
+        }
+    }
+    attachReact(element) {
+        let root = ReactDOM.findDOMNode(element);
+        if (!root) {
+            root = element;
+        }
+        if (!this.componentRoot) {
+            this.componentRoot = createRoot(root);
+        }
+        return this.componentRoot.render(React.createElement("div", null,
+            React.createElement(FormComponentWrapper, Object.assign({}, this.component, { viewOnly: true }),
+                React.createElement(Typography, { variant: "body1", key: this.component.key }, this.showValue(this.component.instance
+                    ? get(this.component.instance, this.component.key)
+                    : this.component.defaultValue)))));
+    }
+}

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

@@ -0,0 +1,8 @@
+export * from './ButtonComponent';
+export * from './DocumentComponent/DocumentComponent';
+export * from './FormFieldComponent';
+export * from './ImageComponent/ImageComponent';
+export * from './ObjectComponent/ObjectComponent';
+export * from './RepeatableFieldComponent/RepeatableFieldComponent';
+export * from './UserComponent/UserComponent';
+export * from './ViewOnlyComponent';

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

@@ -0,0 +1,8 @@
+export * from './ButtonComponent';
+export * from './DocumentComponent/DocumentComponent';
+export * from './FormFieldComponent';
+export * from './ImageComponent/ImageComponent';
+export * from './ObjectComponent/ObjectComponent';
+export * from './RepeatableFieldComponent/RepeatableFieldComponent';
+export * from './UserComponent/UserComponent';
+export * from './ViewOnlyComponent';

package/dist/published/components/custom/Form/index.d.ts

@@ -0,0 +1,3 @@
+import { Form } from './Common';
+export { Form };
+export default Form;

package/dist/published/components/custom/Form/index.js

@@ -0,0 +1,3 @@
+import { Form } from './Common';
+export { Form };
+export default Form;

package/dist/published/components/custom/Form/types.d.ts

@@ -0,0 +1,109 @@
+import { ApiServices, ObjectInstance, Property, Reference, UserAccount } from '@evoke-platform/context';
+import { AutocompleteOption } from '../../core';
+export declare type BaseFormComponentProps = {
+    key: string;
+    id: string;
+    type: string;
+    label: string;
+    inputId: string;
+    readOnly?: boolean;
+    instance: ObjectInstance;
+    property: Property;
+    viewOnly: boolean;
+    canUpdateProperty: boolean;
+    hidden?: boolean;
+    defaultPages?: Record<string, string>;
+    data?: {
+        values: AutocompleteOption[];
+    };
+    defaultValue?: unknown;
+    hideLabel?: boolean;
+    objectId?: string;
+    validate: {
+        required?: boolean;
+        criteria?: Record<string, unknown>;
+        minDate?: string;
+        maxDate?: string;
+        minTime?: string;
+        maxTime?: string;
+        min?: string;
+        max?: string;
+        minDocuments?: number;
+        maxDocuments?: number;
+        operator?: 'all' | 'any';
+        regexes?: {
+            regex: string;
+            errorMessage: string;
+        }[];
+        customMessage?: string;
+    };
+    conditional: {
+        when: string;
+        show: boolean;
+        eq: string;
+    };
+    user?: UserAccount;
+    errorMessage?: string;
+    fieldHeight?: 'small' | 'medium';
+    navigateTo: (path?: string) => void;
+    autoSave?: (update: Record<string, unknown>) => void;
+    baseUrl: string;
+    apiServices: ApiServices;
+};
+export declare type ObjectPropertyInputProps = {
+    id: string;
+    instance: ObjectInstance;
+    property: Property;
+    user?: UserAccount;
+    apiServices: ApiServices;
+    handleChangeObjectProperty: (propertyId: string, instance?: Reference | null) => void;
+    mode: 'default' | 'existingOnly';
+    displayOption?: 'dropdown' | 'dialogBox';
+    nestedFieldsView?: boolean;
+    canUpdateProperty?: boolean;
+    error?: boolean;
+    defaultPages?: Record<string, string>;
+    navigateTo?: (path: string) => void;
+    setSnackbarError?: (snackbarError: {
+        showAlert: boolean;
+        message?: string;
+        isError?: boolean;
+    }) => void;
+    filter?: Record<string, unknown>;
+    defaultValueCriteria?: Record<string, unknown>;
+    sortBy?: string;
+    orderBy?: string;
+    isModal?: boolean;
+    label?: string;
+};
+export declare type Address = {
+    line1?: string;
+    line2?: string;
+    city?: string;
+    county?: string;
+    state?: string;
+    zipCode?: string;
+};
+export declare type User = {
+    id: string;
+    name: string;
+    status: string;
+};
+export declare type AccessCheck = {
+    result: boolean;
+};
+export declare type Document = {
+    id: string;
+    name: string;
+    contentType: string;
+    size: number;
+    uploadedDate: string;
+    metadata: {
+        [field: string]: unknown;
+    };
+    versionId?: string;
+};
+export declare type SavedDocumentReference = {
+    id: string;
+    name: string;
+};

package/dist/published/components/custom/Form/types.js

@@ -0,0 +1 @@
+export {};

package/dist/published/components/custom/Form/utils.d.ts

@@ -0,0 +1,45 @@
+import { ActionInput, ActionInputType, ApiServices, FormEntry, InputParameter, InputParameterReference, Obj, ObjectInstance, Property, PropertyType } from '@evoke-platform/context';
+import { LocalDateTime } from '@js-joda/core';
+import { AutocompleteOption } from '../../core';
+import { ObjectPropertyInputProps } from './types';
+export declare function determineComponentType(properties: Property[], parameter?: InputParameter): ActionInputType | undefined;
+export declare function determineParameterType(componentType: string): PropertyType;
+export declare function getFlattenEntries(entries: FormEntry[]): InputParameterReference[];
+export declare function convertFormToComponents(entries: FormEntry[], parameters: InputParameter[], object: Obj): ActionInput[];
+export declare function convertComponentsToForm(components: ActionInput[]): FormEntry[];
+export declare function getMiddleObjectFilter(property: Property, instance: ObjectInstance): {
+    where: {
+        [x: string]: string;
+    };
+};
+export declare function getMiddleObject(instance: ObjectInstance, property: Property, endObjectId: string, endObjectName: string): {
+    [x: string]: {
+        id: string;
+        name: string;
+    };
+} | undefined;
+export declare function getMiddleInstance(instanceId: string, property: Property, middleObjectInstances: ObjectInstance[]): ObjectInstance | undefined;
+export declare function getPrefixedUrl(url: string): string;
+export declare function addObjectPropertiesToComponentProps(properties: Property[], formComponents: any[], instance?: ObjectInstance, objectPropertyInputProps?: ObjectPropertyInputProps, autoSave?: (data: Record<string, unknown>) => void, readOnly?: boolean, defaultPages?: Record<string, string>, navigateTo?: (path: string) => void, queryAddresses?: unknown, apiServices?: ApiServices, isModal?: boolean, fieldHeight?: 'small' | 'medium'): Promise<ActionInput[]>;
+export declare function getDefaultValue(initialValue: unknown, selectOptions?: AutocompleteOption[]): unknown;
+export declare const buildComponentPropsFromObjectProperties: (properties: Property[], objectId: string, instance?: ObjectInstance, objectPropertyInputProps?: ObjectPropertyInputProps, hasActionPermissions?: boolean, autoSave?: ((data: Record<string, unknown>) => void) | undefined, readOnly?: boolean, queryAddresses?: unknown, isModal?: boolean, fieldHeight?: 'small' | 'medium') => unknown[];
+export declare const buildComponentPropsFromDocumentProperties: (documentProperties: [string, unknown][], readOnly?: boolean, autoSave?: ((data: Record<string, unknown>) => void) | undefined, fieldHeight?: 'small' | 'medium') => {
+    type: string;
+    key: string;
+    label: string;
+    readOnly: boolean | undefined;
+    defaultValue: unknown;
+    autoSave: ((data: Record<string, unknown>) => void) | undefined;
+    fieldHeight: "medium" | "small" | undefined;
+}[];
+export declare const OPERATOR_MAP: Record<string, string>;
+export declare function transformToWhere(mongoQuery: object): Record<string, unknown>;
+export declare function updateCriteriaInputs(criteria: Record<string, unknown>, field: string, fieldValue: string, isInputField?: boolean): void;
+export declare function getAllCriteriaInputs(criteria: Record<string, unknown>): string[];
+export declare function isPropertyVisible(conditional: {
+    when: string;
+    show: boolean;
+    eq: string;
+}, formData: Record<string, unknown>): boolean;
+export declare function normalizeDateTime(dateTime: LocalDateTime): string;
+export declare function normalizeDates(instances: ObjectInstance[], object?: Obj): void;