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

198 improve calendar entries display

Author: openscript

.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

.changeset/thirty-beers-matter.md

@@ -0,0 +1,5 @@
+---
+"@quassel/frontend": patch
+---
+
+Enhance content displayed on calendar entries

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",

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";`);
+  }
+}

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;
 

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;
 

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[];
         };

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>
+  );
+}

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>
   );
 }

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")({