feat: allow adding custom languages per participant

Author: stampaaaron

apps/backend/src/defaults/languages/language.dto.ts

@@ -24,5 +24,7 @@ export class LanguageDto {
   entryLanguages: number[];
 }
 export class LanguageResponseDto extends LanguageDto {}
-export class LanguageCreationDto extends OmitType(LanguageDto, ["id", "entryLanguages"]) {}
+export class LanguageCreationDto extends OmitType(LanguageDto, ["id", "entryLanguages", "participant"]) {
+  participant?: number;
+}
 export class LanguageMutationDto extends PartialType(LanguageCreationDto) {}

apps/backend/src/defaults/languages/languages.controller.ts

@@ -1,5 +1,5 @@
-import { Body, Controller, Delete, Get, Param, Patch, Post } from "@nestjs/common";
-import { ApiOperation, ApiTags, ApiUnprocessableEntityResponse } from "@nestjs/swagger";
+import { Body, Controller, Delete, Get, Param, Patch, Post, Query } from "@nestjs/common";
+import { ApiOperation, ApiQuery, ApiTags, ApiUnprocessableEntityResponse } from "@nestjs/swagger";
 import { LanguagesService } from "./languages.service";
 import { ErrorResponseDto } from "../../common/dto/error.dto";
 import { Roles } from "../../system/users/roles.decorator";
@@ -19,9 +19,10 @@ export class LanguagesController {
   }
 
   @Get()
+  @ApiQuery({ name: "participantId", required: false, type: Number })
   @ApiOperation({ summary: "Get all languages" })
