trithuc-mvc-react 3.0.5 → 3.0.7

package/components/DataManagement/DataTable.jsx

@@ -15,7 +15,6 @@ import { TableRowRender } from "./TableRowRender";
 import TableToolbar from "./TableToolbar";
 import { useDataTable } from "./hooks";
 const defaultQueryOptions = {
-  keepPreviousData: true, // Giữ dữ liệu cũ trong khi tải dữ liệu mới
   staleTime: 1000 * 60 * 1, // Thời gian dữ liệu có thể sử dụng lại trước khi gọi lại API
   cacheTime: 1000 * 60 * 30, // Thời gian dữ liệu được lưu trong cache trước khi bị xóa
   refetchOnWindowFocus: true, // Tự động lấy lại dữ liệu khi người dùng quay lại tab

package/components/DataManagement/FilterGod.jsx

@@ -13,6 +13,7 @@ import { ClearIcon, DatePicker } from "@mui/x-date-pickers";
 import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
 import "dayjs/locale/vi";
 import { toast } from "react-toastify";
+import { debounce } from "lodash";
 export const FilterGod = ({ tableName, filters, elementSize = "small", setPage = () => {} }) => {
   const { handleSubmit } = useFormContext();
   const onSubmit = (data) => console.log(data);
@@ -59,16 +60,17 @@ export const FilterGod = ({ tableName, filters, elementSize = "small", setPage =
                   setPage(0); // Reset trang khi clear
                 };
 
-                const handleDateChange = (newValue, fieldKey, compareKey, compareType) => {
+                const handleDateChange = debounce((newValue, fieldKey, compareKey, compareType) => {
                   let formattedDate = null;
 
-                  // Kiểm tra nếu newValue là ngày hợp lệ
-                  if (!moment(newValue, "DD/MM/YYYY", true).isValid()) {
-                    return; // Dừng nếu người dùng nhập chưa xong hoặc giá trị không hợp lệ
-                  }
+                  // Chỉ kiểm tra nếu chuỗi có độ dài tối thiểu phù hợp với định dạng "DD/MM/YYYY"
+                  const isValidDate = moment(newValue, "DD/MM/YYYY", true).isValid();
+
+                  const year = moment(newValue, "DD/MM/YYYY").year();
 
-                  if (newValue) {
-                    // Xác định thời gian dựa trên fieldKey
+                  if (isValidDate && year >= 1000) {
+                    // Kiểm tra năm có lớn hơn hoặc bằng 1000
+                    // Định dạng ngày khi hợp lệ
                     if (fieldKey.toLowerCase().includes("from")) {
                       formattedDate = moment(newValue, "DD/MM/YYYY").startOf("day").format("YYYY-MM-DD HH:mm");
                     } else if (fieldKey.toLowerCase().includes("to")) {
@@ -78,6 +80,7 @@ export const FilterGod = ({ tableName, filters, elementSize = "small", setPage =
 
                   const compareDate = dataSearch?.[compareKey] ? moment(dataSearch?.[compareKey]) : null;
 
+                  // Kiểm tra ngày so sánh
                   if (formattedDate && compareDate) {
                     const isInvalid =
                       (compareType === "min" && moment(formattedDate).isBefore(compareDate)) ||
@@ -95,11 +98,17 @@ export const FilterGod = ({ tableName, filters, elementSize = "small", setPage =
                     }
                   }
 
+                  // Lưu ngày hợp lệ
                   setDataSearch((prev) => ({
                     ...prev,
                     [fieldKey]: formattedDate
                   }));
                   setPage(0); // Reset page
+                }, 500); // Debounce 1000ms
+
+                // Gọi handleDateChange
+                const onInputDateChange = (e) => {
+                  handleDateChange(e.target.value, "from", "to", "min");
                 };
 
                 const renderDatePicker = (fieldKey, label, compareKey, compareType) => (
@@ -172,8 +181,8 @@ export const FilterGod = ({ tableName, filters, elementSize = "small", setPage =
                 );
               }
               return (
-                <Grid key={field} md={size?.md} xs={size?.xs} sm={size?.sm}>
-                  <FilterElement name={field} {...rest} setPage={setPage} />
+                <Grid key={field.toString()} md={size?.md} xs={size?.xs} sm={size?.sm}>
+                  <FilterElement name={field.toString()} {...rest} setPage={setPage} />
                 </Grid>
               );
             })}

package/components/DataManagement/index.jsx

@@ -27,7 +27,7 @@ DataManagement.propTypes = {
   filters: PropTypes.arrayOf(
     PropTypes.shape({
       field: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]).isRequired,
-      label: PropTypes.string,
+      label: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]), // Hỗ trợ cả chuỗi và mảng chuỗi
       placeHolder: PropTypes.string,
       type: PropTypes.oneOf([
         "text",
@@ -46,6 +46,7 @@ DataManagement.propTypes = {
       onChangeAfter: PropTypes.func
     })
   ).isRequired,
+
   editorFields: PropTypes.array,
   validationSchema: PropTypes.object,
   disableStatus: PropTypes.bool,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "trithuc-mvc-react",
-  "version": "3.0.5",
+  "version": "3.0.7",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
@@ -13,12 +13,12 @@
   },
   "description": "",
   "dependencies": {
-    "@emotion/react": "^11.13.3",
-    "@emotion/styled": "^11.13.0",
+    "@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": "^2.17.0",
+    "date-fns": "^3.6.0",
     "lodash": "^4.17.21",
     "moment": "^2.30.1",
     "prop-types": "^15.8.1",
@@ -27,7 +27,7 @@
   "devDependencies": {
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
-    "eslint": "^9.14.0",
+    "eslint": "^9.15.0",
     "eslint-plugin-react": "^7.37.2",
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-react-refresh": "^0.4.14",
@@ -35,15 +35,16 @@
     "react-dom": "^18.3.1"
   },
   "peerDependencies": {
-    "@mui/icons-material": "^5.15.12",
     "@mui/lab": "^5.0.0-alpha.142",
     "@mui/material": "^5.15.12",
-    "@mui/x-date-pickers": "^6.10.2",
+    "@mui/system": "^5.15.12",
+    "@mui/icons-material": "^5.15.12",
     "@mui/x-tree-view": "^7.22.1",
-    "material-ui-confirm": "^3.0.9",
+    "@mui/x-date-pickers": "^6.19.6",
+    "material-ui-confirm": "^3.0.16",
     "react": ">=16",
     "react-dom": ">=16",
-    "react-hook-form": "^7.45.2",
+    "react-hook-form": "^7.53.2",
     "react-query": "^3.39.3",
     "react-toastify": "^10.0.6",
     "dayjs": "^1.11.13"