rez-table-listing-mui 1.3.9 → 1.3.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rez-table-listing-mui",
-  "version": "1.3.9",
+  "version": "1.3.11",
   "type": "module",
   "description": "A rez table listing component built on TanStack Table",
   "main": "dist/index.js",

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

@@ -39,22 +39,20 @@ const SavedFilter = ({
     return () => {
       const editModeFromTabOptions =
         filterComponentOptions?.tabOptions?.savedFilter?.editMode;
-
-      setFilterMaster(
-        (prev) =>
-          ({
-            ...prev,
-            saved_filters: {
-              ...prev?.attributes,
-              selectedId: "",
-              selectedName: "",
-              selectedCode: "",
-            },
-          } as FilterMasterStateProps)
-      );
-
       if (!editModeFromTabOptions) {
         setEditMode && setEditMode(false);
+        setFilterMaster(
+          (prev) =>
+            ({
+              ...prev,
+              saved_filters: {
+                ...prev?.attributes,
+                selectedId: "",
+                selectedName: "",
+                selectedCode: "",
+              },
+            } as FilterMasterStateProps)
+        );
       }
     };
   }, []);

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

@@ -5,7 +5,6 @@ import {
   FilterComponentOptions,
   FilterDrawerProps,
   FilterMasterStateProps,
-  TabType,
 } from "../../types/filter";
 import ConfirmModal, { InputField } from "../common/confirm-modal";
 import CustomTabPanel from "./components/tabs/custom-tab-panel";
@@ -89,10 +88,10 @@ export function TableFilter({
   }, [editModeFromTabOptions]);
 
   // Map tabs to type
