rez-table-listing-mui 1.3.44 → 1.3.45

package/src/view/ListingView.tsx

@@ -10,14 +10,20 @@ import { ENTITY_TYPE, MAPPED_ENTITY_TYPE } from "../listing/libs/utils/common";
 import {
   useCommonFilterDropdownAPI,
   useEntityTableAPI,
+  useGetFilterEntityListAndCriteria,
   useGetLayoutAttributes,
   useGetOperationList,
+  useGetSettingsColumnAttributes,
+  useGetSettingsDataAPI,
   useSaveSettingsDataAPI,
   useSettingsDropDownAPI,
 } from "../listing/libs/hooks/useEntityTableAPI";
 import { entityTableMetaMaster } from "../listing/libs/utils/apiColumn";
 import { ColumnDef } from "@tanstack/react-table";
-import { SettingsDataProps } from "../listing/types/filter-settings";
+import {
+  ColumnTabConfigProps,
+  SettingsDataProps,
+} from "../listing/types/filter-settings";
 import TableWrapper from "../listing/components/index-table";
 import { TableTabs } from "../listing/components/tabs";
 import { QuickFilterSettings } from "../listing/components/table-settings";
@@ -27,6 +33,7 @@ import { hydrateSavedFilters } from "../listing/libs/utils/hydrate-saved-filters
 import { useGetNavigationLayoutAPI } from "../listing/libs/hooks/useGetNavigationLayoutAPI";
 import { useQueryClient } from "@tanstack/react-query";
 import { Box, CircularProgress, Typography } from "@mui/material";
+import { ColumnItem } from "../listing/components/table-settings/components/column";
 
 function ListingView() {
   // const [mockLoading, setMockLoading] = useState<boolean>(true);
@@ -54,16 +61,27 @@ function ListingView() {
       : metaQuery?.data?.default_filter?.value
   );
   const { saveSettingsDataMutation } = useSaveSettingsDataAPI(ENTITY_TYPE);
+  const { settingsColumnAttributes } =
+    useGetSettingsColumnAttributes(ENTITY_TYPE);
   const { operationList } = useGetOperationList();
 
   const { layoutAttributes: quickTabAttributes } = useGetLayoutAttributes({
     entity_type: ENTITY_TYPE,
-    element_type: "select",
+    data_type: "select",
   });
 
   const { layoutAttributes: sortingTabAttributes } = useGetLayoutAttributes({
     entity_type: ENTITY_TYPE,
   });
+  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()
+  );
+  const settingsColumnState = (filterSettingStates?.settingsData?.column ||
+    {}) as ColumnTabConfigProps;
 
   // const { dropdownData } = useCommonDropdownAPI(
   //   dropdownColumnList || metaQuery.data.column_list
@@ -80,77 +98,84 @@ function ListingView() {
   const queryClient = useQueryClient();
   const { data: getSettingsAPIData } = useGetNavigationLayoutAPI(ENTITY_TYPE);
 
-  useEffect(() => {
-    // setTimeout(() => {
-    //   setMockLoading(false);
-    // }, 1000);
-
-    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
-          return 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
-        };
-
-        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.toLowerCase() === selectedTab.toLowerCase()
-          );
+  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;
+      };
+
+      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
+        if (activeTabSettings?.show_list) {
           const visibleColumns = new Set(
-            savedColumnSettings.show_list.map((c) => c.value)
+            activeTabSettings.show_list.map((c) => c.value)
           );
-          const filtered = allColumns.filter((col: any) =>
+
+          // First, filter columns based on visibleColumns
+          const filteredColumns = allColumns.filter((col: any) =>
             visibleColumns.has(col?.accessorKey)
           );
-
           setColumns(
-            getOrderedColumns(savedColumnSettings.show_list, filtered)
+            getOrderedColumns(activeTabSettings.show_list, filteredColumns)
           );
         } else {
-          // No settings found, use all columns
+          // Fallback if no specific settings for the active tab are found
           setColumns(allColumns);
         }
-      } catch (error) {
-        console.error("Failed to fetch metadata:", error);
+      } 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);
+    }
+  };
+
+  useEffect(() => {
+    // setTimeout(() => {
+    //   setMockLoading(false);
+    // }, 1000);
 
     fetchMeta();
   }, [selectedTab]);
