@evoke-platform/ui-components 1.6.0-dev.18 → 1.6.0-dev.19

package/dist/published/components/custom/FormV2/components/FormContext.d.ts

@@ -1,9 +1,9 @@
+/// <reference types="react" />
 import { Obj } from '@evoke-platform/context';
-import { Dispatch, SetStateAction } from 'react';
 import { FieldValues, UseFormGetValues } from 'react-hook-form';
 type FormContextType = {
     fetchedOptions: FieldValues;
-    setFetchedOptions: Dispatch<SetStateAction<FieldValues>>;
+    setFetchedOptions: (newData: FieldValues) => void;
     getValues: UseFormGetValues<FieldValues>;
     stickyFooter?: boolean;
     object?: Obj;

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

@@ -42,13 +42,12 @@ export default function Criteria(props) {
                         return prop;
                     });
                     setProperties(flattenProperties);
-                    setFetchedOptions((prev) => ({
-                        ...prev,
+                    setFetchedOptions({
                         [`${fieldDefinition.id}Options`]: flattenProperties.map((prop) => ({
                             id: prop.id,
                             name: prop.name,
                         })),
-                    }));
+                    });
                     setLoadingError(false);
                 }
                 setLoading(false);

package/dist/published/components/custom/FormV2/components/FormFieldTypes/DocumentFiles/Document.d.ts

@@ -0,0 +1,16 @@
+import { DocumentValidation } from '@evoke-platform/context';
+import React from 'react';
+import { FieldValues } from 'react-hook-form';
+import { SavedDocumentReference } from '../../types';
+type DocumentProps = {
+    id: string;
+    handleChange: (propertyId: string, value: (File | SavedDocumentReference)[] | undefined) => void;
+    instance?: FieldValues;
+    canUpdateProperty: boolean;
+    error: boolean;
+    validate?: DocumentValidation;
+    value: (File | SavedDocumentReference)[] | undefined;
+    hasDescription?: boolean;
+};
+export declare const Document: (props: DocumentProps) => React.JSX.Element;
+export {};

package/dist/published/components/custom/FormV2/components/FormFieldTypes/DocumentFiles/Document.js

@@ -0,0 +1,73 @@
+import { useApiServices } from '@evoke-platform/context';
+import { isNil } from 'lodash';
+import React, { useEffect, useState } from 'react';
+import { useDropzone } from 'react-dropzone';
+import { UploadCloud } from '../../../../../../icons';
+import { useFormContext } from '../../../../../../theme/hooks';
+import { Skeleton, Snackbar, Typography } from '../../../../../core';
+import { Box, Grid } from '../../../../../layout';
+import { getPrefixedUrl } from '../../utils';
+import { DocumentList } from './DocumentList';
+export const Document = (props) => {
+    const { id, handleChange, canUpdateProperty, error, instance, value, validate, hasDescription } = props;
+    const apiServices = useApiServices();
+    const { fetchedOptions, setFetchedOptions, object } = useFormContext();
+    const [snackbarError, setSnackbarError] = useState();
+    const [documents, setDocuments] = useState();
+    const [hasUpdatePermission, setHasUpdatePermission] = useState(fetchedOptions[`${id}UpdatePermission`]);
+    useEffect(() => {
+        setDocuments(value);
+    }, [value]);
+    useEffect(() => {
+        checkPermissions();
+    }, [object]);
+    const checkPermissions = () => {
+        if (canUpdateProperty && !fetchedOptions[`${id}UpdatePermission`]) {
+            apiServices
+                .get(getPrefixedUrl(`/objects/${object?.id}/instances/${instance?.id}/documents/checkAccess?action=update`))
+                .then((accessCheck) => {
+                setFetchedOptions({
+                    [`${id}UpdatePermission`]: accessCheck.result,
+                });
+                setHasUpdatePermission(accessCheck.result);
+            });
+        }
+    };
+    const handleUpload = async (files) => {
+        const newDocuments = [...(documents ?? []), ...(files ?? [])];
+        setDocuments(newDocuments);
+        handleChange(id, newDocuments);
+    };
+    const uploadDisabled = !!validate?.maxDocuments && (documents?.length ?? 0) >= validate.maxDocuments;
+    const { getRootProps, getInputProps, open } = useDropzone({
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        onDrop: (files) => handleUpload(files),
+        disabled: uploadDisabled,
+    });
+    return (React.createElement(React.Fragment, null,
+        canUpdateProperty && hasUpdatePermission && (React.createElement(Box, { sx: {
+                margin: '5px 0',
+                height: '115px',
+                borderRadius: '8px',
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+                border: `1px dashed ${error ? 'red' : uploadDisabled ? '#DFE3E8' : '#858585'}`,
+                position: 'relative',
+                cursor: uploadDisabled ? 'cursor' : 'pointer',
+            }, ...getRootProps(), onClick: open },
+            React.createElement("input", { ...getInputProps({ id }), disabled: uploadDisabled, ...(hasDescription ? { 'aria-describedby': `${id}-description` } : undefined) }),
+            React.createElement(Grid, { container: true, sx: { width: '100%' } },
+                React.createElement(Grid, { item: true, xs: 12, sx: { display: 'flex', justifyContent: 'center', paddingBottom: '7px' } },
+                    React.createElement(UploadCloud, { sx: { color: '#919EAB', width: '50px', height: '30px' } })),
+                React.createElement(Grid, { item: true, xs: 12 },
+                    React.createElement(Typography, { variant: "body2", sx: { color: uploadDisabled ? '#919EAB' : '#212B36', textAlign: 'center' } },
+                        "Drag and drop or",
+                        ' ',
+                        React.createElement(Typography, { component: 'span', color: uploadDisabled ? '#919EAB' : 'primary', sx: { fontSize: '14px' } }, "select file"),
+                        ' ',
+                        "to upload"))))),
+        canUpdateProperty && isNil(hasUpdatePermission) && (React.createElement(Skeleton, { variant: "rectangular", height: "115px", sx: { margin: '5px 0', borderRadius: '8px' } })),
+        React.createElement(DocumentList, { id: id, instance: instance, handleChange: handleChange, value: value, setSnackbarError: (type, message) => setSnackbarError({ message, type }), canUpdateProperty: canUpdateProperty && !!hasUpdatePermission }),
+        React.createElement(Snackbar, { open: !!snackbarError?.message, handleClose: () => setSnackbarError(null), message: snackbarError?.message, error: snackbarError?.type === 'error' })));
+};

