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

feat(pres_mgmt): automate Session POC loading and enhance field editor UX

Browse Source 
- 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
Download Patch File Download Diff File Expand all files Collapse all files

36
src/lib/elements/element_ae_obj_field_editor_new.svelte
View File

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

77
src/routes/events/[event_id]/(pres_mgmt)/session/[session_id]/session_view.svelte
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}