trithuc-mvc-react 3.0.0 → 3.0.1

package/components/DataManagement/DataTableSM.jsx

@@ -246,7 +246,7 @@ const DataTableSM = ({ multipleActions = [], page, setPage = () => {}, disableEd
           multipleActions={multipleActions}
         />
 
-        <Table className="border" size={downXL ? "small" : "medium"}>
+        <Table size={downXL ? "small" : "medium"}>
           {/* <TableHead
             headLabel={columns}
             onSelectAllClick={handleSelectAllClick}

package/components/DataManagement/ExportExcelButton.jsx

@@ -27,23 +27,22 @@ const ExportExcelButton = ({ tableName, data, size = "small" }) => {
       onClick={() => {
         handleExportExcel(tableName, data);
       }}
+      sx={{ ml: 0.5, mr: 0.5 }}
     >
       Excel
     </Button>
   ) : (
-    <Tooltip title="Excel">
-      <IconButton
-        variant="outlined" // Thêm variant ở đây
-        color="primary"
-        size={size}
-        onClick={() => {
-          handleExportExcel(tableName, data);
-        }}
-        sx={{ border: "1px solid", borderColor: "primary.main" }} // Điều chỉnh kiểu dáng nếu cần
-      >
-        <Download fontSize="inherit" />
-      </IconButton>
-    </Tooltip>
+    <Button
+      size={size}
+      variant="outlined"
+      startIcon={<Download />}
+      onClick={() => {
+        handleExportExcel(tableName, data);
+      }}
+      sx={{ ml: 0.5, mr: 0.5 }}
+    >
+      Excel
+    </Button>
   );
 };
 export default ExportExcelButton;

package/components/DataManagement/FilterGod.jsx

@@ -16,7 +16,7 @@ export const FilterGod = ({ tableName, filters, elementSize = "small", setPage =
   const { setDataSearch, dataSearch } = useDataTable();
   // Lấy trạng thái từ localStorage hoặc mặc định là true
   const [isFilterVisible, setFilterVisible] = useState(
-    () => JSON.parse(localStorage.getItem(`${tableName}-isFilterVisible`)) ?? true
+    () => JSON.parse(localStorage.getItem(`${tableName}-isFilterVisible`)) ?? false
   );
 
   // Lưu trạng thái vào localStorage mỗi khi thay đổi

package/components/DataManagement/TableRowRenderSM.jsx

@@ -47,8 +47,8 @@ export const TableRowRenderSM = ({
   const downXl = useMediaQuery(theme.breakpoints.down("xl"));
 
   return (
-    <TableRow hover key={row[selectedField]} selected={selected}>
-      <TableCell colSpan={columns.length} align="left">
+    <TableRow hover key={row[selectedField]} selected={selected} sx={{ width: "100%" }}>
+      <TableCell colSpan={columns.length} align="left" sx={{ width: "100%" }}>
         {columns.map(({ field, label, type = "text", valueGetter = (row) => row[field], renderCell, valueFormat = (e) => e }) => {
           const value = renderCell ? renderCell(row) : valueFormat(valueGetter(row));
           return (
@@ -67,117 +67,109 @@ export const TableRowRenderSM = ({
             inputProps={{ "aria-label": "controlled" }}
           />
         )}
-        <Grid item xs={12} sm={12} md={12} lg={12} xl={12} sx={{ pt: 1 }}>
-          {!disableCellThaoTac && (
-            <Box display="flex" flexDirection="row" alignItems="center" justifyContent="flex-end">
-              <Box
-                sx={{
-                  maxWidth: "100%", // Giới hạn chiều rộng bằng với chiều rộng màn hình
-                  overflowX: "auto", // Cho phép cuộn ngang nếu hàng nút vượt quá chiều rộng
-                  whiteSpace: "nowrap" // Giữ các nút trên một dòng
-                }}
-              >
-                <Box display="flex" gap={1} alignItems="center">
-                  {!disableEdit && canEdit && (
-                    <Tooltip title="Chỉnh sửa">
-                      <Button
-                        size="small"
-                        variant="outlined"
-                        color="primary"
-                        onClick={() => onEdit(row)}
-                        startIcon={<EditOutlined fontSize="inherit" />}
-                        sx={{
-                          borderRadius: 14,
-                          minWidth: 60,
-                          padding: "2px 8px",
-                          height: "20px",
-                          fontSize: "0.6rem",
-                          whiteSpace: "nowrap",
-                          overflow: "hidden",
-                          textOverflow: "ellipsis"
-                        }}
-                      >
-                        Sửa
-                      </Button>
-                    </Tooltip>
-                  )}
-                  {canView && !tableActions?.some(({ permissionType }) => permissionType === "view") && (
-                    <Tooltip title="Xem chi tiết">
-                      <Button
-                        size="small"
-                        variant="outlined"
-                        color="info"
-                        onClick={() => onView(row)}
-                        startIcon={<RemoveRedEyeOutlinedIcon />}
-                        sx={{
-                          borderRadius: 14,
-                          minWidth: 60,
-                          padding: "2px 8px",
-                          height: "20px",
-                          fontSize: "0.6rem",
-                          whiteSpace: "nowrap",
-                          overflow: "hidden",
-                          textOverflow: "ellipsis"
-                        }}
-                      >
-                        Xem
-                      </Button>
-                    </Tooltip>
-                  )}
-                  {!disableDelete && canDelete && (
-                    <Tooltip title="Xóa">
-                      <Button
-                        size="small"
-                        variant="outlined"
-                        color="error"
-                        onClick={() => {
-                          onDelete(row[selectedField]);
-                        }}
-                        startIcon={<DeleteOutlineIcon fontSize="inherit" />}
-                        sx={{
-                          borderRadius: 14,
-                          minWidth: 60,
-                          padding: "2px 8px",
-                          height: "20px",
-                          fontSize: "0.6rem",
-                          whiteSpace: "nowrap",
-                          overflow: "hidden",
-                          textOverflow: "ellipsis"
-                        }}
-                      >
-                        Xóa
-                      </Button>
-                    </Tooltip>
-                  )}
-                  {tableActionsOnTable.map(({ title, onClick, element }) => (
-                    <Tooltip key={title} title={title}>
-                      <Button
-                        size="small"
-                        variant="outlined"
-                        onClick={() => {
-                          onClick(row);
-                        }}
-                        startIcon={element}
-                        sx={{
-                          borderRadius: 14,
-                          minWidth: 60,
-                          padding: "2px 8px",
-                          height: "20px",
-                          fontSize: "0.6rem",
-                          whiteSpace: "nowrap",
-                          overflow: "hidden",
-                          textOverflow: "ellipsis"
-                        }}
-                      >
-                        {title.toLowerCase() === "xem chi tiết" ? "Xem" : title}
-                      </Button>
-                    </Tooltip>
-                  ))}
-                  <MoreMenu actions={tableActionsOnMoreMenu} data={row} />
-                </Box>
-              </Box>
-            </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%" }}>
+            {!disableCellThaoTac && (
+              <>
+                {!disableEdit && canEdit && (
+                  <Button
+                    size="small"
+                    variant="outlined"
+                    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"
+                    }}
+                  >
+                    Sửa
+                  </Button>
+                )}
+                {canView && !tableActions?.some(({ permissionType }) => permissionType === "view") && (
+                  <Button
+                    size="small"
+                    variant="outlined"
+                    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"
+                    }}
+                  >
+                    Xem
+                  </Button>
+                )}
+                {!disableDelete && canDelete && (
+                  <Button
+                    size="small"
+                    variant="outlined"
+                    color="error"
+                    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"
+                    }}
+                  >
+                    Xóa
+                  </Button>
+                )}
+                {tableActionsOnTable.map(({ title, onClick, element }) => (
+                  <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"
+                    }}
+                  >
+                    {title.toLowerCase() === "xem chi tiết" ? "Xem" : title}
+                  </Button>
+                ))}
+                <MoreMenu actions={tableActionsOnMoreMenu} data={row} />
+              </>
+            )}
+          </Grid>
         </Grid>
       </TableCell>
     </TableRow>

package/components/DataManagement/index.jsx

@@ -1,4 +1,4 @@
-import { Button, Card, IconButton, Stack, Tooltip, Typography, useMediaQuery, useTheme } from "@mui/material";
+import { Button, Card, Grid, IconButton, Stack, Tooltip, Typography, useMediaQuery, useTheme } from "@mui/material";
 
 import { useEffect, useMemo, useState } from "react";
 
@@ -189,57 +189,44 @@ function DataManagement({
       <DataTableContext.Provider value={values}>
         <FormProvider {...methods}>
           <Stack direction="row" justifyContent={"space-between"} sx={{ mb: upXL ? 2 : 1, ...slotProps?.header?.sx }}>
-            <Typography variant="h4">{title}</Typography>
-            <Stack direction="row" spacing={1}>
-              <HuongDanButton tableName={tableName} size={elementSize} />
-              <Tooltip title="Làm mới">
-                <IconButton
-                  variant="outlined"
-                  color="primary"
-                  size={elementSize}
-                  onClick={() => {
-                    setDataSearch({ ...defaults });
-                    [...filters].forEach((filter) => {
-                      filter?.onChange?.();
-                    });
-                    reset();
-                    setValue("Search");
-                  }}
-                >
-                  <Refresh fontSize="inherit" />
-                </IconButton>
-              </Tooltip>
-
-              {titleButtons?.map((button, index) => (
-                <div key={index}>
-                  {button}
-                  {/* Các phần tử khác có thể được thêm ở đây nếu cần */}
-                </div>
-              ))}
-              <ExportExcelButton tableName={tableName} data={dataSearch} size={elementSize} />
-              {canCreate &&
-                !disableAdd &&
-                (!isSmallScreen ? (
-                  <Button
+            <Grid container spacing={{ xs: 1, xl: 1 }}>
+              <Grid item md={9} xs={12}>
+                <Typography variant="h4">{title}</Typography>
+              </Grid>
+              <Grid item md={3} xs={12} sx={{ display: "flex", justifyContent: "flex-end", alignItems: "center" }}>
+                <HuongDanButton tableName={tableName} size={elementSize} />
+                <Tooltip title="Làm mới">
+                  <IconButton
+                    variant="outlined"
+                    color="primary"
                     size={elementSize}
-                    variant="contained"
-                    startIcon={<Add fontSize="inherit" />}
-                    onClick={(e) => {
-                      if (!disableEditor) {
-                        setOpenEditorDialog(true);
-                        setSelectedEditItem(null);
-                      }
-                      onAddClick(e);
+                    onClick={() => {
+                      setDataSearch({ ...defaults });
+                      [...filters].forEach((filter) => {
+                        filter?.onChange?.();
+                      });
+                      reset();
+                      setValue("Search");
                     }}
                   >
-                    Thêm
-                  </Button>
-                ) : (
-                  <Tooltip title="Thêm">
-                    <IconButton
-                      variant="outlined" // Thêm variant ở đây
-                      color="primary"
+                    <Refresh fontSize="inherit" />
+                  </IconButton>
+                </Tooltip>
+
+                {titleButtons?.map((button, index) => (
+                  <div key={index}>
+                    {button}
+                    {/* Các phần tử khác có thể được thêm ở đây nếu cần */}
+                  </div>
+                ))}
+                <ExportExcelButton tableName={tableName} data={dataSearch} size={elementSize} />
+                {canCreate &&
+                  !disableAdd &&
+                  (!isSmallScreen ? (
+                    <Button
                       size={elementSize}
+                      variant="contained"
+                      startIcon={<Add fontSize="inherit" />}
                       onClick={(e) => {
                         if (!disableEditor) {
                           setOpenEditorDialog(true);
@@ -247,13 +234,29 @@ function DataManagement({
                         }
                         onAddClick(e);
                       }}
-                      sx={{ border: "1px solid", borderColor: "primary.main" }} // Điều chỉnh kiểu dáng nếu cần
+                      sx={{ ml: 0.5, mr: 0.5 }}
                     >
-                      <Add fontSize="inherit" />
-                    </IconButton>
-                  </Tooltip>
-                ))}
-            </Stack>
+                      Thêm
+                    </Button>
+                  ) : (
+                    <Button
+                      size={elementSize}
+                      variant="contained"
+                      startIcon={<Add fontSize="inherit" />}
+                      onClick={(e) => {
+                        if (!disableEditor) {
+                          setOpenEditorDialog(true);
+                          setSelectedEditItem(null);
+                        }
+                        onAddClick(e);
+                      }}
+                      sx={{ ml: 0.5, mr: 0.5 }}
+                    >
+                      Thêm
+                    </Button>
+                  ))}
+              </Grid>
+            </Grid>
           </Stack>
 
           <Card>

package/package.json

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