feat: highlight gaps in calendar

Author: stampaaaron

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

@@ -9,6 +9,7 @@ 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";
 
 const calendarBaseConfig: FullCalendar["props"] = {
   allDaySlot: false,
@@ -27,10 +28,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 +51,7 @@ const messages = i18n("entryCalendar", {
 
 export function EntryCalendar({
   entries,
+  gaps,
   onAddEntry,
   onUpdateEntry,
   onDeleteEntry,
@@ -69,18 +74,26 @@ export function EntryCalendar({
 
   useEffect(() => {
     if (entries) {
-      setEvents(
-        entries.map(({ startedAt, endedAt, weekday, carer, entryLanguages, id }) => ({
+      setEvents([
+        ...entries.map(({ startedAt, endedAt, weekday, carer, entryLanguages, id }) => ({
           id: id.toString(),
           start: getDateFromTimeAndWeekday(startedAt, weekday),
           end: getDateFromTimeAndWeekday(endedAt, weekday),
           title: carer.name,
           extendedProps: { entryLanguages },
           backgroundColor: 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 handleEventChange = ({ event }: EventChangeArg) => {
     const { id, start, end } = 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

@@ -6,9 +6,9 @@ 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 } from "react";
+import { useEffect, useState } from "react";
 import { components } from "../../../../../api.gen";
-import { resolveGaps } from "../../../../../utils/entry";
+import { GapsPerDay, resolveGaps } from "../../../../../utils/entry";
 
 const messages = i18n("questionnaireEntries", {
   formAction: "Continue",
@@ -26,20 +26,6 @@ function QuestionnaireEntries() {
 
   const c = useQueryClient();
 
-  const f = useForm<{ entries: components["schemas"]["QuestionnaireEntryDto"][] }>({
-    initialValues: {
-      entries: [],
-    },
-    validate: {
-      entries: (value) => {
-        const gaps = resolveGaps(value);
-        console.log(gaps);
-
-        return !!gaps.length;
-      },
-    },
-  });
-
   const createMutation = $api.useMutation("post", "/entries");
   const updateMutation = $api.useMutation("patch", "/entries/{id}");
   const deleteMutation = $api.useMutation("delete", "/entries/{id}");
@@ -93,6 +79,22 @@ function QuestionnaireEntries() {
     return deleteMutation.mutateAsync({ params: { path: { id: id.toString() } } }, { onSuccess: reloadEntries });
   };
 
+  const [gaps, setGaps] = useState<GapsPerDay>();
+
+  const f = useForm<{ entries: components["schemas"]["QuestionnaireEntryDto"][] }>({
+    initialValues: {
+      entries: [],
+    },
+    validate: {
+      entries: (value) => {
+        const gaps = resolveGaps(value);
+        setGaps(gaps);
+
+        return gaps.some((dailyGaps) => dailyGaps.length);
+      },
+    },
+  });
+
   const handleSubmit = () => {
     n({ to: "/questionnaire/$id/remarks", params: p });
   };
@@ -107,6 +109,7 @@ function QuestionnaireEntries() {
         <Stack>
           <EntryCalendar
             entries={questionnaire.entries ?? []}
+            gaps={gaps}
             onAddEntry={handleCreate}
             onUpdateEntry={handleUpdate}
             onDeleteEntry={handleDelete}

apps/frontend/src/utils/entry.ts

@@ -1,20 +1,22 @@
 import { components } from "../api.gen";
 
 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);
+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
 const resolveGapsInDay = (entriesOfSameDay: Entry[]) => {
   const entriesSortedByStart = entriesOfSameDay.toSorted((a, b) => a.startedAt.localeCompare(b.startedAt));
 
-  const gaps: [string, string][] = [];
+  const gaps: Gap[] = [];
   let lastCoveredTime = entriesSortedByStart[0]?.endedAt;
 
   for (const entry of entriesSortedByStart) {