4002 - Tablepaginated filter by user role/admin users role - Integration

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 = (value: Array<string>) => {
+    dispatch(
+      TablePaginatedActions.setFilterValue({
+        fieldName,
+        path,
+        value,
+      })
+    )
+  }
+
+  return <Select isMulti onChange={handleChange} options={options} placeholder={label} value={filterValue} />
+}
+
+export default MultiSelect

src/client/components/TablePaginated/types.ts

@@ -31,18 +31,31 @@ export type TablePaginatedCounter = {
 export type TablePaginatedEmptyListComponent = React.FC
 
 type TablePaginatedFilterTypeMap = {
+  [TablePaginatedFilterType.MULTI_SELECT]: Array<string>
   [TablePaginatedFilterType.SWITCH]: boolean
   [TablePaginatedFilterType.TEXT]: string
 }
 
-export type TablePaginatedFilter<FilterType extends TablePaginatedFilterType> = {
+type BaseTablePaginatedFilter<FilterType extends TablePaginatedFilterType> = {
   defaultValue?: TablePaginatedFilterTypeMap[FilterType]
   fieldName: string
   hidden?: boolean
   label: string
   type: FilterType
 }
 
+type MultiSelectItem = {
+  label: string
+  value: string
+}
+
+type MultiSelectFilter = BaseTablePaginatedFilter<TablePaginatedFilterType.MULTI_SELECT> & {
+  options: Array<MultiSelectItem>
+}
+
+export type TablePaginatedFilter<FilterType extends TablePaginatedFilterType> =
+  FilterType extends TablePaginatedFilterType.MULTI_SELECT ? MultiSelectFilter : BaseTablePaginatedFilter<FilterType>
+
 export type TablePaginatedSkeleton = {
   baseColor: string
   highlightColor: string

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'
@@ -13,7 +12,7 @@ const UserManagement: React.FC = () => {
   const columns = useColumns()
   const filters = useFilters()
 
-  const gridTemplateColumns = `repeat(${Object.values(RoleName).length + 1}, 1fr)`
+  const gridTemplateColumns = `repeat(${columns.length}, 1fr)`
 
   return (
     <TablePaginated

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

@@ -7,11 +7,13 @@ 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 Returned = Array<Column<User>>
+
+export const useColumns = (): Returned => {
   const { t } = useTranslation()
 
-  return useMemo<Array<Column<User>>>(() => {
-    const roleColumns: Array<Column<User>> = Object.values(RoleName).map((roleName) => ({
+  return useMemo<Returned>(() => {
+    const roleColumns: Returned = Object.values(RoleName).map((roleName) => ({
       component: ({ datum }) => <RoleField roleName={roleName} user={datum} />,
       header: t(Users.getI18nRoleLabelKey(roleName)),
       key: roleName,

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])
 }

src/meta/tablePaginated/tablePaginated.ts

@@ -16,8 +16,9 @@ export type TablePaginatedCount = {
 }
 
 export enum TablePaginatedFilterType {
-  TEXT = 'text',
+  MULTI_SELECT = 'multi_select',
   SWITCH = 'switch',
+  TEXT = 'text',
 }
 
 export type TablePaginatedFilterValues = boolean | string | Array<string>