webkom · norbye · Jan 28, 2024 · Jan 27, 2024
diff --git a/app/components/Table/BodyCell.tsx b/app/components/Table/BodyCell.tsx
@@ -1,16 +1,16 @@
 import { get } from 'lodash';
-import type { ColumnProps, ShowColumn } from '.';
+import type { ColumnProps, ShowColumn, TableData } from '.';
 
 type CellProps = {
   column: ColumnProps;
-  data: Record<string, any>;
+  data: TableData;
   index: number;
-  showColumn?: ShowColumn;
+  showColumn: ShowColumn;
 };
 
 const BodyCell: React.FC<CellProps> = ({ column, data, index, showColumn }) => {
   if (column.columnChoices) {
-    if (!showColumn) {
+    if (Object.keys(showColumn).length === 0) {
       return null;
     }
     const columnIndex: number = showColumn[column.dataIndex];

diff --git a/app/components/Table/HeadCell.tsx b/app/components/Table/HeadCell.tsx
@@ -2,7 +2,7 @@ import { Button, Flex, Icon } from '@webkom/lego-bricks';
 import cx from 'classnames';
 import { useEffect, useRef } from 'react';
 import Dropdown from 'app/components/Dropdown';
-import { TextInput, RadioButton } from 'app/components/Form';
+import { TextInput, RadioButton, CheckBox } from 'app/components/Form';
 import styles from './Table.css';
 import type { ColumnProps, Filters, IsShown, ShowColumn, Sort } from '.';
 
@@ -43,8 +43,24 @@ const HeadCell: React.FC<HeadCellProps> = ({
     });
   };
 
-  const changeFilter = (filterIndex: string, value: string) =>
-    setFilters({ ...filters, [filterIndex]: value });
+  const toggleFilter = (filterIndex: string, value: string) =>
+    setFilters((prevFilters) => {
+      const filter = prevFilters[filterIndex];
+      const updatedFilters = { ...prevFilters };
+      if (filter === undefined) {
+        updatedFilters[filterIndex] = [value];
+        return updatedFilters;
+      }
+      if (!column.filterOptions?.multiSelect) {
+        return filter[0] === value
+          ? { ...filters, [filterIndex]: undefined }
+          : { ...filters, [filterIndex]: [value] };
+      }
+      updatedFilters[filterIndex] = filter.includes(value)
+        ? filter.filter((filter) => filter !== value)
+        : [...filter, value];
+      return updatedFilters;
+    });
 
   const toggleIsShown = (filterIndex: string) =>
     setIsShown({
@@ -72,6 +88,7 @@ const HeadCell: React.FC<HeadCellProps> = ({
     title,
     sorter,
     filter,
+    filterOptions,
     search,
     filterMessage,
   } = chosenProps;
@@ -108,8 +125,7 @@ const HeadCell: React.FC<HeadCellProps> = ({
                 name="search"
                 size={16}
                 className={cx(
-                  (filters[filterIndex] && filters[filterIndex].length) ||
-                    isShown[filterIndex]
+                  (filters[filterIndex] ?? []).length || isShown[filterIndex]
                     ? styles.iconActive
                     : styles.icon
                 )}
@@ -123,7 +139,7 @@ const HeadCell: React.FC<HeadCellProps> = ({
               removeBorder
               placeholder={filterMessage}
               value={filters[filterIndex]}
-              onChange={(e) => changeFilter(filterIndex, e.target.value)}
+              onChange={(e) => toggleFilter(filterIndex, e.target.value)}
               onKeyDown={({ keyCode }) => {
                 if (keyCode === 13) {
                   toggleIsShown(filterIndex);
@@ -141,7 +157,8 @@ const HeadCell: React.FC<HeadCellProps> = ({
                 name="funnel"
                 size={16}
                 className={cx(
-                  filters[filterIndex] !== undefined || isShown[filterIndex]
+                  (filters[filterIndex] ?? []).length > 0 ||
+                    isShown[filterIndex]
                     ? styles.iconActive
                     : styles.icon
                 )}
@@ -150,22 +167,29 @@ const HeadCell: React.FC<HeadCellProps> = ({
             contentClassName={styles.checkbox}
             rootClose
           >
-            {filter.map(({ label, value }) => (
-              <div key={label}>
-                <RadioButton
-                  id={filterIndex + value}
-                  name={filterIndex}
-                  label={label}
-                  checked={value === filters[filterIndex]}
-                  onChange={() =>
-                    changeFilter(
-                      filterIndex,
-                      filters[filterIndex] === value ? undefined : value
-                    )
-                  }
-                />
-              </div>
-            ))}
+            {filter.map(({ label, value }) =>
+              filterOptions?.multiSelect ? (
+                <div
+                  key={label}
+                  onClick={() => toggleFilter(filterIndex, value)}
+                >
+                  <CheckBox
+                    label={label}
+                    checked={filters[filterIndex]?.includes(value)}
+                  />
+                </div>
+              ) : (
+                <div key={label}>
+                  <RadioButton
+                    id={filterIndex + value}
+                    name={filterIndex}
+                    label={label}
+                    checked={filters[filterIndex]?.includes(value)}
+                    onClick={() => toggleFilter(filterIndex, value)}
+                  />
+                </div>
+              )
+            )}
             <Button
               flat
               onClick={() => {
@@ -205,7 +229,6 @@ const HeadCell: React.FC<HeadCellProps> = ({
                   <RadioButton
                     id={dataIndexColumnChoices + index}
                     name={dataIndexColumnChoices}
-                    inputValue={showColumn[dataIndexColumnChoices]}
                     value={index}
                     label={title}
                     checked={showColumn[dataIndexColumnChoices] === index}

diff --git a/app/components/Table/index.tsx b/app/components/Table/index.tsx
@@ -6,16 +6,20 @@ import InfiniteScroll from 'react-infinite-scroller';
 import BodyCell from './BodyCell';
 import HeadCell from './HeadCell';
 import styles from './Table.css';
+import type { ID } from 'app/store/models';
 import type { ReactNode } from 'react';
 
 export type Sort = {
   direction?: 'asc' | 'desc';
   dataIndex?: string;
   sorter?: boolean | ((arg0: any, arg1: any) => number);
 };
-export type Filters = Record<string, any>;
-export type IsShown = Record<string, any>;
-export type ShowColumn = Record<string, any>;
+export type Filters = Record<string, string[] | undefined>;
+type QueryFilters = Record<string, string | undefined>;
+export type IsShown = Record<string, boolean>;
+export type ShowColumn = Record<string, number>;
+
+export type TableData = object & { id: ID };
 
 type CheckFilter = {
   label: string;
@@ -28,6 +32,9 @@ export type ColumnProps = {
   title?: string;
   sorter?: boolean | ((arg0: any, arg1: any) => number);
   filter?: Array<CheckFilter>;
+  filterOptions?: {
+    multiSelect?: boolean;
+  };
 
   /*
    * Map the value to to "another" value to use
@@ -44,23 +51,43 @@ export type ColumnProps = {
   centered?: boolean;
   inlineFiltering?: boolean;
   filterMessage?: string;
-  columnChoices?: Array<ColumnProps>;
+  columnChoices?: ColumnProps[];
 };
 
 type TableProps = {
   rowKey?: string;
-  columns: Array<ColumnProps>;
-  data: Array<Record<string, any>>;
+  columns: ColumnProps[];
+  data: TableData[];
   hasMore: boolean;
   loading: boolean;
-  onChange?: (filters: Record<string, any>, sort: Sort) => void;
-  onLoad?: (filters: Record<string, any>, sort: Sort) => void;
-  filters?: Record<string, any>;
+  onChange?: (queryFilters: QueryFilters, querySort: Sort) => void;
+  onLoad?: (queryFilters: QueryFilters, querySort: Sort) => void;
+  filters?: QueryFilters;
   className?: string;
 };
 
 const isVisible = ({ visible = true }: ColumnProps) => visible;
 
+const filtersToQueryFilters: (filters: Filters) => QueryFilters = (filters) => {
+  const queryFilters: QueryFilters = {};
+  Object.entries(filters).forEach(
+    ([key, filter]) =>
+      (queryFilters[key] = filter?.length ? filter?.join(',') : undefined)
+  );
+  return queryFilters;
+};
+
+const queryFiltersToFilters: (queryFilters?: QueryFilters) => Filters = (
+  queryFilters
+) => {
+  if (!queryFilters) return {};
+  const filters: Filters = {};
+  Object.entries(queryFilters).forEach(
+    ([key, queryFilter]) => (filters[key] = queryFilter?.split(','))
+  );
+  return filters;
+};
+
 const Table: React.FC<TableProps> = ({
   columns,
   data,
@@ -73,9 +100,11 @@ const Table: React.FC<TableProps> = ({
   ...props
 }) => {
   const [sort, setSort] = useState<Sort>({});
-  const [filters, setFilters] = useState<Filters>(props.filters || {});
+  const [filters, setFilters] = useState<Filters>(
+    queryFiltersToFilters(props.filters)
+  );
   const [isShown, setIsShown] = useState<IsShown>({});
-  const [showColumn, setShowColumn] = useState<ShowColumn>();
+  const [showColumn, setShowColumn] = useState<ShowColumn>({});
 
   useEffect(() => {
     const initialShowColumn = {};
@@ -90,7 +119,7 @@ const Table: React.FC<TableProps> = ({
   useEffect(() => {
     debounce(() => {
       if (onChange) {
-        onChange(filters, sort);
+        onChange(filtersToQueryFilters(filters), sort);
       }
     }, 170)();
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -111,7 +140,7 @@ const Table: React.FC<TableProps> = ({
     return sortedData;
   }, [sort, data]);
 
-  const filter = (item: Record<string, any>) => {
+  const filter: (item: TableData) => boolean = (item) => {
     if (isEmpty(filters)) {
       return true;
     }
@@ -134,20 +163,16 @@ const Table: React.FC<TableProps> = ({
         return filters[key] === get(item, key);
       }
 
-      const filter = filters[key].toLowerCase();
-
-      if (!filter.length) {
-        return true;
-      }
-
-      return filterMapping(get(item, dataIndex)).toLowerCase().includes(filter);
+      return filters[key]?.some((arrayFilter) =>
+        filterMapping(get(item, dataIndex)).toLowerCase().includes(arrayFilter)
+      );
     }).length;
     return match > 0;
   };
 
   const loadMore = () => {
     if (onLoad && !loading) {
-      onLoad(filters, sort);
+      onLoad(filtersToQueryFilters(filters), sort);
     }
   };
 

diff --git a/app/routes/admin/groups/components/GroupMembersList.tsx b/app/routes/admin/groups/components/GroupMembersList.tsx
@@ -156,6 +156,9 @@ const GroupMembersList = ({
       title: 'Rolle',
       dataIndex: 'role',
       filter: roleOptions,
+      filterOptions: {
+        multiSelect: true,
+      },
       search: false,
       inlineFiltering: false,
       filterMapping: (role: RoleType) =>