trithuc-mvc-react 1.5.3 → 1.5.5

package/components/DataManagement/EditorDialog.jsx

@@ -31,7 +31,7 @@ function EditorDialog({ open, onClose = () => {}, defaultValues = {}, fields = [
   };
   const submitRef = useRef();
   return (
-    <Dialog open={open} onClose={onClose} maxWidth="lg" fullWidth={true} scroll={'body'}>
+    <Dialog open={open} onClose={onClose} maxWidth="md" fullWidth={true} scroll={'body'}>
       <DialogTitle>
         {defaultValues?.Id ? "Cập nhật" : "Thêm mới"}
         <IconButton
@@ -48,7 +48,7 @@ function EditorDialog({ open, onClose = () => {}, defaultValues = {}, fields = [
         </IconButton>
       </DialogTitle>
       <DialogContent dividers={true}>
-        <EditorForm fields={fields} submitRef={submitRef} />
+        <EditorForm fields={fields} submitRef={submitRef}  />
       </DialogContent>
       <DialogActions>
         <Button onClick={onClose}>Đóng</Button>

package/components/DataManagement/EditorForm.jsx

@@ -1,4 +1,4 @@
-import { Box } from "@mui/material";
+import { Box, useTheme, useMediaQuery } from "@mui/material";
 import { FormProvider, useForm } from "react-hook-form";
 import Grid from "@mui/material/Unstable_Grid2"; // Grid version 2
 import PropTypes from "prop-types";
@@ -15,12 +15,14 @@ import { yupResolver } from "@hookform/resolvers/yup";
 EditorForm.propTypes = {
   fields: PropTypes.array
 };
-function EditorForm({ fields, elementSize = "medium", submitRef }) {
+function EditorForm({ fields,  submitRef }) {
   const queryClient = useQueryClient();
   const { tableName, selectedEditItem, setOpenEditorDialog, validationSchema } = useDataTable();
 
   const methods = useForm({ defaultValues: {}, resolver: yupResolver(validationSchema) });
-
+  const theme = useTheme();
+  const downXl = useMediaQuery(theme.breakpoints.down("xl"));
+  const elementSize = downXl ? "small": "medium";
   useEffect(() => {
     if (selectedEditItem) {
       methods.setValue("Id", selectedEditItem.Id);
@@ -90,7 +92,7 @@ function EditorForm({ fields, elementSize = "medium", submitRef }) {
   };
   return (
     <FormProvider {...methods}>
-      <Box component={"form"} sx={{ pt: 2 }} onSubmit={methods.handleSubmit(onSubmit)}>
+      <Box component={"form"} onSubmit={methods.handleSubmit(onSubmit)}>
         <Grid container spacing={2}>
           {fields.map(
             ({

package/components/DataManagement/FilterGod.jsx

@@ -1,92 +1,91 @@
-import { Slider, Toolbar } from "@mui/material";
+import { Accordion, AccordionSummary, Box, FormControl, InputLabel, MenuItem, Select, Slider, Toolbar, Typography } from "@mui/material";
 import { useFormContext } from "react-hook-form";
 import Grid from "@mui/material/Unstable_Grid2";
 import DateRangePicker from "../date/DateRangePicker";
 import { FilterElement } from "./FilterElement";
 import { useDataTable } from "./hooks";
 
+import AccordionDetails from '@mui/material/AccordionDetails';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+
 export const FilterGod = ({ filters, elementSize = "small" }) => {
   const { handleSubmit } = useFormContext();
   const onSubmit = (data) => console.log(data);
   const { setDataSearch, dataSearch } = useDataTable();
 
   return (
-    <Toolbar
+    <Box
       component={"form"}
-      disableGutters
       onSubmit={handleSubmit(onSubmit)}
-      sx={{
-        px: 1,
-        my: elementSize == "small" ? 0 : 2,
-        display: "flex",
-        alignItems: "center"
-      }}
     >
-      <Grid
-        container
-        rowSpacing={2}
-        columnSpacing={{ xs: 2 }}
-        sx={{
-          px: 1,
-          flex: 1
-        }}
-      >
-        {filters.map(({ field, ...rest }) => {
-          if (rest.type === "date-range") {
-            return (
-              <Grid key={field.toString()} xs={12} sm={6} md={4} xl={3}>
-                <DateRangePicker
-                  onChange={(value) => {
-                    setDataSearch(({ previousState }) => ({
-                      ...previousState,
-                      [field[0]]: value[0],
-                      [field[1]]: value[1]
-                    }));
-                  }}
-                  size={elementSize}
-                  value={[dataSearch?.[field[0]], dataSearch?.[field[1]]]}
-                />
-              </Grid>
-            );
-          }
+      <Accordion>
+        <AccordionSummary
+          sx={{
+            minHeight: 40,
+            '& .MuiAccordionSummary-content': {
+              my: 1
+            }
+          }}
+          expandIcon={<ExpandMoreIcon />}
+          aria-controls="panel1a-content"
+          id="panel1a-header"
+        >
+          <Typography variant="h6">Tìm kiếm</Typography>
+        </AccordionSummary>
+        <AccordionDetails>
+          <Grid container spacing={1}>
+            {filters.map(({ field, size, ...rest }) => {
+              if (rest.type === "date-range") {
+                return (
+                  <Grid key={field.toString()} md={size?.md} xs={size?.xs} sm={size?.sm}>
+                    <DateRangePicker
+                      onChange={(value) => {
+                        setDataSearch(({ previousState }) => ({
+                          ...previousState,
+                          [field[0]]: value[0],
+                          [field[1]]: value[1]
+                        }));
+                      }}
+                      size={elementSize}
+                      value={[dataSearch?.[field[0]], dataSearch?.[field[1]]]}
+                    />
+                  </Grid>
+                );
+              }
 
-          if (rest.type === "slider-range") {
-            return (
-              <Grid
-                key={field.toString()}
-                xs={12}
-                sm={6}
-                md={4}
-                xl={3}
-                sx={{
-                  px: 4
-                }}
-              >
-                <Slider
-                  onChange={(e, value) => {
-                    setDataSearch({
-                      ...dataSearch,
-                      [field[0]]: value[0],
-                      [field[1]]: value[1]
-                    });
-                  }}
-                  size={elementSize}
-                  marks={rest.marks}
-                  defaultValue={rest.defaultValue}
-                  valueLabelDisplay="auto"
-                  max={rest.marks[rest.marks.length - 1]?.value}
-                  step={null}
-                />
-              </Grid>
-            );
-          }
-          return (
-            <Grid key={field} xs={12} sm={6} md={4} xl={3}>
-              <FilterElement name={field} {...rest} size={elementSize} />
-            </Grid>
-          );
-        })}
-      </Grid>
-    </Toolbar>
+              if (rest.type === "slider-range") {
+                return (
+                  <Grid
+                    key={field.toString()}
+                    md={size?.md} xs={size?.xs} sm={size?.sm}
+                  >
+                    <Slider
+                      onChange={(e, value) => {
+                        setDataSearch({
+                          ...dataSearch,
+                          [field[0]]: value[0],
+                          [field[1]]: value[1]
+                        });
+                      }}
+                      size={elementSize}
+                      marks={rest.marks}
+                      defaultValue={rest.defaultValue}
+                      valueLabelDisplay="auto"
+                      max={rest.marks[rest.marks.length - 1]?.value}
+                      step={null}
+                    />
+                  </Grid>
+                );
+              }
+              return (
+                <Grid key={field} md={size?.md} xs={size?.xs} sm={size?.sm} >
+                  <FilterElement name={field} {...rest} size={elementSize} />
+                </Grid>
+              );
+            })}
+          </Grid>
+        </AccordionDetails>
+      </Accordion>
+    </Box>
   );
 };

package/components/DataManagement/FormField.jsx

@@ -220,7 +220,8 @@ function FormField({
                   textField: {
                     fullWidth: true,
                     error: Boolean(error),
-                    helperText: error?.message
+                    helperText: error?.message,
+                    size: size
                   },
                   popper: {
                     disablePortal: false,

package/components/DataManagement/TableHead.jsx

@@ -1,30 +1,29 @@
-import { Checkbox, TableRow, TableCell, TableHead as MuiTableHead } from "@mui/material";
+import { Checkbox, TableRow, TableCell, TableHead as MuiTableHead, useTheme, useMediaQuery } from "@mui/material";
 import { useDataTable, usePermission } from "./hooks";
 export function TableHead({ numSelected, rowCount, onSelectAllClick, headLabel }) {
   const { canEdit } = usePermission();
   const { disableStatus } = useDataTable();
+  const theme = useTheme();
+  const downXl = useMediaQuery(theme.breakpoints.down("xl"));
   return (
     <MuiTableHead sx={{ height: 56, visibility: numSelected > 0 ? "hidden" : "visible" }}>
       <TableRow>
         <TableCell padding="checkbox">
           <Checkbox
             indeterminate={numSelected > 0 && numSelected < rowCount}
+            size={downXl?"small":"medium"}
             checked={rowCount > 0 && numSelected === rowCount}
             onChange={onSelectAllClick}
           />
         </TableCell>
         <TableCell sx={{ textAlign: "center" }}>STT</TableCell>
         {headLabel.map((headCell) => (
-          <TableCell
-            key={headCell.field}
-            align={headCell.alignRight ? "right" : "left"}
-            sx={{  textAlign: "center" }}
-          >
+          <TableCell key={headCell.field} align={headCell.alignRight ? "right" : "left"} sx={{ textAlign: "center" }}>
             {headCell.label}
           </TableCell>
         ))}
-        {!disableStatus && canEdit && <TableCell sx={{ textAlign: "center"} }>Kích hoạt</TableCell>}
-        <TableCell sx={{ minWidth: "136px", textAlign: "center" }} >Thao tác</TableCell>
+        {!disableStatus && canEdit && <TableCell sx={{ textAlign: "center" }}>Kích hoạt</TableCell>}
+        <TableCell sx={{ minWidth: "136px", textAlign: "center" }}>Thao tác</TableCell>
       </TableRow>
     </MuiTableHead>
   );

package/components/DataManagement/TableRowRender.jsx

@@ -1,10 +1,10 @@
-import { Checkbox, IconButton, Switch, TableCell, TableRow, Tooltip, Toolbar } from "@mui/material";
+import { Checkbox, IconButton, Switch, TableCell, TableRow, Tooltip, Toolbar, useMediaQuery } from "@mui/material";
 import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline";
 import { EditOutlined } from "@mui/icons-material";
 import { useDataTable, usePermission } from "./hooks";
 
 // material
-import { styled } from "@mui/material/styles";
+import { styled, useTheme } from "@mui/material/styles";
 import MoreMenu from "../MoreMenu";
 import { useMemo } from "react";
 
@@ -26,24 +26,29 @@ export const TableRowRender = ({ index, row, selected, onSelect, onChangeStatus,
     const tableActionsOnMoreMenu = tableActionsAfterFilter.filter(({ isOnTable = false }) => !isOnTable);
     return { tableActionsOnTable, tableActionsOnMoreMenu };
   }, [canView, canAction, tableActions]);
-
+ const theme = useTheme();
+ const downXl = useMediaQuery(theme.breakpoints.down("xl"));
   return (
     <TableRow hover key={row[selectedField]} selected={selected}>
       <TableCell padding="checkbox">
-        <Checkbox checked={selected} onChange={(event) => onSelect(event, row[selectedField])} />
+        <Checkbox
+          checked={selected}
+          size={downXl ? "small" : "medium"}
+          onChange={(event) => onSelect(event, row[selectedField])}
+        />
       </TableCell>
       <TableCell align="center">{index + 1}</TableCell>
       {columns.map(
         ({
           field,
-          type="text",
+          type = "text",
           valueGetter = (row) => {
             return row[field];
           },
           renderCell,
           valueFormat = (e) => e
         }) => {
-          let align = ( type=="image" || type == "number" || type =="date"|| type == "datetime") ? "right" : "left";
+          let align = type == "image" || type == "number" || type == "date" || type == "datetime" ? "right" : "left";
           return (
             <TableCell key={`${row[selectedField]}-${field}`} align={align}>
               {renderCell ? renderCell(row) : valueFormat(valueGetter(row))}

package/package.json

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