rez-table-listing-mui 1.3.3 → 1.3.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rez-table-listing-mui",
-  "version": "1.3.3",
+  "version": "1.3.4",
   "type": "module",
   "description": "A rez table listing component built on TanStack Table",
   "main": "dist/index.js",

package/src/listing/components/filter/components/attributes-filter.tsx

@@ -10,6 +10,7 @@ import {
 import {
   AttributesFilterProps,
   FilterMasterStateProps,
+  FilterStateProps,
 } from "../../../types/filter";
 import CustomSearch from "./search";
 import { useMemo } from "react";
@@ -64,7 +65,7 @@ const AttributesFilter = ({
     );
     if (!matchingColumn) return;
 
-    let updatedFilters = [...filters];
+    let updatedFilters: FilterStateProps[] = [...filters];
     let updatedRadio: string[] = [];
 
     if (value === "") {
@@ -85,15 +86,15 @@ const AttributesFilter = ({
         filter_value: [value],
       };
 
-      const exists = filters.some(
-        (f) => f.filter_attribute === matchingColumn.attribute_key
+      const exists = filters?.some(
+        (f) => f?.filter_attribute === matchingColumn?.attribute_key
       );
       if (exists) {
-        updatedFilters = filters.map((f) =>
-          f.filter_attribute === matchingColumn.attribute_key ? newFilter : f
-        );
+        updatedFilters = filters?.map((f) =>
+          f?.filter_attribute === matchingColumn?.attribute_key ? newFilter : f
+        ) as FilterStateProps[];
       } else {
-        updatedFilters = [...filters, newFilter];
+        updatedFilters = [...filters, newFilter] as FilterStateProps[];
       }
 
       updatedRadio = [value];

package/src/listing/components/filter/components/forms/components/Date.tsx

@@ -28,7 +28,7 @@ const FormDatePicker = ({
     <LocalizationProvider dateAdapter={AdapterDateFns}>
       <Box display="flex" gap={1}>
         <Controller
-          name={`${filter?.name}.value`}
+          name={`${filter?.filter_attribute_name}.value`}
           control={control}
           defaultValue={
             isRange

package/src/listing/components/filter/components/forms/components/Dropdown.tsx

@@ -27,9 +27,9 @@ const FormDropdown = ({
 }: FormDropdownProps) => {
   return (
     <Controller
-      name={`${filter?.name}.operator`}
+      name={`${filter?.filter_attribute_name}.operator`}
       control={control}
-      defaultValue={filter.filter_operator || dropdownList?.[0]?.value || ""}
+      defaultValue={filter?.filter_operator || dropdownList?.[0]?.value || ""}
       render={({ field }) => (
         <FormControl sx={sx} size="small">
           <Select
@@ -57,26 +57,27 @@ const FormDropdown = ({
               field.onChange(e);
 
               if (
-                (filter.data_type === "date" || filter.data_type === "year") &&
+                (filter?.filter_attribute_data_type === "date" ||
+                  filter?.filter_attribute_data_type === "year") &&
                 newOperator !== oldOperator
               ) {
                 if (newOperator === "today") {
                   setValue(
-                    `${filter.name}.value`,
+                    `${filter?.filter_attribute_name}.value`,
                     moment().format("YYYY-MM-DD"),
                     {
                       shouldDirty: true,
                     }
                   );
                 } else if (newOperator === "between") {
-                  setValue(`${filter.name}.value`, ["", ""], {
+                  setValue(`${filter?.filter_attribute_name}.value`, ["", ""], {
                     shouldDirty: true,
                   });
                 } else if (
                   oldOperator === "between" ||
                   oldOperator === "today"
                 ) {
-                  setValue(`${filter.name}.value`, "", {
+                  setValue(`${filter?.filter_attribute_name}.value`, "", {
                     shouldDirty: true,
                   });
                 }

package/src/listing/components/filter/components/forms/components/Filter-criteria.tsx

@@ -73,11 +73,13 @@ const FilterCriteria = ({
 
     const newSelectedFilter = {
       ...newFilter,
-      id: attribute.id,
-      name: attribute.name,
-      data_type: attribute.element_type,
+      id: attribute?.id,
+      filter_attribute_name: attribute?.name,
+      filter_attribute_data_type: attribute?.element_type,
+      datasource_list: attribute?.datasource_list,
       dropdown_list: matchingDropdownList,
       filter_entity_name: selectedFilterEntity?.label,
+      attribute_key: attribute?.attribute_key,
     };
 
     setFilters((prev) => [...prev, newSelectedFilter]);

package/src/listing/components/filter/components/forms/components/Multi-Select.tsx

@@ -27,7 +27,7 @@ const FormMultiSelect = ({
 
   return (
     <Controller
-      name={`${filter?.name}.value`}
+      name={`${filter?.filter_attribute_name}.value`}
       control={control}
       defaultValue={
         Array.isArray(filter.filter_value)

package/src/listing/components/filter/components/forms/components/Select.tsx

@@ -26,7 +26,7 @@ const FormSelect = ({
 
   return (
     <Controller
-      name={`${filter?.name}.value`}
+      name={`${filter?.filter_attribute_name}.value`}
       control={control}
       defaultValue={filter.filter_value || ""}
       render={({ field }) => (

package/src/listing/components/filter/components/forms/components/Textfield.tsx

@@ -18,7 +18,7 @@ const FormTextfield = ({
 }: FormTextfieldProps) => {
   return (
     <Controller
-      name={`${filter?.name}.value`}
+      name={`${filter?.filter_attribute_name}.value`}
       control={control}
       defaultValue={filter.filter_value || ""}
       render={({ field }) => (
@@ -33,7 +33,7 @@ const FormTextfield = ({
               padding: "12px 20px",
             },
           }}
-          type={filter.data_type || "text"}
+          type={filter?.filter_attribute_data_type || "text"}
           placeholder={"Enter value"}
           disabled={isLoading}
           onChange={(e) => {

package/src/listing/components/filter/components/forms/index.tsx

@@ -81,11 +81,11 @@ const FilterForm = ({
 
   const defaultValues = useMemo(() => {
     const filterValues = filters?.reduce((acc, curr) => {
-      if (curr.name) {
-        acc[curr.name] = {
-          value: curr.filter_value ?? "",
+      if (curr?.filter_attribute_name) {
+        acc[curr?.filter_attribute_name] = {
+          value: curr?.filter_value ?? "",
           operator:
-            curr.filter_operator ?? curr.dropdown_list?.[0]?.value ?? "",
+            curr?.filter_operator ?? curr?.dropdown_list?.[0]?.value ?? "",
         };
       }
       return acc;
@@ -131,8 +131,11 @@ const FilterForm = ({
 
   const updateFiltersFromForm = useCallback(() => {
     const updatedFilters = filters?.map((filter) => {
-      if (filter.name && typeof formValues[filter.name] === "object") {
-        const filterValue = formValues[filter.name] as {
+      if (
+        filter?.filter_attribute_name &&
+        typeof formValues[filter?.filter_attribute_name] === "object"
+      ) {
+        const filterValue = formValues[filter?.filter_attribute_name] as {
           value: string | string[];
           operator: string;
         };
@@ -154,8 +157,8 @@ const FilterForm = ({
     return () => {
       reset();
       filters?.forEach((filter) => {
-        if (filter.name) {
-          unregister(filter.name);
+        if (filter?.filter_attribute_name) {
+          unregister(filter?.filter_attribute_name);
         }
       });
     };
@@ -179,9 +182,9 @@ const FilterForm = ({
 
     // unregister all fields belonging to this entity type
     filters?.forEach((f) => {
-      if (f.filter_entity_name === entityType && f.name) {
-        unregister(`${f.name}.value`);
-        unregister(`${f.name}.operator`);
+      if (f?.filter_entity_name === entityType && f?.filter_attribute_name) {
+        unregister(`${f?.filter_attribute_name}.value`);
+        unregister(`${f?.filter_attribute_name}.operator`);
       }
     });
 
@@ -319,7 +322,7 @@ const FilterForm = ({
                 {filters
                   .filter(
                     (filter) =>
-                      filter.name
+                      filter?.filter_attribute_name
                         ?.toLowerCase()
                         .includes(searchTerm.toLowerCase()) ||
                       filter.filter_value
@@ -339,7 +342,7 @@ const FilterForm = ({
                           <Typography
                             sx={filterFormStyles.formListItemHeaderName}
                           >
-                            {filter.name}
+                            {filter?.filter_attribute_name}
                           </Typography>
                           <FormDropdown
                             filter={filter}
@@ -352,8 +355,12 @@ const FilterForm = ({
                           <IconButton
                             sx={{ marginLeft: "auto" }}
                             onClick={() => {
-                              unregister(`${filter.name}.value`);
-                              unregister(`${filter.name}.operator`);
+                              unregister(
+                                `${filter?.filter_attribute_name}.value`
+                              );
+                              unregister(
+                                `${filter?.filter_attribute_name}.operator`
+                              );
 
                               // ✅ Toggle dummy field to force form dirty
                               const dummy = watch("dummyChange");
@@ -374,48 +381,51 @@ const FilterForm = ({
                         </Box>
 
                         <Box>
-                          {filter.data_type === "text" ||
-                          filter.data_type === "number" ? (
+                          {filter?.filter_attribute_data_type === "text" ||
+                          filter?.filter_attribute_data_type === "number" ? (
                             <FormTextfield
                               filter={filter}
                               control={control}
                               onValueChange={updateFiltersFromForm}
                             />
-                          ) : filter.data_type === "year" ? (
+                          ) : filter?.filter_attribute_data_type === "year" ? (
                             <FormDatePicker
                               filter={filter}
                               control={control}
                               views={["year"]}
                               onValueChange={updateFiltersFromForm}
                             />
-                          ) : filter.data_type === "date" ? (
+                          ) : filter?.filter_attribute_data_type === "date" ? (
                             <FormDatePicker
                               filter={filter}
                               control={control}
                               onValueChange={updateFiltersFromForm}
                             />
-                          ) : filter.data_type === "select" ? (
+                          ) : filter?.filter_attribute_data_type ===
+                            "select" ? (
                             <FormMultiSelect
                               filter={filter}
                               control={control}
                               dropdownData={dropdownData}
                               onValueChange={updateFiltersFromForm}
                             />
-                          ) : filter.data_type === "multiselect" ? (
+                          ) : filter?.filter_attribute_data_type ===
+                            "multiselect" ? (
                             <FormMultiSelect
                               filter={filter}
                               control={control}
                               dropdownData={dropdownData}
                               onValueChange={updateFiltersFromForm}
                             />
-                          ) : filter.data_type === "radio" ? (
+                          ) : filter?.filter_attribute_data_type === "radio" ? (
                             <FormMultiSelect
                               filter={filter}
                               control={control}
                               dropdownData={dropdownData}
                               onValueChange={updateFiltersFromForm}
                             />
-                          ) : filter.data_type === "checkbox" ? (
+                          ) : filter?.filter_attribute_data_type ===
+                            "checkbox" ? (
                             <FormMultiSelect
                               filter={filter}
                               control={control}

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

@@ -47,6 +47,7 @@ export function TableFilter({
 
   const defaultOptions: FilterComponentOptions = {
     showMainHeader: true,
+    mainHeaderTitle: "Filter",
     showTabs: true,
     tabOptions: {
       mainFilter: {
@@ -65,6 +66,7 @@ export function TableFilter({
   );
 
   const showMainHeader = finalComponentOptions?.showMainHeader;
+  const mainHeaderTitle = finalComponentOptions?.mainHeaderTitle;
   const showTabs = finalComponentOptions?.showTabs;
   const showMainFilter = showTabs && finalComponentOptions?.showMainFilter;
   const showSavedFilter = showTabs && finalComponentOptions?.showSavedFilter;
@@ -157,7 +159,7 @@ export function TableFilter({
       {showMainHeader && (
         <Box sx={filterStyles.filterMainHeader}>
           <Typography variant="h6" fontWeight="bold" fontSize="18px">
-            Filter
+            {mainHeaderTitle}
           </Typography>
           <IconButton
             onClick={(e) => {

package/src/listing/libs/hooks/useEntityTableAPI.tsx

@@ -211,12 +211,9 @@ export const useUpdateFilterAPI = () => {
   return { updateMutation };
 };
 
-export const useCommonDropdownAPI = (
-  metaData?: FilterColumnsDataProps,
-  value?: string
-) => {
+export const useCommonDropdownAPI = (column_list?: any, value?: string) => {
   // Step 1: Extract all keys and query types
-  const dropdownConfigs = (metaData?.column_list || [])
+  const dropdownConfigs = (column_list || [])
     .filter((col) => col?.datasource_list)
     .map((col) => ({
       key: col.attribute_key,

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

@@ -163,7 +163,9 @@ export const viewSettingsDropDown = async ({
 };
 
 export const getFilterEntityList = async (entity_type: string) => {
-  const response = await api.get(`/entity-relation/${entity_type}`);
+  const response = await api.get(
+    `/entity-relation/${entity_type}?include=true`
+  );
 
   return response.data;
 };

package/src/listing/types/filter.ts

@@ -70,6 +70,7 @@ export interface FilterComponentOptionsMainFilterOptions {
 export type FilterComponentOptions =
   | {
       showMainHeader?: boolean;
+      mainHeaderTitle?: string;
       showTabs?: true; // when true → additional fields allowed
       showMainFilter?: boolean;
       showSavedFilter?: boolean;
@@ -80,6 +81,7 @@ export type FilterComponentOptions =
     }
   | {
       showMainHeader?: boolean;
+      mainHeaderTitle?: string;
       showTabs?: false; // explicitly false or omitted
       tabOptions?: {
         mainFilter?: FilterComponentOptionsMainFilterOptions;
@@ -133,8 +135,8 @@ export interface FilterStateProps {
   filter_operator: string;
   filter_value: string | string[];
   id: string | number;
-  name: string | undefined;
-  data_type: FilterInputDataTypes | undefined;
+  filter_attribute_name: string | undefined;
+  filter_attribute_data_type: FilterInputDataTypes | undefined;
   attribute_key?: string;
   dropdown_list?: {
     label?: string;
@@ -148,12 +150,6 @@ export interface FilterStateProps {
   filter_entity_name?: string;
 }
 
-interface FilterDetail {
-  filter_attribute: string;
-  filter_operator: string;
-  filter_value: string | string[];
-}
-
 export interface createSavedFilterPayload {
   name: string;
   organization_id?: number;
@@ -163,7 +159,7 @@ export interface createSavedFilterPayload {
   mapped_entity_type: string;
   status?: string;
   entity_type: string;
-  filterDetails: FilterDetail[];
+  filterDetails: FilterStateProps[];
 }
 
 export interface deleteSavedFilterPayload {
@@ -182,13 +178,7 @@ export interface updateSavedFilterPayload {
   status?: string;
   entity_type: string;
   mapped_entity_type: string;
-  filterDetails: FilterDetail[];
-}
-
-interface FilterDetail {
-  filter_attribute: string;
-  filter_operator: string;
-  filter_value: string | string[];
+  filterDetails: FilterStateProps[];
 }
 
 export interface FilterFormComponentProps {
@@ -257,6 +247,7 @@ export interface FilterDataMainFilterEntityWiseCriteriaProps {
   name: string;
   attribute_key: string;
   element_type: FilterInputDataTypes;
+  datasource_list: any;
 }
 
 export interface FilterDataProps {

package/src/view/FIlterWrapper.tsx

@@ -4,7 +4,7 @@ import { useGetNavigationLayoutAPI } from "../listing/libs/hooks/useGetNavigatio
 import { ENTITY_TYPE } from "../listing/libs/utils/common";
 import {
   useDeleteFilterAPI,
-  useGetFilterEntityList,
+  useGetFilterEntityListAndCriteria,
   useSavedFilterAPI,
   useUpdateFilterAPI,
 } from "../listing/libs/hooks/useEntityTableAPI";
@@ -12,18 +12,19 @@ import {
   FilterColumnsDataProps,
   FilterComponentOptions,
   FilterDropdownDataProps,
-  FilterDataProps,
   FilterMasterStateProps,
 } from "../listing/types/filter";
 import { onFilterChangeFunctionProps } from "../listing/types/common";
 
 const CraftTableFilterWrapper = ({
+  onClose,
   tableStates,
   dropdownData,
   onChangeFunction,
   columnsData,
   filterComponentOptions,
 }: {
+  onClose?: () => void;
   tableStates: CraftTableOptionsProps;
   columnsData: FilterColumnsDataProps;
   dropdownData: FilterDropdownDataProps;
@@ -41,34 +42,51 @@ const CraftTableFilterWrapper = ({
     setFilterMaster,
     filterToDelete,
     setFilterData,
+    selectedFilterEntity,
   } = tableStates;
 
   const { savedMutation } = useSavedFilterAPI(); //API CALL FOR SAVED FILTER
   const { updateMutation } = useUpdateFilterAPI(); //API FOR UPDATE FILTER
   const { deleteMutation } = useDeleteFilterAPI(tableStates); //API FOR DELETING FILTER
-  const filterEntityList: any = useGetFilterEntityList({
-    entity_type: ENTITY_TYPE,
-  });
+  const { filterEntityList, filterEntityWiseCriteria } =
+    useGetFilterEntityListAndCriteria({
+      entity_type: ENTITY_TYPE,
+      selectedFilterEntity,
+    });
 
   useEffect(() => {
-    if (filterEntityList?.data) {
-      setFilterData((prev: FilterDataProps | null) => ({
-        ...prev,
-        mainFilter: {
-          ...prev?.mainFilter,
-          entityList: filterEntityList?.data,
+    const data: any = filterEntityList?.data;
+
+    setFilterData((prev: any) => ({
+      ...prev,
+      mainFilter: {
+        ...prev?.mainFilter,
+        entityList: {
+          data: data ?? [],
+          isPending: filterEntityList?.isPending ?? false,
         },
-      }));
-    }
+      },
+    }));
   }, [filterEntityList?.data, filterEntityList?.isPending]);
 
+  useEffect(() => {
+    const data = filterEntityWiseCriteria?.data?.data?.attribute_list;
+
+    setFilterData((prev: any) => ({
+      ...prev,
+      mainFilter: {
+        ...prev?.mainFilter,
+        entityWiseCriteria: {
+          data: data ?? [],
+          isPending: filterEntityWiseCriteria?.isPending ?? false,
+        },
+      },
+    }));
+  }, [filterEntityWiseCriteria?.data, filterEntityWiseCriteria?.isPending]);
+
   // API to handle saving a filter
   const handleSaveFilter = (name: string) => {
-    const quickFilter = filters.map((f: any) => ({
-      filter_attribute: f.filter_attribute,
-      filter_operator: f.filter_operator,
-      filter_value: f.filter_value,
-    }));
+    const quickFilter = filters.map((f: any) => ({ ...f }));
 
     const payload = {
       name,
@@ -154,7 +172,10 @@ const CraftTableFilterWrapper = ({
   return (
     <CraftTableFilter
       tableStates={tableStates}
-      onClose={() => tableStates.setShowTableFilter(false)}
+      onClose={() => {
+        tableStates.setShowTableFilter(false);
+        onClose && onClose();
+      }}
       columnsData={columnsData}
       dropdownData={dropdownData || []}
       onUpdateFilter={handleUpdateFilter}

package/src/view/ListingView.tsx

@@ -58,7 +58,12 @@ function ListingView() {
   const { deleteMutation } = useDeleteFilterAPI(tableStates); //API FOR DELETING FILTER
   const { updateMutation } = useUpdateFilterAPI(); //API FOR UPDATE FILTER
   const { saveSettingsDataMutation } = useSaveSettingsDataAPI(ENTITY_TYPE);
-  const { dropdownData } = useCommonDropdownAPI(metaQuery.data);
+  const memoizedFilters = useMemo(() => filters, [filters]);
+
+  // const { dropdownData } = useCommonDropdownAPI(
+  //   dropdownColumnList || metaQuery.data.column_list
+  // );
+  const { dropdownData } = useCommonDropdownAPI(memoizedFilters);
   const { settingsTabDropdownData, settingsTabDropdownPending } =
     useSettingsDropDownAPI({
       entity_type: ENTITY_TYPE,