[CSR-4284]: multi filter data grid

package.json

@@ -1,5 +1,5 @@
 {
-  "version": "8.1.13",
+  "version": "8.1.14",
   "license": "MIT",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

src/components/data-grid/DataGrid.tsx

@@ -56,6 +56,7 @@
   RowModelType,
   DataGridColumnValueType,
   CustomFilterTypes,
+  Filter,
 } from './types';
 import { useTheme } from '../../providers';
 import { defaultFormatSettings } from './defaultFormatSettings';
@@ -156,7 +157,7 @@
   const [selectedFilterIds, setSelectedFilterIds] = useState<SelectedFilterIds>({});
   const [rowsSelected, setRowsSelected] = useState<number>(0);
   const [isGridColumnApiLoaded, setIsGridColumnApiLoaded] = useState<boolean>(false);
   const [filterModel, setFilterModel] = useState<Record<string, any>>({});
 
   const { theme } = useTheme();
 
@@ -452,7 +453,7 @@
     }
   }, [filterModel]);
 
   const getRowNodeId = (data: any) => {
     return data.hierarchy ?? data.id;
   };
 
@@ -472,7 +473,7 @@
   const getValueFormatter = (
     params: ValueFormatterParams,
     type?: DataGridColumnValueType,
     customMap?: (value: any) => any,
   ) => {
     const { currency, numberFormat, dateFormat, language, timeFormat, durationFormat } = formatSettings;
     const defaultDateFormat = defaultFormatSettings.dateFormat as string;
@@ -509,7 +510,7 @@
     return params.value;
   };
 
   const getFilterParams = (params: any, columnField: string) => {
     if (!params) {
       return;
     }
@@ -572,6 +573,22 @@
     onFiltering(filterModel);
   };
 
+  const getSetFilterObject = (values: (string | number | boolean | null)[], filterObject?: Filter) => {
+    if (filterObject?.customFilterMap) {
+      return filterObject?.customFilterMap(values);
+    }
+    if (filterObject?.byId) {
+      return {
+        ids: values,
+        filterType: CustomFilterTypes.ids,
+      };
+    }
+    return {
+      values,
+      filterType: CustomFilterTypes.set,
+    };
+  };
+
   const onSetFiltering = useCallback(
     (columnField: string, type: FilterType, value: FilterValue['value']) => {
       let currentValues;
@@ -589,22 +606,7 @@
       }
       const filterObject = filters?.find((filter) => filter.columnField === columnField);
 
-      let setFilter;
-      if (filterObject?.customFilterMap) {
-        setFilter = filterObject?.customFilterMap(values);
-      } else if (filterObject?.byId) {
-        setFilter = {
-          ids: values,
-          filterType: CustomFilterTypes.ids,
-        };
-      } else {
-        setFilter = {
-          values,
-          filterType: CustomFilterTypes.set,
-        };
-      }
-
-      filterModel[columnField] = setFilter;
+      filterModel[columnField] = getSetFilterObject(values, filterObject);
 
       onFiltering(filterModel);
     },
@@ -634,6 +636,26 @@
     [setSelectedFilterIds, onSetFiltering],
   );
 
+  const filterOnMultiValues = useCallback(
+    (columnField: string, values: FilterValue['value'][]) => {
+      if (!values.length) {
+        setFilterModel((model) => ({ ...model, [columnField]: undefined }));
+        return gridApi?.onFilterChanged();
+      }
+      const filterObject = filters?.find((filter) => filter.columnField === columnField);
+
+      filterModel[columnField] = getSetFilterObject(values, filterObject);
+
+      onFiltering(filterModel);
+
+      setSelectedFilterIds((currentIds) => ({
+        ...currentIds,
+        [columnField]: values,
+      }));
+    },
+    [setSelectedFilterIds, onSetFiltering],
+  );
+
   // Date format that is send as part of the query request
   const getDateFormat = useCallback((date: Date) => new TcDate(date).getDateWithoutTimeAsUTC().toISOString(), []);
 
@@ -718,7 +740,7 @@
     }
   }, [filters]);
 
   const isServerSideGroup = (dataItem: any) => {
     return !!dataItem.children?.length;
   };
 
@@ -772,6 +794,7 @@
         selectedFilterIds={selectedFilterIds}
         setSelectedFilterIds={setSelectedFilterIds}
         filterOnValue={filterOnValue}
+        filterOnMultiValues={filterOnMultiValues}
         filterOnDate={filterOnDate}
         debouncedSearch={debouncedSearch}
         clearFilterModel={clearFilterModel}
