From d23f9073c4c90474e8aaa359194fb7f94b5a1922 Mon Sep 17 00:00:00 2001
From: Scott Idem <stidem@gmail.com>
Date: Tue, 16 Jun 2026 18:14:14 -0400
Subject: [PATCH] feat(pres_mgmt): automate Session POC loading and enhance
 field editor UX

- Updated Element_ae_obj_field_editor_new.svelte with on_open callback support.
- Improved Select field UX in the editor with an inline loading spinner when options are empty.
- Streamlined session_view.svelte by using on_open to trigger person record loading automatically.
- Removed redundant manual 'Select Person' button in favor of automated lazy-loading.
---
 .../element_ae_obj_field_editor_new.svelte    | 36 +++++----
 .../session/[session_id]/session_view.svelte  | 77 +++++++++----------
 2 files changed, 61 insertions(+), 52 deletions(-)

diff --git a/src/lib/elements/element_ae_obj_field_editor_new.svelte b/src/lib/elements/element_ae_obj_field_editor_new.svelte
index 33b18fa2..e9282797 100644
--- a/src/lib/elements/element_ae_obj_field_editor_new.svelte
+++ b/src/lib/elements/element_ae_obj_field_editor_new.svelte
@@ -155,7 +155,6 @@ function coerce_select_value(raw: string, reference: T): any {
 }
 
 // Internal State
-// is_editing is a $bindable prop (declared above) — not a local $state.
 let patch_status = $state<'idle' | 'processing' | 'success' | 'error'>('idle');
 let error_message = $state('');
 let draft_value = $state(to_input_value(current_value, field_type));
@@ -244,6 +243,7 @@ function toggle_edit() {
         has_optimistic = false;
         draft_value = to_input_value(current_value, field_type);
         is_editing = true;
+        if (on_open) on_open();
     }
 }
 
