rez-table-listing-mui 1.3.44 → 1.3.45

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

@@ -15,6 +15,7 @@ import AttributesFilter from "./components/attributes-filter";
 import { filterStyles } from "./style";
 import { deepMergeObjects } from "../../libs/utils/deep-merge-objects";
 import SingleFilterRendering from "./components/single-filter-rendering";
+import SavedFilterModalView from "../common/saved-filter-modal";
 
 export function TableFilter({
   onClose,
@@ -32,6 +33,8 @@ export function TableFilter({
 
   // remove this
   const [saveFilterModalOpen, setSaveFilterModalOpen] = useState(false);
+  const [savedFilterModalOpen, setSavedFilterModalOpen] = useState(false);
+
   const [deleteFilterModalOpen, setDeleteFilterModalOpen] = useState(false);
 
   const [searchTerm, setSearchTerm] = useState<string>("");
@@ -114,6 +117,97 @@ export function TableFilter({
     type: "text",
   };
 
+  const hasSavedFilterRecords = Boolean(columnsData?.saved_filter?.length);
+
+  // const handleSaveFilterButtonClick = () => {
+  //   if (editMode) {
+  //     setSavedFilterModalOpen(true);
+  //     return;
+  //   }
+
+  //   setSavedFilterModalOpen(true);
+  // };
+
+  // const handleSaveFilterButtonClick = () => {
+  //   // Reset filterMaster fields when creating a new filter
+  //   if (!editMode) {
+  //     setFilterMaster((prev) => ({
+  //       ...prev,
+  //       saved_filters: {
+  //         selectedId: "",
+  //         selectedName: "",
+  //         selectedCode: "",
+  //         description: "",
+  //         shareWithTeam: false,
+  //         allowTeamEdit: false,
+  //       },
+  //     }));
+  //   }
+
+  //   setSavedFilterModalOpen(true);
+  // };
+
+  const handleSaveFilterButtonClick = () => {
+    if (!editMode) {
+      setFilterMaster((prev) => {
+        if (!prev) return prev;
+
+        return {
+          ...prev,
+          saved_filters: {
+            ...prev.saved_filters,
+            shareWithTeam: false,
+            allowTeamEdit: false,
+          },
+        };
+      });
+    }
+
+    setSavedFilterModalOpen(true);
+  };
+
+  const handleSavedFilterModalSave = () => {
+    const selectedId = filterMaster?.saved_filters?.selectedId;
+    const selectedName = filterMaster?.saved_filters?.selectedName || "";
+    const description = filterMaster?.saved_filters?.description || "";
+
+    const selectedCode = filterMaster?.saved_filters?.selectedCode;
+
+    const newFilterMasterState = {
+      ...filterMaster,
+      saved_filters: {
+        ...(filterMaster?.saved_filters ?? {}),
+        selectedId,
+        selectedName,
+        selectedCode,
+        description,
+      },
+    } as FilterMasterStateProps;
+
+    setFilterMaster(newFilterMasterState);
+
+    const newState = {
+      filterMaster: newFilterMasterState,
+      filters,
+    };
+
+    onChangeFunction && onChangeFunction(newState);
+
+    if (editMode) {
+      onUpdateFilter && onUpdateFilter(selectedName);
+      const isSingleSavedFilterEditMode =
+        filterComponentOptions?.tabOptions?.savedFilter?.editMode;
+      if (!isSingleSavedFilterEditMode) {
+        setEditMode(false);
+      }
+    } else {
+      onSaveFilter && onSaveFilter(selectedName);
+      setTabValue(1);
+    }
+
+    setSavedFilterModalOpen(false);
+  };
+
   const handleTabChange = (_: React.SyntheticEvent, newValue: number) => {
     const tabType = tabMapping[newValue]?.label;
 
@@ -122,6 +216,22 @@ export function TableFilter({
     }
 
     setTabValue(newValue);
+    if (newValue === 0) {
+      setFilterMaster((prev) => {
+        if (!prev) return prev;
+        return {
+          ...prev,
+          saved_filters: {
+            ...(prev.saved_filters ?? {}),
+            selectedId: "",
+            selectedName: "",
+            description: "",
+            is_shared: false,
+            is_editable: false,
+          },
+        };
+      });
+    }
 
     if (tabType === "Filter") {
       setEditMode(false);
@@ -144,9 +254,12 @@ export function TableFilter({
 
     if (tabType?.label === "Saved Filter") {
       patches.saved_filters = {
+        ...(filterMaster?.saved_filters ?? {}),
         selectedId: "",
         selectedName: "",
         selectedCode: "",
+        is_shared: undefined,
+        is_editable: undefined,
       };
     } else if (tabType?.label === "Attributes") {
       patches.attributes = { radio: [], selected: "" };
@@ -218,7 +331,7 @@ export function TableFilter({
           {...commonProps}
           {...savedFilterProps}
           {...attributesProps}
-          setSavedFilterModalOpen={setSaveFilterModalOpen}
+          onSaveFilterButtonClick={handleSaveFilterButtonClick}
           filterComponentOptions={finalComponentOptions}
         />
       )}
@@ -231,7 +344,7 @@ export function TableFilter({
         >
           <MainFilter
             {...commonProps}
-            setSavedFilterModalOpen={setSaveFilterModalOpen}
+            onSaveFilterButtonClick={handleSaveFilterButtonClick}
             filterComponentOptions={finalComponentOptions}
           />
         </CustomTabPanel>
@@ -246,7 +359,7 @@ export function TableFilter({
           <SavedFilter
             {...commonProps}
             {...savedFilterProps}
-            setSavedFilterModalOpen={setSaveFilterModalOpen}
+            onSaveFilterButtonClick={handleSaveFilterButtonClick}
             filterComponentOptions={finalComponentOptions}
           />
         </CustomTabPanel>
@@ -298,14 +411,17 @@ export function TableFilter({
                     inputValue || filterMaster?.saved_filters?.selectedName;
                   const selectedCode =
                     filterMaster?.saved_filters?.selectedCode;
+                  const description =
+                    inputValue || filterMaster?.saved_filters?.description;
 
                   const newFilterMasterState = {
                     ...filterMaster,
                     saved_filters: {
-                      ...filterMaster?.attributes,
+                      ...(filterMaster?.saved_filters ?? {}),
                       selectedId,
                       selectedName,
                       selectedCode,
+                      description,
                     },
                   } as FilterMasterStateProps;
 
@@ -429,7 +545,7 @@ export function TableFilter({
                   const newFilterMasterState = {
                     ...filterMaster,
                     saved_filters: {
-                      ...filterMaster?.attributes,
+                      ...(filterMaster?.saved_filters ?? {}),
                       selectedId,
                       selectedName,
                       selectedCode,
@@ -520,6 +636,15 @@ export function TableFilter({
           maxWidth="xs"
         />
       )}
+      <SavedFilterModalView
+        open={savedFilterModalOpen}
+        onClose={() => setSavedFilterModalOpen(false)}
+        onSave={handleSavedFilterModalSave}
+        filterMaster={tableStates.filterMaster}
+        setFilterMaster={tableStates.setFilterMaster}
+        hasSavedFilters={hasSavedFilterRecords}
+        columnsData={columnsData}
+      />
     </Box>
   );
 }

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

@@ -30,6 +30,8 @@ function TableWrapper<T>({
   data = [],
   columns = [],
   tableStates,
+  filterSettingStates,
+  onSaveSettings,
   paginationOptions,
   featureOptions,
   topbarOptions,
@@ -40,6 +42,7 @@ function TableWrapper<T>({
   shouldHideColumn,
   emptyListComponent,
   filterOptions,
+  activeTab,
 }: CraftTableProps<T>) {
   if (!Array.isArray(data)) {
     throw new Error("data must be an array of objects.");
@@ -322,22 +325,28 @@ function TableWrapper<T>({
               {enableColumnReordering ? (
                 <TableDND
                   table={table}
+                  activeTab={activeTab}
                   columnOrder={columnOrder}
                   featureOptions={craftFeatureOptions}
                   NestedComponent={nestedComponent}
                   setColumnOrder={setColumnOrder}
                   isCompactTable={isCompactTable}
                   tableStates={tableStates}
+                  filterSettingStates={filterSettingStates}
+                  onSaveSettings={onSaveSettings}
                 />
               ) : (
                 <Table
                   table={table}
+                  activeTab={activeTab}
                   featureOptions={craftFeatureOptions}
                   NestedComponent={nestedComponent}
                   columnOrder={columnOrder}
                   setColumnOrder={setColumnOrder}
                   isCompactTable={isCompactTable}
                   tableStates={tableStates}
+                  filterSettingStates={filterSettingStates}
+                  onSaveSettings={onSaveSettings}
                 />
               )}
             </div>

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

@@ -7,9 +7,9 @@ const LoginButton = () => {
 
   const handleLogin = async () => {
     setLoading(true);
-    const api_url = "https://api.eth-qa.rezolut.in/api/admin/auth";
-    // const api_url = "http://localhost:4011/api/admin/auth";
-    const email_id = "kartik.shetty@rezolut.in";
+    // 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 email_otp = "123456";
     const sub_domain = "universal";
 
@@ -21,8 +21,6 @@ const LoginButton = () => {
         subdomain: sub_domain,
       })
       .then(async (emailAPIResponse) => {
-        console.log(emailAPIResponse.data);
-
         await axios
           .post(`${api_url}/sso/otp/generate`, {
             identifier: email_id,
@@ -40,7 +38,6 @@ const LoginButton = () => {
                 subdomain: "universal",
               })
               .then((otpVerifyResponse) => {
-                console.log(otpVerifyResponse.data);
                 const token = otpVerifyResponse.data.accessToken;
 
                 if (token) {

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

@@ -17,12 +17,15 @@ import { arrayMove } from "@dnd-kit/sortable";
 
 function TableDND<T>({
   table,
+  activeTab,
   featureOptions,
   NestedComponent,
   columnOrder,
   setColumnOrder,
   isCompactTable,
   tableStates,
+  filterSettingStates,
+  onSaveSettings,
 }: CraftTableComponentProps<T>) {
   const sensors: SensorDescriptor<SensorOptions>[] = useSensors(
     useSensor(MouseSensor, {}),
@@ -50,12 +53,15 @@ function TableDND<T>({
     >
       <Table
         table={table}
+        activeTab={activeTab}
         featureOptions={featureOptions}
         NestedComponent={NestedComponent}
         columnOrder={columnOrder}
         setColumnOrder={setColumnOrder}
         isCompactTable={isCompactTable}
         tableStates={tableStates}
+        filterSettingStates={filterSettingStates}
+        onSaveSettings={onSaveSettings}
       />
     </DndContext>
   );

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

@@ -14,8 +14,11 @@ import TableHeadPopover from "./table-head-popover";
 
 function DraggableTableHeader<T>({
   header,
+  activeTab,
   featureOptions,
   tableStates,
+  filterSettingStates,
+  onSaveSettings,
 }: TableHeaderProps<T>) {
   const { enableColumnPinning } = featureOptions;
 
@@ -108,6 +111,7 @@ function DraggableTableHeader<T>({
               header={header}
               featureOptions={featureOptions}
               tableStates={tableStates}
+              filterSettingStates={filterSettingStates}
             />
           )}
 
@@ -132,9 +136,12 @@ function DraggableTableHeader<T>({
       {/* Popover */}
       <TableHeadPopover
         anchorEl={anchorEl}
+        activeTab={activeTab}
         onClose={handleClose}
         header={header}
         tableStates={tableStates}
+        filterSettingStates={filterSettingStates}
+        onSaveSettings={onSaveSettings}
       />
     </th>
   );

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

@@ -14,27 +14,45 @@ import {
   IconPinOffOutline,
   IconPinOutline,
 } from "../../assets/svg";
-import { CraftTableOptionsProps } from "../types/table-options";
+import {
+  craftTableFilterSettingsOptionsProps,
+  CraftTableOptionsProps,
+} from "../types/table-options";
 import { useFullscreenPopoverContainer } from "../libs/hooks/useFullScreen";
+import { ENTITY_TYPE, MAPPED_ENTITY_TYPE } from "../libs/utils/common";
+import {
+  ColumnTabConfigProps,
+  SettingsDataProps,
+} from "../types/filter-settings";
+import { useSaveSettingsDataAPI } from "../libs/hooks/useEntityTableAPI";
+import { useQueryClient } from "@tanstack/react-query";
+import { useCraftTableFilterSettings } from "../libs/hooks/useCraftTableFilterSettings";
+import { ColumnItem } from "./table-settings/components/column";
 
 type Props<T> = {
   anchorEl: HTMLElement | null;
+  activeTab?: string;
   onClose: () => void;
   header: Header<T, unknown>;
   tableStates: CraftTableOptionsProps;
+  filterSettingStates: craftTableFilterSettingsOptionsProps;
+  onSaveSettings?: (columnId: string) => void;
 };
 
 function TableHeadPopover<T>({
   anchorEl,
+  activeTab,
   onClose,
   header,
   tableStates,
+  filterSettingStates,
+  onSaveSettings,
 }: Props<T>) {
   const open = Boolean(anchorEl);
   const column = header.column;
   const isPinned = column.getIsPinned() === "left";
   const { container: fullscreenContainer } = useFullscreenPopoverContainer();
-
+  const queryClient = useQueryClient();
   const { wrapColumns, setWrapColumns } = tableStates;
 
   const toggleWrapForColumn = (columnId: string) => {
@@ -44,6 +62,9 @@ function TableHeadPopover<T>({
       all_wrap: false,
     }));
   };
+  const handleUpdateSettings = (columnId: string) => {
+    onSaveSettings && onSaveSettings(columnId);
+  };
 
   return (
     <Popover
@@ -66,7 +87,7 @@ function TableHeadPopover<T>({
           </ListItemIcon>
           <ListItemText primary="Sort descending" />
         </ListItemButton>
-        <ListItemButton onClick={() => column.toggleVisibility()}>
+        <ListItemButton onClick={() => handleUpdateSettings(column?.id)}>
           <ListItemIcon>
             <HideIcon />
           </ListItemIcon>

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

@@ -1,6 +1,7 @@
 import { ColumnOrderState, flexRender, Table } from "@tanstack/react-table";
 import {
   CraftTableFeatureProps,
+  craftTableFilterSettingsOptionsProps,
   CraftTableOptionsProps,
 } from "../types/table-options";
 import { DownArrow, UpArrow } from "../../assets/svg";
@@ -16,16 +17,22 @@ import Checkbox from "./inputs/checkbox";
 
 interface TableHeadProps<T> {
   table: Table<T>;
+  activeTab?: string;
   featureOptions: CraftTableFeatureProps;
   columnOrder: ColumnOrderState;
   tableStates: CraftTableOptionsProps;
+  filterSettingStates: craftTableFilterSettingsOptionsProps;
+  onSaveSettings?: (columnId: string) => void;
 }
 
 function TableHead<T>({
   table,
+  activeTab,
   featureOptions,
   columnOrder,
   tableStates,
+  filterSettingStates,
+  onSaveSettings,
 }: TableHeadProps<T>) {
   const {
     stickyHeader,
@@ -98,8 +105,11 @@ function TableHead<T>({
               >
                 <DraggableTableHeader
                   header={header}
+                  activeTab={activeTab}
                   featureOptions={featureOptions}
                   tableStates={tableStates}
+                  filterSettingStates={filterSettingStates}
+                  onSaveSettings={onSaveSettings}
                 />
               </SortableContext>
             ) : (

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

@@ -34,9 +34,16 @@ export interface TabData {
 interface ColumnTabProps {
   filterSettingStates: craftTableFilterSettingsOptionsProps;
   columnsData: FilterColumnsDataProps;
+  columnTabAttributes?: any[];
+  columnTabAttributesLoading?: boolean;
 }
 
-const ColumnTab = ({ filterSettingStates, columnsData }: ColumnTabProps) => {
+const ColumnTab = ({
+  filterSettingStates,
+  columnsData,
+  columnTabAttributes,
+  columnTabAttributesLoading,
+}: ColumnTabProps) => {
   const [searchTerm, setSearchTerm] = useState<string>("");
   const [selectedTabIndex, setSelectedTabIndex] = useState<number>(0);
 
@@ -72,7 +79,7 @@ const ColumnTab = ({ filterSettingStates, columnsData }: ColumnTabProps) => {
     const isTabWiseEmpty = settingsColumnState?.tabs?.length ? false : true;
 
     const mappedColumns: ColumnItem[] =
-      columnsData?.column_list?.map((column) => ({
+      columnTabAttributes?.map((column) => ({
         label: column?.name,
         value: column?.attribute_key,
       })) || [];
@@ -95,19 +102,25 @@ const ColumnTab = ({ filterSettingStates, columnsData }: ColumnTabProps) => {
           hide_list: [],
         },
       }));
-    } else if (!isColumnDefault && isTabWiseEmpty) {
-      const mappedTabs: TabData[] =
-        quickTabStates?.show_list?.map((tab) => ({
-          tab_name: tab,
-          show_list: mappedColumns,
-          hide_list: [],
-        })) || [];
+    } else if (!isColumnDefault) {
+      const mappedTabs: TabData[] = isTabWiseEmpty
+        ? quickTabStates?.show_list?.map((tab) => ({
+            tab_name: tab,
+            show_list: mappedColumns,
+            hide_list: [],
+          })) || []
+        : quickTabStates?.show_list?.map((tab, index) => ({
+            tab_name: tab,
+            show_list:
+              settingsColumnState?.tabs[index]?.show_list || mappedColumns,
+            hide_list: settingsColumnState?.tabs[index]?.hide_list || [],
+          })) || [];
 
       setSettingsData((prev) => ({
         ...prev,
         column: {
-          ...prev.column,
-          tabs: mappedTabs,
+          ...prev.column, // ✅ required to satisfy SettingsDataProps
+          tabs: mappedTabs, // updating only tabs
         },
       }));
     }
@@ -186,7 +199,13 @@ const ColumnTab = ({ filterSettingStates, columnsData }: ColumnTabProps) => {
       const currentTab = settingsColumnState?.tabs?.[selectedTabIndex];
       return {
         showList: currentTab?.show_list || [],
-        hideList: currentTab?.hide_list || [],
+        hideList:
+          currentTab?.hide_list ||
+          columnTabAttributes?.map((column) => ({
+            label: column?.name,
+            value: column?.attribute_key,
+          })) ||
+          [],
       };
     }
   };
@@ -329,25 +348,65 @@ const ColumnTab = ({ filterSettingStates, columnsData }: ColumnTabProps) => {
   };
 
   const handleShowAll = () => {
-    setSettingsData((prev) => ({
-      ...prev,
-      column: {
-        ...prev.column,
+    if (isColumnDefault) {
+      // Default mode → update global lists
+      setSettingsData((prev) => ({
+        ...prev,
+        column: {
+          ...prev.column,
+          show_list: [...showList, ...hideList],
+          hide_list: [],
+        },
+      }));
+    } else {
+      // Tab mode → update only selected tab
+      const updatedTabs = [...(settingsColumnState.tabs || [])];
+
+      updatedTabs[selectedTabIndex] = {
+        ...updatedTabs[selectedTabIndex],
         show_list: [...showList, ...hideList],
         hide_list: [],
-      },
-    }));
+      };
+
+      setSettingsData((prev) => ({
+        ...prev,
+        column: {
+          ...prev.column,
+          tabs: updatedTabs,
+        },
+      }));
+    }
   };
 
   const handleHideAll = () => {
-    setSettingsData((prev) => ({
-      ...prev,
-      column: {
-        ...prev.column,
+    if (isColumnDefault) {
+      // Default mode → update global lists
+      setSettingsData((prev) => ({
+        ...prev,
+        column: {
+          ...prev.column,
+          show_list: [],
+          hide_list: [...hideList, ...showList],
+        },
+      }));
+    } else {
+      // Tab mode → update only selected tab
+      const updatedTabs = [...(settingsColumnState.tabs || [])];
+
+      updatedTabs[selectedTabIndex] = {
+        ...updatedTabs[selectedTabIndex],
         show_list: [],
         hide_list: [...hideList, ...showList],
-      },
-    }));
+      };
+
+      setSettingsData((prev) => ({
+        ...prev,
+        column: {
+          ...prev.column,
+          tabs: updatedTabs,
+        },
+      }));
+    }
   };
 
   const handleTabChange = (_: React.SyntheticEvent, newValue: number) => {
@@ -371,11 +430,11 @@ const ColumnTab = ({ filterSettingStates, columnsData }: ColumnTabProps) => {
         <Typography variant="subtitle2" sx={{ mb: 1 }}>
           Customize column by
         </Typography>
-        {/* <CustomToggleSwitchButton
+        <CustomToggleSwitchButton
           buttons={TOGGLE_BUTTON_TABS}
           value={isColumnDefault}
           onChange={handleToggleChange}
-        /> */}
+        />
       </Box>
 
       <Box sx={{ flex: 1 }}>