feat: allow setting calendar entry colors for carers

Author: stampaaaron

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

@@ -477,6 +477,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: {
@@ -551,6 +556,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[];
         };
@@ -560,6 +570,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: {
@@ -729,6 +744,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

@@ -1,4 +1,4 @@
-import { Button, TextInput, useForm } from "@quassel/ui";
+import { Button, ColorInput, TextInput, useForm, uzhColors } from "@quassel/ui";
 import { useEffect } from "react";
 
 type CarerFormProps = {
@@ -9,6 +9,7 @@ type CarerFormProps = {
 
 type FormValues = {
   name: string;
+  color?: string;
 };
 
 export function CarerForm({ carer, onSave, loading }: CarerFormProps) {
@@ -19,13 +20,15 @@ export function CarerForm({ carer, onSave, loading }: CarerFormProps) {
   });
 
   useEffect(() => {
-    if (carer) f.initialize(carer);
+    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>

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";
 
 function AdministrationCarersIndex() {
   const carers = $api.useSuspenseQuery("get", "/carers");
@@ -18,13 +18,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

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

@@ -93,7 +93,8 @@ function QuestionnaireEntries() {
       end: getDateFromTimeAndWeekday(endedAt, weekday),
       title: carer.name,
       extendedProps: { entryLanguages, weeklyRecurring },
-      backgroundColor: theme.colors[theme.primaryColor][4],
+      backgroundColor: carer.color ?? theme.colors[theme.primaryColor][4],
+      borderColor: carer.color ?? theme.colors[theme.primaryColor][4],
     })) ?? [];
 
   const reset = () => {

libs/ui/src/index.ts

@@ -54,6 +54,8 @@ export {
   Checkbox,
   Combobox,
   Container,
+  ColorInput,
+  ColorSwatch,
   Divider,
   Flex,
   Group,
@@ -102,3 +104,5 @@ export {
 
 export { DSVImport } from "react-dsv-import";
 export type { ColumnType } from "react-dsv-import";
+
+export { uzhColors } from "./theme/uzh";

libs/ui/src/theme/ThemeProvider.tsx

@@ -7,21 +7,13 @@ import customParseFormat from "dayjs/plugin/customParseFormat";
 import de from "dayjs/locale/de";
 import { DefaultMantineColor, MantineColorsTuple } from "@mantine/core";
 import { Notifications } from "@mantine/notifications";
+import { convertUZHColorsToMantine, UZHColor, uzhColors } from "./uzh";
 
 dayjs.extend(utc);
 dayjs.extend(customParseFormat);
 dayjs.locale(de);
 
-type ExtendedCustomColors =
-  | "uzhBlue"
-  | "uzhCyan"
-  | "uzhGreen"
-  | "uzhGold"
-  | "uzhOrange"
-  | "uzhBerry"
-  | "uzhBlack"
-  | "uzhWhite"
-  | DefaultMantineColor;
+type ExtendedCustomColors = UZHColor | DefaultMantineColor;
 
 declare module "@mantine/core" {
   export interface MantineThemeColorsOverride {
@@ -32,23 +24,15 @@ declare module "@mantine/core" {
 type ThemeProviderProps = MantineProviderProps;
 
 export const theme: MantineThemeOverride = {
-  // based on https://www.cd.uzh.ch/dam/jcr:ceea0afd-0f51-442c-b4ca-c49bb6bd1220/uzh-corporate-colors-rgb.pdf
   colors: {
-    uzhBlue: ["#BACBFF", "#7596FF", "#3062FF", "#3062FF", "#0028A5", "#0028A5", "#0028A5", "#001E7C", "#001452", "#001452"],
-    // https://mantine.dev/colors-generator/?color=4AC9E3
-    uzhCyan: ["#e0fdff", "#cff4fc", "#a5e6f3", "#76d7eb", "#51cbe4", "#37c3e0", "#21c0df", "#01a9c6", "#0096b2", "#00839d"],
-    // https://mantine.dev/colors-generator/?color=A5D233
-    uzhGreen: ["#f6fde6", "#edf7d5", "#dbedac", "#c7e380", "#b7da5b", "#acd543", "#a6d336", "#90ba27", "#7fa51e", "#6c8f0f"],
-    // https://mantine.dev/colors-generator/?color=FFC845
-    uzhGold: ["#fff9df", "#fff1ca", "#ffe299", "#ffd163", "#ffc336", "#ffbb18", "#ffb602", "#e4a000", "#cb8d00", "#b07900"],
-    // https://mantine.dev/colors-generator/?color=FC4C02
-    uzhOrange: ["#ffeee3", "#ffddcd", "#ffb99b", "#fe9366", "#fd7238", "#fd5e1b", "#fd530b", "#e24300", "#ca3a00", "#b02e00"],
-    // https://mantine.dev/colors-generator/?color=BF0D3E
-    uzhBerry: ["#ffeaf1", "#fcd3de", "#f6a3ba", "#f27194", "#ee4874", "#ed2f5f", "#ed2255", "#d31646", "#bd0d3d", "#a60033"],
-    // https://mantine.dev/colors-generator/?color=000000
-    uzhBlack: ["#f5f5f5", "#e7e7e7", "#cdcdcd", "#b2b2b2", "#9a9a9a", "#8b8b8b", "#848484", "#717171", "#656565", "#575757"],
-    // https://mantine.dev/colors-generator/?color=FFFFFF
-    uzhWhite: ["#f5f5f5", "#e7e7e7", "#cdcdcd", "#b2b2b2", "#9a9a9a", "#8b8b8b", "#848484", "#717171", "#656565", "#575757"],
+    uzhBlue: convertUZHColorsToMantine(uzhColors.uzhBlue),
+    uzhCyan: convertUZHColorsToMantine(uzhColors.uzhCyan),
+    uzhGreen: convertUZHColorsToMantine(uzhColors.uzhGreen),
+    uzhGold: convertUZHColorsToMantine(uzhColors.uzhGold),
+    uzhOrange: convertUZHColorsToMantine(uzhColors.uzhOrange),
+    uzhBerry: convertUZHColorsToMantine(uzhColors.uzhBerry),
+    uzhBlack: convertUZHColorsToMantine(uzhColors.uzhBlack),
+    uzhWhite: convertUZHColorsToMantine(uzhColors.uzhWhite),
   },
   primaryColor: "uzhBlue",
 };