@evoke-platform/ui-components 1.5.0-dev.4 → 1.5.0-testing.1

package/dist/published/components/custom/Form/FormComponents/ObjectComponent/RelatedObjectInstance.js

@@ -41,7 +41,7 @@ export const RelatedObjectInstance = (props) => {
         handleClose();
         setErrors([]);
     };
-    const createNewInstance = async (submission, setSubmitting) => {
+    const createNewInstance = async (submission) => {
         if (!relatedObject) {
             // Handle the case where relatedObject is undefined
             return { isSuccessful: false };
@@ -74,12 +74,12 @@ export const RelatedObjectInstance = (props) => {
                 setSnackbarError({
                     showAlert: true,
                     message: err.response?.data?.error?.details?.[0]?.message ??
-                        err.response?.data?.error?.message ??
+                        err.data?.error?.message ??
                         `An error occurred. The new instance was not created.`,
                     isError: true,
                 });
             error = err.response?.data?.error;
-            setSubmitting && setSubmitting(false);
+            onClose();
         }
         return { isSuccessful, error };
     };

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

@@ -9,7 +9,6 @@ import { Button, IconButton, Skeleton, Snackbar, Table, TableBody, TableCell, Ta
 import { Box } from '../../../../layout';
 import { getPrefixedUrl, normalizeDateTime } from '../../utils';
 import { ActionDialog } from './ActionDialog';
-import { DocumentViewerCell } from './DocumentViewerCell';
 const styles = {
     addButton: {
         backgroundColor: 'rgba(0, 117, 167, 0.08)',
@@ -251,13 +250,13 @@ const RepeatableField = (props) => {
                 isSuccessful = true;
             }
             catch (err) {
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                error = err.response?.data?.error;
                 setSnackbarError({
                     showAlert: true,
-                    message: error?.message ?? `An error occurred while creating an instance`,
+                    message: `An error occurred while creating an instance`,
                     isError: true,
                 });
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                error = err.response?.data?.error;
                 setSubmitting && setSubmitting(false);
             }
         }
@@ -285,14 +284,13 @@ const RepeatableField = (props) => {
                 isSuccessful = true;
             }
             catch (err) {
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                error = err.response?.data?.error;
                 setSnackbarError({
                     showAlert: true,
-                    message: error?.message ??
-                        `An error occurred while ${actionType === 'delete' ? ' deleting' : ' updating'} an instance`,
+                    message: `An error occurred while ${actionType === 'delete' ? ' deleting' : ' updating'} an instance`,
                     isError: true,
                 });
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                error = err.response?.data?.error;
             }
         }
         return { isSuccessful, error };
@@ -336,9 +334,9 @@ const RepeatableField = (props) => {
     };
     const getValue = (relatedInstance, propertyId, propertyType) => {
         const value = get(relatedInstance, propertyId);
-        // If the property is not date-like then just return the
+        // If the property is not date-like or document then just return the
         // value found at the given path.
-        if (!['date', 'date-time', 'time'].includes(propertyType)) {
+        if (!['date', 'date-time', 'time', 'document'].includes(propertyType)) {
             return value;
         }
         // If the date-like value is empty then there is no need to format.
@@ -358,6 +356,9 @@ const RepeatableField = (props) => {
         if (propertyType === 'time') {
             return DateTime.fromISO(stringValue).toLocaleString(DateTime.TIME_SIMPLE);
         }
+        if (property.type === 'document') {
+            return Array.isArray(value) ? value.map((v) => v.name).join(', ') : value;
+        }
     };
     const columns = retrieveViewLayout();
     return loading ? (React.createElement(React.Fragment, null,
@@ -375,22 +376,23 @@ const RepeatableField = (props) => {
                     React.createElement(TableHead, { sx: { backgroundColor: '#F4F6F8' } },
                         React.createElement(TableRow, null,
                             columns?.map((prop) => React.createElement(TableCell, { sx: styles.tableCell }, prop.name)),
-                            canUpdateProperty && React.createElement(TableCell, { sx: { ...styles.tableCell, width: '80px' } }))),
+                            React.createElement(TableCell, { sx: { ...styles.tableCell, width: '80px' } }))),
                     React.createElement(TableBody, null, relatedInstances?.map((relatedInstance, index) => (React.createElement(TableRow, { key: relatedInstance.id },
                         columns?.map((prop) => {
-                            return (React.createElement(TableCell, { sx: { color: '#212B36', fontSize: '16px' } }, prop.type === 'document' ? (React.createElement(DocumentViewerCell, { instance: relatedInstance, propertyId: prop.id, apiServices: apiServices, setSnackbarError: setSnackbarError })) : (React.createElement(Typography, { key: prop.id, sx: prop.id === 'name'
-                                    ? {
-                                        '&:hover': {
-                                            textDecoration: 'underline',
-                                            cursor: 'pointer',
-                                        },
-                                    }
-                                    : {}, onClick: canUpdateProperty && prop.id === 'name'
-                                    ? () => editRow(relatedInstance.id)
-                                    : undefined },
-                                getValue(relatedInstance, prop.id, prop.type),
-                                prop.type === 'user' &&
-                                    users?.find((user) => get(relatedInstance, `${prop.id.split('.')[0]}.id`) === user.id)?.status === 'Inactive' && (React.createElement("span", null, ' (Inactive)'))))));
+                            return (React.createElement(TableCell, { sx: { color: '#212B36', fontSize: '16px' } },
+                                React.createElement(Typography, { key: prop.id, sx: prop.id === 'name'
+                                        ? {
+                                            '&:hover': {
+                                                textDecoration: 'underline',
+                                                cursor: 'pointer',
+                                            },
+                                        }
+                                        : {}, onClick: canUpdateProperty && prop.id === 'name'
+                                        ? () => editRow(relatedInstance.id)
+                                        : undefined },
+                                    getValue(relatedInstance, prop.id, prop.type),
+                                    prop.type === 'user' &&
+                                        users?.find((user) => get(relatedInstance, `${prop.id.split('.')[0]}.id`) === user.id)?.status === 'Inactive' && React.createElement("span", null, ' (Inactive)'))));
                         }),
                         canUpdateProperty && (React.createElement(TableCell, { sx: { width: '80px' } },
                             React.createElement(IconButton, { "aria-label": `edit-collection-instance-${index}`, onClick: () => editRow(relatedInstance.id) },

package/dist/published/index.d.ts

@@ -1,4 +1,4 @@
-export { ClickAwayListener, createTheme, darken, lighten, styled, Toolbar, useMediaQuery, useTheme, } from '@mui/material';
+export { ClickAwayListener, createTheme, darken, lighten, styled, Toolbar } from '@mui/material';
 export { CalendarPicker, DateTimePicker, MonthPicker, PickersDay, StaticDateTimePicker, StaticTimePicker, TimePicker, YearPicker, } from '@mui/x-date-pickers';
 export * from './colors';
 export * from './components/core';

package/dist/published/index.js

@@ -1,4 +1,4 @@
-export { ClickAwayListener, createTheme, darken, lighten, styled, Toolbar, useMediaQuery, useTheme, } from '@mui/material';
+export { ClickAwayListener, createTheme, darken, lighten, styled, Toolbar } from '@mui/material';
 export { CalendarPicker, DateTimePicker, MonthPicker, PickersDay, StaticDateTimePicker, StaticTimePicker, TimePicker, YearPicker, } from '@mui/x-date-pickers';
 export * from './colors';
 export * from './components/core';

package/package.json

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

package/dist/published/components/custom/Form/FormComponents/RepeatableFieldComponent/DocumentViewerCell.d.ts

@@ -1,13 +0,0 @@
-import { ApiServices, ObjectInstance } from '@evoke-platform/context';
-import React from 'react';
-export type DocumentViewerCellProps = {
-    instance: ObjectInstance;
-    propertyId: string;
-    apiServices: ApiServices;
-    setSnackbarError: (error: {
-        showAlert: boolean;
-        message?: string;
-        isError?: boolean;
-    }) => void;
-};
-export declare const DocumentViewerCell: (props: DocumentViewerCellProps) => React.JSX.Element;

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

@@ -1,113 +0,0 @@
-import React, { useState } from 'react';
-import { AutorenewRounded, FileWithExtension, LaunchRounded } from '../../../../../icons';
-import { Button, Menu, MenuItem, Typography } from '../../../../core';
-import { Grid } from '../../../../layout';
-import { getPrefixedUrl } from '../../utils';
-export const DocumentViewerCell = (props) => {
-    const { instance, propertyId, apiServices, setSnackbarError } = props;
-    const [anchorEl, setAnchorEl] = useState(null);
-    const [isLoading, setIsLoading] = useState(false);
-    const downloadDocument = async (doc, instance) => {
-        setIsLoading(true);
-        try {
-            const documentResponse = await apiServices.get(getPrefixedUrl(`/objects/${instance.objectId}/instances/${instance.id}/documents/${doc.id}/content`), { responseType: 'blob' });
-            const contentType = documentResponse.type;
-            const blob = new Blob([documentResponse], { type: contentType });
-            const url = URL.createObjectURL(blob);
-            // Let the browser handle whether to open the document to view in a new tab or download it.
-            window.open(url, '_blank');
-            setIsLoading(false);
-            URL.revokeObjectURL(url);
-        }
-        catch (error) {
-            const status = error.status;
-            let message = 'An error occurred while downloading the document.';
-            if (status === 403) {
-                message = 'You do not have permission to download this document.';
-            }
-            else if (status === 404) {
-                message = 'Document not found.';
-            }
-            setIsLoading(false);
-            setSnackbarError({
-                showAlert: true,
-                message,
-                isError: true,
-            });
-        }
-    };
-    return (React.createElement(React.Fragment, null, instance[propertyId]?.length ? (React.createElement(React.Fragment, null,
-        React.createElement(Button, { sx: {
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'flex-start',
-                padding: '6px 10px',
-            }, color: 'inherit', onClick: async (event) => {
-                event.stopPropagation();
-                const documents = instance[propertyId];
-                if (documents.length === 1) {
-                    await downloadDocument(documents[0], instance);
-                }
-                else {
-                    setAnchorEl(event.currentTarget);
-                }
-            }, variant: "text", "aria-haspopup": "menu", "aria-controls": `document-menu-${instance.id}-${propertyId}`, "aria-expanded": anchorEl ? 'true' : 'false' },
-            isLoading ? (React.createElement(AutorenewRounded, { sx: {
-                    color: '#637381',
-                    width: '20px',
-                    height: '20px',
-                } })) : (React.createElement(LaunchRounded, { sx: {
-                    color: '#637381',
-                    width: '20px',
-                    height: '20px',
-                } })),
-            React.createElement(Typography, { sx: {
-                    marginLeft: '8px',
-                    fontWeight: 400,
-                    fontSize: '14px',
-                } }, isLoading ? 'Preparing document...' : 'View Document')),
-        React.createElement(Menu, { id: `document-menu-${instance.id}-${propertyId}`, anchorEl: anchorEl, open: Boolean(anchorEl), onClose: () => {
-                setAnchorEl(null);
-            }, sx: {
-                '& .MuiPaper-root': {
-                    borderRadius: '12px',
-                    boxShadow: 'rgba(145, 158, 171, 0.2)',
-                },
-            }, variant: 'menu', slotProps: {
-                paper: {
-                    style: {
-                        maxHeight: 200,
-                        maxWidth: 300,
-                        minWidth: 300,
-                    },
-                },
-            } }, instance[propertyId].map((document) => (React.createElement(MenuItem, { key: document.id, onClick: async (e) => {
-                setAnchorEl(null);
-                await downloadDocument(document, instance);
-            }, "aria-label": document.name },
-            React.createElement(Grid, { item: true, sx: {
-                    display: 'flex',
-                    justifyContent: 'center',
-                    padding: '7px',
-                } },
-                React.createElement(FileWithExtension, { fontFamily: "Arial", fileExtension: document.name?.split('.')?.pop() ?? '', sx: {
-                        height: '1rem',
-                        width: '1rem',
-                    } })),
-            React.createElement(Grid, { item: true, xs: 12, sx: {
-                    width: '100%',
-                    overflow: 'hidden',
-                    textOverflow: 'ellipsis',
-                } },
-                React.createElement(Typography, { noWrap: true, sx: {
-                        fontSize: '14px',
-                        fontWeight: 700,
-                        color: '#212B36',
-                        lineHeight: '15px',
-                        width: '100%',
-                    } }, document.name)))))))) : (React.createElement(Typography, { sx: {
-            fontStyle: 'italic',
-            marginLeft: '12px',
-            fontSize: '14px',
-        } }, "No documents"))));
-};