@acvl/frontend-components 0.0.33 → 0.0.35

package/dist/cjs/types/src/components/v1/drawers/MainDrawer/index.d.ts

@@ -1,6 +1,6 @@
 import { DrawerProps } from "@mui/material";
 import React, { ReactNode } from "react";
-interface MainDrawerProps {
+export interface MainDrawerProps {
     open: boolean;
     drawerToggle: () => void;
     title: string;

package/dist/cjs/types/src/components/v1/layout/pages/DetailPage/FieldArrayField/index.d.ts

@@ -2,10 +2,11 @@ import { DataGridProps } from "@mui/x-data-grid";
 import { GridProps } from "@mui/material";
 import { PageType } from "../../../../types";
 import { JSONParserProps } from "../../../../forms";
+import { FieldProps } from "../Field";
+import { MainDrawerProps } from "../../../../drawers/MainDrawer";
 declare module "@mui/x-data-grid" {
     interface ToolbarPropsOverrides {
-        handleCreate: () => void;
-        handleDelete: () => void;
+        handleClick: () => void;
         pageType: PageType;
     }
 }
@@ -20,6 +21,10 @@ export interface ArrayFieldProps {
     gridProps?: GridProps;
     pageType?: PageType;
     parser?: JSONParserProps;
+    fields: FieldProps[];
+    slotProps?: {
+        drawer?: Partial<MainDrawerProps>;
+    };
 }
 declare const FieldArrayField: (props: ArrayFieldProps) => import("react/jsx-runtime").JSX.Element;
 export default FieldArrayField;

package/dist/cjs/types/src/components/v1/theme/compStyleOverride.d.ts

@@ -1,6 +1,6 @@
 /**
  * Cambia el diseño default de ciertos componentes de Material UI
-**/
+ **/
 export default function componentStyleOverrides(theme: any): {
     MuiAlert: {
         defaultProps: {
@@ -10,12 +10,12 @@ export default function componentStyleOverrides(theme: any): {
     MuiListItemButton: {
         styleOverrides: {
             root: {
-                '&:hover': {
+                "&:hover": {
                     backgroundColor: string;
-                    '& .MuiTypography-root': {
+                    "& .MuiTypography-root": {
                         color: string;
                     };
-                    '& .MuiSvgIcon-root': {
+                    "& .MuiSvgIcon-root": {
                         color: string;
                     };
                 };
@@ -25,35 +25,38 @@ export default function componentStyleOverrides(theme: any): {
     MuiDataGrid: {
         styleOverrides: {
             columnHeader: {
-                '& .MuiDataGrid-columnHeaderTitle': {
+                "& .MuiDataGrid-columnHeaderTitle": {
                     fontWeight: string;
                 };
-                '&:focus': {
+                "&:focus": {
                     outline: string;
                 };
             };
             row: {
+                "&.row-error": {
+                    backgroundColor: "#ffcdd2";
+                };
                 "&.even": {
                     backgroundColor: "#fafafa";
                 };
-                '&:hover': {
+                "&:hover": {
                     backgroundColor: string;
-                    '@media (hover: none)': {
+                    "@media (hover: none)": {
                         backgroundColor: string;
                     };
                 };
             };
             cell: {
-                '& .MuiOutlinedInput-notchedOutline': {
+                "& .MuiOutlinedInput-notchedOutline": {
                     border: string;
                 };
-                '&.MuiDataGrid-cell--editing': {
+                "&.MuiDataGrid-cell--editing": {
                     backgroundColor: string;
-                    '& .MuiInputBase-root': {
+                    "& .MuiInputBase-root": {
                         height: string;
                     };
                 };
-                '& .Mui-error': {
+                "& .Mui-error": {
                     backgroundColor: string;
                     color: string;
                     fontWeight: string;

package/dist/esm/index.js

@@ -25673,14 +25673,14 @@ const typeSwitch = ({ base_object, base_key, response, submitData, useLabel, dat
             setValue(formType, response, key, object);
             break;
         case "object":
-            if (object === null || isEmpty(object)) {
+            if (object instanceof File) {
+                setValue(formType, response, key, object);
+            }
+            else if (object === null || isEmpty(object)) {
                 if (key.includes("after") || key.includes("before"))
                     setValue(formType, response, key, "");
                 else
-                    setValue(formType, response, key, object);
-            }
-            else if (object instanceof File) {
-                setValue(formType, response, key, object);
+                    setValue(formType, response, key, formType == "json" ? object : "");
             }
             else if (dayjs.isDayjs(object)) {
                 setValue(formType, response, key, object.format(get$1(props, `${key}.format`, "YYYY-MM-DD")));
@@ -25778,9 +25778,27 @@ const formParser = ({ type, submitData, data, useLabel, props }) => {
 };
 // ==============================|| ERRORS ||============================== //
 const setErrors = (form, error) => {
+    const iterateDeep = (obj) => {
+        if (Array.isArray(obj.reason)) {
+            if (obj.reason.every((item) => typeof item === "object" && item !== null && !Array.isArray(item))) {
+                obj.reason.forEach((obj2, index) => {
+                    Object.entries(obj2).forEach(([key3, val3]) => {
+                        form.setError(`${obj.name}.${index}.${key3}`, { message: val3.join(", ") });
+                    });
+                });
+            }
+            else {
+                form.setError(obj.name, { message: obj.reason.join(", ") });
+            }
+        }
+        else {
+            form.setError(obj.name, { message: obj.reason });
+        }
+    };
     if ("invalid_params" in error.data) {
         Object.values(error.data.invalid_params).forEach((entry) => {
-            form.setError(entry.name, { message: entry.reason.join(", ") });
+            iterateDeep(entry);
+            // form.setError(entry.name, { message: entry.reason.join(", ") });
         });
     }
 };
@@ -28084,43 +28102,48 @@ const Field = (props) => {
 };
 
 const EditToolbar = (props) => {
-    return (jsx(Toolbar, { children: props.pageType != "detail" && (jsx(Tooltip$1, { title: "Crear", children: jsx(ToolbarButton, { onClick: props.handleCreate, children: jsx(AddIcon, { fontSize: "small" }) }) })) }));
+    return (jsx(Toolbar, { children: props.pageType != "detail" && (jsx(Tooltip$1, { title: "Crear", children: jsx(ToolbarButton, { onClick: props.handleClick, children: jsx(AddIcon, { fontSize: "small" }) }) })) }));
 };
 const FieldArrayField = (props) => {
     const detail = useMemo(() => props.pageType === "detail", [props.pageType]);
-    const { fields, append, update, remove } = useFieldArray({
-        control: props.form.control,
+    const { fields, append, remove, update } = useFieldArray({
+        control: props.form?.control,
         name: props.name,
         keyName: "_id",
     });
-    const [rowModesModel, setRowModesModel] = useState({});
+    const errors = props.form.formState.errors;
     const getIndex = useCallback((id) => findIndex(fields, function (field) {
         return field._id == id;
     }), [fields]);
+    const [drawer, setDrawer] = useState({
+        index: 0,
+        open: false,
+    });
     const handleCreate = () => {
         append(props.defaultValues);
+        setDrawer({ index: fields.length, open: true });
+    };
+    const handleRowClick = (params) => {
+        const index = getIndex(params.id);
+        setDrawer({ index, open: true });
+    };
+    const handleCloseDrawer = () => {
+        setDrawer((prev) => ({ ...prev, open: false }));
+    };
+    const handleCancel = () => {
+        update(drawer.index, fields[drawer.index]);
+        handleCloseDrawer();
+    };
+    const handleSave = () => {
+        update(drawer.index, props.form.watch(`${props.name}.${drawer.index}`));
+        handleCloseDrawer();
     };
     const handleDelete = (id) => {
         remove(getIndex(id));
     };
-    const processRowUpdate = async (newRow, originalRow) => {
-        const original_data = formParser({ submitData: originalRow, props: props.parser });
-        const data = formParser({ submitData: newRow, props: props.parser });
-        if (isEqual$1(data, original_data))
-            return originalRow;
-        const index = getIndex(data._id);
-        update(index, data);
-        return newRow;
-    };
-    const handleProcessRowUpdateError = () => { };
     const dataGridProps = mergeSettings({
         columns: !detail
             ? [
-                ...editColumn({
-                    displayEdit: true,
-                    rowModesModel,
-                    setRowModesModel,
-                }),
                 {
                     field: "delete",
                     type: "actions",
@@ -28136,8 +28159,7 @@ const FieldArrayField = (props) => {
         slots: { toolbar: EditToolbar },
         slotProps: {
             toolbar: {
-                handleCreate: handleCreate,
-                handleDelete: handleDelete,
+                handleClick: handleCreate,
                 pageType: props.pageType,
             },
             baseCheckbox: {
@@ -28145,25 +28167,32 @@ const FieldArrayField = (props) => {
             },
         },
         getRowId: (row) => row._id,
-        getRowClassName: (params) => params.indexRelativeToCurrentPage % 2 === 0 ? "even" : "odd",
-        density: "compact",
-        onRowClick: undefined,
-        editMode: "row",
-        rowModesModel: rowModesModel,
-        onRowModesModelChange: setRowModesModel,
-        processRowUpdate: processRowUpdate,
-        onProcessRowUpdateError: handleProcessRowUpdateError,
-        onRowEditStart: ({ reason }, event) => {
-            if (reason === GridRowEditStartReasons.cellDoubleClick && detail)
-                event.defaultMuiPrevented = true;
-        },
-        onRowEditStop: (params, event) => {
-            if (params.reason === GridRowEditStopReasons.rowFocusOut) {
-                event.defaultMuiPrevented = true;
-            }
+        getRowClassName: (params) => {
+            const hasError = !!(errors &&
+                props.name in errors &&
+                errors[props.name][getIndex(params.row._id)]);
+            return hasError
+                ? "row-error"
+                : params.indexRelativeToCurrentPage % 2 === 0
+                    ? "even"
+                    : "odd";
         },
+        density: "compact",
+        onRowClick: props.pageType != "detail" ? handleRowClick : undefined,
     }, props.dataGridProps);
-    return (jsx(Fragment, { children: jsxs(Grid, { rowSpacing: 1, container: true, size: "grow", direction: "column", ...props.gridProps, children: [jsx(Grid, { size: 12, children: jsx(Typography$1, { variant: "body1", fontWeight: "bold", children: props.label }) }), jsx(Grid, { size: 12, children: jsx(DataGrid, { ...dataGridProps }) })] }) }));
+    return (jsxs(Fragment, { children: [jsx(MainDrawer, { open: drawer.open, drawerToggle: handleCancel, title: "Trailer", slots: {
+                    button: (jsx(SaveCancelButton, { slotProps: {
+                            saveBtn: { onClick: handleSave, type: "button" },
+                            cancelBtn: { onClick: handleCancel },
+                        } })),
+                }, ...props.slotProps?.drawer, children: jsx(Grid, { container: true, size: 12, children: props.fields.map((field, index) => {
+                        return (jsxs(Grid, { rowSpacing: 1, container: true, size: "grow", direction: "column", ...field.gridProps, children: [jsx(Grid, { size: 12, children: jsx(Typography$1, { variant: "body1", fontWeight: "bold", children: field.label }) }), jsx(Grid, { size: 12, children: field.type({
+                                        name: `${props.name}.${drawer.index}.${field.name}`,
+                                        control: props.form.control,
+                                        fieldProps: field.fieldProps,
+                                        extraProps: field.extraProps,
+                                    }) })] }, `grid-${index}`));
+                    }) }) }), jsxs(Grid, { rowSpacing: 1, container: true, size: "grow", direction: "column", ...props.gridProps, children: [jsx(Grid, { size: 12, children: jsx(Typography$1, { variant: "body1", fontWeight: "bold", children: props.label }) }), jsx(Grid, { size: 12, children: jsx(DataGrid, { ...dataGridProps }) })] })] }));
 };
 
 const Section = (props) => {
@@ -28396,7 +28425,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);
@@ -28406,7 +28435,8 @@ 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 jsx(NotAllowed, {});
     if (fetchError && fetchError.originalStatus == 404)
         return jsx(NotFound, {});
@@ -28420,7 +28450,9 @@ 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)
@@ -28452,7 +28484,9 @@ function DetailPage(props) {
                     if (!section.display)
                         return null;
                     if (typeof section.display == "object") {
-                        const validateAgainst = form.watch(section.display.field)?.toString();
+                        const validateAgainst = form
+                            .watch(section.display.field)
+                            ?.toString();
                         if (!section.display.method(validateAgainst, section.display.value))
                             return null;
                     }
@@ -28464,7 +28498,8 @@ 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);
@@ -28701,67 +28736,70 @@ function themeTypography() {
 // ==============================|| PERSONALIZADO DE COMPONENTES DE MUI ||============================== //
 /**
  * Cambia el diseño default de ciertos componentes de Material UI
-**/
+ **/
 function componentStyleOverrides(theme) {
     return {
         MuiAlert: {
             defaultProps: {
-                variant: 'filled'
+                variant: "filled",
             },
         },
         MuiListItemButton: {
             styleOverrides: {
                 root: {
-                    '&:hover': {
+                    "&:hover": {
                         backgroundColor: `${theme.palette.primary.main} !important`,
-                        '& .MuiTypography-root': {
-                            color: 'white !important',
+                        "& .MuiTypography-root": {
+                            color: "white !important",
                         },
-                        '& .MuiSvgIcon-root': {
-                            color: 'white !important'
-                        }
-                    }
-                }
-            }
+                        "& .MuiSvgIcon-root": {
+                            color: "white !important",
+                        },
+                    },
+                },
+            },
         },
         MuiDataGrid: {
             styleOverrides: {
                 columnHeader: {
-                    '& .MuiDataGrid-columnHeaderTitle': {
-                        fontWeight: 'bold'
+                    "& .MuiDataGrid-columnHeaderTitle": {
+                        fontWeight: "bold",
                     },
-                    '&:focus': {
-                        outline: 'none',
+                    "&:focus": {
+                        outline: "none",
                     },
                 },
                 row: {
+                    [`&.row-error`]: {
+                        backgroundColor: red[100],
+                    },
                     [`&.even`]: {
                         backgroundColor: grey[50],
                     },
-                    '&:hover': {
+                    "&:hover": {
                         backgroundColor: alpha$1(theme.palette.primary.main, 0.2),
-                        '@media (hover: none)': {
-                            backgroundColor: 'transparent',
+                        "@media (hover: none)": {
+                            backgroundColor: "transparent",
                         },
-                    }
+                    },
                 },
                 cell: {
-                    '& .MuiOutlinedInput-notchedOutline': {
-                        border: 'none',
+                    "& .MuiOutlinedInput-notchedOutline": {
+                        border: "none",
                     },
-                    '&.MuiDataGrid-cell--editing': {
-                        backgroundColor: 'rgb(217 243 190)',
-                        '& .MuiInputBase-root': {
-                            height: '100%',
+                    "&.MuiDataGrid-cell--editing": {
+                        backgroundColor: "rgb(217 243 190)",
+                        "& .MuiInputBase-root": {
+                            height: "100%",
                         },
                     },
-                    '& .Mui-error': {
-                        backgroundColor: 'rgba(234,27,43,0.2)',
-                        color: '#ef1a2b',
-                        fontWeight: 'bold',
+                    "& .Mui-error": {
+                        backgroundColor: "rgba(234,27,43,0.2)",
+                        color: "#ef1a2b",
+                        fontWeight: "bold",
                     },
                 },
-            }
+            },
         },
     };
 }