trithuc-mvc-react 2.4.8 → 2.5.1

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 = [],page, setPage = () => { }  }) => {
+const DataTable = ({ multipleActions = [],page, setPage = () => { }, disableEdit, disableDelete  }) => {
   const {
     tableName,
     selectedField,
@@ -209,6 +209,8 @@ const DataTable = ({ multipleActions = [],page, setPage = () => { }  }) => {
                   selected={isSelected(row[selectedField])}
                   onSelect={handleSelect}
                   onEdit={handlEdit}
+                  disableEdit={disableEdit}
+                  disableDelete={disableDelete}
                   onView={handlViewDetail}
                   onChangeStatus={handleChangeStatus}
                   onDelete={handleDelete}

package/components/DataManagement/FilterElement.jsx

@@ -1,10 +1,19 @@
-import { Autocomplete, FormControl, InputAdornment, InputLabel, MenuItem, OutlinedInput, Select, TextField } from "@mui/material";
-import { useCallback, useMemo } from "react";
+import {
+  Autocomplete,
+  FormControl,
+  IconButton,
+  InputAdornment,
+  InputLabel,
+  MenuItem,
+  Select,
+  TextField
+} from "@mui/material";
+import { useCallback } from "react";
 import { SearchOutlined } from "@mui/icons-material";
 import { useController, useFormContext } from "react-hook-form";
 import { debounce } from "lodash";
 import { useDataTable } from "./hooks";
-
+import ClearIcon from "@mui/icons-material/Clear";
 export function FilterElement({
   name,
   type,
@@ -14,10 +23,10 @@ export function FilterElement({
   childrenFields,
   datas,
   loading = false,
-  onChange = () => { },
+  onChange = () => {},
   size = "small",
-  handleChange = () => { },
-  setPage = () => { },
+  handleChange = () => {},
+  setPage = () => {}
 }) {
   const { control, setValue } = useFormContext();
 
@@ -33,7 +42,11 @@ export function FilterElement({
     }, 500),
     [dataSearch]
   );
-
+  const handleClearIconClick = () => {
+    onFieldChange(""); // Clear the field value
+    handleFilterChangeDebounce(name, ""); // Clear the filter value
+    setPage(0);
+  };
   switch (type) {
     case "search":
       return (
@@ -53,6 +66,15 @@ export function FilterElement({
               <InputAdornment position="start">
                 <SearchOutlined />
               </InputAdornment>
+            ),
+            endAdornment: (
+              <InputAdornment position="end">
+                {value && (
+                  <IconButton onClick={handleClearIconClick}>
+                    <ClearIcon />
+                  </IconButton>
+                )}
+              </InputAdornment>
             )
           }}
         />
@@ -71,7 +93,7 @@ export function FilterElement({
           noOptionsText="Không có dữ liệu"
           fullWidth
           options={datas ?? []}
-          onChange={(event, newValue, reason) => {
+          onChange={(event, newValue) => {
             let updateObject = { [name]: newValue?.[keyValue] };
             onFieldChange(newValue?.[keyValue]);
             onChange(newValue);

package/components/DataManagement/FilterGod.jsx

@@ -35,7 +35,7 @@ export const FilterGod = ({ filters, elementSize = "small",setPage=()=>{} }) =>
           <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;

package/components/DataManagement/TableRowRender.jsx

@@ -21,12 +21,14 @@ export const TableRowRender = ({
   onChangeStatus,
   onDelete,
   onEdit,
-  onView
+  onView,
+  disableEdit,
+  disableDelete
 }) => {
   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 +98,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" />
@@ -110,7 +112,7 @@ export const TableRowRender = ({
               </IconButton>
             </Tooltip>
           )}
-          {canDelete && (
+          {!disableDelete && (
             <Tooltip title="Xóa">
               <IconButton
                 size={downXl ? "small" : "medium"}

package/components/DataManagement/index.jsx

@@ -210,7 +210,7 @@ function DataManagement({
             {tabPanel}
             <FilterGod filters={filters} elementSize={elementSize} setPage={setPage} />
             {backParentNavigator}
-            <DataTable multipleActions={multipleActions} page={page} setPage={setPage}/>
+            <DataTable multipleActions={multipleActions} page={page} setPage={setPage} disableEdit={disableEditor} disableDelete = {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.8",
+  "version": "2.5.1",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"