rez-table-listing-mui 1.0.40 → 1.0.41

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

@@ -8,6 +8,7 @@ import {
   Checkbox,
   FormControlLabel,
   Grid,
+  Alert,
 } from "@mui/material";
 
 import ListingValues from "../common/listing-values";
@@ -26,6 +27,7 @@ import {
   SettingsQuickTabProps,
 } from "../../../types/filter-settings";
 import { TabsStyles } from "../style";
+import { ColumnItem, TabData } from "./column";
 
 const QuickTab = ({
   filterSettingStates,
@@ -33,7 +35,8 @@ const QuickTab = ({
   tabsApiData,
   tabsApiDataLoading,
 }: SettingsQuickTabProps) => {
-  const { quickTabStates, setQuickTabStates } = filterSettingStates;
+  const { quickTabStates, setQuickTabStates, settingsData, setColumnTabState } =
+    filterSettingStates;
 
   const [searchTerm, setSearchTerm] = useState<string>("");
 
@@ -54,20 +57,81 @@ const QuickTab = ({
       });
     }
 
-    setQuickTabStates((prev) => ({
-      ...prev,
-      hide_list: tabsApiData, // All data goes to hide_list initially
-      show_list: [], // Empty the show_list when attribute/sorting changes
-    }));
+    if (settingsData?.quick_tab?.attribute !== quickTabStates?.attribute) {
+      setQuickTabStates((prev) => ({
+        ...prev,
+        hide_list: tabsApiData, // All data goes to hide_list initially
+        show_list: [], // Empty the show_list when attribute/sorting changes
+      }));
+    } else {
+      setQuickTabStates((prev) => ({
+        ...prev,
+        hide_list: settingsData?.quick_tab?.hide_list,
+        show_list: settingsData?.quick_tab?.show_list,
+      }));
+    }
   }, [columnsData.column_list, tabsApiData]);
 
+  // When quickTabState show_list or hide_list changes, update the columnTabState
+  useEffect(() => {
+    if (Object.entries(settingsData?.column || {}).length) {
+      const mappedColumns: ColumnItem[] =
+        columnsData?.column_list?.map((column) => ({
+          label: column?.name,
+          value: column?.attribute_key,
+        })) || [];
+      //Later changed TabData to interface from filter settings types file
+      const mappedTabs: TabData[] =
+        quickTabStates?.show_list?.map((tab) => ({
+          tab_name: tab,
+          show_list: mappedColumns,
+          hide_list: [],
+        })) || [];
+
+      if (settingsData?.column?.isDefault) {
+        setColumnTabState((prev) => ({
+          ...prev,
+          show_list: mappedColumns,
+          hide_list: [],
+        }));
+      } else {
+        setColumnTabState((prev) => ({
+          ...prev,
+          tabs: mappedTabs,
+        }));
+      }
+    }
+  }, [quickTabStates.show_list, quickTabStates.hide_list]);
+
   // useEffect(() => {
   //   setQuickTabStates((prev) => ({
   //     ...prev,
   //     hide_list: tabsApiData, // All data goes to hide_list initially
   //     show_list: [], // Empty the show_list when attribute/sorting changes
   //   }));
