rez-table-listing-mui 1.0.40 → 1.0.41

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

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

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

@@ -18,23 +18,25 @@ import { CustomDialog, DialogTransition } from "./components/custom-dialog";
 import { dialogStyles } from "./style";
 import CustomButton from "./components/custom-button";
 import { SETTINGS_TABS } from "./constants";
+import Loader from "../common/loader/loader";
 
 export function QuickFilterSettings({
   show,
   filterSettingStates,
   onClose,
   columnsData,
+  columnsDataLoading,
   tabsApiData,
   tabsApiDataLoading,
+  onSaveSettingsData,
 }: QuickFilterModalProps) {
   const [tabValue, setTabValue] = useState(0);
 
   const {
     showListViewSettings,
-    setSettingsData,
     quickTabStates,
-    sortingTabState,
     columnTabState,
+    sortingTabState,
   } = filterSettingStates;
 
   const hasAPIData = Boolean(Object.entries(columnsData).length);
@@ -43,6 +45,37 @@ export function QuickFilterSettings({
     setTabValue(newValue);
   };
 
+  const handleSaveSetSettingsData = () => {
+    const copyColumnTabState = columnTabState?.isDefault
+      ? {
+          isDefault: true,
+          show_list: columnTabState?.show_list || [],
+          hide_list: columnTabState?.hide_list || [],
+        }
+      : {
+          isDefault: false,
+          tabs: columnTabState?.tabs || [],
+        };
+
+    const copySortingTabState = sortingTabState?.isDefault
+      ? {
+          isDefault: true,
+          sortby: sortingTabState?.sortby || [],
+        }
+      : {
+          isDefault: false,
+          tabs: sortingTabState?.tabs || [],
+        };
+
+    const modifiedSettingsData = {
+      quick_tab: quickTabStates,
+      column: copyColumnTabState,
+      sorting: copySortingTabState,
+    };
+
+    onSaveSettingsData && onSaveSettingsData(modifiedSettingsData);
+  };
+
   return (
     <CustomDialog
       open={show || showListViewSettings}
@@ -66,7 +99,9 @@ export function QuickFilterSettings({
       </DialogTitle>
 
       <DialogContent>
-        {!hasAPIData ? ( // check if columns data is available
+        {columnsDataLoading ? (
+          <Loader loaderText="Loading settings..." />
+        ) : !hasAPIData ? ( // check if columns data is available
           <Typography>Please pass meta data in component</Typography>
         ) : (
           <>
@@ -110,18 +145,9 @@ export function QuickFilterSettings({
         )}
       </DialogContent>
 
-      {hasAPIData && (
+      {!columnsDataLoading && hasAPIData && (
         <DialogActions>
-          <CustomButton
-            onClick={() => {
-              setSettingsData((prev: any) => ({
-                ...prev,
-                quick_tab: quickTabStates,
-                columns: columnTabState,
-                sorting: sortingTabState,
-              }));
-            }}
-          >
+          <CustomButton onClick={handleSaveSetSettingsData}>
             Save Quick Filter
           </CustomButton>
         </DialogActions>

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

@@ -49,13 +49,13 @@ export const listingValuesStyles: ListingValuesStyleProps = {
     border: "0.5px solid #0E0C0B1F",
     borderRadius: "8px",
     minHeight: "10rem",
+    backgroundColor: "#fdfdfc",
   },
   heading: { fontWeight: 400, color: "#0E0C0BB2", fontSize: "16px" },
   button: { fontSize: "13px", textTransform: "none", color: "#0E0C0BB2" },
   draggableContainer: {
     maxHeight: 200,
     borderRadius: 1,
-    p: 1,
     mt: 2,
     transition: "background-color 0.2s ease",
   },
@@ -76,8 +76,6 @@ export const listingValuesStyles: ListingValuesStyleProps = {
 export const TabsStyles: TabStyleProps = {
   mainTabsHeader: {
     fontStyle: "italic",
-    mb: 2,
-    display: "block",
     fontWeight: 400,
     fontSize: "12px",
     color: "#0E0C0BB2",
@@ -108,7 +106,6 @@ export const TabsStyles: TabStyleProps = {
   },
 
   checkboxStyle: {
-    p: 2,
     display: "flex",
     flexDirection: "column",
   },

package/src/components/table-settings/tabs/vertical/custom-tab-panel.tsx

@@ -14,15 +14,16 @@ const CustomTabPanel = ({
   ...props
 }: TabPanelProps) => {
   return (
-    <div
+    <Box
       role="tabpanel"
       hidden={value !== index}
       id={`simple-tabpanel-${index}`}
       aria-labelledby={`simple-tab-${index}`}
       {...props}
+      sx={{ height: "100%" }}
     >
-      {value === index && <Box>{children}</Box>}
-    </div>
+      {value === index && children}
+    </Box>
   );
 };
 

package/src/libs/hooks/useCraftTableFilterSettings.tsx

@@ -1,8 +1,9 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { craftTableFilterSettingsOptionsProps } from "../../types/table-options";
 import {
   ColumnTabConfigProps,
   QuickTabConfigProps,
+  SavedButtonErrorProps,
   SettingsDataProps,
   SortingConfigProps,
 } from "../../types/filter-settings";
@@ -148,16 +149,32 @@ export function useCraftTableFilterSettings() {
   });
 
   // Quick FIlter settings local states
-  const [quickTabStates, setQuickTabStates] = useState<QuickTabConfigProps>(
-    settingsData?.quick_tab || {}
-  );
+
+  const [quickTabStates, setQuickTabStates] = useState<QuickTabConfigProps>({});
   const [columnTabState, setColumnTabState] = useState<ColumnTabConfigProps>(
-    settingsData?.column || {}
+    {}
   );
   const [sortingTabState, setSortingTabState] = useState<SortingConfigProps>(
-    settingsData?.sorting || {}
+    {}
   );
 
+  // This state will be used for settings validation
+  const [saveButtonError, setSaveButtonError] = useState<SavedButtonErrorProps>(
+    { hasError: false, messages: [] }
+  );
+
+  useEffect(() => {
+    if (settingsData?.quick_tab) {
+      setQuickTabStates(settingsData?.quick_tab);
+    }
+    if (settingsData?.column) {
+      setColumnTabState(settingsData?.column);
+    }
+    if (settingsData?.sorting) {
+      setSortingTabState(settingsData?.sorting);
+    }
+  }, [settingsData]);
+
   const craftTableFilterSettingsOptions: craftTableFilterSettingsOptionsProps =
     {
       settingsData: settingsData,
@@ -170,6 +187,8 @@ export function useCraftTableFilterSettings() {
       setColumnTabState: setColumnTabState,
       sortingTabState: sortingTabState,
       setSortingTabState: setSortingTabState,
+      saveButtonError: saveButtonError,
+      setSaveButtonError: setSaveButtonError,
     };
 
   return craftTableFilterSettingsOptions;

package/src/libs/hooks/useEntityTableAPI.tsx

@@ -15,6 +15,7 @@ import {
   commonGetDropdownDataAPI,
   createSavedFilter,
   deleteSavedFilter,
+  getSettingsData,
   saveSettingsData,
   updateSavedFilter,
   viewSettingsDropDown,
@@ -251,16 +252,48 @@ 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,
-      }),
+// 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({
+    mutationKey: ["saveSettingsData", entity_type],
+    mutationFn: ({ payload }: { payload: any }) => {
+      return saveSettingsData(payload);
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ["saveSettingsData"],
+      });
+    },
+    onError: (error: any) => {
+      const msg = error?.response?.data?.message;
+      console.log("Error in saving settings tab data", msg, error);
+    },
+  });
+
+  return { saveSettingsDataMutation };
+};
+
+export const useGetSettingsDataAPI = (entity_type: string) => {
+  const { data: getSettingsAPIData } = useQuery({
+    queryKey: ["getSettingsData", entity_type],
+    queryFn: () => getSettingsData(entity_type),
+    enabled: !!entity_type,
   });
 
-  return { saveSettingsAPIData };
+  return { getSettingsAPIData };
 };

package/src/libs/utils/apiColumn.ts

@@ -122,9 +122,21 @@ 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) => {
   try {
-    const response = await api.post(`/layout/create`, payload);
+    const response = await api.post(`/entity/create?entity_type=LAP`, payload);
     return response.data;
   } catch (error) {
     console.error("Failed to save settings data:", error);
@@ -132,7 +144,17 @@ export const saveSettingsData = async (payload: any) => {
   }
 };
 
-// ALL View Settings API
+export const getSettingsData = async (entity_type: any) => {
+  try {
+    const response = await api.get(
+      `layout-preference?entity_type=${entity_type}`
+    );
+    return response.data;
+  } catch (error) {
+    console.error("Failed to fetch settings data:", error);
+    throw error;
+  }
+};
 
 export const viewSettingsDropDown = async ({
   entity_type,

package/src/main.tsx

@@ -4,7 +4,18 @@ import App from "./App.tsx";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
-  <QueryClientProvider  client={new QueryClient()}>
+  <QueryClientProvider
+    client={
+      new QueryClient({
+        defaultOptions: {
+          queries: {
+            refetchOnWindowFocus: false,
+            retry: 3,
+          },
+        },
+      })
+    }
+  >
     <React.StrictMode>
       <App />
     </React.StrictMode>

package/src/types/filter-settings.ts

@@ -6,8 +6,10 @@ export interface QuickFilterModalProps {
   filterSettingStates: craftTableFilterSettingsOptionsProps;
   onClose?: () => void;
   columnsData: FilterColumnsDataProps;
+  columnsDataLoading: boolean;
   tabsApiData?: string[];
   tabsApiDataLoading?: boolean;
+  onSaveSettingsData?: (data: any) => void;
 }
 
 type TabName = string;
@@ -95,3 +97,11 @@ export interface ToggleButtonTabsProps {
   value: boolean;
   isDisabled: boolean;
 }
+
+export interface SavedButtonErrorProps {
+  hasError: boolean;
+  messages: {
+    type: string;
+    message: string;
+  }[];
+}

package/src/types/table-options.ts

@@ -13,6 +13,7 @@ import {
 import {
   ColumnTabConfigProps,
   QuickTabConfigProps,
+  SavedButtonErrorProps,
   SettingsDataProps,
   SortingConfigProps,
 } from "./filter-settings";
@@ -55,6 +56,8 @@ export interface craftTableFilterSettingsOptionsProps {
   setColumnTabState: Dispatch<SetStateAction<ColumnTabConfigProps>>;
   sortingTabState: SortingConfigProps;
   setSortingTabState: Dispatch<SetStateAction<SortingConfigProps>>;
+  saveButtonError: SavedButtonErrorProps;
+  setSaveButtonError: Dispatch<SetStateAction<SavedButtonErrorProps>>;
 }
 
 export interface CraftTableFeatureProps {