rez-table-listing-mui 1.3.44 → 1.3.45

package/src/listing/components/table-settings/components/quick-tab.tsx

@@ -29,15 +29,24 @@ import {
 import { TabsStyles } from "../style";
 import InfoAlert from "../common/info-alert";
 import { useFullscreenPopoverContainer } from "../../../libs/hooks/useFullScreen";
+import { ColumnItem } from "./column";
 
 const QuickTab = ({
   filterSettingStates,
   columnsData,
   tabsApiData,
   tabsApiDataLoading,
+  activeTab,
+  columnTabAttributes,
 }: SettingsQuickTabProps) => {
-  const { settingsData, setSettingsData, saveButtonError, setSaveButtonError } =
-    filterSettingStates;
+  const {
+    settingsData,
+    setSettingsData,
+    saveButtonError,
+    setSaveButtonError,
+    columnTabState,
+    sortingTabState,
+  } = filterSettingStates;
   const { container: fullscreenContainer } = useFullscreenPopoverContainer();
 
   const [searchTerm, setSearchTerm] = useState<string>("");
@@ -46,7 +55,15 @@ const QuickTab = ({
   );
 
   const quickTabStates = settingsData?.quick_tab as QuickTabConfigProps;
-
+  const mappedColumns: ColumnItem[] =
+    columnTabAttributes?.map((column) => ({
+      label: column?.name,
+      value: column?.attribute_key,
+    })) || [];
+  // const activeTabIndex = filterSettingStates?.columnTabState?.tabs?.findIndex(
+  //   (tab) => tab?.tab_name?.value == activeTab
+  //   // tab?.tab_name?.label?.toLowerCase() == activeTab?.toLowerCase()
+  // );
   // In case there is no quick tab state from API
   useEffect(() => {
     const stateToArray =
@@ -169,82 +186,240 @@ const QuickTab = ({
   // Drag and drop logic, update only local state
   const handleDragEnd = (event: DragEndEvent) => {
     const { active, over } = event;
-    if (!over) {
-      return;
-    }
+    if (!over) return;
+
     const currentContainer = active.data.current?.containerId;
     const overContainer = over.data.current?.containerId;
+
     if (!currentContainer || !overContainer) return;
+
+    let newShowList = [...(quickTabStates.show_list ?? [])];
+    let newHideList = [...(quickTabStates.hide_list ?? [])];
+
+    // -------------------------------------
+    // CASE 1: REORDER INSIDE SAME LIST
+    // -------------------------------------
     if (currentContainer === overContainer) {
-      // Reorder within the same list
-      let newShowList = [...(quickTabStates.show_list ?? [])];
-      let newHideList = [...(quickTabStates.hide_list ?? [])];
       if (currentContainer === "list") {
-        // const oldIndex = newHideList.indexOf(String(active.id));
         const oldIndex = newHideList.findIndex((i) => i.value === active.id);
-        const newIndex = newHideList.findIndex((i) => i.value === over.id); //newHideList.indexOf(String(over.id));
+        const newIndex = newHideList.findIndex((i) => i.value === over.id);
+
         if (oldIndex !== -1 && newIndex !== -1) {
           const [removed] = newHideList.splice(oldIndex, 1);
           newHideList.splice(newIndex, 0, removed);
         }
       } else {
-        const oldIndex = newShowList.findIndex((i) => i.value === active.id); //newShowList.indexOf(String(active.id));
-        const newIndex = newShowList.findIndex((i) => i.value === over.id); //newShowList.indexOf(String(over.id));
+        const oldIndex = newShowList.findIndex((i) => i.value === active.id);
+        const newIndex = newShowList.findIndex((i) => i.value === over.id);
+
         if (oldIndex !== -1 && newIndex !== -1) {
           const [removed] = newShowList.splice(oldIndex, 1);
           newShowList.splice(newIndex, 0, removed);
         }
       }
+    }
 
-      setSettingsData((prev) => ({
-        ...prev,
-        quick_tab: {
-          ...prev?.quick_tab,
-          show_list: newShowList,
-          hide_list: newHideList,
-        },
-      }));
-    } else {
-      // Move between lists
-      let newShowList = [...(quickTabStates.show_list ?? [])];
-      let newHideList = [...(quickTabStates.hide_list ?? [])];
+    // -------------------------------------
+    // CASE 2: MOVE BETWEEN LISTS
+    // -------------------------------------
+    if (currentContainer !== overContainer) {
       if (currentContainer === "list" && overContainer === "tabs") {
-        if (newShowList.length >= 5) return; // prevent overflow
-        // Move from hide to show
-
-        const idx = newHideList.findIndex((i) => i.value === String(active.id)); //newHideList.indexOf(String(active.id));
-        if (idx !== -1) {
-          newHideList.splice(idx, 1);
-          newShowList.push({
-            value: String(active.id),
-            label:
-              tabsApiData?.find((i) => i.value === String(active.id))?.label ??
-              "",
-          });
+        if (newShowList.length < 5) {
+          const idx = newHideList.findIndex(
+            (i) => i.value === String(active.id)
+          );
+          if (idx !== -1) {
+            const item = newHideList.splice(idx, 1)[0];
+            newShowList.push(item);
+
+            // 🌟 ALSO create sorting tab entry if missing
+            // if (!settingsData?.sorting?.isDefault) {
+            //   const exists = settingsData.sorting?.tabs?.some(
+            //     (t) => t.tab_name.value === item.value
+            //   );
+
+            //   if (!exists) {
+            //     settingsData?.sorting.tabs.push({
+            //       tab_name: item,
+            //       sortby: [{ column: "", order: "asc" }],
+            //     });
+            //   }
+            // }
+
+            setSettingsData((prev) => {
+              let updatedSorting = prev.sorting;
+              let updatedColumn = prev.column;
+
+              // ---------------------------------------------------
+              // ⭐ Add to sorting.tabs (if not default and not exist)
+              // ---------------------------------------------------
+              if (!prev?.sorting?.isDefault) {
+                const sortingExists = prev.sorting?.tabs?.some(
+                  (t) => t.tab_name.value === item.value
+                );
+
+                if (!sortingExists) {
+                  updatedSorting = {
+                    ...prev.sorting,
+                    tabs: [
+                      ...prev.sorting.tabs,
+                      {
+                        tab_name: item,
+                        sortby: [],
+                      },
+                    ],
+                  };
+                }
+              }
+
+              // ---------------------------------------------------
+              // ⭐ Add to column.tabs (if not default and not exist)
+              // ---------------------------------------------------
+              if (!prev?.column?.isDefault) {
+                const columnExists = prev.column?.tabs?.some(
+                  (t) => t.tab_name.value === item.value
+                );
+
+                if (!columnExists) {
+                  updatedColumn = {
+                    ...prev.column,
+                    tabs: [
+                      ...prev.column.tabs,
+                      {
+                        tab_name: item,
+                        show_list: mappedColumns,
+                        hide_list: [],
+                      },
+                    ],
+                  };
+                }
+              }
+
+              // ---------------------------------------------------
+              // ⭐ FINAL RETURN
+              // ---------------------------------------------------
+              return {
+                ...prev,
+                sorting: updatedSorting,
+                column: updatedColumn,
+              };
+            });
+          }
         }
       } else if (currentContainer === "tabs" && overContainer === "list") {
-        // Move from show to hide
-        const idx = newShowList.findIndex((i) => i.value === String(active.id)); //newShowList.indexOf(String(active.id));
+        const idx = newShowList.findIndex((i) => i.value === String(active.id));
         if (idx !== -1) {
-          newShowList.splice(idx, 1);
-          newHideList.push({
-            value: String(active.id),
-            label:
-              tabsApiData?.find((i) => i.value === String(active.id))?.label ??
-              "",
+          const item = newShowList.splice(idx, 1)[0];
+          newHideList.push(item);
+          setSettingsData((prev) => {
+            let updatedSorting = prev.sorting;
+            let updatedColumn = prev.column;
+
+            // ---------------------------------------------------
+            // Remove from sorting.tabs (if not default)
+            // ---------------------------------------------------
+            if (!prev?.sorting?.isDefault) {
+              updatedSorting = {
+                ...prev.sorting,
+                tabs: prev?.sorting?.tabs?.filter(
+                  (t) => t.tab_name?.value !== item?.value
+                ),
+              };
+            }
+
+            // ---------------------------------------------------
+            // Remove from column.tabs (if not default)
+            // ---------------------------------------------------
+            if (!prev?.column?.isDefault) {
+              updatedColumn = {
+                ...prev.column,
+                tabs: prev?.column?.tabs?.filter(
+                  (t) => t.tab_name?.value !== item?.value
+                ),
+              };
+            }
+
+            // ---------------------------------------------------
+            // ⭐ FINAL RETURN
+            // ---------------------------------------------------
+            return {
+              ...prev,
+              sorting: updatedSorting,
+              column: updatedColumn,
+            };
           });
         }
       }
+    }
 
-      setSettingsData((prev) => ({
+    // ----------------------------------------------------------
+    // ⭐ APPLY MASTER UPDATE (with isDefault CHECK for columns)
+    // ----------------------------------------------------------
+    setSettingsData((prev) => {
+      let updatedColumn = prev.column;
+
+      // -----------------------------------------
+      // ⭐ COLUMN REORDER (only if NOT default)
+      // -----------------------------------------
+      if (!prev?.column?.isDefault) {
+        updatedColumn = {
+          ...prev.column,
+          tabs: prev.column?.tabs
+            ? [...prev.column.tabs].sort((a, b) => {
+                const i1 = newShowList.findIndex(
+                  (t) => t.value === a.tab_name.value
+                );
+                const i2 = newShowList.findIndex(
+                  (t) => t.value === b.tab_name.value
+                );
+                return i1 - i2;
+              })
+            : [],
+        };
+      }
+
+      // -----------------------------------------
+      // ⭐ SORTING REORDER (same pattern as column)
+      // -----------------------------------------
+      const updatedSorting = (() => {
+        // If default → clear tabs
+        if (prev.sorting?.isDefault) {
+          return {
+            isDefault: true,
+            sort_by: prev.sorting?.sort_by || "asc",
+          };
+        }
+
+        // If custom → reorder tabs based on newShowList
+        const sorted = {
+          ...prev.sorting,
+          tabs: prev.sorting?.tabs
+            ? [...prev.sorting.tabs].sort((a, b) => {
+                const i1 = newShowList.findIndex(
+                  (t) => t.value === a.tab_name.value
+                );
+                const i2 = newShowList.findIndex(
+                  (t) => t.value === b.tab_name.value
+                );
+                return i1 - i2;
+              })
+            : [],
+        };
+        return sorted;
+      })();
+
+      // FINAL RETURN
+      return {
         ...prev,
         quick_tab: {
-          ...prev?.quick_tab,
+          ...prev.quick_tab,
           show_list: newShowList,
           hide_list: newHideList,
         },
-      }));
-    }
+        column: updatedColumn,
+        sorting: updatedSorting,
+      };
+    });
   };
 
   const filteredListValues = hideListValues.filter((value) =>
@@ -275,17 +450,67 @@ const QuickTab = ({
   };
 
   const handleHideAll = () => {
-    setSettingsData((prev) => ({
-      ...prev,
-      quick_tab: {
+    setSettingsData((prev) => {
+      const updatedQuickTab = {
         ...prev?.quick_tab,
         hide_list: [
           ...(prev?.quick_tab?.hide_list || []),
           ...(prev?.quick_tab?.show_list || []),
         ],
         show_list: [],
-      },
-    }));
+      };
+
+      // Reset only the lists, not the whole structure
+      const updatedColumn = (() => {
+        if (prev?.column?.isDefault) {
+          return {
+            ...prev.column,
+            show_list: [],
+            hide_list: [
+              ...(prev.column?.hide_list || []),
+              ...(prev.column?.show_list || []),
+            ],
+          };
+        }
+
+        // Tab mode → reset each tab's field lists
+        const updatedTabs = prev?.column?.tabs?.map((t) => ({
+          ...t,
+          show_list: [],
+          hide_list: [...(t.hide_list || []), ...(t.show_list || [])],
+        }));
+
+        return {
+          ...prev.column,
+          tabs: updatedTabs,
+        };
+      })();
+
+      const updatedSorting = (() => {
+        // DEFAULT MODE: sorting applies globally
+        if (prev.sorting?.isDefault) {
+          return {
+            ...prev.sorting,
+            sortby: [], // reset sort
+          };
+        }
+
+        // TAB MODE: need to clear sorting per tab
+        return {
+          ...prev.sorting,
+          tabs: prev.quick_tab?.show_list?.map(() => ({
+            sortby: [],
+          })),
+        };
+      })();
+
+      return {
+        ...prev,
+        quick_tab: updatedQuickTab,
+        column: updatedColumn,
+        sorting: updatedSorting,
+      };
+    });
   };
 
   // Checkbox logic (local only)
@@ -317,31 +542,104 @@ const QuickTab = ({
     const toShowList = [...(quickTabStates.show_list ?? [])];
     const toHideList = [...(quickTabStates.hide_list ?? [])];
 
-    if (fromContainerId === "list") {
-      if (toShowList.length >= 5) return; // prevent overflow
-      // Move from hide_list to show_list
-      const index = toHideList.findIndex((i) => i.value == item.value);
-      if (index > -1) {
-        toHideList.splice(index, 1);
-        toShowList.push(item);
-      }
-    } else if (fromContainerId === "tabs") {
-      // Move from show_list to hide_list
-      const index = toShowList.indexOf(item);
-      if (index > -1) {
-        toShowList.splice(index, 1);
-        toHideList.push(item);
+    setSettingsData((prev) => {
+      let updatedColumn = prev.column; // default (unchanged)
+      let updatedSorting = prev.sorting;
+
+      if (fromContainerId === "list") {
+        if (toShowList.length >= 5) return prev;
+
+        const index = toHideList.findIndex((i) => i.value == item.value);
+        if (index > -1) {
+          toHideList.splice(index, 1);
+          toShowList.push(item);
+          // 🌟 ALSO create sorting tab entry if missing
+          if (!sortingTabState?.isDefault) {
+            const exists = prev.sorting?.tabs?.some(
+              (t) => t.tab_name.value === item.value
+            );
+            if (!exists) {
+              updatedSorting = {
+                ...prev.sorting,
+                tabs: [
+                  ...prev.sorting.tabs,
+                  {
+                    tab_name: {
+                      label: item.label,
+                      value: item.value,
+                    },
+                    sortby: [],
+                  },
+                ],
+              };
+            }
+          }
+          if (!columnTabState?.isDefault) {
+            const exists = prev?.column?.tabs?.some(
+              (t) => t.tab_name.value === item.value
+            );
+            if (!exists) {
+              updatedColumn = {
+                ...prev.column,
+                tabs: [
+                  ...prev.column.tabs,
+                  {
+                    tab_name: {
+                      label: item.label,
+                      value: item.value,
+                    },
+                    show_list: mappedColumns,
+                    hide_list: [],
+                  },
+                ],
+              };
+            }
+          }
+        }
+      } else if (fromContainerId === "tabs") {
+        const index = toShowList.findIndex((i) => i.value == item.value);
+        if (index > -1) {
+          toShowList.splice(index, 1);
+          toHideList.push(item);
+          // let itemIndex =
+          //   filterSettingStates?.quickTabStates?.show_list?.findIndex(
+          //     (i) => i.value == item.value
+          //   );
+          // 🔥 REMOVE COLUMN WHEN TAB REMOVED (if not default)
+          if (!columnTabState?.isDefault) {
+            const updatedTabs = prev?.column?.tabs.filter(
+              (tab) => tab.tab_name?.value !== item.value
+            );
+
+            updatedColumn = {
+              ...prev.column,
+              tabs: updatedTabs,
+            };
+          }
+
+          if (!sortingTabState.isDefault) {
+            const updatedSortingTabs = prev?.sorting?.tabs?.filter(
+              (tab) => tab.tab_name?.value != item.value
+            );
+            updatedSorting = {
+              ...prev.sorting,
+              tabs: updatedSortingTabs,
+            };
+          }
+        }
       }
-    }
 
-    setSettingsData((prev) => ({
-      ...prev,
-      quick_tab: {
-        ...prev?.quick_tab,
-        show_list: toShowList,
-        hide_list: toHideList,
-      },
-    }));
+      return {
+        ...prev,
+        quick_tab: {
+          ...prev?.quick_tab,
+          show_list: toShowList,
+          hide_list: toHideList,
+        },
+        column: updatedColumn,
+        sorting: updatedSorting,
+      };
+    });
   };
 
   const enableDND = quickTabStates?.sorting === "custom" ? true : false;
@@ -373,6 +671,26 @@ const QuickTab = ({
                           ...prev?.quick_tab,
                           attribute: e.target.value,
                         },
+                        // column: prev.column?.isDefault
+                        //   ? {
+                        //       ...prev.column,
+                        //       show_list: mappedColumns,
+                        //       hide_list: [],
+                        //     }
+                        //   : {
+                        //       ...prev.column,
+                        //       tabs: [],
+                        //     },
+
+                        // sorting: prev.sorting?.isDefault
+                        //   ? {
+                        //       ...prev.sorting,
+                        //       sortby: [],
+                        //     }
+                        //   : {
+                        //       ...prev.sorting,
+                        //       tabs: [],
+                        //     },
                       }))
                     }
                     MenuProps={{ container: fullscreenContainer }}