rez-table-listing-mui 1.3.60 → 1.3.62

package/package.json

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

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

@@ -84,22 +84,29 @@ const QuickTab = ({
 
   // When user changes attribute
   useEffect(() => {
-    // if (currentQuickAttribute === settingsData?.quick_tab?.attribute) return;
+    if (currentQuickAttribute === settingsData?.quick_tab?.attribute) return;
 
-    // if (tabsApiData?.length) {
-    setSettingsData((prev) => ({
-      ...prev,
-      quick_tab: {
-        ...prev?.quick_tab,
-        hide_list: tabsApiData,
-        show_list: [],
-      },
-    }));
-
-    setCurrentQuickAttribute(settingsData?.quick_tab?.attribute || "");
-    // }
+    if (tabsApiData?.length) {
+      setSettingsData((prev) => ({
+        ...prev,
+        quick_tab: {
+          ...prev?.quick_tab,
+          hide_list: tabsApiData,
+          show_list: [],
+        },
+      }));
 
-    // setCurrentQuickAttribute(settingsData?.quick_tab?.attribute || "");
+      setCurrentQuickAttribute(settingsData?.quick_tab?.attribute || "");
+    } else {
+      setSettingsData((prev) => ({
+        ...prev,
+        quick_tab: {
+          ...prev?.quick_tab,
+          hide_list: [],
+          show_list: [],
+        },
+      }));
+    }
   }, [tabsApiData]);
 
   // Validation when user changes show list or hide list

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

@@ -15,7 +15,7 @@ interface TabDataProps {
 interface TableTabsProps {
   loading?: boolean;
   tabsData?: TabDataProps[];
-  activeTab?: string;
+  activeTab?: any;
   tableStates: CraftTableOptionsProps;
   onClick: (state: string) => void;
   columns?: any[];
@@ -72,22 +72,24 @@ export function TableTabs({
       {/* Tabs */}
       <Tabs
         value={selectedTab}
-        onChange={(_, newValue) => handleTabClick(newValue)}
+        onChange={(_, newValue) => {
+          handleTabClick(newValue);
+        }}
         variant="scrollable"
         scrollButtons="auto"
         slotProps={{ indicator: { sx: { display: "none" } } }}
         sx={tableTabsStyles.tabs}
       >
-        {normalizedTabs.map(({ tab_name, count }) => {
-          const isSelected = activeTab === tab_name;
+        {normalizedTabs.map((tab) => {
+          const isSelected = activeTab?.tab_name === tab?.tab_name;
 
           return (
             <Tab
-              key={tab_name}
-              value={tab_name}
+              key={tab?.tab_name}
+              value={tab}
               label={
                 <Box display="flex" alignItems="center" gap={1}>
-                  <Box>{tab_name}</Box>
+                  <Box>{tab?.tab_name}</Box>
                   <Box
                     sx={{
                       ...tableTabsStyles.tabCount,
@@ -100,7 +102,9 @@ export function TableTabs({
                       }),
                     }}
                   >
-                    {count == 0 ? "0" : String(count).padStart(2, "0")}
+                    {tab?.count == 0
+                      ? "0"
+                      : String(tab?.count).padStart(2, "0")}
                   </Box>
                 </Box>
               }

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

@@ -24,6 +24,7 @@ import {
   getOperationList,
   getLayoutAttributes,
   getAttributes,
+  getTableTabs,
 } from "../utils/apiColumn";
 import {
   FilterDataMainFilterEntityListProps,
@@ -401,6 +402,13 @@ export const useGetLayoutAttributes = ({
   return { layoutAttributes };
 };
 
+export const useGetTableTabs = (payload: any) => {
+  const { data: tableTabs, isLoading } = useQuery({
+    queryKey: ["tableTabs", payload],
+    queryFn: () => getTableTabs(payload),
+  });
+  return { tableTabs, isLoading };
+};
 // export const useGetSettingsColumnAttributes = (entity_type: string) => {
 //   // First query to get meta data
 //   const settingsColumnAttributes = useQuery({

package/src/listing/libs/services/getLayoutAPI.tsx

@@ -7,7 +7,7 @@ export const getLeadNavigationTabs = async (entity_type: string) => {
       type: "layout",
     };
 
-    const response = await api.get("/layout-preference", { params });
+    const response = await api.get("meta/layout-preference", { params });
 
     return response.data.mapped_json;
   } catch (error) {

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

@@ -141,7 +141,7 @@ export const saveSettingsData = async (payload: any) => {
 export const getSettingsData = async (entity_type: any) => {
   try {
     const response = await api.get(
-      `layout-preference?entity_type=${entity_type}`
+      `meta/layout-preference?entity_type=${entity_type}`
     );
     return response.data;
   } catch (error) {
@@ -156,7 +156,7 @@ export const viewSettingsDropDown = async ({
   sort_by,
 }: viewSettingsDropDownAPIProps): Promise<Array<string>> => {
   const response = await api.get(
-    `/layout-preference/column?entity_type=${entity_type}&column=${column}&sort_by=${sort_by}`
+    `meta/layout-preference/column?entity_type=${entity_type}&column=${column}&sort_by=${sort_by}`
   );
 
   return response.data;
@@ -164,7 +164,7 @@ export const viewSettingsDropDown = async ({
 
 export const getFilterEntityList = async (entity_type: string) => {
   const response = await api.get(
-    `/entity-relation/${entity_type}?include=true`
+    `meta/entity-relation/${entity_type}?include=true`
   );
 
   return response.data;
@@ -176,7 +176,7 @@ export const getFilterCriteriaByEntity = async (
   const params = { entity_type: selectedFilterEntity?.value };
 
   const response = await api.get(
-    `/attribute-master/getAttributes?direct=false&entity_type=${selectedFilterEntity?.value}`
+    `meta/attribute-master/getAttributes?direct=false&entity_type=${selectedFilterEntity?.value}`
   );
 
   return response.data;
@@ -198,7 +198,7 @@ export const getLayoutAttributes = async ({
     element_type,
   };
   const response = await api.post(
-    `/layout-preference/attributes`,
+    `meta/layout-preference/attributes`,
     { entity_type },
     { params }
   );
@@ -207,9 +207,14 @@ export const getLayoutAttributes = async ({
 
 export const getAttributes = async (entity_type: string) => {
   const response = await api.get(
-    `/attribute-master/getAttributes?direct=false&entity_type=${entity_type}`
+    `meta/attribute-master/getAttributes?direct=false&entity_type=${entity_type}`
   );
   console.log("resss", response);
 
   return response.data;
 };
+
+export const getTableTabs = async (payload: any) => {
+  const response = await api.post(`filter/get-tabs-data`, payload);
+  return response.data;
+};

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

@@ -78,7 +78,7 @@ export function customDebounce<T extends (...args: any[]) => any>(
 
 //ENTITY TYPE
 const ENVIRONMENT = "adm_dev";
-export const ENTITY_TYPE = "SCH";
+export const ENTITY_TYPE = "ROL";
 export const MAPPED_ENTITY_TYPE = "LYPR"; // LAP OR LYPR
 export const USER_ID = 226;
 

package/src/listing/types/common.ts

@@ -48,6 +48,7 @@ export interface EntityTableAPIProps {
     columnName: string;
     sortBy: "ASC" | "DSC";
     value?: string;
+    name?: string;
   };
   sortby?: {
     sortColum: string;

package/src/view/ListingView.tsx

@@ -12,6 +12,7 @@ import {
   useEntityTableAPI,
   useGetAttributes,
   useGetOperationList,
+  useGetTableTabs,
   useSaveSettingsDataAPI,
   useSettingsDropDownAPI,
 } from "../listing/libs/hooks/useEntityTableAPI";
@@ -39,7 +40,10 @@ function ListingView() {
   const [searchTerm, setSearchTerm] = useState("");
   //   const [data, setData] = useState<Person[]>(() => makeData(200, 3, 2));
 
-  const [selectedTab, setSelectedTab] = useState("All");
+  const [selectedTab, setSelectedTab] = useState({
+    tab_name: "All",
+    tab_value: "",
+  });
 
   const tableStates = useCraftTable();
   const filterSettingStates = useCraftTableFilterSettings();
@@ -66,9 +70,7 @@ function ListingView() {
   const isColumnDefault =
     filterSettingStates?.columnTabState?.isDefault || false;
   const activeTabIndex = filterSettingStates?.columnTabState?.tabs?.findIndex(
-    (tab) =>
-      tab?.tab_name?.value == selectedTab ||
-      tab?.tab_name?.label?.toLowerCase() == selectedTab?.toLowerCase()
+    (tab) => tab?.tab_name?.value == selectedTab?.tab_name
   );
   const settingsColumnState = (filterSettingStates?.settingsData?.column ||
     {}) as ColumnTabConfigProps;
@@ -84,6 +86,14 @@ function ListingView() {
       column: filterSettingStates?.quickTabStates?.attribute,
       sort_by: filterSettingStates?.quickTabStates?.sorting,
     });
+  const tabsPaylod = {
+    entity_type: ENTITY_TYPE,
+    defaultTabsConfig: {
+      attribute: "status",
+    },
+  };
+
+  const { tableTabs } = useGetTableTabs(tabsPaylod);
 
   const queryClient = useQueryClient();
   const { data: getSettingsAPIData } = useGetNavigationLayoutAPI(ENTITY_TYPE);
@@ -198,16 +208,22 @@ function ListingView() {
 
   //For server side sorting
   const enableServerSideSorting = true;
+  const tabsData = tableTabs?.data;
 
   const { tableData, isTableDataPending } = useEntityTableAPI({
     page: 0,
     size: 20,
     entity_type: ENTITY_TYPE,
     tabs: {
-      columnName: getSettingsAPIData?.quick_tab?.attribute || "lead_status",
+      columnName: getSettingsAPIData?.quick_tab?.attribute || "status",
       sortBy: getSettingsAPIData?.quick_tab?.sorting || "ASC",
       value:
-        selectedTab.toLowerCase() === "all" ? "" : selectedTab.toLowerCase(),
+        selectedTab?.tab_name?.toLowerCase() === "all"
+          ? tabsData?.find((tab) => tab?.tab_name?.toLowerCase() === "all")
+              .tab_value
+          : selectedTab?.tab_value,
+
+      name: selectedTab?.tab_name,
     },
     quickFilter: tableStates.filters,
     sortby: [
@@ -223,7 +239,6 @@ function ListingView() {
     () => tableData?.entity_list || [],
     [tableData?.entity_list]
   );
-  const tabsData = tableData?.entity_tabs;
 
   // Auto-switch tab if the selected tab is removed
   useEffect(() => {
@@ -231,7 +246,8 @@ function ListingView() {
       tabsData &&
       tabsData.length > 0 &&
       !tabsData.some(
-        (tab) => tab.tab_name?.toLowerCase() === selectedTab.toLowerCase()
+        (tab) =>
+          tab.tab_name?.toLowerCase() === selectedTab?.tab_name?.toLowerCase()
       )
     ) {
       // Try to select 'ALL' if it exists
@@ -239,17 +255,17 @@ function ListingView() {
         (tab) => tab.tab_name?.toLowerCase() === "all"
       );
       if (allTab) {
-        setSelectedTab(allTab.tab_name || "All");
+        setSelectedTab(allTab || "All");
       } else {
-        setSelectedTab(tabsData[0].tab_name || "All");
+        setSelectedTab(tabsData[0] || "All");
       }
     }
   }, [tabsData, selectedTab]);
 
   const totalCount = useMemo(() => {
     return Number(
-      tableData?.entity_tabs?.find((tab) => {
-        const activeTab = selectedTab || "All";
+      tabsData?.find((tab) => {
+        const activeTab = selectedTab?.tab_name || "All";
         return (
           tab.tab_name?.toLocaleLowerCase() === activeTab.toLocaleLowerCase()
         );