rez-table-listing-mui 1.3.18 → 1.3.19

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

@@ -1,11 +1,4 @@
-import {
-  Box,
-  Button,
-  FormControl,
-  IconButton,
-  TextField,
-  Typography,
-} from "@mui/material";
+import { Box, Button, IconButton, TextField, Typography } from "@mui/material";
 import { CloseIcon, DeleteIcon } from "../../../../../assets/svg";
 import {
   FilterColumnsDataProps,
@@ -15,17 +8,15 @@ import {
   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";
+import { resolveFilterInput } from "./utils/filter-date-input-resolver";
 
 interface FormValues {
   filterName: string;
@@ -199,7 +190,7 @@ const FilterForm = ({
   return (
     <form
       onSubmit={(e) => {
-        e.preventDefault(); // 🔥 This prevents the page from reloading
+        e.preventDefault(); //  This prevents the page from reloading
       }}
     >
       <Box sx={editMode ? filterFormStyles.formEditModeStyle : {}}>
@@ -378,60 +369,23 @@ const FilterForm = ({
                         </Box>
 
                         <Box>
-                          {filter?.filter_attribute_data_type === "text" ||
-                          filter?.filter_attribute_data_type === "number" ? (
-                            <FormTextfield
-                              filter={filter}
-                              control={control}
-                              onValueChange={updateFiltersFromForm}
-                            />
-                          ) : filter?.filter_attribute_data_type === "year" ? (
-                            <FormDatePicker
-                              filter={filter}
-                              control={control}
-                              views={["year"]}
-                              onValueChange={updateFiltersFromForm}
-                            />
-                          ) : filter?.filter_attribute_data_type === "date" ? (
-                            <FormDatePicker
-                              filter={filter}
-                              control={control}
-                              onValueChange={updateFiltersFromForm}
-                            />
-                          ) : filter?.filter_attribute_data_type ===
-                            "select" ? (
-                            <FormMultiSelect
-                              filter={filter}
-                              control={control}
-                              dropdownData={dropdownData}
-                              onValueChange={updateFiltersFromForm}
-                            />
-                          ) : filter?.filter_attribute_data_type ===
-                            "multiselect" ? (
-                            <FormMultiSelect
-                              filter={filter}
-                              control={control}
-                              dropdownData={dropdownData}
-                              onValueChange={updateFiltersFromForm}
-                            />
-                          ) : filter?.filter_attribute_data_type === "radio" ? (
-                            <FormMultiSelect
-                              filter={filter}
-                              control={control}
-                              dropdownData={dropdownData}
-                              onValueChange={updateFiltersFromForm}
-                            />
-                          ) : filter?.filter_attribute_data_type ===
-                            "checkbox" ? (
-                            <FormMultiSelect
-                              filter={filter}
-                              control={control}
-                              dropdownData={dropdownData}
-                              onValueChange={updateFiltersFromForm}
-                            />
-                          ) : (
-                            <FormControl fullWidth size="small" />
-                          )}
+                          {(() => {
+                            const fieldValue = formValues[
+                              filter?.filter_attribute_name as keyof FormValues
+                            ] as
+                              | { value: string | string[]; operator: string }
+                              | undefined;
+
+                            const operator = fieldValue?.operator;
+
+                            return resolveFilterInput({
+                              filter,
+                              operator,
+                              control,
+                              dropdownData,
+                              updateFiltersFromForm,
+                            });
+                          })()}
                         </Box>
                       </Box>
                     );
@@ -514,3 +468,521 @@ const FilterForm = ({
 };
 
 export default FilterForm;
+
+// !! PLEASE DO NOT DELETE THIS COMMENT 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>
+//                           {filter?.filter_attribute_data_type === "text" ||
+//                           filter?.filter_attribute_data_type === "number" ? (
+//                             <FormTextfield
+//                               filter={filter}
+//                               control={control}
+//                               onValueChange={updateFiltersFromForm}
+//                             />
+//                           ) : filter?.filter_attribute_data_type === "year" ? (
+//                             <FormDatePicker
+//                               filter={filter}
+//                               control={control}
+//                               views={["year"]}
+//                               onValueChange={updateFiltersFromForm}
+//                             />
+//                           ) : filter?.filter_attribute_data_type === "date" ? (
+//                             <FormDatePicker
+//                               filter={filter}
+//                               control={control}
+//                               onValueChange={updateFiltersFromForm}
+//                             />
+//                           ) : filter?.filter_attribute_data_type ===
+//                             "select" ? (
+//                             <FormMultiSelect
+//                               filter={filter}
+//                               control={control}
+//                               dropdownData={dropdownData}
+//                               onValueChange={updateFiltersFromForm}
+//                             />
+//                           ) : filter?.filter_attribute_data_type ===
+//                             "multiselect" ? (
+//                             <FormMultiSelect
+//                               filter={filter}
+//                               control={control}
+//                               dropdownData={dropdownData}
+//                               onValueChange={updateFiltersFromForm}
+//                             />
+//                           ) : filter?.filter_attribute_data_type === "radio" ? (
+//                             <FormMultiSelect
+//                               filter={filter}
+//                               control={control}
+//                               dropdownData={dropdownData}
+//                               onValueChange={updateFiltersFromForm}
+//                             />
+//                           ) : filter?.filter_attribute_data_type ===
+//                             "checkbox" ? (
+//                             <FormMultiSelect
+//                               filter={filter}
+//                               control={control}
+//                               dropdownData={dropdownData}
+//                               onValueChange={updateFiltersFromForm}
+//                             />
+//                           ) : (
+//                             <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;