trithuc-mvc-react 2.0.1 → 2.1.0

package/components/DataManagement/DataTable.jsx

@@ -14,236 +14,237 @@ import TableToolbar from "./TableToolbar";
 import { useDataTable } from "./hooks";
 import { usePermission } from "../../hooks";
 const DataTable = ({ multipleActions = [] }) => {
-    const {
-        tableName,
-        selectedField,
-        columns,
-        dataSearch,
-        setOpenEditorDialog,
-        setSelectedEditItem,
-        setOpenViewDialog,
-        onEditClick,
-        hasTabpanel
-    } = useDataTable();
-
-    const { set: setPermission } = usePermission(tableName);
-    const queryClient = useQueryClient();
-    const confirm = useConfirm();
-    const [selectedItems, setSelectedItems] = useState([]);
-    const [page, setPage] = useState(0);
-    const [rowsPerPage, setRowsPerPage] = useState(5);
-
-    const { data, isLoading } = useQuery({
-        queryKey: [tableName, page, rowsPerPage, dataSearch],
-        queryFn: () =>
-            getDatasFromTable({
-                tableName: tableName,
-                page: page + 1,
-                pageSize: rowsPerPage,
-                data: dataSearch
-            }),
-        // keepPreviousData: true,
-        onSuccess: ({ PermissionModel, status }) => {
-            if (status) {
-                // setPermission(PermissionModel);
-                // console.log("LOAD LAI PermissionModel");
-            }
-        }
-    });
-    const changeStatusMutation = useMutation(changeStatusDataToTable, {
-        onSuccess: () => {
-            toast.success("Thay đổi trạng thái thành công !");
-            queryClient.invalidateQueries({ queryKey: [tableName] });
-        },
-        onError: () => {
-            toast.error(" Có lỗi xảy ra !");
-        }
-    });
-    const deleteMutation = useMutation(deleteDataFromTable, {
-        onSuccess: ({ status }) => {
-            if (status) {
-                toast.success("Xóa thành công !");
-            } else {
-                toast.error(" Có lỗi xảy ra !");
-            }
-
-            queryClient.invalidateQueries({ queryKey: [tableName] });
-        },
-        onError: () => {
-            toast.error(" Có lỗi xảy ra !");
-        }
-    });
-    const deleteMultipleMutation = useMutation(deleteMultipleDataFromTable, {
-        onSuccess: () => {
-            toast.success("Xóa thành công !");
-            setSelectedItems([]);
-            queryClient.invalidateQueries({ queryKey: [tableName] });
-        },
-        onError: () => {
-            toast.error(" Có lỗi xảy ra !");
-        }
-    });
-
-    const handleDelete = (id) => {
-        confirm({ description: "Bạn có chắc chắn muốn xóa bản ghi này không?", title: "Xác nhận" })
-            .then(() => {
-                deleteMutation.mutate({
-                    id,
-                    tableName
-                });
-            })
-            .catch(() => {});
-    };
-    const handleChangeStatus = (Id) => {
-        changeStatusMutation.mutate({
-            tableName,
-            id: Id
+  const {
+    tableName,
+    selectedField,
+    columns,
+    dataSearch,
+    setOpenEditorDialog,
+    setSelectedEditItem,
+    setOpenViewDialog,
+    onEditClick,
+    hasTabpanel,
+    defaultRowsPerPage
+  } = useDataTable();
+
+  const { set: setPermission } = usePermission(tableName);
+  const queryClient = useQueryClient();
+  const confirm = useConfirm();
+  const [selectedItems, setSelectedItems] = useState([]);
+  const [page, setPage] = useState(0);
+  const [rowsPerPage, setRowsPerPage] = useState(defaultRowsPerPage || 5);
+
+  const { data, isLoading } = useQuery({
+    queryKey: [tableName, page, rowsPerPage, dataSearch],
+    queryFn: () =>
+      getDatasFromTable({
+        tableName: tableName,
+        page: page + 1,
+        pageSize: rowsPerPage,
+        data: dataSearch
+      }),
+    // keepPreviousData: true,
+    onSuccess: ({ PermissionModel, status }) => {
+      if (status) {
+        // setPermission(PermissionModel);
+        // console.log("LOAD LAI PermissionModel");
+      }
+    }
+  });
+  const changeStatusMutation = useMutation(changeStatusDataToTable, {
+    onSuccess: () => {
+      toast.success("Thay đổi trạng thái thành công !");
+      queryClient.invalidateQueries({ queryKey: [tableName] });
+    },
+    onError: () => {
+      toast.error(" Có lỗi xảy ra !");
+    }
+  });
+  const deleteMutation = useMutation(deleteDataFromTable, {
+    onSuccess: ({ status }) => {
+      if (status) {
+        toast.success("Xóa thành công !");
+      } else {
+        toast.error(" Có lỗi xảy ra !");
+      }
+
+      queryClient.invalidateQueries({ queryKey: [tableName] });
+    },
+    onError: () => {
+      toast.error(" Có lỗi xảy ra !");
+    }
+  });
+  const deleteMultipleMutation = useMutation(deleteMultipleDataFromTable, {
+    onSuccess: () => {
+      toast.success("Xóa thành công !");
+      setSelectedItems([]);
+      queryClient.invalidateQueries({ queryKey: [tableName] });
+    },
+    onError: () => {
+      toast.error(" Có lỗi xảy ra !");
+    }
+  });
+
+  const handleDelete = (id) => {
+    confirm({ description: "Bạn có chắc chắn muốn xóa bản ghi này không?", title: "Xác nhận" })
+      .then(() => {
+        deleteMutation.mutate({
+          id,
+          tableName
         });
+      })
+      .catch(() => {});
+  };
+  const handleChangeStatus = (Id) => {
+    changeStatusMutation.mutate({
+      tableName,
+      id: Id
+    });
+  };
+  const handlEdit = (item) => {
+    setOpenEditorDialog(true);
+    setSelectedEditItem(item);
+    onEditClick(item);
+  };
+  const handlViewDetail = (item) => {
+    setOpenViewDialog(true);
+    setSelectedEditItem(item);
+  };
+  const { rows, total } = useMemo(() => {
+    let rows = data?.data ?? [];
+    let total = data?.total ?? 0;
+    return {
+      rows: rows,
+      total
     };
-    const handlEdit = (item) => {
-        setOpenEditorDialog(true);
-        setSelectedEditItem(item);
-        onEditClick(item);
-    };
-    const handlViewDetail = (item) => {
-        setOpenViewDialog(true);
-        setSelectedEditItem(item);
-    };
-    const { rows, total } = useMemo(() => {
-        let rows = data?.data ?? [];
-        let total = data?.total ?? 0;
-        return {
-            rows: rows,
-            total
-        };
-    }, [data]);
-
-    useEffect(() => {
-        let PermissionModel = data?.PermissionModel;
-        PermissionModel && setPermission(PermissionModel);
-    }, [data]);
-    useEffect(() => {
-        const newSelectedItems = selectedItems.filter((selectedId) => {
-            return rows?.some((row) => row.Id == selectedId);
+  }, [data]);
+
+  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) => selectedItems.indexOf(Id) !== -1;
+
+  const handleSelect = (event, Id) => {
+    const selectedIndex = selectedItems.indexOf(Id);
+    let newSelected = [];
+
+    if (selectedIndex === -1) {
+      newSelected = newSelected.concat(selectedItems, Id);
+    } else if (selectedIndex === 0) {
+      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(selectedItems.slice(0, selectedIndex), selectedItems.slice(selectedIndex + 1));
+    }
+
+    setSelectedItems(newSelected);
+  };
+  const handleSelectAllClick = (event) => {
+    if (event.target.checked) {
+      const newSelected = rows.map((n) => n[selectedField]);
+      setSelectedItems(newSelected);
+      return;
+    }
+    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 ${selectedItems?.length} bản ghi này không?`, title: "Xác nhận" })
+      .then(() => {
+        deleteMultipleMutation.mutate({
+          tableName,
+          ids: selectedItems
         });
-        setSelectedItems(newSelectedItems);
-    }, [rows]);
-    const handleChangePage = (event, newPage) => {
-        setPage(newPage);
-    };
-    const isSelected = (Id) => selectedItems.indexOf(Id) !== -1;
-
-    const handleSelect = (event, Id) => {
-        const selectedIndex = selectedItems.indexOf(Id);
-        let newSelected = [];
-
-        if (selectedIndex === -1) {
-            newSelected = newSelected.concat(selectedItems, Id);
-        } else if (selectedIndex === 0) {
-            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(selectedItems.slice(0, selectedIndex), selectedItems.slice(selectedIndex + 1));
-        }
-
-        setSelectedItems(newSelected);
-    };
-    const handleSelectAllClick = (event) => {
-        if (event.target.checked) {
-            const newSelected = rows.map((n) => n[selectedField]);
-            setSelectedItems(newSelected);
-            return;
-        }
-        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 ${selectedItems?.length} bản ghi này không?`, title: "Xác nhận" })
-            .then(() => {
-                deleteMultipleMutation.mutate({
-                    tableName,
-                    ids: selectedItems
-                });
-            })
-            .catch(() => {});
-    };
-    const theme = useTheme();
-    const downXL = useMediaQuery(theme.breakpoints.down("xl"));
-
-    return (
-        <>
-            <TableContainer sx={{ position: "relative" }}>
-                <TableToolbar
-                    onSelectAllClick={handleSelectAllClick}
-                    numSelected={selectedItems?.length}
-                    rowCount={rows.length}
-                    onDeleteMultiple={handleDeleteMultiple}
-                    selected={selectedItems}
-                    multipleActions={multipleActions}
+      })
+      .catch(() => {});
+  };
+  const theme = useTheme();
+  const downXL = useMediaQuery(theme.breakpoints.down("xl"));
+
+  return (
+    <>
+      <TableContainer sx={{ position: "relative" }}>
+        <TableToolbar
+          onSelectAllClick={handleSelectAllClick}
+          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={selectedItems?.length}
+            rowCount={rows.length}
+          />
+          {isLoading ? (
+            <TableRowsLoader rowsNum={5} colsNum={columns.length + 4} />
+          ) : (
+            <TableBody>
+              {[...rows].map((row, index) => (
+                <TableRowRender
+                  key={row.Id}
+                  index={index}
+                  row={row}
+                  selected={isSelected(row[selectedField])}
+                  onSelect={handleSelect}
+                  onEdit={handlEdit}
+                  onView={handlViewDetail}
+                  onChangeStatus={handleChangeStatus}
+                  onDelete={handleDelete}
                 />
-
-                <Table className="border" size={downXL ? "small" : "medium"}>
-                    <TableHead
-                        headLabel={columns}
-                        onSelectAllClick={handleSelectAllClick}
-                        numSelected={selectedItems?.length}
-                        rowCount={rows.length}
-                    />
-                    {isLoading ? (
-                        <TableRowsLoader rowsNum={5} colsNum={columns.length + 4} />
-                    ) : (
-                        <TableBody>
-                            {[...rows].map((row, index) => (
-                                <TableRowRender
-                                    key={row.Id}
-                                    index={index}
-                                    row={row}
-                                    selected={isSelected(row[selectedField])}
-                                    onSelect={handleSelect}
-                                    onEdit={handlEdit}
-                                    onView={handlViewDetail}
-                                    onChangeStatus={handleChangeStatus}
-                                    onDelete={handleDelete}
-                                />
-                            ))}
-
-                            {rows?.length == 0 && (
-                                <TableRow>
-                                    <TableCell colSpan={columns.length + 4} align="center">
-                                        Không có dữ liệu
-                                    </TableCell>
-                                </TableRow>
-                            )}
-                        </TableBody>
-                    )}
-                </Table>
-            </TableContainer>
-
-            <Grid container>
-                {!hasTabpanel && (
-                    <Grid item alignSelf={"center"} sx={{ pl: 2 }}>
-                        <Typography variant="body1">
-                            Tổng số lượng: <span>{total}</span>
-                        </Typography>
-                    </Grid>
-                )}
-
-                <Grid item xs>
-                    <TablePaginationCustom
-                        count={total}
-                        rowsPerPage={rowsPerPage}
-                        page={page}
-                        onPageChange={handleChangePage}
-                        onRowsPerPageChange={handleChangeRowsPerPage}
-                    />
-                </Grid>
-            </Grid>
-        </>
-    );
+              ))}
+
+              {rows?.length == 0 && (
+                <TableRow>
+                  <TableCell colSpan={columns.length + 4} align="center">
+                    Không có dữ liệu
+                  </TableCell>
+                </TableRow>
+              )}
+            </TableBody>
+          )}
+        </Table>
+      </TableContainer>
+
+      <Grid container>
+        {!hasTabpanel && (
+          <Grid item alignSelf={"center"} sx={{ pl: 2 }}>
+            <Typography variant="body1">
+              Tổng số lượng: <span>{total}</span>
+            </Typography>
+          </Grid>
+        )}
+
+        <Grid item xs>
+          <TablePaginationCustom
+            count={total}
+            rowsPerPage={rowsPerPage}
+            page={page}
+            onPageChange={handleChangePage}
+            onRowsPerPageChange={handleChangeRowsPerPage}
+          />
+        </Grid>
+      </Grid>
+    </>
+  );
 };
 export default DataTable;

package/components/DataManagement/index.jsx

@@ -74,7 +74,8 @@ function DataManagement({
     header: {
       sx: {}
     }
-  }
+  },
+  defaultRowsPerPage = 5
 }) {
   const [openEditorDialog, setOpenEditorDialog] = useState(false);
   const [selectedEditItem, setSelectedEditItem] = useState(null);
@@ -123,7 +124,8 @@ function DataManagement({
       disableAdd,
       tableActions,
       onEditClick,
-      hasTabpanel
+      hasTabpanel,
+      defaultRowsPerPage
     };
   }, [
     tableName,
@@ -136,7 +138,8 @@ function DataManagement({
     tableActions,
     openViewDialog,
     setOpenViewDialog,
-    onEditClick
+    onEditClick,
+    defaultRowsPerPage
   ]);
 
   const methods = useForm({ defaultValues: getDefaultValues(filters) });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "trithuc-mvc-react",
-  "version": "2.0.1",
+  "version": "2.1.0",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"