trithuc-mvc-react 3.1.1 → 3.1.3

package/api/index.js

@@ -67,6 +67,35 @@ export const getDatasFromTable = async ({ tableName, page, pageSize, data }) =>
   }
 };
 
+export const getDatasFromTableDropdownlist = async ({ tableName, page, pageSize, data }) => {
+  try {
+    let res;
+    // Trường hợp dùng tableName với MVC4
+    if (!apiUrl) {
+      res = await api.get(`${getBaseUrl()}/Admin/${tableName}/LoadData`, {
+        params: {
+          json: JSON.stringify(data),
+          page,
+          pageSize
+        }
+      });
+    } else {
+      // Trường hợp dùng api .NET Core
+      res = await api.get(`${getBaseUrl()}/${apiUrl}/${tableName}/Dropdownlist`, {
+        params: {
+          PageNumber: page,
+          PageSize: pageSize,
+          ...data
+        }
+      });
+    }
+    return res.data;
+  } catch (error) {
+    console.error("Error fetching data:", error);
+    throw error;
+  }
+};
+
 export const getDataFromTable = async ({ tableName, id }) => {
   try {
     if (!apiUrl) {

package/components/DataManagement/EditorForm.jsx

@@ -1,5 +1,5 @@
 import { Box, useMediaQuery, useTheme } from "@mui/material";
-import Grid from "@mui/material/Unstable_Grid2";
+import { Grid } from "@mui/material";
 import PropTypes from "prop-types";
 import { FormProvider, useForm } from "react-hook-form";
 
@@ -185,7 +185,7 @@ function EditorForm({ fields, submitRef }) {
               ...rest
             }) => {
               return (
-                <Grid item md={size?.md} xs={size?.xs} sm={size?.sm} key={field}>
+                <Grid md={size?.md} xs={size?.xs} sm={size?.sm} key={field}>
                   <FormField
                     type={type}
                     label={label}

package/components/DataManagement/ExportExcelButton.jsx

@@ -27,7 +27,7 @@ const ExportExcelButton = ({ tableName, data, size = "small" }) => {
       onClick={() => {
         handleExportExcel(tableName, data);
       }}
-      sx={{ ml: 0.5, mr: 0.5 }}
+      sx={{ ml: 0.5, mr: 0.5, minWidth: "73px" }}
     >
       Excel
     </Button>
@@ -39,7 +39,7 @@ const ExportExcelButton = ({ tableName, data, size = "small" }) => {
       onClick={() => {
         handleExportExcel(tableName, data);
       }}
-      sx={{ ml: 0.5, mr: 0.5 }}
+      sx={{ ml: 0.5, mr: 0.5, minWidth: "73px" }}
     >
       Excel
     </Button>

package/components/DataManagement/FilterGod.jsx

@@ -1,5 +1,5 @@
 import { Accordion, AccordionSummary, Box, IconButton, Slider, Typography } from "@mui/material";
-import Grid from "@mui/material/Unstable_Grid2";
+import { Grid } from "@mui/material";
 import { useFormContext } from "react-hook-form";
 import { FilterElement } from "./FilterElement";
 import { useDataTable } from "./hooks";
@@ -36,16 +36,22 @@ export const FilterGod = ({ tableName, filters, elementSize = "small", setPage =
         <AccordionSummary
           sx={{
             minHeight: 40,
+            "&.Mui-expanded": {
+              minHeight: 40
+            },
             "& .MuiAccordionSummary-content": {
-              my: 1
+              my: 0.5
             }
           }}
-          expandIcon={<ExpandMoreIcon />}
+          expandIcon={<ExpandMoreIcon sx={{ fontSize: "0.95rem", minHeight: "40px" }} />}
           aria-controls="panel1a-content"
           id="panel1a-header"
         >
-          <Typography variant="h6">Tìm kiếm</Typography>
+          <Typography variant="h6" sx={{ fontSize: "0.75rem" }}>
+            Tìm kiếm
+          </Typography>
         </AccordionSummary>
+
         <AccordionDetails>
           <Grid container spacing={1}>
             {filters.map(({ field, size, ...rest }) => {
@@ -147,20 +153,16 @@ export const FilterGod = ({ tableName, filters, elementSize = "small", setPage =
                 );
 
                 return (
-                  <Grid container key={field.toString()} md={size?.md} xs={size?.xs} sm={size?.sm}>
-                    <Grid item xs={6}>
-                      {renderDatePicker(field[0], label1, field[1], "max")}
-                    </Grid>
-                    <Grid item xs={6}>
-                      {renderDatePicker(field[1], label2, field[0], "min")}
-                    </Grid>
+                  <Grid container key={field.toString()} size={{ ...size }}>
+                    <Grid size={{ xs: 12, md: 6 }}>{renderDatePicker(field[0], label1, field[1], "max")}</Grid>
+                    <Grid size={{ xs: 12, md: 6 }}>{renderDatePicker(field[1], label2, field[0], "min")}</Grid>
                   </Grid>
                 );
               }
 
               if (rest.type === "slider-range") {
                 return (
-                  <Grid key={field.toString()} md={size?.md} xs={size?.xs} sm={size?.sm}>
+                  <Grid key={field.toString()} size={{ ...size }}>
                     <Slider
                       onChange={(e, value) => {
                         setDataSearch({
@@ -181,7 +183,7 @@ export const FilterGod = ({ tableName, filters, elementSize = "small", setPage =
                 );
               }
               return (
-                <Grid key={field.toString()} md={size?.md} xs={size?.xs} sm={size?.sm}>
+                <Grid key={field.toString()} size={{ ...size }}>
                   <FilterElement name={field.toString()} {...rest} setPage={setPage} />
                 </Grid>
               );

package/components/DataManagement/TableRowRenderSM.jsx

@@ -48,7 +48,16 @@ export const TableRowRenderSM = ({
 
   return (
     <TableRow hover key={row[selectedField]} selected={selected} sx={{ width: "100%" }}>
-      <TableCell colSpan={columns.length} align="left" sx={{ width: "100%" }}>
+      <TableCell
+        colSpan={columns.length}
+        align="left"
+        sx={{
+          maxWidth: "100%", // Giới hạn tối đa theo container
+          wordBreak: "break-word", // Xuống dòng khi vượt quá
+          whiteSpace: "normal", // Cho phép xuống dòng
+          overflowWrap: "break-word" // Hỗ trợ xuống dòng trong các trình duyệt cũ
+        }}
+      >
         {columns.map(({ field, label, type = "text", valueGetter = (row) => row[field], renderCell, valueFormat = (e) => e }) => {
           const value = renderCell ? renderCell(row) : valueFormat(valueGetter(row));
           return (

package/components/DataManagement/index.jsx

@@ -1,4 +1,4 @@
-import { Button, Card, Grid, IconButton, Stack, Tooltip, Typography, useMediaQuery, useTheme } from "@mui/material";
+import { Box, Button, Card, Grid, IconButton, Stack, Tooltip, Typography, useMediaQuery, useTheme } from "@mui/material";
 
 import { useEffect, useMemo, useState } from "react";
 
@@ -16,6 +16,7 @@ import DataTableSM from "./DataTableSM";
 import ExportExcelButton from "./ExportExcelButton";
 import { FilterGod } from "./FilterGod";
 import HuongDanButton from "./HuongDanButton";
+import { useRef } from "react";
 
 DataManagement.propTypes = {
   columns: PropTypes.array,
@@ -58,7 +59,8 @@ DataManagement.propTypes = {
   disableEditor: PropTypes.bool,
   onAddClick: PropTypes.func,
   onEditClick: PropTypes.func,
-  tabPanel: PropTypes.node
+  tabPanel: PropTypes.node,
+  titleAddButton: PropTypes.string
 };
 const getDefaultValues = (filters = []) => {
   const defaultValues = {};
@@ -98,7 +100,8 @@ function DataManagement({
       sx: {}
     }
   },
-  defaultRowsPerPage = 5
+  defaultRowsPerPage = 5,
+  titleAddButton = "Thêm"
 }) {
   const [openEditorDialog, setOpenEditorDialog] = useState(false);
   const [selectedEditItem, setSelectedEditItem] = useState(null);
@@ -161,7 +164,8 @@ function DataManagement({
       onEditClick,
       hasTabpanel,
       backParentNavigator,
-      defaultRowsPerPage
+      defaultRowsPerPage,
+      titleAddButton
     };
   }, [
     reserPage,
@@ -185,79 +189,183 @@ function DataManagement({
   const isSmallScreen = useMediaQuery(theme.breakpoints.down("sm")); // Xác định màn hình nhỏ
   const methods = useForm({ defaultValues: getDefaultValues(filters) });
   const { reset, setValue } = methods;
+
+  const titleText = title || "";
+  const [titleWidth, setTitleWidth] = useState(0);
+  const [minWidthValue, setMinWidthValue] = useState(0); // Thêm state cho minWidthValue
+
+  // Đo chiều rộng của titleText khi render lần đầu
+  useEffect(() => {
+    const titleElement = document.createElement("span");
+    titleElement.style.font = "normal 16px Arial"; // Đảm bảo phông chữ và kích thước giống như bạn dùng trong UI
+    titleElement.style.visibility = "hidden"; // Ẩn element tạm thời
+    titleElement.textContent = titleText;
+
+    document.body.appendChild(titleElement);
+    setTitleWidth(titleElement.offsetWidth); // Lấy chiều rộng của title
+    document.body.removeChild(titleElement); // Xóa element sau khi đo xong
+  }, [titleText]);
+
+  // Khi titleWidth thay đổi, tính toán minWidthValue
+  useEffect(() => {
+    if (titleWidth > 0) {
+      const calculatedMinWidth = Math.max(titleWidth, 150); // Đảm bảo minWidthValue không nhỏ hơn 150px
+      setMinWidthValue(calculatedMinWidth);
+    }
+  }, [titleWidth]); // Phụ thuộc vào titleWidth để đảm bảo minWidthValue được cập nhật khi chiều rộng title thay đổi
+
+  const rightBoxRef = useRef(null); // Tham chiếu đến khối phải
+  const [rightBoxMinWidth, setRightBoxMinWidth] = useState(0); // Lưu chiều rộng của khối phải
+
+  // Đo chiều rộng của khối phải khi component render và khi thay đổi kích thước cửa sổ
+  useEffect(() => {
+    // Hàm xử lý resize
+    const handleResize = () => {
+      const currentWindowWidth = window.innerWidth;
+
+      // Đo chiều rộng của khối phải trực tiếp từ ref
+      const rightBoxWidth = rightBoxRef.current ? rightBoxRef.current.offsetWidth : 0;
+
+      // Cập nhật chiều rộng khối phải (rightBoxMinWidth) tùy theo kích thước của cửa sổ và khối
+      if (currentWindowWidth - (minWidthValue + 30) < rightBoxWidth) {
+        // console.log(
+        //   `currentWindowWidth - minWidthValue 1: ${currentWindowWidth - minWidthValue} - rightBoxWidth: ${rightBoxWidth}`
+        // );
+        setRightBoxMinWidth(currentWindowWidth - 30); // Điều chỉnh chiều rộng khối phải nếu không đủ không gian
+      } else {
+        // console.log(
+        //   `currentWindowWidth - minWidthValue 2: ${currentWindowWidth - minWidthValue} - rightBoxWidth: ${rightBoxWidth}`
+        // );
+        setRightBoxMinWidth(rightBoxWidth); // Nếu đủ không gian, dùng chiều rộng khối phải
+      }
+    };
+
+    // Lần render đầu tiên, tính toán chiều rộng khối phải
+    const initialResize = () => {
+      const rightBoxWidth = rightBoxRef.current ? rightBoxRef.current.offsetWidth : 0;
+      const currentWindowWidth = window.innerWidth;
+
+      // Cập nhật giá trị minWidth ngay khi render lần đầu
+      if (currentWindowWidth - (minWidthValue + 30) < rightBoxWidth) {
+        // console.log(
+        //   `currentWindowWidth - minWidthValue 3: ${currentWindowWidth - minWidthValue} - rightBoxWidth: ${rightBoxWidth}`
+        // );
+        setRightBoxMinWidth(currentWindowWidth - 30); // Điều chỉnh chiều rộng khối phải nếu không đủ không gian
+      } else {
+        // console.log(
+        //   `currentWindowWidth - minWidthValue 4: ${currentWindowWidth - minWidthValue} - rightBoxWidth: ${rightBoxWidth}`
+        // );
+        setRightBoxMinWidth(rightBoxWidth); // Nếu đủ không gian, dùng chiều rộng của khối phải
+      }
+    };
+
+    // Gọi hàm tính toán ngay khi render lần đầu
+    if (minWidthValue > 0) {
+      initialResize();
+    }
+
+    // Lắng nghe sự kiện thay đổi kích thước cửa sổ
+    window.addEventListener("resize", handleResize);
+
+    // Dọn dẹp sự kiện khi component bị hủy
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, [minWidthValue]); // Phụ thuộc vào minWidthValue để tính toán khi nó được cập nhật
+
+  // In các giá trị trong console để kiểm tra
+  // useEffect(() => {
+  //   console.log("minWidthValue:", minWidthValue);
+  //   console.log("rightBoxMinWidth:", rightBoxMinWidth);
+  // }, [rightBoxMinWidth]);
+
   return (
     <>
       <DataTableContext.Provider value={values}>
         <FormProvider {...methods}>
-          <Stack direction="row" justifyContent={"space-between"} sx={{ mb: upXL ? 2 : 1, ...slotProps?.header?.sx }}>
-            <Grid container spacing={{ xs: 1, xl: 1 }}>
-              <Grid item md={9} xs={12}>
-                <Typography variant="h4">{title}</Typography>
-              </Grid>
-              <Grid item md={3} xs={12} sx={{ display: "flex", justifyContent: "flex-end", alignItems: "center" }}>
-                <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}
-                    {/* Các phần tử khác có thể được thêm ở đây nếu cần */}
-                  </div>
-                ))}
-                <ExportExcelButton tableName={tableName} data={dataSearch} size={elementSize} />
-                {canCreate &&
-                  !disableAdd &&
-                  (!isSmallScreen ? (
-                    <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 }}
-                    >
-                      Thêm
-                    </Button>
-                  ) : (
-                    <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 }}
-                    >
-                      Thêm
-                    </Button>
-                  ))}
-              </Grid>
-            </Grid>
+          <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="h4">{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
+              }}
+            >
+              <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>
 
           <Card className="custom-card-DataManagement">

package/components/DataManagement/upload/RhfUploadAvatar.jsx

@@ -2,7 +2,7 @@ import { useCallback } from "react";
 import { uploadFile } from "@/apis/index";
 import { URL_APPLICATION } from "@/constants";
 import UploadAvatar from "./UploadAvatar";
-import { FormHelperText, Typography } from "@mui/material/index";
+import { FormHelperText, Typography } from "@mui/material";
 import bytesToSize from "@/utils/bytesToSize";
 import { Controller, useFormContext } from "react-hook-form";
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "trithuc-mvc-react",
-  "version": "3.1.1",
+  "version": "3.1.3",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
@@ -13,40 +13,40 @@
   },
   "description": "",
   "dependencies": {
-    "@emotion/react": "^11.13.5",
-    "@emotion/styled": "^11.13.5",
-    "@hookform/resolvers": "^3.9.1",
-    "@iconify/react": "^5.0.2",
-    "axios": "^1.7.7",
-    "date-fns": "^3.6.0",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@hookform/resolvers": "^5.0.1",
+    "@iconify/react": "^5.2.1",
+    "axios": "^1.8.4",
+    "date-fns": "^4.1.0",
     "lodash": "^4.17.21",
     "moment": "^2.30.1",
     "prop-types": "^15.8.1",
-    "yup": "^1.4.0"
+    "yup": "^1.6.1"
   },
   "devDependencies": {
-    "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.1",
-    "eslint": "^9.15.0",
-    "eslint-plugin-react": "^7.37.2",
-    "eslint-plugin-react-hooks": "^5.0.0",
-    "eslint-plugin-react-refresh": "^0.4.14",
+    "@types/react": "^19.1.2",
+    "@types/react-dom": "^19.1.2",
+    "eslint": "^9.24.0",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.19",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },
   "peerDependencies": {
-    "@mui/lab": "^5.0.0-alpha.142",
-    "@mui/material": "^5.15.12",
-    "@mui/system": "^5.15.12",
-    "@mui/icons-material": "^5.15.12",
-    "@mui/x-tree-view": "^7.22.1",
-    "@mui/x-date-pickers": "^6.19.6",
-    "material-ui-confirm": "^3.0.16",
+    "@mui/lab": "^7.0.0-beta.11",
+    "@mui/material": "^7.0.2",
+    "@mui/system": "^7.0.2",
+    "@mui/icons-material": "^7.0.2",
+    "@mui/x-tree-view": "^7.28.1",
+    "@mui/x-date-pickers": "^7.28.3",
+    "material-ui-confirm": "^4.0.0",
     "react": ">=16",
     "react-dom": ">=16",
-    "react-hook-form": "^7.53.2",
+    "react-hook-form": "^7.55.0",
     "react-query": "^3.39.3",
-    "react-toastify": "^11.0.2",
+    "react-toastify": "^11.0.5",
     "dayjs": "^1.11.13"
   }
 }