rez-table-listing-mui 1.3.4 → 1.3.6

package/package.json

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

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

@@ -71,7 +71,7 @@ const FormMultiSelect = ({
                   .join(", ");
               }}
             >
-              {options.map((item, idx) => (
+              {options?.map((item, idx) => (
                 <MenuItem key={idx} value={item.value}>
                   <Checkbox
                     checked={cleanedValue.includes(item.value)}

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

@@ -252,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

@@ -23,12 +23,13 @@ import {
   viewSettingsDropDown,
 } from "../utils/apiColumn";
 import {
-  FilterColumnsDataProps,
   FilterDataMainFilterEntityListProps,
   FilterMasterStateProps,
+  FilterStateProps,
 } from "../../types/filter";
 import { CraftTableOptionsProps } from "../../types/table-options";
 import { saveLayoutAPI } from "../services/saveLayoutAPI";
+import { useMemo } from "react";
 
 const entityListingCall = async ({
   page,
@@ -214,8 +215,8 @@ export const useUpdateFilterAPI = () => {
 export const useCommonDropdownAPI = (column_list?: any, value?: string) => {
   // Step 1: Extract all keys and query types
   const dropdownConfigs = (column_list || [])
-    .filter((col) => col?.datasource_list)
-    .map((col) => ({
+    ?.filter((col) => col?.datasource_list)
+    ?.map((col) => ({
       key: col.attribute_key,
       dataSourceType: value ?? col.datasource_list ?? "STS",
     }));
@@ -233,13 +234,47 @@ export const useCommonDropdownAPI = (column_list?: any, value?: string) => {
 
   // Step 3: Map results to keys
   const dropdownData: Record<string, any> = {};
-  dropdownConfigs.forEach((cfg, idx) => {
+  dropdownConfigs?.forEach((cfg, idx) => {
     dropdownData[cfg.key] = dropdownResults[idx].data;
   });
 
   return { dropdownData };
 };
 
+export const useCommonFilterDropdownAPI = (
+  filters: FilterStateProps[],
+  value?: string
+) => {
+  // Step 1: Extract all keys and query types
+  const dropdownConfigs = useMemo(() => {
+    return filters
+      ?.filter((col) => col?.filter_attribute_data_type === "select")
+      ?.map((col) => ({
+        key: col?.filter_attribute,
+        dataSourceType: value ?? col?.datasource_list ?? "STS",
+      }));
+  }, [filters]);
+
+  // Step 2: Use useQueries to fetch them all in parallel
+  const dropdownResults = useQueries({
+    queries: dropdownConfigs.map((cfg) => {
+      return {
+        queryKey: ["commonDropdown", cfg?.dataSourceType],
+        queryFn: () => commonGetDropdownDataAPI(cfg?.dataSourceType, null),
+        enabled: !!cfg?.dataSourceType,
+      };
+    }),
+  });
+
+  // Step 3: Map results to keys
+  const dropdownFilterData: Record<string, any> = {};
+  dropdownConfigs?.forEach((cfg, idx) => {
+    dropdownFilterData[cfg.key] = dropdownResults[idx].data;
+  });
+
+  return { dropdownFilterData };
+};
+
 //ALL VIEW SETTINGS API
 
 export const useSettingsDropDownAPI = ({

package/src/listing/types/filter.ts

@@ -67,6 +67,27 @@ 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;
@@ -75,17 +96,21 @@ export type FilterComponentOptions =
       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 {
@@ -148,6 +173,7 @@ export interface FilterStateProps {
   };
   filter_entity_type?: string;
   filter_entity_name?: string;
+  datasource_list?: string | null;
 }
 
 export interface createSavedFilterPayload {