rez-table-listing-mui 1.3.62 → 2.0.1

package/src/listing/components/topbar/index.tsx

@@ -5,9 +5,8 @@ import {
   FilterationIcon,
   HideColumnIcon,
 } from "../../../assets/svg.tsx";
-import { Popover } from "@mui/material";
+import { Box, Popover } from "@mui/material";
 import LayoutSelector from "../table-change-layout.tsx";
-import useOutsideClick from "../../libs/hooks/useOutsideClick.tsx";
 import { Table } from "@tanstack/react-table";
 import { TopbarOptionsProps } from "../../types/table.ts";
 import "./index.scss";
@@ -48,7 +47,6 @@ function Topbar<T>({
   const [sortAnchorEl, setSortAnchorEl] = useState<HTMLElement | null>(null);
   const [groupBy, setGroupBy] = useState<string>("None");
 
-  const [showColumnHiding, setShowColumnHiding] = useState(false);
   const [layoutAnchorEl, setLayoutAnchorEl] = useState<null | HTMLElement>(
     null
   );
@@ -60,10 +58,6 @@ function Topbar<T>({
     table.getAllLeafColumns().map((col) => col.id)
   );
 
-  const { setShowTableFilter } = tableStates;
-
-  // search
-  const [showSearchInput, setShowSearchInput] = useState(false);
   const searchContainerRef = useRef<HTMLDivElement>(null);
 
   // sync column order with table instance
@@ -78,7 +72,6 @@ function Topbar<T>({
       setSortAnchorEl(null);
       setColumnAnchorEl(null);
       setViewMoreAnchorEl(null);
-      setShowColumnHiding(false);
     }
   }, [isFullscreen]);
 
@@ -96,22 +89,11 @@ function Topbar<T>({
 
   const { container: fullscreenContainer } = useFullscreenPopoverContainer();
 
-  const dropdownRef = useRef<HTMLDivElement>(null);
-  useOutsideClick({
-    ref: dropdownRef,
-    handler: () => setShowColumnHiding(false),
-  });
-
   const handleLayoutSelect = (layout: string) => {
     setSelectedLayout(layout);
     setLayoutAnchorEl(null);
   };
 
-  useOutsideClick({
-    ref: searchContainerRef,
-    handler: () => setShowSearchInput(false),
-  });
-
   useEffect(() => {
     const handleExternalLayoutTrigger = (e: Event) => {
       const target = (e as CustomEvent).detail?.target as HTMLElement;
@@ -128,7 +110,6 @@ function Topbar<T>({
     };
 
     const handleExternalSearchTrigger = () => {
-      setShowSearchInput(true);
       setTimeout(() => {
         searchContainerRef.current?.querySelector("input")?.focus();
       }, 100);
@@ -180,96 +161,107 @@ function Topbar<T>({
         {rightSideComponent}
         {paginationComponent}
 
-        {showSearch && (
-          <div
-            title="Search"
-            className="external-search-trigger"
-            onClick={() => {
-              const customEvent = new CustomEvent("triggerSearchInput");
-              window.dispatchEvent(customEvent);
+        <Box
+          sx={{
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            gap: 0.5,
+          }}
+        >
+          {showSearch && (
+            <Box
+              title="Search"
+              className="external-search-trigger"
+              onClick={() => {
+                const customEvent = new CustomEvent("triggerSearchInput");
+                window.dispatchEvent(customEvent);
+              }}
+              ref={searchContainerRef}
+            >
+              <TableSearch
+                value={searchValue ?? ""}
+                onChange={onSearchChange ?? (() => {})}
+              />
+            </Box>
+          )}
+
+          {showChangeLayoutToggle && (
+            <>
+              <div className="change-layout ts--button" title="Layout">
+                <div
+                  onClick={(e) => {
+                    const customEvent = new CustomEvent(
+                      "triggerLayoutPopover",
+                      {
+                        detail: { target: e.currentTarget },
+                      }
+                    );
+                    window.dispatchEvent(customEvent);
+                  }}
+                  className="external-layout-trigger"
+                >
+                  <ChangeLayoutIcon />
+                </div>
+              </div>
+            </>
+          )}
+          <Popover
+            open={Boolean(layoutAnchorEl)}
+            anchorEl={layoutAnchorEl}
+            onClose={() => setLayoutAnchorEl(null)}
+            anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
+            container={fullscreenContainer}
+            sx={{
+              mt: 2.2,
             }}
-            ref={searchContainerRef}
           >
-            <TableSearch
-              value={searchValue ?? ""}
-              onChange={onSearchChange ?? (() => {})}
+            <LayoutSelector
+              onSelect={handleLayoutSelect}
+              selectedLayout={selectedLayout}
             />
-          </div>
-        )}
-
-        {showChangeLayoutToggle && (
-          <>
-            <div className="change-layout ts--button" title="Layout">
+          </Popover>
+          {showColumnToggle && (
+            <>
               <div
-                onClick={(e) => {
-                  const customEvent = new CustomEvent("triggerLayoutPopover", {
-                    detail: { target: e.currentTarget },
-                  });
-                  window.dispatchEvent(customEvent);
-                }}
-                className="external-layout-trigger"
+                className="hide-column ts--button"
+                onClick={(e) => setColumnAnchorEl(e.currentTarget)}
+                title="Column"
               >
-                <ChangeLayoutIcon />
+                <HideColumnIcon />
               </div>
-            </div>
-          </>
-        )}
-        <Popover
-          open={Boolean(layoutAnchorEl)}
-          anchorEl={layoutAnchorEl}
-          onClose={() => setLayoutAnchorEl(null)}
-          anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
-          container={fullscreenContainer}
-          sx={{
-            mt: 2.2,
-          }}
-        >
-          <LayoutSelector
-            onSelect={handleLayoutSelect}
-            selectedLayout={selectedLayout}
-          />
-        </Popover>
-        {showColumnToggle && (
-          <>
-            <div
-              className="hide-column ts--button"
-              onClick={(e) => setColumnAnchorEl(e.currentTarget)}
-              title="Column"
-            >
-              <HideColumnIcon />
-            </div>
-            <ColumnToggle
-              anchorEl={columnAnchorEl}
-              onClose={() => setColumnAnchorEl(null)}
-              table={table}
-              columnOrder={columnOrder}
-              setColumnOrder={setColumnOrder}
-            />
-          </>
-        )}
+              <ColumnToggle
+                anchorEl={columnAnchorEl}
+                onClose={() => setColumnAnchorEl(null)}
+                table={table}
+                columnOrder={columnOrder}
+                setColumnOrder={setColumnOrder}
+              />
+            </>
+          )}
 
-        {showSortingToggle && (
-          <>
-            <div
-              className="filter ts--button"
-              title="Sort"
-              onClick={(e) => setSortAnchorEl(e.currentTarget)}
-            >
-              <SortingIcon />
-            </div>
-            <SortPopover
-              anchorEl={sortAnchorEl}
-              onClose={() => setSortAnchorEl(null)}
-              columns={table.getAllLeafColumns().map((col) => ({
-                id: col.id,
-                label: (col.columnDef.meta as any)?.label || col.id,
-              }))}
-              onChange={(sortingRules) => table.setSorting(sortingRules)}
-            />
-          </>
-        )}
+          {showSortingToggle && (
+            <>
+              <div
+                className="filter ts--button"
+                title="Sort"
+                onClick={(e) => setSortAnchorEl(e.currentTarget)}
+              >
+                <SortingIcon />
+              </div>
+              <SortPopover
+                anchorEl={sortAnchorEl}
+                onClose={() => setSortAnchorEl(null)}
+                columns={table.getAllLeafColumns().map((col) => ({
+                  id: col.id,
+                  label: (col.columnDef.meta as any)?.label || col.id,
+                }))}
+                onChange={(sortingRules) => table.setSorting(sortingRules)}
+              />
+            </>
+          )}
 
-        {/* {showFilterToggle && (
+          {/* {showFilterToggle && (
           <div
             className="filter ts--button"
             title="Filter"
@@ -298,51 +290,52 @@ function Topbar<T>({
           </div>
         )} */}
 
-        {showFilterToggle && (
-          <div
-            className="filter ts--button"
-            title="Filter"
-            onClick={onFilterButtonClick}
-            style={{
-              position: "relative",
-              display: "flex",
-              justifyContent: "center",
-              alignItems: "center",
-              backgroundColor:
-                tableStates.showTableFilter || tableStates.filters.length > 0
-                  ? "#eae4fe"
-                  : "transparent",
-              height: "25px",
-              width: "25px",
-              borderRadius: "6px",
-              cursor: "pointer",
-            }}
-          >
-            <FilterationIcon
-              color={
-                tableStates.showTableFilter || tableStates.filters.length > 0
-                  ? "#7A5AF8"
-                  : "#1C1B1F"
-              }
-            />
-
-            {tableStates.filters.length > 0 && !tableStates.showTableFilter && (
-              <span
-                style={{
-                  position: "absolute",
-                  top: "1px",
-                  right: "1px",
-                  width: "6px",
-                  height: "6px",
-                  borderRadius: "50%",
-                  backgroundColor: "#F63D68",
-                }}
+          {showFilterToggle && (
+            <div
+              className="filter ts--button"
+              title="Filter"
+              onClick={onFilterButtonClick}
+              style={{
+                position: "relative",
+                display: "flex",
+                justifyContent: "center",
+                alignItems: "center",
+                backgroundColor:
+                  tableStates.showTableFilter || tableStates.filters.length > 0
+                    ? "#eae4fe"
+                    : "transparent",
+                height: "25px",
+                width: "25px",
+                borderRadius: "6px",
+                cursor: "pointer",
+              }}
+            >
+              <FilterationIcon
+                color={
+                  tableStates.showTableFilter || tableStates.filters.length > 0
+                    ? "#7A5AF8"
+                    : "#1C1B1F"
+                }
               />
-            )}
-          </div>
-        )}
 
-        {/* {viewMoreToggle && (
+              {tableStates.filters.length > 0 &&
+                !tableStates.showTableFilter && (
+                  <span
+                    style={{
+                      position: "absolute",
+                      top: "1px",
+                      right: "1px",
+                      width: "6px",
+                      height: "6px",
+                      borderRadius: "50%",
+                      backgroundColor: "#F63D68",
+                    }}
+                  />
+                )}
+            </div>
+          )}
+
+          {/* {viewMoreToggle && (
           <div className="view-more ts--button" title="View More">
             <ViewMore
               compactMode={isCompactTable}
@@ -357,7 +350,7 @@ function Topbar<T>({
             />
           </div>
         )} */}
-        {/* {viewMoreToggle && (
+          {/* {viewMoreToggle && (
           <div
             className="view-more ts--button view-more-trigger"
             title="View More"
@@ -375,36 +368,37 @@ function Topbar<T>({
             />
           </div>
         )} */}
-        <Popover
-          open={isViewMoreOpen}
-          anchorEl={viewMoreAnchorEl}
-          onClose={() => setViewMoreAnchorEl(null)}
-          anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
-          transformOrigin={{ vertical: "top", horizontal: "left" }}
-          container={fullscreenContainer}
-          // PaperProps={{
-          //   sx: {
-          //     mt: 2,
-          //     padding: 0,
-          //     width: 380,
-          //     borderRadius: 1,
-          //     boxShadow: 4,
-          //   },
-          // }}
-        >
-          <ViewMore
-            compactMode={isCompactTable}
-            onCompactToggle={(value: string) =>
-              setIsCompactTable(value === "Compact")
-            }
-            isFullscreen={isFullscreen}
-            onFullscreenToggle={fullscreenToggle}
-            groupBy={groupBy}
-            onGroupByChange={(value: string) => setGroupBy(value)}
-            tableStates={tableStates}
+          <Popover
+            open={isViewMoreOpen}
+            anchorEl={viewMoreAnchorEl}
             onClose={() => setViewMoreAnchorEl(null)}
-          />
-        </Popover>
+            anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
+            transformOrigin={{ vertical: "top", horizontal: "left" }}
+            container={fullscreenContainer}
+            // PaperProps={{
+            //   sx: {
+            //     mt: 2,
+            //     padding: 0,
+            //     width: 380,
+            //     borderRadius: 1,
+            //     boxShadow: 4,
+            //   },
+            // }}
+          >
+            <ViewMore
+              compactMode={isCompactTable}
+              onCompactToggle={(value: string) =>
+                setIsCompactTable(value === "Compact")
+              }
+              isFullscreen={isFullscreen}
+              onFullscreenToggle={fullscreenToggle}
+              groupBy={groupBy}
+              onGroupByChange={(value: string) => setGroupBy(value)}
+              tableStates={tableStates}
+              onClose={() => setViewMoreAnchorEl(null)}
+            />
+          </Popover>
+        </Box>
       </div>
     </div>
   );

package/src/listing/libs/hooks/useEntityTableHooks.ts

@@ -14,11 +14,11 @@ export const useDetailsQueryAPI = (value: string | undefined) => {
   return { detailsQuery };
 };
 
-export const useFetchData = (entity_type: string) => {
+export const useFetchData = (entity_type: string, payload?: any) => {
   // First query to get meta data
   const metaQuery = useQuery({
-    queryKey: ["meta", entity_type],
-    queryFn: () => entityTableFilterMaster(entity_type),
+    queryKey: ["meta", entity_type, payload],
+    queryFn: () => entityTableFilterMaster(entity_type, payload),
   });
 
   return { metaQuery };

package/src/listing/libs/utils/apiColumn.ts

@@ -27,10 +27,14 @@ export const entityTableMetaMaster = async (entity_type: string) => {
   }
 };
 
-export const entityTableFilterMaster = async (entity_type: string) => {
+export const entityTableFilterMaster = async (
+  entity_type: string,
+  payload?: any
+) => {
   try {
     const response = await api.post(
-      `/meta/get-table-data?entity_type=${entity_type}&list_type=${entity_type}`
+      `/meta/get-table-data?entity_type=${entity_type}&list_type=${entity_type}`,
+      payload
     );
 
     // const filteredData = {
@@ -215,6 +219,6 @@ export const getAttributes = async (entity_type: string) => {
 };
 
 export const getTableTabs = async (payload: any) => {
-  const response = await api.post(`filter/get-tabs-data`, payload);
+  const response = await api.post(`filter/adm/tabs`, payload);
   return response.data;
 };

package/src/listing/libs/utils/common.ts

@@ -111,3 +111,47 @@ api.interceptors.request.use(
     return Promise.reject(error);
   }
 );
+
+export const formatTableHeaders = (columns: any) => {
+  const mapped = columns.map((col: any) => {
+    const meta =
+      col.attribute_key === "status" ||
+      col.attribute_key === "lead_status" ||
+      col.attribute_key === "flag" ||
+      col.attribute_key === "invitation_status"
+        ? { type: "custom", propName: "renderStatus", align: col.align }
+        : col.attribute_key === "profile_image" ||
+          col.attribute_key === "short_logo"
+        ? {
+            type: "custom",
+            propName: "profileImageFetch",
+            align: col.align,
+          }
+        : col.attribute_key === "start_date" || col.attribute_key === "end_date"
+        ? { type: "custom", propName: "dateFormater", align: col.align }
+        : col.attribute_key === "action"
+        ? { type: "custom", propName: "renderAction", align: col.align }
+        : col.attribute_key === "code"
+        ? {
+            type: "custom",
+            propName: "drillCellRenderer",
+            align: col.align,
+          }
+        : col.attribute_key === "primary_mobile"
+        ? {
+            type: "custom",
+            propName: "apiCallonClick",
+            align: col.align,
+          }
+        : undefined;
+
+    return {
+      header: col.name ?? "",
+      accessorKey: col.attribute_key ?? "",
+      size: col.size,
+      meta,
+    };
+  });
+
+  return mapped;
+};

package/src/listing/types/table.ts

@@ -95,7 +95,7 @@ export interface CraftTableProps<T> {
   filterOptions?: FilterOptionsProps;
   settingsOptions?: settingsOptionsProps;
   craftTableFilterSettingsOptions?: craftTableFilterSettingsOptionsProps;
-  activeTab?: string;
+  activeTab?: any;
 }
 export interface CraftTableComponentProps<T> {
   table: Table<T>;
@@ -115,6 +115,6 @@ export interface TableHeaderProps<T> {
   activeTab?: string;
   featureOptions: CraftTableFeatureProps;
   tableStates: CraftTableOptionsProps;
-  filterSettingStates: craftTableFilterSettingsOptionsProps;
+  filterSettingStates?: craftTableFilterSettingsOptionsProps;
   onSaveSettings?: (columnId: string) => void;
 }