4002 - Add draft multi select to Users table

src/client/components/TablePaginated/Filters/Filters.tsx

@@ -4,15 +4,17 @@ import React from 'react'
 import { TablePaginatedFilterType } from 'meta/tablePaginated'
 
 import Icon from 'client/components/Icon'
+import MultiSelect from 'client/components/TablePaginated/Filters/MultiSelect/MultiSelect'
 import Text from 'client/components/TablePaginated/Filters/Text/Text'
 import { TablePaginatedFilter } from 'client/components/TablePaginated/types'
 
 const componentsByFilterType: Record<
   TablePaginatedFilterType,
   React.FC<TablePaginatedFilter<TablePaginatedFilterType> & { path: string }>
 > = {
-  [TablePaginatedFilterType.TEXT]: Text,
+  [TablePaginatedFilterType.MULTI_SELECT]: MultiSelect,
   [TablePaginatedFilterType.SWITCH]: () => null,
+  [TablePaginatedFilterType.TEXT]: Text,
 }
 
 type Props = {

src/client/components/TablePaginated/Filters/MultiSelect/MultiSelect.tsx

@@ -0,0 +1,35 @@
+import React from 'react'
+
+import { TablePaginatedFilterType } from 'meta/tablePaginated'
+
+import { useAppDispatch } from 'client/store'
+import { TablePaginatedActions } from 'client/store/ui/tablePaginated'
+import { useTablePaginatedFilterValue } from 'client/store/ui/tablePaginated/hooks'
+import Select from 'client/components/Inputs/Select'
+import { TablePaginatedFilter } from 'client/components/TablePaginated/types'
+
+type Props = TablePaginatedFilter<TablePaginatedFilterType.MULTI_SELECT> & {
+  path: string
+}
+
+const MultiSelect = (props: Props) => {
+  const { fieldName, label, path, options } = props
+
+  const dispatch = useAppDispatch()
+
+  const filterValue = useTablePaginatedFilterValue<string>(path, fieldName)
+
+  const handleChange = (values: Array<string>) => {
+    dispatch(
+      TablePaginatedActions.setFilterValue({
+        fieldName,
+        path,
+        value: values,
+      })
+    )
+  }
+
+  return <Select isMulti onChange={handleChange} options={options} placeholder={label} value={filterValue} />
+}
+
+export default MultiSelect

src/client/pages/Admin/UserManagement/UserManagement.tsx

@@ -1,7 +1,6 @@
 import React from 'react'
 
 import { ApiEndPoint } from 'meta/api/endpoint'
-import { RoleName } from 'meta/user'
 
 import TablePaginated from 'client/components/TablePaginated'
 import UsersCount from 'client/pages/Admin/UserManagement/UsersCount'
@@ -10,10 +9,11 @@ import { useColumns } from './hooks/useColumns'
 import { useFilters } from './hooks/useFilters'
 
 const UserManagement: React.FC = () => {
-  const columns = useColumns()
+  const path = ApiEndPoint.Admin.users()
+  const columns = useColumns({ path })
   const filters = useFilters()
 
-  const gridTemplateColumns = `repeat(${Object.values(RoleName).length + 1}, 1fr)`
+  const gridTemplateColumns = `repeat(${columns.length}, 1fr)`
 
   return (
     <TablePaginated
@@ -23,7 +23,7 @@ const UserManagement: React.FC = () => {
       filters={filters}
       gridTemplateColumns={gridTemplateColumns}
       limit={20}
-      path={ApiEndPoint.Admin.users()}
+      path={path}
     />
   )
 }

src/client/pages/Admin/UserManagement/hooks/useColumns.tsx

@@ -1,21 +1,38 @@
 import React, { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 
+import { Objects } from 'utils/objects'
+
 import { RoleName, User, Users } from 'meta/user'
 
+import { useTablePaginatedFilterValue } from 'client/store/ui/tablePaginated/hooks'
 import { Column } from 'client/components/TablePaginated'
 import NameField from 'client/pages/Admin/UserManagement/NameField'
 import RoleField from 'client/pages/Admin/UserManagement/RoleField'
 
-export const useColumns = (): Array<Column<User>> => {
+type Props = {
+  path: string
+}
+
+type Returned = Array<Column<User>>
+
+export const useColumns = (props: Props): Returned => {
+  const { path } = props
   const { t } = useTranslation()
 
-  return useMemo<Array<Column<User>>>(() => {
-    const roleColumns: Array<Column<User>> = Object.values(RoleName).map((roleName) => ({
-      component: ({ datum }) => <RoleField roleName={roleName} user={datum} />,
-      header: t(Users.getI18nRoleLabelKey(roleName)),
-      key: roleName,
-    }))
+  const selectedRoles = useTablePaginatedFilterValue<Array<string>>(path, 'roles')
+
+  return useMemo<Returned>(() => {
+    const roleColumns = Object.values(RoleName).reduce<Returned>((acc, roleName) => {
+      if (Objects.isEmpty(selectedRoles) || selectedRoles.includes(roleName)) {
+        acc.push({
+          component: ({ datum }) => <RoleField roleName={roleName} user={datum} />,
+          header: t(Users.getI18nRoleLabelKey(roleName)),
+          key: roleName,
+        })
+      }
+      return acc
+    }, [])
 
     return [
       {
@@ -26,5 +43,5 @@ export const useColumns = (): Array<Column<User>> => {
       },
       ...roleColumns,
     ]
-  }, [t])
+  }, [selectedRoles, t])
 }

src/client/pages/Admin/UserManagement/hooks/useFilters.tsx

@@ -2,17 +2,24 @@ import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import { TablePaginatedFilterType } from 'meta/tablePaginated'
+import { RoleName, Users } from 'meta/user'
 
 import { TablePaginatedFilter } from 'client/components/TablePaginated/types'
 
-type Returned = Array<
-  TablePaginatedFilter<TablePaginatedFilterType.TEXT> | TablePaginatedFilter<TablePaginatedFilterType.SWITCH>
->
+type Returned = Array<TablePaginatedFilter<TablePaginatedFilterType>>
 
 export const useFilters = (): Returned => {
   const { t } = useTranslation()
 
   return useMemo<Returned>(() => {
+    const roleOptions: Array<{
+      label: string
+      value: RoleName
+    }> = Object.values(RoleName).map((roleName) => ({
+      label: t(Users.getI18nRoleLabelKey(roleName)),
+      value: roleName,
+    }))
+
     return [
       {
         fieldName: 'fullName',
@@ -26,6 +33,12 @@ export const useFilters = (): Returned => {
         label: '',
         type: TablePaginatedFilterType.SWITCH,
       },
+      {
+        fieldName: 'roles',
+        label: t('common.role'),
+        options: roleOptions,
+        type: TablePaginatedFilterType.MULTI_SELECT,
+      },
     ]
   }, [t])
 }