trithuc-mvc-react 3.1.5 → 3.1.6

package/components/DataManagement/DataTable.jsx

@@ -14,6 +14,8 @@ import { usePermission } from "../../hooks";
 import { TableRowRender } from "./TableRowRender";
 import TableToolbar from "./TableToolbar";
 import { useDataTable } from "./hooks";
+import DeleteConfirmationDialog from "./DeleteConfirmationDialog";
+import DeleteMultipleConfirmationDialog from "./DeleteMultipleConfirmationDialog";
 const defaultQueryOptions = {
   staleTime: 1000 * 60 * 1, // Thời gian dữ liệu có thể sử dụng lại trước khi gọi lại API
   cacheTime: 1000 * 60 * 30, // Thời gian dữ liệu được lưu trong cache trước khi bị xóa
@@ -38,9 +40,12 @@ const DataTable = ({ multipleActions = [], page, setPage = () => {}, disableEdit
   const { set: setPermission } = usePermission(tableName);
   const queryClient = useQueryClient();
   const confirm = useConfirm();
+  const [openDeleteMultipleDialog, setOpenDeleteMultipleDialog] = useState(false);
   const [selectedItems, setSelectedItems] = useState([]);
   // const [page, setPage] = useState(0);
   const [rowsPerPage, setRowsPerPage] = useState(defaultRowsPerPage);
+  const [openDialog, setOpenDialog] = useState(false);
+  const [deleteId, setDeleteId] = useState(null);
 
   const { data, isLoading } = useQuery({
     queryKey: [tableName, page, rowsPerPage, dataSearch],
@@ -131,22 +136,46 @@ const DataTable = ({ multipleActions = [], page, setPage = () => {}, disableEdit
       }
     }
   });
-
+  // Hàm gọi khi người dùng muốn xóa một bản ghi
   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",
-      cancellationText: "Hủy",
-      confirmationText: "Xóa"
-    })
-      .then(() => {
-        deleteMutation.mutate({
-          id,
-          tableName
-        });
-      })
-      .catch(() => {});
+    // console.log("id", id);
+    setDeleteId(id); // Lưu lại ID bản ghi muốn xóa
+    setOpenDialog(true); // Mở dialog xác nhận xóa
+  };
+
+  // Hàm xử lý khi đóng dialog (cả xác nhận và hủy)
+  const handleDialogClose = (confirm) => {
+    if (confirm) {
+      // console.log("Đã xác nhận xóa", deleteId);
+      // Gọi API hoặc mutation để xóa
+      deleteMutation.mutate({
+        id: deleteId,
+        tableName
+      });
+    } else {
+      toast.info("Đã hủy thao tác xóa.");
+    }
+    setOpenDialog(false); // Đóng dialog sau khi chọn
   };
