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.
This commit is contained in:
Scott Idem
2026-06-16 18:14:14 -04:00
parent 8146316aaf
commit d23f9073c4
2 changed files with 61 additions and 52 deletions

View File

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