feat: allow creating entries for multiple days

Author: stampaaaron

apps/backend/src/research/entries/entries.controller.ts

@@ -2,7 +2,7 @@ import { Body, Controller, Delete, Get, Param, Patch, Post } from "@nestjs/commo
 import { ApiTags, ApiOperation, ApiUnprocessableEntityResponse } from "@nestjs/swagger";
 import { ErrorResponseDto } from "../../common/dto/error.dto";
 import { EntriesService } from "./entries.service";
-import { EntryCreationDto, EntryResponseDto, EntryMutationDto } from "./entry.dto";
+import { EntryCreationDto, EntryResponseDto, EntryUpdateDto } from "./entry.dto";
 import { Serialize } from "../../common/decorators/serialize";
 
 @ApiTags("Entries")
@@ -13,8 +13,7 @@ export class EntriesController {
   @Post()
   @ApiOperation({ summary: "Create a entry" })
   @ApiUnprocessableEntityResponse({ description: "Unique name constraint violation", type: ErrorResponseDto })
-  @Serialize(EntryResponseDto)
-  create(@Body() entry: EntryCreationDto): Promise<EntryResponseDto> {
+  create(@Body() entry: EntryCreationDto): Promise<number[]> {
     return this.entriesService.create(entry);
   }
 
@@ -35,7 +34,7 @@ export class EntriesController {
   @Patch(":id")
   @ApiOperation({ summary: "Update a entry by ID" })
   @Serialize(EntryResponseDto)
-  update(@Param("id") id: string, @Body() entry: EntryMutationDto): Promise<EntryResponseDto> {
+  update(@Param("id") id: string, @Body() entry: EntryUpdateDto): Promise<EntryResponseDto> {
     return this.entriesService.update(+id, entry);
   }
 

apps/backend/src/research/entries/entries.service.ts

@@ -1,7 +1,7 @@
-import { EntityRepository, UniqueConstraintViolationException, FilterQuery } from "@mikro-orm/core";
+import { EntityRepository, FilterQuery } from "@mikro-orm/core";
 import { InjectRepository } from "@mikro-orm/nestjs";
-import { Injectable, UnprocessableEntityException } from "@nestjs/common";
-import { EntryCreationDto, EntryMutationDto } from "./entry.dto";
+import { Injectable } from "@nestjs/common";
+import { EntryCreationDto, EntryUpdateDto } from "./entry.dto";
 import { Entry } from "./entry.entity";
 import { EntityManager, raw } from "@mikro-orm/postgresql";
 
@@ -13,20 +13,15 @@ export class EntriesService {
     private readonly em: EntityManager
   ) {}
 
-  async create(entryCreationDto: EntryCreationDto) {
-    const entry = new Entry();
-    entry.assign(entryCreationDto, { em: this.em });
+  create({ weekday, ...rest }: EntryCreationDto) {
+    return this.entryRepository.insertMany(
+      weekday.map((w) => {
+        const entry = new Entry();
+        entry.assign({ weekday: w, ...rest }, { em: this.em });
 
-    try {
-      await this.em.persist(entry).flush();
-    } catch (e) {
-      if (e instanceof UniqueConstraintViolationException) {
-        throw new UnprocessableEntityException("Entry with this name already exists");
-      }
-      throw e;
-    }
-
-    return (await entry.populate(["entryLanguages"])).toObject();
+        return entry;
+      })
+    );
   }
 
   async findAll() {
@@ -66,7 +61,7 @@ export class EntriesService {
     });
   }
 
-  async update(id: number, entryMutationDto: EntryMutationDto) {
+  async update(id: number, entryMutationDto: EntryUpdateDto) {
     const entry = await this.entryRepository.findOneOrFail(id, { populate: ["entryLanguages"] });
 
     entry.assign(entryMutationDto);

apps/backend/src/research/entries/entry.dto.ts

@@ -15,12 +15,6 @@ class EntryBaseDto {
   @Expose()
   endedAt: string;
 
-  @ApiProperty({ example: 1, description: "The weekday of the entry (Sunday is 0 like in JS)" })
-  @Min(0)
-  @Max(6)
-  @Expose()
-  weekday: number;
-
   @ApiProperty({ example: 1, description: "The weekly recurring of the entry" })
   @Min(1)
   @IsOptional()
@@ -32,6 +26,12 @@ export class EntryResponseDto extends EntryBaseDto {
   @Expose()
   id: number;
 
+  @ApiProperty({ example: 1, description: "The weekday of the entry (Sunday is 0 like in JS)" })
+  @Min(0)
+  @Max(6)
+  @Expose()
+  weekday: number;
+
   @Type(() => CarerResponseDto)
   @Expose()
   carer: CarerResponseDto;
@@ -41,14 +41,17 @@ export class EntryResponseDto extends EntryBaseDto {
   entryLanguages: Array<EntryLanguageResponseDto>;
 }
 
-export class EntryCreationDto extends EntryBaseDto {
+class EntryMutationDto extends EntryBaseDto {
   carer: number;
   questionnaire: number;
 
   @Type(() => EntryLanguageCreationDto)
   entryLanguages: Array<EntryLanguageCreationDto>;
 }
-export class EntryMutationDto extends PartialType(EntryCreationDto) {}
+export class EntryCreationDto extends EntryMutationDto {
+  weekday: number[];
+}
+export class EntryUpdateDto extends PartialType(EntryMutationDto) {}
 
 export class EntryTemplateDto {
   @Type(() => CarerResponseDto)

apps/frontend/src/api.gen.ts

@@ -740,16 +740,12 @@ export interface components {
              * @example 2024-11-01T08:00:00.00Z
              */
             endedAt: string;
-            /**
-             * @description The weekday of the entry (Sunday is 0 like in JS)
-             * @example 1
-             */
-            weekday: number;
             /**
              * @description The weekly recurring of the entry
              * @example 1
              */
             weeklyRecurring?: number;
+            weekday: number[];
             carer: number;
             questionnaire: number;
             entryLanguages: components["schemas"]["EntryLanguageCreationDto"][];
@@ -765,11 +761,6 @@ export interface components {
              * @example 2024-11-01T08:00:00.00Z
              */
             endedAt: string;
-            /**
-             * @description The weekday of the entry (Sunday is 0 like in JS)
-             * @example 1
-             */
-            weekday: number;
             /**
              * @description The weekly recurring of the entry
              * @example 1
@@ -780,10 +771,15 @@ export interface components {
              * @example 1
              */
             id: number;
+            /**
+             * @description The weekday of the entry (Sunday is 0 like in JS)
+             * @example 1
+             */
+            weekday: number;
             carer: components["schemas"]["CarerResponseDto"];
             entryLanguages: components["schemas"]["EntryLanguageResponseDto"][];
         };
-        EntryMutationDto: {
+        EntryUpdateDto: {
             /**
              * @description The starting date of the entry
              * @example 2024-11-01T07:00:00.000Z
@@ -794,11 +790,6 @@ export interface components {
              * @example 2024-11-01T08:00:00.00Z
              */
             endedAt?: string;
-            /**
-             * @description The weekday of the entry (Sunday is 0 like in JS)
-             * @example 1
-             */
-            weekday?: number;
             /**
              * @description The weekly recurring of the entry
              * @example 1
@@ -1828,7 +1819,7 @@ export interface operations {
                     [name: string]: unknown;
                 };
                 content: {
-                    "application/json": components["schemas"]["EntryResponseDto"];
+                    "application/json": number[];
                 };
             };
             /** @description Unique name constraint violation */
@@ -1893,7 +1884,7 @@ export interface operations {
         };
         requestBody: {
             content: {
-                "application/json": components["schemas"]["EntryMutationDto"];
+                "application/json": components["schemas"]["EntryUpdateDto"];
             };
         };
         responses: {

apps/frontend/src/components/WeekdayPicker.tsx

@@ -1,38 +1,53 @@
-import { SegmentedControl } from "@quassel/ui";
+import { Chip, Group, Select } from "@quassel/ui";
 import { i18n } from "../stores/i18n";
 import { useStore } from "@nanostores/react";
 
-type WeekdayPickerProps = {
-  value?: number;
-  onChange?: (weekday: number) => void;
-};
+type WeekdayPickerProps =
+  | { value?: number; onChange?: (weekday?: number) => void; multiple?: false }
+  | { value?: number[]; onChange?: (weekday: number[]) => void; multiple: true };
 
 const messages = i18n("WeekdayPicker", {
-  mondayLabel: "Mo",
-  tusedayLabel: "Tu",
-  wednesdayLabel: "We",
-  thrusdayLabel: "Th",
-  fridayLabel: "Fr",
-  saturdayLabel: "Sa",
-  sundayLabel: "Su",
+  mondayShortLabel: "Mo",
+  mondayLabel: "Monday",
+  tusedayShortLabel: "Tu",
+  tusedayLabel: "Tuesday",
+  wednesdayShortLabel: "We",
+  wednesdayLabel: "Wednesday",
+  thursdayShortLabel: "Th",
+  thursdayLabel: "Thursday",
+  fridayShortLabel: "Fr",
+  fridayLabel: "Friday",
+  saturdayShortLabel: "Sa",
+  saturdayLabel: "Saturday",
+  sundayShortLabel: "Su",
+  sundayLabel: "Sunday",
 });
 
-export function WeekdayPicker({ onChange, value }: WeekdayPickerProps) {
+export function WeekdayPicker({ onChange, value, multiple }: WeekdayPickerProps) {
   const t = useStore(messages);
 
-  return (
-    <SegmentedControl
-      value={value?.toString()}
-      onChange={(value) => onChange?.(parseInt(value))}
-      data={[
-        { value: "1", label: t.mondayLabel },
-        { value: "2", label: t.tusedayLabel },
-        { value: "3", label: t.wednesdayLabel },
-        { value: "4", label: t.thrusdayLabel },
-        { value: "5", label: t.fridayLabel },
-        { value: "6", label: t.saturdayLabel },
-        { value: "0", label: t.sundayLabel },
-      ]}
-    />
-  );
+  const weekdayOptions = [
+    { value: "1", label: t.mondayLabel, short: t.mondayShortLabel },
+    { value: "2", label: t.tusedayLabel, short: t.tusedayShortLabel },
+    { value: "3", label: t.wednesdayLabel, short: t.wednesdayShortLabel },
+    { value: "4", label: t.thursdayLabel, short: t.thursdayShortLabel },
+    { value: "5", label: t.fridayLabel, short: t.fridayShortLabel },
+    { value: "6", label: t.saturdayLabel, short: t.saturdayShortLabel },
+    { value: "0", label: t.sundayLabel, short: t.sundayShortLabel },
+  ];
+
+  if (multiple)
+    return (
+      <Chip.Group multiple value={value?.map((v) => v.toString())} onChange={(values) => onChange?.(values.map(Number))}>
+        <Group gap={"xs"}>
+          {weekdayOptions.map(({ value, short }) => (
+            <Chip key={value} value={value.toString()}>
+              {short}
+            </Chip>
+          ))}
+        </Group>
+      </Chip.Group>
+    );
+
+  return <Select data={weekdayOptions} value={value?.toString()} onChange={(v) => onChange?.(v ? parseInt(v) : undefined)} />;
 }

apps/frontend/src/components/questionnaire/QuestionnaireEntries.tsx

@@ -62,7 +62,7 @@ export function QuestionnaireEntries({ questionnaire, gaps }: QuestionnaireEntri
   const handleCreate = (entry: EntryFormValues) => {
     const entryRequest = { ...entry, questionnaire: questionnaire.id };
 
-    return createMutation.mutateAsync({ body: entryRequest }, { onSuccess: reloadEntries });
+    return createMutation.mutateAsync({ body: entryRequest as components["schemas"]["EntryCreationDto"] }, { onSuccess: reloadEntries });
   };
 
   const handleUpdate = (id: number, entry: Partial<EntryFormValues>) => {

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

@@ -77,8 +77,7 @@ export function EntryCalendar({
 
   const [opened, { open, close }] = useDisclosure();
 
-  const [entryUpdatingId, setEntryUpdadingId] = useState<number>();
-  const [entryDraft, setEntryDraft] = useState<Partial<EntryFormValues>>();
+  const [entryDraft, setEntryDraft] = useState<{ id?: number; value: Partial<EntryFormValues> }>();
 
   const [events, setEvents] = useState<ExtendedEvent[]>([]);
 
@@ -134,23 +133,24 @@ export function EntryCalendar({
     const { carer, entryLanguages, id, weekday, ...rest } = entries?.find((entry) => entry.id.toString() === event.id) ?? {};
 
     setEntryDraft({
-      carer: carer?.id,
-      entryLanguages: entryLanguages?.map(({ language, ...rest }) => ({ ...rest, language: language.id })),
-      ...rest,
-      startedAt: getTime(event.start!),
-      endedAt: getTime(event.end!),
-      weekday,
+      id,
+      value: {
+        carer: carer?.id,
+        entryLanguages: entryLanguages?.map(({ language, ...rest }) => ({ ...rest, language: language.id })),
+        ...rest,
+        startedAt: getTime(event.start!),
+        endedAt: getTime(event.end!),
+        weekday,
+      },
     });
-    setEntryUpdadingId(id);
     open();
   };
 
   const setupEntryCreate = ({ start, end }: DateSelectArg | EventImpl) => {
     if (!start || !end) return;
     if (end.getHours() === 0 && end.getMinutes() === 0) end.setTime(end.getTime() - 1000);
 
-    setEntryDraft({ startedAt: getTime(start), endedAt: getTime(end), weekday: start!.getDay() });
-    setEntryUpdadingId(undefined);
+    setEntryDraft({ value: { startedAt: getTime(start), endedAt: getTime(end), weekday: [start!.getDay()] } });
     open();
   };
 
@@ -170,28 +170,30 @@ export function EntryCalendar({
   };
 
   const handleOnSave = async (entry: EntryFormValues) => {
-    if (!entryUpdatingId) {
-      await onAddEntry(entry);
+    if (entryDraft?.id) {
+      await onUpdateEntry(entryDraft.id, entry);
     } else {
-      await onUpdateEntry(entryUpdatingId, entry);
+      await onAddEntry(entry);
     }
     close();
   };
 
   return (
     <>
-      <Modal opened={opened} onClose={close} size="md">
-        <EntityForm
-          onAddCarer={onAddCarer}
-          onAddLanguage={onAddLanguage}
-          onSave={handleOnSave}
-          onDelete={entryUpdatingId ? () => onDeleteEntry(entryUpdatingId).then(close) : undefined}
-          entry={entryDraft}
-          carers={carers}
-          languages={languages}
-          templates={templates}
-          actionLabel={entryUpdatingId ? t.actionUpdate : t.actionAdd}
-        />
+      <Modal opened={opened} onClose={close} size="lg">
+        {entryDraft && (
+          <EntityForm
+            onAddCarer={onAddCarer}
+            onAddLanguage={onAddLanguage}
+            onSave={handleOnSave}
+            onDelete={entryDraft?.id ? () => onDeleteEntry(entryDraft.id!).then(close) : undefined}
+            entry={entryDraft.value}
+            carers={carers}
+            languages={languages}
+            templates={templates}
+            actionLabel={entryDraft?.id ? t.actionUpdate : t.actionAdd}
+          />
+        )}
       </Modal>
       <FullCalendar
         {...calendarBaseConfig}
@@ -202,8 +204,7 @@ export function EntryCalendar({
           <Button
             variant="subtle"
             onClick={() => {
-              setEntryDraft({ weekday: date.getDay() });
-              setEntryUpdadingId(undefined);
+              setEntryDraft({ value: { weekday: [date.getDay()] } });
               open();
             }}
           >