Scott.Idem/OSIT-AE-App-Svelte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(pres_mgmt): make session start/end datetime editable in edit mode

Browse Source 
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>
This commit is contained in:
Scott Idem
2026-04-02 13:56:06 -04:00
parent 3a4c4a1e64
commit 01c895f7ba
1 changed files with 80 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
src/routes/events/[event_id]/(pres_mgmt)/session/[session_id]/session_view.svelte
View File

@@ -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. -->