@acvl/frontend-components 0.0.34 → 0.0.36

package/dist/cjs/index.js

@@ -69,8 +69,8 @@ var iconsMaterial = require('@mui/icons-material');
 var merge$1 = require('lodash/merge');
 var UploadFileIcon = require('@mui/icons-material/UploadFile');
 var ClearIcon$1 = require('@mui/icons-material/Clear');
-var SaveIcon = require('@mui/icons-material/Save');
 var AddIcon = require('@mui/icons-material/Add');
+var SaveIcon = require('@mui/icons-material/Save');
 var KeyboardArrowDownIcon = require('@mui/icons-material/KeyboardArrowDown');
 var LinearProgress = require('@mui/material/LinearProgress');
 var AttachFileIcon = require('@mui/icons-material/AttachFile');
@@ -25514,8 +25514,8 @@ const useHasPermission = (path) => {
 };
 
 const APIContext = React.createContext(null);
-const APIProvider = ({ children, hooks }) => {
-    return (jsxRuntime.jsx(APIContext.Provider, { value: hooks, children: children }));
+const APIProvider = ({ children, hooks, }) => {
+    return jsxRuntime.jsx(APIContext.Provider, { value: hooks, children: children });
 };
 
 const useAPI = () => {
@@ -25777,7 +25777,7 @@ const typeSwitch = ({ base_object, base_key, response, submitData, useLabel, dat
             break;
     }
 };
-const formParser = ({ type, submitData, data, useLabel, props, }) => {
+const formParser = ({ type, submitData, data, useLabel, props }) => {
     const t = type || "json";
     const response = t === "json" ? {} : new FormData();
     Object.entries(submitData).forEach(([key, value]) => {
@@ -25798,9 +25798,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(", ") });
         });
     }
 };
@@ -26534,6 +26552,161 @@ const ControlledSlider = (props) => {
         } }));
 };
 
