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

feat(idaa/recovery_meetings): UX improvements to long edit form v2

Browse Source 
- Add Save Changes button at top of form so users don't scroll to the
  bottom to save; existing meetings only (mirrors v1 behaviour)
- Collapse Contact 2 subsection behind a toggle; auto-expands when the
  meeting already has Contact 2 data saved
- Add hidden inputs when Contact 2 is collapsed so FormData preserves
  existing contact info rather than overwriting with nulls on save

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Scott Idem
2026-03-09 18:13:36 -04:00
parent 8247c62d0e
commit b7352c080a
1 changed files with 112 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

179
src/routes/idaa/(idaa)/recovery_meetings/ae_idaa_comp__event_obj_id_edit_v2.svelte
View File

@@ -76,6 +76,15 @@
// Trusted+ users see no lock UI; new meetings start unlocked. // Trusted+ users see no lock UI; new meetings start unlocked.
let contact_1_locked = $state(!!$idaa_slct.event_id && !$ae_loc.trusted_access); let contact_1_locked = $state(!!$idaa_slct.event_id && !$ae_loc.trusted_access);
// Auto-expand Contact 2 if the meeting already has data in that slot,
// so existing contact info is never silently hidden on load.
let show_contact_2 = $state(
!!(
$idaa_slct.event_obj?.contact_li_json?.[1]?.full_name ||
$idaa_slct.event_obj?.contact_li_json?.[1]?.email
)
);
if ($idaa_slct.event_id) { if ($idaa_slct.event_id) {
$slct_trigger = 'load__event_obj'; $slct_trigger = 'load__event_obj';
disable_submit_btn = false; disable_submit_btn = false;
@@ -701,6 +710,24 @@ Copy and paste link: <a href="${link_base_url}?event_id=${event_do.event_id}">${
</div> </div>
{/await} {/await}
<!-- Top save button — visible on existing meetings only so users don't scroll to the bottom
of this long form just to save. Mirrors the bottom Save Changes button. -->
{#if $idaa_slct.event_id}
<div class="flex justify-end">
<button
type="submit"
class="btn btn-sm preset-filled-primary-200-800"
disabled={disable_submit_btn}
>
{#await prom_api__event_obj}
<span class="fas fa-spinner fa-spin"></span> Saving...
{:then}
<span class="fas fa-save"></span> Save Changes
{/await}
</button>
</div>
{/if}
<!-- ============================================================ <!-- ============================================================
SECTION 1 — Meeting Information SECTION 1 — Meeting Information
Fields: name, description, type Fields: name, description, type
@@ -1601,75 +1628,93 @@ Copy and paste link: <a href="${link_base_url}?event_id=${event_do.event_id}">${
<!-- ── Contact 2 (Optional secondary) ────────────────────── --> <!-- ── Contact 2 (Optional secondary) ────────────────────── -->
<div class="subsection space-y-3"> <div class="subsection space-y-3">
<h4 class="subsection-heading"> <button
<span class="fas fa-user-plus"></span> Contact 2 (Optional) type="button"
</h4> class="flex flex-row items-center gap-2 text-left w-full"
onclick={() => (show_contact_2 = !show_contact_2)}
>
<span class="fas fa-{show_contact_2 ? 'caret-down' : 'caret-right'} text-xs opacity-60"></span>
<h4 class="subsection-heading !mb-0">
<span class="fas fa-user-plus"></span> Contact 2 (Optional)
</h4>
</button>
<div class="flex flex-row flex-wrap gap-3"> {#if show_contact_2}
<label class="field-label" for="contact_2_full_name"> <div class="flex flex-row flex-wrap gap-3">
Full Name <label class="field-label" for="contact_2_full_name">
<input Full Name
type="text" <input
id="contact_2_full_name" type="text"
name="contact_2_full_name" id="contact_2_full_name"
autocomplete="name" name="contact_2_full_name"
placeholder="Full name" autocomplete="name"
value={$lq__event_obj?.contact_li_json?.[1]?.full_name ?? ''} placeholder="Full name"
class="field-input w-64" value={$lq__event_obj?.contact_li_json?.[1]?.full_name ?? ''}
/> class="field-input w-64"
</label> />
<label class="field-label" for="contact_2_email"> </label>
Email <label class="field-label" for="contact_2_email">
<input Email
type="email" <input
id="contact_2_email" type="email"
name="contact_2_email" id="contact_2_email"
autocomplete="email" name="contact_2_email"
placeholder="Email address" autocomplete="email"
value={$lq__event_obj?.contact_li_json?.[1]?.email ?? ''} placeholder="Email address"
class="field-input w-64" value={$lq__event_obj?.contact_li_json?.[1]?.email ?? ''}
/> class="field-input w-64"
</label> />
</div> </label>
</div>
<div class="flex flex-row flex-wrap gap-3"> <div class="flex flex-row flex-wrap gap-3">
<label class="field-label" for="contact_2_phone_mobile"> <label class="field-label" for="contact_2_phone_mobile">
Mobile Phone Mobile Phone
<input <input
type="tel" type="tel"
id="contact_2_phone_mobile" id="contact_2_phone_mobile"
name="contact_2_phone_mobile" name="contact_2_phone_mobile"
autocomplete="tel" autocomplete="tel"
placeholder="Mobile / Cell" placeholder="Mobile / Cell"
value={$lq__event_obj?.contact_li_json?.[1]?.phone_mobile ?? ''} value={$lq__event_obj?.contact_li_json?.[1]?.phone_mobile ?? ''}
class="field-input w-52" class="field-input w-52"
/> />
</label> </label>
<label class="field-label" for="contact_2_phone_home"> <label class="field-label" for="contact_2_phone_home">
Home Phone Home Phone
<input <input
type="tel" type="tel"
id="contact_2_phone_home" id="contact_2_phone_home"
name="contact_2_phone_home" name="contact_2_phone_home"
autocomplete="tel" autocomplete="tel"
placeholder="Home phone" placeholder="Home phone"
value={$lq__event_obj?.contact_li_json?.[1]?.phone_home ?? ''} value={$lq__event_obj?.contact_li_json?.[1]?.phone_home ?? ''}
class="field-input w-52" class="field-input w-52"
/> />
</label> </label>
<label class="field-label" for="contact_2_phone_office"> <label class="field-label" for="contact_2_phone_office">
Office Phone Office Phone
<input <input
type="tel" type="tel"
id="contact_2_phone_office" id="contact_2_phone_office"
name="contact_2_phone_office" name="contact_2_phone_office"
autocomplete="tel" autocomplete="tel"
placeholder="Office phone" placeholder="Office phone"
value={$lq__event_obj?.contact_li_json?.[1]?.phone_office ?? ''} value={$lq__event_obj?.contact_li_json?.[1]?.phone_office ?? ''}
class="field-input w-52" class="field-input w-52"
/> />
</label> </label>
</div> </div>
{:else}
<!-- Hidden inputs preserve existing Contact 2 data when the section is
collapsed. Without these, FormData would omit the fields entirely
and the submit handler would overwrite saved contact info with nulls. -->
<input type="hidden" name="contact_2_full_name" value={$lq__event_obj?.contact_li_json?.[1]?.full_name ?? ''} />
<input type="hidden" name="contact_2_email" value={$lq__event_obj?.contact_li_json?.[1]?.email ?? ''} />
<input type="hidden" name="contact_2_phone_mobile" value={$lq__event_obj?.contact_li_json?.[1]?.phone_mobile ?? ''} />
<input type="hidden" name="contact_2_phone_home" value={$lq__event_obj?.contact_li_json?.[1]?.phone_home ?? ''} />
<input type="hidden" name="contact_2_phone_office" value={$lq__event_obj?.contact_li_json?.[1]?.phone_office ?? ''} />
{/if}
</div> </div>
</div> </div>