rez-table-listing-mui 1.3.8 → 1.3.10

package/package.json

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

package/src/App.tsx

@@ -2,11 +2,13 @@ import { useState } from "react";
 import LoginButton from "./listing/components/login";
 import ListingView from "./view/ListingView";
 import KanbanView from "./view/KanbanView";
+import SavedFilterModal from "./testing-grounds/filter-in-modal/saved-filter-modal";
 
 function App() {
   const [currentView, setCurrentView] = useState<"listing" | "kanban">(
     "listing"
   );
+  const [openSavedFilterModal, setOpenSavedFilterModal] = useState(false);
 
   const renderView = () => {
     switch (currentView) {
@@ -57,10 +59,20 @@ function App() {
         >
           Kanban View
         </button>
+        <button
+          style={containedBtn}
+          onClick={() => setOpenSavedFilterModal(true)}
+        >
+          Saved Filter modal
+        </button>
       </div>
 
       {/* Conditional Content */}
       {renderView()}
+      <SavedFilterModal
+        open={openSavedFilterModal}
+        setOpen={setOpenSavedFilterModal}
+      />
     </div>
   );
 }

package/src/listing/components/filter/components/saved-edit-filter.tsx

@@ -3,6 +3,7 @@ import FilterForm from "./forms";
 import BackArrow from "@mui/icons-material/ArrowBackIosNew";
 import {
   FilterColumnsDataProps,
+  FilterComponentOptions,
   FilterDropdownDataProps,
   FilterMasterStateProps,
 } from "../../../types/filter";
@@ -17,11 +18,10 @@ const SavedFilterEditComponent = ({
   setEditMode,
   searchTerm,
   setSearchTerm,
-  criteriaSearchTerm,
-  setCriteriaSearchTerm,
   setSavedFilterModalOpen,
   setDeleteFilterModalOpen,
   onChangeFunction,
+  filterComponentOptions,
 }: {
   columnsData: FilterColumnsDataProps;
   dropdownData: FilterDropdownDataProps;
@@ -30,17 +30,19 @@ const SavedFilterEditComponent = ({
   setEditMode?: React.Dispatch<React.SetStateAction<boolean>>;
   searchTerm?: string;
   setSearchTerm: React.Dispatch<React.SetStateAction<string>>;
-  criteriaSearchTerm?: string;
-  setCriteriaSearchTerm: React.Dispatch<React.SetStateAction<string>>;
   setSavedFilterModalOpen?: React.Dispatch<React.SetStateAction<boolean>>;
   setDeleteFilterModalOpen?: React.Dispatch<React.SetStateAction<boolean>>;
   onChangeFunction: ({
     updatedFilters,
     filterMaster,
   }: onFilterChangeFunctionProps) => void;
+  filterComponentOptions?: FilterComponentOptions;
 }) => {
   const { setFilters, setFilterMaster } = tableStates;
 
+  const showBackButton =
+    filterComponentOptions?.tabOptions?.savedFilter?.showBackButton;
+
   const handleRemoveFilter = (filter_attribute: string) => {
     setFilters((prev) =>
       prev.filter((filter) => filter?.filter_attribute !== filter_attribute)
@@ -59,6 +61,7 @@ const SavedFilterEditComponent = ({
             ...prev?.saved_filters,
             selectedId: "",
             selectedName: "",
+            selectedCode: "",
           },
           activeFilterTabIndex: -1,
         } as FilterMasterStateProps)
@@ -67,23 +70,25 @@ const SavedFilterEditComponent = ({
 
   return (
     <>
-      <Box>
-        <Box
-          sx={{
-            display: "flex",
-            alignItems: "center",
-            gap: 1,
-            cursor: "pointer",
-            mb: 2,
-          }}
-          onClick={handleBackButtonClick}
-        >
-          <BackArrow sx={{ width: "13px", height: "13px" }} />
-          <Typography variant="body2" sx={{ color: "#8592A3" }}>
-            Back To Saved Filters
-          </Typography>
+      {showBackButton && (
+        <Box>
+          <Box
+            sx={{
+              display: "flex",
+              alignItems: "center",
+              gap: 1,
+              cursor: "pointer",
+              mb: 2,
+            }}
+            onClick={handleBackButtonClick}
+          >
+            <BackArrow sx={{ width: "13px", height: "13px" }} />
+            <Typography variant="body2" sx={{ color: "#8592A3" }}>
+              Back To Saved Filters
+            </Typography>
+          </Box>
         </Box>
-      </Box>
+      )}
 
       {/* Render selectedFilters state */}
       <FilterForm
@@ -94,11 +99,10 @@ const SavedFilterEditComponent = ({
         dropdownData={dropdownData}
         searchTerm={searchTerm}
         setSearchTerm={setSearchTerm}
-        criteriaSearchTerm={criteriaSearchTerm}
-        setCriteriaSearchTerm={setCriteriaSearchTerm}
         setSavedFilterModalOpen={setSavedFilterModalOpen}
         setDeleteFilterModalOpen={setDeleteFilterModalOpen}
         onChangeFunction={onChangeFunction}
+        filterComponentOptions={filterComponentOptions}
       />
     </>
   );

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

@@ -28,15 +28,18 @@ const SavedFilter = ({
   setSavedFilterModalOpen,
   tabValue,
   onChangeFunction,
+  filterComponentOptions,
 }: FilterFormComponentProps) => {
   const { filters, filterMaster, setFilterMaster, setFilterToDelete } =
     tableStates;
   const [searchTerm, setSearchTerm] = useState<string>("");
-  const [criteriaSearchTerm, setCriteriaSearchTerm] = useState<string>("");
 
   // reset savedFilterEditValue when component unmounts
   useEffect(() => {
     return () => {
+      const editModeFromTabOptions =
+        filterComponentOptions?.tabOptions?.savedFilter?.editMode;
+
       setFilterMaster(
         (prev) =>
           ({
@@ -45,11 +48,14 @@ const SavedFilter = ({
               ...prev?.attributes,
               selectedId: "",
               selectedName: "",
+              selectedCode: "",
             },
           } as FilterMasterStateProps)
       );
 
-      setEditMode && setEditMode(false);
+      if (!editModeFromTabOptions) {
+        setEditMode && setEditMode(false);
+      }
     };
   }, []);
 
@@ -60,6 +66,7 @@ const SavedFilter = ({
         ...filterMaster?.attributes,
         selectedId: filter?.value,
         selectedName: filter?.label,
+        selectedCode: filter?.code,
       },
       attributes: {
         ...filterMaster?.attributes,
@@ -89,6 +96,7 @@ const SavedFilter = ({
         ...filterMaster?.attributes,
         selectedId: filter?.value,
         selectedName: filter?.label,
+        selectedCode: filter?.code,
       },
       attributes: {
         ...filterMaster?.attributes,
@@ -213,7 +221,7 @@ const SavedFilter = ({
       {/* Render search input and list */}
       {!editMode && renderList()}
 
-      {editMode ? (
+      {editMode && (
         <SavedFilterEditComponent
           columnsData={columnsData}
           dropdownData={dropdownData}
@@ -222,13 +230,12 @@ const SavedFilter = ({
           setEditMode={setEditMode}
           searchTerm={searchTerm}
           setSearchTerm={setSearchTerm}
-          criteriaSearchTerm={criteriaSearchTerm}
-          setCriteriaSearchTerm={setCriteriaSearchTerm}
           setSavedFilterModalOpen={setSavedFilterModalOpen}
           setDeleteFilterModalOpen={setDeleteFilterModalOpen}
           onChangeFunction={onChangeFunction}
+          filterComponentOptions={filterComponentOptions}
         />
-      ) : null}
+      )}
     </Box>
   );
 };

package/src/listing/components/filter/components/single-filter-rendering.tsx

@@ -0,0 +1,74 @@
+import { Box } from "@mui/material";
+import { FilterFormComponentProps } from "../../../types/filter";
+import MainFilter from "./main-filter";
+import SavedFilter from "./saved-filter";
+import AttributesFilter from "./attributes-filter";
+
+interface Props extends FilterFormComponentProps {
+  searchTerm: string;
+  setSearchTerm: React.Dispatch<React.SetStateAction<string>>;
+}
+
+const SingleFilterRendering = ({
+  columnsData,
+  dropdownData,
+  tableStates,
+  setSavedFilterModalOpen,
+  onChangeFunction,
+  filterComponentOptions,
+  editMode,
+  setEditMode,
+  setDeleteFilterModalOpen,
+  tabValue,
+  searchTerm,
+  setSearchTerm,
+}: Props) => {
+  const showFilter = filterComponentOptions?.tabOptions?.showFilter;
+
+  const commonProps = {
+    columnsData,
+    dropdownData,
+    tableStates,
+    onChangeFunction,
+  };
+
+  const editProps = {
+    editMode,
+    setEditMode,
+    setDeleteFilterModalOpen,
+    tabValue,
+  };
+
+  const attributesProps = {
+    searchTerm,
+    setSearchTerm,
+    tabValue,
+  };
+
+  return (
+    <Box sx={{ padding: "1.5rem 0.75rem", height: "100%" }}>
+      {showFilter === "main" && (
+        <MainFilter
+          {...commonProps}
+          setSavedFilterModalOpen={setSavedFilterModalOpen}
+          filterComponentOptions={filterComponentOptions}
+        />
+      )}
+
+      {showFilter === "saved" && (
+        <SavedFilter
+          {...commonProps}
+          {...editProps}
+          setSavedFilterModalOpen={setSavedFilterModalOpen}
+          filterComponentOptions={filterComponentOptions}
+        />
+      )}
+
+      {showFilter === "attributes" && (
+        <AttributesFilter {...commonProps} {...attributesProps} />
+      )}
+    </Box>
+  );
+};
+
+export default SingleFilterRendering;

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

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { Box, IconButton, Typography } from "@mui/material";
 import CloseIcon from "@mui/icons-material/Close";
 import {
@@ -6,7 +6,6 @@ import {
   FilterDrawerProps,
   FilterMasterStateProps,
 } from "../../types/filter";
-
 import ConfirmModal, { InputField } from "../common/confirm-modal";
 import CustomTabPanel from "./components/tabs/custom-tab-panel";
 import CustomTabs, { TabItem } from "./components/tabs/index";
@@ -15,6 +14,7 @@ import SavedFilter from "./components/saved-filter";
 import AttributesFilter from "./components/attributes-filter";
 import { filterStyles } from "./style";
 import { deepMergeObjects } from "../../libs/utils/deep-merge-objects";
+import SingleFilterRendering from "./components/single-filter-rendering";
 
 export function TableFilter({
   onClose,
@@ -50,10 +50,16 @@ export function TableFilter({
     mainHeaderTitle: "Filter",
     showTabs: true,
     tabOptions: {
+      isSingleFilter: false,
+      showFilter: "main",
       mainFilter: {
         showSaveButton: true,
         showClearAllButton: true,
       },
+      savedFilter: {
+        showBackButton: true,
+        editMode: false,
+      },
     },
     showMainFilter: true,
     showSavedFilter: true,
@@ -72,14 +78,20 @@ export function TableFilter({
   const showSavedFilter = showTabs && finalComponentOptions?.showSavedFilter;
   const showAttributesFilter =
     showTabs && finalComponentOptions?.showAttributesFilter;
+  const editModeFromTabOptions =
+    finalComponentOptions?.tabOptions?.savedFilter?.editMode;
 
-  type TabType = "main" | "saved" | "attributes";
+  useEffect(() => {
+    if (editModeFromTabOptions) {
+      setEditMode(editModeFromTabOptions);
+    }
+  }, [editModeFromTabOptions]);
 
   // Map tabs to type
-  const tabMapping: TabType[] = [];
-  if (showMainFilter) tabMapping.push("main");
-  if (showSavedFilter) tabMapping.push("saved");
-  if (showAttributesFilter) tabMapping.push("attributes");
+  const tabMapping: TabItem[] = [];
+  if (showMainFilter) tabMapping.push({ label: "Filter" });
+  if (showSavedFilter) tabMapping.push({ label: "Saved Filter" });
+  if (showAttributesFilter) tabMapping.push({ label: "Attributes" });
 
   const clearAttributeRadio = () => {
     const newFilterMaster = {
@@ -101,23 +113,16 @@ export function TableFilter({
     type: "text",
   };
 
-  //FOR TABS
-  const tabItems: TabItem[] = [
-    { label: "Filter" },
-    { label: "Saved Filter" },
-    { label: "Attributes" },
-  ];
-
   const handleTabChange = (_: React.SyntheticEvent, newValue: number) => {
-    const tabType = tabMapping[newValue];
+    const tabType = tabMapping[newValue]?.label;
 
-    if (tabType === "attributes" && tabMapping[tabValue] === "main") {
+    if (tabType === "Attributes" && tabMapping[tabValue]?.label === "Filter") {
       clearAttributeRadio();
     }
 
     setTabValue(newValue);
 
-    if (tabType === "main") {
+    if (tabType === "Filter") {
       setEditMode(false);
 
       setFilterMaster(
@@ -132,13 +137,17 @@ export function TableFilter({
 
     setFilters([]);
 
-    if (tabType === "saved") setEditMode(false);
+    if (tabType?.label === "Saved Filter") setEditMode(false);
 
     const patches: Partial<FilterMasterStateProps> = {};
 
-    if (tabType === "saved") {
-      patches.saved_filters = { selectedId: "", selectedName: "" };
-    } else if (tabType === "attributes") {
+    if (tabType?.label === "Saved Filter") {
+      patches.saved_filters = {
+        selectedId: "",
+        selectedName: "",
+        selectedCode: "",
+      };
+    } else if (tabType?.label === "Attributes") {
       patches.attributes = { radio: [], selected: "" };
     }
 
@@ -154,6 +163,25 @@ export function TableFilter({
       onChangeFunction({ filterMaster: newFilterMasterState, filters });
   };
 
+  const commonProps = {
+    columnsData,
+    tableStates,
+    onChangeFunction,
+    dropdownData,
+  };
+
+  const savedFilterProps = {
+    editMode,
+    setEditMode,
+    setDeleteFilterModalOpen,
+    tabValue,
+  };
+
+  const attributesProps = {
+    searchTerm,
+    setSearchTerm,
+  };
+
   return (
     <Box sx={filterStyles.filterContainer}>
       {showMainHeader && (
@@ -178,37 +206,31 @@ export function TableFilter({
         <CustomTabs
           value={tabValue}
           onChange={handleTabChange}
-          tabItems={tabItems}
+          tabItems={tabMapping}
           activeFilterIndex={filterMaster?.activeFilterTabIndex ?? 0}
           handleCrossClick={handleTabCrossClick}
         />
       )}
 
       {!showTabs && (
-        <Box sx={{ padding: "1.5rem 0.75rem", height: "100%" }}>
-          <MainFilter
-            columnsData={columnsData}
-            tableStates={tableStates}
-            setSavedFilterModalOpen={setSaveFilterModalOpen}
-            dropdownData={dropdownData}
-            onChangeFunction={onChangeFunction}
-            filterComponentOptions={finalComponentOptions}
-          />
-        </Box>
+        <SingleFilterRendering
+          {...commonProps}
+          {...savedFilterProps}
+          {...attributesProps}
+          setSavedFilterModalOpen={setSaveFilterModalOpen}
+          filterComponentOptions={finalComponentOptions}
+        />
       )}
 
       {showMainFilter && (
         <CustomTabPanel
           value={tabValue}
-          index={tabMapping.indexOf("main")}
+          index={tabMapping.findIndex((tab) => tab.label === "Filter")}
           sx={{ p: "1.5rem 0.75rem" }}
         >
           <MainFilter
-            columnsData={columnsData}
-            tableStates={tableStates}
+            {...commonProps}
             setSavedFilterModalOpen={setSaveFilterModalOpen}
-            dropdownData={dropdownData}
-            onChangeFunction={onChangeFunction}
             filterComponentOptions={finalComponentOptions}
           />
         </CustomTabPanel>
@@ -217,19 +239,14 @@ export function TableFilter({
       {showSavedFilter && (
         <CustomTabPanel
           value={tabValue}
-          index={tabMapping.indexOf("saved")}
+          index={tabMapping.findIndex((tab) => tab.label === "Saved Filter")}
           sx={{ p: "1.5rem 0.75rem" }}
         >
           <SavedFilter
-            columnsData={columnsData}
-            tableStates={tableStates}
-            editMode={editMode}
-            setEditMode={setEditMode}
-            setDeleteFilterModalOpen={setDeleteFilterModalOpen}
+            {...commonProps}
+            {...savedFilterProps}
             setSavedFilterModalOpen={setSaveFilterModalOpen}
-            dropdownData={dropdownData}
-            tabValue={tabValue}
-            onChangeFunction={onChangeFunction}
+            filterComponentOptions={finalComponentOptions}
           />
         </CustomTabPanel>
       )}
@@ -237,17 +254,13 @@ export function TableFilter({
       {showAttributesFilter && (
         <CustomTabPanel
           value={tabValue}
-          index={tabMapping.indexOf("attributes")}
+          index={tabMapping.findIndex((tab) => tab.label === "Attributes")}
           sx={{ p: "1.5rem 0.75rem" }}
         >
           <AttributesFilter
-            columnsData={columnsData}
-            tableStates={tableStates}
-            dropdownData={dropdownData}
-            searchTerm={searchTerm}
-            setSearchTerm={setSearchTerm}
+            {...commonProps}
+            {...attributesProps}
             tabValue={tabValue}
-            onChangeFunction={onChangeFunction}
           />
         </CustomTabPanel>
       )}
@@ -282,6 +295,8 @@ export function TableFilter({
                   const selectedId = filterMaster?.saved_filters?.selectedId;
                   const selectedName =
                     inputValue || filterMaster?.saved_filters?.selectedName;
+                  const selectedCode =
+                    filterMaster?.saved_filters?.selectedCode;
 
                   const newFilterMasterState = {
                     ...filterMaster,
@@ -289,6 +304,7 @@ export function TableFilter({
                       ...filterMaster?.attributes,
                       selectedId,
                       selectedName,
+                      selectedCode,
                     },
                   } as FilterMasterStateProps;
 
@@ -406,6 +422,8 @@ export function TableFilter({
                   const selectedId = filterMaster?.saved_filters?.selectedId;
                   const selectedName =
                     inputValue || filterMaster?.saved_filters?.selectedName;
+                  const selectedCode =
+                    filterMaster?.saved_filters?.selectedCode;
 
                   const newFilterMasterState = {
                     ...filterMaster,
@@ -413,6 +431,7 @@ export function TableFilter({
                       ...filterMaster?.attributes,
                       selectedId,
                       selectedName,
+                      selectedCode,
                     },
                   } as FilterMasterStateProps;
 

package/src/listing/components/index.scss

@@ -25,7 +25,7 @@
       opacity: 0;
       margin-right: calc(-1 * var(--filter-width));
       transition: all 0.4s ease-in-out;
-      max-height: calc(100vh - 50px);
+      max-height: calc(100vh - 110px);
     }
     .ts__table__filter.show {
       transition: all 0.4s ease-in-out;
@@ -34,7 +34,7 @@
       max-width: var(--filter-width);
       margin-left: 1.25rem;
       margin-right: 0rem;
-      min-height: calc(100vh - 50px);
+      min-height: calc(100vh - 110px);
     }
   }
 
@@ -59,7 +59,7 @@
 
   .ts__table__wrapper {
     overflow-x: auto;
-    max-height: calc(100vh - 110px);
+    max-height: calc(100vh - 160px);
 
     &.is-fullscreen {
       max-height: calc(100vh - 56px);

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

@@ -163,6 +163,7 @@ export const useDeleteFilterAPI = (tableStates: CraftTableOptionsProps) => {
           saved_filters: {
             selectedId: "",
             selectedName: "",
+            selectedCode: "",
           },
           activeFilterTabIndex: -1,
         };

package/src/listing/libs/hooks/useEntityTableHooks.ts

@@ -4,7 +4,7 @@ import {
   fetchDetailsByFilterId,
 } from "../utils/apiColumn";
 
-export const useDetailsQueryAPI = (value: string) => {
+export const useDetailsQueryAPI = (value: string | undefined) => {
   const detailsQuery = useQuery({
     queryKey: ["details", value],
     queryFn: () => fetchDetailsByFilterId(value),

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

@@ -47,7 +47,7 @@ export const entityTableFilterMaster = async (entity_type: string) => {
   }
 };
 
-export const fetchDetailsByFilterId = async (filterId: string) => {
+export const fetchDetailsByFilterId = async (filterId: string | undefined) => {
   const response = await api.get(`/filter/${filterId}`);
   return response.data;
 };

package/src/listing/types/filter.ts

@@ -12,6 +12,7 @@ type OperationMapProps = {
 };
 
 export interface FilterOperationListProps {
+  code: string;
   label: string;
   value: string;
 }
@@ -74,6 +75,11 @@ export interface FilterComponentOptionsMainFilterOptions {
   >;
 }
 
+export interface FilterComponentOptionsSavedFilterOptions {
+  showBackButton?: boolean;
+  editMode?: boolean;
+}
+
 // Button config type
 type ButtonConfig = {
   primary: string;
@@ -95,9 +101,13 @@ type RecordFilterComponentProps = {
   delete: ModalConfig;
 };
 
+type TabType = "main" | "saved" | "attributes";
+
 interface FilterComponentTabOptions {
   mainFilter?: FilterComponentOptionsMainFilterOptions;
+  savedFilter?: FilterComponentOptionsSavedFilterOptions;
   isSingleFilter?: boolean;
+  showFilter?: TabType;
 }
 
 export type FilterComponentOptions =
@@ -239,6 +249,7 @@ export interface FilterMasterStateProps {
   saved_filters: {
     selectedId: string;
     selectedName: string;
+    selectedCode?: string;
   };
   activeFilterTabIndex: number;
 }