trithuc-mvc-react 3.4.6 → 3.4.8

package/api/index.js

@@ -87,49 +87,28 @@ export default api;
 export const getDatasFromTable = async ({ tableName, page, pageSize, data }) => {
   try {
     let res;
-
+    // Trường hợp dùng tableName với MVC4
     if (!apiUrl) {
-      // MVC4
       res = await api.get(`${getBaseUrl()}/Admin/${tableName}/LoadData`, {
         params: {
-          json: JSON.stringify(data ?? {}),
+          json: JSON.stringify(data),
           page,
           pageSize
         }
       });
     } else {
-      // .NET Core
+      // Trường hợp dùng api .NET Core
       res = await api.get(`${getBaseUrl()}/${apiUrl}/${tableName}`, {
         params: {
           PageNumber: page,
           PageSize: pageSize,
-          ...(data ?? {})
+          ...data
         }
       });
     }
-
-    // 🔴 ĐIỂM FIX QUAN TRỌNG NHẤT
-    if (!res || res.data == null) {
-      // console.warn("API returned empty response:", {
-      //   tableName,
-      //   page,
-      //   pageSize
-      // });
-
-      // ✅ RETURN OBJECT MẶC ĐỊNH – KHÔNG ĐƯỢC undefined
-      return {
-        data: [],
-        PermissionModel: {},
-        CountTrangThai: null,
-        status: false
-      };
-    }
-
     return res.data;
   } catch (error) {
-    // console.error("Error fetching data:", error);
-
-    // ✅ THROW → React Query onError xử lý
+    console.error("Error fetching data:", error);
     throw error;
   }
 };
