trithuc-mvc-react 3.4.6 → 3.4.8

package/components/DataManagement/DataTableSM.jsx

@@ -13,7 +13,7 @@ import { useEffect, useMemo, useState } from "react";
 import TablePaginationCustom from "../table/TablePagination";
 
 import { useConfirm } from "material-ui-confirm";
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useMutation, useQuery, useQueryClient } from "react-query";
 import { toast } from "react-toastify";
 import {
   changeStatusDataToTable,
@@ -62,16 +62,16 @@ const DataTableSM = ({ multipleActions = [], page, setPage = () => {}, disableEd
   const [rowsPerPage, setRowsPerPage] = useState(defaultRowsPerPage);
   const [openDialog, setOpenDialog] = useState(false);
   const [deleteId, setDeleteId] = useState(null);
-  const defaultSortColumn = columns.find((c) => c.defaultSort);
+  const [orderBy, setOrderBy] = useState("");
+  const [order, setOrder] = useState("asc");
 
-  const [orderBy, setOrderBy] = useState(defaultSortColumn?.field || "");
-  const [order, setOrder] = useState(defaultSortColumn?.defaultOrder || "asc");
   useEffect(() => {
-    const defaultSortColumn = columns.find((c) => c.defaultSort);
-    if (defaultSortColumn) {
-      setOrderBy(defaultSortColumn.field);
-      setOrder(defaultSortColumn.defaultOrder || "asc");
-    }
+    if (!Array.isArray(columns) || columns.length === 0) return;
+
+    const defaultSortColumn = columns.find((c) => c.defaultSort) || columns[0];
+
+    setOrderBy(defaultSortColumn.field);
+    setOrder(defaultSortColumn.defaultOrder || "asc");
   }, [columns]);
 
   const handleRequestSort = (event, property) => {
@@ -80,12 +80,11 @@ const DataTableSM = ({ multipleActions = [], page, setPage = () => {}, disableEd
     setOrderBy(property);
   };
 
-  // 1️⃣ Xoá defaultQueryOptions khỏi useQuery
   const { data, isLoading } = useQuery({
     queryKey: [tableName, page, rowsPerPage, dataSearch, order, orderBy],
     queryFn: () =>
       getDatasFromTable({
-        tableName,
+        tableName: tableName,
         page: page + 1,
         pageSize: rowsPerPage,
         data: {
@@ -96,76 +95,107 @@ const DataTableSM = ({ multipleActions = [], page, setPage = () => {}, disableEd
           })
         }
       }),
-    keepPreviousData: true,
-    placeholderData: () => ({
-      data: [],
-      PermissionModel: {},
-      CountTrangThai: null,
-      status: false
-    }),
-    staleTime: 60_000,
-    gcTime: 30 * 60_000, // ✅ v5 (cacheTime → gcTime)
-    refetchOnWindowFocus: true,
-    refetchInterval: 30_000,
-    onSuccess: ({ PermissionModel = {}, CountTrangThai, status }) => {
+    defaultQueryOptions,
+    // keepPreviousData: true,
+    onSuccess: ({ PermissionModel, CountTrangThai, status }) => {
       if (dataSearch?.TrangThaiXuLy !== undefined) {
-        PermissionModel.TrangThaiXuLy = dataSearch.TrangThaiXuLy;
+        PermissionModel.TrangThaiXuLy = dataSearch?.TrangThaiXuLy;
       }
-
       setPermission(PermissionModel);
 
       if (CountTrangThai) {
         const keyCounter = `${tableName}_${userId}_TrangThaiXuLyCounter`;
         localStorage.setItem(keyCounter, JSON.stringify(CountTrangThai));
-        queryClient.invalidateQueries({
-          queryKey: [tableName, "CountAllTrangThaiXuly"]
-        });
+        // 👉 Invalidate query để Tab reload ngay
+        queryClient.invalidateQueries({ queryKey: [tableName, "CountAllTrangThaiXuly"] });
       }
 
       if (status) {
-        window.scrollTo({ top: 0, behavior: "smooth" });
+        // console.log("LOAD LAI PermissionModel");
+        // Cuộn lên đầu trang khi tải dữ liệu thành công
+        window.scrollTo({
+          top: 0, // Vị trí pixel muốn cuộn tới
+          behavior: "smooth" // Tùy chọn cuộn mượt
+        });
       }
     }
   });
-
-  // 2️⃣ Mutation cũng cần sửa, bỏ defaultMutationOptions nếu có
-  const changeStatusMutation = useMutation({
-    mutationFn: changeStatusDataToTable,
-    onSuccess: ({ status = false, message = "Có lỗi xảy ra !" }) => {
-      toast.success(status ? message : "Thay đổi trạng thái thành công !");
+  const changeStatusMutation = useMutation(changeStatusDataToTable, {
+    onSuccess: ({ status = false, message = " Có lỗi xảy ra !" }) => {
+      if (URL_APPLICATION_API) {
+        toast.success(message);
+      } else {
+        toast.success("Thay đổi trạng thái thành công !");
+      }
       queryClient.invalidateQueries({ queryKey: [tableName] });
       queryClient.invalidateQueries({ queryKey: [tableName, "CountAllTrangThaiXuly"] });
     },
     onError: (error) => {
-      const message = error?.response?.data?.message || "Đã xảy ra lỗi không mong muốn.";
-      toast.error(message);
+      if (error.response && error.response.data && error.response.data.errors) {
+        const errors = error.response.data.errors;
+        // Chuyển đổi đối tượng lỗi thành chuỗi để hiển thị
+        const errorMessages = Object.entries(errors)
+          .map(([field, messages]) => `${field}: ${messages.join(", ")}`)
+          .join("\n");
+        toast.error(errorMessages);
+      } else {
+        // Nếu lỗi không theo định dạng mong đợi, hiển thị thông tin lỗi chung
+        toast.error("Đã xảy ra lỗi không mong muốn.");
+      }
     }
   });
+  const deleteMutation = useMutation(deleteDataFromTable, {
+    onSuccess: ({ status = false, message = " Có lỗi xảy ra !" }) => {
+      if (status) {
+        if (URL_APPLICATION_API) {
+          toast.success(message);
+        } else {
+          toast.success("Xóa thành công !");
+        }
+      } else {
+        toast.error(" Có lỗi xảy ra !");
+      }
 
-  const deleteMutation = useMutation({
-    mutationFn: deleteDataFromTable,
-    onSuccess: ({ status = false, message = "Có lỗi xảy ra !" }) => {
-      toast[status ? "success" : "error"](status ? message : "Có lỗi xảy ra !");
       queryClient.invalidateQueries({ queryKey: [tableName] });
       queryClient.invalidateQueries({ queryKey: [tableName, "CountAllTrangThaiXuly"] });
     },
     onError: (error) => {
-      const message = error?.response?.data?.message || "Đã xảy ra lỗi không mong muốn.";
-      toast.error(message);
+      if (error.response && error.response.data && error.response.data.errors) {
+        const errors = error.response.data.errors;
+        // Chuyển đổi đối tượng lỗi thành chuỗi để hiển thị
+        const errorMessages = Object.entries(errors)
+          .map(([field, messages]) => `${field}: ${messages.join(", ")}`)
+          .join("\n");
+        toast.error(errorMessages);
+      } else {
+        // Nếu lỗi không theo định dạng mong đợi, hiển thị thông tin lỗi chung
+        toast.error("Đã xảy ra lỗi không mong muốn.");
+      }
     }
   });
-
-  const deleteMultipleMutation = useMutation({
-    mutationFn: deleteMultipleDataFromTable,
-    onSuccess: ({ status = false, message = "Có lỗi xảy ra !" }) => {
-      toast[status ? "success" : "error"](status ? message : "Xóa thành công !");
+  const deleteMultipleMutation = useMutation(deleteMultipleDataFromTable, {
+    onSuccess: ({ status = false, message = " Có lỗi xảy ra !" }) => {
+      if (URL_APPLICATION_API) {
+        toast.success(message);
+      } else {
+        toast.success("Xóa thành công !");
+      }
       setSelectedItems([]);
       queryClient.invalidateQueries({ queryKey: [tableName] });
       queryClient.invalidateQueries({ queryKey: [tableName, "CountAllTrangThaiXuly"] });
     },
     onError: (error) => {
-      const message = error?.response?.data?.message || "Đã xảy ra lỗi không mong muốn.";
-      toast.error(message);
+      if (error.response && error.response.data && error.response.data.errors) {
+        const errors = error.response.data.errors;
+        // Chuyển đổi đối tượng lỗi thành chuỗi để hiển thị
+        const errorMessages = Object.entries(errors)
+          .map(([field, messages]) => `${field}: ${messages.join(", ")}`)
+          .join("\n");
+        toast.error(errorMessages);
+      } else {
+        // Nếu lỗi không theo định dạng mong đợi, hiển thị thông tin lỗi chung
+        toast.error("Đã xảy ra lỗi không mong muốn.");
+      }
     }
   });
   // Hàm gọi khi người dùng muốn xóa một bản ghi
@@ -349,7 +379,7 @@ const DataTableSM = ({ multipleActions = [], page, setPage = () => {}, disableEd
           /> */}
           {isLoading ? (
             <TableBody>
-              <TableRowsLoader rowsNum={10} colsNum={columns.length + 3} />
+              <TableRowsLoader rowsNum={10} colsNum={1} />
             </TableBody>
           ) : (
             <TableBody>

package/components/DataManagement/EditorForm.jsx

@@ -8,7 +8,7 @@ import { useEffect } from "react";
 
 import { URL_APPLICATION, URL_APPLICATION_API } from "@/constants";
 import { yupResolver } from "@hookform/resolvers/yup";
-import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useMutation, useQueryClient } from "react-query";
 import { toast } from "react-toastify";
 import { saveDataToTable } from "../../api";
 import FormField from "./FormField";
@@ -91,30 +91,35 @@ function EditorForm({ fields, submitRef }) {
     }
   }, [selectedEditItem]);
 
-  const saveMutation = useMutation({
-    mutationFn: saveDataToTable,
+  const saveMutation = useMutation(saveDataToTable, {
     onSuccess: ({ status = false, message = " Có lỗi xảy ra !" }, { data: { Id } }) => {
       if (status) {
-        toast.success(URL_APPLICATION_API ? message : Id === 0 ? "Thêm thành công!" : "Cập nhật thành công!");
-        queryClient.invalidateQueries({ queryKey: [tableName] });
+        if (URL_APPLICATION_API) {
+          toast.success(message);
+        } else {
+          toast.success(Id == 0 ? "Thêm thành công!" : "Cập nhật thành công!");
+        }
+        queryClient.invalidateQueries(tableName);
         setOpenEditorDialog(false);
       } else {
+        console.log(status, Id);
         toast.error(message);
       }
     },
     onError: (error) => {
-      const errors = error?.response?.data?.errors;
-      if (errors) {
+      if (error.response && error.response.data && error.response.data.errors) {
+        const errors = error.response.data.errors;
+        // Chuyển đổi đối tượng lỗi thành chuỗi để hiển thị
         const errorMessages = Object.entries(errors)
           .map(([field, messages]) => `${field}: ${messages.join(", ")}`)
           .join("\n");
         toast.error(errorMessages);
       } else {
+        // Nếu lỗi không theo định dạng mong đợi, hiển thị thông tin lỗi chung
         toast.error("Đã xảy ra lỗi không mong muốn.");
       }
     }
   });
-
   const onSubmit = (data) => {
     fields.reduce((data, { type, field, datas, keyValueLabel, keyValue, keyLabel }) => {
       if (type === "date") {

package/components/DataManagement/TableRowRenderSM.jsx

@@ -44,7 +44,7 @@ export const TableRowRenderSM = ({
 
   const theme = useTheme();
   const downXl = useMediaQuery(theme.breakpoints.down("xl"));
-
+  const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
   return (
     <TableRow hover key={row[selectedField]} selected={selected}>
       <TableCell
@@ -77,17 +77,54 @@ export const TableRowRenderSM = ({
         >
           {/* Hiển thị các cột dữ liệu */}
           <Grid container spacing={1}>
-            {columns.map(
-              ({ field, label, type = "text", valueGetter = (row) => row[field], renderCell, valueFormat = (e) => e }) => {
-                const value = renderCell ? renderCell(row) : valueFormat(valueGetter(row));
-                return (
-                  <Grid size={12} key={`${row[selectedField]}-${field}`}>
-                    <strong>{label}: </strong> {value}
-                  </Grid>
-                );
-              }
-            )}
+            {columns.map(({ field, label, valueGetter = (row) => row[field], renderCell, valueFormat = (e) => e }) => {
+              const rawValue = renderCell ? renderCell(row) : valueFormat(valueGetter(row));
+
+              return (
+                <Grid
+                  key={`${row[selectedField]}-${field}`}
+                  size={12}
+                  sx={{
+                    minWidth: 0,
+                    maxWidth: "100%",
+                    overflow: "hidden"
+                  }}
+                >
+                  <Typography
+                    component="div"
+                    variant="body2"
+                    sx={{
+                      lineHeight: 1.4,
+                      wordBreak: "break-word",
+                      overflowWrap: "anywhere",
+                      whiteSpace: "normal"
+                    }}
+                  >
+                    <Box component="span" fontWeight={600}>
+                      {label}:
+                    </Box>
+
+                    <Box
+                      sx={{
+                        maxWidth: "100%",
+                        overflow: "hidden",
+
+                        // 🔥 ÉP CO TOÀN BỘ COMPONENT CON
+                        "& *": {
+                          maxWidth: "100%",
+                          minWidth: 0,
+                          boxSizing: "border-box"
+                        }
+                      }}
+                    >
+                      {rawValue}
+                    </Box>
+                  </Typography>
+                </Grid>
+              );
+            })}
           </Grid>
+
           {/* Công tắc trạng thái */}
           {!disableStatus && canEdit && (
             <Box sx={{ mt: 1 }}>
@@ -100,74 +137,138 @@ export const TableRowRenderSM = ({
           )}
 
           {/* Các nút thao tác */}
-          <Box
-            mt={2}
-            pt={1}
-            display="flex"
-            gap={1}
-            flexWrap="wrap"
-            justifyContent="flex-end"
-            borderTop="1px solid"
-            borderColor="divider"
-          >
+          <Box mt={2} pt={1} borderTop="1px solid" borderColor="divider" display="flex" flexDirection="column" gap={1}>
             {!disableCellThaoTac && (
               <>
-                {!disableEdit && canEdit && (
-                  <Button
-                    size="small"
-                    variant="contained"
-                    color="primary"
-                    onClick={() => onEdit(row)}
-                    startIcon={<EditOutlined />}
-                    sx={modernButtonStyle}
-                  >
-                    Cập nhật
-                  </Button>
-                )}
-
-                {canView && !tableActions?.some(({ permissionType }) => permissionType === "view") && (
-                  <Button
-                    size="small"
-                    variant="outlined"
-                    color="info"
-                    onClick={() => onView(row)}
-                    startIcon={<RemoveRedEyeOutlinedIcon />}
-                    sx={modernButtonStyle}
-                  >
-                    Xem
-                  </Button>
-                )}
-
-                {!disableDelete && canDelete && (
-                  <Button
-                    size="small"
-                    variant="outlined"
-                    color="error"
-                    onClick={() => onDelete(row[selectedField])}
-                    startIcon={<DeleteOutlineIcon />}
-                    sx={modernButtonStyle}
-                  >
-                    Xóa
-                  </Button>
-                )}
-
-                {tableActionsOnTable.map(
-                  ({ title, size, onClick, element, visible = true }, idx) =>
-                    (typeof visible === "function" ? visible(row) : visible) && (
-                      <Button
-                        key={idx}
-                        size="small"
-                        variant="outlined"
-                        onClick={() => onClick(row)}
-                        startIcon={element}
-                        sx={modernButtonStyle}
-                      >
-                        {title === "xem chi tiết" ? "Xem" : title}
-                      </Button>
-                    )
-                )}
-
-                <MoreMenu actions={tableActionsOnMoreMenu} data={row} />
+                <Box display="grid" gridTemplateColumns={isMobile ? "repeat(3, 1fr)" : "auto"} gap={1}>
+                  {!disableEdit && canEdit && (
+                    <Button
+                      fullWidth
+                      size={isMobile ? "small" : "medium"}
+                      variant="contained"
+                      color="primary"
+                      onClick={() => onEdit(row)}
+                      startIcon={<EditOutlined />}
+                      sx={{
+                        ...modernButtonStyle,
+
+                        // compact mobile
+                        minHeight: 36,
+                        paddingX: 1,
+
+                        // icon - text spacing
+                        gap: 0.5,
+                        "& .MuiButton-startIcon": {
+                          marginRight: 0.5,
+                          marginLeft: 0
+                        },
+                        "& .MuiButton-startIcon svg": {
+                          fontSize: 18
+                        }
+                      }}
+                    >
+                      Cập nhật
+                    </Button>
+                  )}
+
+                  {canView && !tableActions?.some(({ permissionType }) => permissionType === "view") && (
+                    <Button
+                      fullWidth
+                      size={isMobile ? "small" : "medium"}
+                      variant="outlined"
+                      color="info"
+                      onClick={() => onView(row)}
+                      startIcon={<RemoveRedEyeOutlinedIcon />}
+                      sx={{
+                        ...modernButtonStyle,
+
+                        // compact mobile
+                        minHeight: 36,
+                        paddingX: 1,
+
+                        // icon - text spacing
+                        gap: 0.5,
+                        "& .MuiButton-startIcon": {
+                          marginRight: 0.5,
+                          marginLeft: 0
+                        },
+                        "& .MuiButton-startIcon svg": {
+                          fontSize: 18
+                        }
+                      }}
+                    >
+                      Xem
+                    </Button>
+                  )}
+
+                  {!disableDelete && canDelete && (
+                    <Button
+                      fullWidth
+                      size={isMobile ? "small" : "medium"}
+                      variant="outlined"
+                      color="error"
+                      onClick={() => onDelete(row[selectedField])}
+                      startIcon={<DeleteOutlineIcon />}
+                      sx={{
+                        ...modernButtonStyle,
+
+                        // compact mobile
+                        minHeight: 36,
+                        paddingX: 1,
+
+                        // icon - text spacing
+                        gap: 0.5,
+                        "& .MuiButton-startIcon": {
+                          marginRight: 0.5,
+                          marginLeft: 0
+                        },
+                        "& .MuiButton-startIcon svg": {
+                          fontSize: 18
+                        }
+                      }}
+                    >
+                      Xóa
+                    </Button>
+                  )}
+
+                  {tableActionsOnTable.map(
+                    ({ title, onClick, element, visible = true }, idx) =>
+                      (typeof visible === "function" ? visible(row) : visible) && (
+                        <Button
+                          key={idx}
+                          fullWidth
+                          size="small"
+                          variant="outlined"
+                          onClick={() => onClick(row)}
+                          startIcon={element}
+                          sx={{
+                            ...modernButtonStyle,
+
+                            // compact mobile
+                            minHeight: 36,
+                            paddingX: 1,
+
+                            // icon - text spacing
+                            gap: 0.5,
+                            "& .MuiButton-startIcon": {
+                              marginRight: 0.5,
+                              marginLeft: 0
+                            },
+                            "& .MuiButton-startIcon svg": {
+                              fontSize: 18
+                            }
+                          }}
+                        >
+                          {title === "xem chi tiết" ? "Xem" : title}
+                        </Button>
+                      )
+                  )}
+                </Box>
+
+                {/* More menu luôn nằm riêng 1 hàng */}
+                <Box display="flex" justifyContent="flex-end">
+                  <MoreMenu actions={tableActionsOnMoreMenu} data={row} />
+                </Box>
               </>
             )}
           </Box>
@@ -180,7 +281,7 @@ const modernButtonStyle = {
   fontWeight: 400,
   fontSize: "0.65rem",
   borderRadius: 2,
-  minWidth: 90,
+  minWidth: 0,
   textTransform: "none",
   px: 1,
   py: 0.5,