rez-table-listing-mui 1.2.19 → 1.3.0

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

@@ -9,9 +9,10 @@ import {
 import { CloseIcon, DeleteIcon } from "../../../../../assets/svg";
 import {
   FilterColumnsDataProps,
+  FilterComponentOptions,
   FilterDropdownDataProps,
   FilterMasterStateProps,
-  UpdatedFilterStateProps,
+  FilterStateProps,
 } from "../../../../types/filter";
 import { Controller, useForm } from "react-hook-form";
 import FormTextfield from "./components/Textfield";
@@ -43,14 +44,13 @@ const FilterForm = ({
   setSearchTerm,
   criteriaSearchTerm = "",
   setCriteriaSearchTerm,
-  selectedFilters,
-  setSelectedFilters,
   handleRemoveFilter,
   editMode = false,
   tableStates,
   setSavedFilterModalOpen,
   setDeleteFilterModalOpen,
   onChangeFunction,
+  filterComponentOptions,
 }: {
   columnsData: FilterColumnsDataProps;
   dropdownData: FilterDropdownDataProps;
@@ -58,10 +58,6 @@ const FilterForm = ({
   setSearchTerm: React.Dispatch<React.SetStateAction<string>>;
   criteriaSearchTerm?: string;
   setCriteriaSearchTerm: React.Dispatch<React.SetStateAction<string>>;
-  selectedFilters: UpdatedFilterStateProps[];
-  setSelectedFilters: React.Dispatch<
-    React.SetStateAction<UpdatedFilterStateProps[]>
-  >;
   handleRemoveFilter: (filter_attribute: string) => void;
   editMode?: boolean;
   tableStates: CraftTableOptionsProps;
@@ -71,14 +67,20 @@ const FilterForm = ({
     updatedFilters,
     filterMaster,
   }: onFilterChangeFunctionProps) => void;
+  filterComponentOptions?: FilterComponentOptions;
 }) => {
-  const { filterMaster, setFilters, setFilterMaster, setPagination } =
+  const { filterMaster, filters, setFilters, setFilterMaster, setPagination } =
     tableStates;
 
+  const showSaveButton =
+    filterComponentOptions?.tabOptions?.mainFilter?.showSaveButton;
+  const showClearAllButton =
+    filterComponentOptions?.tabOptions?.mainFilter?.showClearAllButton;
+
   const filterName = filterMaster?.saved_filters?.selectedName || "";
 
   const defaultValues = useMemo(() => {
-    const filterValues = selectedFilters.reduce((acc, curr) => {
+    const filterValues = filters?.reduce((acc, curr) => {
       if (curr.name) {
         acc[curr.name] = {
           value: curr.filter_value ?? "",
@@ -94,7 +96,7 @@ const FilterForm = ({
       dummyChange: "",
       ...filterValues,
     };
-  }, [selectedFilters, filterName]);
+  }, [filters, filterName]);
 
   const { control, watch, reset, setValue, unregister } = useForm<
     FormValues & { dummyChange: string }
@@ -111,11 +113,10 @@ const FilterForm = ({
 
   useEffect(() => {
     reset(defaultValues);
-  }, [selectedFilters]);
+  }, [filters]);
 
   const debouncedUpdateFilters = useCallback(
-    customDebounce((updatedFilters: UpdatedFilterStateProps[]) => {
-      setSelectedFilters(updatedFilters);
+    customDebounce((updatedFilters: FilterStateProps[]) => {
       setFilters(updatedFilters);
 
       const newState = {
@@ -125,11 +126,11 @@ const FilterForm = ({
 
       onChangeFunction && onChangeFunction(newState);
     }, 1000),
-    [setSelectedFilters, setFilters]
+    [setFilters]
   );
 
   const updateFiltersFromForm = useCallback(() => {
-    const updatedFilters = selectedFilters.map((filter) => {
+    const updatedFilters = filters?.map((filter) => {
       if (filter.name && typeof formValues[filter.name] === "object") {
         const filterValue = formValues[filter.name] as {
           value: string | string[];
@@ -147,12 +148,12 @@ const FilterForm = ({
 
     setPagination((prev) => ({ ...prev, pageIndex: 0 }));
     debouncedUpdateFilters(updatedFilters);
-  }, [formValues, selectedFilters, debouncedUpdateFilters]);
+  }, [formValues, filters, debouncedUpdateFilters]);
 
   useEffect(() => {
     return () => {
       reset();
-      selectedFilters.forEach((filter) => {
+      filters?.forEach((filter) => {
         if (filter.name) {
           unregister(filter.name);
         }
@@ -160,6 +161,40 @@ const FilterForm = ({
     };
   }, []);
 
+  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.name) {
+        unregister(`${f.name}.value`);
+        unregister(`${f.name}.operator`);
+      }
+    });
+
+    setFilters(remainingFilters);
+
+    const newState = {
+      filterMaster,
+      filters: remainingFilters,
+    };
+
+    onChangeFunction && onChangeFunction(newState);
+  };
+
   return (
     <form
       onSubmit={(e) => {
@@ -245,7 +280,6 @@ const FilterForm = ({
           <FilterCriteria
             columnsData={columnsData}
             tableStates={tableStates}
-            setSelectedFilters={setSelectedFilters}
             searchTerm={criteriaSearchTerm}
             setSearchTerm={setCriteriaSearchTerm}
             onChangeFunction={onChangeFunction}
@@ -259,170 +293,200 @@ const FilterForm = ({
             className="filter-form-inputs"
             sx={filterFormStyles.formFlexContainer}
           >
-            {selectedFilters
-              .filter(
-                (filter) =>
-                  filter.name
-                    ?.toLowerCase()
-                    .includes(searchTerm.toLowerCase()) ||
-                  filter.filter_value
-                    ?.toString()
-                    .toLowerCase()
-                    .includes(searchTerm.toLowerCase())
-              )
-              .reverse()
-              .map((filter) => {
-                const { dropdown_list = [] } = filter;
-                return (
-                  <Box
-                    key={filter.filter_attribute}
-                    sx={filterFormStyles.formListItem}
+            {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)}
                   >
-                    <Box sx={filterFormStyles.formListItemHeader}>
-                      <Typography sx={filterFormStyles.formListItemHeaderName}>
-                        {filter.name}
-                      </Typography>
-                      <FormDropdown
-                        filter={filter}
-                        control={control}
-                        setValue={setValue}
-                        dropdownList={dropdown_list}
-                        sx={filterFormStyles.formListItemHeaderDropdown}
-                        onValueChange={updateFiltersFromForm}
-                      />
-                      <IconButton
-                        sx={{ marginLeft: "auto" }}
-                        onClick={() => {
-                          unregister(`${filter.name}.value`);
-                          unregister(`${filter.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>
+
+                {filters
+                  .filter(
+                    (filter) =>
+                      filter.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}
                       >
-                        <CloseIcon />
-                      </IconButton>
-                    </Box>
-
-                    <Box>
-                      {filter.data_type === "text" ||
-                      filter.data_type === "number" ? (
-                        <FormTextfield
-                          filter={filter}
-                          control={control}
-                          onValueChange={updateFiltersFromForm}
-                        />
-                      ) : filter.data_type === "year" ? (
-                        <FormDatePicker
-                          filter={filter}
-                          control={control}
-                          views={["year"]}
-                          onValueChange={updateFiltersFromForm}
-                        />
-                      ) : filter.data_type === "date" ? (
-                        <FormDatePicker
-                          filter={filter}
-                          control={control}
-                          onValueChange={updateFiltersFromForm}
-                        />
-                      ) : filter.data_type === "select" ? (
-                        <FormMultiSelect
-                          filter={filter}
-                          control={control}
-                          dropdownData={dropdownData}
-                          onValueChange={updateFiltersFromForm}
-                        />
-                      ) : filter.data_type === "multiselect" ? (
-                        <FormMultiSelect
-                          filter={filter}
-                          control={control}
-                          dropdownData={dropdownData}
-                          onValueChange={updateFiltersFromForm}
-                        />
-                      ) : filter.data_type === "radio" ? (
-                        <FormMultiSelect
-                          filter={filter}
-                          control={control}
-                          dropdownData={dropdownData}
-                          onValueChange={updateFiltersFromForm}
-                        />
-                      ) : filter.data_type === "checkbox" ? (
-                        <FormMultiSelect
-                          filter={filter}
-                          control={control}
-                          dropdownData={dropdownData}
-                          onValueChange={updateFiltersFromForm}
-                        />
-                      ) : (
-                        <FormControl fullWidth size="small" />
-                      )}
-                    </Box>
-                  </Box>
-                );
-              })}
+                        <Box sx={filterFormStyles.formListItemHeader}>
+                          <Typography
+                            sx={filterFormStyles.formListItemHeaderName}
+                          >
+                            {filter.name}
+                          </Typography>
+                          <FormDropdown
+                            filter={filter}
+                            control={control}
+                            setValue={setValue}
+                            dropdownList={dropdown_list}
+                            sx={filterFormStyles.formListItemHeaderDropdown}
+                            onValueChange={updateFiltersFromForm}
+                          />
+                          <IconButton
+                            sx={{ marginLeft: "auto" }}
+                            onClick={() => {
+                              unregister(`${filter.name}.value`);
+                              unregister(`${filter.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.data_type === "text" ||
+                          filter.data_type === "number" ? (
+                            <FormTextfield
+                              filter={filter}
+                              control={control}
+                              onValueChange={updateFiltersFromForm}
+                            />
+                          ) : filter.data_type === "year" ? (
+                            <FormDatePicker
+                              filter={filter}
+                              control={control}
+                              views={["year"]}
+                              onValueChange={updateFiltersFromForm}
+                            />
+                          ) : filter.data_type === "date" ? (
+                            <FormDatePicker
+                              filter={filter}
+                              control={control}
+                              onValueChange={updateFiltersFromForm}
+                            />
+                          ) : filter.data_type === "select" ? (
+                            <FormMultiSelect
+                              filter={filter}
+                              control={control}
+                              dropdownData={dropdownData}
+                              onValueChange={updateFiltersFromForm}
+                            />
+                          ) : filter.data_type === "multiselect" ? (
+                            <FormMultiSelect
+                              filter={filter}
+                              control={control}
+                              dropdownData={dropdownData}
+                              onValueChange={updateFiltersFromForm}
+                            />
+                          ) : filter.data_type === "radio" ? (
+                            <FormMultiSelect
+                              filter={filter}
+                              control={control}
+                              dropdownData={dropdownData}
+                              onValueChange={updateFiltersFromForm}
+                            />
+                          ) : filter.data_type === "checkbox" ? (
+                            <FormMultiSelect
+                              filter={filter}
+                              control={control}
+                              dropdownData={dropdownData}
+                              onValueChange={updateFiltersFromForm}
+                            />
+                          ) : (
+                            <FormControl fullWidth size="small" />
+                          )}
+                        </Box>
+                      </Box>
+                    );
+                  })}
+              </Box>
+            ))}
           </Box>
         </Box>
       </Box>
 
-      {selectedFilters.length > 0 && (
+      {filters?.length > 0 && (showClearAllButton || showSaveButton) && (
         <Box sx={{ display: "flex", justifyContent: "center", gap: 1, mt: 3 }}>
-          <Button
-            variant="outlined"
-            sx={{
-              color: "#7A5AF8",
-              border: `1px solid #7A5AF8`,
-              borderRadius: "6px",
-              textTransform: "none",
-              fontSize: "14px",
-            }}
-            fullWidth
-            onClick={() => {
-              setFilters([]);
-              setSelectedFilters([]);
-
-              const filterMaster = {
-                ...tableStates.filterMaster,
-                activeFilterTabIndex: -1,
-              };
-
-              const newState = {
-                filterMaster: filterMaster,
-                filters: [],
-              };
-
-              onChangeFunction && onChangeFunction(newState);
-            }}
-          >
-            Clear All
-          </Button>
+          {showClearAllButton && (
+            <Button
+              variant="outlined"
+              sx={{
+                color: "#7A5AF8",
+                border: `1px solid #7A5AF8`,
+                borderRadius: "6px",
+                textTransform: "none",
+                fontSize: "14px",
+              }}
+              fullWidth
+              onClick={() => {
+                setFilters([]);
 
-          <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>
+                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>
+          )}
         </Box>
       )}
     </form>

package/src/listing/components/filter/components/main-filter.tsx

@@ -11,10 +11,9 @@ const MainFilter = ({
   columnsData,
   dropdownData,
   tableStates,
-  selectedFilters,
-  setSelectedFilters,
   setSavedFilterModalOpen,
   onChangeFunction,
+  filterComponentOptions,
 }: FilterFormComponentProps) => {
   const [searchTerm, setSearchTerm] = useState<string>("");
   const [criteriaSearchTerm, setCriteriaSearchTerm] = useState<string>("");
@@ -35,21 +34,17 @@ const MainFilter = ({
     setFilters((prev) =>
       prev.filter((filter) => filter.filter_attribute !== filter_attribute)
     );
-    setSelectedFilters((prev) =>
-      prev.filter((filter) => filter.filter_attribute !== filter_attribute)
-    );
     setFilters((prev) => {
-      const next = prev.filter((f) => f.filter_attribute !== filter_attribute);
-      setSelectedFilters((prevSel) =>
-        prevSel.filter((f) => f.filter_attribute !== filter_attribute)
+      const newFilters = prev.filter(
+        (f) => f.filter_attribute !== filter_attribute
       );
 
       onChangeFunction &&
         onChangeFunction({
           filterMaster: filterMaster,
-          filters: next,
+          filters: newFilters,
         });
-      return next;
+      return newFilters;
     });
   };
 
@@ -60,8 +55,6 @@ const MainFilter = ({
 
   return (
     <Box sx={mainBoxStyles} className="main-filter-component-wrapper">
-      {/* Set selectedFilters state */}
-
       {/* Render selectedFilters state */}
       <FilterForm
         columnsData={columnsData}
@@ -69,13 +62,12 @@ const MainFilter = ({
         setSearchTerm={setSearchTerm}
         criteriaSearchTerm={criteriaSearchTerm}
         setCriteriaSearchTerm={setCriteriaSearchTerm}
-        selectedFilters={selectedFilters}
-        setSelectedFilters={setSelectedFilters}
         handleRemoveFilter={handleRemoveFilter}
         tableStates={tableStates}
         setSavedFilterModalOpen={setSavedFilterModalOpen}
         dropdownData={dropdownData}
         onChangeFunction={onChangeFunction}
+        filterComponentOptions={filterComponentOptions}
       />
     </Box>
   );

package/src/listing/components/filter/components/saved-edit-filter.tsx

@@ -5,7 +5,6 @@ import {
   FilterColumnsDataProps,
   FilterDropdownDataProps,
   FilterMasterStateProps,
-  UpdatedFilterStateProps,
 } from "../../../types/filter";
 import { CraftTableOptionsProps } from "../../../types/table-options";
 import { onFilterChangeFunctionProps } from "../../../types/common";
@@ -14,8 +13,6 @@ const SavedFilterEditComponent = ({
   columnsData,
   dropdownData,
   tableStates,
-  selectedFilters,
-  setSelectedFilters,
   editMode,
   setEditMode,
   searchTerm,
@@ -29,10 +26,6 @@ const SavedFilterEditComponent = ({
   columnsData: FilterColumnsDataProps;
   dropdownData: FilterDropdownDataProps;
   tableStates: CraftTableOptionsProps;
-  selectedFilters: UpdatedFilterStateProps[];
-  setSelectedFilters: React.Dispatch<
-    React.SetStateAction<UpdatedFilterStateProps[]>
-  >;
   editMode?: boolean;
   setEditMode?: React.Dispatch<React.SetStateAction<boolean>>;
   searchTerm?: string;
@@ -52,34 +45,12 @@ const SavedFilterEditComponent = ({
     setFilters((prev) =>
       prev.filter((filter) => filter?.filter_attribute !== filter_attribute)
     );
-    setSelectedFilters((prev) =>
-      prev.filter((filter) => filter?.filter_attribute !== filter_attribute)
-    );
   };
 
   const handleBackButtonClick = () => {
     setEditMode && setEditMode(false);
     setFilters([]);
 
-    // const newFilterMasterState = {
-    //   ...filterMaster,
-    //   saved_filters: {
-    //     ...filterMaster?.saved_filters,
-    //     selectedId: "",
-    //     selectedName: "",
-    //   },
-    //   activeFilterTabIndex: -1,
-    // } as FilterMasterStateProps;
-
-    // setFilterMaster(newFilterMasterState);
-
-    // const newState = {
-    //   filterMaster: newFilterMasterState,
-    //   filters: filters,
-    // };
-
-    // onChangeFunction && onChangeFunction(newState);
-
     setFilterMaster(
       (prev) =>
         ({
@@ -116,8 +87,6 @@ const SavedFilterEditComponent = ({
 
       {/* Render selectedFilters state */}
       <FilterForm
-        selectedFilters={selectedFilters}
-        setSelectedFilters={setSelectedFilters}
         handleRemoveFilter={handleRemoveFilter}
         editMode={editMode}
         tableStates={tableStates}