trithuc-mvc-react 2.4.7 → 2.5.0

package/components/DataManagement/DataTable.jsx

@@ -13,7 +13,7 @@ import { TableRowRender } from "./TableRowRender";
 import TableToolbar from "./TableToolbar";
 import { useDataTable } from "./hooks";
 import { usePermission } from "../../hooks";
-const DataTable = ({ multipleActions = [] }) => {
+const DataTable = ({ multipleActions = [],page, setPage = () => { }, disableEdit  }) => {
   const {
     tableName,
     selectedField,
@@ -31,7 +31,7 @@ const DataTable = ({ multipleActions = [] }) => {
   const queryClient = useQueryClient();
   const confirm = useConfirm();
   const [selectedItems, setSelectedItems] = useState([]);
-  const [page, setPage] = useState(0);
+  // const [page, setPage] = useState(0);
   const [rowsPerPage, setRowsPerPage] = useState(defaultRowsPerPage);
 
   const { data, isLoading } = useQuery({
@@ -209,6 +209,7 @@ const DataTable = ({ multipleActions = [] }) => {
                   selected={isSelected(row[selectedField])}
                   onSelect={handleSelect}
                   onEdit={handlEdit}
+                  disableEdit={disableEdit}
                   onView={handlViewDetail}
                   onChangeStatus={handleChangeStatus}
                   onDelete={handleDelete}

package/components/DataManagement/FilterElement.jsx

@@ -14,9 +14,10 @@ export function FilterElement({
   childrenFields,
   datas,
   loading = false,
-  onChange = () => {},
+  onChange = () => { },
   size = "small",
-  handleChange = () => {},
+  handleChange = () => { },
+  setPage = () => { },
 }) {
   const { control, setValue } = useFormContext();
 
@@ -43,6 +44,7 @@ export function FilterElement({
           onChange={(e) => {
             onFieldChange(e);
             handleFilterChangeDebounce(name, e.target.value);
+            setPage(0);
           }}
           placeholder={label}
           variant="outlined"
@@ -72,9 +74,8 @@ export function FilterElement({
           onChange={(event, newValue, reason) => {
             let updateObject = { [name]: newValue?.[keyValue] };
             onFieldChange(newValue?.[keyValue]);
-
             onChange(newValue);
-
+            setPage(0);
             childrenFields?.forEach((childrenField) => {
               setValue(childrenField, null, { shouldTouch: true });
               updateObject[childrenField] = null;
@@ -103,6 +104,7 @@ export function FilterElement({
             onChange={(e) => {
               handleChange(e);
               onFieldChange(e);
+              setPage(0);
               setDataSearch({ ...dataSearch, [name]: e.target.value });
             }}
           >

package/components/DataManagement/FilterGod.jsx

@@ -10,7 +10,7 @@ import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 import { DateRangePicker } from "../date";
 import { ArraySchema } from "yup";
 
-export const FilterGod = ({ filters, elementSize = "small" }) => {
+export const FilterGod = ({ filters, elementSize = "small",setPage=()=>{} }) => {
   const { handleSubmit } = useFormContext();
   const onSubmit = (data) => console.log(data);
   const { setDataSearch, dataSearch } = useDataTable();
@@ -35,7 +35,7 @@ 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"];
+                let label = ["Từ ngày", "Đến ngày"];
 
                 if (Array.isArray(field.label)) {
                   label = field.label;
@@ -50,7 +50,8 @@ export const FilterGod = ({ filters, elementSize = "small" }) => {
                           [field[0]]: value[0],
                           [field[1]]: value[1]
                         });
-                      }}
+                        setPage(0)
+                      }}  
                       size={elementSize}
                       value={[dataSearch?.[field[0]], dataSearch?.[field[1]]]}
                     />
@@ -68,6 +69,7 @@ export const FilterGod = ({ filters, elementSize = "small" }) => {
                           [field[0]]: value[0],
                           [field[1]]: value[1]
                         });
+                        setPage(0)
                       }}
                       size={elementSize}
                       marks={rest.marks}
@@ -81,7 +83,7 @@ export const FilterGod = ({ filters, elementSize = "small" }) => {
               }
               return (
                 <Grid key={field} md={size?.md} xs={size?.xs} sm={size?.sm}>
-                  <FilterElement name={field} {...rest} />
+                  <FilterElement name={field} {...rest} setPage={setPage}/>
                 </Grid>
               );
             })}

package/components/DataManagement/TableRowRender.jsx

@@ -21,12 +21,13 @@ export const TableRowRender = ({
   onChangeStatus,
   onDelete,
   onEdit,
-  onView
+  onView,
+  disableEdit,
 }) => {
   const { selectedField, columns, statusKey, disableStatus, tableActions, disableCellThaoTac, tableName, sttLuyKe } =
     useDataTable();
   const { canEdit, canDelete, canView, canAction } = usePermission(tableName);
-
+    
   const { tableActionsOnTable, tableActionsOnMoreMenu } = useMemo(() => {
     const tableActionsAfterFilter = [...tableActions]
       .filter((x) => x)
@@ -96,7 +97,7 @@ export const TableRowRender = ({
 
       {!disableCellThaoTac && (
         <TableCell align="center">
-          {canEdit && (
+          {!disableEdit && (
             <Tooltip title="Chỉnh sửa">
               <IconButton size={downXl ? "small" : "medium"} onClick={() => onEdit(row)}>
                 <EditOutlined fontSize="inherit" color="primary" />

package/components/DataManagement/index.jsx

@@ -108,6 +108,8 @@ function DataManagement({
   }, [filters]);
 
   const [dataSearch, setDataSearch] = useState({ ...defaults, ...getDefaultValues(filters) });
+  const [page, setPage] = useState(0);
+
   const values = useMemo(() => {
     const hasTabpanel = !!tabPanel;
     return {
@@ -206,9 +208,9 @@ function DataManagement({
 
           <Card>
             {tabPanel}
-            <FilterGod filters={filters} elementSize={elementSize} />
+            <FilterGod filters={filters} elementSize={elementSize} setPage={setPage} />
             {backParentNavigator}
-            <DataTable multipleActions={multipleActions} />
+            <DataTable multipleActions={multipleActions} page={page} setPage={setPage} disableEdit={disableEditor}/>
           </Card>
         </FormProvider>
 

package/components/date/DateRangePicker.jsx

@@ -1,6 +1,8 @@
 import { DateField } from "@mui/x-date-pickers";
 import { DEFAULT_DATE_FORMAT } from "../../constants";
-import { ClickAwayListener, Popover, Popper, Stack, Typography } from "@mui/material";
+import { ClickAwayListener, Popover, Popper, Stack, Typography, IconButton } from "@mui/material";
+import ClearIcon from "@mui/icons-material/Clear";
+import InputAdornment from "@mui/material/InputAdornment";
 import StaticDateRangePicker from "./StaticDateRangePicker";
 import moment from "moment";
 import { memo, useEffect, useRef, useState } from "react";
@@ -77,25 +79,6 @@ const DateRangePicker = ({ label = ["Từ ngày", "Đến ngày"] }) => {
   useEffect(() => {
     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]);
 
   return (
     <>
@@ -114,6 +97,23 @@ const DateRangePicker = ({ label = ["Từ ngày", "Đến ngày"] }) => {
           }}
           value={dateRange.startDate && moment(dateRange.startDate)}
           maxDate={dateRange.endDate ?? moment(dateRange.endDate)}
+          InputProps={{
+            endAdornment: (
+              <InputAdornment position="end">
+                <IconButton
+                  onClick={() => {
+                    setDateRange((d) => ({
+                      ...d,
+                      startDate: null
+                    }));
+                  }}
+                  edge="end"
+                >
+                  <ClearIcon />
+                </IconButton>
+              </InputAdornment>
+            )
+          }}
         />
         <Typography variant="body1" sx={{ height: "24px", alignSelf: "center" }}>
           –
@@ -132,6 +132,23 @@ const DateRangePicker = ({ label = ["Từ ngày", "Đến ngày"] }) => {
           }}
           value={dateRange.endDate && moment(dateRange.endDate)}
           minDate={dateRange.startDate ?? moment(dateRange.startDate)}
+          InputProps={{
+            endAdornment: (
+              <InputAdornment position="end">
+                <IconButton
+                  onClick={() => {
+                    setDateRange((d) => ({
+                      ...d,
+                      endDate: null
+                    }));
+                  }}
+                  edge="end"
+                >
+                  <ClearIcon />
+                </IconButton>
+              </InputAdornment>
+            )
+          }}
         />
       </Stack>
       <ClickAwayListener onClickAway={handleClickAway}>
@@ -145,29 +162,6 @@ const DateRangePicker = ({ label = ["Từ ngày", "Đến ngày"] }) => {
           anchorEl={anchorEl}
           onClose={handleClose}
           onClick={handleClickPopper}
-
-          // 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}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "trithuc-mvc-react",
-  "version": "2.4.7",
+  "version": "2.5.0",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"