feat: allow adding custom carer from within entry dialog

Author: stampaaaron

apps/backend/src/defaults/carers/carer.dto.ts

@@ -19,5 +19,7 @@ export class CarerDto {
   entries: number[];
 }
 export class CarerResponseDto extends CarerDto {}
-export class CarerCreationDto extends OmitType(CarerDto, ["id", "entries"]) {}
-export class CarerMutationDto extends PartialType(CarerCreationDto) {}
+export class CarerCreationDto extends OmitType(CarerDto, ["id", "entries", "participant"]) {
+  participant?: number;
+}
+export class CarerMutationDto extends PartialType(OmitType(CarerDto, ["entries"])) {}

apps/frontend/src/api.gen.ts

@@ -452,6 +452,14 @@ export interface components {
              */
             role?: "ASSISTANT" | "ADMIN";
         };
+        CarerCreationDto: {
+            /**
+             * @description The name of the carer
+             * @example Grandmother
+             */
+            name: string;
+            participant?: number;
+        };
         ParticipantDto: {
             /**
              * @description The id of the participant (child id)
@@ -468,14 +476,6 @@ export interface components {
             carers: number[];
             languages: number[];
         };
-        CarerCreationDto: {
-            /**
-             * @description The name of the carer
-             * @example Grandmother
-             */
-            name: string;
-            participant?: components["schemas"]["ParticipantDto"];
-        };
         CarerResponseDto: {
             /**
              * @description The id of the carer
@@ -491,6 +491,11 @@ export interface components {
             entries: number[];
         };
         CarerMutationDto: {
+            /**
+             * @description The id of the carer
+             * @example 1
+             */
+            id?: number;
             /**
              * @description The name of the carer
              * @example Grandmother

apps/frontend/src/components/CarerSelect.tsx

@@ -3,8 +3,8 @@ import { EntitySelect, EntitySelectProps } from "./EntitySelect";
 
 type CarerSelectProps = EntitySelectProps;
 
-export function CarerSelect({ value, onChange, ...rest }: CarerSelectProps) {
+export function CarerSelect({ value, onChange, onAddNew, ...rest }: CarerSelectProps) {
   const { data } = $api.useQuery("get", "/carers");
 
-  return <EntitySelect value={value} onChange={onChange} {...rest} data={data} buildLabel={(carer) => carer.name} />;
+  return <EntitySelect value={value} onChange={onChange} onAddNew={onAddNew} {...rest} data={data} inputKey="name" />;
 }

apps/frontend/src/components/EntitySelect.tsx

@@ -1,22 +1,99 @@
-import { Select, SelectProps } from "@quassel/ui";
+import { Combobox, TextInput, TextInputProps, useCombobox } from "@quassel/ui";
+import { useEffect, useState } from "react";
+import { i18n } from "../stores/i18n";
+import { useStore } from "@nanostores/react";
+import { params } from "@nanostores/i18n";
 
-export type EntitySelectProps = Omit<SelectProps, "value" | "onChange"> & {
+export type EntitySelectProps = Omit<TextInputProps, "value" | "onChange"> & {
   value?: number;
-  onChange?: (id?: number) => void;
+  onChange?: (value?: number) => void;
+  onAddNew?: (value: string) => Promise<number>;
 };
 
+type StringKeys<T> = { [K in keyof T]-?: T[K] extends string ? K : never }[keyof T];
+
 type Props<T extends { id: number }> = Omit<EntitySelectProps, "data"> & {
   data?: T[];
-  buildLabel: (value: T) => string;
+  onAddNew?: (value: string) => void;
+  inputKey: StringKeys<T>;
 };
 
-export function EntitySelect<T extends { id: number }>({ value, onChange, data, buildLabel, ...rest }: Props<T>) {
+const customValueKey = "CUSTOM_VALUE";
+
+const messages = i18n("entitySelect", {
+  actionCreateNew: params('Create new "{value}"'),
+});
+
+export function EntitySelect<T extends { id: number }>({ value, onChange, data, inputKey, onAddNew, ...rest }: Props<T>) {
+  const t = useStore(messages);
+
+  const combobox = useCombobox({
+    onDropdownClose: () => combobox.resetSelectedOption(),
+  });
+
+  const [searchValue, setSearchValue] = useState("");
+
+  const shouldFilterOptions = !data?.some((item) => item[inputKey] === searchValue);
+  const filteredOptions =
+    (shouldFilterOptions
+      ? data?.filter((item) => (item[inputKey] as string)?.toLowerCase().includes(searchValue.toLowerCase().trim()))
+      : data) ?? [];
+
+  const options = filteredOptions?.map((item) => (
+    <Combobox.Option key={item.id} value={item.id.toString()}>
+      {item[inputKey] as string}
+    </Combobox.Option>
+  ));
+
+  useEffect(() => {
+    if (value && data) {
+      const index = data.findIndex((item) => item.id === value);
+      if (index !== -1) {
+        setSearchValue(data[index][inputKey] as string);
+        combobox.selectOption(index);
+      }
+    }
+  }, [value, data]);
+
+  useEffect(() => {
+    if (shouldFilterOptions) combobox.selectFirstOption();
+  }, [searchValue]);
+
   return (
-    <Select
-      value={value?.toString()}
-      onChange={(value) => onChange?.(value ? parseInt(value) : undefined)}
-      data={data?.map((entity) => ({ value: entity.id.toString(), label: buildLabel(entity) })) ?? []}
-      {...rest}
-    />
+    <Combobox
+      store={combobox}
+      onOptionSubmit={async (value) => {
+        let id: number;
+        if (value === customValueKey) {
+          id = await onAddNew!(searchValue);
+        } else {
+          id = parseInt(value);
+        }
+        onChange?.(id);
+        combobox.closeDropdown();
+      }}
+    >
+      <Combobox.Target>
+        <TextInput
+          value={searchValue}
+          onChange={({ target: { value } }) => {
+            setSearchValue(value);
+          }}
+          onClick={() => combobox.openDropdown()}
+          onFocus={() => combobox.openDropdown()}
+          onBlur={() => combobox.closeDropdown()}
+          {...rest}
+        />
+      </Combobox.Target>
+
+      <Combobox.Dropdown>
+        <Combobox.Options>
+          {onAddNew && !options?.length && (
+            <Combobox.Option value={customValueKey}>{t.actionCreateNew({ value: searchValue })}</Combobox.Option>
+          )}
+          {options}
+        </Combobox.Options>
+      </Combobox.Dropdown>
+    </Combobox>
   );
 }

apps/frontend/src/components/LanguageSelect.tsx

@@ -6,5 +6,5 @@ type LanguageSelectProps = EntitySelectProps;
 export function LanguageSelect({ value, onChange, ...rest }: LanguageSelectProps) {
   const { data } = $api.useQuery("get", "/languages");
 
-  return <EntitySelect value={value} onChange={onChange} searchable {...rest} data={data} buildLabel={(language) => language.name} />;
+  return <EntitySelect value={value} onChange={onChange} {...rest} data={data} inputKey="name" />;
 }

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

@@ -30,11 +30,12 @@ const messages = i18n("entityForm", {
 type EntityFormProps = {
   onSave: (entity: EntryFormValues) => void;
   onDelete?: () => void;
+  onAddCarer: (value: string) => Promise<number>;
   entry?: Partial<EntryFormValues>;
   actionLabel: string;
 };
 
-export function EntityForm({ onSave, onDelete, actionLabel, entry }: EntityFormProps) {
+export function EntityForm({ onSave, onDelete, onAddCarer, actionLabel, entry }: EntityFormProps) {
   const t = useStore(messages);
   const f = useForm<EntryFormValues>({
     initialValues: {
@@ -89,7 +90,7 @@ export function EntityForm({ onSave, onDelete, actionLabel, entry }: EntityFormP
   return (
     <form onSubmit={f.onSubmit(onSave)}>
       <Stack>
-        <CarerSelect {...f.getInputProps("carer")} placeholder={t.labelCarer} />
+        <CarerSelect {...f.getInputProps("carer")} onAddNew={onAddCarer} placeholder={t.labelCarer} />
 
         {f.getValues().entryLanguages.map((_, index) => (
           // TODO: make key either languageId or name of new language entry

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

@@ -11,6 +11,7 @@ import { components } from "../../../../../api.gen";
 import { QuestionnaireEntry } from "../../../../../components/questionnaire/calendar/QuestionnaireEntry";
 import { EntityForm, EntryFormValues } from "../../../../../components/questionnaire/calendar/EntryForm";
 import { useState } from "react";
+import { useQueryClient } from "@tanstack/react-query";
 
 export type ExtendedEvent = EventInput & { extendedProps: { entryLanguages: components["schemas"]["EntryLanguageResponseDto"][] } };
 
@@ -38,6 +39,8 @@ function QuestionnaireEntries() {
 
   const t = useStore(messages);
 
+  const c = useQueryClient();
+
   const theme = useMantineTheme();
   const [opened, { open, close }] = useDisclosure();
 
@@ -50,6 +53,12 @@ function QuestionnaireEntries() {
   const deleteMutation = $api.useMutation("delete", "/entries/{id}");
   const { data: questionnaire, refetch } = $api.useSuspenseQuery("get", "/questionnaires/{id}", { params: { path: { id: p.id } } });
 
+  const createCarerMutation = $api.useMutation("post", "/carers", {
+    onSuccess() {
+      c.refetchQueries($api.queryOptions("get", "/carers"));
+    },
+  });
+
   const events: ExtendedEvent[] =
     questionnaire.entries?.map(({ startedAt, endedAt, weekday, carer, entryLanguages, id }) => ({
       id: id.toString(),
@@ -111,6 +120,9 @@ function QuestionnaireEntries() {
     <>
       <Modal opened={opened} onClose={close} size="md">
         <EntityForm
+          onAddCarer={(name) =>
+            createCarerMutation.mutateAsync({ body: { name, participant: questionnaire?.participant?.id } }).then(({ id }) => id)
+          }
           onSave={handleOnSave}
           onDelete={entryUpdatingId ? () => handleDelete(entryUpdatingId) : undefined}
           entry={entryDraft}

libs/ui/src/index.ts

@@ -43,6 +43,7 @@ export {
   AppShell,
   Button,
   Checkbox,
+  Combobox,
   Container,
   Divider,
   Flex,
@@ -57,9 +58,11 @@ export {
   Table,
   Text,
   TextInput,
+  type TextInputProps,
   NumberInput,
   Title,
   UnstyledButton,
+  useCombobox,
   useMantineTheme,
 } from "@mantine/core";