@@ -329,19 +329,29 @@ function handle_keydown(e: KeyboardEvent) {
                         class="textarea"
                         {placeholder}></textarea>
                 {:else if field_type === 'select'}
-                    <select 
-                        {id}
-                        bind:this={input_ref}
-                        value={draft_value}
-                        onchange={(e) => draft_value = coerce_select_value(e.currentTarget.value, current_value)}
-                        class="select">
-                        {#if allow_null}
-                            <option value={null}>-- None --</option>
+                    <div class="relative">
+                        <select 
+                            {id}
+                            bind:this={input_ref}
+                            value={draft_value}
+                            onchange={(e) => draft_value = coerce_select_value(e.currentTarget.value, current_value)}
+                            class="select pr-10">
+                            {#if allow_null}
+                                <option value={null}>-- None --</option>
+                            {/if}
+                            {#if Object.keys(select_options).length === 0}
+                                <option value="" disabled>Loading options...</option>
+                            {/if}
+                            {#each Object.entries(select_options) as [val, label] (val)}
+                                <option value={val}>{label}</option>
+                            {/each}
+                        </select>
+                        {#if Object.keys(select_options).length === 0}
+                            <div class="absolute inset-y-0 right-8 flex items-center">
+                                <LoaderCircle size="14" class="animate-spin opacity-50" />
+                            </div>
                         {/if}
-                        {#each Object.entries(select_options) as [val, label] (val)}
-                            <option value={val}>{label}</option>
-                        {/each}
-                    </select>
+                    </div>
                 {:else if field_type === 'checkbox'}
                     <label class="flex items-center space-x-2">
                         <input
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 d7d29dc4..2c185ddb 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
@@ -109,6 +109,9 @@ function to_datetime_local(raw: string | Date | null | undefined): string {
 // a session POC from known person records instead of typing IDs manually.
 async function load_person_options_for_session_poc() {
     if (!$slct.account_id) return;
+    // Don't reload if already loaded or loading
+    if (Object.keys($slct.person_obj_kv ?? {}).length > 1) return;
+    
     $slct.person_obj_li = core_func
         .load_ae_obj_li__person({
             api_cfg: $ae_api,
@@ -568,52 +571,48 @@ async function send_poc_email_link() {
                             {/if}
 
                             <!-- POC person selector — trusted staff in edit_mode only.
-                                 WHY: Only show the select editor after "Select Person" loads the list.
-                                 Showing an empty dropdown on editor open was confusing staff.
-                                 person_options_loaded gates rendering until the list is ready. -->
+                                 WHY: Automatically load person list when editor opens via on_open.
+                                 Eliminates the previous manual \"Select Person\" step.
+                                 The editor now shows a loading state if options are empty. -->
                             {#if $ae_loc.trusted_access && $ae_loc.edit_mode}
                                 <div class="mt-1 flex flex-wrap items-center gap-2">
-                                    {#if person_options_loaded}
-                                        <Element_ae_obj_field_editor
-                                            object_type="event_session"
-                                            object_id={$lq__event_session_obj.id}
-                                            field_name="poc_person_id"
-                                            field_type="select"
-                                            edit_label="Session {pres_mgmt_loc.current.label__session_poc_name}"
-                                            current_value={$lq__event_session_obj.poc_person_id ?? null}
-                                            select_options={$slct.person_obj_kv}
-                                            allow_null={$ae_loc.administrator_access}
-                                            on_success={() =>
-                                                events_func.load_ae_obj_id__event_session({
-                                                    api_cfg: $ae_api,
-                                                    event_session_id: $lq__event_session_obj.id
-                                                })}>
-                                            {#if $lq__event_session_obj.poc_person_id}
-                                                <a
-                                                    href="/core/person/{$lq__event_session_obj.poc_person_id}"
-                                                    class="text-primary-500 hover:text-primary-700 inline-flex items-center gap-1 text-xs hover:underline"
-                                                    title="Open linked person record">
-                                                    <Link size="1em" />
-                                                    Re-link {pres_mgmt_loc.current.label__session_poc_name}
-                                                </a>
-                                            {:else}
-                                                <span class="inline-flex items-center gap-1 text-xs opacity-60">
-                                                    <Unlink size="1em" />
-                                                    Assign {pres_mgmt_loc.current.label__session_poc_name}
-                                                </span>
-                                            {/if}
-                                        </Element_ae_obj_field_editor>
-                                    {/if}
+                                    <Element_ae_obj_field_editor
+                                        object_type="event_session"
+                                        object_id={$lq__event_session_obj.id}
+                                        field_name="poc_person_id"
+                                        field_type="select"
+                                        edit_label="Session {pres_mgmt_loc.current.label__session_poc_name}"
+                                        current_value={$lq__event_session_obj.poc_person_id ?? null}
+                                        select_options={$slct.person_obj_kv}
+                                        allow_null={$ae_loc.administrator_access}
+                                        on_open={load_person_options_for_session_poc}
+                                        on_success={() =>
+                                            events_func.load_ae_obj_id__event_session({
+                                                api_cfg: $ae_api,
+                                                event_session_id: $lq__event_session_obj.id
+                                            })}>
+                                        {#if $lq__event_session_obj.poc_person_id}
+                                            <a
+                                                href="/core/person/{$lq__event_session_obj.poc_person_id}"
+                                                class="text-primary-500 hover:text-primary-700 inline-flex items-center gap-1 text-xs hover:underline"
+                                                title="Open linked person record">
+                                                <Link size="1em" />
+                                                Re-link {pres_mgmt_loc.current.label__session_poc_name}
+                                            </a>
+                                        {:else}
+                                            <span class="inline-flex items-center gap-1 text-xs opacity-60">
+                                                <Unlink size="1em" />
+                                                Assign {pres_mgmt_loc.current.label__session_poc_name}
+                                            </span>
+                                        {/if}
+                                    </Element_ae_obj_field_editor>
 
                                     <button
                                         type="button"
                                         onclick={load_person_options_for_session_poc}
-                                        class="btn btn-sm preset-tonal-warning group">
-                                        <!-- <Pencil size="1em" class="" /> -->
+                                        class="btn btn-sm preset-tonal-surface group opacity-40 hover:opacity-100"
+                                        title="Force refresh person list">
                                         <RefreshCw size="1em" class="text-xs" />
-                                        <span class="hidden group-hover:inline-block">
-                                        {person_options_loaded ? 'Refresh' : 'Select Person'}
-                                        </span>
                                     </button>
                                 </div>
                             {/if}