trithuc-mvc-react 3.1.1 → 3.1.2

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/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/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/package.json

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