@evoke-platform/ui-components 1.13.0-dev.7 → 1.14.0

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

@@ -1,20 +1,21 @@
-import { useApiServices, } from '@evoke-platform/context';
-import { useQuery } from '@tanstack/react-query';
+import { useApiServices } from '@evoke-platform/context';
+import { isNil } from 'lodash';
 import prettyBytes from 'pretty-bytes';
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { useDropzone } from 'react-dropzone';
 import { InfoRounded, UploadCloud } from '../../../../../../icons';
 import { useFormContext } from '../../../../../../theme/hooks';
 import { Skeleton, Snackbar, Typography } from '../../../../../core';
 import { Box, Grid } from '../../../../../layout';
-import { getEntryId, getPrefixedUrl, getUnnestedEntries, uploadFiles } from '../../utils';
+import { getPrefixedUrl } from '../../utils';
 import { DocumentList } from './DocumentList';
 export const Document = (props) => {
-    const { id, fieldType = 'document', canUpdateProperty, error, value, validate, hasDescription } = props;
+    const { id, canUpdateProperty, error, value, validate, hasDescription } = props;
     const apiServices = useApiServices();
-    const { object, handleChange, onAutosave: onAutosave, instance, form } = useFormContext();
+    const { fetchedOptions, setFetchedOptions, object, handleChange, onAutosave: onAutosave, instance, } = useFormContext();
     const [snackbarError, setSnackbarError] = useState();
     const [documents, setDocuments] = useState();
+    const [hasUpdatePermission, setHasUpdatePermission] = useState(fetchedOptions[`${id}UpdatePermission`]);
     let allowedTypesMessage = '';
     if (validate?.allowedFileExtensions?.length) {
         if (validate.allowedFileExtensions.length === 1) {
@@ -32,53 +33,33 @@ export const Document = (props) => {
     useEffect(() => {
         setDocuments(value);
     }, [value]);
-    const { data: hasUpdatePermission = false, isLoading } = useQuery({
-        queryKey: ['hasDocUpdatePermission', object?.id, instance?.id],
-        queryFn: async () => {
-            // Find the entry to get the configured createActionId
-            const allEntries = getUnnestedEntries(form?.entries ?? []) ?? [];
-            const entry = allEntries?.find((entry) => getEntryId(entry) === id);
-            const createActionId = entry?.display?.createActionId ?? '_create';
-            // For 'file' type properties, check regular object instance permissions
-            // For 'document' type properties, check document attachment permissions
-            const endpoint = fieldType === 'file'
-                ? getPrefixedUrl(`/objects/sys__file/instances/checkAccess?action=execute&field=${createActionId}`)
-                : getPrefixedUrl(`/objects/${object.id}/instances/${instance.id}/documents/checkAccess?action=update`);
-            try {
-                const accessCheck = await apiServices.get(endpoint);
-                return accessCheck.result;
-            }
-            catch {
-                return false;
-            }
-        },
-        staleTime: Infinity,
-        enabled: canUpdateProperty && !!instance?.id && !!object?.id,
-    });
-    const handleUpload = async (files) => {
-        if (!files?.length) {
-            return;
+    const checkPermissions = useCallback(() => {
+        if (canUpdateProperty && !fetchedOptions[`${id}UpdatePermission`] && instance?.id) {
+            apiServices
+                .get(getPrefixedUrl(`/objects/${object?.id}/instances/${instance?.id}/documents/checkAccess?action=update`))
+                .then((accessCheck) => {
+                setFetchedOptions({
+                    [`${id}UpdatePermission`]: accessCheck.result,
+                });
+                setHasUpdatePermission(accessCheck.result);
+            })
+                .catch(() => {
+                setFetchedOptions({
+                    [`${id}UpdatePermission`]: false,
+                });
+                setHasUpdatePermission(false);
+            });
         }
-        let uploadedFiles = files;
-        // Get the createActionId from display options, default to '_create'
-        const allEntries = getUnnestedEntries(form?.entries ?? []);
-        const entry = allEntries?.find((entry) => getEntryId(entry) === id);
-        const createActionId = entry?.display?.createActionId ?? '_create';
-        // Immediately upload files for 'file' type properties when autosave is not enabled.
-        // Linking will happen upon final submission.
-        // If autosave is enabled, upload and linking will happen in the autosave handler.
-        if (fieldType === 'file' && !onAutosave) {
-            const { successfulUploads, errorMessage } = await uploadFiles(files, apiServices, createActionId, undefined, false);
-            uploadedFiles = successfulUploads;
-            if (errorMessage) {
-                setSnackbarError({ message: errorMessage, type: 'error' });
-            }
-        }
-        // Store uploaded file references (or File objects) in form state
-        const newDocuments = [...(documents ?? []), ...uploadedFiles];
+    }, [canUpdateProperty, fetchedOptions, instance, object]);
+    useEffect(() => {
+        checkPermissions();
+    }, [checkPermissions]);
+    const handleUpload = async (files) => {
+        // Store File objects in form state - they will be uploaded during autosave via formatSubmission()
+        const newDocuments = [...(documents ?? []), ...(files ?? [])];
         setDocuments(newDocuments);
         try {
-            await handleChange?.(id, newDocuments);
+            handleChange && (await handleChange(id, newDocuments));
         }
         catch (error) {
             console.error('Failed to update field:', error);
@@ -146,7 +127,7 @@ export const Document = (props) => {
                         } }, validate?.maxDocuments === 1
                         ? `Maximum size is ${formattedMaxSize}.`
                         : `The maximum size of each document is ${formattedMaxSize}.`)))))),
-        canUpdateProperty && isLoading ? (React.createElement(Skeleton, { variant: "rectangular", height: formattedMaxSize || allowedTypesMessage ? '136px' : '115px', sx: { margin: '5px 0', borderRadius: '8px' } })) : (React.createElement(DocumentList, { id: id, fieldType: fieldType, handleChange: handleChange, onAutosave: onAutosave, value: documents, setSnackbarError: (type, message) => setSnackbarError({ message, type }), canUpdateProperty: canUpdateProperty && !!hasUpdatePermission })),
+        canUpdateProperty && isNil(hasUpdatePermission) ? (React.createElement(Skeleton, { variant: "rectangular", height: formattedMaxSize || allowedTypesMessage ? '136px' : '115px', sx: { margin: '5px 0', borderRadius: '8px' } })) : (React.createElement(DocumentList, { id: id, handleChange: handleChange, onAutosave: onAutosave, 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' }),
         errors.length > 0 && (React.createElement(Box, { display: 'flex', alignItems: 'center' },
             React.createElement(InfoRounded, { sx: { fontSize: '.75rem', marginRight: '3px', color: '#D3271B' } }),

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

@@ -1,12 +1,11 @@
 import React from 'react';
-import { DocumentReference } from '../../types';
+import { SavedDocumentReference } from '../../types';
 type DocumentListProps = {
-    handleChange?: (propertyId: string, value: (File | DocumentReference)[] | undefined) => void;
+    handleChange?: (propertyId: string, value: (File | SavedDocumentReference)[] | undefined) => void;
     onAutosave?: (fieldId: string) => void | Promise<void>;
     id: string;
-    fieldType?: 'document' | 'file';
     canUpdateProperty: boolean;
-    value: (File | DocumentReference)[] | undefined;
+    value: (File | SavedDocumentReference)[] | undefined;
     setSnackbarError: (type: 'error' | 'success', message: string) => void;
 };
 export declare const DocumentList: (props: DocumentListProps) => React.JSX.Element;

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

@@ -1,5 +1,5 @@
 import { useApiServices } from '@evoke-platform/context';
-import { useQuery } from '@tanstack/react-query';
+import { isEqual } from 'lodash';
 import prettyBytes from 'pretty-bytes';
 import React, { useEffect, useState } from 'react';
 import { FileWithExtension, LaunchRounded, TrashCan, WarningRounded } from '../../../../../../icons';
@@ -24,32 +24,29 @@ const viewableFileTypes = [
     'text/plain',
 ];
 export const DocumentList = (props) => {
-    const { handleChange, onAutosave, id, fieldType = 'document', canUpdateProperty, value: documents, setSnackbarError, } = props;
+    const { handleChange, onAutosave, id, canUpdateProperty, value: documents, setSnackbarError } = props;
     const apiServices = useApiServices();
     const { fetchedOptions, setFetchedOptions, object, instance } = useFormContext();
     // Determine property type once at component level
-    const isFileType = fieldType === 'file';
+    const propertyType = object?.properties?.find((p) => p.id === id)?.type;
+    const isFileType = propertyType === 'file';
+    const [hasViewPermission, setHasViewPermission] = useState(fetchedOptions[`${id}ViewPermission`] ?? true);
     // savedDocuments is either FileInstance[] or DocumentType[], never a mix
     const [savedDocuments, setSavedDocuments] = useState(fetchedOptions[`${id}SavedDocuments`]);
     useEffect(() => {
-        // Use documents prop (value) as the source of truth, not instance[id]
-        // This ensures newly uploaded files trigger a fetch even before they're saved to instance
-        const currentValue = documents;
+        const currentValue = instance?.[id];
         if (currentValue?.length) {
-            // Filter out File objects only - we want to fetch details for all DocumentReferences including unsaved ones
-            const currentDocumentIds = currentValue
-                .filter((doc) => !(doc instanceof File))
-                .map((doc) => doc.id);
-            if (currentDocumentIds.length) {
-                // Check if there are any document IDs that we haven't fetched yet
-                const savedDocumentIds = savedDocuments?.map((doc) => doc.id) ?? [];
-                const missingDocumentIds = currentDocumentIds.filter((id) => !savedDocumentIds.includes(id));
-                if (missingDocumentIds.length > 0) {
-                    getDocuments(currentDocumentIds);
-                }
+            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);
             }
         }
-    }, [documents, savedDocuments]);
+    }, [id, documents, object]);
     useEffect(() => {
         if (fetchedOptions[`${id}SavedDocuments`]) {
             setSavedDocuments(fetchedOptions[`${id}SavedDocuments`]);
@@ -82,31 +79,30 @@ export const DocumentList = (props) => {
             }
         });
     };
-    const { data: hasViewPermission = false } = useQuery({
-        queryKey: ['hasViewPermission', object?.id, instance?.id],
-        queryFn: async () => {
-            const endpoint = isFileType
-                ? getPrefixedUrl(`/objects/sys__file/instances/checkAccess?action=read&field=content`)
-                : getPrefixedUrl(`/objects/${object.id}/instances/${instance.id}/documents/checkAccess?action=view`);
-            try {
-                const viewPermissionCheck = await apiServices.get(endpoint);
-                return viewPermissionCheck.result;
-            }
-            catch {
-                return false;
-            }
-        },
-        enabled: !!instance?.id && !!object?.id && !!instance?.[id]?.length,
-        staleTime: Infinity,
-    });
+    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 isUnsavedFile = (doc) => isFile(doc) || !!doc.unsaved;
     const fileExists = (doc) => savedDocuments?.find((d) => d.id === doc.id);
     const handleRemove = async (index) => {
         const updatedDocuments = documents?.filter((_, i) => i !== index) ?? [];
         const newValue = updatedDocuments.length === 0 ? undefined : updatedDocuments;
         try {
-            handleChange?.(id, newValue);
+            handleChange && (await handleChange(id, newValue));
         }
         catch (error) {
             console.error('Failed to update field:', error);
@@ -128,7 +124,9 @@ export const DocumentList = (props) => {
                 : savedDocuments?.find((savedDocument) => savedDocument.id === doc.id)?.contentType;
             if (!isFile(doc)) {
                 try {
-                    const contentEndpoint = isFileType
+                    // Determine property type to use the correct endpoint
+                    const propertyType = object?.properties?.find((p) => p.id === id)?.type;
+                    const contentEndpoint = propertyType === 'file'
                         ? getPrefixedUrl(`/files/${doc.id}/content`)
                         : getPrefixedUrl(`/objects/${object?.id}/instances/${instance?.id}/documents/${doc.id}/content`);
                     const documentResponse = await apiServices.get(contentEndpoint, { responseType: 'blob' });
@@ -191,10 +189,10 @@ export const DocumentList = (props) => {
                         } }, doc.name)),
                 React.createElement(Grid, { item: true, xs: 12 },
                     React.createElement(Typography, { sx: { fontSize: '12px', color: '#637381' } }, getDocumentSize(doc)))),
-            (isUnsavedFile(doc) || (hasViewPermission && !isFile(doc) && fileExists(doc))) && (React.createElement(Grid, { item: true },
+            (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) && !isUnsavedFile(doc) && savedDocuments && !fileExists(doc) && (React.createElement(Chip, { label: "Deleted", sx: {
+            !isFile(doc) && savedDocuments && !fileExists(doc) && (React.createElement(Chip, { label: "Deleted", sx: {
                     marginRight: '16px',
                     backgroundColor: 'rgba(222, 48, 36, 0.16)',
                     color: '#A91813',

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

@@ -1,17 +1,17 @@
 import { useApiServices } from '@evoke-platform/context';
 import { Close, ExpandMore } from '@mui/icons-material';
-import { useQuery } from '@tanstack/react-query';
 import React, { useEffect, useState } from 'react';
 import { useFormContext } from '../../../../../theme/hooks';
 import { Autocomplete, IconButton, Paper, TextField, Typography } from '../../../../core';
 import { getPrefixedUrl, isOptionEqualToValue } from '../utils';
 const UserProperty = (props) => {
     const { id, error, value, readOnly, hasDescription } = props;
-    const { handleChange, onAutosave: onAutosave, fieldHeight } = useFormContext();
+    const { fetchedOptions, setFetchedOptions, handleChange, onAutosave: onAutosave, fieldHeight } = useFormContext();
     const [loadingOptions, setLoadingOptions] = useState(false);
     const apiServices = useApiServices();
-    const [options, setOptions] = useState([]);
+    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) {
@@ -21,21 +21,25 @@ const UserProperty = (props) => {
             setUserValue(undefined);
         }
     }, [value]);
-    const { data: users } = useQuery({
-        queryKey: ['users'],
-        queryFn: () => apiServices.get(getPrefixedUrl(`/users`)),
-        staleTime: Infinity,
-        meta: {
-            errorMessage: 'Error fetching users: ',
-        },
-    });
     useEffect(() => {
-        setOptions((users ?? []).map((user) => ({
-            label: user.name,
-            value: user.id,
-        })));
-        setLoadingOptions(false);
-    }, [users]);
+        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]);
     async function handleChangeUserProperty(id, value) {
         const updatedValue = typeof value?.value === 'string' ? { name: value.label, id: value.value } : null;
         try {

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

@@ -16,7 +16,7 @@ const SearchField = (props) => {
     };
     const handleSearch = async (e) => {
         const searchProperties = searchableColumns.map((column) => {
-            const columnId = column.id;
+            const columnId = column.type === 'object' ? `${column.id}.name` : column.id;
             return {
                 [columnId]: {
                     like: e.target.value,