rez-table-listing-mui 1.2.15 → 1.2.17

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

@@ -4,7 +4,7 @@ import {
   useQuery,
   useQueryClient,
 } from "@tanstack/react-query";
-import { api, ENTITY_TYPE } from "../utils/common";
+import { api, ENTITY_TYPE, MAPPED_ENTITY_TYPE } from "../utils/common";
 import {
   APIParamsProps,
   EntityListingResponse,
@@ -20,7 +20,12 @@ import {
   updateSavedFilter,
   viewSettingsDropDown,
 } from "../utils/apiColumn";
-import { FilterColumnsDataProps } from "../../types/filter";
+import {
+  FilterColumnsDataProps,
+  FilterMasterStateProps,
+} from "../../types/filter";
+import { CraftTableOptionsProps } from "../../types/table-options";
+import { saveLayoutAPI } from "../services/saveLayoutAPI";
 
 const entityListingCall = async ({
   page,
@@ -129,7 +134,7 @@ export const useSavedFilterAPI = () => {
 };
 
 //for delete filter API
-export const useDeleteFilterAPI = () => {
+export const useDeleteFilterAPI = (tableStates: CraftTableOptionsProps) => {
   const queryClient = useQueryClient();
   const deleteMutation = useMutation({
     mutationKey: ["deleteFilter"],
@@ -142,8 +147,65 @@ export const useDeleteFilterAPI = () => {
     }) => {
       return deleteSavedFilter(entity_type, payload);
     },
-    onSuccess: () => {
+    onSuccess: async () => {
       queryClient.invalidateQueries({ queryKey: ["meta"] });
+
+      console.log("on success is running");
+
+      const { filters, filterToDelete, filterMaster, setFilterMaster } =
+        tableStates;
+
+      console.log(
+        filterToDelete?.value === filterMaster?.saved_filters?.selectedId,
+        filterToDelete,
+        filterMaster
+      );
+
+      if (filterToDelete?.value === filterMaster?.saved_filters?.selectedId) {
+        console.log("inside if condition");
+        // const newFilterMasterState: FilterMasterStateProps = {
+        //   ...filterMaster,
+        //   attributes: {
+        //     selected: filterMaster?.attributes.selected || "",
+        //     radio: filterMaster?.attributes.radio || [],
+        //   },
+        //   saved_filters: {
+        //     selectedId: "",
+        //     selectedName: "",
+        //   },
+        //   activeFilterTabIndex: -1,
+        // };
+
+        const newFilterMasterState = {
+          ...filterMaster,
+          saved_filters: {
+            selectedId: "",
+            selectedName: "",
+          },
+          activeFilterTabIndex: -1,
+        };
+        console.log(" 1");
+
+        setFilterMaster(newFilterMasterState as FilterMasterStateProps);
+
+        const newState = {
+          filterMaster: newFilterMasterState as FilterMasterStateProps,
+          filters: filters,
+        };
+
+        console.log("first");
+
+        const payload = {
+          entity_type: MAPPED_ENTITY_TYPE,
+          mapped_entity_type: ENTITY_TYPE,
+          mapped_json: newState,
+          type: "filter",
+        };
+
+        console.log("payload - ", payload);
+
+        await saveLayoutAPI(payload);
+      }
     },
   });
 
@@ -270,7 +332,6 @@ export const useSaveSettingsDataAPI = (entity_type: string) => {
     },
     onError: (error: any) => {
       const msg = error?.response?.data?.message;
-      console.log("Error in saving settings tab data", msg, error);
     },
   });
 

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

@@ -0,0 +1,12 @@
+import { useQuery } from "@tanstack/react-query";
+import { getLeadNavigationTabs } from "../services/getLayoutAPI";
+
+export const useGetNavigationLayoutAPI = (entity_type: string) => {
+  const getNavigationLayoutQuery = useQuery({
+    queryKey: ["GET_NAVIGATION_LAYOUT", entity_type],
+    queryFn: () => getLeadNavigationTabs(entity_type),
+    enabled: !!entity_type,
+  });
+
+  return getNavigationLayoutQuery;
+};

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

@@ -0,0 +1,17 @@
+import { api } from "../utils/common";
+
+export const getLeadNavigationTabs = async (entity_type: string) => {
+  try {
+    const params = {
+      entity_type: entity_type,
+      type: "filter",
+    };
+
+    const response = await api.get("/layout-preference", { params });
+
+    return response.data.mapped_json;
+  } catch (error) {
+    console.error("Failed to fetch settings data:", error);
+    throw error;
+  }
+};

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

@@ -0,0 +1,20 @@
+import { api, MAPPED_ENTITY_TYPE } from "../utils/common";
+
+export const saveLayoutAPI = async (payload: any) => {
+  let url = `/entity/create?entity_type=${MAPPED_ENTITY_TYPE}`;
+  if (
+    payload.mapped_entity_type === "USER" ||
+    payload.mapped_entity_type === "ROLE" ||
+    payload.mapped_entity_type === "ORGP"
+  ) {
+    url = `/layout/create`;
+  }
+
+  try {
+    const response = await api.post(url, payload);
+    return response.data;
+  } catch (error) {
+    console.error("Failed to save settings data:", error);
+    throw error;
+  }
+};

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

@@ -1,4 +1,4 @@
-import { api } from "./common";
+import { api, MAPPED_ENTITY_TYPE } from "./common";
 import {
   createSavedFilterPayload,
   deleteSavedFilterPayload,
@@ -127,7 +127,7 @@ export const updateSavedFilter = async (
 
 export const saveSettingsData = async (payload: any) => {
   try {
-    const response = await api.post(`/entity/create?entity_type=LAP`, payload);
+    const response = await api.post(`/entity/create?entity_type=${MAPPED_ENTITY_TYPE}`, payload);
     return response.data;
   } catch (error) {
     console.error("Failed to save settings data:", error);

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

@@ -79,6 +79,7 @@ export function customDebounce<T extends (...args: any[]) => any>(
 //ENTITY TYPE
 const ENVIRONMENT = "crm_dev";
 export const ENTITY_TYPE = "LEAD";
+export const MAPPED_ENTITY_TYPE = "LAP";
 
 const environments = {
   adm_dev: "http://localhost:4010/api",

package/src/listing/types/common.ts

@@ -1,3 +1,5 @@
+import { FilterMasterStateProps, UpdatedFilterStateProps } from "./filter";
+
 export interface defaultColumnsProps {
   id: number;
   name: string;
@@ -111,3 +113,9 @@ export type DropdownOption = {
   value: string | number;
   label: string;
 };
+
+export interface onFilterChangeFunctionProps {
+  updatedFilters?: any;
+  filterMaster?: any;
+  filters?: any;
+}

package/src/listing/types/filter.ts

@@ -1,3 +1,4 @@
+import { onFilterChangeFunctionProps } from "./common";
 import { CraftTableOptionsProps } from "./table-options";
 
 interface OperationProps {
@@ -79,6 +80,10 @@ export interface FilterDrawerProps {
   tableData?: {
     entity_list: any[];
   };
+  onChangeFunction: ({
+    updatedFilters,
+    filterMaster,
+  }: onFilterChangeFunctionProps) => void;
 }
 
 export interface FilterCriteria {
@@ -175,6 +180,10 @@ export interface FilterFormComponentProps {
   setDeleteFilterModalOpen?: React.Dispatch<React.SetStateAction<boolean>>;
   setSavedFilterModalOpen?: React.Dispatch<React.SetStateAction<boolean>>;
   tabValue?: number;
+  onChangeFunction: ({
+    updatedFilters,
+    filterMaster,
+  }: onFilterChangeFunctionProps) => void;
 }
 
 export interface FilterMasterStateProps {
@@ -196,6 +205,10 @@ export interface AttributesFilterProps {
   searchTerm: string;
   setSearchTerm: React.Dispatch<React.SetStateAction<string>>;
   tabValue?: number;
+  onChangeFunction: ({
+    updatedFilters,
+    filterMaster,
+  }: onFilterChangeFunctionProps) => void;
 }
 
 export interface AttributesFilterSelectProps {

package/src/view/FIlterWrapper.tsx

@@ -0,0 +1,46 @@
+import { useEffect } from "react";
+import { CraftTableFilter } from "..";
+import { useGetNavigationLayoutAPI } from "../listing/libs/hooks/useGetNavigationLayoutAPI";
+import { ENTITY_TYPE } from "../listing/libs/utils/common";
+
+const CraftTableFilterWrapper = ({
+  tableStates,
+  dropdownData,
+  onDeleteFilter,
+  onSaveFilter,
+  handleUpdateFilter,
+  onChangeFunction,
+  columnsData,
+}: any) => {
+  const getNavigationLayoutQuery = useGetNavigationLayoutAPI(ENTITY_TYPE);
+
+  useEffect(() => {
+    if (getNavigationLayoutQuery.isSuccess) {
+      const { setFilters, setFilterMaster } = tableStates;
+      const filters = getNavigationLayoutQuery?.data?.filters || [];
+      const filterMaster = getNavigationLayoutQuery?.data?.filterMaster || {};
+
+      if (filters.length > 0) {
+        tableStates.setShowTableFilter(true);
+      }
+
+      setFilters(filters);
+      setFilterMaster(filterMaster);
+    }
+  }, [getNavigationLayoutQuery.isSuccess, getNavigationLayoutQuery.data]);
+
+  return (
+    <CraftTableFilter
+      tableStates={tableStates}
+      onClose={() => tableStates.setShowTableFilter(false)}
+      onUpdateFilter={handleUpdateFilter}
+      columnsData={columnsData}
+      dropdownData={dropdownData || []}
+      onDeleteFilter={onDeleteFilter}
+      onSaveFilter={onSaveFilter}
+      onChangeFunction={onChangeFunction}
+    />
+  );
+};
+
+export default CraftTableFilterWrapper;

package/src/view/ListingView.tsx

@@ -6,7 +6,7 @@ import {
   useDetailsQueryAPI,
   useFetchData,
 } from "../listing/libs/hooks/useEntityTableHooks";
-import { ENTITY_TYPE } from "../listing/libs/utils/common";
+import { ENTITY_TYPE, MAPPED_ENTITY_TYPE } from "../listing/libs/utils/common";
 import {
   useCommonDropdownAPI,
   useDeleteFilterAPI,
@@ -22,9 +22,10 @@ import { ColumnDef } from "@tanstack/react-table";
 import { FilterMasterStateProps } from "../listing/types/filter";
 import { SettingsDataProps } from "../listing/types/filter-settings";
 import TableWrapper from "../listing/components/index-table";
-import { CraftTableFilter } from "..";
 import { TableTabs } from "../listing/components/tabs";
 import { QuickFilterSettings } from "../listing/components/table-settings";
+import CraftTableFilterWrapper from "./FIlterWrapper";
+import { saveLayoutAPI } from "../listing/libs/services/saveLayoutAPI";
 
 function ListingView() {
   // const [mockLoading, setMockLoading] = useState<boolean>(true);
@@ -54,7 +55,7 @@ function ListingView() {
   );
 
   const { savedMutation } = useSavedFilterAPI(); //API CALL FOR SAVED FILTER
-  const { deleteMutation } = useDeleteFilterAPI(); //API FOR DELETING FILTER
+  const { deleteMutation } = useDeleteFilterAPI(tableStates); //API FOR DELETING FILTER
   const { updateMutation } = useUpdateFilterAPI(); //API FOR UPDATE FILTER
   const { saveSettingsDataMutation } = useSaveSettingsDataAPI(ENTITY_TYPE);
   const { dropdownData } = useCommonDropdownAPI(metaQuery.data);
@@ -288,6 +289,17 @@ function ListingView() {
     );
   };
 
+  const handleChangeFunction = async (data: any) => {
+    const payload = {
+      entity_type: MAPPED_ENTITY_TYPE,
+      mapped_entity_type: ENTITY_TYPE,
+      mapped_json: data,
+      type: "filter",
+    };
+
+    await saveLayoutAPI(payload);
+  };
+
   // API to handle removing or deleting a filter
   const handleRemoveFilter = () => {
     const payload = {
@@ -325,7 +337,7 @@ function ListingView() {
 
   const handleSaveSettingsData = (settingsData: SettingsDataProps) => {
     const payload = {
-      entity_type: "LAP",
+      entity_type: MAPPED_ENTITY_TYPE,
       mapped_entity_type: ENTITY_TYPE,
       layout_json: settingsData,
     };
@@ -336,8 +348,6 @@ function ListingView() {
   return (
     <TableWrapper
       data={filteredData}
-      // data={data}
-      // columns={defaultColumns}
       columns={columns && columns.length > 0 ? columns : defaultColumns}
       tableStates={tableStates}
       featureOptions={{
@@ -367,7 +377,7 @@ function ListingView() {
       filterOptions={{
         show: tableStates?.showTableFilter,
         component: (
-          <CraftTableFilter
+          <CraftTableFilterWrapper
             tableStates={tableStates}
             onClose={() => tableStates.setShowTableFilter(false)}
             onUpdateFilter={handleUpdateFilter}
@@ -375,6 +385,7 @@ function ListingView() {
             dropdownData={dropdownData || []}
             onDeleteFilter={handleRemoveFilter}
             onSaveFilter={handleSaveFilter}
+            onChangeFunction={handleChangeFunction}
           />
         ),
       }}