rez-table-listing-mui 1.3.38 → 1.3.40

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rez-table-listing-mui",
-  "version": "1.3.38",
+  "version": "1.3.40",
   "type": "module",
   "description": "A rez table listing component built on TanStack Table",
   "main": "dist/index.js",

package/src/listing/components/filter/components/forms/components/Date.tsx

@@ -4,7 +4,7 @@ import { DatePicker } from "@mui/x-date-pickers/DatePicker";
 import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns";
 import moment from "moment";
 import { FilterStateProps } from "../../../../../types/filter";
-import { SxProps, Theme, Box } from "@mui/material";
+import { SxProps, Theme, Box, TextField } from "@mui/material";
 
 type FormDatePickerProps = {
   filter: FilterStateProps;
@@ -23,6 +23,13 @@ const FormDatePicker = ({
 }: FormDatePickerProps) => {
   const isRange = filter.filter_operator === "between";
   const isRelativeToToday = filter.filter_operator === "today";
+  const isEmptyOperator =
+    filter.filter_operator === "empty" ||
+    filter.filter_operator === "not_empty";
+
+  if (isEmptyOperator) {
+    return <TextField fullWidth disabled value="" size="small" />;
+  }
 
   return (
     <LocalizationProvider dateAdapter={AdapterDateFns}>
@@ -30,11 +37,22 @@ const FormDatePicker = ({
         <Controller
           name={`${filter?.filter_attribute_name}.value`}
           control={control}
+          // defaultValue={
+          //   isRange
+          //     ? ["", ""]
+          //     : isRelativeToToday
+          //     ? moment().format("YYYY-MM-DD")
+          //     : filter.filter_value
+          //     ? moment(filter.filter_value, "YYYY-MM-DD").toDate()
+          //     : null
+          // }
           defaultValue={
             isRange
               ? ["", ""]
               : isRelativeToToday
               ? moment().format("YYYY-MM-DD")
+              : isEmptyOperator
+              ? null
               : filter.filter_value
               ? moment(filter.filter_value, "YYYY-MM-DD").toDate()
               : null
@@ -73,7 +91,8 @@ const FormDatePicker = ({
                       field.onChange(updated);
                       onValueChange?.();
                     }}
-                    disabled={isRelativeToToday}
+                    // disabled={isRelativeToToday}
+                    disabled={isRelativeToToday || isEmptyOperator}
                     format={
                       views?.length === 1 && views[0] === "year"
                         ? "yyyy"
@@ -122,7 +141,8 @@ const FormDatePicker = ({
                       field.onChange(updated);
                       onValueChange?.();
                     }}
-                    disabled={isRelativeToToday}
+                    // disabled={isRelativeToToday}
+                    disabled={isRelativeToToday || isEmptyOperator}
                     format={
                       views?.length === 1 && views[0] === "year"
                         ? "yyyy"
@@ -173,7 +193,8 @@ const FormDatePicker = ({
                   field.onChange(formatted);
                   onValueChange?.();
                 }}
-                disabled={isRelativeToToday}
+                // disabled={isRelativeToToday}
+                disabled={isRelativeToToday || isEmptyOperator}
                 format={
                   views?.length === 1 && views[0] === "year"
                     ? "yyyy"

package/src/listing/components/filter/components/forms/components/Filter-criteria.tsx

@@ -144,11 +144,14 @@ const FilterCriteria = ({
           >
             <Box
               sx={{
-                maxHeight: `calc(100vh - 440px)`,
+                maxHeight: filterMaster?.saved_filters?.selectedId
+                  ? `calc("100vh - 601px")`
+                  : `calc(100vh - 440px)`,
                 overflowY: "auto",
                 width: "100%",
                 ...filterStyles.scrollbarCustom,
               }}
+              className="filter-criteria-list-box"
             >
               {selectedFilterEntity ? (
                 <FilterCriteriaList

package/src/listing/components/filter/components/forms/index.tsx

@@ -270,7 +270,13 @@ const FilterForm = ({
 
         <Box
           className="filter-criteria-form"
-          sx={filterFormStyles.formFlexContainer}
+          sx={{
+            ...filterFormStyles.formFlexContainer,
+            ...(editMode && {
+              maxHeight: "calc(100vh - 570px)",
+              overflowY: "auto",
+            }),
+          }}
         >
           <FilterCriteria
             columnsData={columnsData}
@@ -471,569 +477,3 @@ const FilterForm = ({
 };
 
 export default FilterForm;
-
-// !! PLEASE DO NOT DELETE THIS COMMENTED BLOCK !!
-// import {
-//   Box,
-//   Button,
-//   FormControl,
-//   IconButton,
-//   TextField,
-//   Typography,
-// } from "@mui/material";
-// import { CloseIcon, DeleteIcon } from "../../../../../assets/svg";
-// import {
-//   FilterColumnsDataProps,
-//   FilterComponentOptions,
-//   FilterDropdownDataProps,
-//   FilterMasterStateProps,
-//   FilterStateProps,
-// } from "../../../../types/filter";
-// import { Controller, useForm } from "react-hook-form";
-// import FormTextfield from "./components/Textfield";
-// import React, { useEffect, useMemo, useCallback } from "react";
-// import FormDatePicker from "./components/Date";
-// import FormDropdown from "./components/Dropdown";
-// import FormMultiSelect from "./components/Multi-Select";
-// import { CraftTableOptionsProps } from "../../../../types/table-options";
-// import FilterCriteria from "./components/Filter-criteria";
-// import CustomSearch from "../search";
-// import { customDebounce } from "../../../../libs/utils/debounce";
-// import { filterFormStyles } from "../../style";
-// import { onFilterChangeFunctionProps } from "../../../../types/common";
-
-// interface FormValues {
-//   filterName: string;
-//   [key: string]:
-//     | {
-//         value: string | string[];
-//         operator: string;
-//       }
-//     | string;
-// }
-
-// const FilterForm = ({
-//   columnsData,
-//   dropdownData,
-//   searchTerm = "",
-//   setSearchTerm,
-//   handleRemoveFilter,
-//   editMode = false,
-//   tableStates,
-//   setSavedFilterModalOpen,
-//   setDeleteFilterModalOpen,
-//   onChangeFunction,
-//   filterComponentOptions,
-// }: {
-//   columnsData: FilterColumnsDataProps;
-//   dropdownData: FilterDropdownDataProps;
-//   searchTerm?: string;
-//   setSearchTerm: React.Dispatch<React.SetStateAction<string>>;
-//   handleRemoveFilter: (filter_attribute: string) => void;
-//   editMode?: boolean;
-//   tableStates: CraftTableOptionsProps;
-//   setSavedFilterModalOpen?: React.Dispatch<React.SetStateAction<boolean>>;
-//   setDeleteFilterModalOpen?: React.Dispatch<React.SetStateAction<boolean>>;
-//   onChangeFunction: ({
-//     updatedFilters,
-//     filterMaster,
-//   }: onFilterChangeFunctionProps) => void;
-//   filterComponentOptions?: FilterComponentOptions;
-// }) => {
-//   const { filterMaster, filters, setFilters, setFilterMaster, setPagination } =
-//     tableStates;
-
-//   const showSaveButton =
-//     filterComponentOptions?.tabOptions?.mainFilter?.showSaveButton;
-//   const showClearAllButton =
-//     filterComponentOptions?.tabOptions?.mainFilter?.showClearAllButton;
-//   const customButtons =
-//     filterComponentOptions?.tabOptions?.mainFilter?.customButtons;
-
-//   const filterName = filterMaster?.saved_filters?.selectedName || "";
-
-//   const defaultValues = useMemo(() => {
-//     const filterValues = filters?.reduce((acc, curr) => {
-//       if (curr?.filter_attribute_name) {
-//         acc[curr?.filter_attribute_name] = {
-//           value: curr?.filter_value ?? "",
-//           operator:
-//             curr?.filter_operator ?? curr?.dropdown_list?.[0]?.value ?? "",
-//         };
-//       }
-//       return acc;
-//     }, {} as Record<string, { value: string | string[]; operator: string }>);
-
-//     return {
-//       filterName: filterName ?? "",
-//       dummyChange: "",
-//       ...filterValues,
-//     };
-//   }, [filters, filterName]);
-
-//   const { control, watch, reset, setValue, unregister } = useForm<
-//     FormValues & { dummyChange: string }
-//   >({
-//     mode: "onChange",
-//     defaultValues,
-//     resetOptions: {
-//       keepDirtyValues: false,
-//       keepErrors: false,
-//     },
-//   });
-
-//   const formValues = watch();
-
-//   useEffect(() => {
-//     reset(defaultValues);
-//   }, [filters]);
-
-//   const debouncedUpdateFilters = useCallback(
-//     customDebounce((updatedFilters: FilterStateProps[]) => {
-//       setFilters(updatedFilters);
-
-//       const newState = {
-//         filterMaster: filterMaster,
-//         filters: updatedFilters,
-//       };
-
-//       onChangeFunction && onChangeFunction(newState);
-//     }, 1000),
-//     [setFilters]
-//   );
-
-//   const updateFiltersFromForm = useCallback(() => {
-//     const updatedFilters = filters?.map((filter) => {
-//       if (
-//         filter?.filter_attribute_name &&
-//         typeof formValues[filter?.filter_attribute_name] === "object"
-//       ) {
-//         const filterValue = formValues[filter?.filter_attribute_name] as {
-//           value: string | string[];
-//           operator: string;
-//         };
-
-//         return {
-//           ...filter,
-//           filter_value: filterValue.value,
-//           filter_operator: filterValue.operator,
-//         };
-//       }
-//       return filter;
-//     });
-
-//     setPagination((prev) => ({ ...prev, pageIndex: 0 }));
-//     debouncedUpdateFilters(updatedFilters);
-//   }, [formValues, filters, debouncedUpdateFilters]);
-
-//   useEffect(() => {
-//     return () => {
-//       reset();
-//       filters?.forEach((filter) => {
-//         if (filter?.filter_attribute_name) {
-//           unregister(filter?.filter_attribute_name);
-//         }
-//       });
-//     };
-//   }, []);
-
-//   const groupedFilters = useMemo(() => {
-//     return filters?.reduce((acc, filter) => {
-//       const key = filter?.filter_entity_name || "";
-//       if (!acc[key]) {
-//         acc[key] = [];
-//       }
-//       acc[key].push(filter);
-//       return acc;
-//     }, {} as Record<string, FilterStateProps[]>);
-//   }, [filters]);
-
-//   const handleRemoveEntityType = (entityType: string) => {
-//     const remainingFilters = filters?.filter(
-//       (f) => f.filter_entity_name !== entityType
-//     );
-
-//     // unregister all fields belonging to this entity type
-//     filters?.forEach((f) => {
-//       if (f?.filter_entity_name === entityType && f?.filter_attribute_name) {
-//         unregister(`${f?.filter_attribute_name}.value`);
-//         unregister(`${f?.filter_attribute_name}.operator`);
-//       }
-//     });
-
-//     setFilters(remainingFilters);
-
-//     const newState = {
-//       filterMaster,
-//       filters: remainingFilters,
-//     };
-
-//     onChangeFunction && onChangeFunction(newState);
-//   };
-
-//   return (
-//     <form
-//       onSubmit={(e) => {
-//         e.preventDefault(); //  This prevents the page from reloading
-//       }}
-//     >
-//       <Box sx={editMode ? filterFormStyles.formEditModeStyle : {}}>
-//         {editMode && (
-//           <Box
-//             sx={{
-//               "& .MuiOutlinedInput-root": {
-//                 borderRadius: "6px",
-//                 fontSize: "14px",
-//                 bgcolor: "#fafafa",
-//                 "& fieldset": { borderColor: "#c1c1c1" },
-//                 "&.Mui-focused fieldset": { borderColor: "#7A5AF8" },
-//               },
-//               display: "flex",
-//               alignItems: "center",
-//               justifyContent: "center",
-//               padding: "0.5rem 0 1rem 0",
-//               gap: 1,
-//             }}
-//           >
-//             <Controller
-//               name="filterName"
-//               control={control}
-//               render={({ field }) => (
-//                 <TextField
-//                   fullWidth
-//                   size="small"
-//                   placeholder="Filter Name"
-//                   value={filterName || field.value}
-//                   onChange={(e) => {
-//                     field.onChange(e);
-//                     if (editMode) {
-//                       setFilterMaster(
-//                         (prev) =>
-//                           ({
-//                             ...prev,
-//                             saved_filters: {
-//                               ...prev?.saved_filters,
-//                               selectedName: e.target.value,
-//                             },
-//                           } as FilterMasterStateProps)
-//                       );
-//                     }
-//                   }}
-//                   inputRef={field.ref}
-//                   sx={{
-//                     maxWidth: 400,
-
-//                     "& .MuiOutlinedInput-root": {
-//                       bgcolor: "white",
-//                       borderRadius: "0px",
-//                       fontSize: "14px",
-//                       color: "#272524",
-//                       fontWeight: "500",
-//                       "& fieldset": { borderColor: "#c5c5c5" },
-//                       "&.Mui-focused fieldset": { borderColor: "#7A5AF8" },
-//                     },
-//                   }}
-//                 />
-//               )}
-//             />
-//             <Box onClick={(e) => e.stopPropagation()}>
-//               <IconButton
-//                 size="small"
-//                 onClick={() =>
-//                   setDeleteFilterModalOpen && setDeleteFilterModalOpen(true)
-//                 }
-//               >
-//                 <DeleteIcon />
-//               </IconButton>
-//             </Box>
-//           </Box>
-//         )}
-
-//         <Box
-//           className="filter-criteria-form"
-//           sx={filterFormStyles.formFlexContainer}
-//         >
-//           <FilterCriteria
-//             columnsData={columnsData}
-//             tableStates={tableStates}
-//             onChangeFunction={onChangeFunction}
-//             filterComponentOptions={filterComponentOptions}
-//           />
-
-//           {!editMode && (
-//             <CustomSearch value={searchTerm} onChange={setSearchTerm} />
-//           )}
-
-//           <Box
-//             className="filter-form-inputs"
-//             sx={filterFormStyles.formFlexContainer}
-//           >
-//             {Object.entries(groupedFilters).map(([entityType, filters]) => (
-//               <Box
-//                 key={entityType}
-//                 sx={{
-//                   border: "1px solid #c5c5c5",
-//                   borderRadius: 2,
-//                   overflow: "hidden",
-//                 }}
-//               >
-//                 {/* Group Header */}
-//                 <Box
-//                   className="group-header"
-//                   sx={filterFormStyles.formListSectionHeader}
-//                 >
-//                   <Typography fontSize={14}>{entityType}</Typography>
-//                   <IconButton
-//                     size="small"
-//                     onClick={() => handleRemoveEntityType(entityType)}
-//                   >
-//                     <CloseIcon />
-//                   </IconButton>
-//                 </Box>
-
-//                 {filters
-//                   .filter(
-//                     (filter) =>
-//                       filter?.filter_attribute_name
-//                         ?.toLowerCase()
-//                         .includes(searchTerm.toLowerCase()) ||
-//                       filter.filter_value
-//                         ?.toString()
-//                         .toLowerCase()
-//                         .includes(searchTerm.toLowerCase())
-//                   )
-//                   .reverse()
-//                   .map((filter) => {
-//                     const dropdown_list = filter.dropdown_list || [];
-//                     return (
-//                       <Box
-//                         key={filter.filter_attribute}
-//                         sx={filterFormStyles.formListItem}
-//                       >
-//                         <Box sx={filterFormStyles.formListItemHeader}>
-//                           <Typography
-//                             sx={filterFormStyles.formListItemHeaderName}
-//                           >
-//                             {filter?.filter_attribute_name}
-//                           </Typography>
-//                           <FormDropdown
-//                             filter={filter}
-//                             control={control}
-//                             setValue={setValue}
-//                             dropdownList={dropdown_list}
-//                             sx={filterFormStyles.formListItemHeaderDropdown}
-//                             onValueChange={updateFiltersFromForm}
-//                           />
-//                           <IconButton
-//                             sx={{ marginLeft: "auto" }}
-//                             onClick={() => {
-//                               unregister(
-//                                 `${filter?.filter_attribute_name}.value`
-//                               );
-//                               unregister(
-//                                 `${filter?.filter_attribute_name}.operator`
-//                               );
-
-//                               // Toggle dummy field to force form dirty
-//                               const dummy = watch("dummyChange");
-//                               setValue(
-//                                 "dummyChange",
-//                                 dummy === "changed" ? "reset" : "changed",
-//                                 {
-//                                   shouldDirty: true,
-//                                 }
-//                               );
-
-//                               handleRemoveFilter(filter.filter_attribute);
-//                             }}
-//                             size="small"
-//                           >
-//                             <CloseIcon />
-//                           </IconButton>
-//                         </Box>
-
-//                         <Box>
-//                           {(() => {
-//                             const fieldValue = formValues[
-//                               filter?.filter_attribute_name as string
-//                             ] as
-//                               | { value: string | string[]; operator: string }
-//                               | undefined;
-
-//                             const operator = fieldValue?.operator;
-
-//                             // Operators that should show a Date Picker
-//                             const dateAllowedOperators = [
-//                               "equal",
-//                               "before",
-//                               "after",
-//                               "between",
-//                               "is",
-//                               "today",
-//                               "is_before",
-//                               "is_after",
-//                               "is_on_or_before",
-//                               "is_on_or_after",
-//                               "empty",
-//                               "not_empty",
-//                             ];
-
-//                             const showDatePicker =
-//                               filter?.filter_attribute_data_type === "date" &&
-//                               operator &&
-//                               dateAllowedOperators.includes(operator);
-
-//                             if (
-//                               filter?.filter_attribute_data_type === "text" ||
-//                               filter?.filter_attribute_data_type === "number"
-//                             ) {
-//                               return (
-//                                 <FormTextfield
-//                                   filter={filter}
-//                                   control={control}
-//                                   onValueChange={updateFiltersFromForm}
-//                                 />
-//                               );
-//                             }
-
-//                             if (
-//                               filter?.filter_attribute_data_type === "select"
-//                             ) {
-//                               return (
-//                                 <FormMultiSelect
-//                                   filter={filter}
-//                                   control={control}
-//                                   dropdownData={dropdownData}
-//                                   onValueChange={updateFiltersFromForm}
-//                                 />
-//                               );
-//                             }
-
-//                             if (
-//                               filter?.filter_attribute_data_type ===
-//                               "multiselect"
-//                             ) {
-//                               return (
-//                                 <FormMultiSelect
-//                                   filter={filter}
-//                                   control={control}
-//                                   dropdownData={dropdownData}
-//                                   onValueChange={updateFiltersFromForm}
-//                                 />
-//                               );
-//                             }
-
-//                             if (filter?.filter_attribute_data_type === "year") {
-//                               return (
-//                                 <FormDatePicker
-//                                   filter={filter}
-//                                   control={control}
-//                                   views={["year"]}
-//                                   onValueChange={updateFiltersFromForm}
-//                                 />
-//                               );
-//                             }
-
-//                             // DATE LOGIC
-//                             if (showDatePicker) {
-//                               return (
-//                                 <FormDatePicker
-//                                   filter={filter}
-//                                   control={control}
-//                                   onValueChange={updateFiltersFromForm}
-//                                 />
-//                               );
-//                             } else {
-//                               return (
-//                                 <FormTextfield
-//                                   filter={filter}
-//                                   control={control}
-//                                   onValueChange={updateFiltersFromForm}
-//                                 />
-//                               );
-//                             }
-
-//                             return <FormControl fullWidth size="small" />;
-//                           })()}
-//                         </Box>
-//                       </Box>
-//                     );
-//                   })}
-//               </Box>
-//             ))}
-//           </Box>
-//         </Box>
-//       </Box>
-
-//       {filters?.length > 0 && (showClearAllButton || showSaveButton) && (
-//         <Box sx={{ display: "flex", justifyContent: "center", gap: 1, mt: 3 }}>
-//           {showClearAllButton && (
-//             <Button
-//               variant="outlined"
-//               sx={{
-//                 color: "#7A5AF8",
-//                 border: `1px solid #7A5AF8`,
-//                 borderRadius: "6px",
-//                 textTransform: "none",
-//                 fontSize: "14px",
-//               }}
-//               fullWidth
-//               onClick={() => {
-//                 setFilters([]);
-
-//                 const filterMaster = {
-//                   ...tableStates.filterMaster,
-//                   activeFilterTabIndex: -1,
-//                 };
-
-//                 const newState = {
-//                   filterMaster: filterMaster,
-//                   filters: [],
-//                 };
-
-//                 onChangeFunction && onChangeFunction(newState);
-//               }}
-//             >
-//               Clear All
-//             </Button>
-//           )}
-
-//           {showSaveButton && (
-//             <Button
-//               variant="contained"
-//               fullWidth
-//               sx={{
-//                 color: "white",
-//                 backgroundColor: "#7A5AF8",
-//                 "&.Mui-disabled": {
-//                   backgroundColor: "#d7cefd",
-//                   color: "rgba(255, 255, 255, 0.7)",
-//                 },
-//               }}
-//               onClick={() => {
-//                 setSavedFilterModalOpen && setSavedFilterModalOpen(true);
-//               }}
-//             >
-//               Save Filter
-//             </Button>
-//           )}
-
-//           {/* Custom buttons from props */}
-//           {customButtons?.map((btn, idx) => (
-//             <Button
-//               key={idx}
-//               fullWidth
-//               variant={btn?.variant ?? "outlined"}
-//               sx={btn?.sx}
-//               {...btn}
-//             >
-//               {btn?.label}
-//             </Button>
-//           ))}
-//         </Box>
-//       )}
-//     </form>
-//   );
-// };
-
-// export default FilterForm;