rez-table-listing-mui 1.0.49 → 1.2.1

package/src/components/table-settings/components/sorting.tsx

@@ -9,11 +9,11 @@ import {
   Typography,
 } from "@mui/material";
 import {
+  ColumnTabConfigProps,
   SettingsSortingProps,
   SortingConfigProps,
   SortingConfigSortByProps,
 } from "../../../types/filter-settings";
-import CustomToggleSwitchButton from "./toggle-button-switch";
 import CustomTabs from "../tabs/horizontal";
 import {
   closestCenter,
@@ -29,69 +29,92 @@ import {
   verticalListSortingStrategy,
 } from "@dnd-kit/sortable";
 import { AddIcon, CloseIcon } from "../../../assets/svg";
-import { TOGGLE_BUTTON_TABS } from "../constants";
 
 const Sorting = ({
   filterSettingStates,
   columnsData,
 }: SettingsSortingProps) => {
-  const {
-    quickTabStates,
-    sortingTabState,
-    setSortingTabState,
-    saveButtonError,
-    setSaveButtonError,
-    columnTabState,
-  } = filterSettingStates;
+  const { quickTabStates, saveButtonError, settingsData, setSettingsData } =
+    filterSettingStates;
 
   const [activeTab, setActiveTab] = useState<string | undefined>(
     quickTabStates?.show_list?.[0]
   );
 
+  const columnTabState = settingsData?.column as ColumnTabConfigProps;
+  const sortingTabState = settingsData?.sorting as SortingConfigProps;
   const isSortingDefault = sortingTabState?.isDefault;
 
+  const isStateEmpty = useMemo(() => {
+    return !sortingTabState || Object.entries(sortingTabState).length === 0;
+  }, [sortingTabState]);
+
+  const isEmptyDefault = useMemo(() => {
+    return !isStateEmpty && !sortingTabState?.sortby?.length;
+  }, [isStateEmpty, sortingTabState]);
+
+  const ERROR_CODE = "sorting_error";
+
   useEffect(() => {
-    // Render empty columns
     const emptySortBy: SortingConfigSortByProps[] = [
       { column: "", order: "asc" },
     ];
 
-    const mappedQuickTabs =
-      quickTabStates?.show_list?.map((tab) => ({
-        tab_name: tab,
-        sortby: emptySortBy,
-      })) || [];
-
-    if (!Object.entries(sortingTabState)?.length) {
-      // Create a new default sorting state
-      const newSortingState: SortingConfigProps = {
-        isDefault: true,
-        sortby: emptySortBy,
-        tabs: mappedQuickTabs,
-      };
+    if (isStateEmpty) {
+      setSettingsData((prev) => ({
+        ...prev,
+        sorting: {
+          isDefault: true,
+          sortby: emptySortBy,
+        },
+      }));
 
-      setSaveButtonError((prev) => ({
+      console.log("sorting is empty");
+    } else if (isEmptyDefault) {
+      setSettingsData((prev) => ({
         ...prev,
-        hasError: true,
-        messages: [
-          ...saveButtonError?.messages,
-          { type: "sorting_error", message: "Please select a column" },
-        ],
+        sorting: {
+          ...prev.sorting,
+          isDefault: true,
+        },
       }));
 
-      setActiveTab(newSortingState?.tabs?.[0]?.tab_name);
-      setSortingTabState(newSortingState);
+      if (!sortingTabState?.isDefault) {
+        setSettingsData((prev) => ({
+          ...prev,
+          sorting: {
+            ...prev.sorting,
+            sortby: emptySortBy,
+          },
+        }));
+      }
     }
+  }, [
+    isStateEmpty,
+    isEmptyDefault,
+    sortingTabState,
+    quickTabStates,
+    setSettingsData,
+  ]);
 
-    // If show_list is not empty
-    // if (quickTabStates?.show_list?.length) {
-    //   setSortingTabState((prev) => ({
-    //     ...prev,
-    //     tabs: mappedQuickTabs,
-    //   }));
-    //   setActiveTab(mappedQuickTabs?.[0]?.tab_name);
-    // }
-  }, [quickTabStates?.show_list]);
+  // sortingTabState.sortby is filtered based on columnTabState.show_list
+  useEffect(() => {
+    // filter sorting sortby based on column show list
+    if (columnTabState?.isDefault) {
+      setSettingsData((prev) => ({
+        ...prev,
+        sorting: {
+          ...prev.sorting,
+          // remove sortby items that are not in column show list
+          sortby: prev.sorting?.sortby?.filter((item) =>
+            columnTabState?.show_list?.some(
+              (columnItem) => columnItem.value === item.column
+            )
+          ),
+        },
+      }));
+    }
+  }, [columnTabState?.show_list]);
 
   const sensors = useSensors(useSensor(PointerSensor));
 
@@ -116,20 +139,22 @@ const Sorting = ({
       ? sortingTabState?.sortby
       : activeTab !== undefined
       ? sortingTabState?.tabs?.[activeTabIndex || 0]?.sortby
+        ? sortingTabState?.tabs?.[activeTabIndex || 0]?.sortby
+        : []
       : [];
   }, [sortingTabState, activeTab]);
 
   const updateSortList = (updated: SortingConfigSortByProps[]) => {
-    setSortingTabState((prev) => {
-      if (prev.isDefault) {
-        return { ...prev, sortby: updated };
+    setSettingsData((prev) => {
+      if (prev?.sorting?.isDefault) {
+        return { ...prev, sorting: { ...prev?.sorting, sortby: updated } };
       } else {
-        const tabs = [...(prev.tabs || [])];
+        const tabs = [...(prev?.sorting?.tabs || [])];
         tabs[activeTabIndex || 0] = {
           ...tabs[activeTabIndex || 0],
           sortby: updated,
         };
-        return { ...prev, tabs };
+        return { ...prev, sorting: { ...prev?.sorting, tabs } };
       }
     });
   };
@@ -141,20 +166,6 @@ const Sorting = ({
   ) => {
     if (!tabSortedList) return;
 
-    // Check if sorting_error exists
-    // If it does, remove it
-    if (key === "column") {
-      const otherErrors = saveButtonError?.messages?.filter(
-        (error) => error.type !== "sorting_error"
-      );
-
-      setSaveButtonError((prev) => ({
-        ...prev,
-        hasError: otherErrors.length > 0,
-        messages: otherErrors,
-      }));
-    }
-
     const updated = [...tabSortedList];
     updated[index] = { ...updated[index], [key]: value };
     updateSortList(updated);
@@ -168,15 +179,6 @@ const Sorting = ({
       order: "asc",
     };
 
-    setSaveButtonError((prev) => ({
-      ...prev,
-      hasError: true,
-      messages: [
-        ...saveButtonError?.messages,
-        { type: "sorting_error", message: "Please select a column" },
-      ],
-    }));
-
     updateSortList([...tabSortedList, newItem]);
   };
 
@@ -185,23 +187,6 @@ const Sorting = ({
 
     const updated = tabSortedList.filter((item) => item.column !== columnKey);
     updateSortList(updated);
-
-    // ! CHECK THIS LOGIC AND CHANGE AS NEEDED
-    // check if any of the columns are empty
-    const columnsHasEmptyValue =
-      updated.some((item) => item.column === "") || updated.length === 0;
-
-    if (columnsHasEmptyValue) {
-      const filteredErrors = saveButtonError?.messages?.filter(
-        (error) => error.type !== "sorting_error"
-      );
-
-      setSaveButtonError((prev) => ({
-        ...prev,
-        hasError: true,
-        messages: filteredErrors,
-      }));
-    }
   };
 
   const handleModeChange = (
@@ -209,7 +194,13 @@ const Sorting = ({
     value: boolean
   ) => {
     if (value !== null) {
-      setSortingTabState((prev) => ({ ...prev, isDefault: value }));
+      setSettingsData((prev) => ({
+        ...prev,
+        sorting: {
+          ...prev.sorting,
+          isDefault: value,
+        },
+      }));
     }
   };
 
@@ -230,20 +221,53 @@ const Sorting = ({
 
   const hasShowListQuickTabs =
     quickTabStates?.show_list?.length !== 0 || isSortingDefault ? true : false;
-  const showAddSortButton =
-    tabSortedList?.length !== columnsData?.column_list?.length;
 
+  /**
+   * ? What is happening here?
+   *
+   * If column show list is present then takes it's length
+   * else it takes columnsData.column_list length
+   *
+   * compare it with sortingTabState.sortby.length
+   *
+   * if both are equal then showAddSortButton is false
+   */
+  const showAddSortButton = useMemo(() => {
+    const stateLength =
+      columnTabState?.show_list?.length ??
+      columnsData?.column_list?.length ??
+      0;
+    const sortLength = sortingTabState?.sortby?.length ?? 0;
+
+    return sortLength !== stateLength;
+  }, [columnTabState, columnsData, sortingTabState]);
+
+  /**
+   * ? What is happening here?
+   *
+   * Check if sorting_error exists in saveButtonError state
+   * Check if sortingTabState sortby column is empty
+   */
   const isAddSortDisabled = useMemo(() => {
-    return saveButtonError?.messages?.some(
-      (error) => error?.type === "sorting_error"
+    const hasEmptyColumn = sortingTabState?.sortby?.some(
+      (item) => item.column === ""
     );
-  }, [saveButtonError]);
+
+    return hasEmptyColumn;
+  }, [saveButtonError, sortingTabState]);
 
   const getCurrentLists = () => {
     if (sortingTabState?.isDefault) {
       return {
-        showList: columnTabState.show_list || [],
-        hideList: columnTabState.hide_list || [],
+        showList:
+          columnTabState?.show_list ||
+          // if columns isDefault and show_list is empty, show all columns
+          columnsData?.column_list.map((column) => ({
+            label: column.name,
+            value: column.attribute_key,
+          })) ||
+          [],
+        hideList: columnTabState?.hide_list || [],
       };
     } else {
       const currentTab = columnTabState?.tabs?.[activeTabIndex || 0];
@@ -254,17 +278,17 @@ const Sorting = ({
     }
   };
 
-  const { showList, hideList } = getCurrentLists();
+  const { showList } = getCurrentLists();
 
   return (
     <Box sx={{ display: "flex", flexDirection: "column", gap: "0.75rem" }}>
       <Typography>Select attribute(s) you want to sort by</Typography>
 
-      <CustomToggleSwitchButton
+      {/* <CustomToggleSwitchButton
         buttons={TOGGLE_BUTTON_TABS}
         value={isSortingDefault}
         onChange={handleModeChange}
-      />
+      /> */}
 
       {hasShowListQuickTabs ? (
         <>
@@ -304,17 +328,19 @@ const Sorting = ({
                         size="small"
                         fullWidth
                       >
-                        {showList?.map((column, index) => (
-                          <MenuItem
-                            key={index}
-                            value={column.value}
-                            disabled={tabSortedList.some(
-                              (s) => s.column === column?.value
-                            )}
-                          >
-                            {column?.label}
-                          </MenuItem>
-                        ))}
+                        {showList
+                          ?.filter((column) => column.value != "action")
+                          .map((column, index) => (
+                            <MenuItem
+                              key={index}
+                              value={column.value}
+                              disabled={tabSortedList.some(
+                                (s) => s.column === column?.value
+                              )}
+                            >
+                              {column?.label}
+                            </MenuItem>
+                          ))}
                       </Select>
                       <Select
                         value={sort.order}
@@ -329,7 +355,7 @@ const Sorting = ({
                         fullWidth
                       >
                         <MenuItem value="asc">Ascending</MenuItem>
-                        <MenuItem value="desc">Descending</MenuItem>
+                        <MenuItem value="dsc">Descending</MenuItem>
                       </Select>
                       <IconButton
                         size="small"

package/src/components/table-settings/components/toggle-button-switch.tsx

@@ -33,12 +33,12 @@ export default function CustomToggleSwitchButton({
     <ToggleButtonGroup exclusive size="small" color="primary" {...props}>
       {buttons.map((button) => (
         <ToggleButton
-          key={button.label}
+          key={button?.label}
           value={button?.value}
           disabled={button?.isDisabled}
           sx={selectedTabStyle}
         >
-          {button.label}
+          {button?.label}
         </ToggleButton>
       ))}
     </ToggleButtonGroup>

package/src/components/table-settings/index.tsx

@@ -61,12 +61,10 @@ export function QuickFilterSettings({
     const copySortingTabState = sortingTabState?.isDefault
       ? {
           isDefault: true,
-          sortby: sortingTabState?.sortby || [],
+          sortby:
+            sortingTabState?.sortby?.filter((item) => item.column !== "") || [],
         }
-      : {
-          isDefault: false,
-          tabs: sortingTabState?.tabs || [],
-        };
+      : null;
 
     const modifiedSettingsData = {
       quick_tab: quickTabStates,

package/src/components/table-settings/style.ts

@@ -50,6 +50,7 @@ export const listingValuesStyles: ListingValuesStyleProps = {
     borderRadius: "8px",
     minHeight: "10rem",
     backgroundColor: "#fdfdfc",
+    zIndex: 1,
   },
   heading: { fontWeight: 400, color: "#0E0C0BB2", fontSize: "16px" },
   button: { fontSize: "13px", textTransform: "none", color: "#0E0C0BB2" },

package/src/components/topbar/index.tsx

@@ -199,7 +199,9 @@ function Topbar<T>({
             title="Filter"
             onClick={onFilterButtonClick && onFilterButtonClick}
           >
-            <FilterationIcon />
+            <FilterationIcon
+              color={tableStates.filters.length ? "#1C1B1F" : "#888"}
+            />
           </div>
         )}
 

package/src/libs/hooks/useEntityTableAPI.tsx

@@ -86,7 +86,7 @@ export const useEntityTableAPI = ({
   attributeFilter = [],
 }: EntityTableAPIProps) => {
   const { data, isPending: isTableDataPending } = useQuery({
-    queryKey: ["entityTable", page, size, tabs.value, quickFilter],
+    queryKey: ["entityTable", page, size, tabs, quickFilter],
     queryFn: () =>
       entityListingCall({
         page,
@@ -252,21 +252,6 @@ export const useSettingsDropDownAPI = ({
   return { settingsTabDropdownData, settingsTabDropdownPending };
 };
 
-// export const useSaveSettingsDataAPI = ({ payload }: any) => {
-//   const { data: saveSettingsAPIData } = useQuery({
-//     queryKey: ["saveSettingsData", payload],
-//     queryFn: () =>
-//       saveSettingsData({
-//         entity_type: "LAP",
-//         mapped_entity_type: "AYR",
-//         layout_json: payload,
-//       }),
-//     enabled: !!payload && !!Object.entries(payload).length,
-//   });
-
-//   return { saveSettingsAPIData };
-// };
-
 export const useSaveSettingsDataAPI = (entity_type: string) => {
   const queryClient = useQueryClient();
   const saveSettingsDataMutation = useMutation({

package/src/libs/utils/apiColumn.ts

@@ -113,7 +113,7 @@ export const updateSavedFilter = async (
 ) => {
   try {
     const response = await api.post(
-      `/entity/update/17?entity_type=${entity_type}`,
+      `/entity/update/${payload?.id}?entity_type=${entity_type}`,
       payload
     );
     return response.data;
@@ -123,16 +123,6 @@ export const updateSavedFilter = async (
   }
 };
 
-// export const saveSettingsData = async (payload: any) => {
-//   try {
-//     const response = await api.post(`/layout/create`, payload);
-//     return response.data;
-//   } catch (error) {
-//     console.error("Failed to save settings data:", error);
-//     throw error;
-//   }
-// };
-
 // ALL View Settings API
 
 export const saveSettingsData = async (payload: any) => {

package/src/libs/utils/common.ts

@@ -76,12 +76,15 @@ export function customDebounce<T extends (...args: any[]) => any>(
   };
 }
 
+//ENTITY TYPE
+export const ENTITY_TYPE = "NTM";
+
 // uat http://13.200.182.92:4010/api
 // local http://localhost:4010/api
 
 // API INTEGRATION
 export const api = axios.create({
-  baseURL: " http://localhost:4010/api",
+  baseURL: "http://localhost:6010/api",
   timeout: 10000,
   headers: {
     "Content-Type": "application/json",
@@ -100,5 +103,3 @@ api.interceptors.request.use(
     return Promise.reject(error);
   }
 );
-
-export const ENTITY_TYPE = "AYR";

package/src/types/filter-settings.ts

@@ -65,6 +65,13 @@ export interface ColumnTabConfigProps {
   tabs?: ColumnTab[];
 }
 
+export interface TabWiseConfigProps {
+  isDefault?: boolean;
+  show_list?: ColumnItem[];
+  hide_list?: ColumnItem[];
+  tabs?: ColumnTab[];
+}
+
 export interface SettingsSortingProps {
   filterSettingStates: craftTableFilterSettingsOptionsProps;
   columnsData: FilterColumnsDataProps;
@@ -87,6 +94,10 @@ export interface SettingsQuickTabProps {
 }
 
 export interface SettingsDataProps {
+  isDefault?: boolean;
+  show_list?: ColumnItem[];
+  hide_list?: ColumnItem[];
+  tabs?: ColumnTab[];
   quick_tab?: QuickTabConfigProps;
   column?: ColumnTabConfigProps;
   sorting?: SortingConfigProps;

package/src/types/filter.ts

@@ -49,7 +49,6 @@ export interface FilterColumnsListProps {
   data_source_type: string | null;
   datasource_list: any | null;
   visible: string;
-  
 }
 
 export interface FilterColumnsDataProps {
@@ -181,7 +180,7 @@ export interface FilterFormComponentProps {
 export interface FilterMasterStateProps {
   attributes: {
     selected: string;
-    radio: string;
+    radio: string[];
   };
   saved_filters: {
     selectedId: string;