Sammy/t 131 i see a ascending descending option in (#73)

* refactor: use safe css selector

* feature: onclick update the order option

* feature: set option in the dropdown

* feature: display icon for sort options

* refactor: indent key so react does not complain of conflicting keys

* feature: align icon and text

* feature: fix size of icon to align text

* feature: create design for TopOption in dropdown

* refactor: set font weight in style

* feature: finalise design of TopOption

* refactor: rename option to sort

* refactor: remove order from the sortType

* refactor: move sort mapper in service

* test: selection of Descending in SortDropdownButton

* refactor: fix styme-component warning

* feature: add sorting by people

* refactor: set SortFields types for tables

* feature: add sort by company

* refactor: rename sortFields to singular

* refactor: rename option to SortDirection

front/src/services/people/select.test.ts

@@ -0,0 +1,12 @@
+import { PeopleSelectedSortType, reduceSortsToOrderBy } from './select';
+
+describe('reduceSortsToOrderBy', () => {
+  it('should return an array of objects with the id as key and the order as value', () => {
+    const sorts = [
+      { id: 'firstname', label: 'firstname', order: 'asc' },
+      { id: 'lastname', label: 'lastname', order: 'desc' },
+    ] satisfies PeopleSelectedSortType[];
+    const result = reduceSortsToOrderBy(sorts);
+    expect(result).toEqual([{ firstname: 'asc', lastname: 'desc' }]);
+  });
+});

front/src/services/people/select.ts

@@ -1,7 +1,38 @@
 import { QueryResult, gql, useQuery } from '@apollo/client';
 import { GraphqlQueryPerson } from '../../interfaces/person.interface';
+import { SelectedSortType } from '../../components/table/table-header/SortAndFilterBar';
 
-export type OrderBy = Record<string, 'asc' | 'desc'>;
+export type OrderByFields =
+  | keyof GraphqlQueryPerson
+  | 'fullname'
+  | 'company_name';
+
+export type OrderBy = Partial<{
+  [key in keyof GraphqlQueryPerson]:
+    | 'asc'
+    | 'desc'
+    | { [key in string]: 'asc' | 'desc' };
+}>;
+
+export type PeopleSelectedSortType = SelectedSortType<OrderByFields>;
+
+export const reduceSortsToOrderBy = (
+  sorts: Array<PeopleSelectedSortType>,
+): OrderBy[] => {
+  const mappedSorts = sorts.reduce((acc, sort) => {
+    const id = sort.id;
+    if (id === 'fullname') {
+      acc['firstname'] = sort.order;
+      acc['lastname'] = sort.order;
+    } else if (id === 'company_name') {
+      acc['company'] = { company_name: sort.order };
+    } else {
+      acc[id] = sort.order;
+    }
+    return acc;
+  }, {} as OrderBy);
+  return [mappedSorts];
+};
 
 export const GET_PEOPLE = gql`
   query GetPeople($orderBy: [people_order_by!]) {