rez-table-listing-mui 1.2.12 → 1.2.14

package/src/view/ListingView.tsx

@@ -0,0 +1,423 @@
+import { useEffect, useMemo, useState } from "react";
+import { makeData, Person } from "../listing/libs/utils/make-hierar-data";
+import { useCraftTable } from "../listing/libs/hooks/useCraftTable";
+import { useCraftTableFilterSettings } from "../listing/libs/hooks/useCraftTableFilterSettings";
+import { useDefaultColumns } from "../listing/libs/hooks/useDefaultColumns";
+import {
+  useDetailsQueryAPI,
+  useFetchData,
+} from "../listing/libs/hooks/useEntityTableHooks";
+import { ENTITY_TYPE } from "../listing/libs/utils/common";
+import {
+  useCommonDropdownAPI,
+  useDeleteFilterAPI,
+  useEntityTableAPI,
+  useGetSettingsDataAPI,
+  useSavedFilterAPI,
+  useSaveSettingsDataAPI,
+  useSettingsDropDownAPI,
+  useUpdateFilterAPI,
+} from "../listing/libs/hooks/useEntityTableAPI";
+import { useGetKanbanData } from "../kanban/hooks/hooks";
+import { entityTableMetaMaster } from "../listing/libs/utils/apiColumn";
+import { ColumnDef } from "@tanstack/react-table";
+import { FilterMasterStateProps } from "../listing/types/filter";
+import { SettingsDataProps } from "../listing/types/filter-settings";
+import LoginButton from "../listing/components/login";
+import TableWrapper from "../listing/components/index-table";
+import { CraftTableFilter } from "..";
+import { TableTabs } from "../listing/components/tabs";
+import { QuickFilterSettings } from "../listing/components/table-settings";
+
+function ListingView() {
+  // const [mockLoading, setMockLoading] = useState<boolean>(true);
+  // const [jsonData] = useState<any[]>([]);
+  const [columns, setColumns] = useState<any[]>([]);
+  const [searchTerm, setSearchTerm] = useState("");
+  //   const [data, setData] = useState<Person[]>(() => makeData(200, 3, 2));
+
+  const [selectedTab, setSelectedTab] = useState("All");
+
+  const tableStates = useCraftTable();
+  const filterSettingStates = useCraftTableFilterSettings();
+
+  const { filters, setFilters, filterMaster, setFilterMaster, filterToDelete } =
+    tableStates;
+
+  const { showListViewSettings, setShowListViewSettings, setSettingsData } =
+    filterSettingStates;
+
+  const { defaultColumns } = useDefaultColumns();
+
+  const { metaQuery } = useFetchData(ENTITY_TYPE);
+  const { detailsQuery } = useDetailsQueryAPI(
+    filterMaster?.saved_filters?.selectedId
+      ? filterMaster?.saved_filters?.selectedId
+      : metaQuery?.data?.default_filter?.value
+  );
+
+  const { savedMutation } = useSavedFilterAPI(); //API CALL FOR SAVED FILTER
+  const { deleteMutation } = useDeleteFilterAPI(); //API FOR DELETING FILTER
+  const { updateMutation } = useUpdateFilterAPI(); //API FOR UPDATE FILTER
+  const { saveSettingsDataMutation } = useSaveSettingsDataAPI(ENTITY_TYPE);
+  const { dropdownData } = useCommonDropdownAPI(metaQuery.data);
+  const { settingsTabDropdownData, settingsTabDropdownPending } =
+    useSettingsDropDownAPI({
+      entity_type: ENTITY_TYPE,
+      column: filterSettingStates?.quickTabStates?.attribute,
+      sort_by: filterSettingStates?.quickTabStates?.sorting,
+    });
+
+  const { getSettingsAPIData } = useGetSettingsDataAPI(ENTITY_TYPE);
+
+  useEffect(() => {
+    // setTimeout(() => {
+    //   setMockLoading(false);
+    // }, 1000);
+
+    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
+          return 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
+        };
+
+        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.toLowerCase() === 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);
+      }
+    };
+
+    fetchMeta();
+  }, [selectedTab]);
+
+  useEffect(() => {
+    setFilters(detailsQuery.data ?? []);
+  }, [detailsQuery.data]);
+
+  useEffect(() => {
+    setSettingsData(getSettingsAPIData?.layout_json);
+  }, [getSettingsAPIData]);
+
+  //For server side sorting
+  const enableServerSideSorting = true;
+
+  const { tableData } = useEntityTableAPI({
+    page: 0,
+    size: 50,
+    entity_type: ENTITY_TYPE,
+    tabs: {
+      columnName:
+        getSettingsAPIData?.layout_json?.quick_tab?.attribute || "status",
+      sortBy: getSettingsAPIData?.layout_json?.quick_tab?.sorting || "ASC",
+      value:
+        selectedTab.toLowerCase() === "all" ? "" : selectedTab.toLowerCase(),
+    },
+    quickFilter: tableStates.filters,
+    sortby: [
+      {
+        sortColum: "name",
+        sortType: "ASC",
+      },
+    ],
+    attributeFilter: [],
+  });
+
+  const newData = useMemo(
+    () => tableData?.entity_list || [],
+    [tableData?.entity_list]
+  );
+  const tabsData = tableData?.entity_tabs;
+
+  // Auto-switch tab if the selected tab is removed
+  useEffect(() => {
+    if (
+      tabsData &&
+      tabsData.length > 0 &&
+      !tabsData.some(
+        (tab) => tab.tab_value?.toLowerCase() === selectedTab.toLowerCase()
+      )
+    ) {
+      // Try to select 'ALL' if it exists
+      const allTab = tabsData.find(
+        (tab) => tab.tab_value?.toLowerCase() === "all"
+      );
+      if (allTab) {
+        setSelectedTab(allTab.tab_value || "All");
+      } else {
+        setSelectedTab(tabsData[0].tab_value || "All");
+      }
+    }
+  }, [tabsData, selectedTab]);
+
+  const totalCount = useMemo(() => {
+    return Number(
+      tableData?.entity_tabs?.find((tab) => {
+        const activeTab = selectedTab || "All";
+        return (
+          tab.tab_value?.toLocaleLowerCase() === activeTab.toLocaleLowerCase()
+        );
+      })?.tab_value_count || "0"
+    );
+  }, [tableData, selectedTab]);
+
+  const handleRenderStatus = ({ value }: any) => {
+    const statusValue = value?.toUpperCase();
+    return (
+      <div
+        style={{
+          backgroundColor: "#F0F0F0",
+          color: "#757575",
+          textTransform: "capitalize",
+          fontSize: "0.75rem",
+          fontWeight: 500,
+          borderRadius: "4px",
+          padding: "4px",
+          width: "fit-content",
+        }}
+      >
+        {statusValue}
+      </div>
+    );
+  };
+
+  const handleRenderAction = ({ row }: any) => {
+    return <button onClick={() => alert(JSON.stringify(row))}>Edit</button>;
+  };
+
+  const filteredData = useMemo(() => {
+    if (!searchTerm) return newData;
+
+    return newData.filter((row: any) =>
+      Object.values(row)
+        .join(" ")
+        .toLowerCase()
+        .includes(searchTerm.toLowerCase())
+    );
+  }, [newData, searchTerm]);
+
+  // API to handle saving a filter
+  const handleSaveFilter = (name: string) => {
+    const quickFilter = filters.map((f) => ({
+      filter_attribute: f.filter_attribute,
+      filter_operator: f.filter_operator,
+      filter_value: f.filter_value,
+    }));
+
+    const payload = {
+      name,
+      is_default: false,
+      mapped_entity_type: ENTITY_TYPE, // For that entity type
+      status: "ACTIVE",
+      entity_type: "SFM", // FIXED entity type
+      filterDetails: quickFilter,
+    };
+    const entity_type = "SFM";
+    savedMutation.mutate(
+      { entity_type, payload },
+      {
+        onSuccess: (response) => {
+          const newFilterId = response?.id;
+          if (newFilterId) {
+            setFilterMaster(
+              (prev) =>
+                ({
+                  ...prev,
+                  saved_filters: {
+                    ...prev?.saved_filters,
+                    selectedId: newFilterId.toString(),
+                    selectedName: name,
+                  },
+                  activeFilterTabIndex: 1,
+                } as FilterMasterStateProps)
+            );
+          }
+        },
+      }
+    );
+  };
+
+  // API to handle removing or deleting a filter
+  const handleRemoveFilter = () => {
+    const payload = {
+      name: filterToDelete?.label,
+      id: filterToDelete?.value,
+      is_default: false,
+      mapped_entity_type: ENTITY_TYPE,
+      status: "INACTIVE",
+      entity_type: "SFM",
+    };
+    const entity_type = "SFM";
+    deleteMutation.mutate({ entity_type, payload });
+  };
+
+  //API to update the filter
+  const handleUpdateFilter = () => {
+    const quickFilter = filters.map((f) => ({
+      filter_attribute: f.filter_attribute,
+      filter_operator: f.filter_operator,
+      filter_value: f.filter_value,
+    }));
+
+    const payload = {
+      name: filterMaster?.saved_filters?.selectedName, // Name of the filter
+      is_default: false,
+      id: filterMaster?.saved_filters?.selectedId,
+      mapped_entity_type: ENTITY_TYPE,
+      status: "ACTIVE",
+      entity_type: "SFM",
+      filterDetails: quickFilter,
+    };
+    const entity_type = "SFM";
+    updateMutation.mutate({ entity_type, payload });
+  };
+
+  const handleSaveSettingsData = (settingsData: SettingsDataProps) => {
+    const payload = {
+      entity_type: "LAP",
+      mapped_entity_type: ENTITY_TYPE,
+      layout_json: settingsData,
+    };
+
+    saveSettingsDataMutation.mutate({ payload });
+  };
+
+  return (
+    <TableWrapper
+      data={filteredData}
+      // data={data}
+      // columns={defaultColumns}
+      columns={columns && columns.length > 0 ? columns : defaultColumns}
+      tableStates={tableStates}
+      featureOptions={{
+        striped: true,
+        compactTable: false,
+        enableSorting: !enableServerSideSorting,
+        enableColumnReordering: true,
+        enableColumnResizing: true,
+        enableRowSelection: false,
+        enableServerSideSorting: enableServerSideSorting,
+      }}
+      // loadingOptions={{
+      //   isLoading: isTableDataPending || detailsQuery.isPending,
+      //   // loaderText: "Loading, Please wait...",
+      // }}
+      paginationOptions={{
+        showPagination: true,
+        paginationPosition: "top",
+        paginationView: "compact",
+        totalRows: totalCount,
+      }}
+      customRenderFn={{
+        renderStatus: handleRenderStatus,
+        renderAction: handleRenderAction,
+      }}
+      // emptyListComponent={<div>No data found</div>}
+      filterOptions={{
+        show: tableStates?.showTableFilter,
+        component: (
+          <CraftTableFilter
+            tableStates={tableStates}
+            onClose={() => tableStates.setShowTableFilter(false)}
+            onUpdateFilter={handleUpdateFilter}
+            columnsData={metaQuery.data || {}}
+            dropdownData={dropdownData || []}
+            onDeleteFilter={handleRemoveFilter}
+            onSaveFilter={handleSaveFilter}
+          />
+        ),
+      }}
+      topbarOptions={{
+        tableStates,
+        leftSideComponent: (
+          <>
+            <TableTabs
+              columns={columns}
+              settingsOptions={{
+                showIcon: true,
+                onClick: () => setShowListViewSettings(!showListViewSettings),
+              }}
+              activeTab={selectedTab}
+              tableStates={tableStates}
+              tabsData={tabsData}
+              onClick={(state) => {
+                setSelectedTab(state);
+              }}
+            />
+
+            <QuickFilterSettings
+              filterSettingStates={filterSettingStates}
+              onClose={() => setShowListViewSettings(false)}
+              columnsData={metaQuery.data || {}}
+              columnsDataLoading={metaQuery.isPending}
+              tabsApiData={settingsTabDropdownData || []}
+              tabsApiDataLoading={settingsTabDropdownPending}
+              onSaveSettingsData={handleSaveSettingsData}
+            />
+          </>
+        ),
+        searchValue: searchTerm,
+        onSearchChange: (val) => setSearchTerm(val),
+        showFilterToggle: true,
+        onFilterButtonClick: () =>
+          tableStates.setShowTableFilter(!tableStates.showTableFilter),
+      }}
+    />
+  );
+}
+
+export default ListingView;