@acvl/frontend-components 0.0.26 → 0.0.28

package/dist/cjs/index.js

@@ -127,8 +127,10 @@ var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 const NormalOrIcon = (props) => {
     const theme = material.useTheme();
     const belowLG = material.useMediaQuery(theme.breakpoints.down("lg"));
-    if ((belowLG && !(props.type == "button")) || props.type == "icon")
-        return (jsxRuntime.jsx(material.Tooltip, { title: props.buttonProps.children, children: jsxRuntime.jsx(material.IconButton, { ...props.buttonProps, children: props.buttonProps.startIcon }) }));
+    if ((belowLG && !(props.type == "button")) || props.type == "icon") {
+        const { startIcon, ...others } = props.buttonProps;
+        return (jsxRuntime.jsx(material.Tooltip, { title: props.buttonProps.children, children: jsxRuntime.jsx(material.IconButton, { ...others, children: startIcon }) }));
+    }
     return jsxRuntime.jsx(material.Button, { ...props.buttonProps });
 };
 
@@ -25760,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,
@@ -25781,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))
@@ -25799,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))
@@ -27365,11 +27366,12 @@ const EditGridWrapper = (props) => {
         }
         catch (e) {
             setErrors((prevState) => immer.produce(prevState, (draft) => {
-                draft[newRow.id] = lodash.get(e, "data");
+                draft[newRow.id] = lodash.get(e, "data.invalid_params");
             }));
             notifications.show("Error actualizando información!", { severity: "error" });
         }
     };
+    const handleProcessRowUpdateError = () => { };
     // ===== || KEYDOWN || ===== //
     const handleKeyPress = React.useCallback((event) => {
         if (props.permission) {
@@ -27450,6 +27452,7 @@ const EditGridWrapper = (props) => {
         rowModesModel: rowModesModel,
         onRowModesModelChange: setRowModesModel,
         processRowUpdate: processRowUpdate,
+        onProcessRowUpdateError: handleProcessRowUpdateError,
         loadingParams: [loadingMutation],
     }, props.dataGridProps);
     const renderEditGrid = () => (jsxRuntime.jsx(core$1.DndContext, { sensors: sensors, collisionDetection: core$1.closestCenter, onDragEnd: handleDragEnd, modifiers: [modifiers.restrictToVerticalAxis, modifiers.restrictToWindowEdges, modifiers.restrictToParentElement], autoScroll: false, children: jsxRuntime.jsx(sortable.SortableContext, { items: rows ? rows.map((row) => row.id.toString()) : [], strategy: sortable.verticalListSortingStrategy, children: props.renderFunction({
@@ -27484,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 [
@@ -27940,7 +27943,7 @@ const MyGridEditSingleSelect = (props) => {
         } }));
 };
 
-const StyledTooltip = material.styled(({ className, ...props }) => (jsxRuntime.jsx(material.Tooltip, { ...props, placement: 'top', classes: { popper: className } })))(({ theme }) => ({
+const StyledTooltip = material.styled(({ className, ...props }) => (jsxRuntime.jsx(material.Tooltip, { ...props, placement: "top", classes: { popper: className } })))(({ theme }) => ({
     [`& .${material.tooltipClasses.tooltip}`]: {
         backgroundColor: theme.palette.error.main,
         color: theme.palette.error.contrastText,
@@ -27950,27 +27953,29 @@ const EditCellWithErrorTooltip = (props) => {
     const { error } = props;
     const renderCell = () => {
         switch (props.colDef.type) {
-            case 'boolean':
+            case "boolean":
                 return jsxRuntime.jsx(xDataGrid.GridEditBooleanCell, { ...props });
-            case 'singleSelect':
+            case "singleSelect":
                 return jsxRuntime.jsx(MyGridEditSingleSelect, { ...props });
             default:
-                return jsxRuntime.jsx(xDataGrid.GridEditInputCell, { ...props, slotProps: {
+                return (jsxRuntime.jsx(xDataGrid.GridEditInputCell, { ...props, slotProps: {
                         root: {
                             onFocus: (e) => {
-                                if (props.field == 'cotizacion__total')
+                                if (props.field == "cotizacion__total")
                                     return e.target.select();
                             },
-                        }
-                    } });
+                        },
+                    } }));
         }
     };
-    return (jsxRuntime.jsx(StyledTooltip, { open: !!error, title: error, children: renderCell() }));
+    return (jsxRuntime.jsx(StyledTooltip, { open: !!error, title: error?.reason.join(", "), children: jsxRuntime.jsx("div", { style: { display: "flex" }, children: renderCell() }) }));
 };
 
 function renderEditCellWithErrorTooltip(params, mutationErrors, path) {
-    const hasError = lodash.get(lodash.get(mutationErrors, params.id), path || params.field);
-    return jsxRuntime.jsx(EditCellWithErrorTooltip, { ...params, error: hasError });
+    const error = lodash.find(lodash.get(mutationErrors, params.id), function (e) {
+        return e.name == (path || params.field);
+    });
+    return jsxRuntime.jsx(EditCellWithErrorTooltip, { ...params, error: error });
 }
 
 const CoverPage = (props) => {
@@ -28100,60 +28105,81 @@ 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;
+        },
+    }, 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) => {
@@ -28400,7 +28426,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()
@@ -28426,6 +28456,7 @@ function DetailPage(props) {
             }
         });
     };
+    const onError = (errors) => console.log("Validation Errors:", errors);
     // ==============================|| RENDER SECTIONS ||============================== //
     const renderContent = () => {
         let displayed_sections = -1;
@@ -28491,7 +28522,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) => {
@@ -28502,7 +28533,6 @@ function SlideTransition(props) {
     return jsxRuntime.jsx(material.Slide, { ...props, direction: "left" });
 }
 const BaseProgressSnack = (props) => {
-    console.log(props);
     const dispatch = reactRedux.useDispatch();
     const handleClose = (e) => {
         if (e?.defaultMuiPrevented)