rez-table-listing-mui 0.0.24 → 0.0.26

package/src/libs/hooks/useEntityTableHooks.ts

@@ -0,0 +1,25 @@
+import { useQuery } from "@tanstack/react-query";
+import {
+  entityTableFilterMaster,
+  fetchDetailsByFilterId,
+} from "../utils/apiColumn";
+
+export const useDetailsQueryAPI = (value: string) => {
+  const detailsQuery = useQuery({
+    queryKey: ["details", value],
+    queryFn: () => fetchDetailsByFilterId(value),
+    enabled: !!value, // This ensures that the second query only runs if the first one has data
+  });
+
+  return { detailsQuery };
+};
+
+export const useFetchData = (entity_type: string) => {
+  // First query to get meta data
+  const metaQuery = useQuery({
+    queryKey: ["meta", entity_type],
+    queryFn: () => entityTableFilterMaster(entity_type),
+  });
+
+  return { metaQuery };
+};

package/src/libs/utils/apiColumn.ts

@@ -0,0 +1,123 @@
+import { api } from "./common";
+import {
+  createSavedFilterPaload,
+  deleteSavedFilterPayload,
+  updateSavedFilterPayload,
+} from "../../types/filter";
+
+export const entityTableMetaMaster = async (entity_type: string) => {
+  try {
+    const response = await api.post(
+      `/meta/get-table-data?entity_type=${entity_type}&list_type=${entity_type}`
+    );
+
+    const rawColumns = response.data?.data?.column_list || [];
+
+    const res = rawColumns.map((item: any) => ({
+      id: item.attribute_key,
+      accessorKey: item.attribute_key,
+      header: item.name,
+    }));
+    return { res };
+  } catch (error) {
+    console.error("Failed to fetch table meta:", error);
+    return { res: [] };
+  }
+};
+
+export const entityTableFilterMaster = async (entity_type: string) => {
+  try {
+    const response = await api.post(
+      `/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"
+      ),
+    };
+    // console.log("response", filteredData.column_list);
+    // return response.data.data;
+    return filteredData; // FOR ACTION COLUMN REMOVE
+  } catch (error) {
+    console.error("Failed to fetch filter operation list meta:", error);
+  }
+};
+
+export const fetchDetailsByFilterId = async (filterId: string) => {
+  const response = await api.get(`/filter/${filterId}`);
+  return response.data;
+};
+
+export const commonGetDropdownDataAPI = async (
+  entity_type: string,
+  organization_id?: string | null,
+  data?: any
+) => {
+  try {
+    const requestBody = {
+      status: "ACTIVE",
+      organization_id: organization_id,
+      ...data,
+    };
+
+    const response = await api.post(
+      `/list-master/getDropdownData/${entity_type}`,
+      requestBody
+    );
+
+    return response.data;
+  } catch (error) {
+    console.error("Failed to fetch dropdown data:", error);
+    throw error;
+  }
+};
+
+export const createSavedFilter = async (
+  entity_type: string,
+  payload: createSavedFilterPaload
+) => {
+  try {
+    const response = await api.post(
+      `/entity/create?entity_type=${entity_type}`,
+      payload
+    );
+    return response.data;
+  } catch (error) {
+    console.error("Failed to fetch saved filter list:", error);
+    throw error;
+  }
+};
+
+export const deleteSavedFilter = async (
+  entity_type: string,
+  payload: deleteSavedFilterPayload
+) => {
+  try {
+    const response = await api.post(
+      `/entity/update/17?entity_type=${entity_type}`,
+      payload
+    );
+    return response.data;
+  } catch (error) {
+    console.error("Failed to delete saved filter:", error);
+    throw error;
+  }
+};
+
+export const updateSavedFilter = async (
+  entity_type: string,
+  payload: updateSavedFilterPayload
+) => {
+  try {
+    const response = await api.post(
+      `/entity/update/17?entity_type=${entity_type}`,
+      payload
+    );
+    return response.data;
+  } catch (error) {
+    console.error("Failed to update saved filter:", error);
+    throw error;
+  }
+};

package/src/libs/utils/common.ts

@@ -1,6 +1,7 @@
 import { Column } from "@tanstack/react-table";
 import { alignProps } from "../../types/common";
 import { CSSProperties } from "react";
+import axios from "axios";
 
 export const formatClassName = (className: string): string => {
   return className.replace(/\s+/g, " ").trim();
@@ -60,3 +61,44 @@ export const getColumnPinningStylesBody = <T>(
     width: column.getSize(),
   };
 };
+
+export function customDebounce<T extends (...args: any[]) => any>(
+  func: T,
+  delay: number
+): (...args: Parameters<T>) => void {
+  let timerId: ReturnType<typeof setTimeout> | null = null;
+
+  return function (this: ThisParameterType<T>, ...args: Parameters<T>): void {
+    if (timerId) clearTimeout(timerId);
+    timerId = setTimeout(() => {
+      func.apply(this, args);
+    }, delay);
+  };
+}
+
+// uat http://13.200.182.92:9091/api
+// local http://localhost:9091/api
+
+// API INTEGRATION
+export const api = axios.create({
+  baseURL: "http://13.200.182.92:9091/api",
+  timeout: 10000,
+  headers: {
+    "Content-Type": "application/json",
+  },
+});
+
+api.interceptors.request.use(
+  (config) => {
+    const token = localStorage.getItem("authToken");
+    if (token) {
+      config.headers.Authorization = `Bearer ${token}`;
+    }
+    return config;
+  },
+  (error) => {
+    return Promise.reject(error);
+  }
+);
+
+export const ENTITY_TYPE = "UPR";

package/src/main.tsx

@@ -1,9 +1,12 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
 import App from "./App.tsx";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
+  <QueryClientProvider  client={new QueryClient()}>
+    <React.StrictMode>
+      <App />
+    </React.StrictMode>
+  </QueryClientProvider>
 );

package/src/types/common.ts

@@ -38,3 +38,70 @@ export const camelCaseToTitle = (str: string): string => {
     .replace(/\b\w/g, (char) => char.toUpperCase()) // Capitalize each word's first letter
     .trim();
 };
+
+//API INTEGRATION
+export interface EntityTableAPIProps {
+  entity_type?: string;
+  page: number;
+  size: number;
+  tabs?: {
+    columnName: string;
+    sortBy: "ASC" | "DSC";
+    value?: string;
+  };
+  sortby?: {
+    sortColum: string;
+    sortType: "ASC" | "DSC";
+  }[];
+  quickFilter?: {
+    filter_attribute: string;
+    filter_operator: string;
+    filter_value: string[] | string;
+  }[];
+  attributeFilter?: {
+    filter_attribute: string;
+    filter_operator: string;
+    filter_value: string[] | string;
+  }[];
+}
+
+interface EntityListTab {
+  tab_value: string | null;
+  tab_value_count: string | number;
+}
+
+interface EntityList {
+  id: string;
+  entity_type: string;
+  name: string;
+  status: string | null;
+  parent_type: string | null;
+  parent_id: string | null;
+  code: string;
+  created_by: string | null;
+  created_date: string | null;
+  modified_by: string | null;
+  modified_date: string | null;
+  enterprise_id: string | null;
+  organization_id: number | null;
+  app_code: string | null;
+  is_system: number | null;
+  description: string | null;
+}
+
+export interface EntityListingResponse {
+  data: {
+    entity_tabs: EntityListTab[];
+    entity_list: EntityList[];
+  };
+}
+
+export interface APIParamsProps {
+  page?: number;
+  size?: number;
+}
+
+export type DropdownOption = {
+  value: string | number;
+  label: string;
+};

package/src/types/filter.ts

@@ -0,0 +1,211 @@
+import { CraftTableOptionsProps } from "./table-options";
+
+interface OperationProps {
+  label: string;
+  value: string;
+}
+
+type OperationMapProps = {
+  [key in FilterInputDataTypes]?: OperationProps[];
+};
+
+export interface FilterOperationListProps {
+  label: string;
+  value: string;
+}
+
+export type FilterInputDataTypes =
+  | "text"
+  | "select"
+  | "multiselect"
+  | "date"
+  | "number";
+
+export interface FilterColumnsListProps {
+  created_date: string | null;
+  entity_type: string;
+  id: string;
+  name: string;
+  status: string | null;
+  parent_type: string;
+  parent_id: string;
+  code: string | null;
+  created_by: string | null;
+  modified_by: string | null;
+  modified_date: string | null;
+  enterprise_id: string | null;
+  organization_id: string | null;
+  app_code: string | null;
+  mapped_entity_type: string;
+  menu_code: string | null;
+  table_name: string | null;
+  col_position: number;
+  sortable: string | null;
+  searchable: string | null;
+  attribute_key: string;
+  sort_type: string | null;
+  data_type: FilterInputDataTypes;
+  data_source_type: string | null;
+  datasource_list: any | null;
+  visible: string;
+}
+
+export interface FilterColumnsDataProps {
+  column_list: FilterColumnsListProps[];
+  operation_list: OperationMapProps;
+  saved_filter: FilterOperationListProps[];
+}
+
+export interface FilterDropdownDataProps {
+  [key: string]: FilterOperationListProps[];
+}
+
+export interface FilterDrawerProps {
+  tableStates: CraftTableOptionsProps;
+  open?: boolean;
+  onClose?: () => void;
+  onDeleteFilter?: () => void;
+  onSaveFilter?: (name: string) => void;
+  onUpdateFilter?: (name: string) => void;
+  columnsData: FilterColumnsDataProps;
+  dropdownData: FilterDropdownDataProps;
+  defaultFilters?: Array<{
+    filter_attribute: string;
+    filter_operator: string;
+    filter_value: string;
+  }>;
+  savedFilters?: Array<{ label: string; value: string }>;
+  tableData?: {
+    entity_list: any[];
+  };
+}
+
+export interface FilterCriteria {
+  columnId: string;
+  value: string | string[];
+  type: FilterInputDataTypes | undefined;
+  operator?: string | null;
+  dropdown?: {
+    label?: string;
+    value?: string;
+  };
+  optionList?: {
+    label?: string | undefined;
+    value?: string | undefined;
+  };
+  attribute_key?: string | undefined;
+  name: string | undefined;
+}
+
+export interface FilterStateProps {
+  filter_attribute: string;
+  filter_operator: string;
+  filter_value: string | string[];
+}
+
+export interface UpdatedFilterStateProps extends FilterStateProps {
+  id: string | number;
+  name: string | undefined;
+  data_type: FilterInputDataTypes | undefined;
+  attribute_key?: string;
+  dropdown_list?: {
+    label?: string;
+    value?: string;
+  }[];
+  optionList?: {
+    label?: string | undefined;
+    value?: string | undefined;
+  };
+}
+
+interface FilterDetail {
+  filter_attribute: string;
+  filter_operator: string;
+  filter_value: string | string[];
+}
+
+export interface createSavedFilterPaload {
+  name: string;
+  organization_id?: number;
+  enterprise_id?: number;
+  user_id?: number;
+  is_default: boolean;
+  mapped_entity_type: string;
+  status?: string;
+  entity_type: string;
+  filterDetails: FilterDetail[];
+}
+
+export interface deleteSavedFilterPayload {
+  name: string;
+  is_default: boolean;
+  id: string | number;
+  status?: string;
+  entity_type: string;
+  mapped_entity_type: string;
+}
+
+export interface updateSavedFilterPayload {
+  name: string;
+  is_default: boolean;
+  id: string | number;
+  status?: string;
+  entity_type: string;
+  mapped_entity_type: string;
+  filterDetails: FilterDetail[];
+}
+
+export interface deleteSavedFilterPayload {
+  name: string;
+  is_default: boolean;
+  id: string | number;
+  status?: string;
+  entity_type: string;
+  mapped_entity_type: string;
+}
+interface FilterDetail {
+  filter_attribute: string;
+  filter_operator: string;
+  filter_value: string | string[];
+}
+
+export interface FilterFormComponentProps {
+  columnsData: FilterColumnsDataProps;
+  dropdownData: FilterDropdownDataProps;
+  tableStates: CraftTableOptionsProps;
+  selectedFilters: UpdatedFilterStateProps[];
+  setSelectedFilters: React.Dispatch<
+    React.SetStateAction<UpdatedFilterStateProps[]>
+  >;
+  editMode?: boolean;
+  setEditMode?: React.Dispatch<React.SetStateAction<boolean>>;
+  setDeleteFilterModalOpen?: React.Dispatch<React.SetStateAction<boolean>>;
+  setSavedFilterModalOpen?: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+export interface FilterMasterStateProps {
+  attributes: {
+    selected: string;
+    radio: string;
+  };
+  saved_filters: {
+    selectedId: string;
+    selectedName: string;
+  };
+}
+
+export interface AttributesFilterProps {
+  columnsData: FilterColumnsDataProps;
+  tableStates: CraftTableOptionsProps;
+  dropdownData: FilterDropdownDataProps;
+  searchTerm: string;
+  setSearchTerm: React.Dispatch<React.SetStateAction<string>>;
+}
+
+export interface AttributesFilterSelectProps {
+  columnsData: FilterColumnsDataProps;
+  tableStates: CraftTableOptionsProps;
+  dropdownData: FilterDropdownDataProps;
+  searchTerm: string;
+  setSearchTerm: React.Dispatch<React.SetStateAction<string>>;
+}

package/src/types/table-options.ts

@@ -5,6 +5,11 @@ import {
   ExpandedState,
 } from "@tanstack/react-table";
 import { Dispatch, SetStateAction } from "react";
+import {
+  FilterMasterStateProps,
+  FilterOperationListProps,
+  FilterStateProps,
+} from "./filter";
 
 export interface CraftTableOptionsProps {
   sorting: SortingState;
@@ -19,8 +24,16 @@ export interface CraftTableOptionsProps {
   setExpanded: Dispatch<SetStateAction<ExpandedState>>;
   wrapColumns: Record<string, boolean>;
   setWrapColumns: Dispatch<SetStateAction<Record<string, boolean>>>;
-  globalWrapColumns: boolean | null;
-  setGlobalWrapColumns: Dispatch<SetStateAction<boolean | null>>;
+  filters: FilterStateProps[];
+  setFilters: Dispatch<SetStateAction<FilterStateProps[]>>;
+  savedFilterEditValue: string | number;
+  setSavedFilterEditValue: Dispatch<SetStateAction<string | number>>;
+  filterToDelete: FilterOperationListProps | null;
+  setFilterToDelete: Dispatch<SetStateAction<FilterOperationListProps | null>>;
+  filterSelectedAttributeValue: string;
+  setFilterSelectedAttributeValue: Dispatch<SetStateAction<string>>;
+  filterMaster: FilterMasterStateProps | null;
+  setFilterMaster: Dispatch<SetStateAction<FilterMasterStateProps | null>>;
 }
 
 export interface CraftTableFeatureProps {

package/src/types/table.ts

@@ -10,6 +10,7 @@ import {
   CraftTableOptionsProps,
 } from "./table-options";
 import React from "react";
+import { FilterDrawerProps } from "./filter";
 
 export interface CraftTablePaginationProps {
   totalRows?: number;
@@ -26,17 +27,19 @@ interface LoadingOptionsProps {
 }
 
 export interface TopbarOptionsProps {
+  tableStates: CraftTableOptionsProps;
   leftSideComponent?: React.ReactNode;
   rightSideComponent?: React.ReactNode;
-  showFullscreenToggle?: boolean;
   showColumnToggle?: boolean;
   showCompactTableToggle?: boolean;
   showChangeLayoutToggle?: boolean;
   viewMoreToggle?: boolean;
-  showAddNewButton?: boolean;
   showSearch?: boolean;
-  showFilter?: boolean;
-  showCustomizationToggle?: boolean;
+  showSortingToggle?: boolean;
+  showFilterToggle?: boolean;
+  searchValue?: string;
+  onSearchChange?: (val: string) => void;
+  filterOptions?: FilterDrawerProps;
 }
 
 export interface CustomRenderContext<T> {
@@ -75,8 +78,6 @@ export interface CraftTableProps<T> {
   customRenderFn?: CustomRenderFnMap<T>;
   shouldHideColumn?: (accessorKey?: string) => boolean;
   styleOptions?: CraftTableStyleProps;
-  searchValue?: string;
-  onSearchChange?: (val: string) => void;
 }
 export interface CraftTableComponentProps<T> {
   table: Table<T>;

package/tsconfig.json

@@ -18,7 +18,7 @@
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true
+    "noFallthroughCasesInSwitch": true,
   },
   "include": ["src"],
   "references": [{ "path": "./tsconfig.node.json" }]

package/vite.config.ts

@@ -1,7 +1,7 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
-})
+});