Merge pull request #372 from openscript-ch/324-problems-with-adjusting-caregiver-settings-at-the-end-of-the-day-2

324 problems with adjusting caregiver settings at the end of the day 2

Author: openscript

.changeset/fuzzy-hounds-create.md

@@ -0,0 +1,8 @@
+---
+"@quassel/frontend": patch
+"@quassel/backend": patch
+"@quassel/utils": patch
+"@quassel/ui": patch
+---
+
+Improve calendering

apps/backend/project.json

@@ -13,5 +13,6 @@
         }
       ]
     }
-  }
+  },
+  "implicitDependencies": ["@quassel/utils"]
 }

apps/backend/src/main.ts

@@ -13,7 +13,7 @@ async function bootstrap() {
   app.enableCors({
     credentials: true,
     origin: configService.get("cors.origin"),
-    methods: ["GET", "POST", "PUT", "DELETE"],
+    methods: ["GET", "POST", "PUT", "PATCH", "DELETE"],
     exposedHeaders: ["Content-Disposition"],
   });
   app.enableShutdownHooks();

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

@@ -3,7 +3,7 @@ import interactionPlugin from "@fullcalendar/interaction";
 import timeGridPlugin from "@fullcalendar/timegrid";
 import { DateSelectArg, EventChangeArg, EventInput } from "@fullcalendar/core";
 import { Button, Modal, useDisclosure, useMantineTheme } from "@quassel/ui";
-import { GapsPerDay, getDateFromTimeAndWeekday, getTime, groupByWeekday, isSame } from "@quassel/utils";
+import { GapsPerDay, getDateFromTimeAndWeekday, getNext, getTime, groupByWeekday, isSame } from "@quassel/utils";
 import { QuestionnaireEntry } from "./QuestionnaireEntry";
 import { components } from "../../../api.gen";
 import { EntityForm, EntryFormValues } from "./EntryForm";
@@ -22,10 +22,13 @@ const calendarBaseConfig: FullCalendar["props"] = {
   slotMaxTime: C.calendar.maxTime,
   slotDuration: { hour: 1 },
   firstDay: 1,
-  locale: "de",
+  locale: "en-GB",
   expandRows: true,
   editable: true,
-  selectAllow: ({ start, end }) => isSame("day", start, end),
+  selectAllow: ({ start, end }) => {
+    end.setTime(end.getTime() - 1000);
+    return isSame("day", start, end);
+  },
   selectable: true,
   selectLongPressDelay: 200,
   eventLongPressDelay: 400,
@@ -116,7 +119,7 @@ export function EntryCalendar({
             },
             {
               start: getDateFromTimeAndWeekday(maxEnd, index),
-              end: getDateFromTimeAndWeekday("23:00:00", index),
+              end: getDateFromTimeAndWeekday("23:59:59", index),
               backgroundColor: theme.colors.uzhBlue[9],
               className: styles.eventSleepIndicator,
               display: "background",
@@ -143,15 +146,21 @@ export function EntryCalendar({
   };
 
   const setupEntryCreate = ({ start, end }: DateSelectArg | EventImpl) => {
-    setEntryDraft({ startedAt: getTime(start!), endedAt: getTime(end!), weekday: start!.getDay() });
+    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);
     open();
   };
 
-  const handleEventChange = ({ event }: EventChangeArg) => {
-    const { id, start, end } = event;
+  const handleEventChange = ({ event: { id, start, end } }: EventChangeArg) => {
     if (!start || !end) return;
 
+    if (end.getMinutes() === 59 && end.getHours() < 23) {
+      end = getNext("hour", end);
+    }
+
     const startTime = getTime(start) < C.calendar.minTime ? C.calendar.minTime : getTime(start);
     const endTime = isSame("day", start, end) ? getTime(end) : C.calendar.maxTime;
 

apps/frontend/src/configuration.ts

@@ -14,6 +14,6 @@ export const C = {
   },
   calendar: {
     minTime: "05:00",
-    maxTime: "23:00",
+    maxTime: "23:59",
   },
 };

libs/utils/src/date.ts

@@ -1,9 +1,11 @@
 import dayjs from "dayjs";
 import utc from "dayjs/plugin/utc";
 import customParseFormat from "dayjs/plugin/customParseFormat";
+import isoWeek from "dayjs/plugin/isoWeek";
 
 dayjs.extend(utc);
 dayjs.extend(customParseFormat);
+dayjs.extend(isoWeek);
 
 export function formatDate(date: Date, dayjsFormatTemplate: string) {
   return dayjs(date).format(dayjsFormatTemplate);
@@ -20,7 +22,6 @@ export const isSameOrAfter = (left: Date, right: Date, unit: dayjs.ManipulateTyp
 
 export function getDateFromTimeAndWeekday(time: string, weekday: number) {
   return dayjs(time, "HH:mm:ss")
-    .set("day", weekday)
-    .add(weekday === 0 ? 1 : 0, "week")
+    .isoWeekday(weekday === 0 ? 7 : weekday)
     .toDate();
 }

libs/utils/vite.config.ts

@@ -15,6 +15,7 @@ export default defineConfig({
           dayjs: "dayjs",
           "dayjs/plugin/utc.js": "dayjsPluginUtc",
           "dayjs/plugin/customParseFormat.js": "dayjsPluginCustomParseFormat",
+          "dayjs/plugin/isoWeek.js": "dayjsPluginIsoWeek",
         },
       },
     },