@acvl/frontend-components 0.0.36 → 0.0.37

package/dist/cjs/index.js

@@ -98,6 +98,7 @@ var DrawIcon = require('@mui/icons-material/Draw');
 var CloseIcon = require('@mui/icons-material/Close');
 var ErrorOutlineIcon = require('@mui/icons-material/ErrorOutline');
 var query$1 = require('@reduxjs/toolkit/query');
+var OpenInNewIcon = require('@mui/icons-material/OpenInNew');
 var TabList = require('@mui/lab/TabList');
 var TabPanel = require('@mui/lab/TabPanel');
 var TabContext = require('@mui/lab/TabContext');
@@ -26538,7 +26539,19 @@ const VisuallyHiddenInput = material.styled("input")({
 });
 const ControlledFileField = (props) => {
     return (jsxRuntime.jsx(reactHookForm.Controller, { control: props.control, name: props.name, render: ({ field: { value, onChange, onBlur, ref }, fieldState: { error } }) => {
-            return (jsxRuntime.jsxs(material.FormGroup, { sx: { width: 1 }, color: "secondary", children: [value ? (jsxRuntime.jsxs(material.Stack, { direction: "row", spacing: 1, width: 1, alignItems: "center", children: [jsxRuntime.jsx(material.Typography, { children: value.name }), jsxRuntime.jsx(material.IconButton, { onClick: () => onChange(null), children: jsxRuntime.jsx(ClearIcon$1, { color: "error" }) })] })) : (jsxRuntime.jsxs(material.Button, { component: "label", variant: "contained", startIcon: jsxRuntime.jsx(UploadFileIcon, {}), sx: { maxWidth: 200 }, ...props.extraProps?.slotProps?.button, children: ["Cargar", jsxRuntime.jsx(VisuallyHiddenInput, { type: "file", accept: "image/*", ref: ref, onBlur: onBlur, onChange: (e) => onChange(e.target.files && e.target.files[0]), ...props.extraProps?.slotProps?.input })] })), jsxRuntime.jsx(material.FormHelperText, { error: !!error, children: error ? error.message : " " })] }));
+            if (props.extraProps?.multiple) {
+                const files = value ?? [];
+                const handleAdd = (e) => {
+                    const incoming = e.target.files ? Array.from(e.target.files) : [];
+                    onChange([...files, ...incoming]);
+                    e.target.value = "";
+                };
+                const handleRemove = (index) => {
+                    onChange(files.filter((_, i) => i !== index));
+                };
+                return (jsxRuntime.jsxs(material.FormGroup, { sx: { width: 1 }, children: [jsxRuntime.jsxs(material.Stack, { spacing: 1, width: 1, children: [files.map((file, index) => (jsxRuntime.jsxs(material.Stack, { direction: "row", spacing: 1, alignItems: "center", sx: { minWidth: 0 }, children: [jsxRuntime.jsx(material.Typography, { noWrap: true, sx: { flex: 1 }, children: file.name }), jsxRuntime.jsx(material.IconButton, { onClick: () => handleRemove(index), children: jsxRuntime.jsx(ClearIcon$1, { color: "error" }) })] }, index))), jsxRuntime.jsxs(material.Button, { component: "label", variant: "contained", startIcon: jsxRuntime.jsx(UploadFileIcon, {}), sx: { maxWidth: 200 }, ...props.extraProps?.slotProps?.button, children: ["Cargar", jsxRuntime.jsx(VisuallyHiddenInput, { type: "file", multiple: true, accept: "image/*", ref: ref, onBlur: onBlur, onChange: handleAdd, ...props.extraProps?.slotProps?.input })] })] }), jsxRuntime.jsx(material.FormHelperText, { error: !!error, children: error ? error.message : " " })] }));
+            }
+            return (jsxRuntime.jsxs(material.FormGroup, { sx: { width: 1 }, color: "secondary", children: [value ? (jsxRuntime.jsxs(material.Stack, { direction: "row", spacing: 1, width: 1, alignItems: "center", sx: { minWidth: 0 }, children: [jsxRuntime.jsx(material.Typography, { noWrap: true, sx: { flex: 1 }, children: value.name }), jsxRuntime.jsx(material.IconButton, { onClick: () => onChange(null), children: jsxRuntime.jsx(ClearIcon$1, { color: "error" }) })] })) : (jsxRuntime.jsxs(material.Button, { component: "label", variant: "contained", startIcon: jsxRuntime.jsx(UploadFileIcon, {}), sx: { maxWidth: 200 }, ...props.extraProps?.slotProps?.button, children: ["Cargar", jsxRuntime.jsx(VisuallyHiddenInput, { type: "file", accept: "image/*", ref: ref, onBlur: onBlur, onChange: (e) => onChange(e.target.files && e.target.files[0]), ...props.extraProps?.slotProps?.input })] })), jsxRuntime.jsx(material.FormHelperText, { error: !!error, children: error ? error.message : " " })] }));
         } }));
 };
 ControlledFileField.displayName = "ControlledFileField";
