rez-table-listing-mui 1.3.61 → 2.0.0

package/src/view/ListingView.tsx

@@ -6,12 +6,17 @@ import {
   useDetailsQueryAPI,
   useFetchData,
 } from "../listing/libs/hooks/useEntityTableHooks";
-import { ENTITY_TYPE, MAPPED_ENTITY_TYPE } from "../listing/libs/utils/common";
+import {
+  ENTITY_TYPE,
+  formatTableHeaders,
+  MAPPED_ENTITY_TYPE,
+} from "../listing/libs/utils/common";
 import {
   useCommonFilterDropdownAPI,
   useEntityTableAPI,
   useGetAttributes,
   useGetOperationList,
+  useGetTableTabs,
   useSaveSettingsDataAPI,
   useSettingsDropDownAPI,
 } from "../listing/libs/hooks/useEntityTableAPI";
@@ -39,7 +44,10 @@ function ListingView() {
   const [searchTerm, setSearchTerm] = useState("");
   //   const [data, setData] = useState<Person[]>(() => makeData(200, 3, 2));
 
-  const [selectedTab, setSelectedTab] = useState("All");
+  const [selectedTab, setSelectedTab] = useState({
+    tab_name: "All",
+    tab_value: "",
+  });
 
   const tableStates = useCraftTable();
   const filterSettingStates = useCraftTableFilterSettings();
@@ -50,8 +58,30 @@ function ListingView() {
     filterSettingStates;
 
   const { defaultColumns } = useDefaultColumns();
+  const { data: getSettingsAPIData } = useGetNavigationLayoutAPI(ENTITY_TYPE);
+  const tabsPaylod = {
+    entity_type: ENTITY_TYPE,
+    defaultTabsConfig: {
+      attribute: "status",
+    },
+  };
 
-  const { metaQuery } = useFetchData(ENTITY_TYPE);
+  const { tableTabs } = useGetTableTabs(tabsPaylod);
+  const tabsData = tableTabs;
+
+  const { metaQuery } = useFetchData(ENTITY_TYPE, {
+    tabs: {
+      columnName:
+        getSettingsAPIData?.mapped_json?.quick_tab?.attribute || "status",
+      sortBy: getSettingsAPIData?.mapped_json?.quick_tab?.sorting || "ASC",
+      value:
+        selectedTab?.tab_name?.toLowerCase() === "all"
+          ? tabsData?.find((tab: any) => tab?.tab_name?.toLowerCase() === "all")
+              ?.tab_value
+          : selectedTab?.tab_value,
+      name: selectedTab?.tab_name,
+    },
+  });
 
   const { detailsQuery } = useDetailsQueryAPI(
     filterMaster?.saved_filters?.selectedId
@@ -66,9 +96,7 @@ function ListingView() {
   const isColumnDefault =
     filterSettingStates?.columnTabState?.isDefault || false;
   const activeTabIndex = filterSettingStates?.columnTabState?.tabs?.findIndex(
-    (tab) =>
-      tab?.tab_name?.value == selectedTab ||
-      tab?.tab_name?.label?.toLowerCase() == selectedTab?.toLowerCase()
+    (tab) => tab?.tab_name?.value == selectedTab?.tab_name
   );
   const settingsColumnState = (filterSettingStates?.settingsData?.column ||
     {}) as ColumnTabConfigProps;
@@ -86,83 +114,12 @@ function ListingView() {
     });
 
   const queryClient = useQueryClient();
-  const { data: getSettingsAPIData } = useGetNavigationLayoutAPI(ENTITY_TYPE);
 
   const fetchMeta = async () => {
-    try {
-      const { res: allColumns } = await entityTableMetaMaster(ENTITY_TYPE);
-
-      const savedColumnSettings = filterSettingStates.settingsData?.column;
-
-      const getOrderedColumns = (
-        showList: { value: string }[],
-        filteredColumns: any[]
-      ) => {
-        // Build ordered columns using showList and filteredColumns
-        // const orderedColumns = showList
-        //   ?.map((showItem) => {
-        //     return filteredColumns.find(
-        //       (col) => col?.accessorKey === showItem?.value
-        //     );
-        //   })
-        //   ?.filter((col): col is ColumnDef<any> => col !== undefined); // Ensure non-undefined columns are returned
-
-        // didnt know what above code was doing so rewrote it as below
-        // const res = showList.map((item: any) => ({
-        //   id: item.value,
-        //   accessorKey: item.value,
-        //   header: item.label,
-        // }));
-
-        // return res;
-        return allColumns;
-      };
+    const res = formatTableHeaders(metaQuery?.data?.column_list || []);
+    console.log("res", res);
 
-      setColumns(allColumns);
-
-      // if (
-      //   savedColumnSettings &&
-      //   !savedColumnSettings.isDefault &&
-      //   savedColumnSettings.tabs
-      // ) {
-      //   // Tab-wise view: find the active tab and use its show_list
-      //   const activeTabSettings = savedColumnSettings.tabs.find(
-      //     (tab) => tab.tab_name?.value == selectedTab.toLowerCase()
-      //   );
-
-      //   if (activeTabSettings?.show_list) {
-      //     const visibleColumns = new Set(
-      //       activeTabSettings.show_list.map((c) => c.value)
-      //     );
-
-      //     // First, filter columns based on visibleColumns
-      //     const filteredColumns = allColumns.filter((col: any) =>
-      //       visibleColumns.has(col?.accessorKey)
-      //     );
-      //     setColumns(
-      //       getOrderedColumns(activeTabSettings.show_list, filteredColumns)
-      //     );
-      //   } else {
-      //     // Fallback if no specific settings for the active tab are found
-      //     setColumns(allColumns);
-      //   }
-      // } else if (savedColumnSettings && savedColumnSettings.show_list) {
-      //   // Default view: use the main show_list
-      //   const visibleColumns = new Set(
-      //     savedColumnSettings.show_list.map((c) => c.value)
-      //   );
-      //   const filtered = allColumns.filter((col: any) =>
-      //     visibleColumns.has(col?.accessorKey)
-      //   );
-
-      //   setColumns(getOrderedColumns(savedColumnSettings.show_list, filtered));
-      // } else {
-      //   // No settings found, use all columns
-      //   setColumns(allColumns);
-      // }
-    } catch (error) {
-      console.error("Failed to fetch metadata:", error);
-    }
+    setColumns(res);
   };
 
   useEffect(() => {
@@ -204,10 +161,15 @@ function ListingView() {
     size: 20,
     entity_type: ENTITY_TYPE,
     tabs: {
-      columnName: getSettingsAPIData?.quick_tab?.attribute || "lead_status",
+      columnName: getSettingsAPIData?.quick_tab?.attribute || "status",
       sortBy: getSettingsAPIData?.quick_tab?.sorting || "ASC",
       value:
-        selectedTab.toLowerCase() === "all" ? "" : selectedTab.toLowerCase(),
+        selectedTab?.tab_name?.toLowerCase() === "all"
+          ? tabsData?.find((tab) => tab?.tab_name?.toLowerCase() === "all")
+              .tab_value
+          : selectedTab?.tab_value,
+
+      name: selectedTab?.tab_name,
     },
     quickFilter: tableStates.filters,
     sortby: [
@@ -223,7 +185,6 @@ function ListingView() {
     () => tableData?.entity_list || [],
     [tableData?.entity_list]
   );
-  const tabsData = tableData?.entity_tabs;
 
   // Auto-switch tab if the selected tab is removed
   useEffect(() => {
@@ -231,7 +192,8 @@ function ListingView() {
       tabsData &&
       tabsData.length > 0 &&
       !tabsData.some(
-        (tab) => tab.tab_name?.toLowerCase() === selectedTab.toLowerCase()
+        (tab) =>
+          tab.tab_name?.toLowerCase() === selectedTab?.tab_name?.toLowerCase()
       )
     ) {
       // Try to select 'ALL' if it exists
@@ -239,17 +201,17 @@ function ListingView() {
         (tab) => tab.tab_name?.toLowerCase() === "all"
       );
       if (allTab) {
-        setSelectedTab(allTab.tab_name || "All");
+        setSelectedTab(allTab || "All");
       } else {
-        setSelectedTab(tabsData[0].tab_name || "All");
+        setSelectedTab(tabsData[0] || "All");
       }
     }
   }, [tabsData, selectedTab]);
 
   const totalCount = useMemo(() => {
     return Number(
-      tableData?.entity_tabs?.find((tab) => {
-        const activeTab = selectedTab || "All";
+      tabsData?.find((tab) => {
+        const activeTab = selectedTab?.tab_name || "All";
         return (
           tab.tab_name?.toLocaleLowerCase() === activeTab.toLocaleLowerCase()
         );
@@ -384,8 +346,8 @@ function ListingView() {
       mapped_json: data,
       type: "filter",
     };
-
     await saveLayoutAPI(payload);
+    queryClient.invalidateQueries({ queryKey: ["tableTabs"] });
   };
 
   const handleSaveSettingsData = (settingsData: SettingsDataProps) => {
@@ -518,7 +480,6 @@ function ListingView() {
         leftSideComponent: (
           <>
             <TableTabs
-              columns={columns}
               settingsOptions={{
                 showIcon: true,
                 onClick: () => setShowListViewSettings(!showListViewSettings),
@@ -557,9 +518,15 @@ function ListingView() {
         ),
         searchValue: searchTerm,
         onSearchChange: (val) => setSearchTerm(val),
-        showFilterToggle: true,
+        showFilterToggle: false,
         onFilterButtonClick: () =>
           tableStates.setShowTableFilter(!tableStates.showTableFilter),
+        showColumnToggle: false,
+        showSearch: false,
+        showChangeLayoutToggle: false,
+        showSortingToggle: false,
+        // viewMoreToggle: true,
+        // showCompactTableToggle: false,
       }}
     />
   );

package/src/listing/components/table-head-dnd-cell.tsx

@@ -1,150 +0,0 @@
-import { flexRender } from "@tanstack/react-table";
-import { useSortable } from "@dnd-kit/sortable";
-import { CSSProperties, useState } from "react";
-import { CSS } from "@dnd-kit/utilities";
-import { DownArrow, DragHandleIcon, UpArrow } from "../../assets/svg";
-import {
-  getColumnAlignment,
-  getColumnPinningStyles,
-} from "../libs/utils/common";
-import { align } from "../types/common";
-import { TableHeaderProps } from "../types/table";
-import TableHeadPin from "./table-head-pin";
-import TableHeadPopover from "./table-head-popover";
-
-function DraggableTableHeader<T>({
-  header,
-  activeTab,
-  featureOptions,
-  tableStates,
-  filterSettingStates,
-  onSaveSettings,
-}: TableHeaderProps<T>) {
-  const { enableColumnPinning } = featureOptions;
-
-  // Popover
-  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
-
-  const handleHover = (event: React.MouseEvent<HTMLElement>) => {
-    setAnchorEl((prev) => (prev ? null : event.currentTarget));
-  };
-
-  const handleClose = () => {
-    setAnchorEl(null);
-  };
-
-  const { isDragging, transform, attributes, listeners } = useSortable({
-    id: header.column.id,
-  });
-
-  const isPinned = header.column.getIsPinned();
-
-  const styles: CSSProperties = {
-    opacity: isDragging ? 0.8 : 1,
-    position: "relative",
-    transform: CSS.Translate.toString(transform),
-    transition: "width transform 0.2s ease-in-out",
-    width: header.column.getSize(),
-    minWidth: `${header.column.columnDef.minSize ?? 180}px`,
-    maxWidth: `${header.column.columnDef.maxSize}px`,
-  };
-
-  let sortProps: {
-    className: string;
-    title?: string;
-    style?: CSSProperties;
-  } = {
-    className: "ts__content",
-    // style: {
-    //   justifyContent: getColumnAlignment(
-    //     (header?.column?.columnDef?.meta as align)?.align
-    //   ),
-    // },
-  };
-
-  // if (header.column.getCanSort()) {
-  //   sortProps = {
-  //     ...sortProps,
-  //     title:
-  //       header.column.getNextSortingOrder() === "asc"
-  //         ? "Sort ascending"
-  //         : header.column.getNextSortingOrder() === "desc"
-  //         ? "Sort descending"
-  //         : "Clear sort",
-  //   };
-  // }
-
-  return (
-    <th
-      onMouseLeave={handleClose}
-      key={header?.id}
-      className="ts__head__th"
-      colSpan={header.colSpan}
-      onClick={handleHover}
-      style={{
-        width: `${header.column.getSize()}px `,
-        minWidth: `${header.column.columnDef.minSize}px`,
-        maxWidth: `${header.column.columnDef.maxSize}px`,
-        ...styles,
-        ...getColumnPinningStyles(header.column),
-        zIndex: isPinned ? 3 : isDragging ? 1 : 0,
-      }}
-    >
-      {header.isPlaceholder ? null : (
-        <div {...sortProps}>
-          <div
-            className={`${
-              header.column.getCanSort() ? "ts__content__sort" : ""
-            }`.trim()}
-            // onClick={header.column.getToggleSortingHandler()}
-          >
-            {flexRender(header.column.columnDef.header, header.getContext())}
-
-            {{
-              asc: <UpArrow />,
-              desc: <DownArrow />,
-            }[header.column.getIsSorted() as "asc" | "desc"] ?? null}
-          </div>
-
-          {enableColumnPinning && (
-            <TableHeadPin
-              header={header}
-              featureOptions={featureOptions}
-              tableStates={tableStates}
-              filterSettingStates={filterSettingStates}
-            />
-          )}
-
-          <div {...attributes} {...listeners} className="ts__dnd__button">
-            <DragHandleIcon />
-          </div>
-        </div>
-      )}
-
-      {/* column resizing */}
-      {header.column.getCanResize() ? (
-        <div
-          onDoubleClick={() => header.column.resetSize()}
-          onMouseDown={header.getResizeHandler()}
-          onTouchStart={header.getResizeHandler()}
-          className={`column__resize ${
-            header.column.getIsResizing() ? "is__resizing" : ""
-          }`}
-        />
-      ) : null}
-
-      {/* Popover */}
-      <TableHeadPopover
-        anchorEl={anchorEl}
-        activeTab={activeTab}
-        onClose={handleClose}
-        header={header}
-        tableStates={tableStates}
-        filterSettingStates={filterSettingStates}
-        onSaveSettings={onSaveSettings}
-      />
-    </th>
-  );
-}
-
-export default DraggableTableHeader;

package/src/listing/components/table-head-pin.tsx

@@ -1,22 +0,0 @@
-import { IconPinOffOutline } from "../../assets/svg";
-import { TableHeaderProps } from "../types/table";
-
-function TableHeadPin<T>({ header }: TableHeaderProps<T>) {
-  return header.column.getIsPinned() !== "left" ? (
-    <div className="ts--head--button" onClick={() => header.column.pin("left")}>
-      {/* <IconPinOutline /> */}
-    </div>
-  ) : (
-    <div
-      className="ts--head--button"
-      onClick={(e) => {
-        e.stopPropagation();
-        header.column.pin(false);
-      }}
-    >
-      <IconPinOffOutline />
-    </div>
-  );
-}
-
-export default TableHeadPin;

package/src/listing/components/tabs/index.scss

@@ -1,42 +0,0 @@
-.table-tabs {
-  .tabs {
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
-    margin: 0rem;
-    padding: 0rem;
-
-    .tabs-settings {
-      margin-left: 0.1rem;
-      margin-right: 0.5rem;
-      cursor: pointer;
-    }
-
-    .tab {
-      display: flex;
-      gap: 0.5rem;
-      padding: 0.5rem 1rem;
-      cursor: pointer;
-      color: var(--grey-900);
-      font-size: 0.875rem;
-      font-family: "Satoshi";
-      font-weight: 700;
-
-      .tab__label {
-        font-family: inherit;
-      }
-
-      &.active {
-        background: var(--grey-500);
-        border-top-left-radius: 0.5rem;
-        border-top-right-radius: 0.5rem;
-        backdrop-filter: blur(200px);
-      }
-    }
-
-    .tabs-dropdown {
-      margin-left: 1rem;
-      cursor: pointer;
-    }
-  }
-}

package/src/listing/components/tabs/styles.ts

@@ -1,34 +0,0 @@
-import { SxProps, Theme } from "@mui/material";
-
-interface TabStylesProps {
-  tabs: SxProps<Theme>;
-  tab: SxProps<Theme>;
-  tabCount: SxProps<Theme>;
-}
-
-export const tableTabsStyles: TabStylesProps = {
-  tabs: {
-    minHeight: "38px",
-  },
-
-  tab: {
-    color: "#888888",
-    padding: "8px 12px",
-    minHeight: "38px",
-    textTransform: "none",
-    minWidth: "unset",
-    whiteSpace: "nowrap",
-
-    "&.Mui-selected": {
-      color: "#0e0c0b",
-      fontWeight: 700,
-    },
-  },
-
-  tabCount: {
-    padding: "2px 3px",
-    borderRadius: "6px",
-    border: "1px solid #0E0C0BE6",
-    color: "#0E0C0B",
-  },
-};