rez-table-listing-mui 1.3.62 → 1.3.64

package/package.json

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

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

@@ -42,7 +42,7 @@ const FilterCriteriaEntityList = ({
 
     // Case 2: default behavior (apply search filter)
     return allEntities.filter((entity) =>
-      entity.label.toLowerCase().includes(searchTerm.toLowerCase())
+      entity.label?.toLowerCase().includes(searchTerm?.toLowerCase())
     );
   }, [isSingleEntity, filters, allEntities, searchTerm]);
 

package/src/listing/components/table-settings/components/column.tsx

@@ -190,11 +190,24 @@ const ColumnTab = ({
     }
   };
 
+  const constructHideList = (): ColumnItem[] => {
+    return (
+      columnTabAttributes
+        ?.map((column) => ({
+          label: column?.name,
+          value: column?.attribute_key,
+        }))
+        ?.filter(
+          (tab) =>
+            !settingsColumnState?.show_list?.find((i) => i.value === tab.value)
+        ) || []
+    );
+  };
   const getCurrentLists = () => {
     if (settingsColumnState?.isDefault) {
       return {
         showList: settingsColumnState.show_list || [],
-        hideList: settingsColumnState.hide_list || [],
+        hideList: constructHideList() || [],
       };
     } else {
       const currentTab = settingsColumnState?.tabs?.[selectedTabIndex];

package/src/listing/components/table-settings/components/quick-tab.tsx

@@ -106,6 +106,8 @@ const QuickTab = ({
           show_list: [],
         },
       }));
+
+      setCurrentQuickAttribute("");
     }
   }, [tabsApiData]);
 
