trithuc-mvc-react 3.3.7 → 3.3.9

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

@@ -1,12 +1,13 @@
 import { EditOutlined } from "@mui/icons-material";
 import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline";
 import RemoveRedEyeOutlinedIcon from "@mui/icons-material/RemoveRedEyeOutlined";
-import { Box, Button, Grid, Switch, TableCell, TableRow, Toolbar, useMediaQuery } from "@mui/material";
+import { Box, Button, Grid, Switch, TableCell, TableRow, Toolbar, Typography, useMediaQuery } from "@mui/material";
 import { styled, useTheme } from "@mui/material/styles";
 import { useMemo } from "react";
 import { usePermission } from "../../hooks";
 import MoreMenu from "../MoreMenu";
 import { useDataTable } from "./hooks";
+import { fontSize } from "@mui/system";
 
 export const TableRowRenderSM = ({
   index,
@@ -56,105 +57,139 @@ export const TableRowRenderSM = ({
           overflowWrap: "break-word"
         }}
       >
-        {/* Hiển thị các cột dữ liệu */}
-        {columns.map(({ field, label, type = "text", valueGetter = (row) => row[field], renderCell, valueFormat = (e) => e }) => {
-          const value = renderCell ? renderCell(row) : valueFormat(valueGetter(row));
-          return (
-            <div key={`${row[selectedField]}-${field}`}>
-              <strong>{label}: </strong>
-              {value}
-            </div>
-          );
-        })}
-
-        {/* Công tắc trạng thái */}
-        {!disableStatus && canEdit && (
-          <Box sx={{ mt: 1 }}>
-            <Switch
-              checked={row[statusKey]}
-              onChange={() => onChangeStatus(row[selectedField])}
-              inputProps={{ "aria-label": "controlled" }}
-            />
-          </Box>
-        )}
+        <Box
+          display="flex"
+          flexDirection="column"
+          gap={1}
+          border="1px solid"
+          borderColor="divider"
+          borderRadius={2}
+          boxShadow={1}
+          p={2}
+          bgcolor="background.paper"
+          sx={{
+            transition: "all 0.2s ease",
+            "&:hover": {
+              boxShadow: 3,
+              borderColor: "primary.light"
+            }
+          }}
+        >
+          {/* 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>
+                );
+              }
+            )}
+          </Grid>
+          {/* Công tắc trạng thái */}
+          {!disableStatus && canEdit && (
+            <Box sx={{ mt: 1 }}>
+              <Switch
+                checked={row[statusKey]}
+                onChange={() => onChangeStatus(row[selectedField])}
+                inputProps={{ "aria-label": "controlled" }}
+              />
+            </Box>
+          )}
 
-        {/* Các nút thao tác */}
-        <Grid container spacing={0.5} sx={{ width: "100%", pt: 2, pb: 2 }}>
-          {!disableCellThaoTac && (
-            <>
-              {!disableEdit && canEdit && (
-                <Grid size={4}>
+          {/* 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"
+          >
+            {!disableCellThaoTac && (
+              <>
+                {!disableEdit && canEdit && (
                   <Button
-                    fullWidth
                     size="small"
-                    variant="outlined"
+                    variant="contained"
                     color="primary"
                     onClick={() => onEdit(row)}
-                    startIcon={<EditOutlined fontSize="inherit" />}
-                    sx={buttonStyle}
+                    startIcon={<EditOutlined />}
+                    sx={modernButtonStyle}
                   >
                     Cập nhật
                   </Button>
-                </Grid>
-              )}
-              {canView && !tableActions?.some(({ permissionType }) => permissionType === "view") && (
-                <Grid size={4}>
+                )}
+
+                {canView && !tableActions?.some(({ permissionType }) => permissionType === "view") && (
                   <Button
-                    fullWidth
                     size="small"
                     variant="outlined"
                     color="info"
                     onClick={() => onView(row)}
                     startIcon={<RemoveRedEyeOutlinedIcon />}
-                    sx={buttonStyle}
+                    sx={modernButtonStyle}
                   >
                     Xem
                   </Button>
-                </Grid>
-              )}
-              {!disableDelete && canDelete && (
-                <Grid size={4}>
+                )}
+
+                {!disableDelete && canDelete && (
                   <Button
-                    fullWidth
                     size="small"
                     variant="outlined"
                     color="error"
                     onClick={() => onDelete(row[selectedField])}
-                    startIcon={<DeleteOutlineIcon fontSize="inherit" />}
-                    sx={buttonStyle}
+                    startIcon={<DeleteOutlineIcon />}
+                    sx={modernButtonStyle}
                   >
                     Xóa
                   </Button>
-                </Grid>
-              )}
-              {tableActionsOnTable.map(
-                ({ title, size, onClick, element, visible = true }, idx) =>
-                  (typeof visible === "function" ? visible(row) : visible) && (
-                    <Grid key={row.Id} size={4}>
+                )}
+
+                {tableActionsOnTable.map(
+                  ({ title, size, onClick, element, visible = true }, idx) =>
+                    (typeof visible === "function" ? visible(row) : visible) && (
                       <Button
-                        fullWidth
                         key={idx}
                         size="small"
                         variant="outlined"
                         onClick={() => onClick(row)}
                         startIcon={element}
-                        sx={{
-                          ...buttonStyle
-                        }}
+                        sx={modernButtonStyle}
                       >
                         {title === "xem chi tiết" ? "Xem" : title}
                       </Button>
-                    </Grid>
-                  )
-              )}
-              <MoreMenu actions={tableActionsOnMoreMenu} data={row} />
-            </>
-          )}
-        </Grid>
+                    )
+                )}
+
+                <MoreMenu actions={tableActionsOnMoreMenu} data={row} />
+              </>
+            )}
+          </Box>
+        </Box>
       </TableCell>
     </TableRow>
   );
 };
+const modernButtonStyle = {
+  fontWeight: 400,
+  fontSize: "0.7rem",
+  borderRadius: 2,
+  minWidth: 90,
+  textTransform: "none",
+  px: 1,
+  py: 0.5,
+  boxShadow: "none",
+  transition: "all 0.2s ease-in-out",
+  "&:hover": {
+    boxShadow: "0px 2px 6px rgba(0,0,0,0.1)"
+  }
+};
 
 // Button style dùng chung
 const buttonStyle = {

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.7",
+  "version": "3.3.9",
   "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);
   }