@@ -239,6 +264,91 @@ function ListingView() {
     );
   }, [tableData, selectedTab]);
 
+  const moveColumn = (
+    columnId: string,
+    showList: ColumnItem[],
+    hideList: ColumnItem[]
+  ) => {
+    const itemToMove = showList.find((c) => c.value === columnId);
+
+    return {
+      newShow: showList.filter((c) => c.value !== columnId),
+      newHide: itemToMove
+        ? [...hideList.filter((c) => c.value !== columnId), itemToMove]
+        : hideList,
+    };
+  };
+
+  const handleSaveSettings = (columnId: string) => {
+    let settingsData = filterSettingStates.settingsData;
+
+    const columnData = settingsData.column;
+    const defaultMode = isColumnDefault;
+
+    if (defaultMode) {
+      // Move for default mode
+      const { newShow, newHide } = moveColumn(
+        columnId,
+        columnData.show_list as ColumnItem[],
+        columnData.hide_list as ColumnItem[]
+      );
+
+      settingsData = {
+        ...settingsData,
+        column: {
+          ...columnData,
+          show_list: newShow,
+          hide_list: newHide,
+        },
+      };
+    } else {
+      // Move inside specific TAB
+      const updatedTabs = [...settingsColumnState?.tabs];
+      const tab = updatedTabs[activeTabIndex];
+
+      const { newShow, newHide } = moveColumn(
+        columnId,
+        tab.show_list,
+        tab.hide_list
+      );
+
+      updatedTabs[activeTabIndex] = {
+        ...tab,
+        show_list: newShow,
+        hide_list: newHide,
+      };
+
+      settingsData = {
+        ...settingsData,
+        column: {
+          ...columnData,
+          tabs: updatedTabs,
+        },
+      };
+    }
+
+    setSettingsData(settingsData);
+
+    saveSettingsDataMutation.mutate(
+      {
+        payload: {
+          entity_type: MAPPED_ENTITY_TYPE,
+          mapped_entity_type: ENTITY_TYPE,
+          mapped_json: settingsData,
+          type: "layout",
+        },
+      },
+      {
+        onSuccess: () => {
+          queryClient.invalidateQueries({
+            queryKey: ["GET_NAVIGATION_LAYOUT", ENTITY_TYPE],
+          });
+          fetchMeta();
+        },
+      }
+    );
+  };
+
   const handleRenderStatus = ({ value }: any) => {
     const statusValue = value?.toUpperCase();
     return (
@@ -279,7 +389,7 @@ function ListingView() {
       entity_type: MAPPED_ENTITY_TYPE,
       mapped_entity_type: ENTITY_TYPE,
       mapped_json: data,
-      type: "layout",
+      type: "filter",
     };
 
     await saveLayoutAPI(payload);
@@ -325,8 +435,11 @@ function ListingView() {
   ) : (
     <TableWrapper
       data={filteredData}
+      activeTab={selectedTab}
       columns={columns && columns.length > 0 ? columns : defaultColumns}
       tableStates={tableStates}
+      filterSettingStates={filterSettingStates}
+      onSaveSettings={handleSaveSettings}
       featureOptions={{
         striped: true,
         compactTable: false,
@@ -429,11 +542,14 @@ function ListingView() {
               columnsDataLoading={metaQuery.isPending}
               quickTabAttributes={quickTabAttributes?.data}
               quickTabAttributesLoading={quickTabAttributes?.isLoading}
+              columnTabAttributes={settingsColumnAttributes?.data}
+              columnAttributesLoading={settingsColumnAttributes?.isLoading}
               sortingTabAttributes={sortingTabAttributes?.data}
               sortingTabAttributesLoading={sortingTabAttributes?.isLoading}
               tabsApiData={settingsTabDropdownData || []}
               tabsApiDataLoading={settingsTabDropdownPending}
               onSaveSettingsData={handleSaveSettingsData}
+              activeTab={selectedTab}
             />
           </>
         ),