trithuc-mvc-react 3.3.8 → 3.4.0

package/api/index.js

@@ -235,6 +235,17 @@ export const exportExcel = async ({ tableName, data }) => {
 };
 
 export const uploadFile = async (formData) => {
+  // 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: {

package/components/DataManagement/DataTable.jsx

@@ -46,15 +46,38 @@ 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");
+  useEffect(() => {
+    const defaultSortColumn = columns.find((c) => c.defaultSort);
+    if (defaultSortColumn) {
+      setOrderBy(defaultSortColumn.field);
+      setOrder(defaultSortColumn.defaultOrder || "asc");
+    }
+  }, [columns]);
+
+  const handleRequestSort = (event, property) => {
+    const isAsc = orderBy === property && order === "asc";
+    setOrder(isAsc ? "desc" : "asc");
+    setOrderBy(property);
+  };
 
   const { data, isLoading } = useQuery({
-    queryKey: [tableName, page, rowsPerPage, dataSearch],
+    queryKey: [tableName, page, rowsPerPage, dataSearch, order, orderBy],
     queryFn: () =>
       getDatasFromTable({
         tableName: tableName,
         page: page + 1,
         pageSize: rowsPerPage,
-        data: dataSearch
+        data: {
+          ...dataSearch,
+          ...(orderBy && {
+            SortBy: orderBy,
+            IsDescending: order === "desc"
+          })
+        }
       }),
     defaultQueryOptions,
     // keepPreviousData: true,
@@ -73,6 +96,7 @@ const DataTable = ({ multipleActions = [], page, setPage = () => {}, disableEdit
       }
     }
   });
+
   const changeStatusMutation = useMutation(changeStatusDataToTable, {
     onSuccess: ({ status = false, message = " Có lỗi xảy ra !" }) => {
       if (URL_APPLICATION_API) {
@@ -253,6 +277,7 @@ const DataTable = ({ multipleActions = [], page, setPage = () => {}, disableEdit
     }
     setOpenDeleteMultipleDialog(false); // Đóng Dialog sau khi chọn
   };
+
   const theme = useTheme();
   const downXL = useMediaQuery(theme.breakpoints.down("xl"));
 
@@ -283,7 +308,11 @@ const DataTable = ({ multipleActions = [], page, setPage = () => {}, disableEdit
             onSelectAllClick={handleSelectAllClick}
             numSelected={selectedItems?.length}
             rowCount={rows.length}
+            order={order}
+            orderBy={orderBy}
+            onRequestSort={handleRequestSort}
           />
+
           {isLoading ? (
             <TableBody>
               <TableRowsLoader rowsNum={15} colsNum={columns.length + 3} />

package/components/DataManagement/DataTableSM.jsx

@@ -45,15 +45,38 @@ 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(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");
+    }
+  }, [columns]);
+
+  const handleRequestSort = (event, property) => {
+    const isAsc = orderBy === property && order === "asc";
+    setOrder(isAsc ? "desc" : "asc");
+    setOrderBy(property);
+  };
 
   const { data, isLoading } = useQuery({
-    queryKey: [tableName, page, rowsPerPage, dataSearch],
+    queryKey: [tableName, page, rowsPerPage, dataSearch, order, orderBy],
     queryFn: () =>
       getDatasFromTable({
         tableName: tableName,
         page: page + 1,
         pageSize: rowsPerPage,
-        data: dataSearch
+        data: {
+          ...dataSearch,
+          ...(orderBy && {
+            SortBy: orderBy,
+            IsDescending: order === "desc"
+          })
+        }
       }),
     defaultQueryOptions,
     // keepPreviousData: true,

package/components/DataManagement/TableHead.jsx

@@ -1,15 +1,22 @@
-import { Checkbox, TableHead as MuiTableHead, TableCell, TableRow, useMediaQuery, useTheme } from "@mui/material";
+import { Checkbox, TableHead as MuiTableHead, TableCell, TableRow, TableSortLabel, useMediaQuery, useTheme } from "@mui/material";
 import { usePermission } from "../../hooks";
 import { useDataTable } from "./hooks";
-export function TableHead({ numSelected, rowCount, onSelectAllClick, headLabel }) {
+
+export function TableHead({ numSelected, rowCount, onSelectAllClick, headLabel, order, orderBy, onRequestSort }) {
   const { disableStatus, disableCellThaoTac, tableName } = useDataTable();
   const { canEdit } = usePermission(tableName);
 
   const theme = useTheme();
   const downXl = useMediaQuery(theme.breakpoints.down("xl"));
+
+  const createSortHandler = (property) => (event) => {
+    onRequestSort(event, property);
+  };
+
   return (
     <MuiTableHead sx={{ height: 56, visibility: numSelected > 0 ? "hidden" : "visible" }}>
       <TableRow>
+        {/* Checkbox chọn tất cả */}
         <TableCell padding="checkbox">
           <Checkbox
             indeterminate={numSelected > 0 && numSelected < rowCount}
@@ -18,13 +25,35 @@ export function TableHead({ numSelected, rowCount, onSelectAllClick, headLabel }
             onChange={onSelectAllClick}
           />
         </TableCell>
+
+        {/* STT không sort */}
         <TableCell sx={{ textAlign: "center" }}>STT</TableCell>
+
+        {/* Các cột động */}
         {headLabel.map((headCell) => (
-          <TableCell key={headCell.field} align={headCell.alignRight ? "right" : "left"} sx={{ textAlign: "center" }}>
-            {headCell.label}
+          <TableCell
+            key={headCell.field}
+            align={headCell.alignRight ? "right" : "left"}
+            sortDirection={orderBy === headCell.field ? order : false}
+          >
+            {headCell.sortable ? (
+              <TableSortLabel
+                active={orderBy === headCell.field}
+                direction={orderBy === headCell.field ? order : "asc"}
+                onClick={createSortHandler(headCell.field)}
+              >
+                {headCell.label}
+              </TableSortLabel>
+            ) : (
+              headCell.label
+            )}
           </TableCell>
         ))}
+
+        {/* Kích hoạt */}
         {!disableStatus && canEdit && <TableCell sx={{ textAlign: "center" }}>Kích hoạt</TableCell>}
+
+        {/* Thao tác */}
         {!disableCellThaoTac && <TableCell sx={{ minWidth: "136px", textAlign: "center" }}>Thao tác</TableCell>}
       </TableRow>
     </MuiTableHead>

package/components/DataManagement/TableRowRenderSM.jsx

@@ -178,7 +178,7 @@ export const TableRowRenderSM = ({
 };
 const modernButtonStyle = {
   fontWeight: 400,
-  fontSize: "0.7rem",
+  fontSize: "0.65rem",
   borderRadius: 2,
   minWidth: 90,
   textTransform: "none",

package/components/DataManagement/index.jsx

@@ -67,7 +67,8 @@ DataManagement.propTypes = {
   titleAddButton: PropTypes.string,
   thongKe: PropTypes.object,
   bieuDo: PropTypes.object,
-  disableHead: PropTypes.bool
+  disableHead: PropTypes.bool,
+  disableSearch: PropTypes.bool
 };
 const getDefaultValues = (filters = []) => {
   const defaultValues = {};
@@ -112,7 +113,8 @@ function DataManagement({
   titleAddButton = "Thêm mới",
   thongKe,
   bieuDo,
-  disableHead = false
+  disableHead = false,
+  disableSearch = false
 }) {
   const [openEditorDialog, setOpenEditorDialog] = useState(false);
   const [selectedEditItem, setSelectedEditItem] = useState(null);
@@ -189,7 +191,8 @@ function DataManagement({
       titleAddButton,
       thongKe,
       bieuDo,
-      disableHead
+      disableHead,
+      disableSearch
     };
   }, [
     reserPage,
@@ -211,7 +214,8 @@ function DataManagement({
     defaultRowsPerPage,
     thongKe,
     bieuDo,
-    disableHead
+    disableHead,
+    disableSearch
   ]);
   const methods = useForm({ defaultValues: getDefaultValues(filters) });
   const { reset, setValue } = methods;
@@ -426,13 +430,15 @@ function DataManagement({
             {tabPanel}
             {viewMode === "table" && (
               <>
-                <FilterGod
-                  tableName={tableName}
-                  filters={filters}
-                  filterButtons={filterButtons}
-                  elementSize={elementSize}
-                  setPage={setPage}
-                />
+                {!disableSearch && (
+                  <FilterGod
+                    tableName={tableName}
+                    filters={filters}
+                    filterButtons={filterButtons}
+                    elementSize={elementSize}
+                    setPage={setPage}
+                  />
+                )}
                 {backParentNavigator}
                 {!isSmallScreen ? (
                   <DataTable

package/package.json

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

package/utils/storage.js

@@ -142,11 +142,9 @@ export const storeSetCurrentInfor = (data) => {
   const storedThamSo = storedUserInfo?.ThamSoHeThong?.find((item) => item.TenThamSo === "DEFAULT_ROWS_PER_PAGE");
   const newThamSo = data?.ThamSoHeThong?.find((item) => item.TenThamSo === "DEFAULT_ROWS_PER_PAGE");
 
-  // Kiểm tra và cập nhật nếu thông tin mới từ API
   if (newThamSo) {
     const isUpdated = !storedThamSo || new Date(newThamSo.ModifiedDate) > new Date(storedThamSo?.ModifiedDate);
     if (isUpdated) {
-      // Xóa dữ liệu `rowsPerPage` cũ từ localStorage nếu cần
       Object.keys(localStorage).forEach((key) => {
         if (key.endsWith("rowsPerPage")) {
           localStorage.removeItem(key);
@@ -155,10 +153,18 @@ export const storeSetCurrentInfor = (data) => {
     }
   }
 
-  // Mã hóa dữ liệu và lưu vào localStorage
   try {
     const encryptedData = encryptData(data);
     localStorage.setItem("GetCurrentInfor", encryptedData);
+
+    // 🔹 Bắn event cho từng tham số hệ thống
+    data?.ThamSoHeThong?.forEach((item) => {
+      window.dispatchEvent(
+        new CustomEvent("GetCurrentInfor-changed", {
+          detail: { key: item.TenThamSo, value: item.GiaTri }
+        })
+      );
+    });
   } catch (error) {
     console.error("Error encrypting or saving data to localStorage:", error);
   }