feat: allow sorting participants

Author: stampaaaron

apps/backend/src/research/participants/participant.dto.ts

@@ -23,3 +23,8 @@ export class ParticipantResponseDto extends ParticipantBaseDto {
 
 export class ParticipantCreationDto extends ParticipantBaseDto {}
 export class ParticipantMutationDto extends PartialType(ParticipantBaseDto) {}
+
+export enum ParticipantSortableField {
+  id = "id",
+  birthday = "birthday",
+}

apps/backend/src/research/participants/participants.controller.ts

@@ -1,15 +1,16 @@
-import { Body, Controller, Delete, Get, Param, Patch, Post } from "@nestjs/common";
+import { Body, Controller, Delete, Get, Param, Patch, Post, Query } from "@nestjs/common";
 import { ParticipantsService } from "./participants.service";
 import {
   ApiBody,
   ApiExtraModels,
   ApiNotFoundResponse,
   ApiOperation,
+  ApiQuery,
   ApiTags,
   ApiUnprocessableEntityResponse,
   getSchemaPath,
 } from "@nestjs/swagger";
-import { ParticipantCreationDto, ParticipantMutationDto, ParticipantResponseDto } from "./participant.dto";
+import { ParticipantCreationDto, ParticipantMutationDto, ParticipantResponseDto, ParticipantSortableField } from "./participant.dto";
 import { ErrorResponseDto } from "../../common/dto/error.dto";
 import { Roles } from "../../system/users/roles.decorator";
 import { UserRole } from "../../system/users/user.entity";
@@ -18,6 +19,7 @@ import { OneOrMany } from "../../types";
 import { EntriesService } from "../entries/entries.service";
 import { EntryTemplateDto } from "../entries/entry.dto";
 import { Serialize } from "../../common/decorators/serialize";
+import { SortOrder } from "../../common/dto/sort.dto";
 
 @ApiTags("Participants")
 @ApiExtraModels(ParticipantCreationDto)
@@ -59,9 +61,17 @@ export class ParticipantsController {
 
   @Get()
   @ApiOperation({ summary: "Get all participants" })
+  @ApiQuery({
+    name: "sortBy",
+    enumName: "ParticipantSortableField",
+    enum: ParticipantSortableField,
+    required: false,
+    description: "Field to sort by",
+  })
+  @ApiQuery({ name: "sortOrder", enumName: "SortOrder", enum: SortOrder, required: false, description: "Sort order" })
   @Serialize(ParticipantResponseDto)
-  index(): Promise<ParticipantResponseDto[]> {
-    return this.participantService.findAll();
+  index(@Query("sortBy") sortBy?: ParticipantSortableField, @Query("sortOrder") sortOrder?: SortOrder): Promise<ParticipantResponseDto[]> {
+    return this.participantService.findAll({ sortBy, sortOrder });
   }
 
   @Get(":id")

apps/backend/src/research/participants/participants.service.ts

@@ -1,9 +1,10 @@
 import { InjectRepository } from "@mikro-orm/nestjs";
 import { Injectable, UnprocessableEntityException } from "@nestjs/common";
-import { EntityManager, EntityRepository, FilterQuery, UniqueConstraintViolationException } from "@mikro-orm/core";
+import { EntityManager, EntityRepository, FilterQuery, QueryOrderMap, UniqueConstraintViolationException } from "@mikro-orm/core";
 import { ParticipantCreationDto, ParticipantMutationDto } from "./participant.dto";
 import { Participant } from "./participant.entity";
 import { OneOrMany } from "../../types";
+import { SortOrder } from "../../common/dto/sort.dto";
 
 @Injectable()
 export class ParticipantsService {
@@ -34,8 +35,10 @@ export class ParticipantsService {
     return participants.map((p) => p.toObject());
   }
 
-  async findAll() {
-    return (await this.participantRepository.findAll()).map((participant) => participant.toObject());
+  async findAll({ sortBy, sortOrder }: { sortBy?: keyof QueryOrderMap<Participant>; sortOrder?: SortOrder }) {
+    return (await this.participantRepository.findAll({ orderBy: sortBy && { [sortBy]: sortOrder } })).map((participant) =>
+      participant.toObject()
+    );
   }
 
   async findOne(id: number) {

apps/frontend/src/api.gen.ts

@@ -687,6 +687,10 @@ export interface components {
              */
             birthday?: string;
         };
+        /** @enum {string} */
+        ParticipantSortableField: "id" | "birthday";
+        /** @enum {string} */
+        SortOrder: "ASC" | "DESC";
         EntryLanguageResponseDto: {
             /**
              * @description The ratio in percent of the entry language
@@ -838,8 +842,6 @@ export interface components {
         };
         /** @enum {string} */
         QuestionnaireSortableField: "createdAt" | "completedAt";
-        /** @enum {string} */
-        SortOrder: "ASC" | "DESC";
         QuestionnaireDetailResponseDto: {
             /**
              * Format: date-time
@@ -1575,7 +1577,12 @@ export interface operations {
     };
     ParticipantsController_index: {
         parameters: {
-            query?: never;
+            query?: {
+                /** @description Field to sort by */
+                sortBy?: components["schemas"]["ParticipantSortableField"];
+                /** @description Sort order */
+                sortOrder?: components["schemas"]["SortOrder"];
+            };
             header?: never;
             path?: never;
             cookie?: never;
@@ -2221,5 +2228,6 @@ export const userResponseDtoRoleValues: ReadonlyArray<components["schemas"]["Use
 export const userMutationDtoRoleValues: ReadonlyArray<components["schemas"]["UserMutationDto"]["role"]> = ["ASSISTANT", "ADMIN"];
 export const sessionResponseDtoRoleValues: ReadonlyArray<components["schemas"]["SessionResponseDto"]["role"]> = ["ASSISTANT", "ADMIN"];
 export const exportTypeValues: ReadonlyArray<components["schemas"]["ExportType"]> = ["csv", "sql"];
-export const questionnaireSortableFieldValues: ReadonlyArray<components["schemas"]["QuestionnaireSortableField"]> = ["createdAt", "completedAt"];
+export const participantSortableFieldValues: ReadonlyArray<components["schemas"]["ParticipantSortableField"]> = ["id", "birthday"];
 export const sortOrderValues: ReadonlyArray<components["schemas"]["SortOrder"]> = ["ASC", "DESC"];
+export const questionnaireSortableFieldValues: ReadonlyArray<components["schemas"]["QuestionnaireSortableField"]> = ["createdAt", "completedAt"];

apps/frontend/src/routes/_auth/administration/participants/index.tsx

@@ -1,15 +1,21 @@
 import { createFileRoute, Link } from "@tanstack/react-router";
 import { $api } from "../../../../stores/api";
-import { Button, Table } from "@quassel/ui";
+import { Button, Group, Table } from "@quassel/ui";
 import { useSuspenseQuery } from "@tanstack/react-query";
 import { $session } from "../../../../stores/session";
 import { useStore } from "@nanostores/react";
 import { format } from "../../../../stores/i18n";
+import { useSort } from "../../../../hooks/useSort";
+import { paths } from "../../../../api.gen";
 
 function AdministrationParticipantsIndex() {
   const { time } = useStore(format);
   const sessionStore = useStore($session);
-  const participants = useSuspenseQuery($api.queryOptions("get", "/participants"));
+
+  const search = Route.useSearch();
+  const { ToggleLink } = useSort(Route);
+
+  const participants = useSuspenseQuery($api.queryOptions("get", "/participants", { params: { query: search } }));
   const deleteParticipantMutation = $api.useMutation("delete", "/participants/{id}", {
     onSuccess: () => participants.refetch(),
   });
@@ -18,8 +24,18 @@ function AdministrationParticipantsIndex() {
     <Table>
       <Table.Thead>
         <Table.Tr>
-          <Table.Th>Id</Table.Th>
-          <Table.Th>Birthday</Table.Th>
+          <Table.Th>
+            <Group>
+              Id
+              <ToggleLink sortKey="id" />
+            </Group>
+          </Table.Th>
+          <Table.Th>
+            <Group>
+              Birthday
+              <ToggleLink sortKey="birthday" />
+            </Group>
+          </Table.Th>
           <Table.Th>Actions</Table.Th>
         </Table.Tr>
       </Table.Thead>
@@ -52,6 +68,8 @@ function AdministrationParticipantsIndex() {
   );
 }
 
+type SearchParams = NonNullable<paths["/participants"]["get"]["parameters"]["query"]>;
+
 export const Route = createFileRoute("/_auth/administration/participants/")({
   beforeLoad: () => ({
     actions: [
@@ -65,4 +83,5 @@ export const Route = createFileRoute("/_auth/administration/participants/")({
   }),
   loader: ({ context: { queryClient } }) => queryClient.ensureQueryData($api.queryOptions("get", "/participants")),
   component: () => <AdministrationParticipantsIndex />,
+  validateSearch: (search) => search as SearchParams,
 });