rez-table-listing-mui 1.2.16 → 1.2.17

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

@@ -23,6 +23,7 @@ export function TableFilter({
   onSaveFilter,
   onUpdateFilter,
   dropdownData,
+  onChangeFunction,
 }: FilterDrawerProps) {
   const [tabValue, setTabValue] = useState(0);
   const [editMode, setEditMode] = useState(false);
@@ -30,6 +31,11 @@ export function TableFilter({
     UpdatedFilterStateProps[]
   >([]);
 
+  // tabs
+  const FILTER_TAB = 0;
+  const SAVED_TAB = 1;
+  const ATTR_TAB = 2;
+
   // remove this
   const [saveFilterModalOpen, setSaveFilterModalOpen] = useState(false);
   const [deleteFilterModalOpen, setDeleteFilterModalOpen] = useState(false);
@@ -45,6 +51,26 @@ export function TableFilter({
     setShowFilterOption,
   } = tableStates;
 
+  const clearAttributeRadio = () => {
+    const newFilterMaster = {
+      ...filterMaster,
+      attributes: {
+        ...filterMaster?.attributes,
+        radio: [],
+      },
+      activeFilterTabIndex: FILTER_TAB,
+    };
+
+    setFilterMaster(newFilterMaster as FilterMasterStateProps);
+
+    // const newState = {
+    //   filterMaster: newFilterMaster,
+    //   filters: filters,
+    // };
+
+    // onChangeFunction && onChangeFunction(newState);
+  };
+
   const filterNameInput: InputField = {
     label: "Filter Name",
     placeholder: 'e.g., "Website Leads - This Week"',
@@ -78,6 +104,10 @@ export function TableFilter({
   }, [filters, columnsData, tabValue]);
 
   const handleTabChange = (_: React.SyntheticEvent, newValue: number) => {
+    if (tabValue === ATTR_TAB && newValue === FILTER_TAB) {
+      clearAttributeRadio();
+    }
+
     setTabValue(newValue);
     if (newValue === 0) {
       setEditMode(false);
@@ -93,44 +123,33 @@ export function TableFilter({
   ];
 
   const handleTabCrossClick = (index: number) => {
-    const commonStateReset = () => {
-      setFilters([]);
-      setSelectedFilters([]);
-      setFilterMaster(
-        (prev) =>
-          ({ ...prev, activeFilterTabIndex: -1 } as FilterMasterStateProps)
-      );
+    // always-clear bits
+    setFilters([]);
+    setSelectedFilters([]);
+
+    // only tab 1 needs this
+    if (index === 1) setEditMode(false);
+
+    const patches: Record<number, Partial<FilterMasterStateProps>> = {
+      0: {}, // no extra fields
+      1: { saved_filters: { selectedId: "", selectedName: "" } },
+      2: { attributes: { radio: [], selected: "" } },
     };
 
-    const indexMapper: { [key: number]: () => void } = {
-      0: () => commonStateReset(),
-      1: () => {
-        commonStateReset();
-        setEditMode(false);
-        setFilterMaster(
-          (prev) =>
-            ({
-              ...prev,
-              saved_filters: { selectedId: "", selectedName: "" },
-            } as FilterMasterStateProps)
-        );
-      },
-      2: () => {
-        commonStateReset();
-        setFilterMaster(
-          (prev) =>
-            ({
-              ...prev,
-              attributes: {
-                radio: [],
-                selected: "",
-              },
-            } as FilterMasterStateProps)
-        );
-      },
+    const newFilterMasterState = {
+      ...filterMaster,
+      activeFilterTabIndex: -1,
+      ...(patches[index] ?? {}),
+    } as FilterMasterStateProps;
+
+    setFilterMaster(newFilterMasterState);
+
+    const newState = {
+      filterMaster: newFilterMasterState,
+      filters: filters,
     };
 
-    indexMapper[index] && indexMapper[index]();
+    onChangeFunction && onChangeFunction(newState);
   };
 
   return (
@@ -167,6 +186,7 @@ export function TableFilter({
           setSelectedFilters={setSelectedFilters}
           setSavedFilterModalOpen={setSaveFilterModalOpen}
           dropdownData={dropdownData}
+          onChangeFunction={onChangeFunction}
         />
       </CustomTabPanel>
 
@@ -182,6 +202,7 @@ export function TableFilter({
           setSavedFilterModalOpen={setSaveFilterModalOpen}
           dropdownData={dropdownData}
           tabValue={tabValue}
+          onChangeFunction={onChangeFunction}
         />
       </CustomTabPanel>
 
@@ -193,6 +214,7 @@ export function TableFilter({
           searchTerm={searchTerm}
           setSearchTerm={setSearchTerm}
           tabValue={tabValue}
+          onChangeFunction={onChangeFunction}
         />
       </CustomTabPanel>
 
@@ -230,7 +252,6 @@ export function TableFilter({
 
               onSaveFilter && onSaveFilter(inputValue || "");
               setSaveFilterModalOpen(false);
-
               setTabValue(1);
             },
             variant: "contained",
@@ -267,15 +288,6 @@ export function TableFilter({
               onDeleteFilter && onDeleteFilter();
               setDeleteFilterModalOpen(false);
               setEditMode && setEditMode(false);
-              setSelectedFilters([]);
-              setFilters([]);
-              setFilterMaster(
-                (prev) =>
-                  ({
-                    ...prev,
-                    activeFilterTabIndex: -1,
-                  } as FilterMasterStateProps)
-              );
             },
             variant: "contained",
             sx: {

package/src/listing/components/index.scss

@@ -125,7 +125,7 @@
             cursor: pointer;
 
             .ts__dnd__button {
-              color: var(--grey-300);
+              color: var(--grey-600);
               // width: max-content;
               // height: max-content;
               // cursor: grabbing;

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

@@ -11,7 +11,7 @@ const LoginButton = () => {
       const response = await axios.post(
         "http://localhost:4010/api/auth/login",
         {
-          email_id: "admin@rezolut.in",
+          email_id: "test@gmail.com",
           password: "Admin@123",
         }
       );

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

@@ -5,11 +5,7 @@ import {
 } from "../types/table-options";
 import { DownArrow, UpArrow } from "../../assets/svg";
 import { CSSProperties, useState } from "react";
-import {
-  getColumnAlignment,
-  getColumnPinningStyles,
-} from "../libs/utils/common";
-import { align } from "../types/common";
+import { getColumnPinningStyles } from "../libs/utils/common";
 import {
   horizontalListSortingStrategy,
   SortableContext,
@@ -39,7 +35,7 @@ function TableHead<T>({
   } = featureOptions;
 
   // Popover
-  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
+  const [, setAnchorEl] = useState<HTMLElement | null>(null);
 
   const handleHover = (event: React.MouseEvent<HTMLElement>) => {
     setAnchorEl((prev) => (prev ? null : event.currentTarget));

package/src/listing/components/topbar/index.scss

@@ -33,7 +33,6 @@
           margin-bottom: 1.2rem;
         }
       }
-
       .ts--button {
         margin-right: 0.6rem;
         margin-top: 1rem;

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

@@ -60,8 +60,7 @@ function Topbar<T>({
     table.getAllLeafColumns().map((col) => col.id)
   );
 
-  //Filter
-  // const [showFilterInput, setShowFilterInput] = useState(false);
+  const { setShowTableFilter } = tableStates;
 
   // search
   const [showSearchInput, setShowSearchInput] = useState(false);
@@ -77,7 +76,6 @@ function Topbar<T>({
     rightSideComponent,
     showColumnToggle,
     showChangeLayoutToggle,
-    viewMoreToggle,
     showSortingToggle,
     showFilterToggle,
     showSearch,
@@ -93,10 +91,6 @@ function Topbar<T>({
     handler: () => setShowColumnHiding(false),
   });
 
-  const handleLayoutIconClick = (event: React.MouseEvent<HTMLElement>) => {
-    setLayoutAnchorEl(event.currentTarget);
-  };
-
   const handleLayoutSelect = (layout: string) => {
     setSelectedLayout(layout);
     setLayoutAnchorEl(null);
@@ -175,14 +169,6 @@ function Topbar<T>({
         {rightSideComponent}
         {paginationComponent}
 
-        {/* {showSearch && (
-          <div title="Search">
-            <TableSearch
-              value={searchValue ?? ""}
-              onChange={onSearchChange ?? (() => {})}
-            />
-          </div>
-        )} */}
         {showSearch && (
           <div
             title="Search"
@@ -203,9 +189,6 @@ function Topbar<T>({
         {showChangeLayoutToggle && (
           <>
             <div className="change-layout ts--button" title="Layout">
-              {/* <div onClick={handleLayoutIconClick}>
-                <ChangeLayoutIcon />
-              </div> */}
               <div
                 onClick={(e) => {
                   const customEvent = new CustomEvent("triggerLayoutPopover", {
@@ -275,13 +258,76 @@ function Topbar<T>({
           </>
         )}
 
+        {/* {showFilterToggle && (
+          <div
+            className="filter ts--button"
+            title="Filter"
+            onClick={onFilterButtonClick}
+            style={{
+              display: "flex",
+              justifyContent: "center",
+              alignItems: "center",
+              backgroundColor:
+                tableStates.showTableFilter || tableStates.filters.length > 0
+                  ? "#e8e2fb"
+                  : "transparent",
+              height: "25px",
+              width: "25px",
+              borderRadius: "6px",
+              cursor: "pointer",
+            }}
+          >
+            <FilterationIcon
+              color={
+                tableStates.showTableFilter || tableStates.filters.length > 0
+                  ? "#7A5AF8"
+                  : "#1C1B1F"
+              }
+            />
+          </div>
+        )} */}
+
         {showFilterToggle && (
           <div
             className="filter ts--button"
             title="Filter"
-            onClick={onFilterButtonClick && onFilterButtonClick}
+            onClick={onFilterButtonClick}
+            style={{
+              position: "relative",
+              display: "flex",
+              justifyContent: "center",
+              alignItems: "center",
+              backgroundColor:
+                tableStates.showTableFilter || tableStates.filters.length > 0
+                  ? "#eae4fe"
+                  : "transparent",
+              height: "25px",
+              width: "25px",
+              borderRadius: "6px",
+              cursor: "pointer",
+            }}
           >
-            <FilterationIcon color="#1C1B1F" />
+            <FilterationIcon
+              color={
+                tableStates.showTableFilter || tableStates.filters.length > 0
+                  ? "#7A5AF8"
+                  : "#1C1B1F"
+              }
+            />
+
+            {tableStates.filters.length > 0 && !tableStates.showTableFilter && (
+              <span
+                style={{
+                  position: "absolute",
+                  top: "1px",
+                  right: "1px",
+                  width: "6px",
+                  height: "6px",
+                  borderRadius: "50%",
+                  backgroundColor: "#F63D68",
+                }}
+              />
+            )}
           </div>
         )}
 

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);
+      }
     },
   });
 

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;