trithuc-mvc-react 3.4.1 → 3.4.3

package/api/index.js

@@ -1,41 +1,87 @@
+import qs from "qs"; // 👈 serialize query params
 import { storeGetlanguage, storeGetToken } from "@/utils/storage";
 import axios from "axios";
 
 let baseUrl = "";
 let apiUrl = "";
 
+/**
+ * Cấu hình base URL cho toàn ứng dụng
+ */
 export function configure({ customBaseUrl, customApiUrl }) {
   if (customBaseUrl) {
     baseUrl = customBaseUrl;
-    apiUrl = customApiUrl;
+    apiUrl = customApiUrl || customBaseUrl;
   } else {
-    console.warn("baseUrl chưa được định cấu hình. Sử dụng giá trị mặc định.");
+    console.warn("⚠️ baseUrl chưa được định cấu hình. Sử dụng giá trị mặc định.");
   }
 }
 
+/**
+ * Lấy base URL hiện tại
+ */
 export function getBaseUrl() {
   return baseUrl;
 }
 
+/**
+ * Tạo instance axios chung
+ */
 const api = axios.create({
   baseURL: getBaseUrl() ?? "/",
+  responseType: "json",
   transitional: {
     silentJSONParsing: false
   },
-  responseType: "json"
-});
 
-const token = storeGetToken();
-if (token) api.defaults.headers.common["Authorization"] = `Bearer ${token}`;
+  // 👇 Tùy chỉnh serialize query params để gửi mảng đúng định dạng
+  paramsSerializer: (params) =>
+    qs.stringify(params, {
+      arrayFormat: "repeat", // => ?a=1&a=2
+      skipNulls: true // bỏ các giá trị null
+    })
+});
 
-// Interceptor tối ưu hóa
+/**
+ * Interceptor REQUEST
+ */
 api.interceptors.request.use((config) => {
+  const token = storeGetToken();
   const language = storeGetlanguage();
-  config.headers["Authorization"] = `Bearer ${token}`;
+
+  // 🔐 Thêm Authorization + ngôn ngữ
+  if (token) config.headers["Authorization"] = `Bearer ${token}`;
   if (language) config.headers["Accept-Language"] = language;
+
+  // ⚙️ Nếu query GET quá dài, tự động chuyển sang POST
+  if (config.method?.toUpperCase() === "GET" && config.params) {
+    const queryString = qs.stringify(config.params, { arrayFormat: "repeat" });
+
+    if (queryString.length > 2000) {
+      config.method = "POST";
+      config.data = config.params;
+      delete config.params;
+      console.warn("⚙️ Query quá dài → tự động chuyển sang POST:", config.url);
+    }
+  }
+
   return config;
 });
 
