@acvl/frontend-components 0.0.26 → 0.0.28

package/dist/cjs/types/src/components/v1/forms/utils.d.ts

@@ -13,6 +13,6 @@ export interface JSONFormProps {
     useLabel?: boolean;
     props?: JSONParserProps;
 }
-export declare const jsonForm: ({ submitData, data, useLabel, props }: JSONFormProps) => any;
-export declare const formDataForm: ({ submitData, data, useLabel, props }: JSONFormProps) => FormData;
+export declare const jsonForm: ({ submitData, data, useLabel, props, }: JSONFormProps) => any;
+export declare const formDataForm: ({ submitData, data, useLabel, props, }: JSONFormProps) => FormData;
 export declare const setErrors: (form: any, error: any) => void;

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

@@ -1,10 +1,9 @@
 import { DataGridProps } from "@mui/x-data-grid";
 import { GridProps } from "@mui/material";
-import { FieldProps } from "../Field";
 import { PageType } from "../../../../types";
+import { JSONParserProps } from "../../../../forms";
 declare module "@mui/x-data-grid" {
     interface ToolbarPropsOverrides {
-        selected: number;
         handleCreate: () => void;
         handleDelete: () => void;
         pageType: PageType;
@@ -13,11 +12,14 @@ declare module "@mui/x-data-grid" {
 export interface ArrayFieldProps {
     name: string;
     label: string;
+    defaultValues: {
+        [key: string]: any;
+    };
     form?: any;
-    fields: FieldProps[];
     dataGridProps: DataGridProps;
     gridProps?: GridProps;
     pageType?: PageType;
+    parser?: JSONParserProps;
 }
 declare const FieldArrayField: (props: ArrayFieldProps) => import("react/jsx-runtime").JSX.Element;
 export default FieldArrayField;

package/dist/esm/index.js

@@ -74,7 +74,7 @@ import AddIcon from '@mui/icons-material/Add';
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 import LinearProgress$1 from '@mui/material/LinearProgress';
 import AttachFileIcon from '@mui/icons-material/AttachFile';
-import { useGridApiContext, ToolbarButton, QuickFilter, QuickFilterTrigger, QuickFilterControl, QuickFilterClear, ColumnsPanelTrigger, Toolbar, useGridSelector, gridPaginationSelector, GridRow, GridRowEditStartReasons, GridRowModes, GridActionsCellItem, useGridApiRef, DataGrid, GridRowEditStopReasons, GridEditSingleSelectCell, GridEditInputCell, GridEditBooleanCell } from '@mui/x-data-grid';
+import { useGridApiContext, ToolbarButton, QuickFilter, QuickFilterTrigger, QuickFilterControl, QuickFilterClear, ColumnsPanelTrigger, Toolbar, useGridSelector, gridPaginationSelector, GridRow, GridRowEditStartReasons, GridRowModes, GridActionsCellItem, useGridApiRef, DataGrid, GridRowEditStopReasons, GridEditSingleSelectCell, GridEditInputCell, GridEditBooleanCell, GridActionsCell } from '@mui/x-data-grid';
 import Tooltip$1 from '@mui/material/Tooltip';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import ExpandLessIcon from '@mui/icons-material/ExpandLess';
@@ -107,8 +107,10 @@ import { useDispatch, useSelector } from 'react-redux';
 const NormalOrIcon = (props) => {
     const theme = useTheme();
     const belowLG = useMediaQuery(theme.breakpoints.down("lg"));
-    if ((belowLG && !(props.type == "button")) || props.type == "icon")
-        return (jsx(Tooltip, { title: props.buttonProps.children, children: jsx(IconButton, { ...props.buttonProps, children: props.buttonProps.startIcon }) }));
+    if ((belowLG && !(props.type == "button")) || props.type == "icon") {
+        const { startIcon, ...others } = props.buttonProps;
+        return (jsx(Tooltip, { title: props.buttonProps.children, children: jsx(IconButton, { ...others, children: startIcon }) }));
+    }
     return jsx(Button, { ...props.buttonProps });
 };
 
@@ -25740,8 +25742,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$1(data, `${key}.${key2}`), value))
+                    if (key2 !== "id" && isEqual(get$1(data, `${key}.${key2}`), value))
                         return;
                     typeSwitch({
                         base_object: value,
@@ -25761,7 +25762,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$1(data, key), value))
@@ -25779,7 +25780,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$1(data, key), value))
@@ -27345,11 +27346,12 @@ const EditGridWrapper = (props) => {
         }
         catch (e) {
             setErrors((prevState) => produce(prevState, (draft) => {
-                draft[newRow.id] = get(e, "data");
+                draft[newRow.id] = get(e, "data.invalid_params");
             }));
             notifications.show("Error actualizando información!", { severity: "error" });
         }
     };
