feat: add selects for carer and languages

Author: stampaaaron

apps/frontend/src/components/CarerSelect.tsx

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

apps/frontend/src/components/EntitySelect.tsx

@@ -0,0 +1,24 @@
+import { Select, SelectProps } from "@quassel/ui";
+
+export type EntitySelectProps = Omit<SelectProps, "value" | "onChange"> & {
+  value?: number;
+  onChange?: (id?: number) => void;
+};
+
+type Props<T extends { id: number }> = Omit<EntitySelectProps, "data"> & {
+  data?: T[];
+  buildLabel: (value: T) => string;
+};
+
+export function EntitySelect<T extends { id: number }>({ value, onChange, data, buildLabel, ...rest }: Props<T>) {
+  console.log(value);
+
+  return (
+    <Select
+      value={value?.toString()}
+      onChange={(value) => onChange?.(value ? parseInt(value) : undefined)}
+      data={data?.map((entity) => ({ value: entity.id.toString(), label: buildLabel(entity) })) ?? []}
+      {...rest}
+    />
+  );
+}

apps/frontend/src/components/LanguageSelect.tsx

@@ -0,0 +1,10 @@
+import { $api } from "../stores/api";
+import { EntitySelect, EntitySelectProps } from "./EntitySelect";
+
+type LanguageSelectProps = EntitySelectProps;
+
+export function LanguageSelect({ value, onChange }: LanguageSelectProps) {
+  const { data } = $api.useQuery("get", "/languages");
+
+  return <EntitySelect value={value} onChange={onChange} data={data} buildLabel={(language) => language.name} searchable />;
+}

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

@@ -1,8 +1,10 @@
 import { isInRange, isNotEmpty, useForm } from "@mantine/form";
-import { Button, Group, Select, Stack, TimeInput, NumberInput, ActionIcon, IconMinus } from "@quassel/ui";
+import { Button, Group, Stack, TimeInput, NumberInput, ActionIcon, IconMinus } from "@quassel/ui";
 import { i18n } from "../../../stores/i18n";
 import { useStore } from "@nanostores/react";
 import { useEffect } from "react";
+import { CarerSelect } from "../../CarerSelect";
+import { LanguageSelect } from "../../LanguageSelect";
 
 type FormValues = {
   carerId?: number;
@@ -82,13 +84,13 @@ export function EntityForm({ onSave, actionLabel, entry }: EntityFormProps) {
   return (
     <form onSubmit={f.onSubmit(onSave)}>
       <Stack align="flex-start">
-        <Select {...f.getInputProps("carerId")} />
+        <CarerSelect {...f.getInputProps("carerId")} />
 
         {f.getValues().languageEntries.map((_, index) => (
           // TODO: make key either languageId or name of new language entry
           <Group key={`entry-${index}`}>
             <NumberInput {...f.getInputProps(`languageEntries.${index}.ratio`)} max={100} min={1} />
-            <Select {...f.getInputProps(`languageEntries.${index}.languageId`)} />
+            <LanguageSelect {...f.getInputProps(`languageEntries.${index}.languageId`)} />
             {!!index && (
               <ActionIcon
                 variant="light"

libs/ui/src/index.ts

@@ -51,6 +51,7 @@ export {
   Paper,
   PasswordInput,
   Select,
+  type SelectProps,
   Stack,
   Table,
   Text,