rez-table-listing-mui 1.3.16 → 1.3.18

package/package.json

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

package/src/kanban/index.tsx

@@ -82,10 +82,10 @@ const Kanban = ({
 
     metaData?.swim_lanes.forEach((swimLane: SwimLane) => {
       swimLane.sub_lanes
-        ?.filter((subLane) => subLane.lane_id === laneId)
+        ?.filter((subLane) => subLane.lane_id == laneId)
         ?.forEach((subLane) => {
           data?.forEach((lead: any) => {
-            if (lead?.stage_id === subLane?.id && !seenLeadIds.has(lead?.id)) {
+            if (lead?.stage_id == subLane?.id && !seenLeadIds.has(lead?.id)) {
               seenLeadIds.add(lead.id);
               count++;
             }
@@ -220,7 +220,7 @@ const Kanban = ({
                           {swim_lane?.sub_lanes
                             ?.filter(
                               (sub_lane: SubLane) =>
-                                sub_lane.lane_id.toString() === lane?.id
+                                sub_lane.lane_id.toString() == lane?.id
                             )
                             ?.map((sub_section: SubLane) => {
                               const subLaneKey = `${swim_lane?.id}-${lane?.id}-${sub_section?.id}`;
@@ -230,7 +230,7 @@ const Kanban = ({
                                   expanded={
                                     data?.filter(
                                       (lead: any) =>
-                                        lead?.stage_id === sub_section?.id &&
+                                        lead?.stage_id == sub_section?.id &&
                                         lead?.lead_status_id == swim_lane?.id
                                     )?.length === 0
                                       ? false
@@ -261,7 +261,7 @@ const Kanban = ({
                                           display:
                                             data?.filter(
                                               (lead: any) =>
-                                                lead?.stage_id ===
+                                                lead?.stage_id ==
                                                   sub_section?.id &&
                                                 lead?.lead_status_id ==
                                                   swim_lane?.id
@@ -290,9 +290,8 @@ const Kanban = ({
                                       >
                                         {data?.filter(
                                           (lead: any) =>
-                                            lead?.stage_id ===
-                                              sub_section?.id &&
-                                            lead?.lead_status_id ===
+                                            lead?.stage_id == sub_section?.id &&
+                                            lead?.lead_status_id ==
                                               swim_lane?.id
                                         )?.length || 0}
                                       </Box>
@@ -313,8 +312,7 @@ const Kanban = ({
                                       const leadsForThisSubLane =
                                         data?.filter(
                                           (lead: any) =>
-                                            lead?.stage_id ===
-                                              sub_section?.id &&
+                                            lead?.stage_id == sub_section?.id &&
                                             lead?.lead_status_id ==
                                               swim_lane?.id &&
                                             lead?.stage_group_id == lane?.id

package/src/listing/components/index.scss

@@ -210,3 +210,28 @@
     }
   }
 }
+// Full screen styles fixes
+
+:fullscreen {
+  width: 100vw !important;
+  height: 100vh !important;
+  display: flex !important;
+  flex-direction: column !important;
+  background: var(--white);
+  overflow: hidden;
+}
+
+:-webkit-full-screen {
+  width: 100vw !important;
+  height: 100vh !important;
+  display: flex !important;
+  flex-direction: column !important;
+  background: var(--white);
+  overflow: hidden;
+}
+
+// .ts__table__wrapper.is-fullscreen {
+//   height: calc(100vh - 56px);
+//   max-height: none;
+//   overflow-y: auto;
+// }

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

@@ -7,30 +7,72 @@ const LoginButton = () => {
 
   const handleLogin = async () => {
     setLoading(true);
-    try {
-      const response = await axios.post(
-        "http://localhost:4010/api/auth/login",
-        {
-          email_id: "test@gmail.com",
-          password: "Admin@123",
-        }
-      );
-
-      const token = response.data.accessToken;
-
-      if (token) {
-        localStorage.setItem("authToken", token);
-        alert("Login successful");
-        window.location.reload(); // reload app to re-trigger axios with token
-      } else {
-        alert("Token not found in response.");
-      }
-    } catch (error) {
-      console.error("Login failed:", error);
-      alert("Login failed. Check console for details.");
-    } finally {
-      setLoading(false);
-    }
+    const api_url = "https://api.eth-qa.rezolut.in/api/admin/auth";
+    const email_id = "saurabh.mishra@rezolut.in";
+    const email_otp = "123456";
+    const sub_domain = "nair";
+
+    setLoading(true);
+
+    await axios
+      .post(`${api_url}/sso/check-email`, {
+        email_id: email_id,
+        subdomain: sub_domain,
+      })
+      .then(async (emailAPIResponse) => {
+        console.log(emailAPIResponse.data);
+
+        await axios
+          .post(`${api_url}/sso/otp/generate`, {
+            identifier: email_id,
+            service: "email",
+          })
+          .then(async (otpAPIResponse) => {
+            await axios
+              .post(`${api_url}/verify-otp`, {
+                fcm_token: "",
+                identifier: email_id,
+                otp: email_otp,
+                otp_id: otpAPIResponse.data.otp_id,
+                reset: true,
+                service: "email",
+                subdomain: "nair",
+              })
+              .then((otpVerifyResponse) => {
+                console.log(otpVerifyResponse.data);
+                const token = otpVerifyResponse.data.accessToken;
+
+                if (token) {
+                  localStorage.setItem("authToken", token);
+                  alert("Login successful");
+                  window.location.reload(); // reload app to re-trigger axios with token
+                } else {
+                  alert("Token not found in response.");
+                }
+              })
+              .catch((error) => {
+                console.error("Login failed:", error);
+                alert("Login failed. Check console for details.");
+              })
+              .finally(() => {
+                setLoading(false);
+              });
+          })
+          .catch((error) => {
+            console.error("Login failed:", error);
+            alert("Login failed. Check console for details.");
+          })
+          .finally(() => {
+            setLoading(false);
+          });
+      })
+      .catch((error) => {
+        console.error("Login failed:", error);
+        alert("Login failed. Check console for details.");
+      })
+      .finally(() => {
+        setLoading(false);
+      });
   };
 
   return (

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

@@ -7,7 +7,13 @@ function TableHeadPin<T>({ header }: TableHeaderProps<T>) {
       {/* <IconPinOutline /> */}
     </div>
   ) : (
-    <div className="ts--head--button" onClick={() => header.column.pin(false)}>
+    <div
+      className="ts--head--button"
+      onClick={(e) => {
+        e.stopPropagation();
+        header.column.pin(false);
+      }}
+    >
       <IconPinOffOutline />
     </div>
   );

package/src/listing/components/table-settings/common/listing-values.tsx

@@ -16,13 +16,12 @@ import DraggableListItem from "./draggable-listitem.tsx";
 import { listingValuesStyles } from "../style.ts";
 import Loader from "../../common/loader/loader.tsx";
 import { ClosedEyeIcon, EyeIcon } from "../../../../assets/svg.tsx";
-import InfoAlert from "./info-alert.tsx";
 import React from "react";
 ``;
 
 interface FilterValue {
-  id: string;
   label: string;
+  value: string;
 }
 
 interface ListingValuesProps {
@@ -34,7 +33,10 @@ interface ListingValuesProps {
   setSearchTerm?: React.Dispatch<React.SetStateAction<string>>;
   containerId: string;
   tabsApiDataLoading?: boolean;
-  onItemToggle: (itemId: string, fromContainerId: string) => void;
+  onItemToggle: (
+    item: { label: string; value: string },
+    fromContainerId: string
+  ) => void;
   enableDragAndDrop?: boolean;
   isQuickTabActive?: boolean;
   AlertComponenet?: React.ReactNode;
@@ -47,7 +49,10 @@ const ListingValuesContent = ({
 }: {
   item: FilterValue;
   containerId: string;
-  onItemToggle: (itemId: string, fromContainerId: string) => void;
+  onItemToggle: (
+    item: { label: string; value: string },
+    fromContainerId: string
+  ) => void;
 }) => {
   return (
     <Box
@@ -61,10 +66,7 @@ const ListingValuesContent = ({
       }}
     >
       <Typography>{item.label}</Typography>
-      <IconButton
-        size="small"
-        onClick={() => onItemToggle(item.id, containerId)}
-      >
+      <IconButton size="small" onClick={() => onItemToggle(item, containerId)}>
         {containerId === "tabs" ? <EyeIcon /> : <ClosedEyeIcon />}
       </IconButton>
     </Box>
@@ -121,14 +123,14 @@ const ListingValues = ({
             <Box ref={setNodeRef} sx={listingValuesStyles.draggableContainer}>
               {enableDragAndDrop ? (
                 <SortableContext
-                  items={filteredValues.map((item) => item.id)}
+                  items={filteredValues.map((item) => item.value)}
                   strategy={verticalListSortingStrategy}
                 >
                   <Box sx={listingValuesStyles.draggableCover}>
                     {filteredValues.map((item) => (
                       <DraggableListItem
-                        key={item.id}
-                        id={item.id}
+                        key={item.value}
+                        id={item.value}
                         containerId={containerId}
                       >
                         <ListingValuesContent
@@ -142,14 +144,15 @@ const ListingValues = ({
                 </SortableContext>
               ) : (
                 <Box sx={listingValuesStyles.draggableCover}>
-                  {filteredValues.map((item) => (
-                    <ListingValuesContent
-                      key={item.id}
-                      item={item}
-                      containerId={containerId}
-                      onItemToggle={onItemToggle}
-                    />
-                  ))}
+                  {filteredValues?.length > 0 &&
+                    filteredValues.map((item) => (
+                      <ListingValuesContent
+                        key={item.value}
+                        item={item}
+                        containerId={containerId}
+                        onItemToggle={onItemToggle}
+                      />
+                    ))}
                 </Box>
               )}
             </Box>

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

@@ -194,13 +194,13 @@ const ColumnTab = ({ filterSettingStates, columnsData }: ColumnTabProps) => {
   const { showList, hideList } = getCurrentLists();
 
   const showListValues = showList.map((item) => ({
-    id: item.value,
+    value: item.value,
     label: item.label,
     visible: true,
   }));
 
   const hideListValues = hideList.map((item) => ({
-    id: item.value,
+    value: item.value,
     label: item.label,
     visible: false,
   }));
@@ -209,18 +209,21 @@ const ColumnTab = ({ filterSettingStates, columnsData }: ColumnTabProps) => {
     value.label.toLowerCase().includes(searchTerm.toLowerCase())
   );
 
-  const handleItemToggle = (itemId: string, fromContainerId: string) => {
+  const handleItemToggle = (
+    item: { label: string; value: string },
+    fromContainerId: string
+  ) => {
     let newShowList = [...showList];
     let newHideList = [...hideList];
 
     if (fromContainerId === "tabs") {
-      const idx = newShowList.findIndex((item) => item.value === itemId);
+      const idx = newShowList.findIndex((i) => i.value === item.value);
       if (idx > -1) {
         const [moved] = newShowList.splice(idx, 1);
         newHideList.push(moved);
       }
     } else if (fromContainerId === "list") {
-      const idx = newHideList.findIndex((item) => item.value === itemId);
+      const idx = newHideList.findIndex((i) => i.value === item.value);
       if (idx > -1) {
         const [moved] = newHideList.splice(idx, 1);
         newShowList.push(moved);
@@ -378,9 +381,11 @@ const ColumnTab = ({ filterSettingStates, columnsData }: ColumnTabProps) => {
       <Box sx={{ flex: 1 }}>
         {!isColumnDefault && hasShowListQuickTabs && (
           <CustomTabs value={selectedTabIndex} onChange={handleTabChange}>
-            {quickTabStates?.show_list?.map((tab) => (
-              <Tab key={tab} label={tab} />
-            ))}
+            {quickTabStates?.show_list?.map(
+              (tab: { label: string; value: string }) => (
+                <Tab key={tab?.value} label={tab?.label} />
+              )
+            )}
           </CustomTabs>
         )}
 

package/src/listing/components/table-settings/components/group-by.tsx

@@ -40,7 +40,7 @@ const GroupBy = ({
 }: {
   filterSettingStates: craftTableFilterSettingsOptionsProps;
   columnsData: any;
-  tabsApiData?: string[];
+  tabsApiData?: { label: string; value: string }[];
   tabsApiDataLoading?: boolean;
 }) => {
   const { settingsData, setSettingsData, saveButtonError, setSaveButtonError } =

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

@@ -39,7 +39,7 @@ const Lane = ({
 }: {
   filterSettingStates: craftTableFilterSettingsOptionsProps;
   columnsData: any;
-  tabsApiData?: string[];
+  tabsApiData?: { label: string; value: string }[];
   tabsApiDataLoading?: boolean;
 }) => {
   const { settingsData, setSettingsData, saveButtonError, setSaveButtonError } =

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

@@ -58,9 +58,7 @@ const QuickTab = ({
         ...prev,
         quick_tab: {
           ...prev?.quick_tab,
-          attribute: columnsData?.column_list?.filter(
-            (item) => item.datasource_list
-          )[0]?.attribute_key,
+          attribute: columnsData[0]?.value,
           sorting: "asc",
         },
       }));
@@ -82,6 +80,15 @@ const QuickTab = ({
       }));
 
       setCurrentQuickAttribute(settingsData?.quick_tab?.attribute || "");
+    } else {
+      setSettingsData((prev) => ({
+        ...prev,
+        quick_tab: {
+          ...prev?.quick_tab,
+          hide_list: [],
+          show_list: [],
+        },
+      }));
     }
   }, [tabsApiData]);
 
@@ -150,14 +157,8 @@ const QuickTab = ({
   ];
 
   // Convert show_list/hide_list to FilterValue[] for rendering only
-  const showListValues = (quickTabStates?.show_list || [])?.map((id) => ({
-    id,
-    label: id?.charAt(0)?.toUpperCase() + id?.slice(1),
-  }));
-  const hideListValues = (quickTabStates?.hide_list || []).map((id) => ({
-    id,
-    label: id?.charAt(0)?.toUpperCase() + id?.slice(1),
-  }));
+  const showListValues = quickTabStates?.show_list || [];
+  const hideListValues = quickTabStates?.hide_list || [];
 
   const sensors = useSensors(
     useSensor(MouseSensor),
@@ -179,15 +180,16 @@ const QuickTab = ({
       let newShowList = [...(quickTabStates.show_list ?? [])];
       let newHideList = [...(quickTabStates.hide_list ?? [])];
       if (currentContainer === "list") {
-        const oldIndex = newHideList.indexOf(String(active.id));
-        const newIndex = newHideList.indexOf(String(over.id));
+        // 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));
         if (oldIndex !== -1 && newIndex !== -1) {
           const [removed] = newHideList.splice(oldIndex, 1);
           newHideList.splice(newIndex, 0, removed);
         }
       } else {
-        const oldIndex = newShowList.indexOf(String(active.id));
-        const newIndex = newShowList.indexOf(String(over.id));
+        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));
         if (oldIndex !== -1 && newIndex !== -1) {
           const [removed] = newShowList.splice(oldIndex, 1);
           newShowList.splice(newIndex, 0, removed);
@@ -210,17 +212,27 @@ const QuickTab = ({
         if (newShowList.length >= 5) return; // prevent overflow
         // Move from hide to show
 
-        const idx = newHideList.indexOf(String(active.id));
+        const idx = newHideList.findIndex((i) => i.value === String(active.id)); //newHideList.indexOf(String(active.id));
         if (idx !== -1) {
           newHideList.splice(idx, 1);
-          newShowList.push(String(active.id));
+          newShowList.push({
+            value: String(active.id),
+            label:
+              tabsApiData?.find((i) => i.value === String(active.id))?.label ??
+              "",
+          });
         }
       } else if (currentContainer === "tabs" && overContainer === "list") {
         // Move from show to hide
-        const idx = newShowList.indexOf(String(active.id));
+        const idx = newShowList.findIndex((i) => i.value === String(active.id)); //newShowList.indexOf(String(active.id));
         if (idx !== -1) {
           newShowList.splice(idx, 1);
-          newHideList.push(String(active.id));
+          newHideList.push({
+            value: String(active.id),
+            label:
+              tabsApiData?.find((i) => i.value === String(active.id))?.label ??
+              "",
+          });
         }
       }
 
@@ -256,7 +268,7 @@ const QuickTab = ({
         ...prev?.quick_tab,
         show_list: [...currentShowList, ...limitedHideList],
         hide_list: currentHideList.filter(
-          (item) => !limitedHideList.includes(item)
+          (item) => !limitedHideList.find((i) => i.value === item.value)
         ),
       },
     }));
@@ -298,24 +310,27 @@ const QuickTab = ({
     }));
   };
 
-  const handleItemToggle = (itemId: string, fromContainerId: string) => {
+  const handleItemToggle = (
+    item: { label: string; value: 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);
+      const index = toHideList.findIndex((i) => i.value == item.value);
       if (index > -1) {
         toHideList.splice(index, 1);
-        toShowList.push(itemId);
+        toShowList.push(item);
       }
     } else if (fromContainerId === "tabs") {
       // Move from show_list to hide_list
-      const index = toShowList.indexOf(itemId);
+      const index = toShowList.indexOf(item);
       if (index > -1) {
         toShowList.splice(index, 1);
-        toHideList.push(itemId);
+        toHideList.push(item);
       }
     }
 
@@ -362,16 +377,11 @@ const QuickTab = ({
                     }
                     MenuProps={{ container: fullscreenContainer }}
                   >
-                    {columnsData?.column_list
-                      ?.filter((col) => col.datasource_list != null)
-                      .map((column) => (
-                        <MenuItem
-                          key={column?.attribute_key}
-                          value={column?.attribute_key}
-                        >
-                          {column?.name}
-                        </MenuItem>
-                      ))}
+                    {columnsData?.map((column: any) => (
+                      <MenuItem key={column?.value} value={column?.value}>
+                        {column?.label}
+                      </MenuItem>
+                    ))}
                   </Select>
                 </FormControl>
                 <FormControl