@@ -174,8 +176,14 @@ const QuickTab = ({
   ];
 
   // Convert show_list/hide_list to FilterValue[] for rendering only
+
+  const constructHideList = () => {
+    return tabsApiData?.filter(
+      (tab) => !showListValues?.find((i) => i.value === tab.value)
+    );
+  };
   const showListValues = quickTabStates?.show_list || [];
-  const hideListValues = quickTabStates?.hide_list || [];
+  const hideListValues = constructHideList() || [];
 
   const sensors = useSensors(
     useSensor(MouseSensor),

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

@@ -25,6 +25,7 @@ import {
   getLayoutAttributes,
   getAttributes,
   getTableTabs,
+  newCommonGetDropdownDataAPI,
 } from "../utils/apiColumn";
 import {
   FilterDataMainFilterEntityListProps,
@@ -269,7 +270,11 @@ export const useCommonFilterDropdownAPI = (
     queries: dropdownConfigs.map((cfg) => {
       return {
         queryKey: ["commonDropdown", cfg?.dataSourceType],
-        queryFn: () => commonGetDropdownDataAPI(cfg?.dataSourceType, null),
+        queryFn: () =>
+          newCommonGetDropdownDataAPI({
+            entity_type: "ROL",
+            attribute_key: cfg?.key,
+          }),
         enabled: !!cfg?.dataSourceType,
       };
     }),
@@ -364,10 +369,14 @@ export const useGetFilterEntityListAndCriteria = ({
   return { filterEntityList, filterEntityWiseCriteria };
 };
 
-export const useGetAttributes = (entity_type: string) => {
+export const useGetAttributes = (
+  entity_type: string,
+  element_type?: string
+) => {
   const attributes = useQuery({
-    queryKey: ["attributes", entity_type],
-    queryFn: () => getAttributes(entity_type),
+    queryKey: ["attributes", entity_type, element_type],
+    queryFn: () => getAttributes(entity_type, element_type),
+    enabled: !!entity_type, // optional safety
   });
 
   return { attributes };
@@ -409,6 +418,47 @@ export const useGetTableTabs = (payload: any) => {
   });
   return { tableTabs, isLoading };
 };
+
+export const useDropdownAPI = ({
+  entity_type,
+  attribute_key,
+  inactiveIds,
+  parentId,
+  data,
+  enabled = true,
+}: {
+  entity_type: string;
+  attribute_key?: string;
+  inactiveIds?: string | null;
+  parentId?: number | string;
+  data?: any;
+  enabled?: boolean;
+}) => {
+  const query = useQuery({
+    queryKey: [
+      "commonDropdown",
+      entity_type,
+      attribute_key,
+      inactiveIds,
+      parentId,
+    ],
+    queryFn: () =>
+      newCommonGetDropdownDataAPI({
+        entity_type,
+        attribute_key,
+        inactiveIds,
+        parentId,
+        data,
+      }),
+    enabled, // prevents auto call unless needed
+    staleTime: 5 * 60 * 1000, // cache for 5 mins
+  });
+
+  return {
+    ...query,
+    dropdownData: query.data || [],
+  };
+};
 // export const useGetSettingsColumnAttributes = (entity_type: string) => {
 //   // First query to get meta data
 //   const settingsColumnAttributes = useQuery({

package/src/listing/libs/hooks/useEntityTableHooks.ts

@@ -14,11 +14,11 @@ export const useDetailsQueryAPI = (value: string | undefined) => {
   return { detailsQuery };
 };
 
-export const useFetchData = (entity_type: string) => {
+export const useFetchData = (entity_type: string, payload?: any) => {
   // First query to get meta data
   const metaQuery = useQuery({
-    queryKey: ["meta", entity_type],
-    queryFn: () => entityTableFilterMaster(entity_type),
+    queryKey: ["meta", entity_type, payload],
+    queryFn: () => entityTableFilterMaster(entity_type, payload),
   });
 
   return { metaQuery };

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

@@ -27,10 +27,14 @@ export const entityTableMetaMaster = async (entity_type: string) => {
   }
 };
 
-export const entityTableFilterMaster = async (entity_type: string) => {
+export const entityTableFilterMaster = async (
+  entity_type: string,
+  payload?: any
+) => {
   try {
     const response = await api.post(
-      `/meta/get-table-data?entity_type=${entity_type}&list_type=${entity_type}`
+      `/meta/get-table-data?entity_type=${entity_type}&list_type=${entity_type}`,
+      payload
     );
 
     // const filteredData = {
@@ -205,16 +209,57 @@ export const getLayoutAttributes = async ({
   return response.data;
 };
 
-export const getAttributes = async (entity_type: string) => {
-  const response = await api.get(
-    `meta/attribute-master/getAttributes?direct=false&entity_type=${entity_type}`
-  );
-  console.log("resss", response);
+export const getAttributes = async (
+  entity_type: string,
+  element_type?: string
+) => {
+  const response = await api.get("/meta/attribute-master/getAttributes", {
+    params: {
+      // direct: false, // commented as per requirement
+      entity_type,
+      ...(element_type && { element_type }),
+    },
+  });
 
   return response.data;
 };
 
 export const getTableTabs = async (payload: any) => {
-  const response = await api.post(`filter/get-tabs-data`, payload);
+  const response = await api.post(`filter/adm/tabs`, payload);
   return response.data;
 };
+
+export const newCommonGetDropdownDataAPI = async ({
+  entity_type,
+  attribute_key,
+  // organization_id,
+  data,
+  inactiveIds,
+  parentId,
+}: {
+  entity_type: string | undefined;
+  attribute_key?: string;
+  // organization_id?: string | null;
+  data?: any;
+  inactiveIds?: string | null;
+  parentId?: number | string;
+}) => {
+  // Body can still accept optional custom data if needed
+  const requestBody = data || {};
+
+  // Build query params dynamically
+  const queryParams: string[] = [];
+
+  if (entity_type) queryParams.push(`entity_type=${entity_type}`);
+  if (attribute_key) queryParams.push(`attribute_key=${attribute_key}`);
+  if (!Number.isNaN(Number(inactiveIds)) && inactiveIds)
+    queryParams.push(`inactiveIds=${inactiveIds}`);
+  if (parentId !== undefined && parentId !== null)
+    queryParams.push(`parent=${parentId}`);
+
+  const queryString = queryParams.length > 0 ? `?${queryParams.join("&")}` : "";
+
+  return await api
+    .post(`entity/getAttributeDropdown${queryString}`, requestBody)
+    .then((response) => response.data);
+};

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

@@ -111,3 +111,47 @@ api.interceptors.request.use(
     return Promise.reject(error);
   }
 );
+
+export const formatTableHeaders = (columns: any) => {
+  const mapped = columns.map((col: any) => {
+    const meta =
+      col.attribute_key === "status" ||
+      col.attribute_key === "lead_status" ||
+      col.attribute_key === "flag" ||
+      col.attribute_key === "invitation_status"
+        ? { type: "custom", propName: "renderStatus", align: col.align }
+        : col.attribute_key === "profile_image" ||
+          col.attribute_key === "short_logo"
+        ? {
+            type: "custom",
+            propName: "profileImageFetch",
+            align: col.align,
+          }
+        : col.attribute_key === "start_date" || col.attribute_key === "end_date"
+        ? { type: "custom", propName: "dateFormater", align: col.align }
+        : col.attribute_key === "action"
+        ? { type: "custom", propName: "renderAction", align: col.align }
+        : col.attribute_key === "code"
+        ? {
+            type: "custom",
+            propName: "drillCellRenderer",
+            align: col.align,
+          }
+        : col.attribute_key === "primary_mobile"
+        ? {
+            type: "custom",
+            propName: "apiCallonClick",
+            align: col.align,
+          }
+        : undefined;
+
+    return {
+      header: col.name ?? "",
+      accessorKey: col.attribute_key ?? "",
+      size: col.size,
+      meta,
+    };
+  });
+
+  return mapped;
+};

package/src/listing/types/table.ts

@@ -95,7 +95,7 @@ export interface CraftTableProps<T> {
   filterOptions?: FilterOptionsProps;
   settingsOptions?: settingsOptionsProps;
   craftTableFilterSettingsOptions?: craftTableFilterSettingsOptionsProps;
-  activeTab?: string;
+  activeTab?: any;
 }
 export interface CraftTableComponentProps<T> {
   table: Table<T>;

package/src/view/ListingView.tsx

@@ -6,9 +6,14 @@ import {
   useDetailsQueryAPI,
   useFetchData,
 } from "../listing/libs/hooks/useEntityTableHooks";
-import { ENTITY_TYPE, MAPPED_ENTITY_TYPE } from "../listing/libs/utils/common";
+import {
+  ENTITY_TYPE,
+  formatTableHeaders,
+  MAPPED_ENTITY_TYPE,
+} from "../listing/libs/utils/common";
 import {
   useCommonFilterDropdownAPI,
+  useDropdownAPI,
   useEntityTableAPI,
   useGetAttributes,
   useGetOperationList,
@@ -54,8 +59,30 @@ function ListingView() {
     filterSettingStates;
 
   const { defaultColumns } = useDefaultColumns();
+  const { data: getSettingsAPIData } = useGetNavigationLayoutAPI(ENTITY_TYPE);
+  const tabsPaylod = {
+    entity_type: ENTITY_TYPE,
+    defaultTabsConfig: {
+      attribute: "status",
+    },
+  };
 
-  const { metaQuery } = useFetchData(ENTITY_TYPE);
+  const { tableTabs } = useGetTableTabs(tabsPaylod);
+  const tabsData = tableTabs;
+
+  const { metaQuery } = useFetchData(ENTITY_TYPE, {
+    tabs: {
+      columnName:
+        getSettingsAPIData?.mapped_json?.quick_tab?.attribute || "status",
+      sortBy: getSettingsAPIData?.mapped_json?.quick_tab?.sorting || "ASC",
+      value:
+        selectedTab?.tab_name?.toLowerCase() === "all"
+          ? tabsData?.find((tab: any) => tab?.tab_name?.toLowerCase() === "all")
+              ?.tab_value
+          : selectedTab?.tab_value,
+      name: selectedTab?.tab_name,
+    },
+  });
 
   const { detailsQuery } = useDetailsQueryAPI(
     filterMaster?.saved_filters?.selectedId
@@ -66,6 +93,10 @@ function ListingView() {
   const { operationList } = useGetOperationList();
 
   const { attributes } = useGetAttributes(ENTITY_TYPE);
+  const { attributes: quickTabAttributes } = useGetAttributes(
+    ENTITY_TYPE,
+    "select"
+  );
 
   const isColumnDefault =
     filterSettingStates?.columnTabState?.isDefault || false;
@@ -80,99 +111,20 @@ function ListingView() {
   // );
   // const { dropdownData } = useCommonDropdownAPI(filters);
   const { dropdownFilterData } = useCommonFilterDropdownAPI(filters);
-  const { settingsTabDropdownData, settingsTabDropdownPending } =
-    useSettingsDropDownAPI({
-      entity_type: ENTITY_TYPE,
-      column: filterSettingStates?.quickTabStates?.attribute,
-      sort_by: filterSettingStates?.quickTabStates?.sorting,
-    });
-  const tabsPaylod = {
-    entity_type: ENTITY_TYPE,
-    defaultTabsConfig: {
-      attribute: "status",
-    },
-  };
 
-  const { tableTabs } = useGetTableTabs(tabsPaylod);
+  const {
+    data: settingsTabDropdownData,
+    isLoading: settingsTabDropdownPending,
+  } = useDropdownAPI({
+    entity_type: ENTITY_TYPE,
+    attribute_key: filterSettingStates?.quickTabStates?.attribute,
+  });
 
   const queryClient = useQueryClient();
-  const { data: getSettingsAPIData } = useGetNavigationLayoutAPI(ENTITY_TYPE);
 
   const fetchMeta = async () => {
-    try {
-      const { res: allColumns } = await entityTableMetaMaster(ENTITY_TYPE);
-
-      const savedColumnSettings = filterSettingStates.settingsData?.column;
-
-      const getOrderedColumns = (
-        showList: { value: string }[],
-        filteredColumns: any[]
-      ) => {
-        // Build ordered columns using showList and filteredColumns
-        // const orderedColumns = showList
-        //   ?.map((showItem) => {
-        //     return filteredColumns.find(
-        //       (col) => col?.accessorKey === showItem?.value
-        //     );
-        //   })
-        //   ?.filter((col): col is ColumnDef<any> => col !== undefined); // Ensure non-undefined columns are returned
-
-        // didnt know what above code was doing so rewrote it as below
-        // const res = showList.map((item: any) => ({
-        //   id: item.value,
-        //   accessorKey: item.value,
-        //   header: item.label,
-        // }));
-
-        // return res;
-        return allColumns;
-      };
-
-      setColumns(allColumns);
-
-      // if (
-      //   savedColumnSettings &&
-      //   !savedColumnSettings.isDefault &&
-      //   savedColumnSettings.tabs
-      // ) {
-      //   // Tab-wise view: find the active tab and use its show_list
-      //   const activeTabSettings = savedColumnSettings.tabs.find(
-      //     (tab) => tab.tab_name?.value == selectedTab.toLowerCase()
-      //   );
-
-      //   if (activeTabSettings?.show_list) {
-      //     const visibleColumns = new Set(
-      //       activeTabSettings.show_list.map((c) => c.value)
-      //     );
-
-      //     // First, filter columns based on visibleColumns
-      //     const filteredColumns = allColumns.filter((col: any) =>
-      //       visibleColumns.has(col?.accessorKey)
-      //     );
-      //     setColumns(
-      //       getOrderedColumns(activeTabSettings.show_list, filteredColumns)
-      //     );
-      //   } else {
-      //     // Fallback if no specific settings for the active tab are found
-      //     setColumns(allColumns);
-      //   }
-      // } else if (savedColumnSettings && savedColumnSettings.show_list) {
-      //   // Default view: use the main show_list
-      //   const visibleColumns = new Set(
-      //     savedColumnSettings.show_list.map((c) => c.value)
-      //   );
-      //   const filtered = allColumns.filter((col: any) =>
-      //     visibleColumns.has(col?.accessorKey)
-      //   );
-
-      //   setColumns(getOrderedColumns(savedColumnSettings.show_list, filtered));
-      // } else {
-      //   // No settings found, use all columns
-      //   setColumns(allColumns);
-      // }
-    } catch (error) {
-      console.error("Failed to fetch metadata:", error);
-    }
+    const res = formatTableHeaders(metaQuery?.data?.column_list || []);
+    setColumns(res);
   };
 
   useEffect(() => {
@@ -208,7 +160,6 @@ function ListingView() {
 
   //For server side sorting
   const enableServerSideSorting = true;
-  const tabsData = tableTabs?.data;
 
   const { tableData, isTableDataPending } = useEntityTableAPI({
     page: 0,
@@ -400,8 +351,8 @@ function ListingView() {
       mapped_json: data,
       type: "filter",
     };
-
     await saveLayoutAPI(payload);
+    queryClient.invalidateQueries({ queryKey: ["tableTabs"] });
   };
 
   const handleSaveSettingsData = (settingsData: SettingsDataProps) => {
@@ -553,7 +504,7 @@ function ListingView() {
               onClose={() => setShowListViewSettings(false)}
               columnsData={metaQuery.data || {}}
               columnsDataLoading={metaQuery.isPending}
-              quickTabAttributes={attributes?.data?.map((item) => ({
+              quickTabAttributes={quickTabAttributes?.data?.map((item) => ({
                 label: item.name,
                 value: item.attribute_key,
               }))}