trithuc-mvc-react 1.5.0 → 1.5.2

package/components/DataManagement/DataTable.jsx

@@ -1,4 +1,4 @@
-import { Table, TableBody, TableCell, TableContainer, TableRow } from "@mui/material";
+import { Table, TableBody, TableCell, TableContainer, TableRow, useMediaQuery, useTheme } from "@mui/material";
 import TablePaginationCustom from "../table/TablePagination";
 import { useMemo, useState } from "react";
 
@@ -142,6 +142,9 @@ const DataTable = () => {
       })
       .catch(() => {});
   };
+  const theme = useTheme();
+  const downXL = useMediaQuery(theme.breakpoints.down("xl"));
+  console.log("downXL", downXL);
   return (
     <>
       <TableContainer sx={{ position: "relative" }}>
@@ -151,8 +154,13 @@ const DataTable = () => {
           rowCount={rows.length}
           onDeleteMultiple={handleDeleteMultiple}
         />
-        <Table className="border">
-          <TableHead headLabel={columns} onSelectAllClick={handleSelectAllClick} numSelected={selected?.length} rowCount={rows.length} />
+        <Table className="border" size={downXL ? "small" : "medium"}>
+          <TableHead
+            headLabel={columns}
+            onSelectAllClick={handleSelectAllClick}
+            numSelected={selected?.length}
+            rowCount={rows.length}
+          />
           {isLoading ? (
             <TableRowsLoader rowsNum={5} colsNum={columns.length + 4} />
           ) : (
@@ -169,10 +177,12 @@ const DataTable = () => {
                   onDelete={handleDelete}
                 />
               ))}
-              
+
               {rows?.length == 0 && (
                 <TableRow>
-                  <TableCell colSpan={columns.length + 4} align="center">Không có dữ liệu</TableCell>
+                  <TableCell colSpan={columns.length + 4} align="center">
+                    Không có dữ liệu
+                  </TableCell>
                 </TableRow>
               )}
             </TableBody>

package/components/DataManagement/ExportExcelButton.jsx

@@ -3,7 +3,7 @@ import { exportExcel } from "../../api";
 import { Button } from "@mui/material";
 import { Download } from "@mui/icons-material";
 
-const ExportExcelButton = ({ tableName, data }) => {
+const ExportExcelButton = ({ tableName, data, size = "small" }) => {
   const handleExportExcel = async (tableName, data) => {
     const _data = await exportExcel({ tableName, data });
     if (_data.status) {
@@ -14,14 +14,15 @@ const ExportExcelButton = ({ tableName, data }) => {
   };
   return (
     <Button
+      size={size}
       variant="outlined"
       startIcon={<Download />}
       onClick={() => {
-        handleExportExcel(tableName,data);
+        handleExportExcel(tableName, data);
       }}
     >
       Excel
     </Button>
   );
-}
-export default ExportExcelButton;
+};
+export default ExportExcelButton;

package/components/DataManagement/FilterElement.jsx

@@ -29,6 +29,7 @@ export function FilterElement({ name, type, label, keyValue, keyLabel, childrenF
 
   switch (type) {
     case "search":
+      console.log(size)
       return (
         <OutlinedInput
           {...rest}

package/components/DataManagement/FilterGod.jsx

@@ -5,7 +5,7 @@ import DateRangePicker from "../date/DateRangePicker";
 import { FilterElement } from "./FilterElement";
 import { useDataTable } from "./hooks";
 
-export const FilterGod = ({ filters, elementSize = "medium" }) => {
+export const FilterGod = ({ filters, elementSize = "small" }) => {
   const { handleSubmit } = useFormContext();
   const onSubmit = (data) => console.log(data);
   const { setDataSearch, dataSearch } = useDataTable();
@@ -17,7 +17,7 @@ export const FilterGod = ({ filters, elementSize = "medium" }) => {
       onSubmit={handleSubmit(onSubmit)}
       sx={{
         px: 1,
-        my: 2,
+        my: elementSize == "small" ? 0 : 2,
         display: "flex",
         alignItems: "center"
       }}

package/components/DataManagement/TableHead.jsx

@@ -13,14 +13,18 @@ export function TableHead({ numSelected, rowCount, onSelectAllClick, headLabel }
             onChange={onSelectAllClick}
           />
         </TableCell>
-        <TableCell sx={{ fontWeight: 700 }}>STT</TableCell>
+        <TableCell sx={{ textAlign: "center" }}>STT</TableCell>
         {headLabel.map((headCell) => (
-          <TableCell key={headCell.field} align={headCell.alignRight ? "right" : "left"} sx={{ fontWeight: 700 }}>
+          <TableCell
+            key={headCell.field}
+            align={headCell.alignRight ? "right" : "left"}
+            sx={{  textAlign: "center" }}
+          >
             {headCell.label}
           </TableCell>
         ))}
-        {!disableStatus && canEdit && <TableCell>Kích hoạt</TableCell>}
-        <TableCell sx={{minWidth: '136px'}}>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

@@ -32,19 +32,20 @@ export const TableRowRender = ({ index, row, selected, onSelect, onChangeStatus,
       <TableCell padding="checkbox">
         <Checkbox checked={selected} onChange={(event) => onSelect(event, row[selectedField])} />
       </TableCell>
-      <TableCell>{index + 1}</TableCell>
+      <TableCell align="center">{index + 1}</TableCell>
       {columns.map(
         ({
           field,
-          alignRight = false,
+          type="text",
           valueGetter = (row) => {
             return row[field];
           },
           renderCell,
           valueFormat = (e) => e
         }) => {
+          let align = ( type=="image" || type == "number" || type =="date"|| type == "datetime") ? "right" : "left";
           return (
-            <TableCell key={`${row[selectedField]}-${field}`} align={alignRight ? "right" : "left"}>
+            <TableCell key={`${row[selectedField]}-${field}`} align={align}>
               {renderCell ? renderCell(row) : valueFormat(valueGetter(row))}
             </TableCell>
           );

package/components/DataManagement/index.jsx

@@ -1,4 +1,4 @@
-import { Button, Card, IconButton, Stack, Tooltip, Typography } from "@mui/material";
+import { Button, Card, IconButton, Stack, Tooltip, Typography, useTheme, useMediaQuery } from "@mui/material";
 
 import { useEffect, useMemo, useState } from "react";
 
@@ -12,6 +12,7 @@ import EditorDialog from "./EditorDialog";
 
 import ExportExcelButton from "./ExportExcelButton";
 import { FilterGod } from "./FilterGod";
+import { useDataTable } from "./hooks";
 
 DataManagement.propTypes = {
   columns: PropTypes.array,
@@ -36,8 +37,7 @@ DataManagement.propTypes = {
   disableEditor: PropTypes.bool,
   onAddClick: PropTypes.func,
   onEditClick: PropTypes.func,
-  tabPanel: PropTypes.node,
-  filterSize: PropTypes.oneOf(["small", "medium"])
+  tabPanel: PropTypes.node
 };
 
 function DataManagement({
@@ -55,7 +55,11 @@ function DataManagement({
   onAddClick = () => {},
   onEditClick = () => {},
   tabPanel,
-  filterSize = "medium"
+  slotProps = {
+    header: {
+      sx: {}
+    }
+  }
 }) {
   const [openEditorDialog, setOpenEditorDialog] = useState(false);
   const [selectedEditItem, setSelectedEditItem] = useState(null);
@@ -73,6 +77,13 @@ function DataManagement({
     return { defaults, filters };
   }, [tableFilters]);
 
+  const theme = useTheme();
+  const upXL = useMediaQuery(theme.breakpoints.up("xl"));
+  const elementSize = useMemo(() => {
+    const elementSize = upXL ? "medium" : "small";
+    return elementSize;
+  }, [upXL]);
+
   useEffect(() => {
     if (selectedEditItem && disableEditor) {
       onEditClick(selectedEditItem);
@@ -114,13 +125,14 @@ function DataManagement({
       <DataTableContext.Provider value={values}>
         <PermissionContext.Provider value={permissionValues}>
           <FormProvider {...methods}>
-            <Stack direction="row" justifyContent={"space-between"} sx={{ mb: 4 }}>
+            <Stack direction="row" justifyContent={"space-between"} sx={{ mb: upXL ? 2 : 1, ...slotProps?.header?.sx }}>
               <Typography variant="h4">{title}</Typography>
               <Stack direction="row" spacing={1}>
                 <Tooltip title="Làm mới">
                   <IconButton
                     variant="outlined"
                     color="primary"
+                    size={elementSize}
                     onClick={() => {
                       setDataSearch({ ...defaults });
                       [...filters].forEach((filter) => {
@@ -134,9 +146,10 @@ function DataManagement({
                   </IconButton>
                 </Tooltip>
 
-                <ExportExcelButton tableName={tableName} data={dataSearch} />
+                <ExportExcelButton tableName={tableName} data={dataSearch} size={elementSize} />
                 {(!Permission || Permission.Create) && (
                   <Button
+                    size={elementSize}
                     variant="contained"
                     startIcon={<Add />}
                     onClick={(e) => {
@@ -152,9 +165,10 @@ function DataManagement({
                 )}
               </Stack>
             </Stack>
+
             <Card>
               {tabPanel}
-              <FilterGod filters={filters} elementSize={filterSize} />
+              <FilterGod filters={filters} elementSize={elementSize} />
               <DataTable />
             </Card>
           </FormProvider>

package/package.json

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