rez-table-listing-mui 1.2.16 → 1.2.18

package/package.json

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

package/src/assets/svg.tsx

@@ -664,7 +664,7 @@ export const SortingIcon = () => {
   );
 };
 
-export const FilterationIcon = ({ color = "#1C1B1F" }) => {
+export const FilterationIcon = ({ color = "#1C1B1F", ...props }) => {
   return (
     <svg
       width="20"
@@ -688,6 +688,7 @@ export const FilterationIcon = ({ color = "#1C1B1F" }) => {
         <path
           d="M8.33333 15V13.3333H11.6667V15H8.33333ZM5 10.8333V9.16667H15V10.8333H5ZM2.5 6.66667V5H17.5V6.66667H2.5Z"
           fill={color}
+          {...props}
         />
       </g>
     </svg>

package/src/kanban/index.tsx

@@ -102,7 +102,10 @@ const Kanban = ({
         <Loader />
       ) : (
         <Box>
-          <Box sx={{ width: "100%", bgcolor: "white", overflowX: "auto" }}>
+          <Box
+            className="kanban-container"
+            sx={{ width: "100%", bgcolor: "white", overflowX: "auto" }}
+          >
             {/* Header */}
             <Box sx={kanbanStyles.topHeader}>
               <IconButton
@@ -188,7 +191,13 @@ const Kanban = ({
                       fontWeight="medium"
                       sx={{ ml: 1.5 }}
                     >
-                      {swim_lane.name} ({swim_lane?.count})
+                      {swim_lane?.name} (
+                      {
+                        data.filter(
+                          (lead: any) => lead?.lead_status_id == swim_lane?.id
+                        ).length
+                      }
+                      )
                     </Typography>
                   </AccordionSummary>
 

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

@@ -21,46 +21,129 @@ const AttributesFilter = ({
   searchTerm,
   setSearchTerm,
   tabValue,
+  onChangeFunction,
 }: AttributesFilterProps) => {
   const { filterMaster, setFilterMaster, filters, setFilters } = tableStates;
 
   const selectedAttribute = filterMaster?.attributes?.selected;
 
   // Get the current filter value (single selection)
-  const currentFilterValue = useMemo(() => {
-    if (!selectedAttribute) return [];
+  // const currentFilterValue = useMemo(() => {
+  //   if (!selectedAttribute) return [];
 
-    const matchingColumn = columnsData?.column_list?.find(
-      (column) => column.datasource_list === selectedAttribute
-    );
+  //   const matchingColumn = columnsData?.column_list?.find(
+  //     (column) => column.datasource_list === selectedAttribute
+  //   );
 
-    if (!matchingColumn) return [];
+  //   if (!matchingColumn) return [];
 
-    const existingFilter = filters.find(
-      (filter) => filter.filter_attribute === matchingColumn.attribute_key
-    );
+  //   const existingFilter = filters.find(
+  //     (filter) => filter.filter_attribute === matchingColumn.attribute_key
+  //   );
+
+  //   return Array.isArray(existingFilter?.filter_value)
+  //     ? existingFilter?.filter_value
+  //     : [];
+  // }, [selectedAttribute, filters, columnsData]);
 
-    return Array.isArray(existingFilter?.filter_value)
-      ? existingFilter?.filter_value
+  const currentRadio = useMemo(() => {
+    return Array.isArray(filterMaster?.attributes?.radio)
+      ? (filterMaster!.attributes!.radio as string[])
       : [];
-  }, [selectedAttribute, filters, columnsData]);
+  }, [filterMaster?.attributes?.radio]);
 
   const handleSelectChange = (event: SelectChangeEvent) => {
     const attributeKey = event.target.value as string;
 
-    setFilterMaster(
-      (prev) =>
-        ({
-          ...prev,
-          attributes: {
-            ...prev?.attributes,
-            selected: attributeKey,
-            radio: [],
-          },
-        } as FilterMasterStateProps)
-    );
+    const newFilterMasterState = {
+      ...filterMaster,
+      attributes: {
+        ...filterMaster?.attributes,
+        selected: attributeKey,
+        radio: [],
+      },
+    };
+
+    setFilterMaster(newFilterMasterState as FilterMasterStateProps);
+
+    const newState = {
+      filterMaster: newFilterMasterState,
+      filters: filters,
+    };
+
+    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;
@@ -70,40 +153,58 @@ const AttributesFilter = ({
     );
     if (!matchingColumn) return;
 
-    const defaultOperator =
-      columnsData.operation_list[matchingColumn.data_type]?.[0]?.value || "in";
+    let updatedFilters = [...filters];
+    let updatedRadio: string[] = [];
 
-    const newFilter = {
-      filter_attribute: matchingColumn.attribute_key,
-      filter_operator: defaultOperator,
-      filter_value: [value], // single selection
-    };
+    if (value === "") {
+      // If deselecting, remove the 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 ||
+        "in";
+
+      const newFilter = {
+        filter_attribute: matchingColumn.attribute_key,
+        filter_operator: defaultOperator,
+        filter_value: [value],
+      };
 
-    setFilters((prevFilters) => {
-      const exists = prevFilters.some(
+      const exists = filters.some(
         (f) => f.filter_attribute === matchingColumn.attribute_key
       );
       if (exists) {
-        return prevFilters.map((f) =>
+        updatedFilters = filters.map((f) =>
           f.filter_attribute === matchingColumn.attribute_key ? newFilter : f
         );
       } else {
-        return [...prevFilters, newFilter];
+        updatedFilters = [...filters, newFilter];
       }
-    });
-
-    setFilterMaster((prev) => {
-      if (!prev || !prev.attributes.selected) return prev;
-
-      return {
-        ...prev,
-        attributes: {
-          ...prev.attributes,
-          radio: [value],
-        },
-        activeFilterTabIndex: tabValue as number,
-      };
-    });
+
+      updatedRadio = [value];
+    }
+
+    setFilters(updatedFilters);
+
+    const updatedFilterMaster = {
+      ...filterMaster,
+      attributes: {
+        ...filterMaster.attributes,
+        radio: updatedRadio,
+      },
+      activeFilterTabIndex: tabValue as number,
+    };
+
+    setFilterMaster(updatedFilterMaster);
+
+    onChangeFunction &&
+      onChangeFunction({
+        filters: updatedFilters,
+        filterMaster: updatedFilterMaster,
+      });
   };
 
   const selectedAttributeOptions = useMemo(() => {
@@ -192,7 +293,8 @@ const AttributesFilter = ({
                     .includes(searchTerm.toLowerCase());
                 })
                 .map((option) => {
-                  const isSelected = currentFilterValue.includes(option.value);
+                  const isSelected = currentRadio.includes(option.value);
+                  // const isSelected = currentFilterValue.includes(option.value);
 
                   return (
                     <FormControlLabel
@@ -200,7 +302,11 @@ const AttributesFilter = ({
                       control={
                         <Radio
                           checked={isSelected}
-                          onChange={() => handleSingleRadioSelect(option.value)}
+                          onClick={() =>
+                            isSelected
+                              ? handleSingleRadioSelect("")
+                              : handleSingleRadioSelect(option.value)
+                          }
                         />
                       }
                       label={option.label}

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

@@ -18,6 +18,7 @@ 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";
 
 const FilterCriteria = ({
   columnsData,
@@ -25,6 +26,7 @@ const FilterCriteria = ({
   setSelectedFilters,
   searchTerm,
   setSearchTerm,
+  onChangeFunction,
 }: {
   columnsData: FilterColumnsDataProps;
   tableStates: CraftTableOptionsProps;
@@ -33,6 +35,10 @@ const FilterCriteria = ({
   >;
   searchTerm: string;
   setSearchTerm: React.Dispatch<React.SetStateAction<string>>;
+  onChangeFunction: ({
+    updatedFilters,
+    filterMaster,
+  }: onFilterChangeFunctionProps) => void;
 }) => {
   const FilterButton = styled(Button)(({ theme }) => ({
     borderRadius: 20,
@@ -45,8 +51,13 @@ const FilterCriteria = ({
     },
   }));
 
-  const { filters, setFilters, showFilterOptions, setShowFilterOption } =
-    tableStates;
+  const {
+    filters,
+    setFilters,
+    showFilterOptions,
+    setShowFilterOption,
+    filterMaster,
+  } = tableStates;
 
   const filterButtonRef = useRef<HTMLButtonElement>(null);
 
@@ -86,6 +97,14 @@ const FilterCriteria = ({
     //     setSelectedFilters((prev) => [...prev, newSelectedFilter]);
     //   }
 
+    const newFilterState = [...filters, newFilter];
+    const newState = {
+      filterMaster: filterMaster,
+      filters: newFilterState,
+    };
+
+    onChangeFunction && onChangeFunction(newState);
+
     setShowFilterOption(false);
   };
 

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

@@ -24,6 +24,7 @@ import FilterCriteria from "./components/Filter-criteria";
 import CustomSearch from "../search";
 import { customDebounce } from "../../../../libs/utils/debounce";
 import { filterFormStyles } from "../../style";
+import { onFilterChangeFunctionProps } from "../../../../types/common";
 
 interface FormValues {
   filterName: string;
@@ -49,6 +50,7 @@ const FilterForm = ({
   tableStates,
   setSavedFilterModalOpen,
   setDeleteFilterModalOpen,
+  onChangeFunction,
 }: {
   columnsData: FilterColumnsDataProps;
   dropdownData: FilterDropdownDataProps;
@@ -65,6 +67,10 @@ const FilterForm = ({
   tableStates: CraftTableOptionsProps;
   setSavedFilterModalOpen?: React.Dispatch<React.SetStateAction<boolean>>;
   setDeleteFilterModalOpen?: React.Dispatch<React.SetStateAction<boolean>>;
+  onChangeFunction: ({
+    updatedFilters,
+    filterMaster,
+  }: onFilterChangeFunctionProps) => void;
 }) => {
   const { filterMaster, setFilters, setFilterMaster, setPagination } =
     tableStates;
@@ -90,14 +96,9 @@ const FilterForm = ({
     };
   }, [selectedFilters, filterName]);
 
-  const {
-    control,
-    watch,
-    reset,
-    // formState: { isDirty },
-    setValue,
-    unregister,
-  } = useForm<FormValues & { dummyChange: string }>({
+  const { control, watch, reset, setValue, unregister } = useForm<
+    FormValues & { dummyChange: string }
+  >({
     mode: "onChange",
     defaultValues,
     resetOptions: {
@@ -116,6 +117,13 @@ const FilterForm = ({
     customDebounce((updatedFilters: UpdatedFilterStateProps[]) => {
       setSelectedFilters(updatedFilters);
       setFilters(updatedFilters);
+
+      const newState = {
+        filterMaster: filterMaster,
+        filters: updatedFilters,
+      };
+
+      onChangeFunction && onChangeFunction(newState);
     }, 1000),
     [setSelectedFilters, setFilters]
   );
@@ -240,6 +248,7 @@ const FilterForm = ({
             setSelectedFilters={setSelectedFilters}
             searchTerm={criteriaSearchTerm}
             setSearchTerm={setCriteriaSearchTerm}
+            onChangeFunction={onChangeFunction}
           />
 
           {!editMode && (
@@ -380,6 +389,18 @@ const FilterForm = ({
             onClick={() => {
               setFilters([]);
               setSelectedFilters([]);
+
+              const filterMaster = {
+                ...tableStates.filterMaster,
+                activeFilterTabIndex: -1,
+              };
+
+              const newState = {
+                filterMaster: filterMaster,
+                filters: [],
+              };
+
+              onChangeFunction && onChangeFunction(newState);
             }}
           >
             Clear All
@@ -388,7 +409,6 @@ const FilterForm = ({
           <Button
             variant="contained"
             fullWidth
-            // disabled={!isDirty && editMode}
             sx={{
               color: "white",
               backgroundColor: "#7A5AF8",

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

@@ -14,11 +14,12 @@ const MainFilter = ({
   selectedFilters,
   setSelectedFilters,
   setSavedFilterModalOpen,
+  onChangeFunction,
 }: FilterFormComponentProps) => {
   const [searchTerm, setSearchTerm] = useState<string>("");
   const [criteriaSearchTerm, setCriteriaSearchTerm] = useState<string>("");
 
-  const { setFilters, setFilterMaster } = tableStates;
+  const { setFilters, setFilterMaster, filterMaster } = tableStates;
 
   useEffect(() => {
     setFilterMaster(
@@ -37,6 +38,19 @@ const MainFilter = ({
     setSelectedFilters((prev) =>
       prev.filter((filter) => filter.filter_attribute !== filter_attribute)
     );
+    setFilters((prev) => {
+      const next = prev.filter((f) => f.filter_attribute !== filter_attribute);
+      setSelectedFilters((prevSel) =>
+        prevSel.filter((f) => f.filter_attribute !== filter_attribute)
+      );
+
+      onChangeFunction &&
+        onChangeFunction({
+          filterMaster: filterMaster,
+          filters: next,
+        });
+      return next;
+    });
   };
 
   const mainBoxStyles = {
@@ -61,6 +75,7 @@ const MainFilter = ({
         tableStates={tableStates}
         setSavedFilterModalOpen={setSavedFilterModalOpen}
         dropdownData={dropdownData}
+        onChangeFunction={onChangeFunction}
       />
     </Box>
   );

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

@@ -8,6 +8,7 @@ import {
   UpdatedFilterStateProps,
 } from "../../../types/filter";
 import { CraftTableOptionsProps } from "../../../types/table-options";
+import { onFilterChangeFunctionProps } from "../../../types/common";
 
 const SavedFilterEditComponent = ({
   columnsData,
@@ -23,6 +24,7 @@ const SavedFilterEditComponent = ({
   setCriteriaSearchTerm,
   setSavedFilterModalOpen,
   setDeleteFilterModalOpen,
+  onChangeFunction,
 }: {
   columnsData: FilterColumnsDataProps;
   dropdownData: FilterDropdownDataProps;
@@ -39,6 +41,10 @@ const SavedFilterEditComponent = ({
   setCriteriaSearchTerm: React.Dispatch<React.SetStateAction<string>>;
   setSavedFilterModalOpen?: React.Dispatch<React.SetStateAction<boolean>>;
   setDeleteFilterModalOpen?: React.Dispatch<React.SetStateAction<boolean>>;
+  onChangeFunction: ({
+    updatedFilters,
+    filterMaster,
+  }: onFilterChangeFunctionProps) => void;
 }) => {
   const { setFilters, setFilterMaster } = tableStates;
 
@@ -54,6 +60,26 @@ const SavedFilterEditComponent = ({
   const handleBackButtonClick = () => {
     setEditMode && setEditMode(false);
     setFilters([]);
+
+    // const newFilterMasterState = {
+    //   ...filterMaster,
+    //   saved_filters: {
+    //     ...filterMaster?.saved_filters,
+    //     selectedId: "",
+    //     selectedName: "",
+    //   },
+    //   activeFilterTabIndex: -1,
+    // } as FilterMasterStateProps;
+
+    // setFilterMaster(newFilterMasterState);
+
+    // const newState = {
+    //   filterMaster: newFilterMasterState,
+    //   filters: filters,
+    // };
+
+    // onChangeFunction && onChangeFunction(newState);
+
     setFilterMaster(
       (prev) =>
         ({
@@ -103,6 +129,7 @@ const SavedFilterEditComponent = ({
         setCriteriaSearchTerm={setCriteriaSearchTerm}
         setSavedFilterModalOpen={setSavedFilterModalOpen}
         setDeleteFilterModalOpen={setDeleteFilterModalOpen}
+        onChangeFunction={onChangeFunction}
       />
     </>
   );

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

@@ -29,8 +29,10 @@ const SavedFilter = ({
   setDeleteFilterModalOpen,
   setSavedFilterModalOpen,
   tabValue,
+  onChangeFunction,
 }: FilterFormComponentProps) => {
-  const { setFilterMaster, setFilterToDelete } = tableStates;
+  const { filters, filterMaster, setFilterMaster, setFilterToDelete } =
+    tableStates;
   const [searchTerm, setSearchTerm] = useState<string>("");
   const [criteriaSearchTerm, setCriteriaSearchTerm] = useState<string>("");
 
@@ -55,36 +57,74 @@ const SavedFilter = ({
   }, []);
 
   const handleListItemClick = (filter: FilterOperationListProps) => {
-    setFilterMaster(
-      (prev) =>
-        ({
-          ...prev,
-          saved_filters: {
-            ...prev?.attributes,
-            selectedId: filter?.value,
-            selectedName: filter?.label,
-          },
-          activeFilterTabIndex: tabValue,
-        } as FilterMasterStateProps)
-    );
+    // setFilterMaster(
+    //   (prev) =>
+    //     ({
+    //       ...prev,
+    //       saved_filters: {
+    //         ...prev?.attributes,
+    //         selectedId: filter?.value,
+    //         selectedName: filter?.label,
+    //       },
+    //       attributes: {
+    //         ...filterMaster?.attributes,
+    //         radio: [],
+    //       },
+    //       activeFilterTabIndex: tabValue,
+    //     } as FilterMasterStateProps)
+    // );
+
+    const newFilterMasterState = {
+      ...filterMaster,
+      saved_filters: {
+        ...filterMaster?.attributes,
+        selectedId: filter?.value,
+        selectedName: filter?.label,
+      },
+      attributes: {
+        ...filterMaster?.attributes,
+        radio: [],
+      },
+      activeFilterTabIndex: tabValue,
+    } as FilterMasterStateProps;
+
+    setFilterMaster(newFilterMasterState);
+
+    const newState = {
+      filterMaster: newFilterMasterState,
+      filters: filters,
+    };
+
+    onChangeFunction && onChangeFunction(newState);
+
     // setEditfilter state on edit icon click
     setEditMode && setEditMode(true);
     setFilterToDelete(filter);
   };
 
   const handleAppyFilter = (filter: FilterOperationListProps) => {
-    setFilterMaster(
-      (prev) =>
-        ({
-          ...prev,
-          saved_filters: {
-            ...prev?.attributes,
-            selectedId: filter?.value,
-            selectedName: filter?.label,
-          },
-          activeFilterTabIndex: tabValue,
-        } as FilterMasterStateProps)
-    );
+    const newFilterMasterState = {
+      ...filterMaster,
+      saved_filters: {
+        ...filterMaster?.attributes,
+        selectedId: filter?.value,
+        selectedName: filter?.label,
+      },
+      attributes: {
+        ...filterMaster?.attributes,
+        radio: [],
+      },
+      activeFilterTabIndex: tabValue,
+    } as FilterMasterStateProps;
+
+    setFilterMaster(newFilterMasterState);
+
+    const newState = {
+      filterMaster: newFilterMasterState,
+      filters: filters,
+    };
+
+    onChangeFunction && onChangeFunction(newState);
   };
 
   const renderList = () => (
@@ -208,6 +248,7 @@ const SavedFilter = ({
           setCriteriaSearchTerm={setCriteriaSearchTerm}
           setSavedFilterModalOpen={setSavedFilterModalOpen}
           setDeleteFilterModalOpen={setDeleteFilterModalOpen}
+          onChangeFunction={onChangeFunction}
         />
       ) : null}
     </Box>