trithuc-mvc-react 3.0.3 → 3.0.4

package/components/DataManagement/FilterGod.jsx

@@ -1,4 +1,4 @@
-import { Accordion, AccordionSummary, Box, Slider, Typography } from "@mui/material";
+import { Accordion, AccordionSummary, Box, IconButton, Slider, Typography } from "@mui/material";
 import Grid from "@mui/material/Unstable_Grid2";
 import { useFormContext } from "react-hook-form";
 import { FilterElement } from "./FilterElement";
@@ -9,7 +9,10 @@ import AccordionDetails from "@mui/material/AccordionDetails";
 import moment from "moment";
 import { useEffect, useState } from "react";
 import { DateRangePicker } from "../date";
-
+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";
 export const FilterGod = ({ tableName, filters, elementSize = "small", setPage = () => {} }) => {
   const { handleSubmit } = useFormContext();
   const onSubmit = (data) => console.log(data);
@@ -46,33 +49,86 @@ export const FilterGod = ({ tableName, filters, elementSize = "small", setPage =
           <Grid container spacing={1}>
             {filters.map(({ field, size, ...rest }) => {
               if (rest.type === "date-range") {
-                let label = ["Từ ngày", "Đến ngày"];
+                const [label1, label2] = Array.isArray(field.label) ? field.label : ["Từ ngày", "Đến ngày"];
 
-                if (Array.isArray(field.label)) {
-                  label = field.label;
-                }
-                return (
-                  <Grid key={field.toString()} md={size?.md} xs={size?.xs} sm={size?.sm}>
-                    <DateRangePicker
-                      label={label}
-                      onChange={(value) => {
-                        const [fromDate, toDate] = value || []; // Destructure value để đảm bảo xử lý null/undefined
-                        const formattedFromDate = fromDate ? moment(fromDate).format("YYYY-MM-DD HH:mm:ss.SSS") : null;
-                        const formattedToDate = toDate ? moment(toDate).format("YYYY-MM-DD HH:mm:ss.SSS") : null;
+                const handleClear = (key) => {
+                  setDataSearch((prev) => ({
+                    ...prev,
+                    [key]: null // Xóa giá trị của trường được chọn
+                  }));
+                  setPage(0); // Reset trang khi clear
+                };
+
+                const handleDateChange = (newValue, fieldKey, compareKey, compareType) => {
+                  const formattedDate = newValue ? moment(newValue).format("YYYY-MM-DD") : null;
+                  const compareDate = dataSearch?.[compareKey] ? moment(dataSearch?.[compareKey]) : null;
+
+                  if (formattedDate && compareDate) {
+                    const isInvalid =
+                      (compareType === "min" && moment(formattedDate).isBefore(compareDate)) ||
+                      (compareType === "max" && moment(formattedDate).isAfter(compareDate));
 
-                        // Kiểm tra nếu field hợp lệ trước khi cập nhật
-                        if (field?.[0] && field?.[1]) {
-                          setDataSearch({
-                            ...dataSearch,
-                            [field[0]]: formattedFromDate,
-                            [field[1]]: formattedToDate
-                          });
-                          setPage(0);
-                        }
+                    if (isInvalid) {
+                      toast.error(
+                        compareType === "min" ? "Ngày đến không được nhỏ hơn ngày từ." : "Ngày từ không được lớn hơn ngày đến."
+                      );
+                      setDataSearch((prev) => ({
+                        ...prev,
+                        [fieldKey]: null
+                      }));
+                      return;
+                    }
+                  }
+
+                  setDataSearch((prev) => ({
+                    ...prev,
+                    [fieldKey]: formattedDate
+                  }));
+                  setPage(0); // Reset page
+                };
+
+                const renderDatePicker = (fieldKey, label, compareKey, compareType) => (
+                  <LocalizationProvider adapterLocale="vi" localeText={{ clearButtonLabel: "Xóa" }}>
+                    <DatePicker
+                      label={label}
+                      format="DD/MM/YYYY"
+                      views={["year", "month", "day"]}
+                      mask="__/__/____"
+                      minDate={
+                        compareType === "min" ? (dataSearch?.[compareKey] ? moment(dataSearch?.[compareKey]) : null) : null
+                      }
+                      maxDate={
+                        compareType === "max" ? (dataSearch?.[compareKey] ? moment(dataSearch?.[compareKey]) : null) : null
+                      }
+                      InputLabelProps={{ shrink: true }}
+                      slotProps={{
+                        textField: {
+                          fullWidth: true,
+                          InputProps: {
+                            startAdornment: (
+                              <IconButton onClick={() => handleClear(fieldKey)} aria-label="clear">
+                                <ClearIcon />
+                              </IconButton>
+                            )
+                          }
+                        },
+                        actionBar: { actions: ["clear"] }
                       }}
+                      value={dataSearch?.[fieldKey] ? moment(dataSearch?.[fieldKey]) : null}
+                      onChange={(newValue) => handleDateChange(newValue, fieldKey, compareKey, compareType)}
                       size={elementSize}
-                      value={[dataSearch?.[field?.[0]] || null, dataSearch?.[field?.[1]] || null]}
                     />
+                  </LocalizationProvider>
+                );
+
+                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>
                 );
               }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "trithuc-mvc-react",
-  "version": "3.0.3",
+  "version": "3.0.4",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
@@ -45,6 +45,7 @@
     "react-dom": ">=16",
     "react-hook-form": "^7.45.2",
     "react-query": "^3.39.3",
-    "react-toastify": "^10.0.6"
+    "react-toastify": "^10.0.6",
+    "dayjs": "^1.11.13"
   }
 }