rez-table-listing-mui 1.2.19 → 1.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rez-table-listing-mui",
-  "version": "1.2.19",
+  "version": "1.3.1",
   "type": "module",
   "description": "A rez table listing component built on TanStack Table",
   "main": "dist/index.js",
@@ -25,8 +25,7 @@
     "@dnd-kit/modifiers": "^7.0.0",
     "@dnd-kit/sortable": "^8.0.0",
     "@dnd-kit/utilities": "^3.2.2",
-    "@tanstack/react-table": "^8.20.5",
-    "@tanstack/react-query": "^5.76.1"
+    "@tanstack/react-table": "^8.20.5"
   },
   "peerDependencies": {
     "@dnd-kit/core": "^6.1.0",

package/src/index.ts

@@ -9,3 +9,4 @@ export { default as KanbanWrapper } from "./kanban";
 
 export * from "./listing/types/table";
 export * from "./listing/types/table-options";
+export * from "./listing/types/filter";

package/src/listing/components/common/loader/loader.tsx

@@ -8,6 +8,7 @@ const Loader = ({ loaderText }: { loaderText?: string }) => {
       alignItems={"center"}
       flexDirection={"column"}
       gap={2}
+      paddingBlock={2}
       height={"100%"}
       width={"100%"}
     >

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

@@ -27,25 +27,6 @@ const AttributesFilter = ({
 
   const selectedAttribute = filterMaster?.attributes?.selected;
 
-  // Get the current filter value (single selection)
-  // const currentFilterValue = useMemo(() => {
-  //   if (!selectedAttribute) return [];
-
-  //   const matchingColumn = columnsData?.column_list?.find(
-  //     (column) => column.datasource_list === selectedAttribute
-  //   );
-
-  //   if (!matchingColumn) return [];
-
-  //   const existingFilter = filters.find(
-  //     (filter) => filter.filter_attribute === matchingColumn.attribute_key
-  //   );
-
-  //   return Array.isArray(existingFilter?.filter_value)
-  //     ? existingFilter?.filter_value
-  //     : [];
-  // }, [selectedAttribute, filters, columnsData]);
-
   const currentRadio = useMemo(() => {
     return Array.isArray(filterMaster?.attributes?.radio)
       ? (filterMaster!.attributes!.radio as string[])
@@ -74,76 +55,6 @@ const AttributesFilter = ({
     onChangeFunction && onChangeFunction(newState);
   };
 
-  // const setFiltersForRadio = (
-  //   value: string,
-  //   columnsData: FilterColumnsDataProps,
-  //   prevFilters: FilterStateProps[]
-  // ) => {
-  //   const selectedAttr = filterMaster?.attributes.selected;
-  //   if (!selectedAttr) return;
-
-  //   const matchingColumn = columnsData?.column_list?.find(
-  //     (column) => column.datasource_list === selectedAttr
-  //   );
-  //   if (!matchingColumn) return;
-
-  //   const defaultOperator =
-  //     columnsData.operation_list[matchingColumn.data_type]?.[0]?.value || "in";
-
-  //   const newFilter = {
-  //     filter_attribute: matchingColumn.attribute_key,
-  //     filter_operator: defaultOperator,
-  //     filter_value: [value], // single selection
-  //   };
-
-  //   const exists = prevFilters.some(
-  //     (f) => f.filter_attribute === matchingColumn.attribute_key
-  //   );
-  //   if (exists) {
-  //     return prevFilters.map((f) =>
-  //       f.filter_attribute === matchingColumn.attribute_key ? newFilter : f
-  //     );
-  //   } else {
-  //     return [...prevFilters, newFilter];
-  //   }
-  // };
-
-  // const setFilterMasterForRadio = (
-  //   value: string,
-  //   prevFilterMaster: FilterMasterStateProps | null
-  // ) => {
-  //   /**
-  //    * If no attribute is selected, return the previous state without changes
-  //    * This prevents errors when trying to access properties of undefined
-  //    */
-  //   if (!prevFilterMaster || !prevFilterMaster.attributes.selected)
-  //     return prevFilterMaster;
-
-  //   return {
-  //     ...prevFilterMaster,
-  //     attributes: {
-  //       ...prevFilterMaster.attributes,
-  //       radio: [value],
-  //     },
-  //     activeFilterTabIndex: tabValue as number,
-  //   };
-  // };
-
-  // const handleSingleRadioSelect = (value: string) => {
-  //   const newFiltersState = setFiltersForRadio(value, columnsData, filters);
-  //   setFilters(newFiltersState || []);
-
-  //   const newFilterMasterState = setFilterMasterForRadio(value, filterMaster);
-  //   setFilterMaster(newFilterMasterState as FilterMasterStateProps);
-
-  //   const newState = {
-  //     filterMaster: newFilterMasterState,
-  //     filters: newFiltersState,
-  //   };
-
-  //   onChangeFunction && onChangeFunction(newState);
-  // };
-
   const handleSingleRadioSelect = (value: string) => {
     const selectedAttr = filterMaster?.attributes.selected;
     if (!selectedAttr) return;
@@ -158,16 +69,17 @@ const AttributesFilter = ({
 
     if (value === "") {
       // If deselecting, remove the filter
-      updatedFilters = filters.filter(
+      updatedFilters = filters?.filter(
         (f) => f.filter_attribute !== matchingColumn.attribute_key
       );
     } else {
       // Else, replace with new single selection
       const defaultOperator =
-        columnsData.operation_list[matchingColumn.data_type]?.[0]?.value ||
+        columnsData?.operation_list[matchingColumn.data_type]?.[0]?.value ||
         "in";
 
       const newFilter = {
+        ...matchingColumn,
         filter_attribute: matchingColumn.attribute_key,
         filter_operator: defaultOperator,
         filter_value: [value],

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

@@ -3,11 +3,11 @@ import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
 import { DatePicker } from "@mui/x-date-pickers/DatePicker";
 import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns";
 import moment from "moment";
-import { UpdatedFilterStateProps } from "../../../../../types/filter";
+import { FilterStateProps } from "../../../../../types/filter";
 import { SxProps, Theme, Box } from "@mui/material";
 
 type FormDatePickerProps = {
-  filter: UpdatedFilterStateProps;
+  filter: FilterStateProps;
   control: any;
   sx?: SxProps<Theme>;
   views?: Array<"year" | "month" | "day">;

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

@@ -1,10 +1,10 @@
 import { FormControl, MenuItem, Select, SxProps, Theme } from "@mui/material";
 import { Controller, UseFormSetValue } from "react-hook-form";
-import { UpdatedFilterStateProps } from "../../../../../types/filter";
+import { FilterStateProps } from "../../../../../types/filter";
 import moment from "moment";
 
 interface FormDropdownProps {
-  filter: UpdatedFilterStateProps;
+  filter: FilterStateProps;
   control: any;
   setValue: UseFormSetValue<any>;
   dropdownList: {

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

@@ -1,38 +1,24 @@
-import {
-  Box,
-  Button,
-  styled,
-  List,
-  ListItem,
-  Paper,
-  ListItemText,
-} from "@mui/material";
+import { Box, Button, styled, Paper } from "@mui/material";
 import { useRef } from "react";
 import { AddIcon } from "../../../../../../assets/svg";
 import {
   FilterColumnsDataProps,
-  FilterColumnsListProps,
-  UpdatedFilterStateProps,
+  FilterDataMainFilterEntityWiseCriteriaProps,
 } from "../../../../../types/filter";
 import { CraftTableOptionsProps } from "../../../../../types/table-options";
-import CustomSearch from "../../search";
 import { filterStyles } from "../../../style";
 import useElementWidth from "../../../../../libs/hooks/useElementWidth";
 import { onFilterChangeFunctionProps } from "../../../../../types/common";
+import FilterCriteriaEntityList from "./filter-criteria-entity-list";
+import FilterCriteriaList from "./filter-criteria-list";
 
 const FilterCriteria = ({
   columnsData,
   tableStates,
-  setSelectedFilters,
-  searchTerm,
-  setSearchTerm,
   onChangeFunction,
 }: {
   columnsData: FilterColumnsDataProps;
   tableStates: CraftTableOptionsProps;
-  setSelectedFilters: React.Dispatch<
-    React.SetStateAction<UpdatedFilterStateProps[]>
-  >;
   searchTerm: string;
   setSearchTerm: React.Dispatch<React.SetStateAction<string>>;
   onChangeFunction: ({
@@ -57,47 +43,46 @@ const FilterCriteria = ({
     showFilterOptions,
     setShowFilterOption,
     filterMaster,
+    selectedFilterEntity,
+    setSelectedFilterEntity,
   } = tableStates;
 
   const filterButtonRef = useRef<HTMLButtonElement>(null);
 
   const filterButtonWidth = useElementWidth(filterButtonRef);
 
-  const handleAddFilter = (column: FilterColumnsListProps) => {
-    const dropdownOptions = columnsData.operation_list[column.data_type];
+  const handleAddFilter = (
+    attribute: FilterDataMainFilterEntityWiseCriteriaProps
+  ) => {
+    const dropdownOptions =
+      columnsData?.operation_list[attribute?.element_type];
 
-    const defaultValue = column.data_type === "multiselect" ? [] : "";
+    const defaultValue = attribute.element_type === "multiselect" ? [] : "";
 
     const defaultOperator = dropdownOptions?.[0]?.value || "";
 
     const matchingDropdownList =
-      columnsData.operation_list[column.data_type] || [];
+      columnsData?.operation_list[attribute.element_type] || [];
 
     const newFilter = {
-      filter_attribute: column.attribute_key,
+      filter_attribute: attribute.attribute_key,
       filter_operator: defaultOperator,
       filter_value: defaultValue,
+      filter_entity_type: selectedFilterEntity?.value,
     };
 
     const newSelectedFilter = {
       ...newFilter,
-      id: column.id,
-      name: column.name,
-      data_type: column.data_type,
+      id: attribute.id,
+      name: attribute.name,
+      data_type: attribute.element_type,
       dropdown_list: matchingDropdownList,
+      filter_entity_name: selectedFilterEntity?.label,
     };
 
-    setFilters((prev) => [...prev, newFilter]);
-    setSelectedFilters((prev) => [...prev, newSelectedFilter]);
-    //   if (editMode) {
-    //     setEditFilters((prev) => [...prev, newFilter]);
-    //     setSelectedFilters((prev) => [...prev, newSelectedFilter]);
-    //   } else {
-    //     setFilters((prev) => [...prev, newFilter]);
-    //     setSelectedFilters((prev) => [...prev, newSelectedFilter]);
-    //   }
-
-    const newFilterState = [...filters, newFilter];
+    setFilters((prev) => [...prev, newSelectedFilter]);
+
+    const newFilterState = [...filters, newSelectedFilter];
     const newState = {
       filterMaster: filterMaster,
       filters: newFilterState,
@@ -106,6 +91,7 @@ const FilterCriteria = ({
     onChangeFunction && onChangeFunction(newState);
 
     setShowFilterOption(false);
+    setSelectedFilterEntity(undefined);
   };
 
   const toggleFilterOptions = () => {
@@ -135,7 +121,7 @@ const FilterCriteria = ({
           sx={{
             width: filterButtonWidth || 360, // Dynamic width based on button
             p: 1,
-            mt: 2,
+            mt: 1.5,
             cursor: "pointer",
             position: "absolute",
             zIndex: 1300,
@@ -149,51 +135,14 @@ const FilterCriteria = ({
               ...filterStyles.scrollbarCustom,
             }}
           >
-            <List>
-              <CustomSearch
-                placeholder="Filter by..."
-                value={searchTerm}
-                onChange={setSearchTerm}
+            {selectedFilterEntity ? (
+              <FilterCriteriaList
+                tableStates={tableStates}
+                handleAddFilter={handleAddFilter}
               />
-
-              <Box
-                sx={{
-                  my: 2,
-                  overflowY: "auto",
-                  transition: "all 0.4s ease-in-out",
-                }}
-              >
-                {columnsData?.column_list
-                  ?.filter(
-                    (column) =>
-                      column.name.toLowerCase() !== "action" && // Exclude Action column in filter criteria options
-                      column.name
-                        .toLowerCase()
-                        .includes(searchTerm.toLowerCase())
-                  )
-                  .map((column, index) => {
-                    const isAlreadySelected = filters?.some(
-                      (filter) =>
-                        filter.filter_attribute === column.attribute_key
-                    );
-
-                    return (
-                      <ListItem
-                        key={index}
-                        onClick={() =>
-                          !isAlreadySelected && handleAddFilter(column)
-                        } // Prevent click if already selected
-                        sx={{
-                          opacity: isAlreadySelected ? 0.5 : 1,
-                          cursor: isAlreadySelected ? "not-allowed" : "pointer",
-                        }}
-                      >
-                        <ListItemText primary={column.name} />
-                      </ListItem>
-                    );
-                  })}
-              </Box>
-            </List>
+            ) : (
+              <FilterCriteriaEntityList tableStates={tableStates} />
+            )}
           </Box>
         </Paper>
       )}

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

@@ -7,7 +7,7 @@ import {
   SxProps,
   Checkbox,
 } from "@mui/material";
-import { UpdatedFilterStateProps } from "../../../../../types/filter";
+import { FilterStateProps } from "../../../../../types/filter";
 import { DropdownOption } from "../../../../../types/common";
 
 const FormMultiSelect = ({
@@ -17,7 +17,7 @@ const FormMultiSelect = ({
   sx,
   onValueChange,
 }: {
-  filter: UpdatedFilterStateProps;
+  filter: FilterStateProps;
   control: any;
   dropdownData: Record<string, DropdownOption[]>;
   sx?: SxProps<Theme>;

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

@@ -1,10 +1,10 @@
 import { FormControl, MenuItem, Select, SxProps, Theme } from "@mui/material";
 import { Controller } from "react-hook-form";
-import { UpdatedFilterStateProps } from "../../../../../types/filter";
+import { FilterStateProps } from "../../../../../types/filter";
 import { DropdownOption } from "../../../../../types/common";
 
 interface FormSelectProps {
-  filter: UpdatedFilterStateProps;
+  filter: FilterStateProps;
   control: any;
   dropdownData: Record<string, DropdownOption[]>;
   isLoading?: boolean;

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

@@ -1,10 +1,10 @@
 import { TextField } from "@mui/material";
 import { Controller } from "react-hook-form";
 import { TextFieldStyles } from "./styles";
-import { UpdatedFilterStateProps } from "../../../../../types/filter";
+import { FilterStateProps } from "../../../../../types/filter";
 
 interface FormTextfieldProps {
-  filter: UpdatedFilterStateProps;
+  filter: FilterStateProps;
   control: any;
   isLoading?: boolean;
   onValueChange?: () => void;

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

@@ -0,0 +1,17 @@
+import { Typography } from "@mui/material";
+
+const EmptyList = ({ label }: { label?: string }) => {
+  return (
+    <Typography
+      variant="body2"
+      align="center"
+      fontSize={14}
+      fontStyle={"italic"}
+      color="text.secondary"
+    >
+      {label ? label : "No results found"}
+    </Typography>
+  );
+};
+
+export default EmptyList;

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

@@ -0,0 +1,92 @@
+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 EmptyList from "./empty-list";
+
+interface Props {
+  tableStates: CraftTableOptionsProps;
+}
+
+const FilterCriteriaEntityList = ({ tableStates }: Props) => {
+  const [searchTerm, setSearchTerm] = React.useState<string>("");
+
+  const { filterData, filters, setSelectedFilterEntity } = tableStates;
+
+  const handleSelectEntity = (entity: FilterDataMainFilterEntityListProps) => {
+    setSelectedFilterEntity(entity);
+  };
+
+  return (
+    <List>
+      <CustomSearch
+        placeholder="Filter by..."
+        value={searchTerm}
+        onChange={setSearchTerm}
+      />
+
+      <Box
+        sx={{
+          my: 2,
+          overflowY: "auto",
+          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>
+            );
+          })} */}
+      </Box>
+    </List>
+  );
+};
+
+export default FilterCriteriaEntityList;

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

@@ -0,0 +1,104 @@
+import {
+  Box,
+  IconButton,
+  List,
+  ListItem,
+  ListItemText,
+  Typography,
+} from "@mui/material";
+import CustomSearch from "../../search";
+import React 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";
+
+interface Props {
+  tableStates: CraftTableOptionsProps;
+  handleAddFilter: (
+    column: FilterDataMainFilterEntityWiseCriteriaProps
+  ) => void;
+}
+
+const FilterCriteriaList = ({ tableStates, handleAddFilter }: Props) => {
+  const [searchTerm, setSearchTerm] = React.useState<string>("");
+
+  const { filterData, filters, selectedFilterEntity, setSelectedFilterEntity } =
+    tableStates;
+
+  return (
+    <>
+      <Box
+        className="group-header"
+        sx={{
+          ...filterFormStyles.formListSectionHeader,
+          position: "sticky",
+          top: 0,
+          zIndex: 1,
+        }}
+      >
+        <Typography fontSize={14}>{selectedFilterEntity?.label}</Typography>
+        <IconButton
+          size="small"
+          onClick={() => setSelectedFilterEntity(undefined)}
+        >
+          <CloseIcon />
+        </IconButton>
+      </Box>
+      {filterData?.mainFilter?.entityWiseCriteria?.isPending ? (
+        <Loader />
+      ) : (
+        <List>
+          <CustomSearch
+            placeholder="Filter by..."
+            value={searchTerm}
+            onChange={setSearchTerm}
+          />
+
+          <Box
+            sx={{
+              my: 2,
+              overflowY: "auto",
+              transition: "all 0.4s ease-in-out",
+            }}
+          >
+            {(() => {
+              const filteredEntities =
+                filterData?.mainFilter?.entityWiseCriteria?.data?.filter(
+                  (entity) =>
+                    entity.name.toLowerCase().includes(searchTerm.toLowerCase())
+                ) ?? [];
+
+              if (filteredEntities.length === 0) {
+                return <EmptyList />;
+              }
+
+              return filteredEntities.map((entity, index) => {
+                const isAlreadySelected = filters?.some(
+                  (filter) => filter.filter_attribute === entity.attribute_key
+                );
+
+                return (
+                  <ListItem
+                    key={index}
+                    sx={{
+                      opacity: isAlreadySelected ? 0.5 : 1,
+                      cursor: isAlreadySelected ? "not-allowed" : "pointer",
+                    }}
+                    onClick={() => handleAddFilter(entity)}
+                  >
+                    <ListItemText primary={entity.name} />
+                  </ListItem>
+                );
+              });
+            })()}
+          </Box>
+        </List>
+      )}
+    </>
+  );
+};
+
+export default FilterCriteriaList;

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

@@ -2,7 +2,8 @@ export const TextFieldStyles = {
   "& .MuiOutlinedInput-root": {
     borderRadius: "6px",
     fontSize: "14px",
-    bgcolor: "#fafafa",
+    bgcolor: "#fff",
+
     "& fieldset": { borderColor: "#c1c1c1" },
     "&.Mui-focused fieldset": {
       borderColor: "#7A5AF8",