@@ -28179,6 +28192,7 @@ const LinkField = ({ url, value, text }) => {
     return jsxRuntime.jsx(material.Link, { href: `${url}/${value}`, children: text });
 };
 const DetailField = (props) => {
+    const [anchor, setAnchor] = React.useState(null);
     const hasLinkToViewPermission = useHasPermission(`${props.navigation?.permission}.view`);
     const value = React.useCallback(() => {
         const { fieldData, type, extraProps, detail_name } = props;
@@ -28198,7 +28212,7 @@ const DetailField = (props) => {
                     ? dayjs(fieldData).format("YYYY-MM-DD HH:mm")
                     : dayjs(fieldData).format("YYYY-MM-DD");
             case "ControlledFileField":
-                return fieldData ? "Archivo" : "N/A";
+                return fieldData ? "Archivo(s)" : "N/A";
             default:
                 if (!fieldData)
                     return "N/A";
@@ -28216,7 +28230,13 @@ const DetailField = (props) => {
         return (jsxRuntime.jsx(LinkField, { url: props.navigation.url, value: lodash.get(props.fieldData, "value"), text: content }));
     }
     else if (props.type.displayName == "ControlledFileField" && content !== "N/A") {
-        return (jsxRuntime.jsx(material.Link, { href: props.fieldData, target: "_blank", rel: "noopener noreferrer", children: content }));
+        const archivos = Array.isArray(props.fieldData)
+            ? props.fieldData.filter(Boolean)
+            : [props.fieldData];
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(material.Badge, { badgeContent: archivos.length, color: "primary", sx: { "& .MuiBadge-badge": { fontSize: 10, minWidth: 16, height: 16 } }, children: jsxRuntime.jsx(material.Button, { size: "small", onClick: (e) => {
+                            e.stopPropagation();
+                            setAnchor(e.currentTarget);
+                        }, children: content }) }), jsxRuntime.jsx(material.Popover, { open: Boolean(anchor), anchorEl: anchor, onClose: () => setAnchor(null), anchorOrigin: { vertical: "bottom", horizontal: "center" }, transformOrigin: { vertical: "top", horizontal: "center" }, onClick: (e) => e.stopPropagation(), children: jsxRuntime.jsx(material.List, { dense: true, disablePadding: true, sx: { minWidth: 140 }, children: archivos.map((archivo, i) => (jsxRuntime.jsxs(material.ListItemButton, { component: "a", href: archivo.imagen, target: "_blank", rel: "noopener noreferrer", onClick: (e) => e.stopPropagation(), children: [jsxRuntime.jsx(material.ListItemText, { primary: `Archivo ${i + 1}` }), jsxRuntime.jsx(OpenInNewIcon, { fontSize: "small", sx: { ml: 1, opacity: 0.6 } })] }, i))) }) })] }));
     }
     else {
         if (Array.isArray(props.fieldData)) {
@@ -28264,6 +28284,8 @@ const Field = (props) => {
     const formData = props.form.watch();
     const show = React.useMemo(() => {
         if (props.dependantOn) {
+            if (props.dependantOn.showOnDetail && props.pageType === "detail")
+                return true;
             return props.dependantOn.method(lodash.get(props.data || formData, props.dependantOn.fieldName), props.dependantOn.value);
         }
         return true;
@@ -28292,6 +28314,7 @@ const FieldArrayField = (props) => {
         keyName: "_id",
     });
     const errors = props.form.formState.errors;
+    const errorMessage = lodash.get(props.form.formState.errors, props.name + ".message");
     const getIndex = React.useCallback((id) => lodash.findIndex(fields, function (field) {
         return field._id == id;
     }), [fields]);
@@ -28372,31 +28395,27 @@ const FieldArrayField = (props) => {
                                         fieldProps: field.fieldProps,
                                         extraProps: field.extraProps,
                                     }) })] }, `grid-${index}`));
