From 602acedccad8442e0c45c3031d49f46836746943 Mon Sep 17 00:00:00 2001
From: Peter Beverloo <pbeverloo@gmail.com>
Date: Tue, 23 Jan 2024 21:46:21 +0000
Subject: [PATCH] Enable date editing fields for training sessions

---
 .../[slug]/training/TrainingConfiguration.tsx | 20 ++++++++++++++++---
 app/lib/DateTime.ts                           | 16 +++++++++++++++
 2 files changed, 33 insertions(+), 3 deletions(-)

diff --git a/app/admin/events/[slug]/training/TrainingConfiguration.tsx b/app/admin/events/[slug]/training/TrainingConfiguration.tsx
index 637ecfa5..d5e509fc 100644
--- a/app/admin/events/[slug]/training/TrainingConfiguration.tsx
+++ b/app/admin/events/[slug]/training/TrainingConfiguration.tsx
@@ -14,7 +14,7 @@ import type { TrainingsRowModel } from '@app/api/admin/trainings/[[...id]]/route
 import type { UpdatePublicationDefinition } from '@app/api/admin/updatePublication';
 import { PublishAlert } from '@app/admin/components/PublishAlert';
 import { RemoteDataTable, type RemoteDataTableColumn } from '@app/admin/components/RemoteDataTable';
-import { dayjs } from '@lib/DateTime';
+import { dayjs, fromLocalDate, toLocalDate } from '@lib/DateTime';
 import { issueServerAction } from '@lib/issueServerAction';
 
 /**
@@ -62,22 +62,36 @@ export function TrainingConfiguration(props: TrainingConfigurationProps) {
         {
             field: 'start',
             headerName: 'Date (start time)',
+            type: 'dateTime',
             editable: true,
             sortable: true,
             flex: 2,
 
+            valueGetter: params => toLocalDate(params.row.start, event.timezone),
+            valueSetter: params => ({
+                ...params.row,
+                start: fromLocalDate(params.value, event.timezone)
+            }),
+
             renderCell: params =>
-                dayjs(params.value).tz(event.timezone).format('YYYY-MM-DD [at] H:mm'),
+                dayjs.utc(params.row.start).tz(event.timezone).format('YYYY-MM-DD [at] H:mm'),
         },
         {
             field: 'end',
             headerName: 'Date (end time)',
+            type: 'dateTime',
             editable: true,
             sortable: true,
             flex: 2,
 
+            valueGetter: params => toLocalDate(params.row.end, event.timezone),
+            valueSetter: params => ({
+                ...params.row,
+                end: fromLocalDate(params.value, event.timezone)
+            }),
+
             renderCell: params =>
-                dayjs(params.value).tz(event.timezone).format('YYYY-MM-DD [at] H:mm'),
+                dayjs(params.row.end).tz(event.timezone).format('YYYY-MM-DD [at] H:mm'),
         },
         {
             field: 'address',
diff --git a/app/lib/DateTime.ts b/app/lib/DateTime.ts
index 7fd11108..cc827468 100644
--- a/app/lib/DateTime.ts
+++ b/app/lib/DateTime.ts
@@ -39,3 +39,19 @@ dayjs.updateLocale('en', {
  * Date and time representation that we use throughout the Volunteer Manager.
  */
 export type DateTime = dayjs.Dayjs;
+
+/**
+ * Converts the given `date`, representing a particular date and time in the user's local timezone,
+ * to a string representing that moment in UTC.
+ */
+export function fromLocalDate(date: Date, dateTimezone: string): string {
+    return dayjs(date).tz(dateTimezone, true).toISOString();
+}
+
+/**
+ * Converts the given `dayjs` to a local Date instance representing the correct date and time. This
+ * function is intended to be used for editable fields in <DataTable> and <RemoteDataTable>.
+ */
+export function toLocalDate(date: string, dateTimezone: string): Date {
+    return dayjs.utc(date).tz(dateTimezone).tz(undefined, true).toDate();
+}