trithuc-mvc-react 3.1.3 → 3.1.4

package/components/DataManagement/DataTable.jsx

@@ -257,7 +257,7 @@ const DataTable = ({ multipleActions = [], page, setPage = () => {}, disableEdit
           />
           {isLoading ? (
             <TableBody>
-              <TableRowsLoader rowsNum={5} colsNum={columns.length + 4} />
+              <TableRowsLoader rowsNum={15} colsNum={columns.length + 3} />
             </TableBody>
           ) : (
             <TableBody>
@@ -293,14 +293,14 @@ const DataTable = ({ multipleActions = [], page, setPage = () => {}, disableEdit
 
       <Grid container>
         {!hasTabpanel && (
-          <Grid item alignSelf={"center"} sx={{ pl: 2 }}>
+          <Grid alignSelf={"center"} sx={{ pl: 2 }}>
             <Typography variant="body1">
               Tổng số lượng: <span>{total}</span>
             </Typography>
           </Grid>
         )}
 
-        <Grid item xs>
+        <Grid>
           <TablePaginationCustom
             count={total}
             rowsPerPage={rowsPerPage}

package/components/DataManagement/DataTableSM.jsx

@@ -268,7 +268,7 @@ const DataTableSM = ({ multipleActions = [], page, setPage = () => {}, disableEd
           /> */}
           {isLoading ? (
             <TableBody>
-              <TableRowsLoader rowsNum={5} colsNum={columns.length + 4} />
+              <TableRowsLoader rowsNum={10} colsNum={columns.length + 3} />
             </TableBody>
           ) : (
             <TableBody>
@@ -304,14 +304,14 @@ const DataTableSM = ({ multipleActions = [], page, setPage = () => {}, disableEd
 
       <Grid container>
         {!hasTabpanel && (
-          <Grid item alignSelf={"center"} sx={{ pl: 2 }}>
+          <Grid alignSelf={"center"} sx={{ pl: 2 }}>
             <Typography variant="body1" sx={{ fontSize: "0.7rem" }}>
               Tổng số lượng: <span>{total}</span>
             </Typography>
           </Grid>
         )}
 
-        <Grid item xs>
+        <Grid>
           <TablePaginationCustom
             count={total}
             rowsPerPage={rowsPerPage}

package/components/DataManagement/EditorForm.jsx

@@ -185,7 +185,7 @@ function EditorForm({ fields, submitRef }) {
               ...rest
             }) => {
               return (
-                <Grid md={size?.md} xs={size?.xs} sm={size?.sm} key={field}>
+                <Grid size={{ ...size }} key={field}>
                   <FormField
                     type={type}
                     label={label}

package/components/DataManagement/TableRowRenderSM.jsx

@@ -1,7 +1,7 @@
 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, Tooltip, useMediaQuery } from "@mui/material";
+import { Box, Button, Grid, Switch, TableCell, TableRow, Toolbar, useMediaQuery } from "@mui/material";
 import { styled, useTheme } from "@mui/material/styles";
 import { useMemo } from "react";
 import { usePermission } from "../../hooks";
@@ -30,34 +30,33 @@ export const TableRowRenderSM = ({
     const tableActionsAfterFilter = [...tableActions]
       .filter((x) => x)
       .filter(({ permissionType }) => {
-        if (permissionType === "view" && !canView) {
-          return false;
-        }
-        if (permissionType === "action" && !canAction) {
-          return false;
-        }
+        if (permissionType === "view" && !canView) return false;
+        if (permissionType === "action" && !canAction) return false;
         return true;
       });
-    const tableActionsOnTable = tableActionsAfterFilter.filter(({ isOnTable = false }) => isOnTable);
-    const tableActionsOnMoreMenu = tableActionsAfterFilter.filter(({ isOnTable = false }) => !isOnTable);
-    return { tableActionsOnTable, tableActionsOnMoreMenu };
+
+    return {
+      tableActionsOnTable: tableActionsAfterFilter.filter(({ isOnTable = false }) => isOnTable),
+      tableActionsOnMoreMenu: tableActionsAfterFilter.filter(({ isOnTable = false }) => !isOnTable)
+    };
   }, [canView, canAction, tableActions]);
 
   const theme = useTheme();
   const downXl = useMediaQuery(theme.breakpoints.down("xl"));
 
   return (
-    <TableRow hover key={row[selectedField]} selected={selected} sx={{ width: "100%" }}>
+    <TableRow hover key={row[selectedField]} selected={selected}>
       <TableCell
         colSpan={columns.length}
         align="left"
         sx={{
-          maxWidth: "100%", // Giới hạn tối đa theo container
-          wordBreak: "break-word", // Xuống dòng khi vượt quá
-          whiteSpace: "normal", // Cho phép xuống dòng
-          overflowWrap: "break-word" // Hỗ trợ xuống dòng trong các trình duyệt cũ
+          maxWidth: "100%",
+          wordBreak: "break-word",
+          whiteSpace: "normal",
+          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 (
@@ -67,17 +66,21 @@ export const TableRowRenderSM = ({
             </div>
           );
         })}
+
+        {/* Công tắc trạng thái */}
         {!disableStatus && canEdit && (
-          <Switch
-            checked={row[statusKey]}
-            onChange={() => {
-              onChangeStatus(row[selectedField]);
-            }}
-            inputProps={{ "aria-label": "controlled" }}
-          />
+          <Box sx={{ mt: 1 }}>
+            <Switch
+              checked={row[statusKey]}
+              onChange={() => onChangeStatus(row[selectedField])}
+              inputProps={{ "aria-label": "controlled" }}
+            />
+          </Box>
         )}
-        <Grid container spacing={{ xs: 2, xl: 2 }} sx={{ width: "100%", pt: 2, pb: 2 }}>
-          <Grid item xs={12} sx={{ display: "flex", justifyContent: "flex-end", alignItems: "center", width: "100%" }}>
+
+        {/* Các nút thao tác */}
+        <Grid container spacing={2} sx={{ width: "100%", pt: 2, pb: 2 }}>
+          <Grid size={{ xs: 12 }} sx={{ display: "flex", justifyContent: "flex-end", flexWrap: "wrap" }}>
             {!disableCellThaoTac && (
               <>
                 {!disableEdit && canEdit && (
@@ -87,18 +90,7 @@ export const TableRowRenderSM = ({
                     color="primary"
                     onClick={() => onEdit(row)}
                     startIcon={<EditOutlined fontSize="inherit" />}
-                    sx={{
-                      marginLeft: 0.5,
-                      marginRight: 0.5,
-                      borderRadius: 14,
-                      minWidth: 60,
-                      padding: "2px 8px",
-                      height: "20px",
-                      fontSize: "0.6rem",
-                      whiteSpace: "nowrap",
-                      overflow: "hidden",
-                      textOverflow: "ellipsis"
-                    }}
+                    sx={buttonStyle}
                   >
                     Sửa
                   </Button>
@@ -110,18 +102,7 @@ export const TableRowRenderSM = ({
                     color="info"
                     onClick={() => onView(row)}
                     startIcon={<RemoveRedEyeOutlinedIcon />}
-                    sx={{
-                      marginLeft: 0.5,
-                      marginRight: 0.5,
-                      borderRadius: 14,
-                      minWidth: 60,
-                      padding: "2px 8px",
-                      height: "20px",
-                      fontSize: "0.6rem",
-                      whiteSpace: "nowrap",
-                      overflow: "hidden",
-                      textOverflow: "ellipsis"
-                    }}
+                    sx={buttonStyle}
                   >
                     Xem
                   </Button>
@@ -131,51 +112,30 @@ export const TableRowRenderSM = ({
                     size="small"
                     variant="outlined"
                     color="error"
-                    onClick={() => {
-                      onDelete(row[selectedField]);
-                    }}
+                    onClick={() => onDelete(row[selectedField])}
                     startIcon={<DeleteOutlineIcon fontSize="inherit" />}
-                    sx={{
-                      marginLeft: 0.5,
-                      marginRight: 0.5,
-                      borderRadius: 14,
-                      minWidth: 60,
-                      padding: "2px 8px",
-                      height: "20px",
-                      fontSize: "0.6rem",
-                      whiteSpace: "nowrap",
-                      overflow: "hidden",
-                      textOverflow: "ellipsis"
-                    }}
+                    sx={buttonStyle}
                   >
                     Xóa
                   </Button>
                 )}
-                {tableActionsOnTable.map(({ title, onClick, element, visible = true }) => (
-                  <Button
-                    size="small"
-                    variant="outlined"
-                    onClick={() => {
-                      onClick(row);
-                    }}
-                    startIcon={element}
-                    sx={{
-                      marginLeft: 0.5,
-                      marginRight: 0.5,
-                      borderRadius: 14,
-                      minWidth: 60,
-                      padding: "2px 8px",
-                      height: "20px",
-                      fontSize: "0.6rem",
-                      whiteSpace: "nowrap",
-                      overflow: "hidden",
-                      textOverflow: "ellipsis"
-                    }}
-                    hidden={typeof visible === "function" && !visible(row)}
-                  >
-                    {title.toLowerCase() === "xem chi tiết" ? "Xem" : title}
-                  </Button>
-                ))}
+                {tableActionsOnTable.map(
+                  ({ title, onClick, element, visible = true }, idx) =>
+                    (typeof visible === "function" ? visible(row) : visible) && (
+                      <Button
+                        key={idx}
+                        size="small"
+                        variant="outlined"
+                        onClick={() => onClick(row)}
+                        startIcon={element}
+                        sx={{
+                          ...buttonStyle
+                        }}
+                      >
+                        {title === "xem chi tiết" ? "Xem" : title}
+                      </Button>
+                    )
+                )}
                 <MoreMenu actions={tableActionsOnMoreMenu} data={row} />
               </>
             )}
@@ -186,8 +146,22 @@ export const TableRowRenderSM = ({
   );
 };
 
-// ----------------------------------------------------------------------
+// Button style dùng chung
+const buttonStyle = {
+  marginLeft: 0.3,
+  marginRight: 0.3,
+  marginBottom: 0.5,
+  borderRadius: 14,
+  minWidth: 50,
+  padding: "2px 8px",
+  height: "20px",
+  fontSize: "0.6rem",
+  whiteSpace: "nowrap",
+  overflow: "hidden",
+  textOverflow: "ellipsis"
+};
 
+// Toolbar style
 export const RootStyle = styled(Toolbar)(({ theme }) => ({
   display: "flex",
   justifyContent: "space-between",

package/components/DataManagement/index.jsx

@@ -197,7 +197,7 @@ function DataManagement({
   // Đo chiều rộng của titleText khi render lần đầu
   useEffect(() => {
     const titleElement = document.createElement("span");
-    titleElement.style.font = "normal 16px Arial"; // Đảm bảo phông chữ và kích thước giống như bạn dùng trong UI
+    titleElement.style.font = "normal 14px Arial"; // Đảm bảo phông chữ và kích thước giống như bạn dùng trong UI
     titleElement.style.visibility = "hidden"; // Ẩn element tạm thời
     titleElement.textContent = titleText;
 
@@ -303,7 +303,7 @@ function DataManagement({
                 wordBreak: "break-word"
               }}
             >
-              <Typography variant="h4">{titleText}</Typography>
+              <Typography variant={isSmallScreen ? "body2" : "subtitle1"}>{titleText}</Typography>
             </Box>
 
             {/* Khối phải */}

package/components/form/DynamicForm.jsx

@@ -63,7 +63,7 @@ function DynamicForm({ fields, elementSize = "medium", submitRef, validationSche
                 };
               }
               return (
-                <Grid {...sizes} key={field}>
+                <Grid size={{ ...sizes }} key={field}>
                   <FormField
                     type={type}
                     label={label}

package/components/table/TablePagination.jsx

@@ -26,8 +26,8 @@ function TablePaginationCustom({ count, rowsPerPage, page, onPageChange, onRowsP
         labelDisplayedRows={defaultLabelDisplayedRows}
         sx={{
           "& .MuiTablePagination-toolbar": {
-            paddingLeft: matchsDownMD ? "5px" : "14px",
-            paddingRight: matchsDownMD ? "5px" : "14px",
+            paddingLeft: matchsDownMD ? "3px" : "10px",
+            paddingRight: matchsDownMD ? "3px" : "10px",
             fontSize: matchsDownMD ? "0.65rem" : "0.8rem" // Giảm kích thước font khi trên màn hình nhỏ
           },
           "& .MuiTablePagination-selectLabel, & .MuiTablePagination-displayedRows": {

package/package.json

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

package/utils/storage.js

@@ -61,6 +61,27 @@ export const storeUserData = (data) => {
   const encryptedUserObj = encryptData(userObj);
   localStorage.setItem("user", encryptedUserObj);
 };
+export const storeSubUserData = (data) => {
+  if (!data) return;
+
+  // Mã hóa và lưu token
+  const encryptedToken = encryptData(data.Token);
+  localStorage.setItem("token", encryptedToken);
+
+  // Tạo object user từ dữ liệu response
+  const userObj = {
+    userName: data?.UserName,
+    email: data?.Email,
+    FullName: data?.FullName,
+    Avatar: data?.Avatar,
+    Navigate: data?.Navigate,
+    PhoneNumber: data?.PhoneNumber
+  };
+
+  // Mã hóa và lưu user object vào localStorage
+  const encryptedUserObj = encryptData(userObj);
+  localStorage.setItem("subUser", encryptedUserObj);
+};
 export const storeSetCachedSidebarTops = (data) => {
   if (!data) return;
   // Mã hóa và lưu
@@ -123,7 +144,19 @@ export const storeGetUser = () => {
     return null;
   }
 };
+export const storeGetSubUser = () => {
+  const encryptedData = localStorage.getItem("subUser");
+  if (!encryptedData) return null;
+  const decryptedData = decryptData(encryptedData);
 
+  try {
+    // Chuyển đổi thành JSON nếu dữ liệu giải mã hợp lệ
+    return decryptedData;
+  } catch (error) {
+    console.log("Error parsing decrypted user data:", error);
+    return null;
+  }
+};
 export const storeGetToken = () => {
   const encryptedData = localStorage.getItem("token");
   if (!encryptedData) return null;