rez-table-listing-mui 1.3.12 → 1.3.14

package/package.json

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

package/src/listing/components/filter/components/forms/components/Filter-criteria.tsx

@@ -1,4 +1,4 @@
-import { Box, Button, styled, Paper } from "@mui/material";
+import { Box, Button, styled, Paper, ClickAwayListener } from "@mui/material";
 import { useMemo, useRef } from "react";
 import { AddIcon } from "../../../../../../assets/svg";
 import {
@@ -73,7 +73,7 @@ const FilterCriteria = ({
 
     const newSelectedFilter = {
       ...newFilter,
-      id: attribute?.id,
+      // id: attribute?.id,
       filter_attribute_name: attribute?.name,
       filter_attribute_data_type:
         attribute?.data_type || attribute?.element_type,
@@ -128,34 +128,40 @@ const FilterCriteria = ({
       </FilterButton>
 
       {showFilterOptions && (
-        <Paper
-          sx={{
-            width: filterButtonWidth || 360, // Dynamic width based on button
-            p: 1,
-            mt: 1.5,
-            cursor: "pointer",
-            position: "absolute",
-            zIndex: 1300,
-          }}
-        >
-          <Box
+        <ClickAwayListener onClickAway={() => setShowFilterOption(false)}>
+          <Paper
             sx={{
-              maxHeight: `calc(100vh - 440px)`,
-              overflowY: "auto",
-              width: "100%",
-              ...filterStyles.scrollbarCustom,
+              width: filterButtonWidth || 360, // Dynamic width based on button
+              p: 1,
+              mt: 1.5,
+              cursor: "pointer",
+              position: "absolute",
+              zIndex: 1300,
             }}
           >
-            {selectedFilterEntity ? (
-              <FilterCriteriaList
-                tableStates={tableStates}
-                handleAddFilter={handleAddFilter}
-              />
-            ) : (
-              <FilterCriteriaEntityList tableStates={tableStates} />
-            )}
-          </Box>
-        </Paper>
+            <Box
+              sx={{
+                maxHeight: `calc(100vh - 440px)`,
+                overflowY: "auto",
+                width: "100%",
+                ...filterStyles.scrollbarCustom,
+              }}
+            >
+              {selectedFilterEntity ? (
+                <FilterCriteriaList
+                  tableStates={tableStates}
+                  handleAddFilter={handleAddFilter}
+                  filterComponentOptions={filterComponentOptions}
+                />
+              ) : (
+                <FilterCriteriaEntityList
+                  tableStates={tableStates}
+                  filterComponentOptions={filterComponentOptions}
+                />
+              )}
+            </Box>
+          </Paper>
+        </ClickAwayListener>
       )}
     </Box>
   );

package/src/listing/components/filter/components/forms/components/filter-criteria-entity-list.tsx

@@ -2,22 +2,50 @@ import { Box, List, ListItem, ListItemText } from "@mui/material";
 import React from "react";
 import CustomSearch from "../../search";
 import { CraftTableOptionsProps } from "../../../../../types/table-options";
-import { FilterDataMainFilterEntityListProps } from "../../../../../types/filter";
+import {
+  FilterComponentOptions,
+  FilterDataMainFilterEntityListProps,
+} from "../../../../../types/filter";
 import EmptyList from "./empty-list";
 
 interface Props {
   tableStates: CraftTableOptionsProps;
+  filterComponentOptions?: FilterComponentOptions;
 }
 
-const FilterCriteriaEntityList = ({ tableStates }: Props) => {
+const FilterCriteriaEntityList = ({
+  tableStates,
+  filterComponentOptions,
+}: Props) => {
   const [searchTerm, setSearchTerm] = React.useState<string>("");
 
-  const { filterData, filters, setSelectedFilterEntity } = tableStates;
+  const { filters, filterData, setSelectedFilterEntity } = tableStates;
 
   const handleSelectEntity = (entity: FilterDataMainFilterEntityListProps) => {
     setSelectedFilterEntity(entity);
   };
 
+  const isSingleEntity = filterComponentOptions?.tabOptions?.isSingleEntity;
+
+  // 🔍 get all entities from main filter data
+  const allEntities = filterData?.mainFilter?.entityList?.data || [];
+
+  // ✅ determine which entities should be displayed
+  const entitiesToShow = React.useMemo(() => {
+    // Case 1: isSingleEntity is true and filters already has entities
+    if (isSingleEntity && filters?.length > 0) {
+      const filterEntityTypes = filters.map((f) => f?.filter_entity_type);
+      return allEntities.filter((entity) =>
+        filterEntityTypes.includes(entity.value)
+      );
+    }
+
+    // Case 2: default behavior (apply search filter)
+    return allEntities.filter((entity) =>
+      entity.label.toLowerCase().includes(searchTerm.toLowerCase())
+    );
+  }, [isSingleEntity, filters, allEntities, searchTerm]);
+
   return (
     <List>
       <CustomSearch
@@ -33,57 +61,22 @@ const FilterCriteriaEntityList = ({ tableStates }: Props) => {
           transition: "all 0.4s ease-in-out",
         }}
       >
-        {(() => {
-          const filteredEntities =
-            filterData?.mainFilter?.entityList?.data?.filter((entity) =>
-              entity.label.toLowerCase().includes(searchTerm.toLowerCase())
-            ) || [];
-
-          if (filteredEntities?.length === 0) {
-            return <EmptyList />;
-          }
-
-          return filteredEntities.map((entity, index) => {
-            const isAlreadySelected = filters?.some(
-              (filter) => filter.filter_attribute === entity.value
-            );
-
-            return (
-              <ListItem
-                key={index}
-                sx={{
-                  opacity: isAlreadySelected ? 0.5 : 1,
-                  cursor: isAlreadySelected ? "not-allowed" : "pointer",
-                }}
-                onClick={() => handleSelectEntity(entity)}
-              >
-                <ListItemText primary={entity.label} />
-              </ListItem>
-            );
-          });
-        })()}
-        {/* {filterData?.mainFilter?.entityList
-          ?.filter((entity) =>
-            entity.label.toLowerCase().includes(searchTerm.toLowerCase())
-          )
-          .map((entity, index) => {
-            const isAlreadySelected = filters?.some(
-              (filter) => filter.filter_attribute === entity.value
-            );
-
-            return (
-              <ListItem
-                key={index}
-                sx={{
-                  opacity: isAlreadySelected ? 0.5 : 1,
-                  cursor: isAlreadySelected ? "not-allowed" : "pointer",
-                }}
-                onClick={() => handleSelectEntity(entity)}
-              >
-                <ListItemText primary={entity.label} />
-              </ListItem>
-            );
-          })} */}
+        {entitiesToShow.length === 0 ? (
+          <EmptyList />
+        ) : (
+          entitiesToShow.map((entity, index) => (
+            <ListItem
+              key={index}
+              onClick={() => handleSelectEntity(entity)}
+              sx={{
+                cursor: "pointer",
+                "&:hover": { backgroundColor: "#f4f4f4" },
+              }}
+            >
+              <ListItemText primary={entity.label} />
+            </ListItem>
+          ))
+        )}
       </Box>
     </List>
   );

package/src/listing/components/filter/components/forms/components/filter-criteria-list.tsx

@@ -7,27 +7,51 @@ import {
   Typography,
 } from "@mui/material";
 import CustomSearch from "../../search";
-import React from "react";
+import React, { useMemo } from "react";
 import { CraftTableOptionsProps } from "../../../../../types/table-options";
 import { filterFormStyles } from "../../../style";
 import { CloseIcon } from "../../../../../../assets/svg";
 import EmptyList from "./empty-list";
 import Loader from "../../../../common/loader/loader";
-import { FilterDataMainFilterEntityWiseCriteriaProps } from "../../../../../types/filter";
+import {
+  FilterComponentOptions,
+  FilterDataMainFilterEntityWiseCriteriaProps,
+} from "../../../../../types/filter";
 
 interface Props {
   tableStates: CraftTableOptionsProps;
   handleAddFilter: (
     column: FilterDataMainFilterEntityWiseCriteriaProps
   ) => void;
+  filterComponentOptions?: FilterComponentOptions;
 }
 
-const FilterCriteriaList = ({ tableStates, handleAddFilter }: Props) => {
+const FilterCriteriaList = ({
+  tableStates,
+  handleAddFilter,
+  filterComponentOptions,
+}: Props) => {
   const [searchTerm, setSearchTerm] = React.useState<string>("");
 
   const { filterData, filters, selectedFilterEntity, setSelectedFilterEntity } =
     tableStates;
 
+  const isSingleEntity = filterComponentOptions?.tabOptions?.isSingleEntity;
+
+  // Show Close button if:
+  // - isSingleEntity is false → always show
+  // - isSingleEntity is true → only show if filters is empty OR
+  //   no filter exists with same filter_entity_type as selectedFilterEntity.value
+  const shouldShowCloseButton = useMemo(() => {
+    return isSingleEntity
+      ? filters?.length === 0 ||
+          !filters?.some(
+            (filter) =>
+              filter?.filter_entity_type === selectedFilterEntity?.value
+          )
+      : true;
+  }, [filters, isSingleEntity, selectedFilterEntity?.value]);
+
   return (
     <>
       <Box
@@ -40,12 +64,14 @@ const FilterCriteriaList = ({ tableStates, handleAddFilter }: Props) => {
         }}
       >
         <Typography fontSize={14}>{selectedFilterEntity?.label}</Typography>
-        <IconButton
-          size="small"
-          onClick={() => setSelectedFilterEntity(undefined)}
-        >
-          <CloseIcon />
-        </IconButton>
+        {shouldShowCloseButton && (
+          <IconButton
+            size="small"
+            onClick={() => setSelectedFilterEntity(undefined)}
+          >
+            <CloseIcon />
+          </IconButton>
+        )}
       </Box>
       {filterData?.mainFilter?.entityWiseCriteria?.isPending ? (
         <Loader />
@@ -86,8 +112,15 @@ const FilterCriteriaList = ({ tableStates, handleAddFilter }: Props) => {
                     sx={{
                       opacity: isAlreadySelected ? 0.5 : 1,
                       cursor: isAlreadySelected ? "not-allowed" : "pointer",
+                      "&:hover": {
+                        backgroundColor: isAlreadySelected
+                          ? "inherit"
+                          : "#f4f4f4",
+                      },
                     }}
-                    onClick={() => handleAddFilter(entity)}
+                    onClick={() =>
+                      !isAlreadySelected && handleAddFilter(entity)
+                    }
                   >
                     <ListItemText primary={entity.name} />
                   </ListItem>

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

@@ -51,6 +51,7 @@ export function TableFilter({
     showTabs: true,
     tabOptions: {
       isSingleFilter: false,
+      isSingleEntity: false,
       showFilter: "main",
       mainFilter: {
         showSaveButton: true,

package/src/listing/types/filter.ts

@@ -107,6 +107,7 @@ interface FilterComponentTabOptions {
   mainFilter?: FilterComponentOptionsMainFilterOptions;
   savedFilter?: FilterComponentOptionsSavedFilterOptions;
   isSingleFilter?: boolean;
+  isSingleEntity?: boolean;
   showFilter?: TabType;
 }
 
@@ -177,7 +178,7 @@ export interface FilterStateProps {
   filter_attribute: string;
   filter_operator: string;
   filter_value: string | string[];
-  id: string | number;
+  // id: string | number; // removed as per backend req
   filter_attribute_name: string | undefined;
   filter_attribute_data_type: FilterInputDataTypes | undefined;
   attribute_key?: string;

package/src/view/ListingView.tsx

@@ -324,10 +324,11 @@ function ListingView() {
             // onSaveFilter={handleSaveFilter}
             onChangeFunction={handleChangeFunction}
             filterComponentOptions={{
-              showMainHeader: false,
+              showMainHeader: true,
               showTabs: true,
               isRuleEngine: true,
               tabOptions: {
+                // isSingleEntity: true,
                 mainFilter: {
                   showSaveButton: true,
                   showClearAllButton: true,