Merge pull request #201 from openscript-ch/198-improve-calendar-entries-display

openscript · web-flow · commit 00e6eb1cb593 · 2024-12-18T13:56:32.000+01:00
198 improve calendar entries display
diff --git a/.changeset/fuzzy-avocados-provide.md b/.changeset/fuzzy-avocados-provide.md
@@ -0,0 +1,7 @@
+---
+"@quassel/frontend": patch
+"@quassel/backend": patch
+"@quassel/ui": patch
+---
+
+Introduce color field per carer for calendar entries
diff --git a/.changeset/thirty-beers-matter.md b/.changeset/thirty-beers-matter.md
@@ -0,0 +1,5 @@
+---
+"@quassel/frontend": patch
+---
+
+Enhance content displayed on calendar entries
diff --git a/apps/backend/db/migrations/.snapshot-postgres.json b/apps/backend/db/migrations/.snapshot-postgres.json
@@ -156,6 +156,16 @@
           "length": 255,
           "mappedType": "string"
         },
+        "color": {
+          "name": "color",
+          "type": "varchar(255)",
+          "unsigned": false,
+          "autoincrement": false,
+          "primary": false,
+          "nullable": true,
+          "length": 255,
+          "mappedType": "string"
+        },
         "participant_id": {
           "name": "participant_id",
           "type": "bigint",
@@ -190,7 +200,14 @@
           "unique": true
         }
       ],
