rez-table-listing-mui 1.3.56 → 1.3.57

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rez-table-listing-mui",
-  "version": "1.3.56",
+  "version": "1.3.57",
   "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.data_type]?.[0]?.value ||
+        columnsData?.operation_list[matchingColumn.element_type]?.[0]?.value ||
         "in";
 
       const newFilter = {
@@ -173,7 +173,7 @@ const AttributesFilter = ({
           }}
         >
           {columnsData?.column_list
-            ?.filter((column) => column.data_type.includes("select"))
+            ?.filter((column) => column.element_type.includes("select"))
             .map((column, index) => (
               <MenuItem
                 key={index}

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

@@ -62,14 +62,15 @@ const FilterCriteria = ({
   const handleAddFilter = (
     attribute: FilterDataMainFilterEntityWiseCriteriaProps
   ) => {
-    const dropdownOptions = columnsData?.operation_list[attribute?.data_type];
+    const dropdownOptions =
+      columnsData?.operation_list[attribute?.element_type];
 
-    const defaultValue = attribute.data_type === "multiselect" ? [] : "";
+    const defaultValue = attribute.element_type === "multiselect" ? [] : "";
 
     const defaultOperator = dropdownOptions?.[0]?.value || "";
 
     const matchingDropdownList =
-      columnsData?.operation_list[attribute.data_type] || [];
+      columnsData?.operation_list[attribute.element_type] || [];
 
     const newFilter = {
       filter_attribute: attribute.attribute_key,
@@ -83,7 +84,7 @@ const FilterCriteria = ({
       // id: attribute?.id,
       filter_attribute_name: attribute?.name,
       filter_attribute_data_type:
-        attribute?.data_type || attribute?.element_type,
+        attribute?.element_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,65 +8,51 @@ const LoginButton = () => {
   const handleLogin = async () => {
     setLoading(true);
     // const api_url = "https://api.eth-qa.rezolut.in/api/enrol/auth";
-    const api_url = "http://localhost:4011/api/auth";
-    const email_id = "shraddha.nandurkar@rezolut.in";
+    const api_url = "http://localhost:6010/api/auth";
+    const email_id = "admin@rezolut.in";
     const email_otp = "123456";
     const sub_domain = "universal";
 
     setLoading(true);
 
     await axios
-      .post(`${api_url}/sso/check-email`, {
-        email_id: email_id,
-        subdomain: sub_domain,
+      .post(`${api_url}/sso/otp/generate`, {
+        identifier: email_id,
+        service: "email",
       })
-      .then(async (emailAPIResponse) => {
+      .then(async (otpAPIResponse) => {
         await axios
-          .post(`${api_url}/sso/otp/generate`, {
+          .post(`${api_url}/verify-otp`, {
             identifier: email_id,
             service: "email",
+            reset: true,
+            otp: "123456",
+            otp_id: otpAPIResponse.data.otp_id,
+            fcm_token: "",
+            subdomain: "platform",
           })
-          .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;
+          .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.");
-                }
-              })
-              .catch((error) => {
-                console.error("Login failed:", error);
-                alert("Login failed. Check console for details.");
-              })
-              .finally(() => {
-                setLoading(false);
-              });
+            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.");
+            console.error("OTP verification failed:", error);
+            alert("OTP verification failed. Check console for details.");
           })
           .finally(() => {
             setLoading(false);
           });
       })
       .catch((error) => {
-        console.error("Login failed:", error);
-        alert("Login failed. Check console for details.");
+        console.error("OTP generation failed:", error);
+        alert("OTP generation failed. Check console for details.");
       })
       .finally(() => {
         setLoading(false);

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

@@ -15,10 +15,7 @@ import {
   horizontalListSortingStrategy,
   SortableContext,
 } from "@dnd-kit/sortable";
-import {
-  getColumnPinningStylesBody,
-  getDepthBackground,
-} from "../libs/utils/common";
+import { getColumnPinningStylesBody } from "../libs/utils/common";
 import Checkbox from "./inputs/checkbox";
 
 interface TableBodyProps<T> {
@@ -42,13 +39,7 @@ function TableBody<T>({
 
   const renderRow = (row: Row<T>) => {
     const renderedRow = (
-      <tr
-        key={row.id}
-        className="ts__body__tr"
-        style={{
-          backgroundColor: getDepthBackground(row.depth),
-        }}
-      >
+      <tr key={row.id} className="ts__body__tr">
         {enableRowSelection && (
           <td
             className="ts__body__td ts__body__checkbox"
@@ -56,7 +47,6 @@ function TableBody<T>({
               position: "sticky",
               left: 0,
               width: "50px",
-              backgroundColor: "inherit",
             }}
           >
             <Checkbox
@@ -80,7 +70,6 @@ function TableBody<T>({
               }),
             } 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,13 +326,21 @@ const Sorting = ({
   const getCurrentLists = () => {
     if (sortingTabState?.isDefault) {
       return {
-        showList: columnsData || [],
+        showList:
+          columnsData?.map((column: any) => ({
+            label: column?.name,
+            value: column?.attribute_key,
+          })) || [],
         hideList: columnTabState?.hide_list || [],
       };
     } else {
       const currentTab = sortingTabState?.tabs?.[activeTabIndex || 0];
       return {
-        showList: columnsData || [],
+        showList:
+          columnsData?.map((column: any) => ({
+            label: column?.name,
+            value: column?.attribute_key,
+          })) || [],
         // 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 ||
-    (columnTabState?.isDefault
+    // quickTabStates?.show_list?.length === 0 ||      --> commented as per the requirement
+    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,
-  getSettingsColumnAttributes,
+  getAttributes,
 } from "../utils/apiColumn";
 import {
   FilterDataMainFilterEntityListProps,
@@ -59,7 +59,7 @@ const entityListingCall = async ({
   responseStatus: number;
   data: EntityListingResponse;
 }> => {
-  const url = `filter`;
+  const url = `filter/adm`;
 
   const body = {
     entity_type,
@@ -113,7 +113,7 @@ export const useEntityTableAPI = ({
   });
 
   return {
-    tableData: data?.data.data,
+    tableData: data?.data,
     status: data?.responseStatus,
     isTableDataPending,
   };
@@ -356,13 +356,21 @@ export const useGetFilterEntityListAndCriteria = ({
 
   const filterEntityWiseCriteria = useQuery({
     queryKey: ["filterEntityWiseCriteria", selectedFilterEntity],
-    queryFn: () => getFilterCriteriaByEntity(selectedFilterEntity),
+    queryFn: () => getAttributes(selectedFilterEntity?.value as string),
     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({
@@ -375,30 +383,30 @@ export const useGetOperationList = () => {
 
 export const useGetLayoutAttributes = ({
   entity_type,
-  data_type,
+  element_type,
 }: {
   entity_type: string;
-  data_type?: string;
+  element_type?: string;
 }) => {
   // First query to get meta data
   const layoutAttributes = useQuery({
-    queryKey: ["layoutAttributes", entity_type, data_type],
+    queryKey: ["layoutAttributes", entity_type, element_type],
     queryFn: () =>
       getLayoutAttributes({
         entity_type,
-        data_type,
+        element_type,
       }),
   });
 
   return { layoutAttributes };
 };
 
-export const useGetSettingsColumnAttributes = (entity_type: string) => {
-  // First query to get meta data
-  const settingsColumnAttributes = useQuery({
-    queryKey: ["settingsColumnAttributes", entity_type],
-    queryFn: () => getSettingsColumnAttributes(entity_type),
-  });
+// export const useGetSettingsColumnAttributes = (entity_type: string) => {
+//   // First query to get meta data
+//   const settingsColumnAttributes = useQuery({
+//     queryKey: ["settingsColumnAttributes", entity_type],
+//     queryFn: () => getAttributes(entity_type),
+//   });
 
-  return { settingsColumnAttributes };
-};
+//   return { settingsColumnAttributes };
+// };

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

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

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

@@ -76,20 +76,14 @@ 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 = "crm_dev";
-export const ENTITY_TYPE = "LEAD";
+const ENVIRONMENT = "adm_dev";
+export const ENTITY_TYPE = "SCH";
 export const MAPPED_ENTITY_TYPE = "LYPR"; // LAP OR LYPR
 export const USER_ID = 226;
 
 const environments = {
-  adm_dev: "http://localhost:4010/api",
+  adm_dev: "http://localhost:6010/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;
-  data_type: FilterInputDataTypes;
+  element_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;
-  data_type: FilterInputDataTypes;
+  element_type: FilterInputDataTypes;
 }
 
 export interface FilterDataProps {

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

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

package/src/view/FIlterWrapper.tsx

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

package/src/view/ListingView.tsx

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