-                    }) }) }), jsxRuntime.jsxs(material.Grid, { rowSpacing: 1, container: true, size: "grow", direction: "column", ...props.gridProps, children: [jsxRuntime.jsx(material.Grid, { size: 12, children: jsxRuntime.jsx(material.Typography, { variant: "body1", fontWeight: "bold", children: props.label }) }), jsxRuntime.jsx(material.Grid, { size: 12, children: jsxRuntime.jsx(xDataGrid.DataGrid, { ...dataGridProps }) })] })] }));
+                    }) }) }), jsxRuntime.jsxs(material.Grid, { rowSpacing: 1, container: true, size: "grow", direction: "column", ...props.gridProps, children: [jsxRuntime.jsx(material.Grid, { size: 12, children: jsxRuntime.jsx(material.Typography, { variant: "body1", fontWeight: "bold", children: props.label }) }), errorMessage && (jsxRuntime.jsx(material.Grid, { size: 12, children: jsxRuntime.jsx(material.Typography, { variant: "body1", color: "error", children: errorMessage }) })), jsxRuntime.jsx(material.Grid, { size: 12, children: jsxRuntime.jsx(xDataGrid.DataGrid, { ...dataGridProps }) })] })] }));
 };
 
 const Section = (props) => {
     const [expanded, setExpanded] = React.useState(true);
     const handleExpandChange = () => {
-        setExpanded(prevState => !prevState);
+        setExpanded((prevState) => !prevState);
     };
     const renderField = (field, index) => {
         if (props.first && index == 0)
-            lodash.merge(lodash.get(field, 'fieldProps', {}), { autoFocus: true });
+            lodash.merge(lodash.get(field, "fieldProps", {}), { autoFocus: true });
         return (jsxRuntime.jsx(Field, { fieldData: props.data && lodash.get(props.data, field.name), ...field, readOnly: 
             // props.validation?.readOnlyFields.includes(field.name) ||
-            (props.edit?.readOnlyFields?.names.includes(field.name) && props.edit.readOnlyFields.validator.method(lodash.get(props.data, props.edit.readOnlyFields.validator.field), props.edit.readOnlyFields.validator.value)), form: props.form, pageType: props.pageType, data: props.data }, `F-${index}`));
+            props.edit?.readOnlyFields?.names.includes(field.name) &&
+                props.edit.readOnlyFields.validator.method(lodash.get(props.data, props.edit.readOnlyFields.validator.field), props.edit.readOnlyFields.validator.value), form: props.form, pageType: props.pageType, data: props.data }, `F-${index}`));
     };
     const renderArrayField = (field, index) => (jsxRuntime.jsx(FieldArrayField, { ...field, form: props.form, pageType: props.pageType }, `FA-${index}`));
-    return (jsxRuntime.jsxs(material.Grid, { size: 12, container: true, spacing: 2, bgcolor: props.bgColor, p: 2, borderRadius: 1, children: [(props.title || props.description) &&
-                jsxRuntime.jsxs(material.Grid, { size: 12, container: true, spacing: 0, children: [props.title &&
-                            jsxRuntime.jsxs(material.Grid, { size: 12, container: true, onClick: handleExpandChange, sx: {
-                                    cursor: 'pointer'
-                                }, children: [jsxRuntime.jsx(material.Grid, { children: expanded ? jsxRuntime.jsx(ExpandLessIcon, { fontSize: 'small' }) : jsxRuntime.jsx(ExpandMoreIcon, { fontSize: 'small' }) }), jsxRuntime.jsx(material.Grid, { children: jsxRuntime.jsx(material.Typography, { variant: 'h5', children: props.title }) })] }), props.description &&
-                            jsxRuntime.jsx(material.Grid, { size: 12, children: jsxRuntime.jsx(material.Typography, { variant: 'caption', color: 'secondary.main', children: props.description }) })] }), expanded &&
-                jsxRuntime.jsxs(material.Grid, { size: 12, container: true, direction: 'row', children: [props.fields &&
-                            props.fields.map((field, index) => renderField(field, index)), props.arrayFields &&
-                            props.arrayFields.map((arrayField, index) => renderArrayField(arrayField, index)), props.content && props.content(props.data)] })] }));
+    return (jsxRuntime.jsxs(material.Grid, { size: 12, container: true, spacing: 2, bgcolor: props.bgColor, p: 2, borderRadius: 1, children: [(props.title || props.description) && (jsxRuntime.jsxs(material.Grid, { size: 12, container: true, spacing: 0, children: [props.title && (jsxRuntime.jsxs(material.Grid, { size: 12, container: true, onClick: handleExpandChange, sx: {
+                            cursor: "pointer",
+                        }, children: [jsxRuntime.jsx(material.Grid, { children: expanded ? (jsxRuntime.jsx(ExpandLessIcon, { fontSize: "small" })) : (jsxRuntime.jsx(ExpandMoreIcon, { fontSize: "small" })) }), jsxRuntime.jsx(material.Grid, { children: jsxRuntime.jsx(material.Typography, { variant: "h5", children: props.title }) })] })), props.description && (jsxRuntime.jsx(material.Grid, { size: 12, children: jsxRuntime.jsx(material.Typography, { variant: "caption", color: "secondary.main", children: props.description }) }))] })), expanded && (jsxRuntime.jsxs(material.Grid, { size: 12, container: true, direction: "row", children: [props.fields && props.fields.map((field, index) => renderField(field, index)), props.arrayFields &&
+                        props.arrayFields.map((arrayField, index) => renderArrayField(arrayField, index)), props.content && props.content(props.data)] }))] }));
 };
 
 // ==============================|| VALIDATION ||============================== //