package/dist/published/components/custom/FormV2/components/FormFieldTypes/DocumentFiles/DocumentList.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { FieldValues } from 'react-hook-form';
+import { SavedDocumentReference } from '../../types';
+type DocumentListProps = {
+    handleChange: (propertyId: string, value: (File | SavedDocumentReference)[] | undefined) => void;
+    id: string;
+    instance?: FieldValues;
+    canUpdateProperty: boolean;
+    value: (File | SavedDocumentReference)[] | undefined;
+    setSnackbarError: (type: 'error' | 'success', message: string) => void;
+};
+export declare const DocumentList: (props: DocumentListProps) => React.JSX.Element;
+export {};

package/dist/published/components/custom/FormV2/components/FormFieldTypes/DocumentFiles/DocumentList.js

@@ -0,0 +1,179 @@
+import { useApiServices } from '@evoke-platform/context';
+import { isEqual } from 'lodash';
+import prettyBytes from 'pretty-bytes';
+import React, { useEffect, useState } from 'react';
+import { FileWithExtension, LaunchRounded, TrashCan, WarningRounded } from '../../../../../../icons';
+import { useFormContext } from '../../../../../../theme/hooks';
+import { Chip, IconButton, Typography } from '../../../../../core';
+import { Box, Grid } from '../../../../../layout';
+import { getPrefixedUrl } from '../../utils';
+const styles = {
+    icon: {
+        padding: '3px',
+        color: '#637381',
+    },
+};
+const viewableFileTypes = [
+    'application/pdf',
+    'image/jpeg',
+    'image/jpg',
+    'image/png',
+    'image/gif',
+    'image/bmp',
+    'image/webp',
+    'text/plain',
+];
+export const DocumentList = (props) => {
+    const { handleChange, id, canUpdateProperty, instance, value: documents, setSnackbarError } = props;
+    const apiServices = useApiServices();
+    const { fetchedOptions, setFetchedOptions, object } = useFormContext();
+    const [hasViewPermission, setHasViewPermission] = useState(fetchedOptions[`${id}ViewPermission`] ?? true);
+    const [savedDocuments, setSavedDocuments] = useState(fetchedOptions[`${id}SavedDocuments`]);
+    useEffect(() => {
+        const currentValue = instance?.[id];
+        if (currentValue?.length) {
+            const currentDocumentIds = currentValue.map((doc) => doc.id);
+            if (currentDocumentIds.length &&
+                // these need to be sorted otherwise it will evaluate as not equal if the ids are in different orders causing unnecessary fetches
+                !isEqual(currentDocumentIds.slice().sort(), savedDocuments
+                    ?.map((doc) => doc.id)
+                    .slice()
+                    .sort())) {
+                getDocuments(currentDocumentIds);
+            }
+        }
+    }, [id, documents, object]);
+    useEffect(() => {
+        if (fetchedOptions[`${id}SavedDocuments`]) {
+            setSavedDocuments(fetchedOptions[`${id}SavedDocuments`]);
+        }
+    }, [fetchedOptions]);
+    const getDocuments = (currentDocumentIds, shouldRetry = true) => {
+        apiServices.get(getPrefixedUrl(`/objects/${object?.id}/instances/${instance?.id}/documents`), {
+            params: { filter: { where: { id: { inq: currentDocumentIds } } } },
+        }, (error, docs) => {
+            // There is a short delay between when a document is uploaded and when
+            // it is indexed. Therefore, try again if documents are not found.
+            if (shouldRetry &&
+                (!docs || currentDocumentIds.some((docId) => !docs.find((doc) => docId === doc.id)))) {
+                setTimeout(() => getDocuments(currentDocumentIds, false), 2000);
+            }
+            else if (error) {
+                setSnackbarError('error', 'Error occurred while retrieving saved documents');
+            }
+            else {
+                setSavedDocuments(docs);
+                setFetchedOptions({
+                    [`${id}SavedDocuments`]: docs,
+                });
+            }
+        });
+    };
+    useEffect(() => {
+        if (!fetchedOptions[`${id}ViewPermission`]) {
+            checkPermissions();
+        }
+    }, [object]);
+    const checkPermissions = () => {
+        if (instance?.[id]?.length) {
+            apiServices
+                .get(getPrefixedUrl(`/objects/${object?.id}/instances/${instance?.id}/documents/checkAccess?action=view`))
+                .then((viewPermissionCheck) => {
+                setFetchedOptions({
+                    [`${id}ViewPermission`]: viewPermissionCheck.result,
+                });
+                setHasViewPermission(viewPermissionCheck.result);
+            });
+        }
+    };
+    const isFile = (doc) => doc instanceof File;
+    const fileExists = (doc) => savedDocuments?.find((d) => d.id === doc.id);
+    const handleRemove = (index) => {
+        const updatedDocuments = documents?.filter((_, i) => i !== index) ?? [];
+        handleChange(id, updatedDocuments.length === 0 ? undefined : updatedDocuments);
+    };
+    const openDocument = async (index) => {
+        const doc = documents?.[index];
+        if (doc) {
+            let url;
+            const contentType = doc instanceof File
+                ? doc.type
+                : savedDocuments?.find((savedDocument) => savedDocument.id === doc.id)?.contentType;
+            if (!isFile(doc)) {
+                try {
+                    const documentResponse = await apiServices.get(getPrefixedUrl(`/objects/${object?.id}/instances/${instance?.id}/documents/${doc.id}/content`), { responseType: 'blob' });
+                    const blob = new Blob([documentResponse], { type: contentType });
+                    url = window.URL.createObjectURL(blob);
+                }
+                catch (error) {
+                    setSnackbarError('error', `Could not open ${doc.name}`);
+                    return;
+                }
+            }
+            else {
+                url = URL.createObjectURL(doc);
+            }
+            if (contentType && viewableFileTypes.includes(contentType)) {
+                window.open(url, '_blank');
+            }
+            else {
+                const link = document.createElement('a');
+                link.href = url;
+                link.setAttribute('download', doc.name);
+                document.body.appendChild(link);
+                link.click();
+                // Clean up and remove the link
+                link.parentNode?.removeChild(link);
+            }
+        }
+    };
+    const getDocumentSize = (doc) => {
+        let size;
+        if (isFile(doc)) {
+            size = prettyBytes(doc.size);
+        }
+        else {
+            const savedDoc = savedDocuments?.find((savedDocument) => savedDocument.id === doc.id);
+            size = savedDoc ? prettyBytes(savedDoc.size) : '';
+        }
+        return size;
+    };
+    return (React.createElement(React.Fragment, null,
+        !documents && !canUpdateProperty && (React.createElement(Typography, { variant: "body2", sx: { color: '#637381' } }, "No documents")),
+        !!documents?.length && (React.createElement(Box, null, documents.map((doc, index) => (React.createElement(Grid, { container: true, sx: {
+                width: '100%',
+                border: '1px solid #C4CDD5',
+                borderRadius: '6px',
+                margin: '5px 2px',
+                padding: ' 8px',
+                display: 'flex',
+                alignItems: 'center',
+            } },
+            React.createElement(Grid, { item: true, sx: { display: 'flex', justifyContent: 'center', padding: '7px', marginLeft: '4px' } },
+                React.createElement(FileWithExtension, { fontFamily: "Arial", fileExtension: doc.name?.split('.')?.pop() ?? '', sx: { height: '1.5em', width: '1.5em' } })),
+            React.createElement(Grid, { item: true, sx: { flex: 1, justifyContent: 'center', paddingBottom: '5px' } },
+                React.createElement(Grid, { item: true, xs: 12 },
+                    React.createElement(Typography, { sx: {
+                            fontSize: '14px',
+                            fontWeight: 700,
+                            lineHeight: '15px',
+                            paddingTop: '8px',
+                        } }, doc.name)),
+                React.createElement(Grid, { item: true, xs: 12 },
+                    React.createElement(Typography, { sx: { fontSize: '12px', color: '#637381' } }, getDocumentSize(doc)))),
+            (isFile(doc) || (hasViewPermission && !isFile(doc) && fileExists(doc))) && (React.createElement(Grid, { item: true },
+                React.createElement(IconButton, { "aria-label": "open document", sx: { ...styles.icon, marginRight: '16px' }, onClick: () => openDocument(index) },
+                    React.createElement(LaunchRounded, { sx: { color: '#637381', fontSize: '22px' } })))),
+            !isFile(doc) && savedDocuments && !fileExists(doc) && (React.createElement(Chip, { label: "Deleted", sx: {
+                    marginRight: '16px',
+                    backgroundColor: 'rgba(222, 48, 36, 0.16)',
+                    color: '#A91813',
+                    borderRadius: '6px',
+                    height: '25px',
+                    fontWeight: 700,
+                    '& .MuiChip-icon': { color: '#A91813', width: '.8em', marginBottom: '2px' },
+                }, icon: React.createElement(WarningRounded, null) })),
+            canUpdateProperty && (React.createElement(Grid, { item: true },
+                React.createElement(IconButton, { "aria-label": "delete document", sx: styles.icon, onClick: () => handleRemove(index) },
+                    React.createElement(TrashCan, { sx: { ':hover': { color: '#A12723' } } })))))))))));
+};

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

