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

package/dist/published/components/custom/Form/FormComponents/RepeatableFieldComponent/RepeatableField.js

@@ -7,6 +7,7 @@ import sift from 'sift';
 import { Edit, TrashCan } from '../../../../../icons';
 import { Button, IconButton, Skeleton, Snackbar, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Tooltip, Typography, } from '../../../../core';
 import { Box } from '../../../../layout';
+import { getReadableQuery } from '../../../CriteriaBuilder';
 import { getPrefixedUrl, normalizeDateTime, retrieveCustomErrorMessage } from '../../utils';
 import { ActionDialog } from './ActionDialog';
 import { DocumentViewerCell } from './DocumentViewerCell';
@@ -37,6 +38,7 @@ const RepeatableField = (props) => {
     const [relatedObject, setRelatedObject] = useState();
     const [hasCreateAction, setHasCreateAction] = useState(false);
     const [users, setUsers] = useState();
+    const [criteriaObjects, setCriteriaObjects] = useState([]);
     const [openDialog, setOpenDialog] = useState(false);
     const [dialogType, setDialogType] = useState();
     const [selectedRow, setSelectedRow] = useState();
@@ -50,9 +52,7 @@ const RepeatableField = (props) => {
     const [error, setError] = useState(false);
     const DEFAULT_CREATE_ACTION = '_create';
     const { instanceChanges } = useNotification();
-    const fetchRelatedInstances = useCallback(async () => {
-        if (openDialog)
-            return;
+    const fetchRelatedObject = useCallback(async () => {
         let relatedObject;
         if (property.objectId) {
             try {
@@ -80,31 +80,86 @@ const RepeatableField = (props) => {
             catch (err) {
                 console.error(error);
             }
-            if (property.relatedPropertyId && instance?.id) {
-                const filterProperty = `${property.relatedPropertyId}.id`;
-                const filter = { where: { [filterProperty]: instance?.id }, limit: 100 };
-                const objectId = property.objectId;
-                try {
-                    const timeout = setTimeout(() => {
-                        setLoading(false);
-                    }, 300);
-                    setLoading(true);
-                    const instances = await apiServices.get(getPrefixedUrl(`/objects/${objectId}/instances`), {
-                        params: { filter: JSON.stringify(filter) },
-                    });
-                    clearTimeout(timeout);
+        }
+        relatedObject && checkCreateAccess(relatedObject);
+    }, [apiServices, property]);
+    const fetchRelatedInstances = useCallback(async () => {
+        if (openDialog)
+            return;
+        if (property.objectId && property.relatedPropertyId && instance?.id) {
+            const filterProperty = `${property.relatedPropertyId}.id`;
+            const filter = { where: { [filterProperty]: instance?.id }, limit: 100 };
+            const objectId = property.objectId;
+            try {
+                const timeout = setTimeout(() => {
                     setLoading(false);
-                    if (instances) {
-                        setRelatedInstances(instances);
-                    }
-                }
-                catch (error) {
-                    setError(true);
+                }, 300);
+                setLoading(true);
+                const instances = await apiServices.get(getPrefixedUrl(`/objects/${objectId}/instances`), {
+                    params: { filter: JSON.stringify(filter) },
+                });
+                clearTimeout(timeout);
+                setLoading(false);
+                if (instances) {
+                    setRelatedInstances(instances);
                 }
             }
+            catch (error) {
+                setError(true);
+            }
         }
-        relatedObject && checkCreateAccess(relatedObject);
-    }, [apiServices, property, viewLayout]);
+    }, [apiServices, property]);
+    const fetchCriteriaObjects = useCallback(async () => {
+        let objectIds = [];
+        const criteriaProperties = relatedObject?.properties?.filter((property) => property.type === 'criteria' && property.objectId) ?? [];
+        if (tableViewLayout) {
+            objectIds = criteriaProperties
+                .filter((p) => tableViewLayout.properties.some((column) => column.id === p.id))
+                .map((property) => property.objectId);
+        }
+        else {
+            objectIds = criteriaProperties.map((p) => p.objectId);
+        }
+        const objects = [];
+        for (const objectId of new Set(objectIds)) {
+            try {
+                const criteriaObject = await apiServices.get(getPrefixedUrl(`/objects/${objectId}/effective`), {
+                    params: { fields: ['id', 'name', 'properties'] },
+                });
+                objects.push(criteriaObject);
+            }
+            catch (error) {
+                console.error(`Error fetching criteria object with ID ${objectId}:`, error);
+            }
+        }
+        setCriteriaObjects(objects);
+    }, [apiServices, relatedObject, tableViewLayout]);
+    useEffect(() => {
+        (async () => {
+            try {
+                const users = await apiServices.get(getPrefixedUrl(`/users`));
+                setUsers(users);
+            }
+            catch (error) {
+                console.error(error);
+            }
+        })();
+    }, [apiServices]);
+    useEffect(() => {
+        fetchRelatedObject();
+        fetchRelatedInstances();
+    }, [fetchRelatedInstances, fetchRelatedObject, reloadOnErrorTrigger, instance]);
+    useEffect(() => {
+        if (relatedObject)
+            fetchCriteriaObjects();
+    }, [fetchCriteriaObjects, relatedObject]);
+    useEffect(() => {
+        if (relatedObject?.rootObjectId) {
+            const callback = () => fetchRelatedInstances();
+            instanceChanges?.subscribe(relatedObject?.rootObjectId, callback);
+            return () => instanceChanges?.unsubscribe(relatedObject?.rootObjectId, callback);
+        }
+    }, [instanceChanges, relatedObject]);
     const retrieveCriteria = (relatedObjProperty, action, object) => {
         let property;
         if (action.parameters) {
@@ -171,27 +226,6 @@ const RepeatableField = (props) => {
             });
         }
     };
-    useEffect(() => {
-        (async () => {
-            try {
-                const users = await apiServices.get(getPrefixedUrl(`/users`));
-                setUsers(users);
-            }
-            catch (error) {
-                console.error(error);
-            }
-        })();
-    }, [apiServices]);
-    useEffect(() => {
-        fetchRelatedInstances();
-    }, [fetchRelatedInstances, reloadOnErrorTrigger, instance]);
-    useEffect(() => {
-        if (relatedObject?.rootObjectId) {
-            const callback = () => fetchRelatedInstances();
-            instanceChanges?.subscribe(relatedObject?.rootObjectId, callback);
-            return () => instanceChanges?.unsubscribe(relatedObject?.rootObjectId, callback);
-        }
-    }, [instanceChanges, relatedObject]);
     const deleteRow = (id) => {
         setDialogType('delete');
         setSelectedRow(id);
@@ -334,28 +368,24 @@ const RepeatableField = (props) => {
     };
     const getValue = (relatedInstance, propertyId, propertyType) => {
         const value = get(relatedInstance, propertyId);
-        // If the property is not date-like then just return the
-        // value found at the given path.
-        if (!['date', 'date-time', 'time'].includes(propertyType)) {
-            return value;
-        }
         // If the date-like value is empty then there is no need to format.
         if (!value) {
             return value;
         }
-        // At this point it has been asserted that there is a value
-        // and since the property is date-like the value must be
-        // a string.
-        const stringValue = value;
         if (propertyType === 'date') {
-            return DateTime.fromISO(stringValue).toLocaleString(DateTime.DATE_SHORT);
+            return DateTime.fromISO(value).toLocaleString(DateTime.DATE_SHORT);
         }
         if (propertyType === 'date-time') {
-            return DateTime.fromISO(stringValue).toLocaleString(DateTime.DATETIME_SHORT);
+            return DateTime.fromISO(value).toLocaleString(DateTime.DATETIME_SHORT);
         }
         if (propertyType === 'time') {
-            return DateTime.fromISO(stringValue).toLocaleString(DateTime.TIME_SIMPLE);
+            return DateTime.fromISO(value).toLocaleString(DateTime.TIME_SIMPLE);
+        }
+        if (propertyType === 'criteria' && typeof value === 'object') {
+            const property = relatedObject?.properties?.find((p) => p.id === propertyId);
+            return getReadableQuery(value, criteriaObjects.find((o) => o.id === property?.objectId)?.properties ?? []);
         }
+        return value;
     };
     const columns = retrieveViewLayout();
     return loading ? (React.createElement(React.Fragment, null,

package/package.json

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