+  // 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",
+  //     cancellationText: "Hủy",
+  //     confirmationText: "Xóa"
+  //   })
+  //     .then(() => {
+  //       deleteMutation.mutate({
+  //         id,
+  //         tableName
+  //       });
+  //     })
+  //     .finally(() => {
+  //       // Đảm bảo phần hủy thao tác được xử lý trong finally
+  //       toast.info("Đã hủy thao tác xóa.");
+  //     });
+  // };
+
   const handleChangeStatus = (Id) => {
     changeStatusMutation.mutate({
       tableName,
@@ -218,21 +247,42 @@ const DataTable = ({ multipleActions = [], page, setPage = () => {}, disableEdit
     setRowsPerPage(newRowsPerPage);
     setPage(0);
   };
+  // Hàm gọi khi người dùng muốn xóa nhiều bản ghi
   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",
-      cancellationText: "Hủy",
-      confirmationText: "Đồng ý"
-    })
-      .then(() => {
-        deleteMultipleMutation.mutate({
-          tableName,
-          ids: selectedItems
-        });
-      })
-      .catch(() => {});
+    setOpenDeleteMultipleDialog(true); // Mở Dialog để xác nhận xóa
+  };
+
+  const handleDeleteMultipleDialogClose = (confirm) => {
+    if (confirm) {
+      // console.log("Đã xác nhận xóa các bản ghi", selectedItems);
+      // Gọi API hoặc mutation để xóa các bản ghi
+      deleteMultipleMutation.mutate({
+        tableName,
+        ids: selectedItems
+      });
+      // toast.success("Đã xóa các bản ghi.");
+    } else {
+      toast.info("Đã hủy thao tác xóa.");
+    }
+    setOpenDeleteMultipleDialog(false); // Đóng Dialog sau khi chọn
   };
+  // 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",
+  //     cancellationText: "Hủy",
+  //     confirmationText: "Đồng ý"
+  //   })
+  //     .then(() => {
+  //       deleteMultipleMutation.mutate({
+  //         tableName,
+  //         ids: selectedItems
+  //       });
+  //     })
+  //     .catch(() => {
+  //       toast.info("Đã hủy thao tác xóa.");
+  //     });
+  // };
   const theme = useTheme();
   const downXL = useMediaQuery(theme.breakpoints.down("xl"));
 
@@ -310,6 +360,13 @@ const DataTable = ({ multipleActions = [], page, setPage = () => {}, disableEdit
           />
         </Grid>
       </Grid>
+      <DeleteConfirmationDialog open={openDialog} onClose={handleDialogClose} onConfirm={handleDialogClose} id={deleteId} />
+      <DeleteMultipleConfirmationDialog
+        open={openDeleteMultipleDialog}
+        onClose={handleDeleteMultipleDialogClose}
+        onConfirm={handleDeleteMultipleDialogClose}
+        selectedItems={selectedItems}
+      />
     </>
   );
 };

package/components/DataManagement/DataTableSM.jsx

@@ -13,6 +13,7 @@ import { usePermission } from "../../hooks";
 import { TableRowRenderSM } from "./TableRowRenderSM";
 import TableToolbar from "./TableToolbar";
 import { useDataTable } from "./hooks";
+import DeleteConfirmationDialog from "./DeleteConfirmationDialog";
 const defaultQueryOptions = {
   staleTime: 1000 * 60 * 1, // Thời gian dữ liệu có thể sử dụng lại trước khi gọi lại API
   cacheTime: 1000 * 60 * 30, // Thời gian dữ liệu được lưu trong cache trước khi bị xóa
@@ -37,9 +38,12 @@ const DataTableSM = ({ multipleActions = [], page, setPage = () => {}, disableEd
   const { set: setPermission } = usePermission(tableName);
   const queryClient = useQueryClient();
   const confirm = useConfirm();
+  const [openDeleteMultipleDialog, setOpenDeleteMultipleDialog] = useState(false);
   const [selectedItems, setSelectedItems] = useState([]);
   // const [page, setPage] = useState(0);
   const [rowsPerPage, setRowsPerPage] = useState(defaultRowsPerPage);
+  const [openDialog, setOpenDialog] = useState(false);
+  const [deleteId, setDeleteId] = useState(null);
 
   const { data, isLoading } = useQuery({
     queryKey: [tableName, page, rowsPerPage, dataSearch],
@@ -142,22 +146,45 @@ const DataTableSM = ({ multipleActions = [], page, setPage = () => {}, disableEd
       }
     }
   });
-
+  // Hàm gọi khi người dùng muốn xóa một bản ghi
   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",
-      cancellationText: "Hủy",
-      confirmationText: "Xóa"
-    })
-      .then(() => {
-        deleteMutation.mutate({
-          id,
-          tableName
-        });
-      })
-      .catch(() => {});
+    // console.log("id", id);
+    setDeleteId(id); // Lưu lại ID bản ghi muốn xóa
+    setOpenDialog(true); // Mở dialog xác nhận xóa
+  };
+
+  // Hàm xử lý khi đóng dialog (cả xác nhận và hủy)
+  const handleDialogClose = (confirm) => {
+    if (confirm) {
+      // console.log("Đã xác nhận xóa", deleteId);
+      // Gọi API hoặc mutation để xóa
+      deleteMutation.mutate({
+        id: deleteId,
+        tableName
+      });
+    } else {
+      toast.info("Đã hủy thao tác xóa.");
+    }
+    setOpenDialog(false); // Đóng dialog sau khi chọn
   };
+  // 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",
+  //     cancellationText: "Hủy",
+  //     confirmationText: "Xóa"
+  //   })
+  //     .then(() => {
+  //       deleteMutation.mutate({
+  //         id,
+  //         tableName
+  //       });
+  //     })
+  //     .finally(() => {
+  //       // Đảm bảo phần hủy thao tác được xử lý trong finally
+  //       toast.info("Đã hủy thao tác xóa.");
+  //     });
+  // };
   const handleChangeStatus = (Id) => {
     changeStatusMutation.mutate({
       tableName,
@@ -229,21 +256,42 @@ const DataTableSM = ({ multipleActions = [], page, setPage = () => {}, disableEd
     setRowsPerPage(newRowsPerPage);
     setPage(0);
   };
+  // Hàm gọi khi người dùng muốn xóa nhiều bản ghi
   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",
-      cancellationText: "Hủy",
-      confirmationText: "Đồng ý"
-    })
-      .then(() => {
-        deleteMultipleMutation.mutate({
-          tableName,
-          ids: selectedItems
-        });
-      })
-      .catch(() => {});
+    setOpenDeleteMultipleDialog(true); // Mở Dialog để xác nhận xóa
+  };
+
+  const handleDeleteMultipleDialogClose = (confirm) => {
+    if (confirm) {
+      // console.log("Đã xác nhận xóa các bản ghi", selectedItems);
+      // Gọi API hoặc mutation để xóa các bản ghi
+      deleteMultipleMutation.mutate({
+        tableName,
+        ids: selectedItems
+      });
+      // toast.success("Đã xóa các bản ghi.");
+    } else {
+      toast.info("Đã hủy thao tác xóa.");
+    }
+    setOpenDeleteMultipleDialog(false); // Đóng Dialog sau khi chọn
   };
+  // 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",
+  //     cancellationText: "Hủy",
+  //     confirmationText: "Đồng ý"
+  //   })
+  //     .then(() => {
+  //       deleteMultipleMutation.mutate({
+  //         tableName,
+  //         ids: selectedItems
+  //       });
+  //     })
+  //     .catch(() => {
+  //       toast.info("Đã hủy thao tác xóa.");
+  //     });
+  // };
   const theme = useTheme();
   const downXL = useMediaQuery(theme.breakpoints.down("xl"));
 
@@ -321,6 +369,13 @@ const DataTableSM = ({ multipleActions = [], page, setPage = () => {}, disableEd
           />
         </Grid>
       </Grid>
+      <DeleteConfirmationDialog open={openDialog} onClose={handleDialogClose} onConfirm={handleDialogClose} id={deleteId} />
+      <DeleteMultipleConfirmationDialog
+        open={openDeleteMultipleDialog}
+        onClose={handleDeleteMultipleDialogClose}
+        onConfirm={handleDeleteMultipleDialogClose}
+        selectedItems={selectedItems}
+      />
     </>
   );
 };

package/components/DataManagement/DeleteConfirmationDialog.jsx

@@ -0,0 +1,23 @@
+import React from "react";
+import { Dialog, DialogActions, DialogContent, DialogTitle, Button } from "@mui/material";
+import { toast } from "react-toastify"; // Nếu bạn đang sử dụng react-toastify
+
+const DeleteConfirmationDialog = ({ open, onClose, onConfirm, id }) => {
+  return (
+    <Dialog open={open} onClose={() => onClose(false)}>
+      <DialogTitle>Xác nhận xóa</DialogTitle>
+      <DialogContent>
+        <p>Bạn có chắc chắn muốn xóa bản ghi này không?</p>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={() => onClose(false)} color="primary">
+          Hủy
+        </Button>
+        <Button onClick={() => onConfirm(true)} color="primary">
+          Xóa
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
+export default DeleteConfirmationDialog;

package/components/DataManagement/DeleteMultipleConfirmationDialog.jsx

@@ -0,0 +1,23 @@
+import React, { useState } from "react";
+import { Dialog, DialogActions, DialogContent, DialogTitle, Button } from "@mui/material";
+import { toast } from "react-toastify"; // Nếu bạn đang sử dụng react-toastify
+
+const DeleteMultipleConfirmationDialog = ({ open, onClose, onConfirm, selectedItems }) => {
+  return (
+    <Dialog open={open} onClose={onClose}>
+      <DialogTitle>Xác nhận xóa</DialogTitle>
+      <DialogContent>
+        <p>Bạn có chắc chắn muốn xóa {selectedItems?.length} bản ghi này không?</p>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={() => onClose(false)} color="primary">
+          Hủy
+        </Button>
+        <Button onClick={() => onConfirm(selectedItems)} color="primary">
+          Xóa
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
+export default DeleteMultipleConfirmationDialog;

package/package.json

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