trithuc-mvc-react 3.1.8 → 3.2.0

package/components/DataManagement/DataTable.jsx

@@ -350,7 +350,7 @@ const DataTable = ({ multipleActions = [], page, setPage = () => {}, disableEdit
           </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();
@@ -188,6 +188,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/TableRowRenderSM.jsx

@@ -79,12 +79,13 @@ export const TableRowRenderSM = ({
         )}
 
         {/* 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 && (
+        <Grid container spacing={0.5} sx={{ width: "100%", pt: 2, pb: 2 }}>
+          {!disableCellThaoTac && (
+            <>
+              {!disableEdit && canEdit && (
+                <Grid size={4}>
                   <Button
+                    fullWidth
                     size="small"
                     variant="outlined"
                     color="primary"
@@ -94,9 +95,12 @@ export const TableRowRenderSM = ({
                   >
                     Sửa
                   </Button>
-                )}
-                {canView && !tableActions?.some(({ permissionType }) => permissionType === "view") && (
+                </Grid>
+              )}
+              {canView && !tableActions?.some(({ permissionType }) => permissionType === "view") && (
+                <Grid size={4}>
                   <Button
+                    fullWidth
                     size="small"
                     variant="outlined"
                     color="info"
@@ -106,9 +110,12 @@ export const TableRowRenderSM = ({
                   >
                     Xem
                   </Button>
-                )}
-                {!disableDelete && canDelete && (
+                </Grid>
+              )}
+              {!disableDelete && canDelete && (
+                <Grid size={4}>
                   <Button
+                    fullWidth
                     size="small"
                     variant="outlined"
                     color="error"
@@ -118,11 +125,14 @@ export const TableRowRenderSM = ({
                   >
                     Xóa
                   </Button>
-                )}
-                {tableActionsOnTable.map(
-                  ({ title, onClick, element, visible = true }, idx) =>
-                    (typeof visible === "function" ? visible(row) : visible) && (
+                </Grid>
+              )}
+              {tableActionsOnTable.map(
+                ({ title, size, onClick, element, visible = true }, idx) =>
+                  (typeof visible === "function" ? visible(row) : visible) && (
+                    <Grid size={4}>
                       <Button
+                        fullWidth
                         key={idx}
                         size="small"
                         variant="outlined"
@@ -134,12 +144,12 @@ export const TableRowRenderSM = ({
                       >
                         {title === "xem chi tiết" ? "Xem" : title}
                       </Button>
-                    )
-                )}
-                <MoreMenu actions={tableActionsOnMoreMenu} data={row} />
-              </>
-            )}
-          </Grid>
+                    </Grid>
+                  )
+              )}
+              <MoreMenu actions={tableActionsOnMoreMenu} data={row} />
+            </>
+          )}
         </Grid>
       </TableCell>
     </TableRow>
@@ -148,13 +158,13 @@ export const TableRowRenderSM = ({
 
 // Button style dùng chung
 const buttonStyle = {
-  marginLeft: 0.3,
-  marginRight: 0.3,
-  marginBottom: 0.5,
-  borderRadius: 14,
+  // marginLeft: 0.3,
+  // marginRight: 0.3,
+  marginBottom: "10px",
+  borderRadius: "10px",
   minWidth: 50,
-  padding: "2px 8px",
-  height: "20px",
+  padding: "4px 8px",
+  height: "23px",
   fontSize: "0.6rem",
   whiteSpace: "nowrap",
   overflow: "hidden",

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/package.json

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