-      "checks": [],
+      "checks": [
+        {
+          "name": "carer_color_check",
+          "expression": "color ~* '^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$'",
+          "definition": "check ((color ~* '^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$'))",
+          "columnName": "color"
+        }
+      ],
       "foreignKeys": {
         "carer_participant_id_foreign": {
           "constraintName": "carer_participant_id_foreign",
diff --git a/apps/backend/db/migrations/Migration20241217101643.ts b/apps/backend/db/migrations/Migration20241217101643.ts
@@ -0,0 +1,13 @@
+import { Migration } from "@mikro-orm/migrations";
+
+export class Migration20241217101643 extends Migration {
+  override async up(): Promise<void> {
+    this.addSql(`alter table "carer" add column "color" varchar(255) null;`);
+    this.addSql(`alter table "carer" add constraint carer_color_check check(color ~* '^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})\$');`);
+  }
+
+  override async down(): Promise<void> {
+    this.addSql(`alter table "carer" drop constraint carer_color_check;`);
+    this.addSql(`alter table "carer" drop column "color";`);
+  }
+}
diff --git a/apps/backend/src/defaults/carers/carer.dto.ts b/apps/backend/src/defaults/carers/carer.dto.ts
@@ -1,5 +1,5 @@
 import { ApiProperty, OmitType, PartialType } from "@nestjs/swagger";
-import { IsNotEmpty, MinLength } from "class-validator";
+import { IsNotEmpty, Matches, MinLength } from "class-validator";
 import { Type } from "class-transformer";
 import { ParticipantDto } from "../../research/participants/participant.dto";
 
@@ -12,6 +12,10 @@ export class CarerDto {
   @IsNotEmpty()
   name: string;
 
+  @Matches("^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$")
+  @ApiProperty({ example: "#ffffff", description: "The color used to display entries in the calendar" })
+  color?: string;
+
   @Type(() => ParticipantDto)
   participant?: ParticipantDto;
 
diff --git a/apps/backend/src/defaults/carers/carer.entity.ts b/apps/backend/src/defaults/carers/carer.entity.ts
@@ -1,4 +1,4 @@
-import { Collection, Entity, ManyToOne, OneToMany, Property } from "@mikro-orm/core";
+import { Check, Collection, Entity, ManyToOne, OneToMany, Property } from "@mikro-orm/core";
 import { BaseEntity } from "../../common/entities/base.entity";
 import { Participant } from "../../research/participants/participant.entity";
 import { Entry } from "../../research/entries/entry.entity";
@@ -8,6 +8,10 @@ export class Carer extends BaseEntity {
   @Property({ unique: true })
   name!: string;
 
+  @Check<Carer>({ expression: (columns) => `${columns.color} ~* '^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$'` })
+  @Property()
+  color?: string;
+
   @ManyToOne()
   participant?: Participant;
 
diff --git a/apps/frontend/src/api.gen.ts b/apps/frontend/src/api.gen.ts
@@ -494,6 +494,11 @@ export interface components {
              * @example Grandmother
              */
             name: string;
+            /**
+             * @description The color used to display entries in the calendar
+             * @example #ffffff
+             */
+            color?: string;
             participant?: number;
         };
         StudyDto: {
@@ -574,6 +579,11 @@ export interface components {
              * @example Grandmother
              */
             name: string;
+            /**
+             * @description The color used to display entries in the calendar
+             * @example #ffffff
+             */
+            color?: string;
             participant?: components["schemas"]["ParticipantDto"];
             entries: number[];
         };
@@ -583,6 +593,11 @@ export interface components {
              * @example Grandmother
              */
             name?: string;
+            /**
+             * @description The color used to display entries in the calendar
+             * @example #ffffff
+             */
+            color?: string;
             participant?: number;
         };
         LanguageCreationDto: {
@@ -758,6 +773,11 @@ export interface components {
              * @example Grandmother
              */
             name: string;
+            /**
+             * @description The color used to display entries in the calendar
+             * @example #ffffff
+             */
+            color?: string;
             participant?: components["schemas"]["ParticipantDto"];
             entries: number[];
         };
diff --git a/apps/frontend/src/components/CarerForm.tsx b/apps/frontend/src/components/CarerForm.tsx
@@ -0,0 +1,37 @@
+import { Button, ColorInput, TextInput, useForm, uzhColors } from "@quassel/ui";
+import { useEffect } from "react";
+
+type CarerFormProps = {
+  carer?: FormValues;
+  onSave: (carer: FormValues) => void;
+  loading: boolean;
+};
+
+type FormValues = {
+  name: string;
+  color?: string;
+};
+
+export function CarerForm({ carer, onSave, loading }: CarerFormProps) {
+  const f = useForm<FormValues>({
+    initialValues: {
+      name: "",
+    },
+  });
+
+  useEffect(() => {
+    if (carer) f.initialize({ ...carer, color: carer.color ?? "" });
+  }, [carer]);
+
+  return (
+    <form autoComplete="off" onSubmit={f.onSubmit(onSave)}>
+      <TextInput label="Name" type="name" {...f.getInputProps("name")} />
+
+      <ColorInput label="Color" {...f.getInputProps("color")} swatchesPerRow={6} swatches={Object.values(uzhColors).flat()} />
+
+      <Button type="submit" fullWidth mt="xl" loading={loading}>
+        Change
+      </Button>
+    </form>
+  );
+}
diff --git a/apps/frontend/src/components/questionnaire/calendar/QuestionnaireEntry.tsx b/apps/frontend/src/components/questionnaire/calendar/QuestionnaireEntry.tsx
@@ -1,16 +1,34 @@
 import { EventImpl } from "@fullcalendar/core/internal";
 import { ExtendedEvent } from "../../../routes/_auth/questionnaire/_questionnaire/$id/entries";
-import { Flex } from "@quassel/ui";
+import { IconRepeat, Stack, Text } from "@quassel/ui";
+import { i18n } from "../../../stores/i18n";
+import { params } from "@nanostores/i18n";
+import { useStore } from "@nanostores/react";
 
 type QuestionnaireEntryProps = {
   event: EventImpl;
 };
 
+const messages = i18n("questionnaireEntries", {
+  labelRecurringWeekly: params("{weeks} weeks"),
+});
+
 export function QuestionnaireEntry({ event }: QuestionnaireEntryProps) {
+  const { entryLanguages, weeklyRecurring } = event.extendedProps as ExtendedEvent["extendedProps"];
+
+  const t = useStore(messages);
+
   return (
-    <Flex direction={"column"}>
-      <span>{event.title}</span>
-      <span>{(event.extendedProps as ExtendedEvent["extendedProps"]).entryLanguages.map(({ language }) => language.name).join(", ")}</span>
-    </Flex>
+    <Stack gap={0}>
+      <Text size="sm" fw="bold" truncate>
+        {event.title}
+      </Text>
+      {entryLanguages.map(({ language }) => language.ietfBcp47).join(", ")}
+      {weeklyRecurring && weeklyRecurring > 1 && (
+        <Text mt="sm" size="sm">
+          <IconRepeat size={13} /> {t.labelRecurringWeekly({ weeks: weeklyRecurring })}
+        </Text>
+      )}
+    </Stack>
   );
 }
diff --git a/apps/frontend/src/routes/_auth/administration/carers/edit.$id.tsx b/apps/frontend/src/routes/_auth/administration/carers/edit.$id.tsx
@@ -1,16 +1,13 @@
 import { createFileRoute, useNavigate } from "@tanstack/react-router";
-import { components } from "../../../../api.gen";
 import { $api } from "../../../../stores/api";
 import { useQueryClient } from "@tanstack/react-query";
-import { Button, TextInput, useForm } from "@quassel/ui";
-import { useEffect } from "react";
-
-type FormValues = components["schemas"]["CarerMutationDto"];
+import { CarerForm } from "../../../../components/CarerForm";
+import { components } from "../../../../api.gen";
 
 function AdministrationCarersEdit() {
   const p = Route.useParams();
   const q = useQueryClient();
-  const { data, isSuccess } = $api.useSuspenseQuery("get", "/carers/{id}", { params: { path: { id: p.id } } });
+  const { data } = $api.useSuspenseQuery("get", "/carers/{id}", { params: { path: { id: p.id } } });
   const n = useNavigate();
   const editCarerMutation = $api.useMutation("patch", "/carers/{id}", {
     onSuccess: () => {
@@ -22,34 +19,15 @@ function AdministrationCarersEdit() {
       n({ to: "/administration/carers" });
     },
   });
-  const f = useForm<FormValues>({
-    initialValues: {
-      name: "",
-    },
-  });
-  const handleSubmit = (values: FormValues) => {
+
+  const handleSubmit = (values: components["schemas"]["CarerMutationDto"]) => {
     editCarerMutation.mutate({
       body: { ...values },
       params: { path: { id: p.id } },
     });
   };
 
-  useEffect(() => {
-    f.setValues({ ...data, participant: data.participant?.id });
-    f.resetDirty();
-  }, [isSuccess, data]);
-
-  return (
-    <>
-      <form autoComplete="off" onSubmit={f.onSubmit(handleSubmit)}>
-        <TextInput label="Name" type="name" {...f.getInputProps("name")} />
-
-        <Button type="submit" fullWidth mt="xl" loading={editCarerMutation.isPending}>
-          Change
-        </Button>
-      </form>
-    </>
-  );
+  return <CarerForm carer={data} onSave={handleSubmit} loading={editCarerMutation.isPending} />;
 }
 
 export const Route = createFileRoute("/_auth/administration/carers/edit/$id")({
diff --git a/apps/frontend/src/routes/_auth/administration/carers/index.tsx b/apps/frontend/src/routes/_auth/administration/carers/index.tsx
@@ -1,6 +1,6 @@
 import { createFileRoute, Link } from "@tanstack/react-router";
 import { $api } from "../../../../stores/api";
-import { Button, Table } from "@quassel/ui";
+import { Button, ColorSwatch, Table } from "@quassel/ui";
 import { $session } from "../../../../stores/session";
 import { useStore } from "@nanostores/react";
 
@@ -21,13 +21,15 @@ function AdministrationCarersIndex() {
           <Table.Tr>
             <Table.Th>Id</Table.Th>
             <Table.Th>Name</Table.Th>
+            <Table.Th>Color</Table.Th>
           </Table.Tr>
         </Table.Thead>
         <Table.Tbody>
           {carers.data?.map((c) => (
             <Table.Tr key={c.id}>
               <Table.Td>{c.id}</Table.Td>
               <Table.Td>{c.name}</Table.Td>
+              <Table.Td>{c.color && <ColorSwatch color={c.color} />}</Table.Td>
               <Table.Td>
                 <Button variant="default" renderRoot={(props) => <Link to={`/administration/carers/edit/${c.id}`} {...props} />}>
                   Edit
diff --git a/apps/frontend/src/routes/_auth/administration/carers/new.tsx b/apps/frontend/src/routes/_auth/administration/carers/new.tsx
@@ -1,9 +1,7 @@
 import { createFileRoute, useNavigate } from "@tanstack/react-router";
-import { Button, TextInput, useForm } from "@quassel/ui";
 import { $api } from "../../../../stores/api";
 import { components } from "../../../../api.gen";
-
-type FormValues = components["schemas"]["CarerCreationDto"];
+import { CarerForm } from "../../../../components/CarerForm";
 
 function AdministrationCarersNew() {
   const n = useNavigate();
@@ -12,27 +10,12 @@ function AdministrationCarersNew() {
       n({ to: "/administration/carers" });
     },
   });
-  const f = useForm<FormValues>({
-    mode: "uncontrolled",
-    initialValues: {
-      name: "",
-    },
-  });
-  const handleSubmit = (values: FormValues) => {
+
+  const handleSubmit = (values: components["schemas"]["CarerCreationDto"]) => {
     createCarerMutation.mutate({ body: values });
   };
 
-  return (
-    <>
-      <form autoComplete="off" onSubmit={f.onSubmit(handleSubmit)}>
-        <TextInput label="Name" type="text" {...f.getInputProps("name")} required />
-
-        <Button type="submit" fullWidth mt="xl" loading={createCarerMutation.isPending}>
-          Create
-        </Button>
-      </form>
-    </>
-  );
+  return <CarerForm onSave={handleSubmit} loading={createCarerMutation.isPending} />;
 }
 
 export const Route = createFileRoute("/_auth/administration/carers/new")({
diff --git a/apps/frontend/src/routes/_auth/questionnaire/_questionnaire/$id/entries.tsx b/apps/frontend/src/routes/_auth/questionnaire/_questionnaire/$id/entries.tsx
@@ -24,7 +24,9 @@ import { EntityForm, EntryFormValues } from "../../../../../components/questionn
 import { useState } from "react";
 import { useQueryClient } from "@tanstack/react-query";
 
-export type ExtendedEvent = EventInput & { extendedProps: { entryLanguages: components["schemas"]["EntryLanguageResponseDto"][] } };
+export type ExtendedEvent = EventInput & {
+  extendedProps: { entryLanguages: components["schemas"]["EntryLanguageResponseDto"][]; weeklyRecurring?: number };
+};
 
 const calendarBaseConfig: FullCalendar["props"] = {
   allDaySlot: false,
@@ -85,13 +87,14 @@ function QuestionnaireEntries() {
   });
 
   const events: ExtendedEvent[] =
-    questionnaire.entries?.map(({ startedAt, endedAt, weekday, carer, entryLanguages, id }) => ({
+    questionnaire.entries?.map(({ startedAt, endedAt, weekday, carer, entryLanguages, id, weeklyRecurring }) => ({
       id: id.toString(),
       start: getDateFromTimeAndWeekday(startedAt, weekday),
       end: getDateFromTimeAndWeekday(endedAt, weekday),
       title: carer.name,
-      extendedProps: { entryLanguages },
-      backgroundColor: theme.colors[theme.primaryColor][4],
+      extendedProps: { entryLanguages, weeklyRecurring },
+      backgroundColor: carer.color ?? theme.colors[theme.primaryColor][4],
+      borderColor: carer.color ?? theme.colors[theme.primaryColor][4],
     })) ?? [];
 
   const reset = () => {
diff --git a/eslint.config.mjs b/eslint.config.mjs
@@ -7,7 +7,9 @@ import pluginReactRefresh from "eslint-plugin-react-refresh";
 import pluginPrettierRecommended from "eslint-plugin-prettier/recommended";
 
 export default tseslint.config(
-  { ignores: ["**/dist", "**/*.gen.ts", "apps/mockup/"] },
+  {
+    ignores: ["**/dist", "**/*.gen.ts", "apps/mockup/", "apps/backend/db/migrations"],
+  },
   {
     files: ["**/*.{js,mjs,cjs,ts,jsx,tsx}"],
     languageOptions: { ecmaVersion: 2020, parserOptions: { ecmaFeatures: { jsx: true } }, globals: { ...globals.browser, ...globals.node } },
diff --git a/libs/ui/src/index.ts b/libs/ui/src/index.ts
diff --git a/libs/ui/src/theme/ThemeProvider.tsx b/libs/ui/src/theme/ThemeProvider.tsx
diff --git a/libs/ui/src/theme/uzh.ts b/libs/ui/src/theme/uzh.ts

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"@quassel/frontend": patch
 +---
++
 +Enhance content displayed on calendar entries