rez-table-listing-mui 1.2.19 → 1.3.1

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/components/search/index.tsx

@@ -40,7 +40,7 @@ const CustomSearch = ({
         startAdornment: (
           <InputAdornment position="start">
             <SearchIcon
-              sx={{ color: "#888888", fontSize: "20px" }}
+              sx={{ color: "#888888", fontSize: "20px", paddingLeft: 1.5 }}
               className="search-icon-svg"
             />
           </InputAdornment>
@@ -50,7 +50,7 @@ const CustomSearch = ({
             <IconButton
               edge="end"
               onClick={handleClear}
-              sx={{ color: "#888888", fontSize: "20px" }}
+              sx={{ color: "#888888", fontSize: "20px", paddingRight: 1.5 }}
             >
               <CloseIcon />
             </IconButton>

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,
+  getFilterEntityList,
+  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: () => getFilterEntityList(entity_type),
+    enabled: !!entity_type,
+  });
+
+  const filterEntityWiseCriteria = useQuery({
+    queryKey: ["filterEntityWiseCriteria", selectedFilterEntity],
+    queryFn: () => getFilterCriteriaByEntity(selectedFilterEntity),
+    enabled: !!selectedFilterEntity,
+  });
+
+  return { filterEntityList, filterEntityWiseCriteria };
+};

package/src/listing/libs/utils/apiColumn.ts

@@ -2,6 +2,7 @@ import { api, MAPPED_ENTITY_TYPE } from "./common";
 import {
   createSavedFilterPayload,
   deleteSavedFilterPayload,
+  FilterDataMainFilterEntityListProps,
   updateSavedFilterPayload,
 } from "../../types/filter";
 import { viewSettingsDropDownAPIProps } from "../../types/common";
@@ -126,7 +127,10 @@ export const updateSavedFilter = async (
 // ALL View Settings API
 export const saveSettingsData = async (payload: any) => {
   try {
-    const response = await api.post(`/entity/create?entity_type=${MAPPED_ENTITY_TYPE}`, payload);
+    const response = await api.post(
+      `/entity/create?entity_type=${MAPPED_ENTITY_TYPE}`,
+      payload
+    );
     return response.data;
   } catch (error) {
     console.error("Failed to save settings data:", error);
@@ -157,3 +161,25 @@ export const viewSettingsDropDown = async ({
 
   return response.data;
 };
+
+export const getFilterEntityList = async (entity_type: string) => {
+  const response = await api.get(`/entity-relation/${entity_type}`);
+
+  return response.data;
+};
+
+export const getFilterCriteriaByEntity = async (
+  selectedFilterEntity: FilterDataMainFilterEntityListProps | undefined
+) => {
+  const params = { entity_type: selectedFilterEntity?.value };
+
+  const response = await api.post(
+    `meta/get-filter-data`,
+    {},
+    {
+      params,
+    }
+  );
+
+  return response.data;
+};

package/src/listing/libs/utils/deep-merge-objects.ts

@@ -0,0 +1,18 @@
+export function deepMergeObjects<T>(target: T, source: Partial<T>): T {
+  const output = { ...target };
+  for (const key in source) {
+    if (
+      source[key] &&
+      typeof source[key] === "object" &&
+      !Array.isArray(source[key])
+    ) {
+      output[key] = deepMergeObjects(
+        (target as any)[key] || {},
+        (source as any)[key]
+      );
+    } else {
+      (output as any)[key] = source[key];
+    }
+  }
+  return output;
+}

package/src/listing/types/common.ts

@@ -1,5 +1,3 @@
-import { FilterMasterStateProps, UpdatedFilterStateProps } from "./filter";
-
 export interface defaultColumnsProps {
   id: number;
   name: string;