rez-table-listing-mui 1.3.4 → 1.3.5

package/package.json

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

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/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 {

package/src/view/ListingView.tsx

@@ -386,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",
+                  },
+                },
+              },
+            }}
           />
         ),
       }}