rez-table-listing-mui 1.3.57 → 1.3.58

package/package.json

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

package/src/listing/components/filter/components/attributes-filter.tsx

@@ -76,7 +76,7 @@ const AttributesFilter = ({
     } else {
       // Else, replace with new single selection
       const defaultOperator =
-        columnsData?.operation_list[matchingColumn.element_type]?.[0]?.value ||
+        columnsData?.operation_list[matchingColumn.data_type]?.[0]?.value ||
         "in";
 
       const newFilter = {
@@ -173,7 +173,7 @@ const AttributesFilter = ({
           }}
         >
           {columnsData?.column_list
-            ?.filter((column) => column.element_type.includes("select"))
+            ?.filter((column) => column.data_type.includes("select"))
             .map((column, index) => (
               <MenuItem
                 key={index}

package/src/listing/components/filter/components/forms/components/Filter-criteria.tsx

@@ -62,15 +62,14 @@ const FilterCriteria = ({
   const handleAddFilter = (
     attribute: FilterDataMainFilterEntityWiseCriteriaProps
   ) => {
-    const dropdownOptions =
-      columnsData?.operation_list[attribute?.element_type];
+    const dropdownOptions = columnsData?.operation_list[attribute?.data_type];
 
-    const defaultValue = attribute.element_type === "multiselect" ? [] : "";
+    const defaultValue = attribute.data_type === "multiselect" ? [] : "";
 
     const defaultOperator = dropdownOptions?.[0]?.value || "";
 
     const matchingDropdownList =
-      columnsData?.operation_list[attribute.element_type] || [];
+      columnsData?.operation_list[attribute.data_type] || [];
 
     const newFilter = {
       filter_attribute: attribute.attribute_key,
@@ -84,7 +83,7 @@ const FilterCriteria = ({
       // id: attribute?.id,
       filter_attribute_name: attribute?.name,
       filter_attribute_data_type:
-        attribute?.element_type || attribute?.element_type,
+        attribute?.data_type || attribute?.element_type,
       datasource_list: attribute?.datasource_list,
       dropdown_list: matchingDropdownList,
       filter_entity_name: selectedFilterEntity?.label,

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

@@ -8,51 +8,65 @@ const LoginButton = () => {
   const handleLogin = async () => {
     setLoading(true);
     // const api_url = "https://api.eth-qa.rezolut.in/api/enrol/auth";
-    const api_url = "http://localhost:6010/api/auth";
-    const email_id = "admin@rezolut.in";
+    const api_url = "http://localhost:4011/api/auth";
+    const email_id = "shraddha.nandurkar@rezolut.in";
     const email_otp = "123456";
     const sub_domain = "universal";
 
     setLoading(true);
 
     await axios
-      .post(`${api_url}/sso/otp/generate`, {
-        identifier: email_id,
-        service: "email",
+      .post(`${api_url}/sso/check-email`, {
+        email_id: email_id,
+        subdomain: sub_domain,
       })
-      .then(async (otpAPIResponse) => {
+      .then(async (emailAPIResponse) => {
         await axios
-          .post(`${api_url}/verify-otp`, {
+          .post(`${api_url}/sso/otp/generate`, {
             identifier: email_id,
             service: "email",
-            reset: true,
-            otp: "123456",
-            otp_id: otpAPIResponse.data.otp_id,
-            fcm_token: "",
-            subdomain: "platform",
           })
-          .then((otpVerifyResponse) => {
-            const token = otpVerifyResponse.data.accessToken;
+          .then(async (otpAPIResponse) => {
+            await axios
+              .post(`${api_url}/verify-otp`, {
+                fcm_token: "",
+                identifier: email_id,
+                otp: email_otp,
+                otp_id: otpAPIResponse.data.otp_id,
+                reset: true,
+                service: "email",
+                subdomain: "universal",
+              })
+              .then((otpVerifyResponse) => {
+                const token = otpVerifyResponse.data.accessToken;
 
-            if (token) {
-              localStorage.setItem("authToken", token);
-              alert("Login successful");
-              window.location.reload(); // reload app to re-trigger axios with token
-            } else {
-              alert("Token not found in response.");
-            }
+                if (token) {
+                  localStorage.setItem("authToken", token);
+                  alert("Login successful");
+                  window.location.reload(); // reload app to re-trigger axios with token
+                } else {
+                  alert("Token not found in response.");
+                }
+              })
+              .catch((error) => {
+                console.error("Login failed:", error);
+                alert("Login failed. Check console for details.");
+              })
+              .finally(() => {
+                setLoading(false);
+              });
           })
           .catch((error) => {
-            console.error("OTP verification failed:", error);
-            alert("OTP verification failed. Check console for details.");
+            console.error("Login failed:", error);
+            alert("Login failed. Check console for details.");
           })
           .finally(() => {
             setLoading(false);
           });
       })
       .catch((error) => {
-        console.error("OTP generation failed:", error);
-        alert("OTP generation failed. Check console for details.");
+        console.error("Login failed:", error);
+        alert("Login failed. Check console for details.");
       })
       .finally(() => {
         setLoading(false);

package/src/listing/components/table-body.tsx

@@ -15,7 +15,10 @@ import {
   horizontalListSortingStrategy,
   SortableContext,
 } from "@dnd-kit/sortable";
-import { getColumnPinningStylesBody } from "../libs/utils/common";
+import {
+  getColumnPinningStylesBody,
+  getDepthBackground,
+} from "../libs/utils/common";
 import Checkbox from "./inputs/checkbox";
 
 interface TableBodyProps<T> {
@@ -39,7 +42,13 @@ function TableBody<T>({
 
   const renderRow = (row: Row<T>) => {
     const renderedRow = (
-      <tr key={row.id} className="ts__body__tr">
+      <tr
+        key={row.id}
+        className="ts__body__tr"
+        style={{
+          backgroundColor: getDepthBackground(row.depth),
+        }}
+      >
         {enableRowSelection && (
           <td
             className="ts__body__td ts__body__checkbox"
@@ -47,6 +56,7 @@ function TableBody<T>({
               position: "sticky",
               left: 0,
               width: "50px",
+              backgroundColor: "inherit",
             }}
           >
             <Checkbox
@@ -66,10 +76,12 @@ function TableBody<T>({
               width: cell.column.getSize(),
               ...((wrapColumns.all_wrap || wrapColumns[cell.column.id]) && {
                 wordBreak: "break-all",
+                backgroundColor: "inherit",
                 // whiteSpace: "normal",
               }),
             } as React.CSSProperties,
             align: (cell.column.columnDef.meta as align)?.align || "left",
+            // backgroundColor: getDepthBackground(row.depth),
           };
 
           return enableColumnReordering ? (

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

@@ -326,21 +326,13 @@ const Sorting = ({
   const getCurrentLists = () => {
     if (sortingTabState?.isDefault) {
       return {
-        showList:
-          columnsData?.map((column: any) => ({
-            label: column?.name,
-            value: column?.attribute_key,
-          })) || [],
+        showList: columnsData || [],
         hideList: columnTabState?.hide_list || [],
       };
     } else {
       const currentTab = sortingTabState?.tabs?.[activeTabIndex || 0];
       return {
-        showList:
-          columnsData?.map((column: any) => ({
-            label: column?.name,
-            value: column?.attribute_key,
-          })) || [],
+        showList: columnsData || [],
         // hideList: currentTab?.hide_list || [],
       };
     }

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

@@ -54,11 +54,11 @@ export function QuickFilterSettings({
 
   const hasAPIData = Boolean(Object.entries(columnsData).length);
   let disbaledCondition =
-    // quickTabStates?.show_list?.length === 0 ||      --> commented as per the requirement
-    columnTabState?.isDefault
+    quickTabStates?.show_list?.length === 0 ||
+    (columnTabState?.isDefault
       ? columnTabState?.show_list?.length === 0
       : columnTabState?.tabs?.find((tab) => tab?.show_list?.length === 0)
-          ?.show_list?.length === 0;
+          ?.show_list?.length === 0);
 
   const handleTabChange = (_: React.SyntheticEvent, newValue: number) => {
     setTabValue(newValue);

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

@@ -23,7 +23,7 @@ import {
   viewSettingsDropDown,
   getOperationList,
   getLayoutAttributes,
-  getAttributes,
+  getSettingsColumnAttributes,
 } from "../utils/apiColumn";
 import {
   FilterDataMainFilterEntityListProps,
@@ -59,7 +59,7 @@ const entityListingCall = async ({
   responseStatus: number;
   data: EntityListingResponse;
 }> => {
-  const url = `filter/adm`;
+  const url = `filter`;
 
   const body = {
     entity_type,
@@ -113,7 +113,7 @@ export const useEntityTableAPI = ({
   });
 
   return {
-    tableData: data?.data,
+    tableData: data?.data.data,
     status: data?.responseStatus,
     isTableDataPending,
   };
@@ -356,21 +356,13 @@ export const useGetFilterEntityListAndCriteria = ({
 
   const filterEntityWiseCriteria = useQuery({
     queryKey: ["filterEntityWiseCriteria", selectedFilterEntity],
-    queryFn: () => getAttributes(selectedFilterEntity?.value as string),
+    queryFn: () => getFilterCriteriaByEntity(selectedFilterEntity),
     enabled: !!selectedFilterEntity,
   });
 
   return { filterEntityList, filterEntityWiseCriteria };
 };
 
-export const useGetAttributes = (entity_type: string) => {
-  const attributes = useQuery({
-    queryKey: ["attributes", entity_type],
-    queryFn: () => getAttributes(entity_type),
-  });
-
-  return { attributes };
-};
 export const useGetOperationList = () => {
   // First query to get meta data
   const operationList = useQuery({
@@ -383,30 +375,30 @@ export const useGetOperationList = () => {
 
 export const useGetLayoutAttributes = ({
   entity_type,
-  element_type,
+  data_type,
 }: {
   entity_type: string;
-  element_type?: string;
+  data_type?: string;
 }) => {
   // First query to get meta data
   const layoutAttributes = useQuery({
-    queryKey: ["layoutAttributes", entity_type, element_type],
+    queryKey: ["layoutAttributes", entity_type, data_type],
     queryFn: () =>
       getLayoutAttributes({
         entity_type,
-        element_type,
+        data_type,
       }),
   });
 
   return { layoutAttributes };
 };
 
-// export const useGetSettingsColumnAttributes = (entity_type: string) => {
-//   // First query to get meta data
-//   const settingsColumnAttributes = useQuery({
-//     queryKey: ["settingsColumnAttributes", entity_type],
-//     queryFn: () => getAttributes(entity_type),
-//   });
+export const useGetSettingsColumnAttributes = (entity_type: string) => {
+  // First query to get meta data
+  const settingsColumnAttributes = useQuery({
+    queryKey: ["settingsColumnAttributes", entity_type],
+    queryFn: () => getSettingsColumnAttributes(entity_type),
+  });
 
-//   return { settingsColumnAttributes };
-// };
+  return { settingsColumnAttributes };
+};

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

@@ -175,8 +175,12 @@ export const getFilterCriteriaByEntity = async (
 ) => {
   const params = { entity_type: selectedFilterEntity?.value };
 
-  const response = await api.get(
-    `/attribute-master/getAttributes?direct=false&entity_type=${selectedFilterEntity?.value}`
+  const response = await api.post(
+    `meta/get-filter-data`,
+    {},
+    {
+      params,
+    }
   );
 
   return response.data;
@@ -189,13 +193,13 @@ export const getOperationList = async () => {
 
 export const getLayoutAttributes = async ({
   entity_type,
-  element_type,
+  data_type,
 }: {
   entity_type: string;
-  element_type?: string;
+  data_type?: string;
 }) => {
   const params = {
-    element_type,
+    data_type,
   };
   const response = await api.post(
     `/layout-preference/attributes`,
@@ -205,11 +209,7 @@ export const getLayoutAttributes = async ({
   return response.data;
 };
 
-export const getAttributes = async (entity_type: string) => {
-  const response = await api.get(
-    `/attribute-master/getAttributes?direct=false&entity_type=${entity_type}`
-  );
-  console.log("resss", response);
-
+export const getSettingsColumnAttributes = async (entity_type: string) => {
+  const response = await api.get(`/attribute-master/getAll/${entity_type}`);
   return response.data;
 };

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

@@ -76,14 +76,20 @@ export function customDebounce<T extends (...args: any[]) => any>(
   };
 }
 
+export const getDepthBackground = (depth: number) => {
+  if (depth === 0) return "white";
+  const shade = 255 - depth * 8; // reduce brightness per level
+  return `rgb(${shade}, ${shade}, ${shade})`;
+};
+
 //ENTITY TYPE
-const ENVIRONMENT = "adm_dev";
-export const ENTITY_TYPE = "SCH";
+const ENVIRONMENT = "crm_dev";
+export const ENTITY_TYPE = "LEAD";
 export const MAPPED_ENTITY_TYPE = "LYPR"; // LAP OR LYPR
 export const USER_ID = 226;
 
 const environments = {
-  adm_dev: "http://localhost:6010/api",
+  adm_dev: "http://localhost:4010/api",
   crm_dev: "http://localhost:4011/api",
   uat: "https://api.eth-qa.rezolut.in/api/enrol",
 };

package/src/listing/types/filter.ts

@@ -80,7 +80,7 @@ export interface FilterColumnsListProps {
   searchable: string | null;
   attribute_key: string;
   sort_type: string | null;
-  element_type: FilterInputDataTypes;
+  data_type: FilterInputDataTypes;
   data_source_type: string | null;
   datasource_list: any | null;
   visible: string;
@@ -356,7 +356,7 @@ export interface FilterDataMainFilterEntityWiseCriteriaProps {
   attribute_key: string;
   element_type: FilterInputDataTypes;
   datasource_list: any;
-  element_type: FilterInputDataTypes;
+  data_type: FilterInputDataTypes;
 }
 
 export interface FilterDataProps {

package/src/testing-grounds/filter-in-modal/saved-filter-modal.tsx

@@ -48,6 +48,7 @@ const SavedFilterModal = ({
       entity_type: ENTITY_TYPE,
       selectedFilterEntity,
     });
+
   useEffect(() => {
     const data: any = filterEntityList?.data;
 
@@ -64,7 +65,7 @@ const SavedFilterModal = ({
   }, [filterEntityList?.data, filterEntityList?.isPending]);
 
   useEffect(() => {
-    const data = filterEntityWiseCriteria?.data;
+    const data = filterEntityWiseCriteria?.data?.data?.attribute_list;
 
     setFilterData((prev: any) => ({
       ...prev,

package/src/view/FIlterWrapper.tsx

@@ -4,7 +4,6 @@ import { useGetNavigationLayoutAPI } from "../listing/libs/hooks/useGetNavigatio
 import { ENTITY_TYPE } from "../listing/libs/utils/common";
 import {
   useDeleteFilterAPI,
-  useGetAttributes,
   useGetFilterEntityListAndCriteria,
   useSavedFilterAPI,
   useUpdateFilterAPI,
@@ -71,7 +70,7 @@ const CraftTableFilterWrapper = ({
   }, [filterEntityList?.data, filterEntityList?.isPending]);
 
   useEffect(() => {
-    const data = filterEntityWiseCriteria?.data;
+    const data = filterEntityWiseCriteria?.data?.data?.attribute_list;
 
     setFilterData((prev: any) => ({
       ...prev,

package/src/view/ListingView.tsx

@@ -10,8 +10,11 @@ import { ENTITY_TYPE, MAPPED_ENTITY_TYPE } from "../listing/libs/utils/common";
 import {
   useCommonFilterDropdownAPI,
   useEntityTableAPI,
-  useGetAttributes,
+  useGetFilterEntityListAndCriteria,
+  useGetLayoutAttributes,
   useGetOperationList,
+  useGetSettingsColumnAttributes,
+  useGetSettingsDataAPI,
   useSaveSettingsDataAPI,
   useSettingsDropDownAPI,
 } from "../listing/libs/hooks/useEntityTableAPI";
@@ -52,17 +55,24 @@ function ListingView() {
   const { defaultColumns } = useDefaultColumns();
 
   const { metaQuery } = useFetchData(ENTITY_TYPE);
-
   const { detailsQuery } = useDetailsQueryAPI(
     filterMaster?.saved_filters?.selectedId
       ? filterMaster?.saved_filters?.selectedId
       : metaQuery?.data?.default_filter?.value
   );
   const { saveSettingsDataMutation } = useSaveSettingsDataAPI(ENTITY_TYPE);
+  const { settingsColumnAttributes } =
+    useGetSettingsColumnAttributes(ENTITY_TYPE);
   const { operationList } = useGetOperationList();
 
-  const { attributes } = useGetAttributes(ENTITY_TYPE);
+  const { layoutAttributes: quickTabAttributes } = useGetLayoutAttributes({
+    entity_type: ENTITY_TYPE,
+    data_type: "select",
+  });
 
+  const { layoutAttributes: sortingTabAttributes } = useGetLayoutAttributes({
+    entity_type: ENTITY_TYPE,
+  });
   const isColumnDefault =
     filterSettingStates?.columnTabState?.isDefault || false;
   const activeTabIndex = filterSettingStates?.columnTabState?.tabs?.findIndex(
@@ -108,58 +118,55 @@ function ListingView() {
         //   ?.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;
+        const res = showList.map((item: any) => ({
+          id: item.value,
+          accessorKey: item.value,
+          header: item.label,
+        }));
+
+        return res;
       };
 
-      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);
-      // }
+      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);
     }
@@ -403,9 +410,6 @@ function ListingView() {
           queryClient.invalidateQueries({
             queryKey: ["GET_NAVIGATION_LAYOUT", ENTITY_TYPE],
           });
-          queryClient.invalidateQueries({
-            queryKey: ["meta", ENTITY_TYPE],
-          });
         },
       }
     );
@@ -537,17 +541,14 @@ function ListingView() {
               onClose={() => setShowListViewSettings(false)}
               columnsData={metaQuery.data || {}}
               columnsDataLoading={metaQuery.isPending}
-              quickTabAttributes={attributes?.data?.map((item) => ({
-                label: item.name,
-                value: item.attribute_key,
-              }))}
-              quickTabAttributesLoading={attributes?.data?.isLoading}
-              columnTabAttributes={attributes?.data?.filter(
+              quickTabAttributes={quickTabAttributes?.data}
+              quickTabAttributesLoading={quickTabAttributes?.isLoading}
+              columnTabAttributes={settingsColumnAttributes?.data?.filter(
                 (item) => item.attribute_key
               )}
-              columnAttributesLoading={attributes?.data?.isLoading}
-              sortingTabAttributes={attributes?.data}
-              sortingTabAttributesLoading={attributes?.data?.isLoading}
+              columnAttributesLoading={settingsColumnAttributes?.isLoading}
+              sortingTabAttributes={sortingTabAttributes?.data}
+              sortingTabAttributesLoading={sortingTabAttributes?.isLoading}
               tabsApiData={settingsTabDropdownData || []}
               tabsApiDataLoading={settingsTabDropdownPending}
               onSaveSettingsData={handleSaveSettingsData}