trithuc-mvc-react 3.0.4 → 3.0.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -13,6 +13,7 @@ import { ClearIcon, DatePicker } from "@mui/x-date-pickers";
|
|
|
13
13
|
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
|
|
14
14
|
import "dayjs/locale/vi";
|
|
15
15
|
import { toast } from "react-toastify";
|
|
16
|
+
import { debounce } from "lodash";
|
|
16
17
|
export const FilterGod = ({ tableName, filters, elementSize = "small", setPage = () => {} }) => {
|
|
17
18
|
const { handleSubmit } = useFormContext();
|
|
18
19
|
const onSubmit = (data) => console.log(data);
|
|
@@ -59,10 +60,27 @@ export const FilterGod = ({ tableName, filters, elementSize = "small", setPage =
|
|
|
59
60
|
setPage(0); // Reset trang khi clear
|
|
60
61
|
};
|
|
61
62
|
|
|
62
|
-
const handleDateChange = (newValue, fieldKey, compareKey, compareType) => {
|
|
63
|
-
|
|
63
|
+
const handleDateChange = debounce((newValue, fieldKey, compareKey, compareType) => {
|
|
64
|
+
let formattedDate = null;
|
|
65
|
+
|
|
66
|
+
// 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"
|
|
67
|
+
const isValidDate = moment(newValue, "DD/MM/YYYY", true).isValid();
|
|
68
|
+
|
|
69
|
+
const year = moment(newValue, "DD/MM/YYYY").year();
|
|
70
|
+
|
|
71
|
+
if (isValidDate && year >= 1000) {
|
|
72
|
+
// Kiểm tra năm có lớn hơn hoặc bằng 1000
|
|
73
|
+
// Định dạng ngày khi hợp lệ
|
|
74
|
+
if (fieldKey.toLowerCase().includes("from")) {
|
|
75
|
+
formattedDate = moment(newValue, "DD/MM/YYYY").startOf("day").format("YYYY-MM-DD HH:mm");
|
|
76
|
+
} else if (fieldKey.toLowerCase().includes("to")) {
|
|
77
|
+
formattedDate = moment(newValue, "DD/MM/YYYY").endOf("day").format("YYYY-MM-DD HH:mm");
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
|
|
64
81
|
const compareDate = dataSearch?.[compareKey] ? moment(dataSearch?.[compareKey]) : null;
|
|
65
82
|
|
|
83
|
+
// Kiểm tra ngày so sánh
|
|
66
84
|
if (formattedDate && compareDate) {
|
|
67
85
|
const isInvalid =
|
|
68
86
|
(compareType === "min" && moment(formattedDate).isBefore(compareDate)) ||
|
|
@@ -80,11 +98,17 @@ export const FilterGod = ({ tableName, filters, elementSize = "small", setPage =
|
|
|
80
98
|
}
|
|
81
99
|
}
|
|
82
100
|
|
|
101
|
+
// Lưu ngày hợp lệ
|
|
83
102
|
setDataSearch((prev) => ({
|
|
84
103
|
...prev,
|
|
85
104
|
[fieldKey]: formattedDate
|
|
86
105
|
}));
|
|
87
106
|
setPage(0); // Reset page
|
|
107
|
+
}, 500); // Debounce 1000ms
|
|
108
|
+
|
|
109
|
+
// Gọi handleDateChange
|
|
110
|
+
const onInputDateChange = (e) => {
|
|
111
|
+
handleDateChange(e.target.value, "from", "to", "min");
|
|
88
112
|
};
|
|
89
113
|
|
|
90
114
|
const renderDatePicker = (fieldKey, label, compareKey, compareType) => (
|
|
@@ -92,6 +116,7 @@ export const FilterGod = ({ tableName, filters, elementSize = "small", setPage =
|
|
|
92
116
|
<DatePicker
|
|
93
117
|
label={label}
|
|
94
118
|
format="DD/MM/YYYY"
|
|
119
|
+
desktopModeMediaQuery="@media (min-width: 0px)"
|
|
95
120
|
views={["year", "month", "day"]}
|
|
96
121
|
mask="__/__/____"
|
|
97
122
|
minDate={
|