rez-table-listing-mui 1.3.17 → 1.3.19

package/src/listing/components/filter/components/forms/utils/filter-date-input-resolver.tsx

@@ -0,0 +1,127 @@
+import { FormControl } from "@mui/material";
+import { FilterStateProps } from "../../../../../types/filter";
+import FormTextfield from "../components/Textfield";
+import FormDatePicker from "../components/Date";
+import FormMultiSelect from "../components/Multi-Select";
+
+export type DateOperator =
+  | "equal"
+  | "before"
+  | "after"
+  | "between"
+  | "is"
+  | "today"
+  | "is_day_before"
+  | "is_day_after"
+  | "is_month_before"
+  | "is_month_after"
+  | "is_before"
+  | "is_after"
+  | "is_on_or_before"
+  | "is_on_or_after";
+
+export const DATE_ALLOWED_OPERATORS: DateOperator[] = [
+  "equal",
+  "before",
+  "after",
+  "between",
+  "is",
+  "today",
+  "is_day_before",
+  "is_day_after",
+  "is_month_before",
+  "is_month_after",
+  "is_before",
+  "is_after",
+  "is_on_or_before",
+  "is_on_or_after",
+];
+
+export const resolveFilterInput = ({
+  filter,
+  operator,
+  control,
+  dropdownData,
+  updateFiltersFromForm,
+}: {
+  filter: FilterStateProps;
+  operator: string | undefined;
+  control: any;
+  dropdownData: any;
+  updateFiltersFromForm: () => void;
+}) => {
+  const isDateType = filter.filter_attribute_data_type === "date";
+
+  const showDatePicker =
+    isDateType && operator && DATE_ALLOWED_OPERATORS.includes(operator as any);
+
+  const showTextInsteadOfDate =
+    isDateType &&
+    (!operator || !DATE_ALLOWED_OPERATORS.includes(operator as any));
+
+  // TEXT / NUMBER -> Always TextField
+  if (
+    filter?.filter_attribute_data_type === "text" ||
+    filter?.filter_attribute_data_type === "number"
+  ) {
+    return (
+      <FormTextfield
+        filter={filter}
+        control={control}
+        onValueChange={updateFiltersFromForm}
+      />
+    );
+  }
+
+  // YEAR
+  if (filter?.filter_attribute_data_type === "year") {
+    return (
+      <FormDatePicker
+        filter={filter}
+        control={control}
+        views={["year"]}
+        onValueChange={updateFiltersFromForm}
+      />
+    );
+  }
+
+  // DATE LOGIC
+  if (showDatePicker) {
+    return (
+      <FormDatePicker
+        filter={filter}
+        control={control}
+        onValueChange={updateFiltersFromForm}
+      />
+    );
+  }
+
+  if (showTextInsteadOfDate) {
+    return (
+      <FormTextfield
+        filter={filter}
+        control={control}
+        onValueChange={updateFiltersFromForm}
+      />
+    );
+  }
+
+  // MULTISELECT / SELECT / RADIO / CHECKBOX
+  if (
+    filter?.filter_attribute_data_type !== undefined &&
+    ["select", "multiselect", "radio", "checkbox"].includes(
+      filter?.filter_attribute_data_type
+    )
+  ) {
+    return (
+      <FormMultiSelect
+        filter={filter}
+        control={control}
+        dropdownData={dropdownData}
+        onValueChange={updateFiltersFromForm}
+      />
+    );
+  }
+
+  return <FormControl fullWidth size="small" />;
+};

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 = "kartik.shetty@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-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