4756 - AreaSelector: Allow sorting

src/client/components/PageLayout/Toolbar/AreaSelect/AreaSelect.scss

@@ -31,7 +31,7 @@
   &.withRoles {
     div.select__menu.bottom {
       @include min-width($mobile-landscape) {
-        min-width: 550px;
+        min-width: 570px;
       }
     }
     &.expanded {

src/client/components/PageLayout/Toolbar/AreaSelect/Group/Group.tsx

@@ -8,12 +8,16 @@ import { UserRoles } from 'meta/user/roles'
 import { Users } from 'meta/user/users'
 
 import { useAppDispatch } from 'client/store/hooks'
+import { useCycle } from 'client/store/meta/hooks/cycles'
 import { AreaSelectorActions } from 'client/store/ui/areaSelector/actions'
 import { useIsAreaSelectorExpanded } from 'client/store/ui/areaSelector/hooks/areaSelector'
 import { useUser } from 'client/store/user/hooks/user'
+import { useCountryRouteParams } from 'client/hooks/routeParams'
 import Button from 'client/components/Buttons/Button'
 import { Option } from 'client/components/Inputs/Select'
 import CountryListDownload from 'client/components/PageLayout/Toolbar/AreaSelect/Group/CountryListDownload'
+import { useHeaders } from 'client/components/PageLayout/Toolbar/AreaSelect/Group/hooks/useHeaders'
+import SortableHeader from 'client/components/PageLayout/Toolbar/AreaSelect/Group/SortableHeader'
 import { OptionsGroupArea } from 'client/components/PageLayout/Toolbar/AreaSelect/types'
 
 type Props = GroupProps<Option, boolean, OptionsGroupArea>
@@ -22,11 +26,18 @@ const Group: React.FC<Props> = (props) => {
   const { data } = props
 
   const { t } = useTranslation()
-  const user = useUser()
   const dispatch = useAppDispatch()
+  const { countryIso } = useCountryRouteParams()
+  const cycle = useCycle()
+  const user = useUser()
   const expanded = useIsAreaSelectorExpanded()
+  const headers = useHeaders()
 
   const isAdmin = Users.isAdministrator(user)
+  const isRegionalFocalPoint = Users.isRegionalFocalPoint(user, countryIso, cycle)
+  const isReviewer = Users.isReviewer(user, countryIso, cycle)
+  // only allow sorting when we have more than one country and user has specific role
+  const sortable = data.options.length > 1 && (isAdmin || isRegionalFocalPoint || isReviewer)
 
   return (
     <>
@@ -44,15 +55,18 @@ const Group: React.FC<Props> = (props) => {
           <div>{t(Users.getI18nRoleLabelKey(data.roleName))}</div>
           <div>{t('common.status')}</div>
 
-          {expanded && (
-            <>
-              <div>{t('audit.edited')}</div>
-              <div>{t('common.submittedToReview')}</div>
-              <div>{t('common.submittedForApproval')}</div>
-              <div>{t('common.accepted')}</div>
-            </>
+          {headers.map((header) =>
+            sortable ? (
+              <SortableHeader
+                key={header.sortBy}
+                label={header.label}
+                roleName={data.roleName}
+                sortByProperty={header.sortBy}
+              />
+            ) : (
+              <div key={header.sortBy}>{header.label}</div>
+            )
           )}
-          {!expanded && <div>{t('common.updated')}</div>}
 
           {isAdmin && (
             <Button

src/client/components/PageLayout/Toolbar/AreaSelect/Group/SortableHeader/SortableHeader.scss

@@ -0,0 +1,21 @@
+@use 'src/client/style/partials' as *;
+
+.area-select__group-heading-sortable {
+  all: unset; // reset all button defaults to inherit or initial
+  align-items: start;
+  cursor: pointer;
+  display: flex;
+
+  svg {
+    color: $text-link;
+    margin-right: $spacing-xxxxs;
+  }
+
+  &:hover {
+    color: $text-body;
+  }
+
+  &.active svg {
+    color: $ui-accent;
+  }
+}

src/client/components/PageLayout/Toolbar/AreaSelect/Group/SortableHeader/SortableHeader.tsx

@@ -0,0 +1,42 @@
+import './SortableHeader.scss'
+import React, { useCallback } from 'react'
+import classNames from 'classnames'
+
+import { RoleName } from 'meta/user/role/name'
+
+import { useAppDispatch } from 'client/store/hooks'
+import { AreaSelectorActions } from 'client/store/ui/areaSelector/actions'
+import { useAreaSelectorFilters } from 'client/store/ui/areaSelector/hooks/areaSelector'
+import { AreaSelectorSortBy, AreaSelectorSortDirection } from 'client/store/ui/areaSelector/state'
+import Icon from 'client/components/Icon'
+
+type Props = {
+  label: string
+  roleName: RoleName
+  sortByProperty: AreaSelectorSortBy
+}
+
+const SortableHeader: React.FC<Props> = (props) => {
+  const { label, roleName, sortByProperty } = props
+
+  const dispatch = useAppDispatch()
+  const { orderBy } = useAreaSelectorFilters()
+
+  const current = orderBy[roleName]
+  const active = current?.sortBy === sortByProperty
+  const iconName =
+    active && current?.sortDirection === AreaSelectorSortDirection.asc ? 'sort-amount-asc' : 'sort-amount-desc'
+
+  const onClick = useCallback(() => {
+    dispatch(AreaSelectorActions.setSortBy({ roleName, sortBy: sortByProperty }))
+  }, [dispatch, roleName, sortByProperty])
+
+  return (
+    <button className={classNames('area-select__group-heading-sortable', { active })} onClick={onClick} type="button">
+      <Icon name={iconName} />
+      {label}
+    </button>
+  )
+}
+
+export default SortableHeader

src/client/components/PageLayout/Toolbar/AreaSelect/Group/SortableHeader/index.ts

@@ -0,0 +1 @@
+export { default } from './SortableHeader'

src/client/components/PageLayout/Toolbar/AreaSelect/Group/hooks/useHeaders.ts

@@ -0,0 +1,24 @@
+import { useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+
+import { useIsAreaSelectorExpanded } from 'client/store/ui/areaSelector/hooks/areaSelector'
+import { AreaSelectorSortBy } from 'client/store/ui/areaSelector/state'
+
+export type HeaderConfig = { label: string; sortBy: AreaSelectorSortBy }
+
+export const useHeaders = (): Array<HeaderConfig> => {
+  const { t } = useTranslation()
+  const expanded = useIsAreaSelectorExpanded()
+
+  return useMemo<Array<HeaderConfig>>(() => {
+    if (expanded) {
+      return [
+        { label: t('audit.edited'), sortBy: 'lastEdit' },
+        { label: t('common.submittedToReview'), sortBy: 'lastInReview' },
+        { label: t('common.submittedForApproval'), sortBy: 'lastInApproval' },
+        { label: t('common.accepted'), sortBy: 'lastInAccepted' },
+      ]
+    }
+    return [{ label: t('common.updated'), sortBy: 'lastUpdate' }]
+  }, [expanded, t])
+}

src/client/components/PageLayout/Toolbar/AreaSelect/hooks/useOptionGroupCountries.ts

@@ -8,10 +8,13 @@ import { RoleName } from 'meta/user/role/name'
 import { UserRole } from 'meta/user/role/role'
 import { UserRoles } from 'meta/user/roles'
 import { Users } from 'meta/user/users'
+import { Dates } from 'utils/dates'
 import { Objects } from 'utils/objects'
 
 import { useCountriesRecord } from 'client/store/area/hooks/countries'
 import { useCycle } from 'client/store/meta/hooks/cycles'
+import { useAreaSelectorFilters } from 'client/store/ui/areaSelector/hooks/areaSelector'
+import { AreaSelectorSortDirection } from 'client/store/ui/areaSelector/state'
 import { useUser } from 'client/store/user/hooks/user'
 import { useLanguage } from 'client/hooks/language'
 import { OptionsGroup } from 'client/components/Inputs/Select'
@@ -29,6 +32,7 @@ export const useOptionGroupCountries = (props: Props): ReadonlyArray<OptionsGrou
   const user = useUser()
   const countriesRecord = useCountriesRecord()
   const lang = useLanguage()
+  const { orderBy } = useAreaSelectorFilters()
 
   return useMemo<ReadonlyArray<OptionsGroup>>(() => {
     if (Objects.isEmpty(countriesRecord)) {
@@ -66,8 +70,17 @@ export const useOptionGroupCountries = (props: Props): ReadonlyArray<OptionsGrou
 
     // 3. create the array of OptionsGroup
     return Object.entries(rolesGrouped).map<OptionsGroupArea>(([roleName, roles]) => {
+      const roleOrderBy = orderBy[roleName]
+
       const options = roles
         .sort((r1, r2) => {
+          if (roleOrderBy?.sortBy) {
+            const a = countriesRecord[r1.countryIso][roleOrderBy.sortBy]
+            const b = countriesRecord[r2.countryIso][roleOrderBy.sortBy]
+            const direction = roleOrderBy.sortDirection === AreaSelectorSortDirection.asc ? 1 : -1
+            return Dates.isAfter(a, b) ? direction : -direction
+          }
+
           const area1 = countriesRecord[r1.countryIso]
           const area2 = countriesRecord[r2.countryIso]
           return Areas.getCompareListName(area1, area2, lang)
@@ -82,5 +95,5 @@ export const useOptionGroupCountries = (props: Props): ReadonlyArray<OptionsGrou
       order += 1
       return group
     })
-  }, [countriesRecord, cycle, lang, regionGroupsLength, t, user])
+  }, [countriesRecord, cycle, lang, orderBy, regionGroupsLength, t, user])
 }

src/client/store/ui/areaSelector/hooks/areaSelector.ts

@@ -1,4 +1,7 @@
 import { useAppSelector } from 'client/store/hooks'
 import { AreaSelectorSelectors } from 'client/store/ui/areaSelector/selectors'
+import { AreaSelectorFilters } from 'client/store/ui/areaSelector/state'
 
 export const useIsAreaSelectorExpanded = (): boolean => useAppSelector(AreaSelectorSelectors.isExpanded)
+
+export const useAreaSelectorFilters = (): AreaSelectorFilters => useAppSelector(AreaSelectorSelectors.getFilters)

src/client/store/ui/areaSelector/selectors/index.ts

@@ -8,8 +8,10 @@ const _getState = (state: RootState) => state.ui[AreaSelectorSlice.name]
 
 const getMode = createSelector(_getState, (areaSelector) => areaSelector.mode)
 const isExpanded = createSelector(getMode, (mode) => mode === AreaSelectorMode.expanded)
+const getFilters = createSelector(_getState, (areaSelector) => areaSelector.filters)
 
 export const AreaSelectorSelectors = {
+  getFilters,
   getMode,
   isExpanded,
 }

src/client/store/ui/areaSelector/slice/index.ts

@@ -1,15 +1,37 @@
-import { createSlice } from '@reduxjs/toolkit'
+import { createSlice, PayloadAction } from '@reduxjs/toolkit'
 
-import { AreaSelectorMode, initialState } from 'client/store/ui/areaSelector/state'
+import {
+  AreaSelectorMode,
+  AreaSelectorSortBy,
+  AreaSelectorSortDirection,
+  initialState,
+} from 'client/store/ui/areaSelector/state'
 
 import { AreaSelectorSliceName } from './name'
 
+type SetSortByPayload = {
+  roleName: string
+  sortBy: AreaSelectorSortBy
+}
+
 export const AreaSelectorSlice = createSlice({
   name: AreaSelectorSliceName,
   initialState,
   reducers: {
     toggleMode: (state) => {
       state.mode = state.mode === AreaSelectorMode.collapsed ? AreaSelectorMode.expanded : AreaSelectorMode.collapsed
     },
+    setSortBy: (state, action: PayloadAction<SetSortByPayload>) => {
+      const { roleName, sortBy: property } = action.payload
+      const current = state.filters.orderBy[roleName]
+
+      if (current?.sortBy !== property) {
+        state.filters.orderBy[roleName] = { sortBy: property, sortDirection: AreaSelectorSortDirection.desc }
+      } else if (current.sortDirection === AreaSelectorSortDirection.desc) {
+        state.filters.orderBy[roleName] = { sortBy: property, sortDirection: AreaSelectorSortDirection.asc }
+      } else {
+        delete state.filters.orderBy[roleName]
+      }
+    },
   },
 })

src/client/store/ui/areaSelector/state.ts

@@ -3,10 +3,30 @@ export enum AreaSelectorMode {
   expanded = 'expanded',
 }
 
+export type AreaSelectorSortBy = 'lastEdit' | 'lastInReview' | 'lastInApproval' | 'lastInAccepted' | 'lastUpdate' | null
+
+export enum AreaSelectorSortDirection {
+  asc = 'asc',
+  desc = 'desc',
+}
+
+export type AreaSelectorOrderBy = {
+  sortBy: AreaSelectorSortBy
+  sortDirection: AreaSelectorSortDirection
+}
+
+export type AreaSelectorFilters = {
+  orderBy: Record<string, AreaSelectorOrderBy | undefined>
+}
+
 export type AreaSelectorState = {
   mode: AreaSelectorMode
+  filters: AreaSelectorFilters
 }
 
 export const initialState: AreaSelectorState = {
   mode: AreaSelectorMode.collapsed,
+  filters: {
+    orderBy: {},
+  },
 }