trithuc-mvc-react 1.6.13 → 1.6.14

package/components/DataManagement/DataTable.jsx

@@ -34,7 +34,7 @@ const DataTable = () => {
     onSuccess: ({ PermissionModel, status }) => {
       if (status) {
         // setPermission(PermissionModel);
-        console.log("LOAD LAI PermissionModel");
+        // console.log("LOAD LAI PermissionModel");
       }
     }
   });

package/components/DataManagement/EditorForm.jsx

@@ -28,7 +28,7 @@ function EditorForm({ fields, submitRef }) {
     if (selectedEditItem) {
       setValue("Id", selectedEditItem.Id);
 
-      fields.forEach(({ field, onChange, type, keyValue, keyValueLabel, defaultValue, }) => {
+      fields.forEach(({ field, onChange, type, keyValue, keyValueLabel, defaultValue }) => {
         if (type == "autocomplete") {
           onChange?.({
             [keyValue]: selectedEditItem[field]
@@ -44,8 +44,7 @@ function EditorForm({ fields, submitRef }) {
             if (typeof fileValue == "string") {
               fileValue = JSON.parse(fileValue);
             }
-          }
-          catch (e) {
+          } catch (e) {
             fileValue = [];
           }
           setValue(field, fileValue);
@@ -64,12 +63,10 @@ function EditorForm({ fields, submitRef }) {
         if (type === "switch" && defaultValue === undefined) {
           methods.setValue(field, true);
         } else {
-
           methods.setValue(field, defaultValue);
         }
       });
     }
-
   }, [selectedEditItem]);
 
   const saveMutation = useMutation(saveDataToTable, {
@@ -116,9 +113,12 @@ function EditorForm({ fields, submitRef }) {
       }
     });
   };
+  const onValid = (data) => {
+    console.log(data);
+  };
   return (
     <FormProvider {...methods}>
-      <Box component={"form"} onSubmit={methods.handleSubmit(onSubmit)}>
+      <Box component={"form"} onSubmit={methods.handleSubmit(onSubmit, onValid)}>
         <Grid container spacing={2}>
           {fields.map(
             ({
@@ -129,7 +129,7 @@ function EditorForm({ fields, submitRef }) {
               childrenFields,
               datas,
               loading = false,
-              onChange = () => { },
+              onChange = () => {},
               keyLabel,
               keyValue,
               keyValueLabel,

package/components/DataManagement/FilterGod.jsx

@@ -1,12 +1,14 @@
-import { Accordion, AccordionSummary, Box, FormControl, InputLabel, MenuItem, Select, Slider, Toolbar, Typography } from "@mui/material";
+import { Accordion, AccordionSummary, Box, Slider, Typography } from "@mui/material";
 import { useFormContext } from "react-hook-form";
 import Grid from "@mui/material/Unstable_Grid2";
-import DateRangePicker from "../date/DateRangePicker";
+
 import { FilterElement } from "./FilterElement";
 import { useDataTable } from "./hooks";
 
-import AccordionDetails from '@mui/material/AccordionDetails';
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import AccordionDetails from "@mui/material/AccordionDetails";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import { DateRangePicker } from "../date";
+import { ArraySchema } from "yup";
 
 export const FilterGod = ({ filters, elementSize = "small" }) => {
   const { handleSubmit } = useFormContext();
@@ -14,15 +16,12 @@ export const FilterGod = ({ filters, elementSize = "small" }) => {
   const { setDataSearch, dataSearch } = useDataTable();
 
   return (
-    <Box
-      component={"form"}
-      onSubmit={handleSubmit(onSubmit)}
-    >
+    <Box component={"form"} onSubmit={handleSubmit(onSubmit)}>
       <Accordion>
         <AccordionSummary
           sx={{
             minHeight: 40,
-            '& .MuiAccordionSummary-content': {
+            "& .MuiAccordionSummary-content": {
               my: 1
             }
           }}
@@ -36,15 +35,21 @@ export const FilterGod = ({ filters, elementSize = "small" }) => {
           <Grid container spacing={1}>
             {filters.map(({ field, size, ...rest }) => {
               if (rest.type === "date-range") {
+                let label = ["từ ngày", "tới 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) => {
-                        setDataSearch(({ previousState }) => ({
-                          ...previousState,
+                        setDataSearch({
+                          ...dataSearch,
                           [field[0]]: value[0],
                           [field[1]]: value[1]
-                        }));
+                        });
                       }}
                       size={elementSize}
                       value={[dataSearch?.[field[0]], dataSearch?.[field[1]]]}
@@ -55,10 +60,7 @@ export const FilterGod = ({ filters, elementSize = "small" }) => {
 
               if (rest.type === "slider-range") {
                 return (
-                  <Grid
-                    key={field.toString()}
-                    md={size?.md} xs={size?.xs} sm={size?.sm}
-                  >
+                  <Grid key={field.toString()} md={size?.md} xs={size?.xs} sm={size?.sm}>
                     <Slider
                       onChange={(e, value) => {
                         setDataSearch({
@@ -78,7 +80,7 @@ export const FilterGod = ({ filters, elementSize = "small" }) => {
                 );
               }
               return (
-                <Grid key={field} md={size?.md} xs={size?.xs} sm={size?.sm} >
+                <Grid key={field} md={size?.md} xs={size?.xs} sm={size?.sm}>
                   <FilterElement name={field} {...rest} size={elementSize} />
                 </Grid>
               );

package/components/date/DateRangePicker.jsx

@@ -5,139 +5,182 @@ import StaticDateRangePicker from "./StaticDateRangePicker";
 import moment from "moment";
 import { memo, useEffect, useRef, useState } from "react";
 import * as dateFns from "date-fns";
+import { useTheme, useMediaQuery } from "@mui/material";
+import { useDateRangeContext } from ".";
+let timeoutStart = null;
+let timeoutEnd = null;
+let timeoutProper = null;
 
-
-const DateRangePicker = ({ onChange = () => {}, value }) => {
+const DateRangePicker = ({ label = ["Từ ngày", "Đến ngày"] }) => {
   const [anchorEl, setAnchorEl] = useState(null);
+  const { dateRange, setDateRange, setIsFocusStart, setIsFocusEnd, isFocusStart, isFocusEnd, setIsFocusPoper, isFocusPoper } =
+    useDateRangeContext();
 
-  const [dateRange, setDateRange] = useState({
-    startDate: value?.[0],
-    endDate: value?.[1]
-  });
-
-  const handleFocus = (event) => {
+  const handleFocus1 = (event) => {
+    if (timeoutStart) {
+      clearTimeout(timeoutStart);
+    }
+    setIsFocusStart(true);
+    setAnchorEl(containerRef.current);
+  };
+  const handleFocus2 = (event) => {
+    if (timeoutEnd) {
+      clearTimeout(timeoutEnd);
+    }
+    setIsFocusEnd(true);
+    setAnchorEl(containerRef.current);
+  };
+  const handleBlur1 = (event) => {
+    if (timeoutStart) {
+      clearTimeout(timeoutStart);
+    }
+    timeoutStart = setTimeout(() => {
+      setIsFocusStart(false);
+    }, 300);
+    // setIsFocusStart(false);
     setAnchorEl(containerRef.current);
   };
+  const handleBlur2 = (event) => {
+    if (timeoutEnd) {
+      clearTimeout(timeoutEnd);
+    }
+    setAnchorEl(containerRef.current);
+    timeoutEnd = setTimeout(() => {
+      setIsFocusEnd(false);
+    }, 300);
+  };
   const handleClose = () => {
     setAnchorEl(null);
   };
-  const handleClickAway = () => {
-    setAnchorEl(null);
+  const handleClickAway = (e) => {
+    timeoutProper = setTimeout(() => {
+      setIsFocusPoper(false);
+    }, 500);
+  };
+  const handleClickPopper = (e) => {
+    if (timeoutProper) {
+      clearTimeout(timeoutProper);
+    }
+    if (!isFocusPoper) {
+      setIsFocusPoper(true);
+    }
   };
 
-  const open = Boolean(anchorEl);
+  const open = isFocusStart || isFocusEnd || isFocusPoper;
+
+  // console.log("open", open);
   const containerRef = useRef(null);
+  const theme = useTheme();
+  const downXl = useMediaQuery(theme.breakpoints.down("xl"));
+  const elementSize = downXl ? "small" : "medium";
 
   useEffect(() => {
-    if (dateFns.isBefore(dateRange.startDate, dateRange.endDate) || dateFns.isSameDay(dateRange.startDate, dateRange.endDate)) {
-      onChange([dateRange.startDate, dateRange.endDate]);
-    }
-  }, [dateRange]);
+    setAnchorEl(containerRef.current);
+  }, []);
+  // useEffect(() => {
+  //   console.log("CHANGEEEE");
+  // }, [isFocusStart, isFocusEnd]);
+  // useEffect(() => {
+  //   if (dateFns.isBefore(dateRange.startDate, dateRange.endDate) || dateFns.isSameDay(dateRange.startDate, dateRange.endDate)) {
+  //     onChange([dateRange.startDate, dateRange.endDate]);
+  //   }
+  // }, [dateRange]);
 
-  useEffect(() => {
-    if (!value) return;
-    if (dateFns.isSameDay(dateRange.startDate, value[0]) && dateFns.isSameDay(dateRange.endDate, value[1])) {
-      return;
-    }
-    setDateRange({
-      startDate: value?.[0],
-      endDate: value?.[1]
-    });
-  }, [value]);
+  // useEffect(() => {
+  //   if (!value) return;
+  //   if (dateFns.isSameDay(dateRange.startDate, value[0]) && dateFns.isSameDay(dateRange.endDate, value[1])) {
+  //     return;
+  //   }
+  //   setDateRange({
+  //     startDate: value?.[0],
+  //     endDate: value?.[1]
+  //   });
+  // }, [value]);
 
   return (
     <>
+      <Stack ref={containerRef} direction={"row"} alignContent={"center"} spacing={1}>
+        <DateField
+          sx={{ flex: 1 }}
+          format={DEFAULT_DATE_FORMAT}
+          onFocus={handleFocus1}
+          onBlur={handleBlur1}
+          label={label[0]}
+          onChange={(value) => {
+            setDateRange((d) => ({
+              ...d,
+              startDate: value ? value.toDate() : null
+            }));
+          }}
+          value={dateRange.startDate && moment(dateRange.startDate)}
+          size={elementSize}
+          maxDate={dateRange.endDate ?? moment(dateRange.endDate)}
+        />
+        <Typography variant="body1" sx={{ height: "24px", alignSelf: "center" }}>
+          –
+        </Typography>
+        <DateField
+          sx={{ flex: 1 }}
+          format={DEFAULT_DATE_FORMAT}
+          label={label[1]}
+          onFocus={handleFocus2}
+          onBlur={handleBlur2}
+          onChange={(value) => {
+            setDateRange((d) => ({
+              ...d,
+              endDate: value ? value.toDate() : null
+            }));
+          }}
+          value={dateRange.endDate && moment(dateRange.endDate)}
+          size={elementSize}
+          minDate={dateRange.startDate ?? moment(dateRange.startDate)}
+        />
+      </Stack>
       <ClickAwayListener onClickAway={handleClickAway}>
-        <Stack ref={containerRef} direction={"row"} alignContent={"center"} spacing={1}>
-          <DateField
-            sx={{ flex: 1 }}
-            format={DEFAULT_DATE_FORMAT}
-            onFocus={handleFocus}
-            label="Từ ngày"
-            onChange={(value) => {
-              setDateRange((d) => ({
-                ...d,
-                startDate: value.toDate()
-              }));
-            }}
-            value={dateRange.startDate && moment(dateRange.startDate)}
-            size="small"
-            maxDate={dateRange.endDate ?? moment(dateRange.endDate)}
-          />
-          <Typography variant="body1" sx={{ height: "24px", alignSelf: "center" }}>
-            –
-          </Typography>
-          <DateField
-            sx={{ flex: 1 }}
-            format={DEFAULT_DATE_FORMAT}
-            label="Tới ngày"
-            onFocus={handleFocus}
-            onChange={(value) => {
-              setDateRange((d) => ({
-                ...d,
-                endDate: value.toDate()
-              }));
-            
-            }}
-            value={dateRange.endDate && moment(dateRange.endDate)}
-            size="small"
-            minDate={dateRange.startDate ?? moment(dateRange.startDate)}
-          />
+        <Popper
+          sx={{
+            zIndex: 1036
+          }}
+          keepMounted
+          placement="bottom-start"
+          open={open}
+          anchorEl={anchorEl}
+          onClose={handleClose}
+          onClick={handleClickPopper}
 
-          <Popper
-            sx={{
-              zIndex: 1036
+          // modifiers={[
+          //   {
+          //     name: "flip",
+          //     enabled: true,
+          //     options: {
+          //       altBoundary: true,
+          //       rootBoundary: "viewport",
+          //       padding: 8
+          //     }
+          //   },
+          //   {
+          //     name: "preventOverflow",
+          //     enabled: true,
+          //     options: {
+          //       altAxis: true,
+          //       altBoundary: true,
+          //       tether: true,
+          //       rootBoundary: "document",
+          //       padding: 8
+          //     }
+          //   }
+          // ]}
+        >
+          <StaticDateRangePicker
+            value={dateRange}
+            onUpdate={(value) => {
+              setDateRange(value);
             }}
-            keepMounted
-            placement="bottom-start"
-            open={open}
-            anchorEl={anchorEl}
-            onClose={handleClose}
-            disablePortal={false}
-            modifiers={[
-              {
-                name: "flip",
-                enabled: true,
-                options: {
-                  altBoundary: true,
-                  rootBoundary: "viewport",
-                  padding: 8
-                }
-              },
-              {
-                name: "preventOverflow",
-                enabled: true,
-                options: {
-                  altAxis: true,
-                  altBoundary: true,
-                  tether: true,
-                  rootBoundary: "document",
-                  padding: 8
-                }
-              }
-            ]}
-          >
-            <StaticDateRangePicker
-              value={dateRange}
-              onUpdate={(value) => {
-                setDateRange(value);
-              }}
-            />
-          </Popper>
-        </Stack>
+          />
+        </Popper>
       </ClickAwayListener>
     </>
   );
 };
-const DateRangePickerMemo = memo(DateRangePicker, (prevProps, nextProps) => {
-  try {
-    if (dateFns.isSameDay(prevProps.value[0], nextProps.value[0]) && dateFns.isSameDay(prevProps.value[1], nextProps.value[1])) {
-      return true; // props are equal
-    }
-  } catch (error) {
-    console.log(error);
-  }
 
-  return false; // props are not equal -> update the component
-});
-export default DateRangePickerMemo;
+export default DateRangePicker;