+const CREATE_OPTION = { value: "__create__", label: "" };
+const CrudDropdown = (props) => {
+    const { name, label, control, fieldProps, extraProps: { queryArgs, crudExtraArgs = {}, labelField = "nombre", disableHT }, } = props;
+    const [inputValue, setInputValue] = React.useState("");
+    const [options, setOptions] = React.useState([]);
+    const [open, setOpen] = React.useState(false);
+    const [createOpen, setCreateOpen] = React.useState(false);
+    const [editOpen, setEditOpen] = React.useState(false);
+    const [deleteOpen, setDeleteOpen] = React.useState(false);
+    const [activeOption, setActiveOption] = React.useState(null);
+    const [dialogInput, setDialogInput] = React.useState("");
+    const formValueRef = React.useRef(null);
+    const formOnChangeRef = React.useRef(() => { });
+    const api = useAPI();
+    const [getOpciones, { isLoading, isFetching, isError }] = api.useLazyGetComoOpcionesQuery();
+    const [genericCrud, { isLoading: isMutating }] = api.useGenericCrudMutation();
+    const notifications = core.useNotifications();
+    const args = React.useMemo(() => ({
+        ...queryArgs,
+        filters: { ...queryArgs.filters, nombre__icontains: inputValue },
+    }), [inputValue, queryArgs]);
+    const fetchOptions = React.useCallback(lodash.debounce((fetchArgs, cb) => {
+        setOptions([]);
+        getOpciones(fetchArgs)
+            .unwrap()
+            .then(cb)
+            .catch(() => { });
+    }, 500), []);
+    const refreshOptions = () => {
+        getOpciones(args, false)
+            .unwrap()
+            .then((fresh) => setOptions(fresh))
+            .catch(() => { });
+    };
+    React.useEffect(() => {
+        if (open)
+            fetchOptions(args, setOptions);
+    }, [args, fetchOptions, open]);
+    const handleCreate = () => {
+        genericCrud({
+            endpoint: props.extraProps.queryArgs.endpoint,
+            method: "POST",
+            body: { [labelField]: dialogInput, ...crudExtraArgs },
+        })
+            .unwrap()
+            .then(() => {
+            notifications.show("Opción creada.", { severity: "success" });
+            setCreateOpen(false);
+            setDialogInput("");
+            refreshOptions();
+        })
+            .catch(() => notifications.show("Error al crear.", { severity: "error" }));
+    };
+    const handleEdit = () => {
+        if (!activeOption)
+            return;
+        genericCrud({
+            endpoint: props.extraProps.queryArgs.endpoint,
+            method: "PATCH",
+            id: activeOption.value,
+            body: { [labelField]: dialogInput, ...crudExtraArgs },
+        })
+            .unwrap()
+            .then(() => {
+            if (formValueRef.current?.value === activeOption.value) {
+                formOnChangeRef.current({ value: activeOption.value, label: dialogInput });
+            }
+            notifications.show("Opción actualizada.", { severity: "success" });
+            setEditOpen(false);
+            setDialogInput("");
+            setActiveOption(null);
+            refreshOptions();
+        })
+            .catch(() => notifications.show("Error al actualizar.", { severity: "error" }));
+    };
+    const handleDelete = () => {
+        if (!activeOption)
+            return;
+        genericCrud({
+            endpoint: props.extraProps.queryArgs.endpoint,
+            method: "DELETE",
+            id: activeOption.value,
+        })
+            .unwrap()
+            .then(() => {
+            if (formValueRef.current?.value === activeOption.value) {
+                formOnChangeRef.current(null);
+            }
+            notifications.show("Opción eliminada.", { severity: "success" });
+            setDeleteOpen(false);
+            setActiveOption(null);
+            refreshOptions();
+        })
+            .catch(() => notifications.show("Error al eliminar.", { severity: "error" }));
+    };
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(reactHookForm.Controller, { name: name, control: control, render: ({ field: { value, onChange }, fieldState: { error } }) => {
+                    formValueRef.current = value;
+                    formOnChangeRef.current = onChange;
+                    const handleChange = (_event, newValue) => {
+                        if (newValue?.value === "__create__") {
+                            setDialogInput("");
+                            setCreateOpen(true);
+                            return;
+                        }
+                        onChange(newValue);
+                    };
+                    return (jsxRuntime.jsx(material.Autocomplete, { id: name, open: open, onOpen: () => setOpen(true), onClose: () => setOpen(false), options: options, loading: isLoading || isFetching, value: value, onChange: handleChange, inputValue: inputValue, onInputChange: (_event, newInputValue) => setInputValue(newInputValue), isOptionEqualToValue: (option, val) => option.value === val.value, filterOptions: (x) => [CREATE_OPTION, ...x], getOptionLabel: (option) => option.value === "__create__" ? "" : option.label || "", fullWidth: true, size: "small", disabled: isError, renderOption: (optionProps, option) => {
+                            const { key, ...rest } = optionProps;
+                            if (option.value === "__create__") {
+                                return (jsxRuntime.jsxs(material.Box, { component: "li", ...rest, onClick: () => {
+                                        setDialogInput("");
+                                        setCreateOpen(true);
+                                    }, sx: {
+                                        justifyContent: "center !important",
+                                        color: "primary.main",
+                                        borderBottom: "1px solid",
+                                        borderColor: "divider",
+                                        py: "6px !important",
+                                        gap: 0.5,
+                                    }, children: [jsxRuntime.jsx(AddIcon, { fontSize: "small" }), jsxRuntime.jsx(material.Typography, { variant: "body2", children: "Agregar nuevo" })] }, key));
+                            }
+                            return (jsxRuntime.jsxs(material.Box, { component: "li", ...rest, sx: {
+                                    display: "flex",
+                                    alignItems: "center",
+                                    pr: "4px !important",
+                                }, children: [jsxRuntime.jsx(material.Box, { sx: {
+                                            flex: 1,
+                                            overflow: "hidden",
+                                            textOverflow: "ellipsis",
+                                        }, children: option.label }), jsxRuntime.jsx(material.IconButton, { size: "small", tabIndex: -1, onMouseDown: (e) => {
+                                            e.stopPropagation();
+                                            e.preventDefault();
+                                        }, onClick: (e) => {
+                                            e.stopPropagation();
+                                            setActiveOption(option);
+                                            setDialogInput(option.label);
+                                            setEditOpen(true);
+                                        }, children: jsxRuntime.jsx(EditIcon, { fontSize: "inherit" }) }), jsxRuntime.jsx(material.IconButton, { size: "small", tabIndex: -1, onMouseDown: (e) => {
+                                            e.stopPropagation();
+                                            e.preventDefault();
+                                        }, onClick: (e) => {
+                                            e.stopPropagation();
+                                            setActiveOption(option);
+                                            setDeleteOpen(true);
+                                        }, children: jsxRuntime.jsx(DeleteIcon, { fontSize: "inherit" }) })] }, key));
+                        }, renderInput: (params) => (jsxRuntime.jsx(material.TextField, { ...params, label: label, error: !!error, helperText: error ? error.message : disableHT ? "" : " ", slotProps: {
+                                input: {
+                                    ...params.InputProps,
+                                    endAdornment: (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [isLoading || isFetching ? (jsxRuntime.jsx(material.CircularProgress, { color: "inherit", size: 20 })) : null, params.InputProps.endAdornment] })),
+                                },
+                            } })), ...fieldProps }));
+                } }), jsxRuntime.jsxs(material.Dialog, { open: createOpen, onClose: () => setCreateOpen(false), maxWidth: "xs", fullWidth: true, children: [jsxRuntime.jsx(material.DialogTitle, { children: "Agregar opci\u00F3n" }), jsxRuntime.jsx(material.DialogContent, { children: jsxRuntime.jsx(material.TextField, { autoFocus: true, fullWidth: true, size: "small", label: label, value: dialogInput, onChange: (e) => setDialogInput(e.target.value), onKeyDown: (e) => e.key === "Enter" && !!dialogInput && handleCreate(), sx: { mt: 1 } }) }), jsxRuntime.jsxs(material.DialogActions, { children: [jsxRuntime.jsx(material.Button, { color: "error", onClick: () => setCreateOpen(false), children: "Cancelar" }), jsxRuntime.jsx(material.Button, { color: "secondary", disabled: !dialogInput, loading: isMutating, onClick: handleCreate, children: "Guardar" })] })] }), jsxRuntime.jsxs(material.Dialog, { open: editOpen, onClose: () => setEditOpen(false), maxWidth: "xs", fullWidth: true, children: [jsxRuntime.jsx(material.DialogTitle, { children: "Editar opci\u00F3n" }), jsxRuntime.jsx(material.DialogContent, { children: jsxRuntime.jsx(material.TextField, { autoFocus: true, fullWidth: true, size: "small", label: label, value: dialogInput, onChange: (e) => setDialogInput(e.target.value), onKeyDown: (e) => e.key === "Enter" && !!dialogInput && handleEdit(), sx: { mt: 1 } }) }), jsxRuntime.jsxs(material.DialogActions, { children: [jsxRuntime.jsx(material.Button, { color: "error", onClick: () => setEditOpen(false), children: "Cancelar" }), jsxRuntime.jsx(material.Button, { color: "secondary", disabled: !dialogInput, loading: isMutating, onClick: handleEdit, children: "Guardar" })] })] }), jsxRuntime.jsxs(material.Dialog, { open: deleteOpen, onClose: () => setDeleteOpen(false), maxWidth: "xs", fullWidth: true, children: [jsxRuntime.jsx(material.DialogTitle, { children: "Eliminar opci\u00F3n" }), jsxRuntime.jsx(material.DialogContent, { children: jsxRuntime.jsxs(material.Typography, { children: ["\u00BFEliminar ", jsxRuntime.jsx("strong", { children: activeOption?.label }), "?"] }) }), jsxRuntime.jsxs(material.DialogActions, { children: [jsxRuntime.jsx(material.Button, { onClick: () => setDeleteOpen(false), children: "Cancelar" }), jsxRuntime.jsx(material.Button, { color: "error", loading: isMutating, onClick: handleDelete, children: "Eliminar" })] })] })] }));
+};
+CrudDropdown.displayName = "CrudDropdown";
+
 const DeleteConfirmationDialog = (props) => {
     const notifications = core.useNotifications();
     const { pathname } = reactRouterDom.useLocation();
@@ -27657,7 +27830,12 @@ const CreateGridWrapper = (props) => {
                         }), jsxRuntime.jsxs(MenuItem, { onClick: () => {
                             navigate(props.navigation ? `${props.navigation}crear` : `crear`);
                             handleClose();
-                        }, disableRipple: true, children: [jsxRuntime.jsx(material.ListItemIcon, { children: jsxRuntime.jsx(DrawIcon, {}) }), "Manual"] })] }), props.csv_upload?.enable && (jsxRuntime.jsx(CSVUpload, { open: csv.open, drawerToggle: handleToggleClose, data: csv.data })), props.renderFunction({ dataGridProps: createGridProps })] }));
+                        }, disableRipple: true, children: [jsxRuntime.jsx(material.ListItemIcon, { children: jsxRuntime.jsx(DrawIcon, {}) }), "Manual"] }), props.extraOptions?.map((option, index) => {
+                        return (jsxRuntime.jsxs(MenuItem, { onClick: () => {
+                                option.onClick();
+                                handleClose();
+                            }, disableRipple: true, children: [jsxRuntime.jsx(material.ListItemIcon, { children: option.icon }), option.title] }, index));
+                    })] }), props.csv_upload?.enable && (jsxRuntime.jsx(CSVUpload, { open: csv.open, drawerToggle: handleToggleClose, data: csv.data })), props.renderFunction({ dataGridProps: createGridProps })] }));
 };
 
 const Base = (props) => {
@@ -28109,12 +28287,11 @@ const EditToolbar = (props) => {
 const FieldArrayField = (props) => {
     const detail = React.useMemo(() => props.pageType === "detail", [props.pageType]);
     const { fields, append, remove, update } = reactHookForm.useFieldArray({
-        control: props.form.control,
+        control: props.form?.control,
         name: props.name,
         keyName: "_id",
     });
-    //   console.log(props.form?.watch(props.name));
-    //   console.log(fields);
+    const errors = props.form.formState.errors;
     const getIndex = React.useCallback((id) => lodash.findIndex(fields, function (field) {
         return field._id == id;
     }), [fields]);
@@ -28170,9 +28347,18 @@ const FieldArrayField = (props) => {
             },
         },
         getRowId: (row) => row._id,
-        getRowClassName: (params) => params.indexRelativeToCurrentPage % 2 === 0 ? "even" : "odd",
+        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 == "edit" ? handleRowClick : undefined,
+        onRowClick: props.pageType != "detail" ? handleRowClick : undefined,
     }, props.dataGridProps);
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(MainDrawer, { open: drawer.open, drawerToggle: handleCancel, title: "Trailer", slots: {
                     button: (jsxRuntime.jsx(SaveCancelButton, { slotProps: {
@@ -28730,67 +28916,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: colors.red[100],
+                    },
                     [`&.even`]: {
                         backgroundColor: colors.grey[50],
                     },
-                    '&:hover': {
+                    "&:hover": {
                         backgroundColor: material.alpha(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",
                     },
                 },
-            }
+            },
         },
     };
 }
@@ -28855,6 +29044,7 @@ exports.ControlledToggleButtons = ControlledToggleButtons;
 exports.CoverPage = CoverPage;
 exports.CreateButtonBase = CreateButtonBase;
 exports.CreateButtonWithMenuOptions = CreateButtonWithMenuOptions;
+exports.CrudDropdown = CrudDropdown;
 exports.DeleteButton = DeleteButton;
 exports.DeleteConfirmationDialog = DeleteConfirmationDialog;
 exports.DetailPage = DetailPage;