trithuc-mvc-react 1.6.13 → 1.7.0

package/components/DataManagement/index.jsx

@@ -2,7 +2,7 @@ import { Button, Card, IconButton, Stack, Tooltip, Typography, useTheme, useMedi
 
 import { useEffect, useMemo, useState } from "react";
 
-import { DataTableContext, PermissionContext } from "./context";
+import { DataTableContext } from "./context";
 import PropTypes from "prop-types";
 import DataTable from "./DataTable";
 import { Add, Refresh } from "@mui/icons-material";
@@ -13,7 +13,7 @@ import ViewDetailDialog from "./ViewDetailDialog";
 
 import ExportExcelButton from "./ExportExcelButton";
 import { FilterGod } from "./FilterGod";
-
+import { usePermission } from "../../hooks";
 
 DataManagement.propTypes = {
   columns: PropTypes.array,
@@ -57,8 +57,8 @@ function DataManagement({
   disableCellThaoTac = false,
   tableActions = [],
   disableEditor = false,
-  onAddClick = () => { },
-  onEditClick = () => { },
+  onAddClick = () => {},
+  onEditClick = () => {},
   tabPanel,
   backParentNavigator,
   slotProps = {
@@ -71,8 +71,7 @@ function DataManagement({
   const [selectedEditItem, setSelectedEditItem] = useState(null);
   const [openViewDialog, setOpenViewDialog] = useState(false);
 
-  const [Permission, setPermission] = useState(null);
-
+  const { canCreate } = usePermission(tableName);
   const { defaults, filters } = useMemo(() => {
     const filters = tableFilters.filter(({ type }) => type !== "default");
     const defaultFilters = tableFilters.filter(({ type }) => type === "default");
@@ -91,7 +90,6 @@ function DataManagement({
     return elementSize;
   }, [upXL]);
 
-
   useEffect(() => {
     setDataSearch({ ...dataSearch, ...defaults });
   }, [filters]);
@@ -116,80 +114,83 @@ function DataManagement({
       tableActions,
       onEditClick
     };
-  }, [tableName, selectedField, columns, selectedEditItem, dataSearch, setDataSearch, validationSchema, tableActions, openViewDialog, setOpenViewDialog, onEditClick]);
-  const permissionValues = useMemo(() => {
-    return {
-      Permission,
-      setPermission
-    };
-  }, [Permission, setPermission]);
+  }, [
+    tableName,
+    selectedField,
+    columns,
+    selectedEditItem,
+    dataSearch,
+    setDataSearch,
+    validationSchema,
+    tableActions,
+    openViewDialog,
+    setOpenViewDialog,
+    onEditClick
+  ]);
+
   const methods = useForm({ defaultValues: {} });
   const { reset, setValue } = methods;
   return (
     <>
       <DataTableContext.Provider value={values}>
-        <PermissionContext.Provider value={permissionValues}>
-          <FormProvider {...methods}>
-            <Stack direction="row" justifyContent={"space-between"} sx={{ mb: upXL ? 2 : 1, ...slotProps?.header?.sx }}>
-              <Typography variant="h4">{title}</Typography>
-              <Stack direction="row" spacing={1}>
-                <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>
-
-                <ExportExcelButton tableName={tableName} data={dataSearch} size={elementSize} />
-                {(!Permission || Permission.Create) && (
-                  (!disableAdd) && (
-                    <Button
-                      size={elementSize}
-                      variant="contained"
-                      startIcon={<Add fontSize="inherit" />}
-                      onClick={(e) => {
-                        if (!disableEditor) {
-                          setOpenEditorDialog(true);
-                          setSelectedEditItem(null);
-                        }
-                        onAddClick(e);
-                      }}
-                    >
-                      Thêm
-                    </Button>
-                  )
-                )}
-              </Stack>
+        <FormProvider {...methods}>
+          <Stack direction="row" justifyContent={"space-between"} sx={{ mb: upXL ? 2 : 1, ...slotProps?.header?.sx }}>
+            <Typography variant="h4">{title}</Typography>
+            <Stack direction="row" spacing={1}>
+              <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>
+
+              <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);
+                  }}
+                >
+                  Thêm
+                </Button>
+              )}
             </Stack>
-
-            <Card>
-              {tabPanel}
-              <FilterGod filters={filters} elementSize={elementSize} />
-              {backParentNavigator}
-              <DataTable />
-            </Card>
-          </FormProvider>
-          {disableEditor || (
-            <EditorDialog
-              open={openEditorDialog}
-              onClose={() => setOpenEditorDialog(false)}
-              defaultValues={selectedEditItem}
-              fields={editorFields}
-            />
-          )}
-          <ViewDetailDialog open={openViewDialog} onClose={() => setOpenViewDialog(false)} fields={editorFields} />
-        </PermissionContext.Provider>
+          </Stack>
+
+          <Card>
+            {tabPanel}
+            <FilterGod filters={filters} elementSize={elementSize} />
+            {backParentNavigator}
+            <DataTable />
+          </Card>
+        </FormProvider>
+        {disableEditor || (
+          <EditorDialog
+            open={openEditorDialog}
+            onClose={() => setOpenEditorDialog(false)}
+            defaultValues={selectedEditItem}
+            fields={editorFields}
+          />
+        )}
+        <ViewDetailDialog open={openViewDialog} onClose={() => setOpenViewDialog(false)} fields={editorFields} />
       </DataTableContext.Provider>
     </>
   );

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;