rez-table-listing-mui 1.0.46 → 1.0.48

package/package.json

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

package/src/components/filter/components/forms/components/Filter-criteria.tsx

@@ -17,6 +17,7 @@ import {
 import { CraftTableOptionsProps } from "../../../../../types/table-options";
 import CustomSearch from "../../search";
 import { filterStyles } from "../../../style";
+import useElementWidth from "../../../../../libs/hooks/useElementWidth";
 
 const FilterCriteria = ({
   columnsData,
@@ -46,8 +47,11 @@ const FilterCriteria = ({
 
   const [showFilterOptions, setShowFilterOption] = useState(false);
   const { filters, setFilters } = tableStates;
+
   const filterButtonRef = useRef<HTMLButtonElement>(null);
 
+  const filterButtonWidth = useElementWidth(filterButtonRef);
+
   const handleAddFilter = (column: FilterColumnsListProps) => {
     const dropdownOptions = columnsData.operation_list[column.data_type];
 
@@ -110,7 +114,7 @@ const FilterCriteria = ({
       {showFilterOptions && (
         <Paper
           sx={{
-            width: filterButtonRef.current?.offsetWidth || 360, // Dynamic width based on button
+            width: filterButtonWidth || 360, // Dynamic width based on button
             p: 1,
             mt: 2,
             cursor: "pointer",
@@ -141,8 +145,12 @@ const FilterCriteria = ({
                 }}
               >
                 {columnsData?.column_list
-                  ?.filter((column) =>
-                    column.name.toLowerCase().includes(searchTerm.toLowerCase())
+                  ?.filter(
+                    (column) =>
+                      column.name.toLowerCase() !== "action" && // Exclude Action column in filter criteria options
+                      column.name
+                        .toLowerCase()
+                        .includes(searchTerm.toLowerCase())
                   )
                   .map((column, index) => {
                     const isAlreadySelected = filters?.some(

package/src/components/filter/components/forms/index.tsx

@@ -107,7 +107,7 @@ const FilterForm = ({
 
   useEffect(() => {
     reset(defaultValues);
-  }, [selectedFilters, filterName]);
+  }, [selectedFilters]);
 
   const debouncedUpdateFilters = useCallback(
     customDebounce((updatedFilters: UpdatedFilterStateProps[]) => {

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

@@ -35,8 +35,14 @@ const QuickTab = ({
   tabsApiData,
   tabsApiDataLoading,
 }: SettingsQuickTabProps) => {
-  const { quickTabStates, setQuickTabStates, settingsData, setColumnTabState } =
-    filterSettingStates;
+  const {
+    quickTabStates,
+    setQuickTabStates,
+    settingsData,
+    setColumnTabState,
+    saveButtonError,
+    setSaveButtonError,
+  } = filterSettingStates;
 
   const [searchTerm, setSearchTerm] = useState<string>("");
 
@@ -101,6 +107,43 @@ const QuickTab = ({
         }));
       }
     }
+
+    // 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(() => {

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

@@ -37,6 +37,7 @@ export function QuickFilterSettings({
     quickTabStates,
     columnTabState,
     sortingTabState,
+    saveButtonError,
   } = filterSettingStates;
 
   const hasAPIData = Boolean(Object.entries(columnsData).length);
@@ -148,7 +149,10 @@ export function QuickFilterSettings({
 
       {!columnsDataLoading && hasAPIData && (
         <DialogActions>
-          <CustomButton onClick={handleSaveSetSettingsData}>
+          <CustomButton
+            disabled={saveButtonError?.hasError}
+            onClick={handleSaveSetSettingsData}
+          >
             Save Quick Filter
           </CustomButton>
         </DialogActions>

package/src/libs/hooks/useElementWidth.tsx

@@ -0,0 +1,28 @@
+import { useState, useEffect } from "react";
+
+// Custom hook to track the width of an element
+const useElementWidth = (ref: React.RefObject<HTMLElement>) => {
+  const [width, setWidth] = useState<number>(0);
+
+  useEffect(() => {
+    // If there's no element to observe, just return early
+    if (!ref.current) return;
+
+    // ResizeObserver callback function
+    const resizeObserver = new ResizeObserver(() => {
+      if (ref.current) {
+        setWidth(ref.current.offsetWidth); // Update width state
+      }
+    });
+
+    // Start observing the element's size changes
+    resizeObserver.observe(ref.current);
+
+    // Clean up observer on component unmount
+    return () => resizeObserver.disconnect();
+  }, [ref]);
+
+  return width; // Return the current width
+};
+
+export default useElementWidth;

package/src/libs/utils/apiColumn.ts

@@ -32,14 +32,15 @@ export const entityTableFilterMaster = async (entity_type: string) => {
       `/meta/get-table-data?entity_type=${entity_type}&list_type=${entity_type}`
     );
 
-    const filteredData = {
-      ...response.data.data,
-      column_list: response.data.data.column_list.filter(
-        (item: any) => item.attribute_key !== "action"
-      ),
-    };
+    // const filteredData = {
+    //   ...response.data.data,
+    //   column_list: response.data.data.column_list.filter(
+    //     (item: any) => item.attribute_key !== "action"
+    //   ),
+    // };
     // return response.data.data;
-    return filteredData; // FOR ACTION COLUMN REMOVE
+    // return filteredData; // FOR ACTION COLUMN REMOVE
+    return response.data.data;
   } catch (error) {
     console.error("Failed to fetch filter operation list meta:", error);
   }