+/**
+ * Interceptor RESPONSE (có thể mở rộng sau này, ví dụ refresh token)
+ */
+api.interceptors.response.use(
+  (response) => response,
+  (error) => {
+    if (error.response?.status === 401) {
+      console.error("🚫 Token hết hạn hoặc không hợp lệ.");
+      // 👉 Có thể thêm xử lý refresh token ở đây sau này
+    }
+    return Promise.reject(error);
+  }
+);
+
 export default api;
 
 export const getDatasFromTable = async ({ tableName, page, pageSize, data }) => {

package/components/DataManagement/DataTable.jsx

@@ -16,6 +16,7 @@ import TableToolbar from "./TableToolbar";
 import { useDataTable } from "./hooks";
 import DeleteConfirmationDialog from "./DeleteConfirmationDialog";
 import DeleteMultipleConfirmationDialog from "./DeleteMultipleConfirmationDialog";
+import { storeGetUser } from "../../utils/storage";
 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
@@ -36,7 +37,8 @@ const DataTable = ({ multipleActions = [], page, setPage = () => {}, disableEdit
     hasTabpanel,
     defaultRowsPerPage = 5
   } = useDataTable();
-
+  const user = storeGetUser();
+  const userId = user?.UserId;
   const { set: setPermission } = usePermission(tableName);
   const queryClient = useQueryClient();
   const confirm = useConfirm();
@@ -81,11 +83,19 @@ const DataTable = ({ multipleActions = [], page, setPage = () => {}, disableEdit
       }),
     defaultQueryOptions,
     // keepPreviousData: true,
-    onSuccess: ({ PermissionModel, status }) => {
+    onSuccess: ({ PermissionModel, CountTrangThai, status }) => {
       if (dataSearch?.TrangThaiXuLy !== undefined) {
         PermissionModel.TrangThaiXuLy = dataSearch?.TrangThaiXuLy;
       }
       setPermission(PermissionModel);
+
+      if (CountTrangThai) {
+        const keyCounter = `${tableName}_${userId}_TrangThaiXuLyCounter`;
+        localStorage.setItem(keyCounter, JSON.stringify(CountTrangThai));
+        // 👉 Invalidate query để Tab reload ngay
+        queryClient.invalidateQueries({ queryKey: [tableName, "CountAllTrangThaiXuly"] });
+      }
+
       if (status) {
         // console.log("LOAD LAI PermissionModel");
         // Cuộn lên đầu trang khi tải dữ liệu thành công

package/components/DataManagement/DataTableSM.jsx

@@ -15,6 +15,7 @@ import TableToolbar from "./TableToolbar";
 import { useDataTable } from "./hooks";
 import DeleteConfirmationDialog from "./DeleteConfirmationDialog";
 import DeleteMultipleConfirmationDialog from "./DeleteMultipleConfirmationDialog";
+import { storeGetUser } from "../../utils/storage";
 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
@@ -35,7 +36,8 @@ const DataTableSM = ({ multipleActions = [], page, setPage = () => {}, disableEd
     hasTabpanel,
     defaultRowsPerPage = 5
   } = useDataTable();
-
+  const user = storeGetUser();
+  const userId = user?.UserId;
   const { set: setPermission } = usePermission(tableName);
   const queryClient = useQueryClient();
   const confirm = useConfirm();
@@ -80,11 +82,19 @@ const DataTableSM = ({ multipleActions = [], page, setPage = () => {}, disableEd
       }),
     defaultQueryOptions,
     // keepPreviousData: true,
-    onSuccess: ({ PermissionModel, status }) => {
+    onSuccess: ({ PermissionModel, CountTrangThai, status }) => {
       if (dataSearch?.TrangThaiXuLy !== undefined) {
         PermissionModel.TrangThaiXuLy = dataSearch?.TrangThaiXuLy;
       }
       setPermission(PermissionModel);
+
+      if (CountTrangThai) {
+        const keyCounter = `${tableName}_${userId}_TrangThaiXuLyCounter`;
+        localStorage.setItem(keyCounter, JSON.stringify(CountTrangThai));
+        // 👉 Invalidate query để Tab reload ngay
+        queryClient.invalidateQueries({ queryKey: [tableName, "CountAllTrangThaiXuly"] });
+      }
+
       if (status) {
         // console.log("LOAD LAI PermissionModel");
         // Cuộn lên đầu trang khi tải dữ liệu thành công

package/components/DataManagement/index.jsx

@@ -120,7 +120,7 @@ function DataManagement({
   const [selectedEditItem, setSelectedEditItem] = useState(null);
   const [openViewDialog, setOpenViewDialog] = useState(false);
 
-  const { permission, canCreate, canThongKe, canBieuDo } = usePermission(apiUrl || tableName);
+  const { permission, canCreate, canExportData, canThongKe, canBieuDo } = usePermission(apiUrl || tableName);
 
   // console.log(">>> permission from hook:", permission);
   // console.log(">>> canCreate:", canCreate);
@@ -389,7 +389,7 @@ function DataManagement({
                     <div key={index}>{button}</div>
                   ))}
 
-                  <ExportExcelButton tableName={tableName} data={dataSearch} size={elementSize} />
+                  {canExportData && <ExportExcelButton tableName={tableName} data={dataSearch} size={elementSize} />}
 
                   {canCreate && !disableAdd && (
                     <Button

package/hooks/usePermission.js

@@ -51,6 +51,7 @@ const usePermission = (tableName) => {
     canAction: false,
     canView: false,
     canImport: false,
+    canExportData: false,
     canExportWord: false,
     canPayment: false,
     canThongKe: false,
@@ -86,6 +87,7 @@ const usePermission = (tableName) => {
       canAction: source.Action ?? false,
       canView: source.View ?? false,
       canImport: source.ImportFile ?? false,
+      canExportData: source.ExportData ?? false,
       canExportWord: source.ExportWord ?? false,
       canPayment: source.Payment ?? false,
       canThongKe: source.ThongKe ?? false,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "trithuc-mvc-react",
-  "version": "3.4.1",
+  "version": "3.4.3",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
@@ -22,6 +22,7 @@
     "lodash": "^4.17.21",
     "moment": "^2.30.1",
     "prop-types": "^15.8.1",
+    "qs": "^6.14.0",
     "yup": "^1.6.1"
   },
   "devDependencies": {
@@ -35,18 +36,18 @@
     "react-dom": "^18.3.1"
   },
   "peerDependencies": {
+    "@mui/icons-material": "^7.0.2",
     "@mui/lab": "^7.0.0-beta.11",
     "@mui/material": "^7.0.2",
     "@mui/system": "^5.17.1",
-    "@mui/icons-material": "^7.0.2",
-    "@mui/x-tree-view": "^7.28.1",
     "@mui/x-date-pickers": "^7.28.3",
+    "@mui/x-tree-view": "^7.28.1",
+    "dayjs": "^1.11.13",
     "material-ui-confirm": "^4.0.0",
     "react": ">=16",
     "react-dom": ">=16",
     "react-hook-form": "^7.55.0",
     "react-query": "^3.39.3",
-    "react-toastify": "^11.0.5",
-    "dayjs": "^1.11.13"
+    "react-toastify": "^11.0.5"
   }
 }

package/utils/storage.js

@@ -289,3 +289,26 @@ export const storeGetlanguageSystemKey = (TypeKey, SystemKey, TypeLanguage) => {
       ?.Description || ""
   );
 };
+// ---------------- Storage helpers ----------------
+export const storeSetKey = (Key, data) => {
+  if (!data) return;
+  const encryptedData = encryptData(data);
+  localStorage.setItem(Key, encryptedData);
+};
+
+export const storeGetKey = (key) => {
+  const encryptedData = localStorage.getItem(key);
+  if (!encryptedData) return null;
+  return decryptData(encryptedData);
+};
+
+// ---------------- Utility so sánh dữ liệu ----------------
+export const isDataChanged = (oldData, newData) => {
+  if (!oldData) return true;
+  try {
+    return JSON.stringify(oldData) !== JSON.stringify(newData);
+  } catch (error) {
+    console.error("Error comparing data:", error);
+    return true; // nếu có lỗi thì coi như thay đổi
+  }
+};