trithuc-mvc-react 1.6.13 → 1.7.0

package/components/DataManagement/DataTable.jsx

@@ -11,16 +11,26 @@ import { useConfirm } from "material-ui-confirm";
 
 import { TableRowRender } from "./TableRowRender";
 import TableToolbar from "./TableToolbar";
-import { useDataTable, usePermission } from "./hooks";
-
+import { useDataTable } from "./hooks";
+import { usePermission } from "../../hooks";
 const DataTable = () => {
-  const { tableName, selectedField, columns, dataSearch, setOpenEditorDialog, setSelectedEditItem, setOpenViewDialog, onEditClick } = useDataTable();
-  const { setPermission, Permission } = usePermission();
+  const {
+    tableName,
+    selectedField,
+    columns,
+    dataSearch,
+    setOpenEditorDialog,
+    setSelectedEditItem,
+    setOpenViewDialog,
+    onEditClick
+  } = useDataTable();
+  const { set: setPermission, permission } = usePermission(tableName);
   const queryClient = useQueryClient();
   const confirm = useConfirm();
   const [selected, setSelected] = useState([]);
   const [page, setPage] = useState(0);
   const [rowsPerPage, setRowsPerPage] = useState(5);
+
   const { data, isLoading } = useQuery({
     queryKey: [tableName, page, rowsPerPage, dataSearch],
     queryFn: () =>
@@ -34,7 +44,7 @@ const DataTable = () => {
     onSuccess: ({ PermissionModel, status }) => {
       if (status) {
         // setPermission(PermissionModel);
-        console.log("LOAD LAI PermissionModel");
+        // console.log("LOAD LAI PermissionModel");
       }
     }
   });
@@ -80,7 +90,7 @@ const DataTable = () => {
           tableName
         });
       })
-      .catch(() => { });
+      .catch(() => {});
   };
   const handleChangeStatus = (Id) => {
     changeStatusMutation.mutate({
@@ -92,7 +102,6 @@ const DataTable = () => {
     setOpenEditorDialog(true);
     setSelectedEditItem(item);
     onEditClick(item);
-
   };
   const handlViewDetail = (item) => {
     setOpenViewDialog(true);
@@ -111,7 +120,7 @@ const DataTable = () => {
   useEffect(() => {
     let PermissionModel = data?.PermissionModel;
     PermissionModel && setPermission(PermissionModel);
-  }, [rows])
+  }, [rows]);
 
   const handleChangePage = (event, newPage) => {
     setPage(newPage);
@@ -153,7 +162,7 @@ const DataTable = () => {
           ids: selected
         });
       })
-      .catch(() => { });
+      .catch(() => {});
   };
   const theme = useTheme();
   const downXL = useMediaQuery(theme.breakpoints.down("xl"));

package/components/DataManagement/EditorDialog.jsx

@@ -11,7 +11,8 @@ import { useEffect, useRef, useState } from "react";
 import PropTypes from "prop-types";
 
 import EditorForm from "./EditorForm";
