rez-table-listing-mui 1.2.18 → 1.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rez-table-listing-mui",
-  "version": "1.2.18",
+  "version": "1.3.0",
   "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/kanban/index.tsx

@@ -84,7 +84,7 @@ const Kanban = ({
       swimLane.sub_lanes
         ?.filter((subLane) => subLane.lane_id === laneId)
         ?.forEach((subLane) => {
-          data.forEach((lead: any) => {
+          data?.forEach((lead: any) => {
             if (lead?.stage_id === subLane?.id && !seenLeadIds.has(lead?.id)) {
               seenLeadIds.add(lead.id);
               count++;
@@ -148,7 +148,7 @@ const Kanban = ({
                     </Box>
 
                     <Typography variant="h6" fontWeight="bold" sx={{ px: 2 }}>
-                      {lane.name}
+                      {lane?.name}
                     </Typography>
                   </Box>
                 ))}
@@ -193,7 +193,7 @@ const Kanban = ({
                     >
                       {swim_lane?.name} (
                       {
-                        data.filter(
+                        data?.filter(
                           (lead: any) => lead?.lead_status_id == swim_lane?.id
                         ).length
                       }
@@ -212,7 +212,7 @@ const Kanban = ({
                           sx={{
                             ...kanbanStyles.columnStyle,
                             bgcolor:
-                              lane.color || COLOR_CONSTANTS[index % 4].color,
+                              lane?.color || COLOR_CONSTANTS[index % 4].color,
                           }}
                           key={lane.id}
                         >
@@ -220,18 +220,18 @@ const Kanban = ({
                           {swim_lane?.sub_lanes
                             ?.filter(
                               (sub_lane: SubLane) =>
-                                sub_lane.lane_id.toString() === lane.id
+                                sub_lane.lane_id.toString() === lane?.id
                             )
                             ?.map((sub_section: SubLane) => {
-                              const subLaneKey = `${swim_lane.id}-${lane.id}-${sub_section.id}`;
+                              const subLaneKey = `${swim_lane?.id}-${lane?.id}-${sub_section?.id}`;
                               return (
                                 <Accordion
                                   key={sub_section.id}
                                   expanded={
                                     data?.filter(
                                       (lead: any) =>
-                                        lead.stage_id === sub_section.id &&
-                                        lead.lead_status_id == swim_lane.id
+                                        lead?.stage_id === sub_section?.id &&
+                                        lead?.lead_status_id == swim_lane?.id
                                     )?.length === 0
                                       ? false
                                       : subLaneExpanded[subLaneKey] || false
@@ -261,10 +261,10 @@ const Kanban = ({
                                           display:
                                             data?.filter(
                                               (lead: any) =>
-                                                lead.stage_id ===
-                                                  sub_section.id &&
-                                                lead.lead_status_id ==
-                                                  swim_lane.id
+                                                lead?.stage_id ===
+                                                  sub_section?.id &&
+                                                lead?.lead_status_id ==
+                                                  swim_lane?.id
                                             )?.length === 0
                                               ? "none"
                                               : "block",
@@ -283,15 +283,17 @@ const Kanban = ({
                                         sx={{
                                           ...kanbanStyles.subSectionCountContainer,
                                           bgcolor:
-                                            lane.darkColor ||
+                                            lane?.darkColor ||
                                             COLOR_CONSTANTS[index % 4]
                                               .darkColor,
                                         }}
                                       >
                                         {data?.filter(
                                           (lead: any) =>
-                                            lead.stage_id === sub_section.id &&
-                                            lead.lead_status_id === swim_lane.id
+                                            lead?.stage_id ===
+                                              sub_section?.id &&
+                                            lead?.lead_status_id ===
+                                              swim_lane?.id
                                         )?.length || 0}
                                       </Box>
                                       <Typography
@@ -299,7 +301,7 @@ const Kanban = ({
                                         color="#555354"
                                         fontSize="12px"
                                       >
-                                        {sub_section.name}
+                                        {sub_section?.name}
                                       </Typography>
                                     </Box>
                                   </AccordionSummary>
@@ -311,17 +313,18 @@ const Kanban = ({
                                       const leadsForThisSubLane =
                                         data?.filter(
                                           (lead: any) =>
-                                            lead.stage_id === sub_section.id &&
-                                            lead.lead_status_id ==
-                                              swim_lane.id &&
-                                            lead.stage_group_id == lane.id
+                                            lead?.stage_id ===
+                                              sub_section?.id &&
+                                            lead?.lead_status_id ==
+                                              swim_lane?.id &&
+                                            lead?.stage_group_id == lane?.id
                                         ) || [];
 
                                       return leadsForThisSubLane.map(
                                         (card: any) =>
                                           (KanbanCardComponent && (
                                             <KanbanCardComponent
-                                              key={card.id}
+                                              key={card?.id}
                                               cardData={card}
                                             />
                                           )) ||

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;