rez-table-listing-mui 1.3.17 → 1.3.19

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

@@ -38,7 +38,7 @@ const Sorting = ({
     filterSettingStates;
 
   const [activeTab, setActiveTab] = useState<string | undefined>(
-    quickTabStates?.show_list?.[0]
+    quickTabStates?.show_list?.[0].value
   );
 
   const columnTabState = settingsData?.column as ColumnTabConfigProps;
@@ -55,64 +55,91 @@ const Sorting = ({
 
   const ERROR_CODE = "sorting_error";
 
+  // useEffect(() => {
+  //   const emptySortBy: SortingConfigSortByProps[] = [
+  //     { column: "", order: "asc" },
+  //   ];
+
+  //   if (isStateEmpty) {
+  //     setSettingsData((prev) => ({
+  //       ...prev,
+  //       sorting: {
+  //         isDefault: true,
+  //         sortby: emptySortBy,
+  //       },
+  //     }));
+  //   } else if (isEmptyDefault) {
+  //     setSettingsData((prev) => ({
+  //       ...prev,
+  //       sorting: {
+  //         ...prev.sorting,
+  //         isDefault: true,
+  //       },
+  //     }));
+
+  //     if (!sortingTabState?.isDefault) {
+  //       setSettingsData((prev) => ({
+  //         ...prev,
+  //         sorting: {
+  //           ...prev.sorting,
+  //           sortby: emptySortBy,
+  //         },
+  //       }));
+  //     }
+  //   }
+  // }, [
+  //   isStateEmpty,
+  //   isEmptyDefault,
+  //   sortingTabState,
+  //   quickTabStates,
+  //   setSettingsData,
+  // ]);
+
   useEffect(() => {
     const emptySortBy: SortingConfigSortByProps[] = [
       { column: "", order: "asc" },
     ];
 
-    if (isStateEmpty) {
+    // if sorting state is empty, initialize once
+    if (!sortingTabState || Object.keys(sortingTabState).length === 0) {
       setSettingsData((prev) => ({
         ...prev,
-        sorting: {
-          isDefault: true,
-          sortby: emptySortBy,
-        },
+        sorting: { isDefault: true, sortby: emptySortBy },
       }));
-    } else if (isEmptyDefault) {
+      return; // ✅ prevent further execution
+    }
+
+    // if sortby is missing or empty
+    if (!sortingTabState?.sortby || sortingTabState?.sortby.length === 0) {
       setSettingsData((prev) => ({
         ...prev,
         sorting: {
           ...prev.sorting,
+          sortby: emptySortBy,
           isDefault: true,
         },
       }));
-
-      if (!sortingTabState?.isDefault) {
-        setSettingsData((prev) => ({
-          ...prev,
-          sorting: {
-            ...prev.sorting,
-            sortby: emptySortBy,
-          },
-        }));
-      }
     }
-  }, [
-    isStateEmpty,
-    isEmptyDefault,
-    sortingTabState,
-    quickTabStates,
-    setSettingsData,
-  ]);
+  }, []);
 
   // sortingTabState.sortby is filtered based on columnTabState.show_list
-  useEffect(() => {
-    // filter sorting sortby based on column show list
-    if (columnTabState?.isDefault) {
-      setSettingsData((prev) => ({
-        ...prev,
-        sorting: {
-          ...prev.sorting,
-          // remove sortby items that are not in column show list
-          sortby: prev.sorting?.sortby?.filter((item) =>
-            columnTabState?.show_list?.some(
-              (columnItem) => columnItem.value === item.column
-            )
-          ),
-        },
-      }));
-    }
-  }, [columnTabState?.show_list]);
+  // useEffect(() => {
+  //   // filter sorting sortby based on column show list
+  //   if (columnTabState?.isDefault) {
+  //     setSettingsData((prev) => ({
+  //       ...prev,
+  //       sorting: {
+  //         ...prev.sorting,
+  //         // remove sortby items that are not in column show list
+  //         sortby: prev.sorting?.sortby?.filter((item) =>
+  //           columnTabState?.show_list?.some(
+  //             (columnItem) => columnItem.value === item.column
+  //           )
+  //         ),
+  //       },
+  //     }));
+  //   }
+  // }, [columnTabState?.show_list]);
 
   const sensors = useSensors(useSensor(PointerSensor));
 
@@ -231,14 +258,11 @@ const Sorting = ({
    * if both are equal then showAddSortButton is false
    */
   const showAddSortButton = useMemo(() => {
-    const stateLength =
-      columnTabState?.show_list?.length ??
-      columnsData?.column_list?.length ??
-      0;
+    const stateLength = columnsData?.length ?? 0;
     const sortLength = sortingTabState?.sortby?.length ?? 0;
 
     return sortLength !== stateLength;
-  }, [columnTabState, columnsData, sortingTabState]);
+  }, [columnsData, sortingTabState]);
 
   /**
    * ? What is happening here?
@@ -257,20 +281,13 @@ const Sorting = ({
   const getCurrentLists = () => {
     if (sortingTabState?.isDefault) {
       return {
-        showList:
-          columnTabState?.show_list ||
-          // if columns isDefault and show_list is empty, show all columns
-          columnsData?.column_list?.map((column) => ({
-            label: column.name,
-            value: column.attribute_key,
-          })) ||
-          [],
+        showList: columnsData || [],
         hideList: columnTabState?.hide_list || [],
       };
     } else {
       const currentTab = columnTabState?.tabs?.[activeTabIndex || 0];
       return {
-        showList: currentTab?.show_list || [],
+        showList: columnsData || [],
         hideList: currentTab?.hide_list || [],
       };
     }
@@ -297,7 +314,7 @@ const Sorting = ({
                 onChange={(_, tab) => setActiveTab(tab)}
               >
                 {quickTabStates?.show_list?.map((tab) => (
-                  <Tab key={tab} label={tab} value={tab} />
+                  <Tab key={tab?.value} label={tab?.label} value={tab?.value} />
                 ))}
               </CustomTabs>
             )}
@@ -327,18 +344,23 @@ const Sorting = ({
                         fullWidth
                       >
                         {showList
-                          ?.filter((column) => column.value != "action")
-                          .map((column, index) => (
-                            <MenuItem
-                              key={index}
-                              value={column.value}
-                              disabled={tabSortedList.some(
-                                (s) => s.column === column?.value
-                              )}
-                            >
-                              {column?.label}
-                            </MenuItem>
-                          ))}
+                          // ?.filter((column) => column.value != "action")
+                          .map(
+                            (
+                              column: { label: string; value: string },
+                              index: number
+                            ) => (
+                              <MenuItem
+                                key={index}
+                                value={column.value}
+                                disabled={tabSortedList.some(
+                                  (s) => s.column === column?.value
+                                )}
+                              >
+                                {column?.label}
+                              </MenuItem>
+                            )
+                          )}
                       </Select>
                       <Select
                         value={sort.order}

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

@@ -30,6 +30,10 @@ export function QuickFilterSettings({
   onClose,
   columnsData,
   columnsDataLoading,
+  quickTabAttributes,
+  quickTabAttributesLoading,
+  sortingTabAttributes,
+  sortingTabAttributesLoading,
   tabsApiData,
   tabsApiDataLoading,
   onSaveSettingsData,
@@ -125,7 +129,7 @@ export function QuickFilterSettings({
                   {tabValue === 0 && (
                     <QuickTab
                       filterSettingStates={filterSettingStates}
-                      columnsData={columnsData}
+                      columnsData={quickTabAttributes}
                       tabsApiData={tabsApiData}
                       tabsApiDataLoading={tabsApiDataLoading}
                     />
@@ -149,7 +153,7 @@ export function QuickFilterSettings({
                   {tabValue === 2 && (
                     <Sorting
                       filterSettingStates={filterSettingStates}
-                      columnsData={columnsData}
+                      columnsData={sortingTabAttributes}
                     />
                   )}
                 </CustomTabPanel>

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

@@ -22,6 +22,7 @@ import {
   updateSavedFilter,
   viewSettingsDropDown,
   getOperationList,
+  getLayoutAttributes,
 } from "../utils/apiColumn";
 import {
   FilterDataMainFilterEntityListProps,
@@ -99,7 +100,7 @@ export const useEntityTableAPI = ({
     queryKey: ["entityTable", page, size, tabs, quickFilter],
     queryFn: () =>
       entityListingCall({
-        page,
+        page: page + 1,
         size,
         entity_type,
         tabs,
@@ -366,3 +367,23 @@ export const useGetOperationList = () => {
 
   return { operationList };
 };
+
+export const useGetLayoutAttributes = ({
+  entity_type,
+  data_type,
+}: {
+  entity_type: string;
+  data_type?: string;
+}) => {
+  // First query to get meta data
+  const layoutAttributes = useQuery({
+    queryKey: ["layoutAttributes", entity_type, data_type],
+    queryFn: () =>
+      getLayoutAttributes({
+        entity_type,
+        data_type,
+      }),
+  });
+
+  return { layoutAttributes };
+};

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

@@ -4,7 +4,7 @@ export const getLeadNavigationTabs = async (entity_type: string) => {
   try {
     const params = {
       entity_type: entity_type,
-      type: "filter",
+      type: "layout",
     };
 
     const response = await api.get("/layout-preference", { params });

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

@@ -190,3 +190,21 @@ export const getOperationList = async () => {
   const response = await api.post(`/meta/operation-list`);
   return response.data;
 };
+
+export const getLayoutAttributes = async ({
+  entity_type,
+  data_type,
+}: {
+  entity_type: string;
+  data_type?: string;
+}) => {
+  const params = {
+    data_type,
+  };
+  const response = await api.post(
+    `/layout-preference/attributes`,
+    { entity_type },
+    { params }
+  );
+  return response.data;
+};

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

@@ -77,14 +77,14 @@ export function customDebounce<T extends (...args: any[]) => any>(
 }
 
 //ENTITY TYPE
-const ENVIRONMENT = "crm_dev";
+const ENVIRONMENT = "uat";
 export const ENTITY_TYPE = "LEAD";
 export const MAPPED_ENTITY_TYPE = "LYPR"; // LAP OR LYPR
 
 const environments = {
   adm_dev: "http://localhost:4010/api",
   crm_dev: "http://localhost:4011/api",
-  uat: "http://13.200.182.92:4010/api",
+  uat: "https://api.eth-qa.rezolut.in/api/enrol",
 };
 
 const getBaseUrl = () => environments[ENVIRONMENT];

package/src/listing/types/filter-settings.ts

@@ -7,8 +7,12 @@ export interface QuickFilterModalProps {
   filterSettingStates: craftTableFilterSettingsOptionsProps;
   onClose?: () => void;
   columnsData: FilterColumnsDataProps;
-  columnsDataLoading: boolean;
-  tabsApiData?: string[];
+  columnsDataLoading?: boolean;
+  quickTabAttributes?: any[];
+  quickTabAttributesLoading?: boolean;
+  sortingTabAttributes?: any[];
+  sortingTabAttributesLoading?: boolean;
+  tabsApiData?: { label: string; value: string }[];
   tabsApiDataLoading?: boolean;
   onSaveSettingsData?: (data: any) => void;
 }
@@ -26,8 +30,8 @@ export type QuickTabSortingType =
 export interface QuickTabConfigProps {
   attribute?: string;
   sorting?: QuickTabSortingType;
-  hide_list?: string[];
-  show_list?: string[];
+  hide_list?: { label: string; value: string }[];
+  show_list?: { label: string; value: string }[];
   isAllSelected?: boolean;
   isCombineOther?: boolean;
 }
@@ -75,22 +79,22 @@ export interface TabWiseConfigProps {
 
 export interface SettingsSortingProps {
   filterSettingStates: craftTableFilterSettingsOptionsProps;
-  columnsData: FilterColumnsDataProps;
+  columnsData: any;
 }
 
 export interface SettingsQuickTabStateProps {
   attribute?: string;
   sorting?: string;
-  hide_list: string[];
-  show_list: string[];
+  hide_list: { label: string; value: string }[];
+  show_list: { label: string; value: string }[];
   isAllSelected?: boolean;
   isCombineOther?: boolean;
 }
 
 export interface SettingsQuickTabProps {
   filterSettingStates: craftTableFilterSettingsOptionsProps;
-  columnsData: FilterColumnsDataProps;
-  tabsApiData?: string[];
+  columnsData: any;
+  tabsApiData?: { label: string; value: string }[];
   tabsApiDataLoading?: boolean;
 }
 

package/src/view/KanbanView.tsx

@@ -18,7 +18,7 @@ const KanbanView = () => {
   const tableStates = useCraftTable();
   const { tableData } = useEntityTableAPI({
     page: 0,
-    size: 50,
+    size: 20,
     entity_type: ENTITY_TYPE,
     tabs: {
       columnName:

package/src/view/ListingView.tsx

@@ -10,6 +10,7 @@ import { ENTITY_TYPE, MAPPED_ENTITY_TYPE } from "../listing/libs/utils/common";
 import {
   useCommonFilterDropdownAPI,
   useEntityTableAPI,
+  useGetLayoutAttributes,
   useGetOperationList,
   useGetSettingsDataAPI,
   useSaveSettingsDataAPI,
@@ -24,6 +25,9 @@ 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";
+import { useGetNavigationLayoutAPI } from "../listing/libs/hooks/useGetNavigationLayoutAPI";
+import { useQueryClient } from "@tanstack/react-query";
+import { Box, CircularProgress, Typography } from "@mui/material";
 
 function ListingView() {
   // const [mockLoading, setMockLoading] = useState<boolean>(true);
@@ -53,6 +57,15 @@ function ListingView() {
   const { saveSettingsDataMutation } = useSaveSettingsDataAPI(ENTITY_TYPE);
   const { operationList } = useGetOperationList();
 
+  const { layoutAttributes: quickTabAttributes } = useGetLayoutAttributes({
+    entity_type: ENTITY_TYPE,
+    data_type: "select",
+  });
+
+  const { layoutAttributes: sortingTabAttributes } = useGetLayoutAttributes({
+    entity_type: ENTITY_TYPE,
+  });
+
   // const { dropdownData } = useCommonDropdownAPI(
   //   dropdownColumnList || metaQuery.data.column_list
   // );
@@ -65,7 +78,8 @@ function ListingView() {
       sort_by: filterSettingStates?.quickTabStates?.sorting,
     });
 
-  const { getSettingsAPIData } = useGetSettingsDataAPI(ENTITY_TYPE);
+  const queryClient = useQueryClient();
+  const { data: getSettingsAPIData } = useGetNavigationLayoutAPI(ENTITY_TYPE);
 
   useEffect(() => {
     // setTimeout(() => {
@@ -162,20 +176,19 @@ function ListingView() {
   }, [detailsQuery.data]);
 
   useEffect(() => {
-    setSettingsData(getSettingsAPIData?.layout_json);
+    setSettingsData(getSettingsAPIData);
   }, [getSettingsAPIData]);
 
   //For server side sorting
   const enableServerSideSorting = true;
 
-  const { tableData } = useEntityTableAPI({
+  const { tableData, isTableDataPending } = useEntityTableAPI({
     page: 0,
-    size: 50,
+    size: 20,
     entity_type: ENTITY_TYPE,
     tabs: {
-      columnName:
-        getSettingsAPIData?.layout_json?.quick_tab?.attribute || "status",
-      sortBy: getSettingsAPIData?.layout_json?.quick_tab?.sorting || "ASC",
+      columnName: getSettingsAPIData?.quick_tab?.attribute || "lead_status",
+      sortBy: getSettingsAPIData?.quick_tab?.sorting || "ASC",
       value:
         selectedTab.toLowerCase() === "all" ? "" : selectedTab.toLowerCase(),
     },
@@ -267,7 +280,7 @@ function ListingView() {
       entity_type: MAPPED_ENTITY_TYPE,
       mapped_entity_type: ENTITY_TYPE,
       mapped_json: data,
-      type: "filter",
+      type: "layout",
     };
 
     await saveLayoutAPI(payload);
@@ -277,13 +290,40 @@ function ListingView() {
     const payload = {
       entity_type: MAPPED_ENTITY_TYPE,
       mapped_entity_type: ENTITY_TYPE,
-      layout_json: settingsData,
+      mapped_json: settingsData,
+      type: "layout",
     };
 
-    saveSettingsDataMutation.mutate({ payload });
+    saveSettingsDataMutation.mutate(
+      { payload },
+      {
+        onSuccess: () => {
+          queryClient.invalidateQueries({
+            queryKey: ["GET_NAVIGATION_LAYOUT", ENTITY_TYPE],
+          });
+        },
+      }
+    );
   };
 
-  return (
+  return isTableDataPending ? (
+    <Box
+      sx={{
+        // full viewport height
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: 2,
+        bgcolor: "background.default",
+      }}
+    >
+      <CircularProgress size={60} thickness={5} color="primary" />
+      <Typography variant="body1" color="text.secondary">
+        Loading, please wait...
+      </Typography>
+    </Box>
+  ) : (
     <TableWrapper
       data={filteredData}
       columns={columns && columns.length > 0 ? columns : defaultColumns}
@@ -388,6 +428,10 @@ function ListingView() {
               onClose={() => setShowListViewSettings(false)}
               columnsData={metaQuery.data || {}}
               columnsDataLoading={metaQuery.isPending}
+              quickTabAttributes={quickTabAttributes?.data}
+              quickTabAttributesLoading={quickTabAttributes?.isLoading}
+              sortingTabAttributes={sortingTabAttributes?.data}
+              sortingTabAttributesLoading={sortingTabAttributes?.isLoading}
               tabsApiData={settingsTabDropdownData || []}
               tabsApiDataLoading={settingsTabDropdownPending}
               onSaveSettingsData={handleSaveSettingsData}