@acvl/frontend-components 0.0.27 → 0.0.29

package/dist/cjs/index.js

@@ -25762,8 +25762,7 @@ const typeSwitch = ({ base_object, base_key, response, submitData, useLabel, dat
             }
             else {
                 forEach(object, (value, key2) => {
-                    if (!includes(["id", "transporte.tarifa.cargos_adicionales"], key) &&
-                        isEqual(get(data, `${key}.${key2}`), value))
+                    if (key2 !== "id" && isEqual(get(data, `${key}.${key2}`), value))
                         return;
                     typeSwitch({
                         base_object: value,
@@ -25783,7 +25782,7 @@ const typeSwitch = ({ base_object, base_key, response, submitData, useLabel, dat
             break;
     }
 };
-const jsonForm = ({ submitData, data, useLabel, props }) => {
+const jsonForm = ({ submitData, data, useLabel, props, }) => {
     const response = {};
     forEach(submitData, function (value, key) {
         if (key != "id" && isEqual(get(data, key), value))
@@ -25801,7 +25800,7 @@ const jsonForm = ({ submitData, data, useLabel, props }) => {
     });
     return response;
 };
-const formDataForm = ({ submitData, data, useLabel, props }) => {
+const formDataForm = ({ submitData, data, useLabel, props, }) => {
     const formData = new FormData();
     forEach(submitData, function (value, key) {
         if (key != "id" && isEqual(get(data, key), value))
@@ -27488,7 +27487,7 @@ const editColumn = (props) => {
             width: 80,
             cellClassName: "actions",
             getActions: ({ id, row }) => {
-                const canEdit = get(row, "obj_permissions.edit");
+                const canEdit = get(row, "obj_permissions.edit", true);
                 const isInEditMode = props.rowModesModel[id]?.mode === xDataGrid.GridRowModes.Edit;
                 if (isInEditMode) {
                     return [
@@ -28106,60 +28105,86 @@ const Field = (props) => {
 };
 
 const EditToolbar = (props) => {
-    return (jsxRuntime.jsxs(xDataGrid.Toolbar, { children: [props.pageType != "detail" && (jsxRuntime.jsx(Tooltip, { title: "Crear", children: jsxRuntime.jsx(xDataGrid.ToolbarButton, { onClick: props.handleCreate, children: jsxRuntime.jsx(AddIcon, { fontSize: "small" }) }) })), !!props.selected && (jsxRuntime.jsx(Tooltip, { title: "Borrar", children: jsxRuntime.jsx(xDataGrid.ToolbarButton, { onClick: props.handleDelete, children: jsxRuntime.jsx(DeleteIcon, { fontSize: "small" }) }) }))] }));
+    return (jsxRuntime.jsx(xDataGrid.Toolbar, { children: props.pageType != "detail" && (jsxRuntime.jsx(Tooltip, { title: "Crear", children: jsxRuntime.jsx(xDataGrid.ToolbarButton, { onClick: props.handleCreate, children: jsxRuntime.jsx(AddIcon, { fontSize: "small" }) }) })) }));
 };
 const FieldArrayField = (props) => {
-    const { fields, remove } = reactHookForm.useFieldArray({
+    const detail = React.useMemo(() => props.pageType === "detail", [props.pageType]);
+    const { fields, append, update, remove } = reactHookForm.useFieldArray({
         control: props.form.control,
         name: props.name,
         keyName: "_id",
     });
-    const [drawer, setDrawer] = React.useState({
-        open: false,
-        data: undefined,
-    });
-    const [rowSelectionModel, setRowSelectionModel] = React.useState({
-        type: "include",
-        ids: new Set(),
-    });
+    const [rowModesModel, setRowModesModel] = React.useState({});
     const getIndex = React.useCallback((id) => lodash.findIndex(fields, function (field) {
         return field._id == id;
     }), [fields]);
     const handleCreate = () => {
-        setDrawer({ open: true, data: undefined });
-    };
-    const handleDelete = () => {
-        remove(Array.from(rowSelectionModel.ids).map((id) => getIndex(id)));
+        append(props.defaultValues);
     };
-    const closeDrawer = () => {
-        setDrawer({ open: false, data: undefined });
+    const handleDelete = (id) => {
+        remove(getIndex(id));
     };
-    // const handleSave = () => {
-    //     const index = getIndex(drawer.data?._id);
-    //     closeDrawer();
-    //     if (index > -1) {
-    //         update(index, props.form.watch(`${props.name}.${index}`));
-    //     } else {
-    //         append(props.form.watch(`${props.name}.${index}`));
-    //     }
-    //
-    // }
-    const handleRowClick = (e) => {
-        setDrawer({ open: true, data: e.row });
+    const processRowUpdate = async (newRow, originalRow) => {
+        const original_data = jsonForm({ submitData: originalRow, props: props.parser });
+        const data = jsonForm({ submitData: newRow, props: props.parser });
+        if (lodash.isEqual(data, original_data))
+            return originalRow;
+        const index = getIndex(data._id);
+        update(index, data);
+        return newRow;
     };
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [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, { ...props.dataGridProps, rows: fields, checkboxSelection: props.pageType != "detail", onRowSelectionModelChange: (newRowSelectionModel) => {
-                                setRowSelectionModel(newRowSelectionModel);
-                            }, showToolbar: true, slots: { toolbar: EditToolbar }, slotProps: {
-                                toolbar: {
-                                    selected: rowSelectionModel.ids.size,
-                                    handleCreate: handleCreate,
-                                    handleDelete: handleDelete,
-                                    pageType: props.pageType,
-                                },
-                            }, disableRowSelectionOnClick: true, onRowClick: handleRowClick, getRowId: (row) => row._id }) })] }), jsxRuntime.jsx(MainDrawer, { open: drawer.open, drawerToggle: closeDrawer, title: "Cargo Adicional", children: jsxRuntime.jsx(material.Grid, { size: 12, container: true, children: props.fields.map((field) => {
-                        const fieldName = `${props.name}.${getIndex(drawer.data?._id)}.${field.name}`;
-                        return (jsxRuntime.jsx(Field, { ...field, form: props.form, name: fieldName, fieldData: lodash.get(drawer.data, field.name) }, fieldName));
-                    }) }) })] }));
+    const handleProcessRowUpdateError = () => { };
+    const dataGridProps = mergeSettings({
+        columns: !detail
+            ? [
+                ...editColumn({
+                    displayEdit: true,
+                    rowModesModel,
+                    setRowModesModel,
+                }),
+                {
+                    field: "delete",
+                    type: "actions",
+                    headerName: "Borrar",
+                    renderCell: (params) => (jsxRuntime.jsx(xDataGrid.GridActionsCell, { ...params, children: jsxRuntime.jsx(xDataGrid.GridActionsCellItem, { icon: jsxRuntime.jsx(DeleteIcon, {}), label: "Delete", color: "primary", onClick: () => handleDelete(params.row._id) }) })),
+                },
+            ]
+            : [],
+        rows: fields,
+        disableRowSelectionOnClick: true,
+        disableColumnSelector: true,
+        showToolbar: !detail,
+        slots: { toolbar: EditToolbar },
+        slotProps: {
+            toolbar: {
+                handleCreate: handleCreate,
+                handleDelete: handleDelete,
+                pageType: props.pageType,
+            },
+            baseCheckbox: {
+                size: "small",
+            },
+        },
+        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 === xDataGrid.GridRowEditStartReasons.cellDoubleClick && detail)
+                event.defaultMuiPrevented = true;
+        },
+        onRowEditStop: (params, event) => {
+            if (params.reason === xDataGrid.GridRowEditStopReasons.rowFocusOut) {
+                event.defaultMuiPrevented = true;
+            }
+        },
+    }, props.dataGridProps);
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: 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 }) })] }) }));
 };
 
 const Section = (props) => {
@@ -28406,7 +28431,11 @@ function DetailPage(props) {
     // ==============================|| SUBMIT ||============================== //
     const onSubmitHandler = (submitedData) => {
         const formData = "nativeEvent" in submitedData ? form.getValues() : submitedData;
-        const params = { submitData: formData, data: data, props: props.slotProps?.parser };
+        const params = {
+            submitData: formData,
+            data: data,
+            props: props.slotProps?.parser,
+        };
         const dataToSend = props.edit.useFormData ? formDataForm(params) : jsonForm(params);
         mutation(props.edit.useFormData ? dataToSend : { ...dataToSend, ...props.api.mutate.args })
             .unwrap()
@@ -28432,6 +28461,7 @@ function DetailPage(props) {
             }
         });
     };