-  // }, [quickTabStates.attribute, quickTabStates.sorting]);
+  // }, [tabsApiData, quickTabStates.attribute, quickTabStates.sorting]);
+
+  //   if (!Object.entries(quickTabStates).length) {
+  //     // Logic for column
+  //     setColumnTabState((prev) => ({ ...prev, isDefault: true }));
+  //     // Logic for sorting
+  //     setSortingTabState((prev) => ({ ...prev, isDefault: true, tabs: [] }));
+  //   } else {
+  //     // Logic for sorting
+  //     if (!sortingTabState.tabs?.length) {
+  //       const emptySortBy: SortingConfigSortByProps[] = [
+  //         { column: "", order: "asc" },
+  //       ];
+  //       setSortingTabState((prev) => ({
+  //         ...prev,
+  //         tabs: quickTabStates?.show_list?.map((tab) => ({
+  //           tab_name: tab,
+  //           sortby: emptySortBy,
+  //         })),
+  //       }));
+  //     }
+  //   }
+  // }, [quickTabStates]);
 
   const sortingOptions = [
     { label: "A-Z", value: "asc" },
@@ -131,7 +195,9 @@ const QuickTab = ({
       let newShowList = [...(quickTabStates.show_list ?? [])];
       let newHideList = [...(quickTabStates.hide_list ?? [])];
       if (currentContainer === "list" && overContainer === "tabs") {
+        if (newShowList.length >= 5) return; // prevent overflow
         // Move from hide to show
+
         const idx = newHideList.indexOf(String(active.id));
         if (idx !== -1) {
           newHideList.splice(idx, 1);
@@ -159,15 +225,24 @@ const QuickTab = ({
 
   // Show All/Hide All logic (local only)
   const handleShowAll = () => {
+    const currentShowList = quickTabStates.show_list || [];
+    const currentHideList = quickTabStates.hide_list || [];
+
+    const availableSlots = 5 - currentShowList.length;
+
+    if (availableSlots <= 0) return; // Already at limit
+
+    const limitedHideList = currentHideList.slice(0, availableSlots);
+
     setQuickTabStates({
       ...quickTabStates,
-      show_list: [
-        ...(quickTabStates.show_list || []),
-        ...(quickTabStates.hide_list || []),
-      ],
-      hide_list: [],
+      show_list: [...currentShowList, ...limitedHideList],
+      hide_list: currentHideList.filter(
+        (item) => !limitedHideList.includes(item)
+      ),
     });
   };
+
   const handleHideAll = () => {
     setQuickTabStates({
       ...quickTabStates,
@@ -197,13 +272,48 @@ const QuickTab = ({
     });
   };
 
+  const handleItemToggle = (itemId: string, fromContainerId: string) => {
+    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.indexOf(itemId);
+      if (index > -1) {
+        toHideList.splice(index, 1);
+        toShowList.push(itemId);
+      }
+    } else if (fromContainerId === "tabs") {
+      // Move from show_list to hide_list
+      const index = toShowList.indexOf(itemId);
+      if (index > -1) {
+        toShowList.splice(index, 1);
+        toHideList.push(itemId);
+      }
+    }
+
+    setQuickTabStates({
+      ...quickTabStates,
+      show_list: toShowList,
+      hide_list: toHideList,
+    });
+  };
+
   return (
-    <Box sx={{ maxHeight: "600px" }}>
+    <Box
+      sx={{
+        display: "flex",
+        flexDirection: "column",
+        // gap: "0.5rem",
+        height: "100%",
+      }}
+    >
       <Typography variant="caption" sx={TabsStyles.mainTabsHeader}>
         *Quick filter settings will be reflected in horizontal tabs
       </Typography>
-      <Box sx={{ maxHeight: "500px", borderRadius: 1, bgcolor: "white" }}>
-        <Grid container spacing={2}>
+      <Box>
+        <Grid container>
           <Grid size={12}>
             <Box>
               <Grid sx={TabsStyles.mainTabDropdown} size={6}>
@@ -252,6 +362,22 @@ const QuickTab = ({
               </Grid>
             </Box>
           </Grid>
+          <Grid
+            sx={{
+              marginLeft: "33.2rem",
+            }}
+            size={12}
+          >
+            <Alert
+              severity="info"
+              sx={{
+                fontSize: "12px",
+                color: "#088AB2",
+              }}
+            >
+              Please select at least 1 and at most 5 values to display as tabs.
+            </Alert>
+          </Grid>
           <DndContext
             sensors={sensors}
             collisionDetection={closestCenter}
@@ -267,6 +393,7 @@ const QuickTab = ({
                 setSearchTerm={setSearchTerm}
                 containerId="list"
                 tabsApiDataLoading={tabsApiDataLoading}
+                onItemToggle={handleItemToggle}
               />
               <ListingValues
                 buttonText="Hide All"
@@ -275,6 +402,7 @@ const QuickTab = ({
                 filteredValues={showListValues}
                 containerId="tabs"
                 // tabsApiDataLoading={tabsApiDataLoading}
+                onItemToggle={handleItemToggle}
               />
             </Grid>
           </DndContext>
@@ -314,20 +442,6 @@ const QuickTab = ({
           </Grid>
         </Grid>
       </Box>
-      {/* <DialogActions sx={{ justifyContent: "flex-end", padding: "16px 24px" }}>
-        <Button
-          variant="contained"
-          sx={{ textTransform: "none" }}
-          onClick={() => {
-            setSettingsData((prev: any) => ({
-              ...prev,
-              quick_tab: quickTabStates,
-            }));
-          }}
-        >
-          Save Quick Tab
-        </Button>
-      </DialogActions> */}
     </Box>
   );
 };