-import { usePermission } from "./hooks";
+import { usePermission } from "../../hooks";
+import { useDataTable } from "./hooks";
 EditorDialog.propTypes = {
   open: PropTypes.bool,
   onClose: PropTypes.func,
@@ -19,7 +20,8 @@ EditorDialog.propTypes = {
 };
 function EditorDialog({ open, onClose = () => {}, defaultValues = {}, fields = [] }) {
   const [isDisableBtnSave, setIsDisableBtnSave] = useState(false);
-  const { canSave } = usePermission();
+  const { tableName } = useDataTable();
+  const { canSave } = usePermission(tableName);
 
   useEffect(() => {}, [defaultValues]);
 
@@ -31,7 +33,7 @@ function EditorDialog({ open, onClose = () => {}, defaultValues = {}, fields = [
   };
   const submitRef = useRef();
   return (
-    <Dialog open={open} onClose={onClose} maxWidth="md" fullWidth={true} scroll={'body'}>
+    <Dialog open={open} onClose={onClose} maxWidth="md" fullWidth={true} scroll={"body"}>
       <DialogTitle>
         {defaultValues?.Id ? "Cập nhật" : "Thêm mới"}
         <IconButton
@@ -48,7 +50,7 @@ function EditorDialog({ open, onClose = () => {}, defaultValues = {}, fields = [
         </IconButton>
       </DialogTitle>
       <DialogContent dividers={true}>
-        <EditorForm fields={fields} submitRef={submitRef}  />
+        <EditorForm fields={fields} submitRef={submitRef} />
       </DialogContent>
       <DialogActions>
         <Button onClick={onClose}>Đóng</Button>

package/components/DataManagement/EditorForm.jsx

@@ -28,7 +28,7 @@ function EditorForm({ fields, submitRef }) {
     if (selectedEditItem) {
       setValue("Id", selectedEditItem.Id);
 
-      fields.forEach(({ field, onChange, type, keyValue, keyValueLabel, defaultValue, }) => {
+      fields.forEach(({ field, onChange, type, keyValue, keyValueLabel, defaultValue }) => {
         if (type == "autocomplete") {
           onChange?.({
             [keyValue]: selectedEditItem[field]
@@ -44,8 +44,7 @@ function EditorForm({ fields, submitRef }) {
             if (typeof fileValue == "string") {
               fileValue = JSON.parse(fileValue);
             }
-          }
-          catch (e) {
+          } catch (e) {
             fileValue = [];
           }
           setValue(field, fileValue);
@@ -64,12 +63,10 @@ function EditorForm({ fields, submitRef }) {
         if (type === "switch" && defaultValue === undefined) {
           methods.setValue(field, true);
         } else {
-
           methods.setValue(field, defaultValue);
         }
       });
     }
-
   }, [selectedEditItem]);
 
   const saveMutation = useMutation(saveDataToTable, {
@@ -116,9 +113,12 @@ function EditorForm({ fields, submitRef }) {
       }
     });
   };
+  const onValid = (data) => {
+    console.log(data);
+  };
   return (
     <FormProvider {...methods}>
-      <Box component={"form"} onSubmit={methods.handleSubmit(onSubmit)}>
+      <Box component={"form"} onSubmit={methods.handleSubmit(onSubmit, onValid)}>
         <Grid container spacing={2}>
           {fields.map(
             ({
@@ -129,7 +129,7 @@ function EditorForm({ fields, submitRef }) {
               childrenFields,
               datas,
               loading = false,
-              onChange = () => { },
+              onChange = () => {},
               keyLabel,
               keyValue,
               keyValueLabel,

package/components/DataManagement/FilterGod.jsx

@@ -1,12 +1,14 @@
-import { Accordion, AccordionSummary, Box, FormControl, InputLabel, MenuItem, Select, Slider, Toolbar, Typography } from "@mui/material";
+import { Accordion, AccordionSummary, Box, Slider, Typography } from "@mui/material";
 import { useFormContext } from "react-hook-form";
 import Grid from "@mui/material/Unstable_Grid2";
-import DateRangePicker from "../date/DateRangePicker";
+
 import { FilterElement } from "./FilterElement";
 import { useDataTable } from "./hooks";
 
-import AccordionDetails from '@mui/material/AccordionDetails';
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import AccordionDetails from "@mui/material/AccordionDetails";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import { DateRangePicker } from "../date";
+import { ArraySchema } from "yup";
 
 export const FilterGod = ({ filters, elementSize = "small" }) => {
   const { handleSubmit } = useFormContext();
@@ -14,15 +16,12 @@ export const FilterGod = ({ filters, elementSize = "small" }) => {
   const { setDataSearch, dataSearch } = useDataTable();
 
   return (
-    <Box
-      component={"form"}
-      onSubmit={handleSubmit(onSubmit)}
-    >
+    <Box component={"form"} onSubmit={handleSubmit(onSubmit)}>
       <Accordion>
         <AccordionSummary
           sx={{
             minHeight: 40,
-            '& .MuiAccordionSummary-content': {
+            "& .MuiAccordionSummary-content": {
               my: 1
             }
           }}
@@ -36,15 +35,21 @@ export const FilterGod = ({ filters, elementSize = "small" }) => {
           <Grid container spacing={1}>
             {filters.map(({ field, size, ...rest }) => {
               if (rest.type === "date-range") {
+                let label = ["từ ngày", "tới ngày"];
+
+                if (Array.isArray(field.label)) {
+                  label = field.label;
+                }
                 return (
                   <Grid key={field.toString()} md={size?.md} xs={size?.xs} sm={size?.sm}>
                     <DateRangePicker
+                      label={label}
                       onChange={(value) => {
-                        setDataSearch(({ previousState }) => ({
-                          ...previousState,
+                        setDataSearch({
+                          ...dataSearch,
                           [field[0]]: value[0],
                           [field[1]]: value[1]
-                        }));
+                        });
                       }}
                       size={elementSize}
                       value={[dataSearch?.[field[0]], dataSearch?.[field[1]]]}
@@ -55,10 +60,7 @@ export const FilterGod = ({ filters, elementSize = "small" }) => {
 
               if (rest.type === "slider-range") {
                 return (
-                  <Grid
-                    key={field.toString()}
-                    md={size?.md} xs={size?.xs} sm={size?.sm}
-                  >
+                  <Grid key={field.toString()} md={size?.md} xs={size?.xs} sm={size?.sm}>
                     <Slider
                       onChange={(e, value) => {
                         setDataSearch({
@@ -78,7 +80,7 @@ export const FilterGod = ({ filters, elementSize = "small" }) => {
                 );
               }
               return (
-                <Grid key={field} md={size?.md} xs={size?.xs} sm={size?.sm} >
+                <Grid key={field} md={size?.md} xs={size?.xs} sm={size?.sm}>
                   <FilterElement name={field} {...rest} size={elementSize} />
                 </Grid>
               );

package/components/DataManagement/TableHead.jsx

@@ -1,8 +1,10 @@
 import { Checkbox, TableRow, TableCell, TableHead as MuiTableHead, useTheme, useMediaQuery } from "@mui/material";
-import { useDataTable, usePermission } from "./hooks";
+import { useDataTable } from "./hooks";
+import { usePermission } from "../../hooks";
 export function TableHead({ numSelected, rowCount, onSelectAllClick, headLabel }) {
-  const { canEdit } = usePermission();
-  const { disableStatus,disableCellThaoTac } = useDataTable();
+  const { disableStatus, disableCellThaoTac, tableName } = useDataTable();
+  const { canEdit } = usePermission(tableName);
+
   const theme = useTheme();
   const downXl = useMediaQuery(theme.breakpoints.down("xl"));
   return (
@@ -11,7 +13,7 @@ export function TableHead({ numSelected, rowCount, onSelectAllClick, headLabel }
         <TableCell padding="checkbox">
           <Checkbox
             indeterminate={numSelected > 0 && numSelected < rowCount}
-            size={downXl?"small":"medium"}
+            size={downXl ? "small" : "medium"}
             checked={rowCount > 0 && numSelected === rowCount}
             onChange={onSelectAllClick}
           />

package/components/DataManagement/TableRowRender.jsx

@@ -1,17 +1,17 @@
 import { Checkbox, IconButton, Switch, TableCell, TableRow, Tooltip, Toolbar, useMediaQuery } from "@mui/material";
 import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline";
 import { EditOutlined } from "@mui/icons-material";
-import { useDataTable, usePermission } from "./hooks";
+import { useDataTable } from "./hooks";
 import RemoveRedEyeOutlinedIcon from "@mui/icons-material/RemoveRedEyeOutlined";
-
+import { usePermission } from "../../hooks";
 // material
 import { styled, useTheme } from "@mui/material/styles";
 import MoreMenu from "../MoreMenu";
 import { useMemo } from "react";
 
 export const TableRowRender = ({ index, row, selected, onSelect, onChangeStatus, onDelete, onEdit, onView }) => {
-  const { selectedField, columns, statusKey, disableStatus, tableActions, disableCellThaoTac } = useDataTable();
-  const { canEdit, canDelete, canView, canAction } = usePermission();
+  const { selectedField, columns, statusKey, disableStatus, tableActions, disableCellThaoTac, tableName } = useDataTable();
+  const { canEdit, canDelete, canView, canAction } = usePermission(tableName);
 
   const { tableActionsOnTable, tableActionsOnMoreMenu } = useMemo(() => {
     const tableActionsAfterFilter = [...tableActions].filter(({ permissionType }) => {
@@ -69,46 +69,50 @@ export const TableRowRender = ({ index, row, selected, onSelect, onChangeStatus,
         </TableCell>
       )}
 
-      {!disableCellThaoTac && <TableCell align="center">
-        {canEdit && (
-          <Tooltip title="Chỉnh sửa">
-            <IconButton size={downXl ? "small" : "medium"} onClick={() => onEdit(row)}>
-              <EditOutlined fontSize="inherit" color="primary" />
-            </IconButton>
-          </Tooltip>
-        )}
-        {canView && !tableActions?.some(({ permissionType }) => permissionType == "view") && (
-          <Tooltip title="Xem chi tiết">
-            <IconButton onClick={() => onView(row)}>
-              <RemoveRedEyeOutlinedIcon color="info" />
-            </IconButton>
-          </Tooltip>
-        )}
-        {canDelete && (
-          <Tooltip title="Xóa">
-            <IconButton size={downXl ? "small" : "medium"}
-              onClick={() => {
-                onDelete(row[selectedField]);
-              }}
-            >
-              <DeleteOutlineIcon fontSize="inherit" color="error" />
-            </IconButton>
-          </Tooltip>
-        )}
-        {tableActionsOnTable.map(({ title, onClick, element }) => (
-          <Tooltip key={title} title={title}>
-            <IconButton size={downXl ? "small" : "medium"}
-              onClick={() => {
-                onClick(row);
-              }}
-            >
-              {element}
-            </IconButton>
-          </Tooltip>
-        ))}
+      {!disableCellThaoTac && (
+        <TableCell align="center">
+          {canEdit && (
+            <Tooltip title="Chỉnh sửa">
+              <IconButton size={downXl ? "small" : "medium"} onClick={() => onEdit(row)}>
+                <EditOutlined fontSize="inherit" color="primary" />
+              </IconButton>
+            </Tooltip>
+          )}
+          {canView && !tableActions?.some(({ permissionType }) => permissionType == "view") && (
+            <Tooltip title="Xem chi tiết">
+              <IconButton onClick={() => onView(row)}>
+                <RemoveRedEyeOutlinedIcon color="info" />
+              </IconButton>
+            </Tooltip>
+          )}
+          {canDelete && (
+            <Tooltip title="Xóa">
+              <IconButton
+                size={downXl ? "small" : "medium"}
+                onClick={() => {
+                  onDelete(row[selectedField]);
+                }}
+              >
+                <DeleteOutlineIcon fontSize="inherit" color="error" />
+              </IconButton>
+            </Tooltip>
+          )}
+          {tableActionsOnTable.map(({ title, onClick, element }) => (
+            <Tooltip key={title} title={title}>
+              <IconButton
+                size={downXl ? "small" : "medium"}
+                onClick={() => {
+                  onClick(row);
+                }}
+              >
+                {element}
+              </IconButton>
+            </Tooltip>
+          ))}
 
-        {<MoreMenu actions={tableActionsOnMoreMenu} data={row} />}
-      </TableCell>}
+          {<MoreMenu actions={tableActionsOnMoreMenu} data={row} />}
+        </TableCell>
+      )}
     </TableRow>
   );
 };

package/components/DataManagement/TableToolbar.jsx

@@ -1,15 +1,17 @@
 import { Checkbox, IconButton, Tooltip, Typography, Box, useMediaQuery } from "@mui/material";
 import { Delete } from "@mui/icons-material";
-import { usePermission } from "./hooks";
+
 import PropTypes from "prop-types";
 import { useTheme } from "@mui/material/styles";
 import { RootStyle } from "./TableRowRender";
-
+import { usePermission } from "../../hooks";
+import { useDataTable } from "./hooks";
 // ----------------------------------------------------------------------
 const TableToolbar = ({ numSelected, onSelectAllClick, rowCount, onDeleteMultiple }) => {
   const theme = useTheme();
   const isLight = theme.palette.mode === "light";
-  const { canDeleteMulti } = usePermission();
+  const { tableName } = useDataTable();
+  const { canDeleteMulti } = usePermission(tableName);
   const downXl = useMediaQuery(theme.breakpoints.down("xl"));
 
   return (
@@ -24,9 +26,10 @@ const TableToolbar = ({ numSelected, onSelectAllClick, rowCount, onDeleteMultipl
           width: "100%",
           ...(numSelected > 0 && {
             color: isLight ? "primary.main" : "text.primary",
-            bgcolor: isLight ? "primary.lighter" : "primary.dark",
-          }),
-        }}>
+            bgcolor: isLight ? "primary.lighter" : "primary.dark"
+          })
+        }}
+      >
         <Box padding="checkbox" sx={{ display: "flex", alignItems: "center" }}>
           <Checkbox
             indeterminate={numSelected > 0 && numSelected < rowCount}
@@ -40,7 +43,7 @@ const TableToolbar = ({ numSelected, onSelectAllClick, rowCount, onDeleteMultipl
 
         {canDeleteMulti && (
           <Tooltip title="Xóa tất cả" onClick={onDeleteMultiple}>
-            <IconButton size={downXl ? "small" : "medium"} >
+            <IconButton size={downXl ? "small" : "medium"}>
               <Delete color="primary" />
             </IconButton>
           </Tooltip>

package/components/DataManagement/ViewDetailDialog.jsx

@@ -7,21 +7,20 @@ import DialogTitle from "@mui/material/DialogTitle";
 import IconButton from "@mui/material/IconButton";
 import CloseIcon from "@mui/icons-material/Close";
 
-import { useEffect, useRef, useState } from "react";
 import PropTypes from "prop-types";
 
-import EditorForm from "trithuc-mvc-react/components/DataManagement/EditorForm";
-import { useDataTable, usePermission } from "trithuc-mvc-react/components/DataManagement/hooks";
+import EditorForm from "./EditorForm";
+
 ViewDetailDialog.propTypes = {
   open: PropTypes.bool,
-  onClose: PropTypes.func,
+  onClose: PropTypes.func
 };
 import { Stack, Typography, List, ListItem, ListItemText, ListItemIcon, Link, Grid } from "@mui/material";
 import TextSnippetOutlinedIcon from "@mui/icons-material/TextSnippetOutlined";
 export const FieldView = ({ label, value }) => {
   return (
     <Stack direction="column">
-      <Typography variant="body2" sx={{ color: "text.secondary", }}>
+      <Typography variant="body2" sx={{ color: "text.secondary" }}>
         {label}
       </Typography>
       <Typography variant="subtitle2">{value}</Typography>
@@ -56,7 +55,7 @@ export const ListFileView = ({ files }) => {
               <TextSnippetOutlinedIcon color="info" />
             </ListItemIcon>
             <ListItemText
-              primary={<Link href={urlFile} >{tenFile}</Link>}
+              primary={<Link href={urlFile}>{tenFile}</Link>}
               secondary={Size}
               primaryTypographyProps={{ variant: "subtitle2" }}
               secondaryTypographyProps={{ variant: "caption" }}
@@ -68,11 +67,10 @@ export const ListFileView = ({ files }) => {
   );
 };
 
-function ViewDetailDialog({ open, onClose = () => { }, fields = [] }) {
-
-  const fieldsView  = fields.map(field=>({...field, disabled: true}));
+function ViewDetailDialog({ open, onClose = () => {}, fields = [] }) {
+  const fieldsView = fields.map((field) => ({ ...field, disabled: true }));
   return (
-    <Dialog open={open} onClose={onClose} maxWidth="md" fullWidth={true} scroll={'body'}>
+    <Dialog open={open} onClose={onClose} maxWidth="md" fullWidth={true} scroll={"body"}>
       <DialogTitle>
         Xem chi tiết
         <IconButton

package/components/DataManagement/context.js

@@ -1,4 +1,3 @@
 import { createContext } from "react";
 
 export const DataTableContext = createContext({ tableName: null });
-export const PermissionContext = createContext({});

package/components/DataManagement/hooks.js

@@ -1,22 +1,6 @@
-import { useContext, useMemo } from "react";
-import { DataTableContext, PermissionContext } from "./context";
+import { useContext } from "react";
+import { DataTableContext } from "./context";
 
 export function useDataTable() {
   return useContext(DataTableContext);
 }
-export function usePermission() {
-  const { Permission, setPermission } = useContext(PermissionContext);
-  const { canEdit, canDelete, canDeleteMulti, canSave, canCreate, canAction, canView } = useMemo(() => {
-    const canEdit = !Permission || Permission.Edit;
-    const canDelete = !Permission || Permission.Delete;
-    const canDeleteMulti = !Permission || Permission.DeleteMulti;
-    const canSave = !Permission || Permission.Save;
-    const canCreate = !Permission || Permission.Create;
-    const canAction = !Permission || Permission.Action;
-    const canView = !Permission || Permission.View;
-    
-    return { canEdit, canDelete, canDeleteMulti, canSave, canCreate, canAction, canView };
-  }, [Permission]);
-
-  return { Permission, setPermission, canEdit, canDelete, canDeleteMulti, canSave, canCreate, canAction, canView };
-}