feat(idaa/recovery_meetings): UX improvements to long edit form v2
- 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
@@ -76,6 +76,15 @@
|
||||
// Trusted+ users see no lock UI; new meetings start unlocked.
|
||||
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) {
|
||||
$slct_trigger = 'load__event_obj';
|
||||
disable_submit_btn = false;
|
||||
@@ -701,6 +710,24 @@ Copy and paste link: <a href="${link_base_url}?event_id=${event_do.event_id}">${
|
||||
</div>
|
||||
{/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
|
||||
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) ────────────────────── -->
|
||||
<div class="subsection space-y-3">
|
||||
<h4 class="subsection-heading">
|
||||
<span class="fas fa-user-plus"></span> Contact 2 (Optional)
|
||||
</h4>
|
||||
<button
|
||||
type="button"
|
||||
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">
|
||||
<label class="field-label" for="contact_2_full_name">
|
||||
Full Name
|
||||
<input
|
||||
type="text"
|
||||
id="contact_2_full_name"
|
||||
name="contact_2_full_name"
|
||||
autocomplete="name"
|
||||
placeholder="Full name"
|
||||
value={$lq__event_obj?.contact_li_json?.[1]?.full_name ?? ''}
|
||||
class="field-input w-64"
|
||||
/>
|
||||
</label>
|
||||
<label class="field-label" for="contact_2_email">
|
||||
Email
|
||||
<input
|
||||
type="email"
|
||||
id="contact_2_email"
|
||||
name="contact_2_email"
|
||||
autocomplete="email"
|
||||
placeholder="Email address"
|
||||
value={$lq__event_obj?.contact_li_json?.[1]?.email ?? ''}
|
||||
class="field-input w-64"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
{#if show_contact_2}
|
||||
<div class="flex flex-row flex-wrap gap-3">
|
||||
<label class="field-label" for="contact_2_full_name">
|
||||
Full Name
|
||||
<input
|
||||
type="text"
|
||||
id="contact_2_full_name"
|
||||
name="contact_2_full_name"
|
||||
autocomplete="name"
|
||||
placeholder="Full name"
|
||||
value={$lq__event_obj?.contact_li_json?.[1]?.full_name ?? ''}
|
||||
class="field-input w-64"
|
||||
/>
|
||||
</label>
|
||||
<label class="field-label" for="contact_2_email">
|
||||
Email
|
||||
<input
|
||||
type="email"
|
||||
id="contact_2_email"
|
||||
name="contact_2_email"
|
||||
autocomplete="email"
|
||||
placeholder="Email address"
|
||||
value={$lq__event_obj?.contact_li_json?.[1]?.email ?? ''}
|
||||
class="field-input w-64"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row flex-wrap gap-3">
|
||||
<label class="field-label" for="contact_2_phone_mobile">
|
||||
Mobile Phone
|
||||
<input
|
||||
type="tel"
|
||||
id="contact_2_phone_mobile"
|
||||
name="contact_2_phone_mobile"
|
||||
autocomplete="tel"
|
||||
placeholder="Mobile / Cell"
|
||||
value={$lq__event_obj?.contact_li_json?.[1]?.phone_mobile ?? ''}
|
||||
class="field-input w-52"
|
||||
/>
|
||||
</label>
|
||||
<label class="field-label" for="contact_2_phone_home">
|
||||
Home Phone
|
||||
<input
|
||||
type="tel"
|
||||
id="contact_2_phone_home"
|
||||
name="contact_2_phone_home"
|
||||
autocomplete="tel"
|
||||
placeholder="Home phone"
|
||||
value={$lq__event_obj?.contact_li_json?.[1]?.phone_home ?? ''}
|
||||
class="field-input w-52"
|
||||
/>
|
||||
</label>
|
||||
<label class="field-label" for="contact_2_phone_office">
|
||||
Office Phone
|
||||
<input
|
||||
type="tel"
|
||||
id="contact_2_phone_office"
|
||||
name="contact_2_phone_office"
|
||||
autocomplete="tel"
|
||||
placeholder="Office phone"
|
||||
value={$lq__event_obj?.contact_li_json?.[1]?.phone_office ?? ''}
|
||||
class="field-input w-52"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<div class="flex flex-row flex-wrap gap-3">
|
||||
<label class="field-label" for="contact_2_phone_mobile">
|
||||
Mobile Phone
|
||||
<input
|
||||
type="tel"
|
||||
id="contact_2_phone_mobile"
|
||||
name="contact_2_phone_mobile"
|
||||
autocomplete="tel"
|
||||
placeholder="Mobile / Cell"
|
||||
value={$lq__event_obj?.contact_li_json?.[1]?.phone_mobile ?? ''}
|
||||
class="field-input w-52"
|
||||
/>
|
||||
</label>
|
||||
<label class="field-label" for="contact_2_phone_home">
|
||||
Home Phone
|
||||
<input
|
||||
type="tel"
|
||||
id="contact_2_phone_home"
|
||||
name="contact_2_phone_home"
|
||||
autocomplete="tel"
|
||||
placeholder="Home phone"
|
||||
value={$lq__event_obj?.contact_li_json?.[1]?.phone_home ?? ''}
|
||||
class="field-input w-52"
|
||||
/>
|
||||
</label>
|
||||
<label class="field-label" for="contact_2_phone_office">
|
||||
Office Phone
|
||||
<input
|
||||
type="tel"
|
||||
id="contact_2_phone_office"
|
||||
name="contact_2_phone_office"
|
||||
autocomplete="tel"
|
||||
placeholder="Office phone"
|
||||
value={$lq__event_obj?.contact_li_json?.[1]?.phone_office ?? ''}
|
||||
class="field-input w-52"
|
||||
/>
|
||||
</label>
|
||||
</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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user