+    const handleProcessRowUpdateError = () => { };
     // ===== || KEYDOWN || ===== //
     const handleKeyPress = useCallback((event) => {
         if (props.permission) {
@@ -27430,6 +27432,7 @@ const EditGridWrapper = (props) => {
         rowModesModel: rowModesModel,
         onRowModesModelChange: setRowModesModel,
         processRowUpdate: processRowUpdate,
+        onProcessRowUpdateError: handleProcessRowUpdateError,
         loadingParams: [loadingMutation],
     }, props.dataGridProps);
     const renderEditGrid = () => (jsx(DndContext, { sensors: sensors, collisionDetection: closestCenter, onDragEnd: handleDragEnd, modifiers: [restrictToVerticalAxis, restrictToWindowEdges, restrictToParentElement], autoScroll: false, children: jsx(SortableContext, { items: rows ? rows.map((row) => row.id.toString()) : [], strategy: verticalListSortingStrategy, children: props.renderFunction({
@@ -27464,7 +27467,7 @@ const editColumn = (props) => {
             width: 80,
             cellClassName: "actions",
             getActions: ({ id, row }) => {
-                const canEdit = get$1(row, "obj_permissions.edit");
+                const canEdit = get$1(row, "obj_permissions.edit", true);
                 const isInEditMode = props.rowModesModel[id]?.mode === GridRowModes.Edit;
                 if (isInEditMode) {
                     return [
@@ -27920,7 +27923,7 @@ const MyGridEditSingleSelect = (props) => {
         } }));
 };
 
-const StyledTooltip = styled$1(({ className, ...props }) => (jsx(Tooltip, { ...props, placement: 'top', classes: { popper: className } })))(({ theme }) => ({
+const StyledTooltip = styled$1(({ className, ...props }) => (jsx(Tooltip, { ...props, placement: "top", classes: { popper: className } })))(({ theme }) => ({
     [`& .${tooltipClasses.tooltip}`]: {
         backgroundColor: theme.palette.error.main,
         color: theme.palette.error.contrastText,
@@ -27930,27 +27933,29 @@ const EditCellWithErrorTooltip = (props) => {
     const { error } = props;
     const renderCell = () => {
         switch (props.colDef.type) {
-            case 'boolean':
+            case "boolean":
                 return jsx(GridEditBooleanCell, { ...props });
-            case 'singleSelect':
+            case "singleSelect":
                 return jsx(MyGridEditSingleSelect, { ...props });
             default:
-                return jsx(GridEditInputCell, { ...props, slotProps: {
+                return (jsx(GridEditInputCell, { ...props, slotProps: {
                         root: {
                             onFocus: (e) => {
-                                if (props.field == 'cotizacion__total')
+                                if (props.field == "cotizacion__total")
                                     return e.target.select();
                             },
-                        }
-                    } });
+                        },
+                    } }));
         }
     };
-    return (jsx(StyledTooltip, { open: !!error, title: error, children: renderCell() }));
+    return (jsx(StyledTooltip, { open: !!error, title: error?.reason.join(", "), children: jsx("div", { style: { display: "flex" }, children: renderCell() }) }));
 };
 
 function renderEditCellWithErrorTooltip(params, mutationErrors, path) {
-    const hasError = get(get(mutationErrors, params.id), path || params.field);
-    return jsx(EditCellWithErrorTooltip, { ...params, error: hasError });
+    const error = find(get(mutationErrors, params.id), function (e) {
+        return e.name == (path || params.field);
+    });
+    return jsx(EditCellWithErrorTooltip, { ...params, error: error });
 }
 
 const CoverPage = (props) => {
@@ -28080,60 +28085,81 @@ const Field = (props) => {
 };
 
 const EditToolbar = (props) => {
-    return (jsxs(Toolbar, { children: [props.pageType != "detail" && (jsx(Tooltip$1, { title: "Crear", children: jsx(ToolbarButton, { onClick: props.handleCreate, children: jsx(AddIcon, { fontSize: "small" }) }) })), !!props.selected && (jsx(Tooltip$1, { title: "Borrar", children: jsx(ToolbarButton, { onClick: props.handleDelete, children: jsx(DeleteIcon, { fontSize: "small" }) }) }))] }));
+    return (jsx(Toolbar, { children: props.pageType != "detail" && (jsx(Tooltip$1, { title: "Crear", children: jsx(ToolbarButton, { onClick: props.handleCreate, children: jsx(AddIcon, { fontSize: "small" }) }) })) }));
 };
 const FieldArrayField = (props) => {
-    const { fields, remove } = useFieldArray({
+    const detail = useMemo(() => props.pageType === "detail", [props.pageType]);
+    const { fields, append, update, remove } = useFieldArray({
         control: props.form.control,
         name: props.name,
         keyName: "_id",
     });
-    const [drawer, setDrawer] = useState({
-        open: false,
-        data: undefined,
-    });
-    const [rowSelectionModel, setRowSelectionModel] = useState({
-        type: "include",
-        ids: new Set(),
-    });
+    const [rowModesModel, setRowModesModel] = useState({});
     const getIndex = useCallback((id) => 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 (isEqual$1(data, original_data))
+            return originalRow;
+        const index = getIndex(data._id);
+        update(index, data);
+        return newRow;
     };
-    return (jsxs(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, { ...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 }) })] }), jsx(MainDrawer, { open: drawer.open, drawerToggle: closeDrawer, title: "Cargo Adicional", children: jsx(Grid, { size: 12, container: true, children: props.fields.map((field) => {
-                        const fieldName = `${props.name}.${getIndex(drawer.data?._id)}.${field.name}`;
-                        return (jsx(Field, { ...field, form: props.form, name: fieldName, fieldData: 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) => (jsx(GridActionsCell, { ...params, children: jsx(GridActionsCellItem, { icon: 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 === GridRowEditStartReasons.cellDoubleClick && detail)
+                event.defaultMuiPrevented = true;
+        },
+    }, 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 }) })] }) }));
 };
 
 const Section = (props) => {
@@ -28380,7 +28406,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()
@@ -28406,6 +28436,7 @@ function DetailPage(props) {
             }
         });
     };
+    const onError = (errors) => console.log("Validation Errors:", errors);
     // ==============================|| RENDER SECTIONS ||============================== //
     const renderContent = () => {
         let displayed_sections = -1;
@@ -28471,7 +28502,7 @@ function DetailPage(props) {
         }
     };
     return (jsxs(Fragment, { children: [jsx(ContentLayout, { button: renderButton(), badge: props.pageType == "detail" &&
-                    badgeInfo && (jsx(StatusBadge, { title: badgeInfo["label"], severity: badgeInfo["value"] })), children: jsx(LoadingComponent, { height: 0.7, isLoading: isLoading || isFetching, children: jsx(FormProvider, { ...form, children: jsx(Box, { id: "formulario", component: "form", autoComplete: "off", noValidate: true, onSubmit: form.handleSubmit(onSubmitHandler), width: "100%", position: "relative", children: renderContent() }) }) }) }), renderPostAction()] }));
+                    badgeInfo && (jsx(StatusBadge, { title: badgeInfo["label"], severity: badgeInfo["value"] })), children: jsx(LoadingComponent, { height: 0.7, isLoading: isLoading || isFetching, children: jsx(FormProvider, { ...form, children: jsx(Box, { id: "formulario", component: "form", autoComplete: "off", noValidate: true, onSubmit: form.handleSubmit(onSubmitHandler, onError), width: "100%", position: "relative", children: renderContent() }) }) }) }), renderPostAction()] }));
 }
 
 const ListPage = (props) => {
@@ -28482,7 +28513,6 @@ function SlideTransition(props) {
     return jsx(Slide, { ...props, direction: "left" });
 }
 const BaseProgressSnack = (props) => {
-    console.log(props);
     const dispatch = useDispatch();
     const handleClose = (e) => {
         if (e?.defaultMuiPrevented)