From 01c895f7ba4b609997778eac9d995b4676b86919 Mon Sep 17 00:00:00 2001
From: Scott Idem <stidem@gmail.com>
Date: Thu, 2 Apr 2026 13:56:06 -0400
Subject: [PATCH] feat(pres_mgmt): make session start/end datetime editable in
 edit mode
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

start_datetime and end_datetime were visible as chips but had no edit control.
Added two datetime-local field editors shown in edit_mode below the display chip:

- Converts stored "YYYY-MM-DD HH:mm:ss" → "YYYY-MM-DDTHH:MM" for the input
  (safe because dayjs has no timezone plugin — times are stored as local time)
- Falls back to event start date + 08:00/09:00 when session datetime is null,
  so staff only need to adjust the time rather than retype the full date
- Editors are side-by-side in a flex-wrap row with min-width so they wrap on mobile

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../session/[session_id]/session_view.svelte  | 80 +++++++++++++++++++
 1 file changed, 80 insertions(+)

diff --git a/src/routes/events/[event_id]/(pres_mgmt)/session/[session_id]/session_view.svelte b/src/routes/events/[event_id]/(pres_mgmt)/session/[session_id]/session_view.svelte
index ba5bfd1e..8e8fb226 100644
--- a/src/routes/events/[event_id]/(pres_mgmt)/session/[session_id]/session_view.svelte
+++ b/src/routes/events/[event_id]/(pres_mgmt)/session/[session_id]/session_view.svelte
@@ -77,6 +77,33 @@ let location_select_options = $derived(
     )
 );
 
+// Event object — used to seed the default date for session datetime editors.
+let lq__event_obj = $derived(
+    liveQuery(async () => {
+        if (!current_event_id) return null;
+        return await db_events.event.get(current_event_id);
+    })
+);
+
+// Convert a stored datetime string (YYYY-MM-DD HH:mm:ss or ISO with T) to the
+// YYYY-MM-DDTHH:MM format required by <input type="datetime-local">.
+// WHY: dayjs has no timezone plugin here — DB stores local time strings,
+// datetime-local uses the same local time. Safe direct conversion.
+function to_datetime_local(raw: string | Date | null | undefined): string {
+    if (!raw) return '';
+    return ae_util.iso_datetime_formatter(raw, 'datetime_iso_no_seconds').replace(' ', 'T');
+}
+
+// Seed defaults from event start date (date only) so staff don't have to type
+// the date from scratch. Time defaults to 08:00 / 09:00 as a neutral placeholder.
+let event_start_date = $derived(
+    $lq__event_obj?.start_datetime
+        ? ae_util.iso_datetime_formatter($lq__event_obj.start_datetime, 'date_iso')
+        : ''
+);
+let default_start_datetime = $derived(event_start_date ? `${event_start_date}T08:00` : '');
+let default_end_datetime = $derived(event_start_date ? `${event_start_date}T09:00` : '');
+
 // QR Code Generation Logic
 $events_sess.pres_mgmt.session__updated_on = null;
 $effect(() => {
@@ -216,7 +243,60 @@ $effect(() => {
                             $events_loc.pres_mgmt.time_format
                         )}
                     </span>
+                </div>
 
+                <!-- Datetime editors — only in edit_mode, shown as a separate row below the
+                     display chip so they have enough room (datetime-local inputs are wide).
+                     current_value uses to_datetime_local() to convert stored "YYYY-MM-DD HH:mm:ss"
+                     → "YYYY-MM-DDTHH:MM" required by the input.
+                     Falls back to event start date + placeholder time when session datetime is empty,
+                     so staff only have to adjust the time rather than re-enter the full date. -->
+                {#if $ae_loc.edit_mode}
+                    <div class="flex flex-wrap gap-3">
+                        <div class="min-w-52 flex-1">
+                            <Element_ae_obj_field_editor
+                                display_block={true}
+                                object_type="event_session"
+                                object_id={$lq__event_session_obj.id}
+                                field_name="start_datetime"
+                                field_type="datetime"
+                                edit_label="Start Date & Time"
+                                current_value={to_datetime_local($lq__event_session_obj.start_datetime) || default_start_datetime}
+                                on_success={() =>
+                                    events_func.load_ae_obj_id__event_session({
+                                        api_cfg: $ae_api,
+                                        event_session_id: $lq__event_session_obj.id
+                                    })}>
+                                <span class="text-xs font-semibold opacity-60">
+                                    <Clock size="0.9em" class="inline mr-1" />Start:
+                                    {ae_util.iso_datetime_formatter($lq__event_session_obj.start_datetime, $events_loc.pres_mgmt.datetime_format)}
+                                </span>
+                            </Element_ae_obj_field_editor>
+                        </div>
+                        <div class="min-w-52 flex-1">
+                            <Element_ae_obj_field_editor
+                                display_block={true}
+                                object_type="event_session"
+                                object_id={$lq__event_session_obj.id}
+                                field_name="end_datetime"
+                                field_type="datetime"
+                                edit_label="End Date & Time"
+                                current_value={to_datetime_local($lq__event_session_obj.end_datetime) || default_end_datetime}
+                                on_success={() =>
+                                    events_func.load_ae_obj_id__event_session({
+                                        api_cfg: $ae_api,
+                                        event_session_id: $lq__event_session_obj.id
+                                    })}>
+                                <span class="text-xs font-semibold opacity-60">
+                                    <Clock size="0.9em" class="inline mr-1" />End:
+                                    {ae_util.iso_datetime_formatter($lq__event_session_obj.end_datetime, $events_loc.pres_mgmt.time_format)}
+                                </span>
+                            </Element_ae_obj_field_editor>
+                        </div>
+                    </div>
+                {/if}
+
+                <div class="flex flex-wrap items-center gap-2">
                     <!-- Room/Location: editable in edit_mode via select from this event's locations.
                          WHY: event_location_id is a FK — staff need to pick from known rooms,
                          not type a raw UUID. The liveQuery above loads locations for this event. -->