-  const tabMapping: TabType[] = [];
-  if (showMainFilter) tabMapping.push("main");
-  if (showSavedFilter) tabMapping.push("saved");
-  if (showAttributesFilter) tabMapping.push("attributes");
+  const tabMapping: TabItem[] = [];
+  if (showMainFilter) tabMapping.push({ label: "Filter" });
+  if (showSavedFilter) tabMapping.push({ label: "Saved Filter" });
+  if (showAttributesFilter) tabMapping.push({ label: "Attributes" });
 
   const clearAttributeRadio = () => {
     const newFilterMaster = {
@@ -114,23 +113,16 @@ export function TableFilter({
     type: "text",
   };
 
-  //FOR TABS
-  const tabItems: TabItem[] = [
-    { label: "Filter" },
-    { label: "Saved Filter" },
-    { label: "Attributes" },
-  ];
-
   const handleTabChange = (_: React.SyntheticEvent, newValue: number) => {
-    const tabType = tabMapping[newValue];
+    const tabType = tabMapping[newValue]?.label;
 
-    if (tabType === "attributes" && tabMapping[tabValue] === "main") {
+    if (tabType === "Attributes" && tabMapping[tabValue]?.label === "Filter") {
       clearAttributeRadio();
     }
 
     setTabValue(newValue);
 
-    if (tabType === "main") {
+    if (tabType === "Filter") {
       setEditMode(false);
 
       setFilterMaster(
@@ -145,17 +137,17 @@ export function TableFilter({
 
     setFilters([]);
 
-    if (tabType === "saved") setEditMode(false);
+    if (tabType?.label === "Saved Filter") setEditMode(false);
 
     const patches: Partial<FilterMasterStateProps> = {};
 
-    if (tabType === "saved") {
+    if (tabType?.label === "Saved Filter") {
       patches.saved_filters = {
         selectedId: "",
         selectedName: "",
         selectedCode: "",
       };
-    } else if (tabType === "attributes") {
+    } else if (tabType?.label === "Attributes") {
       patches.attributes = { radio: [], selected: "" };
     }
 
@@ -214,7 +206,7 @@ export function TableFilter({
         <CustomTabs
           value={tabValue}
           onChange={handleTabChange}
-          tabItems={tabItems}
+          tabItems={tabMapping}
           activeFilterIndex={filterMaster?.activeFilterTabIndex ?? 0}
           handleCrossClick={handleTabCrossClick}
         />
@@ -233,7 +225,7 @@ export function TableFilter({
       {showMainFilter && (
         <CustomTabPanel
           value={tabValue}
-          index={tabMapping.indexOf("main")}
+          index={tabMapping.findIndex((tab) => tab.label === "Filter")}
           sx={{ p: "1.5rem 0.75rem" }}
         >
           <MainFilter
@@ -247,7 +239,7 @@ export function TableFilter({
       {showSavedFilter && (
         <CustomTabPanel
           value={tabValue}
-          index={tabMapping.indexOf("saved")}
+          index={tabMapping.findIndex((tab) => tab.label === "Saved Filter")}
           sx={{ p: "1.5rem 0.75rem" }}
         >
           <SavedFilter
@@ -262,7 +254,7 @@ export function TableFilter({
       {showAttributesFilter && (
         <CustomTabPanel
           value={tabValue}
-          index={tabMapping.indexOf("attributes")}
+          index={tabMapping.findIndex((tab) => tab.label === "Attributes")}
           sx={{ p: "1.5rem 0.75rem" }}
         >
           <AttributesFilter

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

@@ -21,6 +21,7 @@ import {
   saveSettingsData,
   updateSavedFilter,
   viewSettingsDropDown,
+  getOperationList,
 } from "../utils/apiColumn";
 import {
   FilterDataMainFilterEntityListProps,
@@ -355,3 +356,13 @@ export const useGetFilterEntityListAndCriteria = ({
 
   return { filterEntityList, filterEntityWiseCriteria };
 };
+
+export const useGetOperationList = () => {
+  // First query to get meta data
+  const operationList = useQuery({
+    queryKey: ["operationList"],
+    queryFn: () => getOperationList(),
+  });
+
+  return { operationList };
+};

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

@@ -185,3 +185,8 @@ export const getFilterCriteriaByEntity = async (
 
   return response.data;
 };
+
+export const getOperationList = async () => {
+  const response = await api.post(`/meta/operation-list`);
+  return response.data;
+};

package/src/listing/libs/utils/hydrate-saved-filters.ts

@@ -0,0 +1,26 @@
+import { FilterStateProps, OperationList } from "../../types/filter";
+
+export const hydrateSavedFilters = async (
+  savedFilters: FilterStateProps[],
+  operationList: OperationList
+) => {
+  return savedFilters.map((filter) => {
+    // const attribute = tableStates..find(
+    //   (attr) => attr.attribute_key === filter.filter_attribute
+    // );
+    if (typeof filter.filter_attribute_data_type === "undefined") {
+      return {
+        ...filter,
+        dropdown_list: [],
+      };
+    }
+
+    const matchingDropdownList =
+      operationList[filter.filter_attribute_data_type] || [];
+
+    return {
+      ...filter,
+      dropdown_list: matchingDropdownList,
+    };
+  });
+};

package/src/listing/types/filter.ts

@@ -101,7 +101,7 @@ type RecordFilterComponentProps = {
   delete: ModalConfig;
 };
 
-export type TabType = "main" | "saved" | "attributes";
+type TabType = "main" | "saved" | "attributes";
 
 interface FilterComponentTabOptions {
   mainFilter?: FilterComponentOptionsMainFilterOptions;
@@ -194,6 +194,20 @@ export interface FilterStateProps {
   datasource_list?: string | null;
 }
 
+export interface OperationOption {
+  label: string;
+  value: string;
+}
+
+export interface OperationList {
+  text: OperationOption[];
+  number: OperationOption[];
+  date: OperationOption[];
+  select: OperationOption[];
+  multiselect: OperationOption[];
+  year: OperationOption[];
+}
+
 export interface createSavedFilterPayload {
   name: string;
   organization_id?: number;

package/src/view/ListingView.tsx

@@ -10,6 +10,7 @@ import { ENTITY_TYPE, MAPPED_ENTITY_TYPE } from "../listing/libs/utils/common";
 import {
   useCommonFilterDropdownAPI,
   useEntityTableAPI,
+  useGetOperationList,
   useGetSettingsDataAPI,
   useSaveSettingsDataAPI,
   useSettingsDropDownAPI,
@@ -22,6 +23,7 @@ import { TableTabs } from "../listing/components/tabs";
 import { QuickFilterSettings } from "../listing/components/table-settings";
 import CraftTableFilterWrapper from "./FIlterWrapper";
 import { saveLayoutAPI } from "../listing/libs/services/saveLayoutAPI";
+import { hydrateSavedFilters } from "../listing/libs/utils/hydrate-saved-filters";
 
 function ListingView() {
   // const [mockLoading, setMockLoading] = useState<boolean>(true);
@@ -49,6 +51,7 @@ function ListingView() {
       : metaQuery?.data?.default_filter?.value
   );
   const { saveSettingsDataMutation } = useSaveSettingsDataAPI(ENTITY_TYPE);
+  const { operationList } = useGetOperationList();
 
   // const { dropdownData } = useCommonDropdownAPI(
   //   dropdownColumnList || metaQuery.data.column_list
@@ -139,8 +142,23 @@ function ListingView() {
     fetchMeta();
   }, [selectedTab]);
 
+  // useEffect(() => {
+  //   setFilters(detailsQuery.data ?? []);
+  // }, [detailsQuery.data]);
+
   useEffect(() => {
-    setFilters(detailsQuery.data ?? []);
+    const setFilterDropdown = async () => {
+      if (Array.isArray(detailsQuery.data)) {
+        const hydrated = await hydrateSavedFilters(
+          detailsQuery.data,
+          operationList.data
+        );
+        setFilters(hydrated);
+      } else {
+        setFilters([]);
+      }
+    };
+    setFilterDropdown();
   }, [detailsQuery.data]);
 
   useEffect(() => {
@@ -307,7 +325,7 @@ function ListingView() {
             onChangeFunction={handleChangeFunction}
             filterComponentOptions={{
               showMainHeader: false,
-              showTabs: false,
+              showTabs: true,
               isRuleEngine: true,
               tabOptions: {
                 mainFilter: {