@@ -30,13 +30,12 @@ const UserProperty = (props) => {
                     label: user.name,
                     value: user.id,
                 })));
-                setFetchedOptions((prev) => ({
-                    ...prev,
+                setFetchedOptions({
                     [`${id}Options`]: (userList ?? []).map((user) => ({
                         label: user.name,
                         value: user.id,
                     })),
-                }));
+                });
                 setLoadingOptions(false);
             });
         }

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

@@ -6,3 +6,21 @@ export type FieldAddress = {
     state?: string;
     zipCode?: string;
 };
+export type AccessCheck = {
+    result: boolean;
+};
+export type SavedDocumentReference = {
+    id: string;
+    name: string;
+};
+export type Document = {
+    id: string;
+    name: string;
+    contentType: string;
+    size: number;
+    uploadedDate: string;
+    metadata: {
+        [field: string]: unknown;
+    };
+    versionId?: string;
+};

package/dist/published/theme/hooks.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Breakpoint } from '@mui/material/styles';
 /**
  * Custom hook for responsive design breakpoints using size terminology.
@@ -110,7 +109,7 @@ export declare const useWidgetSize: (options?: {
 export default useWidgetSize;
 export declare function useFormContext(): {
     fetchedOptions: import("react-hook-form").FieldValues;
-    setFetchedOptions: import("react").Dispatch<import("react").SetStateAction<import("react-hook-form").FieldValues>>;
+    setFetchedOptions: (newData: import("react-hook-form").FieldValues) => void;
     getValues: import("react-hook-form").UseFormGetValues<import("react-hook-form").FieldValues>;
     stickyFooter?: boolean | undefined;
     object?: import("@evoke-platform/context").Obj | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@evoke-platform/ui-components",
-    "version": "1.6.0-dev.18",
+    "version": "1.6.0-dev.19",
     "description": "",
     "main": "dist/published/index.js",
     "module": "dist/published/index.js",