rez-table-listing-mui 1.0.47 → 1.0.49

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

@@ -26,8 +26,40 @@ interface ListingValuesProps {
   containerId: string;
   tabsApiDataLoading?: boolean;
   onItemToggle: (itemId: string, fromContainerId: string) => void;
+  enableDragAndDrop?: boolean;
 }
 
+const ListingValuesContent = ({
+  item,
+  containerId,
+  onItemToggle,
+}: {
+  item: FilterValue;
+  containerId: string;
+  onItemToggle: (itemId: string, fromContainerId: string) => void;
+}) => {
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        gap: 1,
+        flex: 1,
+        color: containerId === "tabs" ? "black" : "#9e9d9b",
+      }}
+    >
+      <Typography>{item.label}</Typography>
+      <IconButton
+        size="small"
+        onClick={() => onItemToggle(item.id, containerId)}
+      >
+        {containerId === "tabs" ? <EyeIcon /> : <ClosedEyeIcon />}
+      </IconButton>
+    </Box>
+  );
+};
+
 const ListingValues = ({
   filteredValues,
   buttonText,
@@ -38,6 +70,7 @@ const ListingValues = ({
   containerId,
   tabsApiDataLoading,
   onItemToggle,
+  enableDragAndDrop = true,
 }: ListingValuesProps) => {
   const { setNodeRef } = useDroppable({
     id: containerId,
@@ -73,39 +106,39 @@ const ListingValues = ({
           )}
 
           <Box ref={setNodeRef} sx={listingValuesStyles.draggableContainer}>
-            <SortableContext
-              items={filteredValues.map((item) => item.id)}
-              strategy={verticalListSortingStrategy}
-            >
+            {enableDragAndDrop ? (
+              <SortableContext
+                items={filteredValues.map((item) => item.id)}
+                strategy={verticalListSortingStrategy}
+              >
+                <Box sx={listingValuesStyles.draggableCover}>
+                  {filteredValues.map((item) => (
+                    <DraggableListItem
+                      key={item.id}
+                      id={item.id}
+                      containerId={containerId}
+                    >
+                      <ListingValuesContent
+                        item={item}
+                        containerId={containerId}
+                        onItemToggle={onItemToggle}
+                      />
+                    </DraggableListItem>
+                  ))}
+                </Box>
+              </SortableContext>
+            ) : (
               <Box sx={listingValuesStyles.draggableCover}>
                 {filteredValues.map((item) => (
-                  <DraggableListItem
+                  <ListingValuesContent
                     key={item.id}
-                    id={item.id}
+                    item={item}
                     containerId={containerId}
-                  >
-                    <Box
-                      sx={{
-                        display: "flex",
-                        alignItems: "center",
-                        flex: 1,
-                        color: containerId === "tabs" ? "black" : "#9e9d9b",
-                      }}
-                    >
-                      <Typography>{item.label}</Typography>
-                    </Box>
-
-                    {/* on click i want to append this item in the show list and remove it from the hide list */}
-                    <IconButton
-                      size="small"
-                      onClick={() => onItemToggle(item.id, containerId)}
-                    >
-                      {containerId === "tabs" ? <EyeIcon /> : <ClosedEyeIcon />}
-                    </IconButton>
-                  </DraggableListItem>
+                    onItemToggle={onItemToggle}
+                  />
                 ))}
               </Box>
-            </SortableContext>
+            )}
           </Box>
         </Box>
       )}

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

@@ -16,7 +16,6 @@ import { craftTableFilterSettingsOptionsProps } from "../../../types/table-optio
 import CustomToggleSwitchButton from "./toggle-button-switch";
 import { FilterColumnsDataProps } from "../../../types/filter";
 import { TOGGLE_BUTTON_TABS } from "../constants";
-import { ColumnTabConfigProps } from "../../../types/filter-settings";
 import CustomTabs from "../tabs/horizontal";
 
 export interface ColumnItem {
@@ -39,14 +38,8 @@ const ColumnTab = ({ filterSettingStates, columnsData }: ColumnTabProps) => {
   const [searchTerm, setSearchTerm] = useState<string>("");
   const [selectedTabIndex, setSelectedTabIndex] = useState<number>(0);
 
-  const {
-    quickTabStates,
-    columnTabState,
-    setColumnTabState,
-    settingsData,
-    sortingTabState,
-    setSortingTabState,
-  } = filterSettingStates;
+  const { quickTabStates, columnTabState, setColumnTabState, settingsData } =
+    filterSettingStates;
 
   useEffect(() => {
     const mappedColumns: ColumnItem[] =

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

@@ -343,6 +343,8 @@ const QuickTab = ({
     });
   };
 
+  const enableDND = quickTabStates?.sorting === "custom" ? true : false;
+
   return (
     <Box
       sx={{
@@ -437,6 +439,7 @@ const QuickTab = ({
                 containerId="list"
                 tabsApiDataLoading={tabsApiDataLoading}
                 onItemToggle={handleItemToggle}
+                enableDragAndDrop={enableDND}
               />
               <ListingValues
                 buttonText="Hide All"
@@ -446,6 +449,7 @@ const QuickTab = ({
                 containerId="tabs"
                 // tabsApiDataLoading={tabsApiDataLoading}
                 onItemToggle={handleItemToggle}
+                enableDragAndDrop={enableDND}
               />
             </Grid>
           </DndContext>

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

@@ -93,16 +93,6 @@ const Sorting = ({
     // }
   }, [quickTabStates?.show_list]);
 
-  // useEffect(() => {
-  //   const hasEmptySortBy = false;
-
-  //   if (isSortingDefault !== undefined && isSortingDefault) {
-  //     console.log("first");
-  //   } else {
-  //     console.log("second");
-  //   }
-  // }, [isSortingDefault]);
-
   const sensors = useSensors(useSensor(PointerSensor));
 
   const activeTabIndex = sortingTabState?.tabs?.findIndex(
@@ -265,7 +255,6 @@ const Sorting = ({
   };
 
   const { showList, hideList } = getCurrentLists();
-  console.log("showList", showList);
 
   return (
     <Box sx={{ display: "flex", flexDirection: "column", gap: "0.75rem" }}>

package/src/libs/hooks/useCraftTable.tsx

@@ -40,6 +40,9 @@ export function useCraftTable(paginationPageSize: number = 25) {
 
   const [showTableFilter, setShowTableFilter] = useState<boolean>(false);
 
+  //For filter criteria paper
+  const [showFilterOptions, setShowFilterOption] = useState<boolean>(false);
+
   if (pagination.pageIndex < 0 || pagination.pageSize <= 0) {
     throw new Error(
       "Invalid pagination values: pageIndex and pageSize must be positive."
@@ -69,6 +72,8 @@ export function useCraftTable(paginationPageSize: number = 25) {
     setFilterMaster: setFilterMaster,
     showTableFilter: showTableFilter,
     setShowTableFilter: setShowTableFilter,
+    showFilterOptions: showFilterOptions,
+    setShowFilterOption: setShowFilterOption,
   };
 
   return craftTableOptions;

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.clientWidth); // Update width state
+      }
+    });
+
+    // Start observing the element's size changes
+    resizeObserver.observe(ref.current);
+
+    // Clean up observer on component unmount
+    return () => resizeObserver.disconnect();
+  }, [ref, ref.current?.clientWidth]);
+
+  return width; // Return the current width
+};
+
+export default useElementWidth;

package/src/libs/hooks/useEntityTableAPI.tsx

@@ -258,7 +258,7 @@ export const useSettingsDropDownAPI = ({
 //     queryFn: () =>
 //       saveSettingsData({
 //         entity_type: "LAP",
-//         mapped_entity_type: "BRD",
+//         mapped_entity_type: "AYR",
 //         layout_json: payload,
 //       }),
 //     enabled: !!payload && !!Object.entries(payload).length,

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);
   }

package/src/libs/utils/common.ts

@@ -101,4 +101,4 @@ api.interceptors.request.use(
   }
 );
 
-export const ENTITY_TYPE = "BRD";
+export const ENTITY_TYPE = "AYR";

package/src/types/table-options.ts

@@ -43,6 +43,8 @@ export interface CraftTableOptionsProps {
   setFilterMaster: Dispatch<SetStateAction<FilterMasterStateProps | null>>;
   showTableFilter: boolean;
   setShowTableFilter: Dispatch<SetStateAction<boolean>>;
+  showFilterOptions: boolean;
+  setShowFilterOption: Dispatch<SetStateAction<boolean>>;
 }
 
 export interface craftTableFilterSettingsOptionsProps {