rez-table-listing-mui 1.2.18 → 1.3.0

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

@@ -0,0 +1,104 @@
+import {
+  Box,
+  IconButton,
+  List,
+  ListItem,
+  ListItemText,
+  Typography,
+} from "@mui/material";
+import CustomSearch from "../../search";
+import React from "react";
+import { CraftTableOptionsProps } from "../../../../../types/table-options";
+import { filterFormStyles } from "../../../style";
+import { CloseIcon } from "../../../../../../assets/svg";
+import EmptyList from "./empty-list";
+import Loader from "../../../../common/loader/loader";
+import { FilterDataMainFilterEntityWiseCriteriaProps } from "../../../../../types/filter";
+
+interface Props {
+  tableStates: CraftTableOptionsProps;
+  handleAddFilter: (
+    column: FilterDataMainFilterEntityWiseCriteriaProps
+  ) => void;
+}
+
+const FilterCriteriaList = ({ tableStates, handleAddFilter }: Props) => {
+  const [searchTerm, setSearchTerm] = React.useState<string>("");
+
+  const { filterData, filters, selectedFilterEntity, setSelectedFilterEntity } =
+    tableStates;
+
+  return (
+    <>
+      <Box
+        className="group-header"
+        sx={{
+          ...filterFormStyles.formListSectionHeader,
+          position: "sticky",
+          top: 0,
+          zIndex: 1,
+        }}
+      >
+        <Typography fontSize={14}>{selectedFilterEntity?.label}</Typography>
+        <IconButton
+          size="small"
+          onClick={() => setSelectedFilterEntity(undefined)}
+        >
+          <CloseIcon />
+        </IconButton>
+      </Box>
+      {filterData?.mainFilter?.entityWiseCriteria?.isPending ? (
+        <Loader />
+      ) : (
+        <List>
+          <CustomSearch
+            placeholder="Filter by..."
+            value={searchTerm}
+            onChange={setSearchTerm}
+          />
+
+          <Box
+            sx={{
+              my: 2,
+              overflowY: "auto",
+              transition: "all 0.4s ease-in-out",
+            }}
+          >
+            {(() => {
+              const filteredEntities =
+                filterData?.mainFilter?.entityWiseCriteria?.data?.filter(
+                  (entity) =>
+                    entity.name.toLowerCase().includes(searchTerm.toLowerCase())
+                ) ?? [];
+
+              if (filteredEntities.length === 0) {
+                return <EmptyList />;
+              }
+
+              return filteredEntities.map((entity, index) => {
+                const isAlreadySelected = filters?.some(
+                  (filter) => filter.filter_attribute === entity.attribute_key
+                );
+
+                return (
+                  <ListItem
+                    key={index}
+                    sx={{
+                      opacity: isAlreadySelected ? 0.5 : 1,
+                      cursor: isAlreadySelected ? "not-allowed" : "pointer",
+                    }}
+                    onClick={() => handleAddFilter(entity)}
+                  >
+                    <ListItemText primary={entity.name} />
+                  </ListItem>
+                );
+              });
+            })()}
+          </Box>
+        </List>
+      )}
+    </>
+  );
+};
+
+export default FilterCriteriaList;

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

@@ -2,7 +2,8 @@ export const TextFieldStyles = {
   "& .MuiOutlinedInput-root": {
     borderRadius: "6px",
     fontSize: "14px",
-    bgcolor: "#fafafa",
+    bgcolor: "#fff",
+
     "& fieldset": { borderColor: "#c1c1c1" },
     "&.Mui-focused fieldset": {
       borderColor: "#7A5AF8",

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>