rez-table-listing-mui 1.3.3 → 1.3.5

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) => {
@@ -250,109 +252,248 @@ export function TableFilter({
         </CustomTabPanel>
       )}
 
-      <ConfirmModal
-        open={saveFilterModalOpen}
-        onClose={() => setSaveFilterModalOpen(false)}
-        title={editMode ? "Replace Existing Filter ?" : "Save Filter"}
-        description={
-          editMode
-            ? "You already have a filter applied. Applying a new filter will replace the current one. Do you want to continue?"
-            : "Give a name to this filter so you can easily reuse it later."
-        }
-        buttons={[
-          {
-            label: "Cancel",
-            onClick: () => {
-              setSaveFilterModalOpen(false);
-            },
-            variant: "outlined",
-            color: "primary",
-            sx: {
-              color: "#7A5AF8",
-              border: `1px solid #7A5AF8`,
+      {!filterComponentOptions?.isRuleEngine && (
+        <ConfirmModal
+          open={saveFilterModalOpen}
+          onClose={() => setSaveFilterModalOpen(false)}
+          title={editMode ? "Replace Existing Filter ?" : "Save Filter"}
+          description={
+            editMode
+              ? "You already have a filter applied. Applying a new filter will replace the current one. Do you want to continue?"
+              : "Give a name to this filter so you can easily reuse it later."
+          }
+          buttons={[
+            {
+              label: "Cancel",
+              onClick: () => {
+                setSaveFilterModalOpen(false);
+              },
+              variant: "outlined",
+              color: "primary",
+              sx: {
+                color: "#7A5AF8",
+                border: `1px solid #7A5AF8`,
+              },
             },
-          },
-          {
-            label: editMode ? "Replace Filter" : "Save",
-            onClick: (inputValue) => {
-              if (editMode) {
-                const selectedId = filterMaster?.saved_filters?.selectedId;
-                const selectedName =
-                  inputValue || filterMaster?.saved_filters?.selectedName;
-
-                const newFilterMasterState = {
-                  ...filterMaster,
-                  saved_filters: {
-                    ...filterMaster?.attributes,
-                    selectedId,
-                    selectedName,
-                  },
-                } as FilterMasterStateProps;
-
-                setFilterMaster(newFilterMasterState);
-
-                const newState = {
-                  filterMaster: newFilterMasterState,
-                  filters: filters,
-                };
-
-                onChangeFunction && onChangeFunction(newState);
-
-                onUpdateFilter && onUpdateFilter(inputValue || "");
+            {
+              label: editMode ? "Replace Filter" : "Save",
+              onClick: (inputValue) => {
+                if (editMode) {
+                  const selectedId = filterMaster?.saved_filters?.selectedId;
+                  const selectedName =
+                    inputValue || filterMaster?.saved_filters?.selectedName;
+
+                  const newFilterMasterState = {
+                    ...filterMaster,
+                    saved_filters: {
+                      ...filterMaster?.attributes,
+                      selectedId,
+                      selectedName,
+                    },
+                  } as FilterMasterStateProps;
+
+                  setFilterMaster(newFilterMasterState);
+
+                  const newState = {
+                    filterMaster: newFilterMasterState,
+                    filters: filters,
+                  };
+
+                  onChangeFunction && onChangeFunction(newState);
+
+                  onUpdateFilter && onUpdateFilter(inputValue || "");
+                  setSaveFilterModalOpen(false);
+                  setEditMode(false);
+                  return;
+                }
+
+                onSaveFilter && onSaveFilter(inputValue || "");
                 setSaveFilterModalOpen(false);
-                setEditMode(false);
-                return;
-              }
+                setTabValue(1);
+              },
+              variant: "contained",
+              color: "primary",
+              sx: {
+                color: "white",
+                backgroundColor: editMode ? "#7A5AF8" : "#7A5AF8",
+              },
+            },
+          ]}
+          input={editMode ? undefined : filterNameInput}
+        />
+      )}
 
-              onSaveFilter && onSaveFilter(inputValue || "");
-              setSaveFilterModalOpen(false);
-              setTabValue(1);
+      {!filterComponentOptions?.isRuleEngine && (
+        <ConfirmModal
+          open={deleteFilterModalOpen}
+          onClose={() => setDeleteFilterModalOpen(false)}
+          title="Delete Saved Filter?"
+          description={`You're about to delete the saved filter: "${
+            filterToDelete?.label || "[Filter Name]"
+          }". This action cannot be undone. Are you sure you want to continue?`}
+          buttons={[
+            {
+              label: "Cancel",
+              onClick: () => {
+                setDeleteFilterModalOpen(false);
+              },
+              variant: "outlined",
+              color: "primary",
+              sx: { color: "#7A5AF8", border: `1px solid #7A5AF8` },
+            },
+            {
+              label: "Delete",
+              onClick: () => {
+                onDeleteFilter && onDeleteFilter();
+                setDeleteFilterModalOpen(false);
+                setEditMode && setEditMode(false);
+              },
+              variant: "contained",
+              sx: {
+                color: "white",
+                backgroundColor: "#f63d68",
+                "&:hover": { backgroundColor: "#f63d68" },
+              },
             },
-            variant: "contained",
-            color: "primary",
-            sx: {
-              color: "white",
-              backgroundColor: editMode ? "#7A5AF8" : "#7A5AF8",
+          ]}
+          maxWidth="xs"
+        />
+      )}
+
+      {filterComponentOptions?.isRuleEngine && (
+        <ConfirmModal
+          open={saveFilterModalOpen}
+          onClose={() => setSaveFilterModalOpen(false)}
+          title={
+            editMode
+              ? filterComponentOptions?.recordFilterComponentProps?.edit
+                  ?.title || "Replace Existing Filter ?"
+              : filterComponentOptions?.recordFilterComponentProps?.save
+                  ?.title || "Save Filter"
+          }
+          description={
+            editMode
+              ? filterComponentOptions?.recordFilterComponentProps?.edit
+                  ?.description ||
+                "You already have a filter applied. Applying a new filter will replace the current one. Do you want to continue?"
+              : filterComponentOptions?.recordFilterComponentProps?.save
+                  ?.description ||
+                "Give a name to this filter so you can easily reuse it later."
+          }
+          buttons={[
+            {
+              label:
+                filterComponentOptions?.recordFilterComponentProps?.save.button
+                  ?.primary || "Cancel",
+              onClick: () => {
+                setSaveFilterModalOpen(false);
+              },
+              variant: "outlined",
+              color: "primary",
+              sx: {
+                color: "#7A5AF8",
+                border: `1px solid #7A5AF8`,
+              },
             },
-          },
-        ]}
-        input={editMode ? undefined : filterNameInput}
-      />
-
-      <ConfirmModal
-        open={deleteFilterModalOpen}
-        onClose={() => setDeleteFilterModalOpen(false)}
-        title="Delete Saved Filter?"
-        description={`You're about to delete the saved filter: "${
-          filterToDelete?.label || "[Filter Name]"
-        }". This action cannot be undone. Are you sure you want to continue?`}
-        buttons={[
-          {
-            label: "Cancel",
-            onClick: () => {
-              setDeleteFilterModalOpen(false);
+            {
+              label: editMode
+                ? filterComponentOptions?.recordFilterComponentProps?.edit
+                    .button?.secondary || "Replace Filter"
+                : filterComponentOptions?.recordFilterComponentProps?.save
+                    .button?.secondary || "Save",
+              onClick: (inputValue) => {
+                if (editMode) {
+                  const selectedId = filterMaster?.saved_filters?.selectedId;
+                  const selectedName =
+                    inputValue || filterMaster?.saved_filters?.selectedName;
+
+                  const newFilterMasterState = {
+                    ...filterMaster,
+                    saved_filters: {
+                      ...filterMaster?.attributes,
+                      selectedId,
+                      selectedName,
+                    },
+                  } as FilterMasterStateProps;
+
+                  setFilterMaster(newFilterMasterState);
+
+                  const newState = {
+                    filterMaster: newFilterMasterState,
+                    filters: filters,
+                  };
+
+                  onChangeFunction && onChangeFunction(newState);
+
+                  onUpdateFilter && onUpdateFilter(inputValue || "");
+                  setSaveFilterModalOpen(false);
+                  setEditMode(false);
+                  return;
+                }
+
+                onSaveFilter && onSaveFilter(inputValue || "");
+                setSaveFilterModalOpen(false);
+                setTabValue(1);
+              },
+              variant: "contained",
+              color: "primary",
+              sx: {
+                color: "white",
+                backgroundColor: editMode ? "#7A5AF8" : "#7A5AF8",
+              },
             },
-            variant: "outlined",
-            color: "primary",
-            sx: { color: "#7A5AF8", border: `1px solid #7A5AF8` },
-          },
-          {
-            label: "Delete",
-            onClick: () => {
-              onDeleteFilter && onDeleteFilter();
-              setDeleteFilterModalOpen(false);
-              setEditMode && setEditMode(false);
+          ]}
+          input={editMode ? undefined : filterNameInput}
+        />
+      )}
+
+      {filterComponentOptions?.isRuleEngine && (
+        <ConfirmModal
+          open={deleteFilterModalOpen}
+          onClose={() => setDeleteFilterModalOpen(false)}
+          title={
+            filterComponentOptions?.recordFilterComponentProps?.delete.title ||
+            "Delete Saved Filter?"
+          }
+          description={
+            filterComponentOptions?.recordFilterComponentProps?.delete
+              .description ||
+            `You're about to delete the saved filter: "${
+              filterToDelete?.label || "[Filter Name]"
+            }". This action cannot be undone. Are you sure you want to continue?`
+          }
+          buttons={[
+            {
+              label:
+                filterComponentOptions?.recordFilterComponentProps?.delete
+                  .button?.primary || "Cancel",
+              onClick: () => {
+                setDeleteFilterModalOpen(false);
+              },
+              variant: "outlined",
+              color: "primary",
+              sx: { color: "#7A5AF8", border: `1px solid #7A5AF8` },
             },
-            variant: "contained",
-            sx: {
-              color: "white",
-              backgroundColor: "#f63d68",
-              "&:hover": { backgroundColor: "#f63d68" },
+            {
+              label:
+                filterComponentOptions?.recordFilterComponentProps?.delete
+                  .button?.secondary || "Delete",
+              onClick: () => {
+                onDeleteFilter && onDeleteFilter();
+                setDeleteFilterModalOpen(false);
+                setEditMode && setEditMode(false);
+              },
+              variant: "contained",
+              sx: {
+                color: "white",
+                backgroundColor: "#f63d68",
+                "&:hover": { backgroundColor: "#f63d68" },
+              },
             },
-          },
-        ]}
-        maxWidth="xs"
-      />
+          ]}
+          maxWidth="xs"
+        />
+      )}
     </Box>
   );
 }

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

@@ -67,23 +67,50 @@ export interface FilterComponentOptionsMainFilterOptions {
   showClearAllButton?: boolean;
 }
 
+// Button config type
+type ButtonConfig = {
+  primary: string;
+  secondary: string;
+};
+
+// Modal config type
+type ModalConfig = {
+  title?: string;
+  description?: string;
+  button?: ButtonConfig;
+  isInputField?: boolean;
+};
+
+// Record filter props type
+type RecordFilterComponentProps = {
+  save: ModalConfig;
+  edit: ModalConfig;
+  delete: ModalConfig;
+};
+
 export type FilterComponentOptions =
   | {
       showMainHeader?: boolean;
+      mainHeaderTitle?: string;
       showTabs?: true; // when true → additional fields allowed
       showMainFilter?: boolean;
       showSavedFilter?: boolean;
       showAttributesFilter?: boolean;
+      isRuleEngine?: boolean;
       tabOptions?: {
         mainFilter?: FilterComponentOptionsMainFilterOptions;
       };
+      recordFilterComponentProps?: RecordFilterComponentProps;
     }
   | {
       showMainHeader?: boolean;
+      mainHeaderTitle?: string;
       showTabs?: false; // explicitly false or omitted
+      isRuleEngine?: boolean;
       tabOptions?: {
         mainFilter?: FilterComponentOptionsMainFilterOptions;
       };
+      recordFilterComponentProps?: RecordFilterComponentProps;
     };
 
 export interface FilterDrawerProps {
@@ -133,8 +160,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;
@@ -146,12 +173,7 @@ export interface FilterStateProps {
   };
   filter_entity_type?: string;
   filter_entity_name?: string;
-}
-
-interface FilterDetail {
-  filter_attribute: string;
-  filter_operator: string;
-  filter_value: string | string[];
+  datasource_list?: string | null;
 }
 
 export interface createSavedFilterPayload {
@@ -163,7 +185,7 @@ export interface createSavedFilterPayload {
   mapped_entity_type: string;
   status?: string;
   entity_type: string;
-  filterDetails: FilterDetail[];
+  filterDetails: FilterStateProps[];
 }
 
 export interface deleteSavedFilterPayload {
@@ -182,13 +204,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 +273,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,
@@ -381,13 +386,49 @@ function ListingView() {
         component: (
           <CraftTableFilterWrapper
             tableStates={tableStates}
-            onClose={() => tableStates.setShowTableFilter(false)}
             columnsData={metaQuery.data || {}}
             dropdownData={dropdownData || []}
             // onUpdateFilter={handleUpdateFilter}
             // onDeleteFilter={handleRemoveFilter}
             // onSaveFilter={handleSaveFilter}
             onChangeFunction={handleChangeFunction}
+            filterComponentOptions={{
+              showMainHeader: false,
+              showTabs: false,
+              isRuleEngine: true,
+              tabOptions: {
+                mainFilter: {
+                  showSaveButton: true,
+                  showClearAllButton: true,
+                },
+              },
+              recordFilterComponentProps: {
+                save: {
+                  title: "Save",
+                  description: "Are you sure you want to save your changes?",
+                  button: {
+                    primary: "Cancel",
+                    secondary: "Save",
+                  },
+                },
+                edit: {
+                  title: "Edit",
+                  description: "Are you sure you want to save your changes?",
+                  button: {
+                    primary: "Cancel",
+                    secondary: "Replace",
+                  },
+                },
+                delete: {
+                  title: "Delete",
+                  description: "Are you sure you want to save your changes?",
+                  button: {
+                    primary: "Cancel",
+                    secondary: "Delete",
+                  },
+                },
+              },
+            }}
           />
         ),
       }}