rez-table-listing-mui 1.0.43 → 1.0.45

package/package.json

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

package/src/App.tsx

@@ -45,7 +45,7 @@ function App() {
 
   const { defaultColumns } = useDefaultColumns();
 
-  const { metaQuery } = useFetchData("AYR");
+  const { metaQuery } = useFetchData("BRD");
   const { detailsQuery } = useDetailsQueryAPI(
     filterMaster?.saved_filters?.selectedId
       ? filterMaster?.saved_filters?.selectedId
@@ -55,16 +55,16 @@ function App() {
   const { savedMutation } = useSavedFilterAPI(); //API CALL FOR SAVED FILTER
   const { deleteMutation } = useDeleteFilterAPI(); //API FOR DELETING FILTER
   const { updateMutation } = useUpdateFilterAPI(); //API FOR UPDATE FILTER
-  const { saveSettingsDataMutation } = useSaveSettingsDataAPI("AYR");
+  const { saveSettingsDataMutation } = useSaveSettingsDataAPI("BRD");
   const { dropdownData } = useCommonDropdownAPI(metaQuery.data);
   const { settingsTabDropdownData, settingsTabDropdownPending } =
     useSettingsDropDownAPI({
-      entity_type: "AYR",
+      entity_type: "BRD",
       column: filterSettingStates?.quickTabStates?.attribute,
       sort_by: filterSettingStates?.quickTabStates?.sorting,
     });
 
-  const { getSettingsAPIData } = useGetSettingsDataAPI("AYR");
+  const { getSettingsAPIData } = useGetSettingsDataAPI("BRD");
 
   useEffect(() => {
     // setTimeout(() => {
@@ -73,15 +73,52 @@ function App() {
 
     const fetchMeta = async () => {
       try {
-        const { res } = await entityTableMetaMaster("AYR");
-        setColumns(res);
+        const { res: allColumns } = await entityTableMetaMaster("BRD");
+
+        const savedColumnSettings = filterSettingStates.settingsData?.column;
+
+        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.toLowerCase() === selectedTab.toLowerCase()
+          );
+
+          if (activeTabSettings?.show_list) {
+            const visibleColumns = new Set(
+              activeTabSettings.show_list.map((c) => c.value)
+            );
+            const filtered = allColumns.filter((col: any) =>
+              visibleColumns.has(col.accessorKey)
+            );
+            setColumns(filtered);
+          } 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(filtered);
+        } else {
+          // No settings found, use all columns
+          setColumns(allColumns);
+        }
       } catch (error) {
         console.error("Failed to fetch metadata:", error);
       }
     };
 
     fetchMeta();
-  }, []);
+  }, [filterSettingStates.settingsData, selectedTab]);
 
   useEffect(() => {
     setFilters(detailsQuery.data ?? []);
@@ -97,7 +134,7 @@ function App() {
   const { tableData } = useEntityTableAPI({
     page: 0,
     size: 50,
-    entity_type: "AYR",
+    entity_type: "BRD",
     tabs: {
       columnName: "status",
       sortBy: "ASC",
@@ -176,7 +213,7 @@ function App() {
     const payload = {
       name,
       is_default: false,
-      mapped_entity_type: "AYR", // For that entity type
+      mapped_entity_type: "BRD", // For that entity type
       status: "ACTIVE",
       entity_type: "SFM", // FIXED entity type
       filterDetails: quickFilter,
@@ -200,7 +237,7 @@ function App() {
       name: filterToDelete?.label,
       id: filterToDelete?.value,
       is_default: false,
-      mapped_entity_type: "AYR",
+      mapped_entity_type: "BRD",
       status: "INACTIVE",
       entity_type: "SFM",
     };
@@ -220,7 +257,7 @@ function App() {
       name: filterMaster?.saved_filters?.selectedName, // Name of the filter
       is_default: false,
       id: filterMaster?.saved_filters?.selectedId,
-      mapped_entity_type: "AYR",
+      mapped_entity_type: "BRD",
       status: "ACTIVE",
       entity_type: "SFM",
       filterDetails: quickFilter,
@@ -232,7 +269,7 @@ function App() {
   const handleSaveSettingsData = (settingsData: SettingsDataProps) => {
     const payload = {
       entity_type: "LAP",
-      mapped_entity_type: "AYR",
+      mapped_entity_type: "BRD",
       layout_json: settingsData,
     };
 

package/src/components/filter/components/saved-edit-filter.tsx

@@ -40,10 +40,10 @@ const SavedFilterEditComponent = ({
 
   const handleRemoveFilter = (filter_attribute: string) => {
     setFilters((prev) =>
-      prev.filter((filter) => filter.filter_attribute !== filter_attribute)
+      prev.filter((filter) => filter?.filter_attribute !== filter_attribute)
     );
     setSelectedFilters((prev) =>
-      prev.filter((filter) => filter.filter_attribute !== filter_attribute)
+      prev.filter((filter) => filter?.filter_attribute !== filter_attribute)
     );
   };
 

package/src/components/filter/components/saved-filter.tsx

@@ -59,8 +59,8 @@ const SavedFilter = ({
           ...prev,
           saved_filters: {
             ...prev?.attributes,
-            selectedId: filter.value,
-            selectedName: filter.label,
+            selectedId: filter?.value,
+            selectedName: filter?.label,
           },
           activeFilterTabIndex: tabValue,
         } as FilterMasterStateProps)
@@ -78,7 +78,7 @@ const SavedFilter = ({
         className="search-input"
       />
 
-      {columnsData.saved_filter.length === 0 ? (
+      {columnsData?.saved_filter?.length === 0 ? (
         <Typography sx={{ mt: 2 }}>No saved filters yet.</Typography>
       ) : (
         <List
@@ -89,13 +89,13 @@ const SavedFilter = ({
             mt: 2,
           }}
         >
-          {columnsData.saved_filter
-            .filter((filter) =>
+          {columnsData?.saved_filter
+            ?.filter((filter) =>
               filter.label?.toLowerCase().includes(searchTerm.toLowerCase())
             )
-            .map((filter) => (
+            ?.map((filter) => (
               <ListItem
-                key={filter.value}
+                key={filter?.value}
                 sx={{
                   cursor: "pointer",
                   border: "1px solid #ccc",
@@ -106,7 +106,7 @@ const SavedFilter = ({
                 }}
                 onClick={() => handleListItemClick(filter)}
               >
-                <ListItemText primary={filter.label} />
+                <ListItemText primary={filter?.label} />
 
                 <Box onClick={(e) => e.stopPropagation()}>
                   <IconButton

package/src/components/filter/style.ts

@@ -35,6 +35,7 @@ export const filterStyles: StyleProps = {
   },
 
   filterContainer: {
+    backgroundColor: "#fff",
     height: "100%",
     overflowY: "hidden",
     boxShadow: "0px 3px 8px 0px rgba(34, 48, 62, 0.10)",

package/src/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: "darshil@rezolut.in",
           password: "Admin@123",
         }
       );

package/src/components/search/index.tsx

@@ -1,6 +1,7 @@
-import React, { useState, useRef, useEffect } from "react";
+import React, { useState, useRef, useEffect, useCallback } from "react";
 import { SearchIcon } from "../../assets/svg";
 import useOutsideClick from "../../libs/hooks/useOutsideClick";
+import { customDebounce } from "../../libs/utils/debounce";
 
 interface TableSearchProps {
   value: string;
@@ -12,6 +13,14 @@ const TableSearch: React.FC<TableSearchProps> = ({ value, onChange }) => {
   const [localValue, setLocalValue] = useState(value);
   const searchContainerRef = useRef<HTMLDivElement>(null);
 
+  // Debounced onChange function
+  const debouncedOnChange = useCallback(
+    customDebounce((newValue: string) => {
+      onChange(newValue);
+    }, 1000),
+    [onChange]
+  );
+
   // Sync local state with prop value
   useEffect(() => {
     setLocalValue(value);
@@ -21,20 +30,19 @@ const TableSearch: React.FC<TableSearchProps> = ({ value, onChange }) => {
     ref: searchContainerRef,
     handler: () => {
       setShowSearchInput(false);
-      // Update parent when clicking outside if value changed
-      if (localValue !== value) {
-        onChange(localValue);
-      }
     },
   });
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const newValue = e.target.value;
     setLocalValue(newValue);
-    onChange(newValue); // Update parent state immediately
+    debouncedOnChange(newValue);
   };
 
   const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Enter") {
+      onChange(localValue);
+    }
     if (e.key === "Escape") {
       setShowSearchInput(false);
     }
@@ -49,7 +57,7 @@ const TableSearch: React.FC<TableSearchProps> = ({ value, onChange }) => {
           if (!showSearchInput) {
             // Focus input when showing
             setTimeout(() => {
-              searchContainerRef.current?.querySelector('input')?.focus();
+              searchContainerRef.current?.querySelector("input")?.focus();
             }, 100);
           }
         }}

package/src/components/table-settings/components/column.tsx

@@ -39,8 +39,14 @@ const ColumnTab = ({ filterSettingStates, columnsData }: ColumnTabProps) => {
   const [searchTerm, setSearchTerm] = useState<string>("");
   const [selectedTabIndex, setSelectedTabIndex] = useState<number>(0);
 
-  const { quickTabStates, columnTabState, setColumnTabState, settingsData } =
-    filterSettingStates;
+  const {
+    quickTabStates,
+    columnTabState,
+    setColumnTabState,
+    settingsData,
+    sortingTabState,
+    setSortingTabState,
+  } = filterSettingStates;
 
   useEffect(() => {
     const mappedColumns: ColumnItem[] =
@@ -48,7 +54,19 @@ const ColumnTab = ({ filterSettingStates, columnsData }: ColumnTabProps) => {
         label: column?.name,
         value: column?.attribute_key,
       })) || [];
-    //Later changed TabData to interface from filter settings types file
+
+    // If you have real tab data, use it
+    if (settingsData?.column?.tabs?.length) {
+      setColumnTabState({
+        isDefault: settingsData.column.isDefault ?? true,
+        show_list: mappedColumns,
+        hide_list: [],
+        tabs: settingsData.column.tabs, // Use the real tab data!
+      });
+      return;
+    }
+
+    // Otherwise, use the default mapping
     const mappedTabs: TabData[] =
       quickTabStates?.show_list?.map((tab) => ({
         tab_name: tab,
@@ -57,18 +75,12 @@ const ColumnTab = ({ filterSettingStates, columnsData }: ColumnTabProps) => {
       })) || [];
 
     if (!Object.entries(columnTabState)?.length) {
-      console.log("hello:", Object.entries(columnTabState)?.length);
-
-      console.log("mappedColumnsssss", mappedColumns);
-
-      const newColumnState: ColumnTabConfigProps = {
+      setColumnTabState({
         isDefault: true,
         show_list: mappedColumns,
         hide_list: [],
         tabs: mappedTabs,
-      };
-
-      setColumnTabState(newColumnState);
+      });
     }
 
     // console.log(
@@ -99,7 +111,7 @@ const ColumnTab = ({ filterSettingStates, columnsData }: ColumnTabProps) => {
         hide_list: [],
       }));
     }
-  }, []); // might need settingsData dependancy if logic is working inconsistently
+  }, [settingsData, columnsData, quickTabStates]); // Added dependencies for consistency
 
   // useEffect(() => {
   //   if (settingsData?.column) {

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

@@ -74,6 +74,7 @@ export function QuickFilterSettings({
     };
 
     onSaveSettingsData && onSaveSettingsData(modifiedSettingsData);
+    onClose && onClose();
   };
 
   return (

package/src/components/tabs/index.tsx

@@ -50,7 +50,7 @@ export function TableTabs({
           {settingsOptions?.showIcon && (
             <IconButton
               onClick={settingsOptions?.onClick}
-              style={{ zIndex: 1000, marginRight: "0.75rem" }}
+              style={{ zIndex: 1000 }}
             >
               <SettingsOutlinedIcon />
             </IconButton>

package/src/libs/hooks/useEntityTableAPI.tsx

@@ -258,7 +258,7 @@ export const useSettingsDropDownAPI = ({
 //     queryFn: () =>
 //       saveSettingsData({
 //         entity_type: "LAP",
-//         mapped_entity_type: "AYR",
+//         mapped_entity_type: "BRD",
 //         layout_json: payload,
 //       }),
 //     enabled: !!payload && !!Object.entries(payload).length,
@@ -276,7 +276,11 @@ export const useSaveSettingsDataAPI = (entity_type: string) => {
     },
     onSuccess: () => {
       queryClient.invalidateQueries({
-        queryKey: ["saveSettingsData"],
+        queryKey: ["entityTable"],
+      });
+
+      queryClient.invalidateQueries({
+        queryKey: ["getSettingsData", entity_type],
       });
     },
     onError: (error: any) => {

package/src/libs/utils/apiColumn.ts

@@ -96,7 +96,7 @@ export const deleteSavedFilter = async (
 ) => {
   try {
     const response = await api.post(
-      `/entity/update/17?entity_type=${entity_type}`,
+      `/entity/update/${payload?.id}?entity_type=${entity_type}`,
       payload
     );
     return response.data;

package/src/libs/utils/common.ts

@@ -101,4 +101,4 @@ api.interceptors.request.use(
   }
 );
 
-export const ENTITY_TYPE = "AYR";
+export const ENTITY_TYPE = "BRD";