-  index(): Promise<LanguageResponseDto[]> {
-    return this.languagesService.findAll();
+  index(@Query("participantId") participantId?: number): Promise<LanguageResponseDto[]> {
+    return this.languagesService.findAll(participantId);
   }
 
   @Get(":id")

apps/backend/src/defaults/languages/languages.service.ts

@@ -14,7 +14,7 @@ export class LanguagesService {
 
   async create(languageCreationDto: LanguageCreationDto) {
     const language = new Language();
-    language.assign(languageCreationDto);
+    language.assign(languageCreationDto, { em: this.em });
 
     try {
       await this.em.persist(language).flush();
@@ -28,8 +28,12 @@ export class LanguagesService {
     return language.toObject();
   }
 
-  async findAll() {
-    return (await this.languageRepository.findAll()).map((language) => language.toObject());
+  async findAll(participantId?: number) {
+    return (
+      await this.languageRepository.findAll({
+        where: participantId ? { $or: [{ participant: null }, { participant: participantId }] } : { participant: null },
+      })
+    ).map((language) => language.toObject());
   }
 
   async findOne(id: number) {

apps/frontend/src/api.gen.ts

@@ -514,7 +514,7 @@ export interface components {
              * @example de-DE
              */
             ietfBcp47?: string;
-            participant?: components["schemas"]["ParticipantDto"];
+            participant?: number;
         };
         LanguageResponseDto: {
             /**
@@ -546,7 +546,7 @@ export interface components {
              * @example de-DE
              */
             ietfBcp47?: string;
-            participant?: components["schemas"]["ParticipantDto"];
+            participant?: number;
         };
         ParticipantCreationDto: {
             /**
@@ -1424,7 +1424,9 @@ export interface operations {
     };
     LanguagesController_index: {
         parameters: {
-            query?: never;
+            query?: {
+                participantId?: number;
+            };
             header?: never;
             path?: never;
             cookie?: never;

apps/frontend/src/components/EntitySelect.tsx

@@ -67,7 +67,7 @@ export function EntitySelect<T extends { id: number }>({ value, onChange, data,
         if (value === customValueKey) {
           id = await onAddNew!(searchValue);
         } else {
-          id = parseInt(value);
+          id = +value;
         }
         onChange?.(id);
         combobox.closeDropdown();

apps/frontend/src/components/LanguageSelect.tsx

@@ -1,10 +1,10 @@
-import { $api } from "../stores/api";
+import { components } from "../api.gen";
 import { EntitySelect, EntitySelectProps } from "./EntitySelect";
 
-type LanguageSelectProps = EntitySelectProps;
+type LanguageSelectProps = EntitySelectProps & {
+  data: components["schemas"]["LanguageDto"][];
+};
 
-export function LanguageSelect({ value, onChange, ...rest }: LanguageSelectProps) {
-  const { data } = $api.useQuery("get", "/languages");
-
-  return <EntitySelect value={value} onChange={onChange} {...rest} data={data} inputKey="name" />;
+export function LanguageSelect({ value, onChange, data, onAddNew, ...rest }: LanguageSelectProps) {
+  return <EntitySelect value={value} onChange={onChange} onAddNew={onAddNew} {...rest} data={data} inputKey="name" />;
 }

apps/frontend/src/components/questionnaire/calendar/EntryForm.tsx

@@ -32,12 +32,14 @@ type EntityFormProps = {
   onSave: (entity: EntryFormValues) => void;
   onDelete?: () => void;
   onAddCarer: (value: string) => Promise<number>;
+  onAddLanguage: (value: string) => Promise<number>;
   entry?: Partial<EntryFormValues>;
   carers: components["schemas"]["CarerDto"][];
+  languages: components["schemas"]["LanguageDto"][];
   actionLabel: string;
 };
 
-export function EntityForm({ onSave, onDelete, onAddCarer, actionLabel, entry, carers }: EntityFormProps) {
+export function EntityForm({ onSave, onDelete, onAddCarer, onAddLanguage, actionLabel, entry, carers, languages }: EntityFormProps) {
   const t = useStore(messages);
   const f = useForm<EntryFormValues>({
     initialValues: {
@@ -98,7 +100,13 @@ export function EntityForm({ onSave, onDelete, onAddCarer, actionLabel, entry, c
           // TODO: make key either languageId or name of new language entry
           <Group key={`entry-${index}`} justify="stretch">
             <NumberInput {...f.getInputProps(`entryLanguages.${index}.ratio`)} max={100} min={1} w={80} rightSection="%" />
-            <LanguageSelect {...f.getInputProps(`entryLanguages.${index}.language`)} flex={1} placeholder={t.labelLanguage} />
+            <LanguageSelect
+              data={languages}
+              onAddNew={onAddLanguage}
+              {...f.getInputProps(`entryLanguages.${index}.language`)}
+              flex={1}
+              placeholder={t.labelLanguage}
+            />
             {!!index && (
               <ActionIcon
                 variant="light"

apps/frontend/src/routes/_auth/questionnaire/_questionnaire/$id/entries.tsx

@@ -53,10 +53,19 @@ function QuestionnaireEntries() {
   const deleteMutation = $api.useMutation("delete", "/entries/{id}");
   const { data: questionnaire, refetch } = $api.useSuspenseQuery("get", "/questionnaires/{id}", { params: { path: { id: p.id } } });
 
-  const { data: carers } = $api.useQuery("get", "/carers", { params: { query: { participantId: questionnaire.participant?.id } } });
+  const participantId = questionnaire.participant?.id;
+
+  const { data: languages } = $api.useQuery("get", "/languages", { params: { query: { participantId } } });
+  const createLanguageMutation = $api.useMutation("post", "/languages", {
+    onSuccess() {
+      c.refetchQueries($api.queryOptions("get", "/languages", { params: { query: { participantId } } }));
+    },
+  });
+
+  const { data: carers } = $api.useQuery("get", "/carers", { params: { query: { participantId } } });
   const createCarerMutation = $api.useMutation("post", "/carers", {
     onSuccess() {
-      c.refetchQueries($api.queryOptions("get", "/carers"));
+      c.refetchQueries($api.queryOptions("get", "/carers", { params: { query: { participantId } } }));
     },
   });
 
@@ -121,13 +130,13 @@ function QuestionnaireEntries() {
     <>
       <Modal opened={opened} onClose={close} size="md">
         <EntityForm
-          onAddCarer={(name) =>
-            createCarerMutation.mutateAsync({ body: { name, participant: questionnaire?.participant?.id } }).then(({ id }) => id)
-          }
+          onAddCarer={(name) => createCarerMutation.mutateAsync({ body: { name, participant: participantId } }).then(({ id }) => id)}
+          onAddLanguage={(name) => createLanguageMutation.mutateAsync({ body: { name, participant: participantId } }).then(({ id }) => id)}
           onSave={handleOnSave}
           onDelete={entryUpdatingId ? () => handleDelete(entryUpdatingId) : undefined}
           entry={entryDraft}
           carers={carers ?? []}
+          languages={languages ?? []}
           actionLabel={t.addEntityLabel}
         />
       </Modal>