Merge pull request #215 from openscript-ch/16-implement-gap-detection-logic

16 implement gap detection logic

Author: openscript

.changeset/dirty-knives-appear.md

@@ -0,0 +1,5 @@
+---
+"@quassel/frontend": patch
+---
+
+Add validation and highlighting for gaps in calendar

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

@@ -1,14 +1,16 @@
 import FullCalendar from "@fullcalendar/react";
 import interactionPlugin from "@fullcalendar/interaction";
 import timeGridPlugin from "@fullcalendar/timegrid";
-import { EventChangeArg, EventInput } from "@fullcalendar/core";
+import { DateSelectArg, EventChangeArg, EventInput } from "@fullcalendar/core";
 import { formatDate, getDateFromTimeAndWeekday, getTime, isSame, Modal, useDisclosure, useMantineTheme } from "@quassel/ui";
 import { QuestionnaireEntry } from "./QuestionnaireEntry";
 import { components } from "../../../api.gen";
 import { EntityForm, EntryFormValues } from "./EntryForm";
 import { useEffect, useState } from "react";
 import { i18n } from "../../../stores/i18n";
 import { useStore } from "@nanostores/react";
+import { GapsPerDay } from "../../../utils/entry";
+import { EventImpl } from "@fullcalendar/core/internal";
 
 const calendarBaseConfig: FullCalendar["props"] = {
   allDaySlot: false,
@@ -27,10 +29,13 @@ const calendarBaseConfig: FullCalendar["props"] = {
   eventLongPressDelay: 400,
 };
 
-export type ExtendedEvent = EventInput & { extendedProps: { entryLanguages: components["schemas"]["EntryLanguageResponseDto"][] } };
+export type ExtendedEvent = EventInput & {
+  extendedProps?: { entryLanguages: components["schemas"]["EntryLanguageResponseDto"][]; weeklyRecurring?: number };
+};
 
 export type EntryCalendarProps = {
   entries: components["schemas"]["QuestionnaireEntryDto"][];
+  gaps?: GapsPerDay;
   onAddEntry: (entry: EntryFormValues, weekday: number) => Promise<unknown>;
   onUpdateEntry: (id: number, entry: Partial<EntryFormValues>, weekday: number) => Promise<unknown>;
   onDeleteEntry: (id: number) => Promise<unknown>;
@@ -47,6 +52,7 @@ const messages = i18n("entryCalendar", {
 
 export function EntryCalendar({
   entries,
+  gaps,
   onAddEntry,
   onUpdateEntry,
   onDeleteEntry,
@@ -69,19 +75,48 @@ export function EntryCalendar({
 
   useEffect(() => {
     if (entries) {
-      setEvents(
-        entries.map(({ startedAt, endedAt, weekday, carer, entryLanguages, id }) => ({
+      setEvents([
+        ...entries.map(({ startedAt, endedAt, weekday, carer, weeklyRecurring, entryLanguages, id }) => ({
           id: id.toString(),
           start: getDateFromTimeAndWeekday(startedAt, weekday),
           end: getDateFromTimeAndWeekday(endedAt, weekday),
           title: carer.name,
-          extendedProps: { entryLanguages },
+          extendedProps: { entryLanguages, weeklyRecurring },
           backgroundColor: carer.color ?? theme.colors[theme.primaryColor][4],
           borderColor: carer.color ?? theme.colors[theme.primaryColor][4],
-        })) ?? []
-      );
+        })),
+        ...(gaps ?? []).flatMap((dailyGaps, index) =>
+          dailyGaps.map((gap) => ({
+            start: getDateFromTimeAndWeekday(gap[0], index),
+            end: getDateFromTimeAndWeekday(gap[1], index),
+            backgroundColor: theme.colors.uzhBerry[4],
+            display: "background",
+          }))
+        ),
+      ]);
     }
-  }, [entries]);
+  }, [entries, gaps]);
+
+  const setupEntryUpdate = (event: EventImpl) => {
+    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!),
+    });
+    setSelectedWeekday(weekday);
+    setEntryUpdadingId(id);
+    open();
+  };
+
+  const setupEntryCreate = ({ start, end }: DateSelectArg | EventImpl) => {
+    setEntryDraft({ startedAt: getTime(start!), endedAt: getTime(end!) });
+    setSelectedWeekday(start!.getDay());
+    open();
+  };
 
   const handleEventChange = ({ event }: EventChangeArg) => {
     const { id, start, end } = event;
@@ -119,24 +154,13 @@ export function EntryCalendar({
         {...calendarBaseConfig}
         plugins={[timeGridPlugin, interactionPlugin]}
         events={events}
-        select={({ start, end }) => {
-          setEntryDraft({ startedAt: getTime(start), endedAt: getTime(end) });
-          setSelectedWeekday(start.getDay());
-          open();
-        }}
+        select={setupEntryCreate}
         eventClick={({ event }) => {
-          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!),
-          });
-          setSelectedWeekday(weekday);
-          setEntryUpdadingId(id);
-          open();
+          if (event.display === "background") {
+            setupEntryCreate(event);
+          } else {
+            setupEntryUpdate(event);
+          }
         }}
         eventChange={handleEventChange}
         eventContent={({ event }) => <QuestionnaireEntry event={event} />}

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

@@ -14,7 +14,7 @@ const messages = i18n("questionnaireEntries", {
 });
 
 export function QuestionnaireEntry({ event }: QuestionnaireEntryProps) {
-  const { entryLanguages, weeklyRecurring } = event.extendedProps as ExtendedEvent["extendedProps"];
+  const { entryLanguages, weeklyRecurring } = (event.extendedProps as ExtendedEvent["extendedProps"]) ?? {};
 
   const t = useStore(messages);
 
@@ -23,7 +23,7 @@ export function QuestionnaireEntry({ event }: QuestionnaireEntryProps) {
       <Text size="sm" fw="bold" truncate>
         {event.title}
       </Text>
-      {entryLanguages.map(({ language }) => language.ietfBcp47).join(", ")}
+      {entryLanguages?.map(({ language }) => language.ietfBcp47).join(", ")}
       {weeklyRecurring && weeklyRecurring > 1 && (
         <Text mt="sm" size="sm">
           <IconRepeat size={13} /> {t.labelRecurringWeekly({ weeks: weeklyRecurring })}

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

@@ -1,18 +1,24 @@
-import { Button, Group, Stack, notifications } from "@quassel/ui";
+import { Button, Group, Modal, Stack, notifications, useDisclosure, useForm } from "@quassel/ui";
 import { createFileRoute, Link, useNavigate } from "@tanstack/react-router";
 import { i18n } from "../../../../../stores/i18n";
 import { useStore } from "@nanostores/react";
 import { $api } from "../../../../../stores/api";
 import { EntryFormValues } from "../../../../../components/questionnaire/calendar/EntryForm";
 import { useQueryClient } from "@tanstack/react-query";
 import { EntryCalendar } from "../../../../../components/questionnaire/calendar/EntryCalendar";
+import { useEffect, useState } from "react";
+import { components } from "../../../../../api.gen";
+import { GapsPerDay, resolveGaps } from "../../../../../utils/entry";
 
 const messages = i18n("questionnaireEntries", {
   formAction: "Continue",
   backAction: "Back",
   addEntityLabel: "Add",
   notificationSuccessCreateLanguage: "Successfully add a new language.",
   notificationSuccessCreateCarer: "Successfully add a new carer.",
+  gapsDialogTitle: "Gaps detected in the calendar",
+  gapsDialogContinueAnyway: "Continue anyway",
+  gapsDialogHighlightGaps: "Highlight gaps",
 });
 
 function QuestionnaireEntries() {
@@ -76,16 +82,57 @@ function QuestionnaireEntries() {
     return deleteMutation.mutateAsync({ params: { path: { id: id.toString() } } }, { onSuccess: reloadEntries });
   };
 
+  const [gaps, setGaps] = useState<GapsPerDay>();
+  const [highlightGaps, setHighlightGaps] = useState(false);
+  const [gapsDialogOpened, { open, close }] = useDisclosure();
+
+  const f = useForm<{ entries: components["schemas"]["QuestionnaireEntryDto"][] }>({
+    initialValues: {
+      entries: [],
+    },
+    validate: {
+      entries: (value) => {
+        const gaps = resolveGaps(value);
+        setGaps(gaps);
+
+        const hasGaps = gaps.some(({ length }) => length);
+        if (hasGaps) open();
+
+        return hasGaps;
+      },
+    },
+  });
+
   const handleSubmit = () => {
     n({ to: "/questionnaire/$id/remarks", params: p });
   };
 
+  useEffect(() => {
+    f.setValues({ entries: questionnaire.entries });
+  }, [questionnaire]);
+
   return (
     <>
-      <form onSubmit={handleSubmit}>
+      <form onSubmit={f.onSubmit(handleSubmit)}>
         <Stack>
+          <Modal opened={gapsDialogOpened} onClose={close} centered title={t.gapsDialogTitle}>
+            <Group justify="flex-end">
+              <Button onClick={handleSubmit} variant="light" type="submit">
+                {t.gapsDialogContinueAnyway}
+              </Button>
+              <Button
+                onClick={() => {
+                  setHighlightGaps(true);
+                  close();
+                }}
+              >
+                {t.gapsDialogHighlightGaps}
+              </Button>
+            </Group>
+          </Modal>
           <EntryCalendar
             entries={questionnaire.entries ?? []}
+            gaps={highlightGaps ? gaps : undefined}
             onAddEntry={handleCreate}
             onUpdateEntry={handleUpdate}
             onDeleteEntry={handleDelete}

apps/frontend/src/utils/entry.ts

@@ -0,0 +1,30 @@
+import { components } from "../api.gen";
+
+export type Entry = components["schemas"]["QuestionnaireEntryDto"];
+export type Gap = [string, string];
+export type GapsPerDay = [Gap[], Gap[], Gap[], Gap[], Gap[], Gap[], Gap[]];
+
+const groupByWeekday = (entries: Entry[]) =>
+  entries.reduce<Entry[][]>((acc, cur) => {
+    acc[cur.weekday] = [...(acc[cur.weekday] ?? []), cur];
+    return acc;
+  }, []);
+
+export const resolveGaps = (entries: Entry[]) => groupByWeekday(entries).map(resolveGapsInDay) as GapsPerDay;
+
+// inspired by: https://cs.stackexchange.com/questions/133276/algorithm-to-compute-the-gaps-between-a-set-of-intervals
+export const resolveGapsInDay = (entriesOfSameDay: Entry[]) => {
+  const entriesSortedByStart = entriesOfSameDay.toSorted((a, b) => a.startedAt.localeCompare(b.startedAt));
+
+  const gaps: Gap[] = [];
+  let lastCoveredTime = entriesSortedByStart[0]?.endedAt;
+
+  for (const entry of entriesSortedByStart) {
+    if (entry.startedAt > lastCoveredTime) {
+      gaps.push([lastCoveredTime, entry.startedAt]);
+    }
+    lastCoveredTime = lastCoveredTime > entry.endedAt ? lastCoveredTime : entry.endedAt;
+  }
+
+  return gaps;
+};

apps/frontend/test/utils/entry.test.ts

@@ -0,0 +1,67 @@
+import { beforeEach, describe, expect, it } from "vitest";
+import { Entry, resolveGaps, resolveGapsInDay } from "../../src/utils/entry";
+
+describe("entry utils", () => {
+  let entries: Partial<Entry>[];
+
+  beforeEach(() => {
+    entries = [
+      { startedAt: "08:00", endedAt: "10:00", weekday: 1 },
+      { startedAt: "12:00", endedAt: "14:00", weekday: 1 },
+    ];
+  });
+
+  it("should detect no gaps if there are no entries", () => {
+    const gaps = resolveGapsInDay([]);
+
+    expect(gaps).toEqual([]);
+  });
+
+  it("should detect gap between two entries", () => {
+    const gaps = resolveGapsInDay(entries as Entry[]);
+
+    expect(gaps).toEqual([["10:00", "12:00"]]);
+  });
+
+  it("shouldn't detect gap with overlapping entries", () => {
+    entries.push({ startedAt: "09:00", endedAt: "13:00" });
+
+    const gaps = resolveGapsInDay(entries as Entry[]);
+
+    expect(gaps).toEqual([]);
+  });
+
+  it("should detect gap with overlapping entries", () => {
+    entries.push({ startedAt: "09:00", endedAt: "11:00" });
+
+    const gaps = resolveGapsInDay(entries as Entry[]);
+
+    expect(gaps).toEqual([["11:00", "12:00"]]);
+  });
+
+  it("should detect gaps with entries in diffrent sort order", () => {
+    entries = entries.toReversed();
+
+    const gaps = resolveGapsInDay(entries as Entry[]);
+
+    expect(gaps).toEqual([["10:00", "12:00"]]);
+  });
+
+  it("should detect multiple gaps", () => {
+    entries.push({ startedAt: "15:00", endedAt: "16:00" });
+
+    const gaps = resolveGapsInDay(entries as Entry[]);
+
+    expect(gaps.length).toBe(2);
+  });
+
+  it("should detect gaps for multiple weekdays", () => {
+    entries.push({ startedAt: "08:00", endedAt: "10:00", weekday: 2 });
+    entries.push({ startedAt: "12:00", endedAt: "14:00", weekday: 2 });
+
+    const gapsPerDay = resolveGaps(entries as Entry[]);
+
+    expect(gapsPerDay[1]).toHaveLength(1);
+    expect(gapsPerDay[2]).toHaveLength(1);
+  });
+});