rez-table-listing-mui 1.0.48 → 1.0.50

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

@@ -23,11 +23,11 @@ import {
   DragEndEvent,
 } from "@dnd-kit/core";
 import {
-  QuickTabSortingType,
+  QuickTabConfigProps,
   SettingsQuickTabProps,
 } from "../../../types/filter-settings";
 import { TabsStyles } from "../style";
-import { ColumnItem, TabData } from "./column";
+import InfoAlert from "../common/info-alert";
 
 const QuickTab = ({
   filterSettingStates,
@@ -35,116 +35,207 @@ const QuickTab = ({
   tabsApiData,
   tabsApiDataLoading,
 }: SettingsQuickTabProps) => {
-  const {
-    quickTabStates,
-    setQuickTabStates,
-    settingsData,
-    setColumnTabState,
-    saveButtonError,
-    setSaveButtonError,
-  } = filterSettingStates;
+  const { settingsData, setSettingsData, saveButtonError, setSaveButtonError } =
+    filterSettingStates;
 
   const [searchTerm, setSearchTerm] = useState<string>("");
+  const [currentQuickAttribute, setCurrentQuickAttribute] = useState<string>(
+    settingsData?.quick_tab?.attribute || ""
+  );
+
+  const quickTabStates = settingsData?.quick_tab as QuickTabConfigProps;
 
+  // In case there is no quick tab state from API
   useEffect(() => {
-    // if Tab changes i dont want to reset the show list and hide list in tab change the api musnt trigger for the show list and hide list
-
-    if (!Object.entries(quickTabStates).length) {
-      // if (quickTabStates && quickTabStates.show_list?.length) return;
-      setQuickTabStates({
-        attribute: columnsData?.column_list?.filter(
-          (item) => item.datasource_list
-        )[0]?.attribute_key,
-        sorting: sortingOptions[0]?.value as QuickTabSortingType,
-        hide_list: [],
-        show_list: [],
-        isAllSelected: true,
-        isCombineOther: false,
-      });
-    }
+    const stateToArray =
+      (quickTabStates && Object.entries(quickTabStates)) || [];
+    const isEmptyState = stateToArray.length ? false : true;
 
-    if (settingsData?.quick_tab?.attribute !== quickTabStates?.attribute) {
-      setQuickTabStates((prev) => ({
+    if (isEmptyState) {
+      setSettingsData((prev) => ({
         ...prev,
-        hide_list: tabsApiData, // All data goes to hide_list initially
-        show_list: [], // Empty the show_list when attribute/sorting changes
+        quick_tab: {
+          ...prev?.quick_tab,
+          attribute: columnsData?.column_list?.filter(
+            (item) => item.datasource_list
+          )[0]?.attribute_key,
+          sorting: "asc",
+        },
       }));
-    } else {
-      setQuickTabStates((prev) => ({
+    }
+  }, [columnsData]);
+
+  // When user changes attribute
+  useEffect(() => {
+    if (currentQuickAttribute === settingsData?.quick_tab?.attribute) return;
+
+    if (tabsApiData?.length) {
+      setSettingsData((prev) => ({
         ...prev,
-        hide_list: settingsData?.quick_tab?.hide_list,
-        show_list: settingsData?.quick_tab?.show_list,
+        quick_tab: {
+          ...prev?.quick_tab,
+          hide_list: tabsApiData,
+          show_list: [],
+        },
       }));
+
+      setCurrentQuickAttribute(settingsData.quick_tab?.attribute || "");
     }
-  }, [columnsData.column_list, tabsApiData]);
+  }, [tabsApiData]);
 
-  // When quickTabState show_list or hide_list changes, update the columnTabState
+  // Validation when user changes show list or hide list
   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: [],
-        }));
+    const showList = quickTabStates?.show_list || [];
+    const hideList = quickTabStates?.hide_list || [];
+
+    if (showList || hideList) {
+      // Check if showList is valid (between 1 and 5 items)
+      const isValidShowList = showList.length > 0 && showList.length <= 5;
+      const ERROR_CODE = "quick_tab_error";
+
+      if (!isValidShowList) {
+        const errorMessage = {
+          type: ERROR_CODE,
+          message:
+            showList.length === 0
+              ? "Quick Tab: Please select at least one item"
+              : "Quick Tab: Please select no more than 5 items",
+        };
+
+        // Check if the error is already present in the messages array
+        const hasQuickTabError = saveButtonError?.messages?.some(
+          (message) => message.type === ERROR_CODE
+        );
+
+        // Update the error state
+        setSaveButtonError((prev) => {
+          const otherMessages =
+            prev?.messages?.filter((message) => message.type !== ERROR_CODE) ||
+            [];
+
+          return {
+            ...prev,
+            hasError: true,
+            messages: hasQuickTabError
+              ? [...prev?.messages]
+              : [...otherMessages, errorMessage],
+          };
+        });
       } else {
-        setColumnTabState((prev) => ({
+        const hasOtherMessages = saveButtonError?.messages?.some(
+          (message) => message.type !== ERROR_CODE
+        );
+        // Reset error state if the list is valid
+        setSaveButtonError((prev) => ({
           ...prev,
-          tabs: mappedTabs,
+          hasError: hasOtherMessages,
+          messages:
+            prev?.messages?.filter((message) => message.type !== ERROR_CODE) ||
+            [],
         }));
       }
     }
+  }, [quickTabStates?.hide_list, quickTabStates?.show_list]);
 
-    // check for error
-    const hasInvalidValidShowList =
-      quickTabStates.show_list &&
-      (quickTabStates.show_list?.length === 0 ||
-        quickTabStates.show_list.length >= 5);
-
-    if (hasInvalidValidShowList) {
-      // Check if error is already in the state to avoid duplication
-      const errorMessage = {
-        type: "quick_tab_error",
-        message:
-          "Quick Tab : View as Tabs should have at least 1 and at most 5 tabs.",
-      };
-      const hasQuickTabError = saveButtonError?.messages?.some(
-        (message) => message.type === "quick_tab_error"
-      );
-
-      if (!hasQuickTabError) {
-        setSaveButtonError((prev) => ({
-          ...prev,
-          hasError: true,
-          messages: [...(prev?.messages || []), errorMessage], // Only add if it doesn't exist
-        }));
-      }
-    } else {
-      const otherMessages =
-        saveButtonError?.messages?.filter(
-          (message) => message.type !== "quick_tab_error"
-        ) || [];
+  // useEffect(() => {
+  //   // if Tab changes i dont want to reset the show list and hide list in tab change the api musnt trigger for the show list and hide list
 
-      setSaveButtonError((prev) => ({
-        ...prev,
-        hasError: otherMessages.length > 0,
-        messages: otherMessages,
-      }));
-    }
-  }, [quickTabStates.show_list, quickTabStates.hide_list]);
+  //   if (!Object.entries(quickTabStates).length) {
+  //     // if (quickTabStates && quickTabStates.show_list?.length) return;
+  //     setQuickTabStates({
+  //       attribute: columnsData?.column_list?.filter(
+  //         (item) => item.datasource_list
+  //       )[0]?.attribute_key,
+  //       sorting: sortingOptions[0]?.value as QuickTabSortingType,
+  //       hide_list: [],
+  //       show_list: [],
+  //       isAllSelected: true,
+  //       isCombineOther: false,
+  //     });
+  //   }
+
+  //   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,
+  //       }));
+  //     }
+  //   }
+
+  //   // check for error
+  //   const hasInvalidValidShowList =
+  //     quickTabStates.show_list &&
+  //     (quickTabStates.show_list?.length === 0 ||
+  //       quickTabStates.show_list.length >= 5);
+
+  //   if (hasInvalidValidShowList) {
+  //     // Check if error is already in the state to avoid duplication
+  //     const errorMessage = {
+  //       type: "quick_tab_error",
+  //       message:
+  //         "Quick Tab : View as Tabs should have at least 1 and at most 5 tabs.",
+  //     };
+  //     const hasQuickTabError = saveButtonError?.messages?.some(
+  //       (message) => message.type === "quick_tab_error"
+  //     );
+
+  //     if (!hasQuickTabError) {
+  //       setSaveButtonError((prev) => ({
+  //         ...prev,
+  //         hasError: true,
+  //         messages: [...(prev?.messages || []), errorMessage], // Only add if it doesn't exist
+  //       }));
+  //     }
+  //   } else {
+  //     const otherMessages =
+  //       saveButtonError?.messages?.filter(
+  //         (message) => message.type !== "quick_tab_error"
+  //       ) || [];
+
+  //     setSaveButtonError((prev) => ({
+  //       ...prev,
+  //       hasError: otherMessages.length > 0,
+  //       messages: otherMessages,
+  //     }));
+  //   }
+  // }, [quickTabStates.show_list, quickTabStates.hide_list]);
 
   // useEffect(() => {
   //   setQuickTabStates((prev) => ({
@@ -185,11 +276,11 @@ const QuickTab = ({
   ];
 
   // Convert show_list/hide_list to FilterValue[] for rendering only
-  const showListValues = (quickTabStates.show_list || [])?.map((id) => ({
+  const showListValues = (quickTabStates?.show_list || [])?.map((id) => ({
     id,
     label: id?.charAt(0)?.toUpperCase() + id?.slice(1),
   }));
-  const hideListValues = (quickTabStates.hide_list || []).map((id) => ({
+  const hideListValues = (quickTabStates?.hide_list || []).map((id) => ({
     id,
     label: id?.charAt(0)?.toUpperCase() + id?.slice(1),
   }));
@@ -228,11 +319,15 @@ const QuickTab = ({
           newShowList.splice(newIndex, 0, removed);
         }
       }
-      setQuickTabStates({
-        ...quickTabStates,
-        show_list: newShowList,
-        hide_list: newHideList,
-      });
+
+      setSettingsData((prev) => ({
+        ...prev,
+        quick_tab: {
+          ...prev.quick_tab,
+          show_list: newShowList,
+          hide_list: newHideList,
+        },
+      }));
     } else {
       // Move between lists
       let newShowList = [...(quickTabStates.show_list ?? [])];
@@ -254,11 +349,15 @@ const QuickTab = ({
           newHideList.push(String(active.id));
         }
       }
-      setQuickTabStates({
-        ...quickTabStates,
-        show_list: newShowList,
-        hide_list: newHideList,
-      });
+
+      setSettingsData((prev) => ({
+        ...prev,
+        quick_tab: {
+          ...prev.quick_tab,
+          show_list: newShowList,
+          hide_list: newHideList,
+        },
+      }));
     }
   };
 
@@ -277,42 +376,52 @@ const QuickTab = ({
 
     const limitedHideList = currentHideList.slice(0, availableSlots);
 
-    setQuickTabStates({
-      ...quickTabStates,
-      show_list: [...currentShowList, ...limitedHideList],
-      hide_list: currentHideList.filter(
-        (item) => !limitedHideList.includes(item)
-      ),
-    });
+    setSettingsData((prev) => ({
+      ...prev,
+      quick_tab: {
+        ...prev.quick_tab,
+        show_list: [...currentShowList, ...limitedHideList],
+        hide_list: currentHideList.filter(
+          (item) => !limitedHideList.includes(item)
+        ),
+      },
+    }));
   };
 
   const handleHideAll = () => {
-    setQuickTabStates({
-      ...quickTabStates,
-      hide_list: [
-        ...(quickTabStates.hide_list || []),
-        ...(quickTabStates.show_list || []),
-      ],
-      show_list: [],
-    });
+    setSettingsData((prev) => ({
+      ...prev,
+      quick_tab: {
+        ...prev.quick_tab,
+        hide_list: [
+          ...(prev?.quick_tab?.hide_list || []),
+          ...(prev?.quick_tab?.show_list || []),
+        ],
+        show_list: [],
+      },
+    }));
   };
 
   // Checkbox logic (local only)
   const handleShowAllTabChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    // setShowAllTab(e.target.checked);
-    setQuickTabStates({
-      ...quickTabStates,
-      isAllSelected: e.target.checked,
-    });
+    setSettingsData((prev) => ({
+      ...prev,
+      quick_tab: {
+        ...prev.quick_tab,
+        isAllSelected: e.target.checked,
+      },
+    }));
   };
   const handleCombineOtherTabChange = (
     e: React.ChangeEvent<HTMLInputElement>
   ) => {
-    // setCombineOtherTab(e.target.checked);
-    setQuickTabStates({
-      ...quickTabStates,
-      isCombineOther: e.target.checked,
-    });
+    setSettingsData((prev) => ({
+      ...prev,
+      quick_tab: {
+        ...prev.quick_tab,
+        isCombineOther: e.target.checked,
+      },
+    }));
   };
 
   const handleItemToggle = (itemId: string, fromContainerId: string) => {
@@ -336,13 +445,18 @@ const QuickTab = ({
       }
     }
 
-    setQuickTabStates({
-      ...quickTabStates,
-      show_list: toShowList,
-      hide_list: toHideList,
-    });
+    setSettingsData((prev) => ({
+      ...prev,
+      quick_tab: {
+        ...prev.quick_tab,
+        show_list: toShowList,
+        hide_list: toHideList,
+      },
+    }));
   };
 
+  const enableDND = quickTabStates?.sorting === "custom" ? true : false;
+
   return (
     <Box
       sx={{
@@ -356,7 +470,7 @@ const QuickTab = ({
         *Quick filter settings will be reflected in horizontal tabs
       </Typography>
       <Box>
-        <Grid container>
+        <Grid sx={{ position: "relative" }} container>
           <Grid size={12}>
             <Box>
               <Grid sx={TabsStyles.mainTabDropdown} size={6}>
@@ -364,9 +478,12 @@ const QuickTab = ({
                   <Select
                     value={quickTabStates?.attribute || ""}
                     onChange={(e) =>
-                      setQuickTabStates((prevState) => ({
-                        ...prevState,
-                        attribute: e.target.value,
+                      setSettingsData((prev) => ({
+                        ...prev,
+                        quick_tab: {
+                          ...prev?.quick_tab,
+                          attribute: e.target.value,
+                        },
                       }))
                     }
                   >
@@ -387,12 +504,15 @@ const QuickTab = ({
                   size="small"
                 >
                   <Select
-                    value={quickTabStates.sorting || "asc"}
+                    value={quickTabStates?.sorting || "asc"}
                     onChange={(e) =>
-                      setQuickTabStates({
-                        ...quickTabStates,
-                        sorting: e.target.value,
-                      })
+                      setSettingsData((prev) => ({
+                        ...prev,
+                        quick_tab: {
+                          ...prev?.quick_tab,
+                          sorting: e.target.value,
+                        },
+                      }))
                     }
                   >
                     {sortingOptions.map((option) => (
@@ -405,13 +525,8 @@ const QuickTab = ({
               </Grid>
             </Box>
           </Grid>
-          <Grid
-            sx={{
-              marginLeft: "33.2rem",
-            }}
-            size={12}
-          >
-            <Alert
+          <Grid>
+            {/* <Alert
               severity="info"
               sx={{
                 fontSize: "12px",
@@ -419,14 +534,14 @@ const QuickTab = ({
               }}
             >
               Please select at least 1 and at most 5 values to display as tabs.
-            </Alert>
+            </Alert> */}
           </Grid>
           <DndContext
             sensors={sensors}
             collisionDetection={closestCenter}
             onDragEnd={handleDragEnd}
           >
-            <Grid container spacing={2} size={12}>
+            <Grid sx={{ mt: 2 }} container spacing={2} size={12}>
               <ListingValues
                 buttonText="Show All"
                 onClick={handleShowAll}
@@ -437,6 +552,7 @@ const QuickTab = ({
                 containerId="list"
                 tabsApiDataLoading={tabsApiDataLoading}
                 onItemToggle={handleItemToggle}
+                enableDragAndDrop={enableDND}
               />
               <ListingValues
                 buttonText="Hide All"
@@ -446,6 +562,18 @@ const QuickTab = ({
                 containerId="tabs"
                 // tabsApiDataLoading={tabsApiDataLoading}
                 onItemToggle={handleItemToggle}
+                enableDragAndDrop={enableDND}
+                AlertComponenet={
+                  <InfoAlert
+                    message="Please select at least 1 and at most 5 values to display as
+                                tabs."
+                    width={"49%"}
+                    position="absolute"
+                    color="#088AB2"
+                    top={10}
+                    zIndex={1}
+                  />
+                }
               />
             </Grid>
           </DndContext>