trithuc-mvc-react 1.5.0 → 1.5.1

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/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,10 +37,10 @@ DataManagement.propTypes = {
   disableEditor: PropTypes.bool,
   onAddClick: PropTypes.func,
   onEditClick: PropTypes.func,
-  tabPanel: PropTypes.node,
-  filterSize: PropTypes.oneOf(["small", "medium"])
+  tabPanel: PropTypes.node
 };
 
+
 function DataManagement({
   columns = [],
   title,
@@ -55,7 +56,13 @@ function DataManagement({
   onAddClick = () => {},
   onEditClick = () => {},
   tabPanel,
-  filterSize = "medium"
+  slotProps = {
+    header: {
+      sx: {
+       
+      }
+    }
+  }
 }) {
   const [openEditorDialog, setOpenEditorDialog] = useState(false);
   const [selectedEditItem, setSelectedEditItem] = useState(null);
@@ -73,6 +80,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 +128,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: 4, ...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 +149,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 +168,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.1",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"