@@ -165,278 +144,188 @@ export const getDatasFromTableDropdownlist = async ({ tableName, page, pageSize,
 
 export const getDataFromTable = async ({ tableName, id }) => {
   try {
-    let res;
-
     if (!apiUrl) {
-      // MVC4
-      res = await api.get(`${getBaseUrl()}/Admin/${tableName}/GetDetail`, {
-        params: { id }
+      const url = `${getBaseUrl()}/Admin/${tableName}/GetDetail`;
+      const res = await api.get(url, {
+        params: {
+          id
+        }
       });
+      return res.data;
     } else {
-      // .NET Core
-      res = await api.get(`${getBaseUrl()}/${apiUrl}/${tableName}/${id}`);
+      const url = `${getBaseUrl()}/${apiUrl}/${tableName}/${id}`;
+      const res = await api.get(url);
+      return res.data;
     }
-
-    // 🔴 FIX CỐT LÕI: KHÔNG BAO GIỜ return undefined
-    if (!res || res.data == null) {
-      // console.warn("API returned empty detail:", { tableName, id });
-
-      return {
-        data: null,
-        status: false,
-        message: "Không tìm thấy dữ liệu"
-      };
-    }
-
-    return res.data;
   } catch (error) {
-    // console.error("Error fetching detail:", error);
-    throw error; // React Query onError xử lý
+    console.error("Error fetching data:", error);
+    throw error;
   }
 };
 
 export const deleteDataFromTable = async ({ tableName, id }) => {
-  try {
-    let res;
-
-    if (!apiUrl) {
-      // MVC4
-      res = await api.post(`${getBaseUrl()}/Admin/${tableName}/Delete`, { id });
-    } else {
-      // .NET Core
-      const ids = Array.isArray(id) ? id : [id];
-
-      res = await api.delete(`${getBaseUrl()}/${apiUrl}/${tableName}`, {
-        data: ids,
-        headers: {
-          "Content-Type": "application/json-patch+json"
-        }
-      });
-    }
-
-    // 🔴 FIX QUAN TRỌNG NHẤT
-    if (!res || res.data == null) {
-      // console.warn("Delete API returned empty response:", { tableName, id });
-
-      return {
-        status: true,
-        message: "Xóa thành công"
-      };
-    }
-
+  if (!apiUrl) {
+    // Khi không có apiUrl, thực hiện DELETE đến URL cụ thể với tableName
+    const res = await api.post(`${getBaseUrl()}/Admin/${tableName}/Delete`, {
+      id
+    });
+    return res.data;
+  } else {
+    // Khi có apiUrl, chuyển id thành mảng string và thực hiện DELETE
+    const ids = Array.isArray(id) ? id : [id]; // Chuyển id thành mảng nếu chưa phải là mảng
+    const res = await api.delete(`${getBaseUrl()}/${apiUrl}/${tableName}`, {
+      data: ids, // Truyền ids như là dữ liệu của body
+      headers: {
+        "Content-Type": "application/json-patch+json" // Đảm bảo Content-Type là đúng
+      }
+    });
     return res.data;
-  } catch (error) {
-    // console.error("Error deleting data:", error);
-    throw error; // React Query mutation onError xử lý
   }
 };
-
 export const deleteMultipleDataFromTable = async ({ tableName, ids }) => {
-  try {
-    let res;
-
-    if (!apiUrl) {
-      // MVC4
-      res = await api.post(`${getBaseUrl()}/Admin/${tableName}/DeleteMulti`, {
-        ids
-      });
-    } else {
-      // .NET Core
-      res = await api.delete(`${getBaseUrl()}/${apiUrl}/${tableName}`, {
-        data: ids,
-        headers: {
-          "Content-Type": "application/json-patch+json"
-        }
-      });
-    }
-
-    // 🔴 FIX QUAN TRỌNG NHẤT CHO REACT QUERY v5
-    if (!res || res.data == null) {
-      // console.warn("DeleteMultiple API returned empty response:", {
-      //   tableName,
-      //   ids
-      // });
-
-      return {
-        status: true,
-        message: "Xóa nhiều bản ghi thành công"
-      };
-    }
-
+  if (!apiUrl) {
+    const res = await api.post(`${getBaseUrl()}/Admin/${tableName}/DeleteMulti`, {
+      ids
+    });
+    return res.data;
+  } else {
+    const res = await api.delete(`${getBaseUrl()}/${apiUrl}/${tableName}`, {
+      data: ids, // Truyền ids như là dữ liệu của body
+      headers: {
+        "Content-Type": "application/json-patch+json" // Đảm bảo Content-Type là đúng
+      }
+    });
     return res.data;
-  } catch (error) {
-    // console.error("Error deleting multiple data:", error);
-    throw error; // để useMutation onError xử lý
   }
 };
-
 export const saveDataToTable = async ({ tableName, data }) => {
-  try {
-    let res;
-
-    if (!apiUrl) {
-      // MVC4
-      res = await api.post(`${getBaseUrl()}/Admin/${tableName}/SaveData`, {
-        json: JSON.stringify({ ...data })
-      });
+  if (!apiUrl) {
+    const res = await api.post(`${getBaseUrl()}/Admin/${tableName}/SaveData`, {
+      json: JSON.stringify({ ...data })
+    });
+    return res.data;
+  } else {
+    if (!data.Id || data.Id === "0") {
+      // Khi không có ID, thực hiện POST đến apiUrl
+      const res = await api.post(`${getBaseUrl()}/${apiUrl}/${tableName}`, data);
+      return res.data;
     } else {
-      // .NET Core
-      if (!data?.Id || data.Id === "0") {
-        // CREATE
-        res = await api.post(`${getBaseUrl()}/${apiUrl}/${tableName}`, data);
-      } else {
-        // UPDATE
-        res = await api.put(`${getBaseUrl()}/${apiUrl}/${tableName}/${data.Id}`, data);
-      }
+      // Khi có ID, thực hiện PUT đến apiUrl với ID trong URL
+      const res = await api.put(`${getBaseUrl()}/${apiUrl}/${tableName}/${data.Id}`, data);
+      return res.data;
     }
-
-    // 🔴 FIX BẮT BUỘC CHO REACT QUERY v5
-    if (!res || res.data == null) {
-      // console.warn("SaveData API returned empty response:", {
-      //   tableName,
-      //   data
-      // });
-
-      return {
-        status: true,
-        message: "Lưu dữ liệu thành công"
-      };
-    }
-
-    return res.data;
-  } catch (error) {
-    // console.error("Error saving data:", error);
-    throw error; // để useMutation onError xử lý
   }
 };
-
 export const changeStatusDataToTable = async ({ tableName, id, fieldName }) => {
-  try {
-    let res;
-
-    if (!apiUrl) {
-      // MVC4
-      res = await api.post(`${getBaseUrl()}/Admin/${tableName}/ChangeStatus`, { id });
-    } else {
-      // .NET Core
-      res = await api.post(
-        `${getBaseUrl()}/${apiUrl}/${tableName}/ChangeStatus`,
-        fieldName ? { id, fieldName } : { id }
-      );
-    }
-
-    // 🔴 FIX BẮT BUỘC CHO REACT QUERY v5
-    if (!res || res.data == null) {
-      // console.warn("ChangeStatus API returned empty response", {
-      //   tableName,
-      //   id,
-      //   fieldName
-      // });
-
-      return {
-        status: true,
-        message: "Thay đổi trạng thái thành công"
-      };
-    }
-
+  if (!apiUrl) {
+    const res = await api.post(`${getBaseUrl()}/Admin/${tableName}/ChangeStatus`, {
+      id
+    });
     return res.data;
-  } catch (error) {
-    // console.error("Error changing status:", error);
-    throw error; // để useMutation onError xử lý
+  } else {
+    try {
+      if (fieldName) {
+        const res = await api.post(
+          `${getBaseUrl()}/${apiUrl ? `${apiUrl}/` : "Admin/"}${tableName}/ChangeStatus`,
+          {
+            id,
+            fieldName
+          },
+          {
+            headers: {
+              "Content-Type": "application/json-patch+json" // Đảm bảo Content-Type là đúng
+            }
+          }
+        );
+        return res.data;
+      } else {
+        const res = await api.post(`${getBaseUrl()}/${apiUrl ? `${apiUrl}/` : "Admin/"}${tableName}/ChangeStatus`, id, {
+          headers: {
+            "Content-Type": "application/json-patch+json" // Đảm bảo Content-Type là đúng
+          }
+        });
+        return res.data;
+      }
+    } catch (error) {
+      console.error("Error changing status:", error);
+      // Xử lý lỗi tùy thuộc vào nhu cầu của bạn, có thể ném ra hoặc trả về giá trị mặc định
+      throw error; // Hoặc return { success: false, message: error.message };
+    }
   }
 };
 
 export const exportExcel = async ({ tableName, data }) => {
-  try {
-    let res;
-
-    if (!apiUrl) {
-      // MVC4
-      res = await api.get(`${getBaseUrl()}/Admin/${tableName}/ExportData`, {
+  if (!apiUrl) {
+    const res = await api.get(`${getBaseUrl()}/Admin/${tableName}/ExportData`, {
+      params: {
+        json: JSON.stringify(data)
+      }
+    });
+    return res.data;
+  } else {
+    const res = await api.get(
+      `${getBaseUrl()}/${apiUrl}/${tableName}/ExportData`,
+      {
         params: {
-          json: JSON.stringify(data)
-        },
-        responseType: "blob"
-      });
-    } else {
-      // .NET Core
-      res = await api.get(`${getBaseUrl()}/${apiUrl}/${tableName}/ExportData`, {
-        params: { ...data },
-        responseType: "blob"
-      });
-    }
-
-    // 🔴 BẮT BUỘC: luôn return value
-    if (!res || !res.data) {
-      throw new Error("Export Excel failed: empty response");
-    }
-
-    return res.data; // Blob
-  } catch (error) {
-    // console.error("Error exporting excel:", error);
-    throw error;
+          ...data
+        }
+      },
+      {
+        headers: {
+          "Content-Type": "application/json-patch+json" // Đảm bảo Content-Type là đúng
+        }
+      }
+    );
+    return res.data;
   }
 };
 
 export const uploadFile = async (formData) => {
-  try {
-    // Clone FormData để tránh append trùng
-    const fd = new FormData();
-    formData.forEach((value, key) => {
-      fd.append(key, value);
+  // 1. Lấy URL hiện tại
+  const currentUrl = window.location.href;
+
+  // 2. Append vào formData
+  formData.append("currentUrl", currentUrl);
+
+  // 3. Log tất cả key-value trong FormData để kiểm tra
+  // console.log("===== FormData Contents =====");
+  // formData.forEach((value, key) => {
+  //   console.log(key, value);
+  // });
+  if (!apiUrl) {
+    const res = await api.post(`${getBaseUrl()}/Handler/fileUploader.ashx`, formData, {
+      headers: {
+        "Content-Type": "multipart/form-data"
+      }
+    });
+    return res.data;
+  } else {
+    const res = await api.post(`${getBaseUrl()}/${apiUrl}/FileUploader`, formData, {
+      headers: {
+        "Content-Type": "multipart/form-data"
+      }
     });
-
-    // Append currentUrl 1 lần
-    fd.append("currentUrl", window.location.href);
-
-    let res;
-
-    if (!apiUrl) {
-      // MVC / ashx
-      res = await api.post(`${getBaseUrl()}/Handler/fileUploader.ashx`, fd);
-    } else {
-      // .NET Core
-      res = await api.post(`${getBaseUrl()}/${apiUrl}/FileUploader`, fd);
-    }
-
-    // 🔴 FIX BẮT BUỘC REACT QUERY v5
-    if (!res || res.data == null) {
-      // console.warn("Upload API returned empty response");
-
-      return {
-        status: true,
-        message: "Upload thành công"
-      };
-    }
-
     return res.data;
-  } catch (error) {
-    // console.error("Error uploading file:", error);
-    throw error;
   }
 };
 
-export const huongDan = async ({ data } = {}) => {
-  try {
-    // Không có apiUrl → luôn return array
-    if (!apiUrl) {
-      return [];
-    }
-
-    const res = await api.get(`${getBaseUrl()}/${apiUrl}/HuongDanSuDung/Dropdownlist`, {
-      params: { ...data }
-    });
-
-    // 🔴 BẮT BUỘC: không để undefined
-    if (!res || res.data == null) {
-      // console.warn("HuongDan API returned empty response");
-      return [];
-    }
-
-    // Đảm bảo luôn là array
-    return Array.isArray(res.data) ? res.data : [];
-  } catch (error) {
-    // console.error("Error fetching huongDan:", error);
+export const huongDan = async ({ data }) => {
+  if (!apiUrl) {
     return [];
+  } else {
+    const res = await api.get(
+      `${getBaseUrl()}/${apiUrl}/HuongDanSuDung/Dropdownlist`,
+      {
+        params: {
+          ...data
+        }
+      },
+      {
+        headers: {
+          "Content-Type": "application/json-patch+json" // Đảm bảo Content-Type là đúng
+        }
+      }
+    );
+    return res.data;
   }
 };

package/components/DataManagement/DataTable.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,
@@ -63,16 +63,17 @@ const DataTable = ({ multipleActions = [], page, setPage = () => {}, disableEdit
   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(defaultSortColumn?.field || "");
-  const [order, setOrder] = useState(defaultSortColumn?.defaultOrder || "asc");
+  const [orderBy, setOrderBy] = useState("");
+  const [order, setOrder] = useState("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) => {
@@ -81,12 +82,11 @@ const DataTable = ({ multipleActions = [], page, setPage = () => {}, disableEdit
     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: {
@@ -97,76 +97,96 @@ const DataTable = ({ multipleActions = [], page, setPage = () => {}, disableEdit
           })
         }
       }),
-    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) {
+        const message = error.response.data.message;
+        toast.error(message);
+      } 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) {
+        const message = error.response.data.message;
+        toast.error(message);
+      } 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) {
+        const message = error.response.data.message;
+        toast.error(message);
+      } 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