trithuc-mvc-react 3.4.0 → 3.4.2

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,12 +83,20 @@ 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) {
-        setPermission(PermissionModel);
         // console.log("LOAD LAI PermissionModel");
         // Cuộn lên đầu trang khi tải dữ liệu thành công
         window.scrollTo({

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,12 +82,20 @@ 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) {
-        setPermission(PermissionModel);
         // console.log("LOAD LAI PermissionModel");
         // Cuộn lên đầu trang khi tải dữ liệu thành công
         window.scrollTo({

package/components/DataManagement/index.jsx

@@ -120,8 +120,10 @@ function DataManagement({
   const [selectedEditItem, setSelectedEditItem] = useState(null);
   const [openViewDialog, setOpenViewDialog] = useState(false);
 
-  const { canCreate, canThongKe, canBieuDo } = usePermission(apiUrl ? apiUrl : tableName);
+  const { permission, canCreate, canExportData, canThongKe, canBieuDo } = usePermission(apiUrl || tableName);
 
+  // console.log(">>> permission from hook:", permission);
+  // console.log(">>> canCreate:", canCreate);
   const [viewMode, setViewMode] = useState("table"); // "table" | "thongke" | "bieudo"
 
   const { defaults, filters } = useMemo(() => {
@@ -387,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

@@ -1,101 +1,119 @@
-import { useContext, useMemo } from "react";
+import { useContext } from "react";
 import { PermissionContext } from "../contexts";
+import { storeGetUser } from "@/utils/storage";
+
+const isDev = process.env.NODE_ENV === "development";
 
 const usePermission = (tableName) => {
   if (!tableName) {
     throw new Error("api is required");
   }
+
   const context = useContext(PermissionContext);
   if (!context) {
     throw new Error("usePermission must be used within a PermissionProvider");
   }
+
   const { permissionMap, setPermission } = context;
-  const permission = permissionMap[tableName];
-  const {
-    canEdit,
-    canDelete,
-    canDeleteMulti,
-    canSave,
-    canCreate,
-    canAction,
-    canView,
-    canImport,
-    canExportWord,
-    canPayment,
-    canThongKe,
-    canBieuDo
-  } = useMemo(() => {
-    if (permission) {
-      if (permission.TrangThaiXuLy !== undefined && permission.ObjTrangThai) {
-        const status = permission.ObjTrangThai.find((t) => t.StatusId === permission.TrangThaiXuLy) || {};
-        return {
-          canEdit: status.Edit ?? false,
-          canDelete: status.Delete ?? false,
-          canDeleteMulti: status.DeleteMulti ?? false,
-          canSave: status.Save ?? false,
-          canCreate: status.Create ?? false,
-          canAction: status.Action ?? false,
-          canView: status.View ?? false,
-          canImport: status.ImportFile ?? false,
-          canExportWord: status.ExportWord ?? false,
-          canPayment: status.Payment ?? false,
-          canThongKe: status.ThongKe ?? false,
-          canBieuDo: status.BieuDo ?? false
-        };
-      } else {
-        return {
-          canEdit: permission.Edit ?? false,
-          canDelete: permission.Delete ?? false,
-          canDeleteMulti: permission.DeleteMulti ?? false,
-          canSave: permission.Save ?? false,
-          canCreate: permission.Create ?? false,
-          canAction: permission.Action ?? false,
-          canView: permission.View ?? false,
-          canImport: permission.ImportFile ?? false,
-          canExportWord: permission.ExportWord ?? false,
-          canPayment: permission.Payment ?? false,
-          canThongKe: permission.ThongKe ?? false,
-          canBieuDo: permission.BieuDo ?? false
-        };
+
+  // --- lấy từ context trước ---
+  let permission = permissionMap[tableName];
+  // if (isDev) {
+  //   console.log(`[usePermission] Context permission for ${tableName}:`, permission);
+  // }
+
+  // --- nếu chưa có thì thử lấy từ localStorage ---
+  if (!permission) {
+    const user = storeGetUser();
+    const userId = user?.UserId ?? "guest";
+    const localKey = `${tableName}_${userId}_PermissionModel`;
+
+    try {
+      const stored = localStorage.getItem(localKey);
+      if (stored) {
+        permission = JSON.parse(stored);
+        // if (isDev) {
+        //   console.log(`[usePermission] Loaded from localStorage (${localKey}):`, permission);
+        // }
       }
-    } else {
-      // Trường hợp permission không tồn tại
-      return {
-        canEdit: false,
-        canDelete: false,
-        canDeleteMulti: false,
-        canSave: false,
-        canCreate: false,
-        canAction: false,
-        canView: false,
-        canImport: false,
-        canExportWord: false,
-        canPayment: false,
-        canThongKe: false,
-        canBieuDo: false
-      };
+    } catch (err) {
+      console.warn("Lỗi parse local permission:", err);
     }
-  }, [permission]);
+  }
 
-  const set = (permission) => {
-    setPermission({ ...permissionMap, [tableName]: permission });
+  // mặc định tất cả quyền = false
+  let perms = {
+    canEdit: false,
+    canDelete: false,
+    canDeleteMulti: false,
+    canSave: false,
+    canCreate: false,
+    canAction: false,
+    canView: false,
+    canImport: false,
+    canExportData: false,
+    canExportWord: false,
+    canPayment: false,
+    canThongKe: false,
+    canBieuDo: false
+  };
+
+  if (permission) {
+    let source = permission;
+
+    // Nếu có trạng thái hợp lệ & ObjTrangThai có data thì override
+    if (
+      permission.TrangThaiXuLy !== undefined &&
+      permission.TrangThaiXuLy !== null &&
+      Array.isArray(permission.ObjTrangThai) &&
+      permission.ObjTrangThai.length > 0
+    ) {
+      const status = permission.ObjTrangThai.find((t) => t.StatusId === permission.TrangThaiXuLy);
+      if (status) {
+        source = status;
+        // if (isDev) {
+        //   console.log(`[usePermission] Override by status ${permission.TrangThaiXuLy}:`, source);
+        // }
+      }
+    }
+
+    // Map field từ source
+    perms = {
+      canEdit: source.Edit ?? false,
+      canDelete: source.Delete ?? false,
+      canDeleteMulti: source.DeleteMulti ?? false,
+      canSave: source.Save ?? false,
+      canCreate: source.Create ?? false,
+      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,
+      canBieuDo: source.BieuDo ?? false
+    };
+  }
+
+  const set = (newPermission) => {
+    setPermission({ ...permissionMap, [tableName]: { ...newPermission } });
+
+    const user = storeGetUser();
+    const userId = user?.UserId ?? "guest";
+    const localKey = `${tableName}_${userId}_PermissionModel`;
+
+    localStorage.setItem(localKey, JSON.stringify(newPermission));
+
+    // if (isDev) {
+    //   console.log(`[usePermission] Saved to localStorage (${localKey}):`, newPermission);
+    // }
   };
 
   return {
     permission,
     set,
-    canEdit,
-    canDelete,
-    canDeleteMulti,
-    canSave,
-    canCreate,
-    canAction,
-    canView,
-    canImport,
-    canExportWord,
-    canPayment,
-    canThongKe,
-    canBieuDo
+    ...perms
   };
 };
+
 export default usePermission;

package/package.json

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

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
+  }
+};