@@ -28605,7 +28624,7 @@ function DetailPage(props) {
             }
         }
     }, [data, dispatch, form, props.slots?.title]);
-    const [mutation, { isLoading: mutationIsLoading, isSuccess, data: mutationResponse },] = props.api.mutate.mutation();
+    const [mutation, { isLoading: mutationIsLoading, isSuccess, data: mutationResponse }] = props.api.mutate.mutation();
     const handleCancel = () => {
         form.reset();
         navigate(-1);
@@ -28615,8 +28634,7 @@ function DetailPage(props) {
     // ==============================|| VALIDATION ||============================== //
     useValidateFieldData(props, form);
     // ==============================|| QUICK RETURN ||============================== //
-    if ((!canEdit && props.pageType == "edit") ||
-        (fetchError && fetchError.originalStatus == 403))
+    if ((!canEdit && props.pageType == "edit") || (fetchError && fetchError.originalStatus == 403))
         return jsxRuntime.jsx(NotAllowed, {});
     if (fetchError && fetchError.originalStatus == 404)
         return jsxRuntime.jsx(NotFound, {});
@@ -28630,9 +28648,7 @@ function DetailPage(props) {
             props: props.slotProps?.parser,
         };
         const dataToSend = formParser(params);
-        mutation(props.edit.useFormData
-            ? dataToSend
-            : { ...dataToSend, ...props.api.mutate.args })
+        mutation(props.edit.useFormData ? dataToSend : { ...dataToSend, ...props.api.mutate.args })
             .unwrap()
             .then(() => {
             if (!props.slotProps?.button?.save?.disableNavBack)
@@ -28658,17 +28674,26 @@ function DetailPage(props) {
     };
     const onError = (errors) => console.log("Validation Errors:", errors);
     // ==============================|| RENDER SECTIONS ||============================== //
+    const validateDisplay = (field, method, value) => {
+        const validateAgainst = form.watch(field)?.toString();
+        return method(validateAgainst, value);
+    };
     const renderContent = () => {
         let displayed_sections = -1;
         return (jsxRuntime.jsxs(material.Grid, { size: 12, container: true, direction: "column", position: "relative", pb: 2, children: [props.pageType == "detail" && data?.has_history && (jsxRuntime.jsx(HistorialDrawer, { ...props.slotProps?.historial })), props.sections.map((section, index) => {
                     if (!section.display)
                         return null;
                     if (typeof section.display == "object") {
-                        const validateAgainst = form
-                            .watch(section.display.field)
-                            ?.toString();
-                        if (!section.display.method(validateAgainst, section.display.value))
-                            return null;
+                        if (Array.isArray(section.display)) {
+                            if (!section.display
+                                .map((item) => validateDisplay(item.field, item.method, item.value))
+                                .every((item) => item == true))
+                                return null;
+                        }
+                        else {
+                            if (!validateDisplay(section.display.field, section.display.method, section.display.value))
+                                return null;
+                        }
                     }
                     displayed_sections += 1;
                     return (jsxRuntime.jsx(Section, { data: data, form: form, bgColor: displayed_sections % 2 == 1 ? "white" : "#F7F7F7", pageType: props.pageType, ...section, first: displayed_sections == 0 }, index));
@@ -28678,8 +28703,7 @@ function DetailPage(props) {
         if (props.api.mutate.postAction &&
             isSuccess &&
             "post_action" in mutationResponse &&
-            mutationResponse["post_action"]["type"] ===
-                props.api.mutate.postAction.type) {
+            mutationResponse["post_action"]["type"] === props.api.mutate.postAction.type) {
             switch (props.api.mutate.postAction.after) {
                 // case 'create':
                 //     if (props.pageType === 'create') return addPropsToNode(props.api.mutate.postAction.node, mutationResponse);