Enable date editing fields for training sessions

beverloo · Jan 23, 2024 · 602aced · 602aced
1 parent b19edd7
commit 602aced
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 3 deletions.
diff --git 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
@@ -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();
+}