rez-table-listing-mui 1.2.18 → 1.3.0

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}

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

@@ -22,8 +22,6 @@ const SavedFilter = ({
   columnsData,
   dropdownData,
   tableStates,
-  selectedFilters,
-  setSelectedFilters,
   editMode,
   setEditMode,
   setDeleteFilterModalOpen,
@@ -51,29 +49,11 @@ const SavedFilter = ({
           } as FilterMasterStateProps)
       );
 
-      setSelectedFilters([]);
       setEditMode && setEditMode(false);
     };
   }, []);
 
   const handleListItemClick = (filter: FilterOperationListProps) => {
-    // setFilterMaster(
-    //   (prev) =>
-    //     ({
-    //       ...prev,
-    //       saved_filters: {
-    //         ...prev?.attributes,
-    //         selectedId: filter?.value,
-    //         selectedName: filter?.label,
-    //       },
-    //       attributes: {
-    //         ...filterMaster?.attributes,
-    //         radio: [],
-    //       },
-    //       activeFilterTabIndex: tabValue,
-    //     } as FilterMasterStateProps)
-    // );
-
     const newFilterMasterState = {
       ...filterMaster,
       saved_filters: {
@@ -238,8 +218,6 @@ const SavedFilter = ({
           columnsData={columnsData}
           dropdownData={dropdownData}
           tableStates={tableStates}
-          selectedFilters={selectedFilters}
-          setSelectedFilters={setSelectedFilters}
           editMode={editMode}
           setEditMode={setEditMode}
           searchTerm={searchTerm}

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

@@ -1,10 +1,10 @@
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
 import { Box, IconButton, Typography } from "@mui/material";
 import CloseIcon from "@mui/icons-material/Close";
 import {
+  FilterComponentOptions,
   FilterDrawerProps,
   FilterMasterStateProps,
-  UpdatedFilterStateProps,
 } from "../../types/filter";
 
 import ConfirmModal, { InputField } from "../common/confirm-modal";
@@ -14,6 +14,7 @@ import MainFilter from "./components/main-filter";
 import SavedFilter from "./components/saved-filter";
 import AttributesFilter from "./components/attributes-filter";
 import { filterStyles } from "./style";
+import { deepMergeObjects } from "../../libs/utils/deep-merge-objects";
 
 export function TableFilter({
   onClose,
@@ -24,17 +25,10 @@ export function TableFilter({
   onUpdateFilter,
   dropdownData,
   onChangeFunction,
+  filterComponentOptions,
 }: FilterDrawerProps) {
   const [tabValue, setTabValue] = useState(0);
   const [editMode, setEditMode] = useState(false);
-  const [selectedFilters, setSelectedFilters] = useState<
-    UpdatedFilterStateProps[]
-  >([]);
-
-  // tabs
-  const FILTER_TAB = 0;
-  const SAVED_TAB = 1;
-  const ATTR_TAB = 2;
 
   // remove this
   const [saveFilterModalOpen, setSaveFilterModalOpen] = useState(false);
@@ -51,6 +45,40 @@ export function TableFilter({
     setShowFilterOption,
   } = tableStates;
 
+  const defaultOptions: FilterComponentOptions = {
+    showMainHeader: true,
+    showTabs: true,
+    tabOptions: {
+      mainFilter: {
+        showSaveButton: true,
+        showClearAllButton: true,
+      },
+    },
+    showMainFilter: true,
+    showSavedFilter: true,
+    showAttributesFilter: true,
+  };
+
+  const finalComponentOptions = deepMergeObjects<FilterComponentOptions>(
+    defaultOptions,
+    filterComponentOptions ?? {}
+  );
+
+  const showMainHeader = finalComponentOptions?.showMainHeader;
+  const showTabs = finalComponentOptions?.showTabs;
+  const showMainFilter = showTabs && finalComponentOptions?.showMainFilter;
+  const showSavedFilter = showTabs && finalComponentOptions?.showSavedFilter;
+  const showAttributesFilter =
+    showTabs && finalComponentOptions?.showAttributesFilter;
+
+  type TabType = "main" | "saved" | "attributes";
+
+  // Map tabs to type
+  const tabMapping: TabType[] = [];
+  if (showMainFilter) tabMapping.push("main");
+  if (showSavedFilter) tabMapping.push("saved");
+  if (showAttributesFilter) tabMapping.push("attributes");
+
   const clearAttributeRadio = () => {
     const newFilterMaster = {
       ...filterMaster,
@@ -58,17 +86,10 @@ export function TableFilter({
         ...filterMaster?.attributes,
         radio: [],
       },
-      activeFilterTabIndex: FILTER_TAB,
+      activeFilterTabIndex: 0,
     };
 
     setFilterMaster(newFilterMaster as FilterMasterStateProps);
-
-    // const newState = {
-    //   filterMaster: newFilterMaster,
-    //   filters: filters,
-    // };
-
-    // onChangeFunction && onChangeFunction(newState);
   };
 
   const filterNameInput: InputField = {
@@ -78,145 +99,156 @@ export function TableFilter({
     type: "text",
   };
 
-  useEffect(() => {
-    if (!columnsData || !columnsData?.column_list) {
-      setSelectedFilters([]);
-      return;
-    }
-
-    const updated = filters?.map((filter) => {
-      const matchingColumn = columnsData?.column_list.find(
-        (column) => column.attribute_key === filter.filter_attribute
-      );
-      const matchingDropdownList =
-        columnsData.operation_list[matchingColumn?.data_type || "text"];
-
-      return {
-        ...filter,
-        id: matchingColumn?.id ?? "",
-        name: matchingColumn?.name,
-        data_type: matchingColumn?.data_type,
-        dropdown_list: matchingDropdownList,
-      };
-    });
-
-    setSelectedFilters(updated || []);
-  }, [filters, columnsData, tabValue]);
+  //FOR TABS
+  const tabItems: TabItem[] = [
+    { label: "Filter" },
+    { label: "Saved Filter" },
+    { label: "Attributes" },
+  ];
 
   const handleTabChange = (_: React.SyntheticEvent, newValue: number) => {
-    if (tabValue === ATTR_TAB && newValue === FILTER_TAB) {
+    const tabType = tabMapping[newValue];
+
+    if (tabType === "attributes" && tabMapping[tabValue] === "main") {
       clearAttributeRadio();
     }
 
     setTabValue(newValue);
-    if (newValue === 0) {
+
+    if (tabType === "main") {
       setEditMode(false);
-      setSelectedFilters([]);
+
+      setFilterMaster(
+        (prev) =>
+          ({ ...prev, activeFilterTabIndex: 0 } as FilterMasterStateProps)
+      );
     }
   };
 
-  //FOR TABS
-  const tabItems: TabItem[] = [
-    { label: "Filter" },
-    { label: "Saved Filter" },
-    { label: "Attributes" },
-  ];
-
   const handleTabCrossClick = (index: number) => {
-    // always-clear bits
+    const tabType = tabMapping[index];
+
     setFilters([]);
-    setSelectedFilters([]);
 
-    // only tab 1 needs this
-    if (index === 1) setEditMode(false);
+    if (tabType === "saved") setEditMode(false);
 
-    const patches: Record<number, Partial<FilterMasterStateProps>> = {
-      0: {}, // no extra fields
-      1: { saved_filters: { selectedId: "", selectedName: "" } },
-      2: { attributes: { radio: [], selected: "" } },
-    };
+    const patches: Partial<FilterMasterStateProps> = {};
+
+    if (tabType === "saved") {
+      patches.saved_filters = { selectedId: "", selectedName: "" };
+    } else if (tabType === "attributes") {
+      patches.attributes = { radio: [], selected: "" };
+    }
 
     const newFilterMasterState = {
       ...filterMaster,
       activeFilterTabIndex: -1,
-      ...(patches[index] ?? {}),
+      ...patches,
     } as FilterMasterStateProps;
 
     setFilterMaster(newFilterMasterState);
 
-    const newState = {
-      filterMaster: newFilterMasterState,
-      filters: filters,
-    };
-
-    onChangeFunction && onChangeFunction(newState);
+    onChangeFunction &&
+      onChangeFunction({ filterMaster: newFilterMasterState, filters });
   };
 
   return (
     <Box sx={filterStyles.filterContainer}>
-      <Box sx={filterStyles.filterMainHeader}>
-        <Typography variant="h6" fontWeight="bold" fontSize="18px">
-          Filter
-        </Typography>
-        <IconButton
-          onClick={(e) => {
-            e.stopPropagation();
-            onClose && onClose();
-            setShowFilterOption(false);
-          }}
-          aria-label="close"
-        >
-          <CloseIcon fontSize="small" />
-        </IconButton>
-      </Box>
-
-      <CustomTabs
-        value={tabValue}
-        onChange={handleTabChange}
-        tabItems={tabItems}
-        activeFilterIndex={filterMaster?.activeFilterTabIndex ?? 0}
-        handleCrossClick={handleTabCrossClick}
-      />
-
-      <CustomTabPanel value={tabValue} index={0} sx={{ p: "1.5rem 0.75rem" }}>
-        <MainFilter
-          columnsData={columnsData}
-          tableStates={tableStates}
-          selectedFilters={selectedFilters}
-          setSelectedFilters={setSelectedFilters}
-          setSavedFilterModalOpen={setSaveFilterModalOpen}
-          dropdownData={dropdownData}
-          onChangeFunction={onChangeFunction}
+      {showMainHeader && (
+        <Box sx={filterStyles.filterMainHeader}>
+          <Typography variant="h6" fontWeight="bold" fontSize="18px">
+            Filter
+          </Typography>
+          <IconButton
+            onClick={(e) => {
+              e.stopPropagation();
+              onClose && onClose();
+              setShowFilterOption(false);
+            }}
+            aria-label="close"
+          >
+            <CloseIcon fontSize="small" />
+          </IconButton>
+        </Box>
+      )}
+
+      {showTabs && (
+        <CustomTabs
+          value={tabValue}
+          onChange={handleTabChange}
+          tabItems={tabItems}
+          activeFilterIndex={filterMaster?.activeFilterTabIndex ?? 0}
+          handleCrossClick={handleTabCrossClick}
         />
-      </CustomTabPanel>
-
-      <CustomTabPanel value={tabValue} index={1} sx={{ p: "1.5rem 0.75rem" }}>
-        <SavedFilter
-          columnsData={columnsData}
-          tableStates={tableStates}
-          selectedFilters={selectedFilters}
-          setSelectedFilters={setSelectedFilters}
-          editMode={editMode}
-          setEditMode={setEditMode}
-          setDeleteFilterModalOpen={setDeleteFilterModalOpen}
-          setSavedFilterModalOpen={setSaveFilterModalOpen}
-          dropdownData={dropdownData}
-          tabValue={tabValue}
-          onChangeFunction={onChangeFunction}
-        />
-      </CustomTabPanel>
-
-      <CustomTabPanel value={tabValue} index={2} sx={{ p: "1.5rem 0.75rem" }}>
-        <AttributesFilter
-          columnsData={columnsData}
-          tableStates={tableStates}
-          dropdownData={dropdownData}
-          searchTerm={searchTerm}
-          setSearchTerm={setSearchTerm}
-          tabValue={tabValue}
-          onChangeFunction={onChangeFunction}
-        />
-      </CustomTabPanel>
+      )}
+
+      {!showTabs && (
+        <Box sx={{ padding: "1.5rem 0.75rem", height: "100%" }}>
+          <MainFilter
+            columnsData={columnsData}
+            tableStates={tableStates}
+            setSavedFilterModalOpen={setSaveFilterModalOpen}
+            dropdownData={dropdownData}
+            onChangeFunction={onChangeFunction}
+            filterComponentOptions={finalComponentOptions}
+          />
+        </Box>
+      )}
+
+      {showMainFilter && (
+        <CustomTabPanel
+          value={tabValue}
+          index={tabMapping.indexOf("main")}
+          sx={{ p: "1.5rem 0.75rem" }}
+        >
+          <MainFilter
+            columnsData={columnsData}
+            tableStates={tableStates}
+            setSavedFilterModalOpen={setSaveFilterModalOpen}
+            dropdownData={dropdownData}
+            onChangeFunction={onChangeFunction}
+            filterComponentOptions={finalComponentOptions}
+          />
+        </CustomTabPanel>
+      )}
+
+      {showSavedFilter && (
+        <CustomTabPanel
+          value={tabValue}
+          index={tabMapping.indexOf("saved")}
+          sx={{ p: "1.5rem 0.75rem" }}
+        >
+          <SavedFilter
+            columnsData={columnsData}
+            tableStates={tableStates}
+            editMode={editMode}
+            setEditMode={setEditMode}
+            setDeleteFilterModalOpen={setDeleteFilterModalOpen}
+            setSavedFilterModalOpen={setSaveFilterModalOpen}
+            dropdownData={dropdownData}
+            tabValue={tabValue}
+            onChangeFunction={onChangeFunction}
+          />
+        </CustomTabPanel>
+      )}
+
+      {showAttributesFilter && (
+        <CustomTabPanel
+          value={tabValue}
+          index={tabMapping.indexOf("attributes")}
+          sx={{ p: "1.5rem 0.75rem" }}
+        >
+          <AttributesFilter
+            columnsData={columnsData}
+            tableStates={tableStates}
+            dropdownData={dropdownData}
+            searchTerm={searchTerm}
+            setSearchTerm={setSearchTerm}
+            tabValue={tabValue}
+            onChangeFunction={onChangeFunction}
+          />
+        </CustomTabPanel>
+      )}
 
       <ConfirmModal
         open={saveFilterModalOpen}

package/src/listing/components/filter/style.ts

@@ -12,6 +12,7 @@ interface filterFormStyleType {
   formEditModeStyle: SxProps<Theme>;
   formFlexContainer: SxProps<Theme>;
   formListItem: SxProps<Theme>;
+  formListSectionHeader: SxProps<Theme>;
   formListItemHeader: SxProps<Theme>;
   formListItemHeaderName: SxProps<Theme>;
   formListItemHeaderDropdown: SxProps<Theme>;
@@ -95,13 +96,21 @@ export const filterFormStyles: filterFormStyleType = {
 
   formListItem: {
     p: 1,
-    borderRadius: 2,
-    backgroundColor: "#FAFAFA",
+    backgroundColor: "#FFFFFF",
     display: "flex",
     flexDirection: "column",
     gap: 0.5,
   },
 
+  formListSectionHeader: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: 1,
+    p: 1,
+    backgroundColor: "#FAFAF9",
+  },
+
   formListItemHeader: {
     display: "flex",
     justifyContent: "flex-start",
@@ -116,9 +125,17 @@ export const filterFormStyles: filterFormStyleType = {
   },
 
   formListItemHeaderDropdown: {
-    fontSize: "13px",
+    fontSize: "12px",
     minWidth: 50,
     border: "none",
     boxShadow: "none",
+
+    "& .MuiSelect-root": {
+      fontSize: "0.75rem",
+
+      "& .MuiSelect-select": {
+        paddingBottom: "0rem",
+      },
+    },
   },
 };

package/src/listing/libs/hooks/useCraftTable.tsx

@@ -8,6 +8,8 @@ import {
 import { useState } from "react";
 import { CraftTableOptionsProps } from "../../types/table-options";
 import {
+  FilterDataMainFilterEntityListProps,
+  FilterDataProps,
   FilterMasterStateProps,
   FilterOperationListProps,
   FilterStateProps,
@@ -43,6 +45,9 @@ export function useCraftTable(paginationPageSize: number = 25) {
 
   //For filter criteria paper
   const [showFilterOptions, setShowFilterOption] = useState<boolean>(false);
+  const [filterData, setFilterData] = useState<FilterDataProps | null>(null);
+  const [selectedFilterEntity, setSelectedFilterEntity] =
+    useState<FilterDataMainFilterEntityListProps>();
 
   if (pagination.pageIndex < 0 || pagination.pageSize <= 0) {
     throw new Error(
@@ -83,6 +88,10 @@ export function useCraftTable(paginationPageSize: number = 25) {
     setShowFilterOption: setShowFilterOption,
     columnPinning: columnPinning,
     setColumnPinning: setColumnPinning,
+    filterData: filterData,
+    setFilterData: setFilterData,
+    selectedFilterEntity: selectedFilterEntity,
+    setSelectedFilterEntity: setSelectedFilterEntity,
   };
 
   return craftTableOptions;

package/src/listing/libs/hooks/useEntityTableAPI.tsx

@@ -15,6 +15,8 @@ import {
   commonGetDropdownDataAPI,
   createSavedFilter,
   deleteSavedFilter,
+  getFilteEntityList,
+  getFilterCriteriaByEntity,
   getSettingsData,
   saveSettingsData,
   updateSavedFilter,
@@ -22,6 +24,7 @@ import {
 } from "../utils/apiColumn";
 import {
   FilterColumnsDataProps,
+  FilterDataMainFilterEntityListProps,
   FilterMasterStateProps,
 } from "../../types/filter";
 import { CraftTableOptionsProps } from "../../types/table-options";
@@ -297,3 +300,25 @@ export const useGetSettingsDataAPI = (entity_type: string) => {
 
   return { getSettingsAPIData };
 };
+
+export const useGetFilterEntityListAndCriteria = ({
+  entity_type,
+  selectedFilterEntity,
+}: {
+  entity_type: string;
+  selectedFilterEntity: FilterDataMainFilterEntityListProps | undefined;
+}) => {
+  const filterEntityList = useQuery({
+    queryKey: ["filterEntityList", entity_type],
+    queryFn: () => getFilteEntityList(entity_type),
+    enabled: !!entity_type,
+  });
+
+  const filterEntityWiseCriteria = useQuery({
+    queryKey: ["filterEntityWiseCriteria", selectedFilterEntity],
+    queryFn: () => getFilterCriteriaByEntity(selectedFilterEntity),
+    enabled: !!selectedFilterEntity,
+  });
+
+  return { filterEntityList, filterEntityWiseCriteria };
+};