+    const onError = (errors) => console.log("Validation Errors:", errors);
     // ==============================|| RENDER SECTIONS ||============================== //
     const renderContent = () => {
         let displayed_sections = -1;
@@ -28497,7 +28527,7 @@ function DetailPage(props) {
         }
     };
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ContentLayout, { button: renderButton(), badge: props.pageType == "detail" &&
-                    badgeInfo && (jsxRuntime.jsx(StatusBadge, { title: badgeInfo["label"], severity: badgeInfo["value"] })), children: jsxRuntime.jsx(LoadingComponent, { height: 0.7, isLoading: isLoading || isFetching, children: jsxRuntime.jsx(reactHookForm.FormProvider, { ...form, children: jsxRuntime.jsx(material.Box, { id: "formulario", component: "form", autoComplete: "off", noValidate: true, onSubmit: form.handleSubmit(onSubmitHandler), width: "100%", position: "relative", children: renderContent() }) }) }) }), renderPostAction()] }));
+                    badgeInfo && (jsxRuntime.jsx(StatusBadge, { title: badgeInfo["label"], severity: badgeInfo["value"] })), children: jsxRuntime.jsx(LoadingComponent, { height: 0.7, isLoading: isLoading || isFetching, children: jsxRuntime.jsx(reactHookForm.FormProvider, { ...form, children: jsxRuntime.jsx(material.Box, { id: "formulario", component: "form", autoComplete: "off", noValidate: true, onSubmit: form.handleSubmit(onSubmitHandler, onError), width: "100%", position: "relative", children: renderContent() }) }) }) }), renderPostAction()] }));
 }
 
 const ListPage = (props) => {