trithuc-mvc-react 3.1.9 → 3.2.1

package/components/DataManagement/DataTableSM.jsx

@@ -360,7 +360,7 @@ const DataTableSM = ({ multipleActions = [], page, setPage = () => {}, disableEd
           </Grid>
         )}
 
-        <Grid>
+        <Grid size={12}>
           <TablePaginationCustom
             count={total}
             rowsPerPage={rowsPerPage}

package/components/DataManagement/FilterGod.jsx

@@ -1,4 +1,4 @@
-import { Accordion, AccordionSummary, Box, IconButton, Slider, Typography } from "@mui/material";
+import { Accordion, AccordionSummary, Box, Button, IconButton, Slider, Typography } from "@mui/material";
 import { Grid } from "@mui/material";
 import { useFormContext } from "react-hook-form";
 import { FilterElement } from "./FilterElement";
@@ -14,7 +14,7 @@ import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
 import "dayjs/locale/vi";
 import { toast } from "react-toastify";
 import { debounce } from "lodash";
-export const FilterGod = ({ tableName, filters, elementSize = "small", setPage = () => {} }) => {
+export const FilterGod = ({ tableName, filters, filterButtons, elementSize = "small", setPage = () => {} }) => {
   const { handleSubmit } = useFormContext();
   const onSubmit = (data) => console.log(data);
   const { setDataSearch, dataSearch } = useDataTable();
@@ -54,10 +54,9 @@ export const FilterGod = ({ tableName, filters, elementSize = "small", setPage =
 
         <AccordionDetails>
           <Grid container spacing={1}>
-            {filters.map(({ field, size, ...rest }) => {
+            {filters.map(({ field, label, size, ...rest }) => {
               if (rest.type === "date-range") {
-                const [label1, label2] = Array.isArray(field.label) ? field.label : ["Từ ngày", "Đến ngày"];
-
+                const [label1, label2] = Array.isArray(label) ? label : ["Từ ngày", "Đến ngày"];
                 const handleClear = (key) => {
                   setDataSearch((prev) => ({
                     ...prev,
@@ -188,6 +187,18 @@ export const FilterGod = ({ tableName, filters, elementSize = "small", setPage =
                 </Grid>
               );
             })}
+            {filterButtons.map(({ title, size, onClick, element, sx }, idx) => (
+              <Button
+                key={idx}
+                size={size}
+                variant="outlined"
+                onClick={() => onClick({ dataSearch })}
+                startIcon={element}
+                sx={{ ...sx }}
+              >
+                {title}
+              </Button>
+            ))}
           </Grid>
         </AccordionDetails>
       </Accordion>

package/components/DataManagement/index.jsx

@@ -50,7 +50,7 @@ DataManagement.propTypes = {
       onChangeAfter: PropTypes.func
     })
   ).isRequired,
-
+  filterButtons: PropTypes.array,
   editorFields: PropTypes.array,
   validationSchema: PropTypes.object,
   disableStatus: PropTypes.bool,
@@ -65,7 +65,8 @@ DataManagement.propTypes = {
   tabPanel: PropTypes.node,
   titleAddButton: PropTypes.string,
   thongKe: PropTypes.object,
-  bieuDo: PropTypes.object
+  bieuDo: PropTypes.object,
+  disableHead: PropTypes.bool
 };
 const getDefaultValues = (filters = []) => {
   const defaultValues = {};
@@ -84,6 +85,7 @@ function DataManagement({
   tableName,
   selectedField = "Id",
   filters: tableFilters = [],
+  filterButtons = [],
   editorFields = [],
   validationSchema = {},
   statusKey = "Status",
@@ -108,7 +110,8 @@ function DataManagement({
   defaultRowsPerPage = 5,
   titleAddButton = "Thêm",
   thongKe,
-  bieuDo
+  bieuDo,
+  disableHead = false
 }) {
   const [openEditorDialog, setOpenEditorDialog] = useState(false);
   const [selectedEditItem, setSelectedEditItem] = useState(null);
@@ -177,7 +180,8 @@ function DataManagement({
       defaultRowsPerPage,
       titleAddButton,
       thongKe,
-      bieuDo
+      bieuDo,
+      disableHead
     };
   }, [
     reserPage,
@@ -198,7 +202,8 @@ function DataManagement({
     backParentNavigator,
     defaultRowsPerPage,
     thongKe,
-    bieuDo
+    bieuDo,
+    disableHead
   ]);
   const isSmallScreen = useMediaQuery(theme.breakpoints.down("sm")); // Xác định màn hình nhỏ
   const methods = useForm({ defaultValues: getDefaultValues(filters) });
@@ -297,130 +302,138 @@ function DataManagement({
     <>
       <DataTableContext.Provider value={values}>
         <FormProvider {...methods}>
-          <Stack
-            direction="row"
-            sx={{
-              mb: upXL ? 1 : 1,
-              flexWrap: "wrap",
-              alignItems: "center",
-              gap: 1,
-              ...slotProps?.header?.sx
-            }}
-          >
-            {/* Khối trái */}
-            <Box
-              sx={{
-                flexGrow: 1,
-                Width: `${minWidthValue}px`,
-                textAlign: "left",
-                whiteSpace: "normal",
-                wordBreak: "break-word"
-              }}
-            >
-              <Typography variant={isSmallScreen ? "body2" : "subtitle1"}>{titleText}</Typography>
-            </Box>
-
-            {/* Khối phải */}
-            <Box
-              ref={rightBoxRef} // Tham chiếu đến phần tử này
+          {!disableHead && (
+            <Stack
+              direction="row"
               sx={{
-                display: "flex",
-                flexWrap: "nowrap",
-                justifyContent: "flex-end",
+                mb: upXL ? 1 : 1,
+                flexWrap: "wrap",
                 alignItems: "center",
-                flexShrink: 0,
-                // minWidth: "300px", // Đảm bảo chiều rộng tối thiểu
-                width: rightBoxMinWidth ? `${rightBoxMinWidth}px` : "auto" // Sử dụng chiều rộng đo được
+                gap: 1,
+                ...slotProps?.header?.sx
               }}
             >
-              {(viewMode === "thongke" || viewMode === "bieudo") && (
-                <Tooltip title="Danh sách dữ liệu">
-                  <IconButton size={elementSize} color="primary" onClick={() => setViewMode("table")} sx={{ ml: 0.5, mr: 0.5 }}>
-                    <TableChartIcon fontSize="inherit" />
-                  </IconButton>
-                </Tooltip>
-              )}
+              {/* Khối trái */}
+              <Box
+                sx={{
+                  flexGrow: 1,
+                  Width: `${minWidthValue}px`,
+                  textAlign: "left",
+                  whiteSpace: "normal",
+                  wordBreak: "break-word"
+                }}
+              >
+                <Typography variant={isSmallScreen ? "body2" : "subtitle1"}>{titleText}</Typography>
+              </Box>
+
+              {/* Khối phải */}
+              <Box
+                ref={rightBoxRef} // Tham chiếu đến phần tử này
+                sx={{
+                  display: "flex",
+                  flexWrap: "nowrap",
+                  justifyContent: "flex-end",
+                  alignItems: "center",
+                  flexShrink: 0,
+                  // minWidth: "300px", // Đảm bảo chiều rộng tối thiểu
+                  width: rightBoxMinWidth ? `${rightBoxMinWidth}px` : "auto" // Sử dụng chiều rộng đo được
+                }}
+              >
+                {(viewMode === "thongke" || viewMode === "bieudo") && (
+                  <Tooltip title="Danh sách dữ liệu">
+                    <IconButton size={elementSize} color="primary" onClick={() => setViewMode("table")} sx={{ ml: 0.5, mr: 0.5 }}>
+                      <TableChartIcon fontSize="inherit" />
+                    </IconButton>
+                  </Tooltip>
+                )}
+
+                {canThongKe && (
+                  <Tooltip title="Thống kê">
+                    <IconButton
+                      size={elementSize}
+                      color={viewMode === "thongke" ? "secondary" : "primary"}
+                      onClick={() => setViewMode("thongke")}
+                      sx={{ ml: 0.5, mr: 0.5 }}
+                    >
+                      <BarChartIcon fontSize="inherit" />
+                    </IconButton>
+                  </Tooltip>
+                )}
+
+                {canBieuDo && (
+                  <Tooltip title="Biểu đồ">
+                    <IconButton
+                      size={elementSize}
+                      color={viewMode === "bieudo" ? "secondary" : "primary"}
+                      onClick={() => setViewMode("bieudo")}
+                      sx={{ ml: 0.5, mr: 0.5 }}
+                    >
+                      <PieChartIcon fontSize="inherit" />
+                    </IconButton>
+                  </Tooltip>
+                )}
 
-              {canThongKe && (
-                <Tooltip title="Thống kê">
+                <HuongDanButton tableName={tableName} size={elementSize} />
+                <Tooltip title="Làm mới">
                   <IconButton
+                    variant="outlined"
+                    color="primary"
                     size={elementSize}
-                    color={viewMode === "thongke" ? "secondary" : "primary"}
-                    onClick={() => setViewMode("thongke")}
-                    sx={{ ml: 0.5, mr: 0.5 }}
+                    onClick={() => {
+                      setDataSearch({ ...defaults });
+                      [...filters].forEach((filter) => {
+                        filter?.onChange?.();
+                      });
+                      reset();
+                      setValue("Search");
+                    }}
                   >
-                    <BarChartIcon fontSize="inherit" />
+                    <Refresh fontSize="inherit" />
                   </IconButton>
                 </Tooltip>
-              )}
 
-              {canBieuDo && (
-                <Tooltip title="Biểu đồ">
-                  <IconButton
+                {titleButtons?.map((button, index) => (
+                  <div key={index}>{button}</div>
+                ))}
+
+                <ExportExcelButton tableName={tableName} data={dataSearch} size={elementSize} />
+
+                {canCreate && !disableAdd && (
+                  <Button
                     size={elementSize}
-                    color={viewMode === "bieudo" ? "secondary" : "primary"}
-                    onClick={() => setViewMode("bieudo")}
-                    sx={{ ml: 0.5, mr: 0.5 }}
+                    variant="contained"
+                    startIcon={<Add fontSize="inherit" />}
+                    onClick={(e) => {
+                      if (!disableEditor) {
+                        setOpenEditorDialog(true);
+                        setSelectedEditItem(null);
+                      }
+                      onAddClick(e);
+                    }}
+                    sx={{
+                      ml: 0.5,
+                      mr: 0.5,
+                      minWidth: "73px"
+                    }}
                   >
-                    <PieChartIcon fontSize="inherit" />
-                  </IconButton>
-                </Tooltip>
-              )}
-
-              <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}</div>
-              ))}
-
-              <ExportExcelButton tableName={tableName} data={dataSearch} size={elementSize} />
-
-              {canCreate && !disableAdd && (
-                <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,
-                    minWidth: "73px"
-                  }}
-                >
-                  {titleAddButton}
-                </Button>
-              )}
-            </Box>
-          </Stack>
+                    {titleAddButton}
+                  </Button>
+                )}
+              </Box>
+            </Stack>
+          )}
 
           <Card className="custom-card-DataManagement">
             {tabPanel}
             {viewMode === "table" && (
               <>
-                <FilterGod tableName={tableName} filters={filters} elementSize={elementSize} setPage={setPage} />
+                <FilterGod
+                  tableName={tableName}
+                  filters={filters}
+                  filterButtons={filterButtons}
+                  elementSize={elementSize}
+                  setPage={setPage}
+                />
                 {backParentNavigator}
                 {!isSmallScreen ? (
                   <DataTable

package/components/table/TablePagination.jsx

@@ -8,37 +8,77 @@ function defaultLabelDisplayedRows({ from, to, count }) {
 function TablePaginationCustom({ count, rowsPerPage, page, onPageChange, onRowsPerPageChange, ...rest }) {
   const theme = useTheme();
   const matchsDownMD = useMediaQuery(theme.breakpoints.down("md"));
-
-  return (
-    <Box sx={{ overflowX: "auto", width: "100%" }}>
-      <TablePagination
-        {...rest}
-        rowsPerPageOptions={[5, 10, 20, 25, 50, 100]}
-        component="div"
-        count={count}
-        rowsPerPage={rowsPerPage}
-        page={page}
-        onPageChange={onPageChange}
-        onRowsPerPageChange={onRowsPerPageChange}
-        showFirstButton
-        showLastButton
-        labelRowsPerPage={matchsDownMD ? "Số hàng" : "Số bản ghi trên trang:"}
-        labelDisplayedRows={defaultLabelDisplayedRows}
-        sx={{
-          "& .MuiTablePagination-toolbar": {
-            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": {
-            fontSize: matchsDownMD ? "0.65rem" : "0.8rem"
-          },
-          "& .MuiTablePagination-select": {
-            minWidth: matchsDownMD ? "50px" : "70px"
-          }
-        }}
-      />
-    </Box>
+  const isSmallScreen = useMediaQuery(theme.breakpoints.down("sm"));
+  return !isSmallScreen ? (
+    <TablePagination
+      {...rest}
+      rowsPerPageOptions={[5, 10, 20, 25, 50, 100]}
+      component="div"
+      count={count}
+      rowsPerPage={rowsPerPage}
+      page={page}
+      onPageChange={onPageChange}
+      onRowsPerPageChange={onRowsPerPageChange}
+      showFirstButton
+      showLastButton
+      labelRowsPerPage={matchsDownMD ? "Số hàng" : "Số bản ghi trên trang:"}
+      labelDisplayedRows={defaultLabelDisplayedRows}
+      sx={{
+        width: "100%",
+        "& .MuiTablePagination-toolbar": {
+          justifyContent: "flex-end",
+          flexWrap: "wrap", // Cho nó xuống dòng nếu thiếu chỗ
+          paddingLeft: "8px",
+          paddingRight: "8px"
+        },
+        "& .MuiTablePagination-selectLabel, & .MuiTablePagination-displayedRows": {
+          fontSize: "0.7rem"
+        },
+        "& .MuiTablePagination-select": {
+          minWidth: "60px"
+        }
+      }}
+    />
+  ) : (
+    <TablePagination
+      {...rest}
+      rowsPerPageOptions={[5, 10, 20, 25, 50, 100]}
+      component="div"
+      count={count}
+      rowsPerPage={rowsPerPage}
+      page={page}
+      onPageChange={onPageChange}
+      onRowsPerPageChange={onRowsPerPageChange}
+      showFirstButton
+      showLastButton
+      labelRowsPerPage={matchsDownMD ? "Số hàng" : "Số bản ghi trên trang:"}
+      labelDisplayedRows={defaultLabelDisplayedRows}
+      sx={{
+        width: "100%",
+        overflowX: "auto",
+        "& .MuiTablePagination-toolbar": {
+          display: "flex",
+          flexWrap: "wrap", // Cho xuống dòng nếu không đủ chỗ
+          justifyContent: "space-between",
+          paddingLeft: "6px",
+          paddingRight: "6px",
+          gap: "4px", // Giảm khoảng cách
+          minHeight: "auto"
+        },
+        "& .MuiTablePagination-selectLabel, & .MuiTablePagination-displayedRows": {
+          fontSize: "0.65rem"
+        },
+        "& .MuiTablePagination-select": {
+          fontSize: "0.65rem",
+          minWidth: "50px"
+        },
+        "& .MuiTablePagination-actions > button": {
+          fontSize: "0.7rem",
+          minWidth: "24px",
+          padding: "2px"
+        }
+      }}
+    />
   );
 }
 

package/package.json

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