rez-table-listing-mui 1.3.7 → 1.3.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rez-table-listing-mui",
-  "version": "1.3.7",
+  "version": "1.3.9",
   "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/forms/components/Filter-criteria.tsx

@@ -1,8 +1,9 @@
 import { Box, Button, styled, Paper } from "@mui/material";
-import { useRef } from "react";
+import { useMemo, useRef } from "react";
 import { AddIcon } from "../../../../../../assets/svg";
 import {
   FilterColumnsDataProps,
+  FilterComponentOptions,
   FilterDataMainFilterEntityWiseCriteriaProps,
 } from "../../../../../types/filter";
 import { CraftTableOptionsProps } from "../../../../../types/table-options";
@@ -16,15 +17,15 @@ const FilterCriteria = ({
   columnsData,
   tableStates,
   onChangeFunction,
+  filterComponentOptions,
 }: {
   columnsData: FilterColumnsDataProps;
   tableStates: CraftTableOptionsProps;
-  searchTerm: string;
-  setSearchTerm: React.Dispatch<React.SetStateAction<string>>;
   onChangeFunction: ({
     updatedFilters,
     filterMaster,
   }: onFilterChangeFunctionProps) => void;
+  filterComponentOptions?: FilterComponentOptions;
 }) => {
   const FilterButton = styled(Button)(({ theme }) => ({
     borderRadius: 20,
@@ -100,12 +101,20 @@ const FilterCriteria = ({
     setShowFilterOption((prev) => !prev);
   };
 
+  // Disable button if only one filter is allowed
+  const isSingleFilter =
+    filterComponentOptions?.tabOptions?.isSingleFilter || false;
+  const disableButton = useMemo(() => {
+    return isSingleFilter && filters?.length > 0;
+  }, [filters?.length, isSingleFilter]);
+
   return (
     <Box>
       <FilterButton
         fullWidth
         startIcon={<AddIcon />}
         onClick={toggleFilterOptions}
+        disabled={disableButton}
         sx={{
           bgcolor: "#eae4fe",
           borderRadius: "6px",

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

@@ -42,8 +42,6 @@ const FilterForm = ({
   dropdownData,
   searchTerm = "",
   setSearchTerm,
-  criteriaSearchTerm = "",
-  setCriteriaSearchTerm,
   handleRemoveFilter,
   editMode = false,
   tableStates,
@@ -56,8 +54,6 @@ const FilterForm = ({
   dropdownData: FilterDropdownDataProps;
   searchTerm?: string;
   setSearchTerm: React.Dispatch<React.SetStateAction<string>>;
-  criteriaSearchTerm?: string;
-  setCriteriaSearchTerm: React.Dispatch<React.SetStateAction<string>>;
   handleRemoveFilter: (filter_attribute: string) => void;
   editMode?: boolean;
   tableStates: CraftTableOptionsProps;
@@ -76,6 +72,8 @@ const FilterForm = ({
     filterComponentOptions?.tabOptions?.mainFilter?.showSaveButton;
   const showClearAllButton =
     filterComponentOptions?.tabOptions?.mainFilter?.showClearAllButton;
+  const customButtons =
+    filterComponentOptions?.tabOptions?.mainFilter?.customButtons;
 
   const filterName = filterMaster?.saved_filters?.selectedName || "";
 
@@ -283,9 +281,8 @@ const FilterForm = ({
           <FilterCriteria
             columnsData={columnsData}
             tableStates={tableStates}
-            searchTerm={criteriaSearchTerm}
-            setSearchTerm={setCriteriaSearchTerm}
             onChangeFunction={onChangeFunction}
+            filterComponentOptions={filterComponentOptions}
           />
 
           {!editMode && (
@@ -497,6 +494,19 @@ const FilterForm = ({
               Save Filter
             </Button>
           )}
+
+          {/* Custom buttons from props */}
+          {customButtons?.map((btn, idx) => (
+            <Button
+              key={idx}
+              fullWidth
+              variant={btn?.variant ?? "outlined"}
+              sx={btn?.sx}
+              {...btn}
+            >
+              {btn?.label}
+            </Button>
+          ))}
         </Box>
       )}
     </form>

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

@@ -16,7 +16,6 @@ const MainFilter = ({
   filterComponentOptions,
 }: FilterFormComponentProps) => {
   const [searchTerm, setSearchTerm] = useState<string>("");
-  const [criteriaSearchTerm, setCriteriaSearchTerm] = useState<string>("");
 
   const { setFilters, setFilterMaster, filterMaster } = tableStates;
 
@@ -60,8 +59,6 @@ const MainFilter = ({
         columnsData={columnsData}
         searchTerm={searchTerm}
         setSearchTerm={setSearchTerm}
-        criteriaSearchTerm={criteriaSearchTerm}
-        setCriteriaSearchTerm={setCriteriaSearchTerm}
         handleRemoveFilter={handleRemoveFilter}
         tableStates={tableStates}
         setSavedFilterModalOpen={setSavedFilterModalOpen}

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,12 +1,12 @@
-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 {
   FilterComponentOptions,
   FilterDrawerProps,
   FilterMasterStateProps,
+  TabType,
 } 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 +15,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 +51,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,8 +79,14 @@ 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[] = [];
@@ -137,7 +150,11 @@ export function TableFilter({
     const patches: Partial<FilterMasterStateProps> = {};
 
     if (tabType === "saved") {
-      patches.saved_filters = { selectedId: "", selectedName: "" };
+      patches.saved_filters = {
+        selectedId: "",
+        selectedName: "",
+        selectedCode: "",
+      };
     } else if (tabType === "attributes") {
       patches.attributes = { radio: [], selected: "" };
     }
@@ -154,6 +171,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 && (
@@ -185,16 +221,13 @@ export function TableFilter({
       )}
 
       {!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 && (
@@ -204,11 +237,8 @@ export function TableFilter({
           sx={{ p: "1.5rem 0.75rem" }}
         >
           <MainFilter
-            columnsData={columnsData}
-            tableStates={tableStates}
+            {...commonProps}
             setSavedFilterModalOpen={setSaveFilterModalOpen}
-            dropdownData={dropdownData}
-            onChangeFunction={onChangeFunction}
             filterComponentOptions={finalComponentOptions}
           />
         </CustomTabPanel>
@@ -221,15 +251,10 @@ export function TableFilter({
           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>
       )}
@@ -241,13 +266,9 @@ export function TableFilter({
           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 +303,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 +312,7 @@ export function TableFilter({
                       ...filterMaster?.attributes,
                       selectedId,
                       selectedName,
+                      selectedCode,
                     },
                   } as FilterMasterStateProps;
 
@@ -406,6 +430,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 +439,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;
 };