trithuc-mvc-react 1.7.4 → 1.8.0

package/components/DataManagement/DataTable.jsx

@@ -13,7 +13,7 @@ import { TableRowRender } from "./TableRowRender";
 import TableToolbar from "./TableToolbar";
 import { useDataTable } from "./hooks";
 import { usePermission } from "../../hooks";
-const DataTable = () => {
+const DataTable = ({ multipleActions = [] }) => {
   const {
     tableName,
     selectedField,
@@ -24,10 +24,11 @@ const DataTable = () => {
     setOpenViewDialog,
     onEditClick
   } = useDataTable();
-  const { set: setPermission, permission } = usePermission(tableName);
+
+  const { set: setPermission } = usePermission(tableName);
   const queryClient = useQueryClient();
   const confirm = useConfirm();
-  const [selected, setSelected] = useState([]);
+  const [selectedItems, setSelectedItems] = useState([]);
   const [page, setPage] = useState(0);
   const [rowsPerPage, setRowsPerPage] = useState(5);
 
@@ -74,7 +75,7 @@ const DataTable = () => {
   const deleteMultipleMutation = useMutation(deleteMultipleDataFromTable, {
     onSuccess: () => {
       toast.success("Xóa thành công !");
-      setSelected([]);
+      setSelectedItems([]);
       queryClient.invalidateQueries({ queryKey: [tableName] });
     },
     onError: () => {
@@ -120,46 +121,53 @@ const DataTable = () => {
   useEffect(() => {
     let PermissionModel = data?.PermissionModel;
     PermissionModel && setPermission(PermissionModel);
+  }, [data]);
+  useEffect(() => {
+    const newSelectedItems = selectedItems.filter((selectedId) => {
+      return rows?.some((row) => row.Id == selectedId);
+    });
+    setSelectedItems(newSelectedItems);
   }, [rows]);
-
   const handleChangePage = (event, newPage) => {
     setPage(newPage);
   };
-  const isSelected = (Id) => selected.indexOf(Id) !== -1;
+  const isSelected = (Id) => selectedItems.indexOf(Id) !== -1;
+
   const handleSelect = (event, Id) => {
-    const selectedIndex = selected.indexOf(Id);
+    const selectedIndex = selectedItems.indexOf(Id);
     let newSelected = [];
 
     if (selectedIndex === -1) {
-      newSelected = newSelected.concat(selected, Id);
+      newSelected = newSelected.concat(selectedItems, Id);
     } else if (selectedIndex === 0) {
-      newSelected = newSelected.concat(selected.slice(1));
-    } else if (selectedIndex === selected.length - 1) {
-      newSelected = newSelected.concat(selected.slice(0, -1));
+      newSelected = newSelected.concat(selectedItems.slice(1));
+    } else if (selectedIndex === selectedItems.length - 1) {
+      newSelected = newSelected.concat(selectedItems.slice(0, -1));
     } else if (selectedIndex > 0) {
-      newSelected = newSelected.concat(selected.slice(0, selectedIndex), selected.slice(selectedIndex + 1));
+      newSelected = newSelected.concat(selectedItems.slice(0, selectedIndex), selectedItems.slice(selectedIndex + 1));
     }
 
-    setSelected(newSelected);
+    setSelectedItems(newSelected);
   };
   const handleSelectAllClick = (event) => {
     if (event.target.checked) {
       const newSelected = rows.map((n) => n[selectedField]);
-      setSelected(newSelected);
+      setSelectedItems(newSelected);
       return;
     }
-    setSelected([]);
+    setSelectedItems([]);
   };
+
   const handleChangeRowsPerPage = (event) => {
     setRowsPerPage(parseInt(event.target.value, 10));
     setPage(0);
   };
   const handleDeleteMultiple = () => {
-    confirm({ description: `Bạn có chắc chắn muốn xóa ${selected?.length} bản ghi này không?`, title: "Xác nhận" })
+    confirm({ description: `Bạn có chắc chắn muốn xóa ${selectedItems?.length} bản ghi này không?`, title: "Xác nhận" })
       .then(() => {
         deleteMultipleMutation.mutate({
           tableName,
-          ids: selected
+          ids: selectedItems
         });
       })
       .catch(() => {});
@@ -172,15 +180,18 @@ const DataTable = () => {
       <TableContainer sx={{ position: "relative" }}>
         <TableToolbar
           onSelectAllClick={handleSelectAllClick}
-          numSelected={selected?.length}
+          numSelected={selectedItems?.length}
           rowCount={rows.length}
           onDeleteMultiple={handleDeleteMultiple}
+          selected={selectedItems}
+          multipleActions={multipleActions}
         />
+
         <Table className="border" size={downXL ? "small" : "medium"}>
           <TableHead
             headLabel={columns}
             onSelectAllClick={handleSelectAllClick}
-            numSelected={selected?.length}
+            numSelected={selectedItems?.length}
             rowCount={rows.length}
           />
           {isLoading ? (

package/components/DataManagement/FilterGod.jsx

@@ -16,7 +16,7 @@ export const FilterGod = ({ filters, elementSize = "small" }) => {
   const { setDataSearch, dataSearch } = useDataTable();
 
   return (
-    <Box component={"form"} onSubmit={handleSubmit(onSubmit)}>
+    <Box component={"form"}>
       <Accordion>
         <AccordionSummary
           sx={{

package/components/DataManagement/FormField.jsx

@@ -170,7 +170,7 @@ function FormField({
           render={({ field }) => {
             return (
               <FormControl fullWidth size={size}>
-                <FormLabel>{label}</FormLabel>
+                {/* <FormLabel>{label}</FormLabel> */}
                 <RadioGroup row {...field}>
                   {[...datas].map(({ label, value }) => (
                     <FormControlLabel key={value} value={value} control={<Radio />} label={label} />

package/components/DataManagement/TableToolbar.jsx

@@ -1,4 +1,4 @@
-import { Checkbox, IconButton, Tooltip, Typography, Box, useMediaQuery } from "@mui/material";
+import { Checkbox, IconButton, Tooltip, Typography, Box, useMediaQuery, Stack } from "@mui/material";
 import { Delete } from "@mui/icons-material";
 
 import PropTypes from "prop-types";
@@ -6,14 +6,23 @@ import { useTheme } from "@mui/material/styles";
 import { RootStyle } from "./TableRowRender";
 import { usePermission } from "../../hooks";
 import { useDataTable } from "./hooks";
+import { useMemo } from "react";
 // ----------------------------------------------------------------------
-const TableToolbar = ({ numSelected, onSelectAllClick, rowCount, onDeleteMultiple }) => {
+const TableToolbar = ({ selected, multipleActions = [], numSelected, onSelectAllClick, rowCount, onDeleteMultiple }) => {
   const theme = useTheme();
   const isLight = theme.palette.mode === "light";
   const { tableName } = useDataTable();
-  const { canDeleteMulti } = usePermission(tableName);
+  const { canDeleteMulti, canAction } = usePermission(tableName);
   const downXl = useMediaQuery(theme.breakpoints.down("xl"));
 
+  const actions = useMemo(() => {
+    const actions = [...multipleActions].filter(({ permissionType }) => {
+      return !(permissionType == "action" && !canAction);
+    });
+
+    return actions;
+  }, [canAction, multipleActions]);
+
   return (
     numSelected > 0 && (
       <RootStyle
@@ -41,13 +50,28 @@ const TableToolbar = ({ numSelected, onSelectAllClick, rowCount, onDeleteMultipl
           </Typography>
         </Box>
 
-        {canDeleteMulti && (
-          <Tooltip title="Xóa tất cả" onClick={onDeleteMultiple}>
-            <IconButton size={downXl ? "small" : "medium"}>
-              <Delete color="primary" />
-            </IconButton>
-          </Tooltip>
-        )}
+        <Stack direction="row" alignItems="center" spacing={1}>
+          {actions.map(({ title, onClick, element }) => (
+            <Tooltip key={title} title={title}>
+              <IconButton
+                size={downXl ? "small" : "medium"}
+                onClick={() => {
+                  onClick(selected);
+                }}
+              >
+                {element}
+              </IconButton>
+            </Tooltip>
+          ))}
+
+          {canDeleteMulti && (
+            <Tooltip title="Xóa tất cả" onClick={onDeleteMultiple}>
+              <IconButton size={downXl ? "small" : "medium"}>
+                <Delete color="primary" />
+              </IconButton>
+            </Tooltip>
+          )}
+        </Stack>
       </RootStyle>
     )
   );

package/components/DataManagement/index.jsx

@@ -55,7 +55,10 @@ function DataManagement({
   disableStatus = false,
   disableAdd = false,
   disableCellThaoTac = false,
+
   tableActions = [],
+  multipleActions = [],
+  
   disableEditor = false,
   onAddClick = () => {},
   onEditClick = () => {},
@@ -180,9 +183,11 @@ function DataManagement({
             {tabPanel}
             <FilterGod filters={filters} elementSize={elementSize} />
             {backParentNavigator}
-            <DataTable />
+
+            <DataTable multipleActions={multipleActions} />
           </Card>
         </FormProvider>
+
         {disableEditor || (
           <EditorDialog
             open={openEditorDialog}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "trithuc-mvc-react",
-  "version": "1.7.4",
+  "version": "1.8.0",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
@@ -22,7 +22,6 @@
     "lodash": "^4.17.21",
     "moment": "^2.29.4",
     "prop-types": "^15.8.1",
-    "react-hook-form": "^7.45.2",
     "yup": "^1.2.0"
   },
   "devDependencies": {
@@ -43,6 +42,7 @@
     "react-query": "^3.39.3",
     "react-toastify": "^9.1.3",
     "material-ui-confirm": "^3.0.9",
-    "@mui/x-date-pickers": "^6.10.2"
+    "@mui/x-date-pickers": "^6.10.2",
+    "react-hook-form": "^7.45.2"
   }
 }