trithuc-mvc-react 3.3.6 → 3.3.7

package/components/DataManagement/ExportExcelButton.jsx

@@ -27,25 +27,47 @@ const ExportExcelButton = ({ tableName, data, size = "small" }) => {
       onClick={() => {
         handleExportExcel(tableName, data);
       }}
-      sx={{ ml: 0.5, mr: 0.5, minWidth: isSmallScreen ? "73px" : "100px", textTransform: "none" }}
+      sx={{
+        ml: 0.5,
+        mr: 0.5
+        // fontSize: {
+        //   xs: "0.75rem",
+        //   sm: "0.85rem",
+        //   md: "0.95rem"
+        // },
+        // textAlign: "center",
+        // textTransform: "none"
+      }}
     >
       <Typography
         noWrap
         sx={{
           width: "100%",
           fontSize: {
-            xs: "0.75rem",
-            sm: "0.875rem",
-            md: "1rem"
+            xs: "0.65rem",
+            sm: "0.75rem",
+            md: "0.95rem"
           },
           textAlign: "center",
-          textTransform: "none" // ✅ Đảm bảo chữ gốc giữ nguyên
+          textTransform: "none"
         }}
       >
         Excel
       </Typography>
     </Button>
   ) : (
+    // <Tooltip title="Excel">
+    //   <IconButton
+    //     variant="outlined"
+    //     color="primary"
+    //     size={size}
+    //     onClick={() => {
+    //       handleExportExcel(tableName, data);
+    //     }}
+    //   >
+    //     <Download fontSize="inherit" />
+    //   </IconButton>
+    // </Tooltip>
     <Button
       size={size}
       variant="outlined"
@@ -53,7 +75,17 @@ const ExportExcelButton = ({ tableName, data, size = "small" }) => {
       onClick={() => {
         handleExportExcel(tableName, data);
       }}
-      sx={{ ml: 0.5, mr: 0.5, minWidth: isSmallScreen ? "73px" : "100px", textTransform: "none" }}
+      sx={{
+        ml: 0.5,
+        mr: 0.5,
+        fontSize: {
+          xs: "0.75rem",
+          sm: "0.875rem",
+          md: "1rem"
+        },
+        textAlign: "center",
+        textTransform: "none"
+      }}
     >
       <Typography
         noWrap

package/components/DataManagement/index.jsx

@@ -1,6 +1,6 @@
 import { Box, Button, Card, Grid, IconButton, Stack, Tooltip, Typography, useMediaQuery, useTheme } from "@mui/material";
 
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useLayoutEffect, useMemo, useState } from "react";
 
 import { Add, Refresh } from "@mui/icons-material";
 import BarChartIcon from "@mui/icons-material/BarChart";
@@ -20,6 +20,7 @@ import ExportExcelButton from "./ExportExcelButton";
 import { FilterGod } from "./FilterGod";
 import HuongDanButton from "./HuongDanButton";
 import { useRef } from "react";
+import { debounce } from "lodash";
 
 DataManagement.propTypes = {
   columns: PropTypes.array,
@@ -134,6 +135,7 @@ function DataManagement({
 
   const theme = useTheme();
   const upXL = useMediaQuery(theme.breakpoints.up("xl"));
+  const isSmallScreen = useMediaQuery(theme.breakpoints.down("sm"));
   const elementSize = useMemo(() => {
     const elementSize = upXL ? "medium" : "small";
     return elementSize;
@@ -211,239 +213,215 @@ function DataManagement({
     bieuDo,
     disableHead
   ]);
-  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 titleRef = useRef(null);
   const titleText = title || "";
   const [titleWidth, setTitleWidth] = useState(0);
-  const [minWidthValue, setMinWidthValue] = useState(0); // Thêm state cho minWidthValue
+  const [minWidthValue, setMinWidthValue] = useState(0);
 
-  // Đo chiều rộng của titleText khi render lần đầu
-  useEffect(() => {
-    const titleElement = document.createElement("span");
-    titleElement.style.font = "normal 14px 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;
+  const leftBoxRef = useRef(null);
+  const rightBoxRef = useRef(null);
+  const [isFullRow, setIsFullRow] = useState(false);
 
-    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]);
+  const checkLayout = () => {
+    if (titleRef.current && rightBoxRef.current) {
+      const titleTextWidth = titleRef.current.scrollWidth;
 
-  // 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
+      // Tính tổng độ rộng thật của tất cả các phần tử bên trong rightBox
+      const rightChildren = Array.from(rightBoxRef.current.children);
+      const totalRightWidth = rightChildren.reduce((acc, child) => {
+        const childWidth = child.scrollWidth || 0;
+        const style = window.getComputedStyle(child);
+        const marginLeft = parseFloat(style.marginLeft) || 0;
+        const marginRight = parseFloat(style.marginRight) || 0;
+        return acc + childWidth + marginLeft + marginRight;
+      }, 0);
 
-  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
+      const containerWidth = window.innerWidth - 32; // padding 16px trái/phải
+      const spacing = 16; // khoảng cách giữa 2 Box
 
-  // Đ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
-      }
-    };
+      const totalContentWidth = titleTextWidth + totalRightWidth + spacing;
 
-    // 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();
+      setIsFullRow(totalContentWidth > containerWidth);
     }
+  };
+
+  useEffect(() => {
+    const observer = new ResizeObserver(() => {
+      checkLayout();
+    });
 
-    // Lắng nghe sự kiện thay đổi kích thước cửa sổ
-    window.addEventListener("resize", handleResize);
+    if (titleRef.current) observer.observe(titleRef.current);
+    if (rightBoxRef.current) observer.observe(rightBoxRef.current);
+
+    window.addEventListener("resize", checkLayout);
 
-    // Dọn dẹp sự kiện khi component bị hủy
     return () => {
-      window.removeEventListener("resize", handleResize);
+      observer.disconnect();
+      window.removeEventListener("resize", checkLayout);
     };
-  }, [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}>
           {!disableHead && (
-            <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={isSmallScreen ? "body2" : "subtitle1"}>{titleText}</Typography>
-              </Box>
-
-              {/* Khối phải */}
-              <Box
-                ref={rightBoxRef} // Tham chiếu đến phần tử này
+            <Card sx={{ p: 0, mb: 0 }}>
+              <Stack
+                direction={isFullRow ? "column" : "row"}
                 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
+                  // mb: upXL ? 1 : 1,
+                  flexWrap: isFullRow ? "nowrap" : "wrap",
+                  alignItems: isFullRow ? "stretch" : "center",
+                  gap: 1,
+                  ...slotProps?.header?.sx
                 }}
               >
-                {(viewMode === "thongke" || viewMode === "bieudo") && (
-                  <Tooltip title="Danh sách dữ liệu">
-                    <IconButton size={elementSize} color="primary" onClick={() => setViewMode("table")} sx={{ ml: 0.5, mr: 0.5 }}>
-                      <TableChartIcon fontSize="inherit" />
-                    </IconButton>
-                  </Tooltip>
-                )}
-
-                {canThongKe && (
-                  <Tooltip title="Thống kê">
+                {/* Left side */}
+                <Box
+                  ref={leftBoxRef}
+                  sx={{
+                    flexGrow: isFullRow ? 0 : 1,
+                    width: isFullRow ? "100%" : `${minWidthValue}px`,
+                    textAlign: "left",
+                    whiteSpace: "normal",
+                    wordBreak: "break-word"
+                  }}
+                >
+                  <Typography
+                    ref={titleRef}
+                    noWrap
+                    sx={{
+                      width: "100%",
+                      fontSize: {
+                        xs: "0.85rem",
+                        sm: "0.95rem",
+                        md: "1rem"
+                      },
+                      textAlign: "left",
+                      textTransform: "none"
+                    }}
+                  >
+                    {titleText}
+                  </Typography>
+                </Box>
+
+                {/* Right side */}
+                <Box
+                  ref={rightBoxRef}
+                  sx={{
+                    display: "flex",
+                    flexWrap: "wrap",
+                    justifyContent: isFullRow ? "flex-end" : "flex-end",
+                    alignItems: "center",
+                    width: isFullRow ? "100%" : "auto",
+                    flexShrink: 0
+                  }}
+                >
+                  {(viewMode === "thongke" || viewMode === "bieudo") && (
+                    <Tooltip title="Danh sách dữ liệu">
+                      <IconButton
+                        size={elementSize}
+                        color="primary"
+                        onClick={() => setViewMode("table")}
+                        sx={{ ml: 0.5, mr: 0.5 }}
+                      >
+                        <TableChartIcon fontSize="inherit" />
+                      </IconButton>
+                    </Tooltip>
+                  )}
+
+                  {canThongKe && (
+                    <Tooltip title="Thống kê">
+                      <IconButton
+                        size={elementSize}
+                        color={viewMode === "thongke" ? "secondary" : "primary"}
+                        onClick={() => setViewMode("thongke")}
+                        sx={{ ml: 0.5, mr: 0.5 }}
+                      >
+                        <BarChartIcon fontSize="inherit" />
+                      </IconButton>
+                    </Tooltip>
+                  )}
+
+                  {canBieuDo && (
+                    <Tooltip title="Biểu đồ">
+                      <IconButton
+                        size={elementSize}
+                        color={viewMode === "bieudo" ? "secondary" : "primary"}
+                        onClick={() => setViewMode("bieudo")}
+                        sx={{ ml: 0.5, mr: 0.5 }}
+                      >
+                        <PieChartIcon fontSize="inherit" />
+                      </IconButton>
+                    </Tooltip>
+                  )}
+
+                  <HuongDanButton tableName={tableName} size={elementSize} />
+                  <Tooltip title="Làm mới">
                     <IconButton
+                      variant="outlined"
+                      color="primary"
                       size={elementSize}
-                      color={viewMode === "thongke" ? "secondary" : "primary"}
-                      onClick={() => setViewMode("thongke")}
-                      sx={{ ml: 0.5, mr: 0.5 }}
+                      onClick={() => {
+                        setDataSearch({ ...defaults });
+                        [...filters].forEach((filter) => {
+                          filter?.onChange?.();
+                        });
+                        reset();
+                        setValue("Search");
+                      }}
                     >
-                      <BarChartIcon fontSize="inherit" />
+                      <Refresh fontSize="inherit" />
                     </IconButton>
                   </Tooltip>
-                )}
 
-                {canBieuDo && (
-                  <Tooltip title="Biểu đồ">
-                    <IconButton
-                      size={elementSize}
-                      color={viewMode === "bieudo" ? "secondary" : "primary"}
-                      onClick={() => setViewMode("bieudo")}
-                      sx={{ ml: 0.5, mr: 0.5 }}
-                    >
-                      <PieChartIcon fontSize="inherit" />
-                    </IconButton>
-                  </Tooltip>
-                )}
+                  {titleButtons?.map((button, index) => (
+                    <div key={index}>{button}</div>
+                  ))}
 
-                <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: isSmallScreen ? "100px" : "130px",
-                      textTransform: "none" // ✅ Không viết hoa tự động
-                    }}
-                  >
-                    <Typography
-                      noWrap
+                  <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={{
-                        width: "100%",
-                        fontSize: {
-                          xs: "0.75rem",
-                          sm: "0.875rem",
-                          md: "1rem"
-                        },
-                        textAlign: "center",
-                        textTransform: "none" // ✅ Đảm bảo chữ gốc giữ nguyên
+                        ml: 0.5
                       }}
                     >
-                      {titleAddButton}
-                    </Typography>
-                  </Button>
-                )}
-              </Box>
-            </Stack>
+                      <Typography
+                        noWrap
+                        sx={{
+                          width: "100%",
+                          fontSize: {
+                            xs: "0.65rem",
+                            sm: "0.75rem",
+                            md: "0.85rem"
+                          },
+                          textAlign: "center",
+                          textTransform: "none"
+                        }}
+                      >
+                        {titleAddButton}
+                      </Typography>
+                    </Button>
+                  )}
+                </Box>
+              </Stack>
+            </Card>
           )}
-
           <Card className="custom-card-DataManagement">
             {tabPanel}
             {viewMode === "table" && (

package/package.json

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