rez-table-listing-mui 1.3.61 → 1.3.64

package/src/view/ListingView.tsx

@@ -6,12 +6,18 @@ 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,
+  useGetTableTabs,
   useSaveSettingsDataAPI,
   useSettingsDropDownAPI,
 } from "../listing/libs/hooks/useEntityTableAPI";
@@ -39,7 +45,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();
@@ -50,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
@@ -62,13 +93,15 @@ function ListingView() {
   const { operationList } = useGetOperationList();
 
   const { attributes } = useGetAttributes(ENTITY_TYPE);
+  const { attributes: quickTabAttributes } = useGetAttributes(
+    ENTITY_TYPE,
+    "select"
+  );
 
   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;
@@ -78,91 +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 {
+    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(() => {
@@ -204,10 +166,15 @@ function ListingView() {
     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 +190,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 +197,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 +206,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()
         );
@@ -384,8 +351,8 @@ function ListingView() {
       mapped_json: data,
       type: "filter",
     };
-
     await saveLayoutAPI(payload);
+    queryClient.invalidateQueries({ queryKey: ["tableTabs"] });
   };
 
   const handleSaveSettingsData = (settingsData: SettingsDataProps) => {
@@ -537,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,
               }))}