trithuc-mvc-react 1.5.2 → 1.5.4

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,12 +92,13 @@ 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(
             ({
               field,
               type = "text",
+              size,
               label,
               childrenFields,
               datas,
@@ -106,20 +109,8 @@ function EditorForm({ fields, elementSize = "medium", submitRef }) {
               keyValueLabel,
               required
             }) => {
-              let sizes = {
-                xs: 12,
-                sm: 6,
-                md: 4
-              };
-              if (type == "textarea") {
-                sizes = {
-                  xs: 12,
-                  sm: 12,
-                  md: 12
-                };
-              }
               return (
-                <Grid {...sizes} key={field}>
+                <Grid item md={size?.md} xs={size?.xs} sm={size?.sm} key={field}>
                   <FormField
                     type={type}
                     label={label}

package/components/DataManagement/FilterGod.jsx

@@ -17,15 +17,15 @@ export const FilterGod = ({ filters, elementSize = "small" }) => {
       onSubmit={handleSubmit(onSubmit)}
       sx={{
         px: 1,
-        my: elementSize == "small" ? 0 : 2,
+        my: elementSize == "small" ? 1 : 2,
         display: "flex",
         alignItems: "center"
       }}
     >
       <Grid
         container
-        rowSpacing={2}
-        columnSpacing={{ xs: 2 }}
+        spacing={{xs:1, xl:2}}
+       
         sx={{
           px: 1,
           flex: 1

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.2",
+  "version": "1.5.4",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"