@@ -885,7 +908,7 @@
           rowHeight={rowHeight}
           getRowHeight={getRowHeight}
           frameworkComponents={{
             moreActionsCell: (props: any) =>
               !customActionsCellRender ? (
                 <RowActionsCell {...props} hideWithNoItems={hideActionWithNoItems} />
               ) : (
@@ -998,7 +1021,7 @@
                 hide={hide || rowGroup}
                 sort={sort}
                 filter={getFilterType(field, valueType)}
                 filterParams={{ values: (params: any) => getFilterParams(params, field) }}
                 valueFormatter={(params: ValueFormatterParams) => getValueFormatter(params, valueType, customMap)}
                 aggFunc={aggFunc}
                 sortable={sortable ?? sortableColumns}

src/components/data-grid/defaultTranslations.tsx

@@ -40,6 +40,7 @@ export const defaultTranslations: Translations = {
   defaultViewTooltip: 'Default view cannot be edited.',
   lessFilters: 'Less filters',
   allFilters: 'All filters',
+  applyFilters: 'Apply filters',
   showResultsBy: 'Show',
   paginationPrevious: 'Prev',
   paginationNext: 'Next',

src/components/data-grid/filters/ColumnFilters.tsx

@@ -12,6 +12,7 @@ import { Button } from '../../button';
 import { ButtonKind } from '../../../models';
 import { ParagraphSmall } from 'baseui/typography';
 import { FixedSizeSelect } from '../../fixed-size-select';
+import { MultiFilter } from './MultiFilter';
 
 const LESS_FILTERS_BUTTON_TEST_ID = 'less-filters-button';
 const MORE_FILTERS_BUTTON_TEST_ID = 'more-filters-button';
@@ -25,9 +26,10 @@ export const ColumnFilters = ({
   setDates,
   setSelectedFilterIds,
   selectedFilterIds,
-  translations: { search, lessFilters, allFilters, clearFilters },
+  translations: { search, lessFilters, allFilters, clearFilters, applyFilters },
   datepickerTranslations,
   filterOnValue,
+  filterOnMultiValues,
   filterOnDate,
   clearFilterModel,
   showClearFilters,
@@ -205,6 +207,9 @@ export const ColumnFilters = ({
 
   const getSelectedFilterIds = (columnField: string) => selectedFilterIds[columnField]?.map(String);
 
+  const handleFilterMultiValues = (columnField: string) => (values: FilterValue['value'][]) =>
+    filterOnMultiValues(columnField, values);
+
   const getSelectHasValue = (columnField: string) =>
     Array.isArray(selectedFilterIds[columnField])
       ? !!selectedFilterIds[columnField].length
@@ -244,24 +249,18 @@ export const ColumnFilters = ({
         </>
       ),
       [FilterType.multi]: (
-        <Dropdown
-          showSearch
-          selection
-          items={getAllColumnValues(columnField, FilterType.multi, values)}
-          selectedIds={getSelectedFilterIds(columnField)}
+        <MultiFilter
+          values={getAllColumnValues(columnField, FilterType.multi, values)}
+          initialSelectedFilterIds={getSelectedFilterIds(columnField)}
           searchPlaceholder={searchPlaceholder || search}
-          isLoading={valuesLoading}
-        >
-          <FilterButton
-            title={getSetTitle(columnField, title)}
-            startEnhancer={Icon && <Icon color={getSetIconColor(columnField)} />}
-            size={SIZE.compact}
-            isActive={isSetFilterActive(columnField)}
-            onClear={() => onSetFilterClear(columnField)}
-            hasValue={isSetFilterActive(columnField)}
-            arrows
-          />
-        </Dropdown>
+          valuesLoading={valuesLoading}
+          title={getSetTitle(columnField, title)}
+          icon={Icon && <Icon color={getSetIconColor(columnField)} />}
+          isFilterActive={isSetFilterActive(columnField)}
+          onSetFilterClear={() => onSetFilterClear(columnField)}
+          onApplyFilter={handleFilterMultiValues(columnField)}
+          applyFiltersLabel={applyFilters}
+        />
       ),
       [FilterType.multiVirtual]: (
         <FixedSizeSelect

src/components/data-grid/filters/MultiFilter.tsx

@@ -0,0 +1,84 @@
+import React, { useEffect, useState } from 'react';
+import { FilterButton } from './FilterButton';
+import { SIZE } from 'baseui/button';
+import { Button } from '../../button';
+import { Dropdown, DropdownItem } from '../../dropdown';
+import { Block } from '../../block';
+import { padding } from '../../../utils';
+import { useTheme } from '../../../providers';
+import { MultiFilterProps } from './types';
+
+export const MultiFilter = ({
+  values,
+  searchPlaceholder,
+  valuesLoading,
+  icon: Icon,
+  title,
+  initialSelectedFilterIds,
+  isFilterActive,
+  applyFiltersLabel,
+  onSetFilterClear,
+  onApplyFilter,
+}: MultiFilterProps) => {
+  const [selectedItems, setSelectedItems] = useState<DropdownItem[]>([]);
+
+  const {
+    theme: {
+      current: {
+        sizing: { scale300, scale600 },
+        customColors: { light4 },
+      },
+    },
+  } = useTheme();
+
+  useEffect(() => {
+    setSelectedItems(values.filter((value) => !!initialSelectedFilterIds?.includes(value.id as string)));
+  }, [initialSelectedFilterIds]);
+
+  const handleApplyFilter = () => {
+    onApplyFilter(selectedItems.map((item) => item.id as string));
+  };
+
+  const handleSelectItem = (item: DropdownItem) => {
+    const filteredSelectedItems = selectedItems.filter(({ id }) => id !== item.id);
+    if (filteredSelectedItems.length < selectedItems.length) {
+      setSelectedItems(filteredSelectedItems);
+      return;
+    }
+    setSelectedItems([...selectedItems, item]);
+  };
+
+  const preparedValues = values.map((value) => ({
+    ...value,
+    action: () => handleSelectItem(value),
+    isBold: !!selectedItems.find(({ id }) => id === value.id),
+  }));
+
+  return (
+    <Dropdown
+      showSearch
+      selection
+      items={preparedValues}
+      selectedIds={selectedItems.map(({ id }) => id as string)}
+      searchPlaceholder={searchPlaceholder}
+      isLoading={valuesLoading}
+      footer={
+        <Block {...padding(scale300, scale600)} backgroundColor={light4}>
+          <Button onClick={handleApplyFilter} width="100%">
+            {applyFiltersLabel}
+          </Button>
+        </Block>
+      }
+    >
+      <FilterButton
+        title={title}
+        startEnhancer={Icon}
+        size={SIZE.compact}
+        isActive={isFilterActive}
+        onClear={onSetFilterClear}
+        hasValue={isFilterActive}
+        arrows
+      />
+    </Dropdown>
+  );
+};

src/components/data-grid/filters/types.ts

@@ -0,0 +1,16 @@
+import { ReactNode } from 'react';
+import { DropdownItem } from '../../dropdown';
+import { FilterValue } from '../types';
+
+export interface MultiFilterProps {
+  searchPlaceholder: string;
+  valuesLoading?: boolean;
+  values: DropdownItem[];
+  icon?: ReactNode;
+  isFilterActive: boolean;
+  title: string;
+  initialSelectedFilterIds: string[];
+  applyFiltersLabel: string;
+  onSetFilterClear: () => void;
+  onApplyFilter: (selectedItems: FilterValue['value'][]) => void;
+}

src/components/data-grid/types.ts

@@ -173,6 +173,7 @@ export interface Translations {
   defaultViewTooltip: string;
   lessFilters: string;
   allFilters: string;
+  applyFilters: string;
   showResultsBy: string;
   paginationPrevious: string;
   paginationNext: string;
@@ -296,6 +297,7 @@ export interface FiltersProps {
   selectedFilterIds: SelectedFilterIds;
   setSelectedFilterIds: Dispatch<SetStateAction<SelectedFilterIds>>;
   filterOnValue: (columnField: string, value: FilterValue['value'], type: FilterType) => void;
+  filterOnMultiValues: (columnField: string, values: FilterValue['value'][]) => void;
   filterOnDate: (columnField: string, selectedDates: Date[]) => void;
   debouncedSearch?: boolean;
   clearFilterModel: (columnFilter: string) => void;
@@ -317,6 +319,7 @@ export interface ColumnFiltersProps {
   selectedFilterIds: SelectedFilterIds;
   setSelectedFilterIds: Dispatch<SetStateAction<SelectedFilterIds>>;
   filterOnValue: (columnField: string, value: FilterValue['value'], type: FilterType) => void;
+  filterOnMultiValues: (columnField: string, values: FilterValue['value'][]) => void;
   filterOnDate: (columnField: string, selectedDates: Date[]) => void;
   clearFilterModel: (columnFilter: string) => void;
   showClearFilters?: boolean;