ui(idaa): keep required asterisk inline with label text (embed in inline flex)
This commit is contained in:
Scott Idem
@@ -39,6 +39,8 @@
|
||||
} from '$lib/stores/ae_idaa_stores';
|
||||
import { events_func } from '$lib/ae_events/ae_events_functions';
|
||||
import AE_Comp_Editor_TipTap from '$lib/elements/element_editor_tiptap.svelte';
|
||||
import { liveQuery } from 'dexie';
|
||||
import { db_lookups } from '$lib/ae_core/db_lookups';
|
||||
|
||||
if (!$idaa_slct.event_obj) {
|
||||
$idaa_slct.event_obj = {};
|
||||
@@ -185,92 +187,25 @@
|
||||
console.log(`Event Object started: ${$idaa_slct.event_obj}`);
|
||||
}
|
||||
|
||||
// Load timezone lookup list (cached in $ae_loc, refreshed ~20% of the time)
|
||||
let lu_time_zone_list = localStorage.getItem('lu_time_zone_list')
|
||||
? JSON.parse(localStorage.getItem('lu_time_zone_list') ?? '')
|
||||
: [];
|
||||
if (
|
||||
$ae_loc.lu_time_zone_list &&
|
||||
$ae_loc.lu_time_zone_list.length > 0 &&
|
||||
Math.random() < 0.8
|
||||
) {
|
||||
console.log('Already have time zone list!', $ae_loc.lu_time_zone_list);
|
||||
} else {
|
||||
core_func
|
||||
.load_ae_obj_li__time_zone({
|
||||
api_cfg: $ae_api,
|
||||
only_priority: true,
|
||||
log_lvl: log_lvl
|
||||
})
|
||||
.then(function (result) {
|
||||
if (result) {
|
||||
$ae_loc.lu_time_zone_list = result;
|
||||
} else {
|
||||
$ae_loc.lu_time_zone_list = [];
|
||||
}
|
||||
})
|
||||
.catch(function (error: any) {
|
||||
console.log('No results returned or failed.', error);
|
||||
});
|
||||
}
|
||||
|
||||
// Load country lookup list (cached in localStorage, refreshed ~20% of the time)
|
||||
let lu_country_list = $state(
|
||||
localStorage.getItem('lu_country_list')
|
||||
? JSON.parse(localStorage.getItem('lu_country_list') ?? '')
|
||||
: []
|
||||
// Lookup lists — reactive IDB queries (SWR via db_lookups + liveQuery)
|
||||
// Data persists in IndexedDB with a 24h TTL; onMount triggers a background
|
||||
// refresh if IDB is empty or stale. No localStorage or $ae_loc involved.
|
||||
const lq__lu_country = liveQuery(() =>
|
||||
db_lookups.lu_country.orderBy('english_short_name').toArray()
|
||||
);
|
||||
|
||||
// Load country subdivision lookup list (states/provinces, cached in localStorage)
|
||||
let lu_country_subdivision_list = $state(
|
||||
localStorage.getItem('lu_country_subdivision_list')
|
||||
? JSON.parse(localStorage.getItem('lu_country_subdivision_list') ?? '')
|
||||
: []
|
||||
const lq__lu_country_subdivision = liveQuery(() =>
|
||||
db_lookups.lu_country_subdivision.orderBy('name').toArray()
|
||||
);
|
||||
const lq__lu_time_zone = liveQuery(() =>
|
||||
db_lookups.lu_time_zone.orderBy('name').toArray()
|
||||
);
|
||||
|
||||
onMount(() => {
|
||||
// These reads of $state runes must be inside a closure (onMount) to avoid
|
||||
// Svelte's state_referenced_locally warning — the values are valid at mount.
|
||||
if (lu_country_list && lu_country_list.length > 50 && Math.random() < 0.8) {
|
||||
console.log(`Already have country list! ${lu_country_list.length}`);
|
||||
} else {
|
||||
core_func
|
||||
.load_ae_obj_li__country({ api_cfg: $ae_api, log_lvl: log_lvl })
|
||||
.then(function (result) {
|
||||
if (result) {
|
||||
lu_country_list = result;
|
||||
localStorage.setItem('lu_country_list', JSON.stringify(result));
|
||||
}
|
||||
})
|
||||
.catch(function (error: any) {
|
||||
console.log('No results returned or failed.', error);
|
||||
});
|
||||
}
|
||||
|
||||
if (
|
||||
lu_country_subdivision_list &&
|
||||
lu_country_subdivision_list.length > 50 &&
|
||||
Math.random() < 0.8
|
||||
) {
|
||||
console.log(
|
||||
`Already have country subdivision list! ${lu_country_subdivision_list.length}`
|
||||
);
|
||||
} else {
|
||||
core_func
|
||||
.load_ae_obj_li__country_subdivision({ api_cfg: $ae_api, log_lvl: log_lvl })
|
||||
.then(function (result) {
|
||||
if (result) {
|
||||
lu_country_subdivision_list = result;
|
||||
localStorage.setItem(
|
||||
'lu_country_subdivision_list',
|
||||
JSON.stringify(result)
|
||||
);
|
||||
}
|
||||
})
|
||||
.catch(function (error: any) {
|
||||
console.log('No results returned or failed.', error);
|
||||
});
|
||||
}
|
||||
// Trigger background IDB refresh for all three lookup lists if stale/empty.
|
||||
// liveQuery subscribers above will react automatically when IDB is written.
|
||||
core_func.load_ae_obj_li__country({ api_cfg: $ae_api, log_lvl });
|
||||
core_func.load_ae_obj_li__country_subdivision({ api_cfg: $ae_api, log_lvl });
|
||||
core_func.load_ae_obj_li__time_zone({ api_cfg: $ae_api, log_lvl });
|
||||
});
|
||||
|
||||
$effect(() => {
|
||||
@@ -334,7 +269,7 @@
|
||||
address['country_subdivision_code'] =
|
||||
event_meeting_fd.address_country_subdivision_code;
|
||||
let country_subdivision_data = ae_util.get_obj_li_w_match_prop({
|
||||
obj_li: lu_country_subdivision_list,
|
||||
obj_li: $lq__lu_country_subdivision ?? [],
|
||||
property: 'code',
|
||||
value: event_meeting_fd.address_country_subdivision_code
|
||||
});
|
||||
@@ -345,7 +280,7 @@
|
||||
address['country_alpha_2_code'] =
|
||||
event_meeting_fd.address_country_alpha_2_code;
|
||||
let country_data = ae_util.get_obj_li_w_match_prop({
|
||||
obj_li: lu_country_list,
|
||||
obj_li: $lq__lu_country ?? [],
|
||||
property: 'alpha_2_code',
|
||||
value: event_meeting_fd.address_country_alpha_2_code
|
||||
});
|
||||
@@ -798,8 +733,10 @@ Copy and paste link: <a href="${link_base_url}?event_id=${event_do.event_id}">${
|
||||
|
||||
<!-- Name -->
|
||||
<label class="flex flex-col gap-1 text-sm font-semibold text-surface-700-300" for="name">
|
||||
Name of Recovery Meeting
|
||||
<span class="text-error-500 ml-0.5">*</span>
|
||||
<div class="flex items-center gap-1">
|
||||
<span>Name of Recovery Meeting</span>
|
||||
<span class="text-error-500 ml-0.5">*</span>
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
id="name"
|
||||
@@ -999,7 +936,7 @@ Copy and paste link: <a href="${link_base_url}?event_id=${event_do.event_id}">${
|
||||
|
||||
<label class="flex flex-col gap-1 text-sm font-semibold text-surface-700-300" for="address_country_subdivision_code">
|
||||
State / Province
|
||||
{#if lu_country_subdivision_list?.length}
|
||||
{#if ($lq__lu_country_subdivision ?? []).length}
|
||||
<select
|
||||
id="address_country_subdivision_code"
|
||||
name="address_country_subdivision_code"
|
||||
@@ -1009,7 +946,7 @@ Copy and paste link: <a href="${link_base_url}?event_id=${event_do.event_id}">${
|
||||
class="select p-1 preset-tonal-surface hover:preset-filled-surface-100-900 w-56"
|
||||
>
|
||||
<option value="">-- None --</option>
|
||||
{#each lu_country_subdivision_list as sub, i (i)}
|
||||
{#each ($lq__lu_country_subdivision ?? []) as sub (sub.code)}
|
||||
<option value={sub.code}>{sub.country_alpha_2_code} - {sub.name}</option>
|
||||
{/each}
|
||||
</select>
|
||||
@@ -1045,7 +982,7 @@ Copy and paste link: <a href="${link_base_url}?event_id=${event_do.event_id}">${
|
||||
|
||||
<label class="flex flex-col gap-1 text-sm font-semibold text-surface-700-300" for="address_country_alpha_2_code">
|
||||
Country
|
||||
{#if lu_country_list?.length}
|
||||
{#if ($lq__lu_country ?? []).length}
|
||||
<select
|
||||
id="address_country_alpha_2_code"
|
||||
name="address_country_alpha_2_code"
|
||||
@@ -1055,7 +992,7 @@ Copy and paste link: <a href="${link_base_url}?event_id=${event_do.event_id}">${
|
||||
class="select p-1 preset-tonal-surface hover:preset-filled-surface-100-900 w-64"
|
||||
>
|
||||
<option value="">-- None --</option>
|
||||
{#each lu_country_list as country (country.alpha_2_code)}
|
||||
{#each ($lq__lu_country ?? []) as country (country.alpha_2_code)}
|
||||
<option value={country.alpha_2_code}>{country.english_short_name}</option>
|
||||
{/each}
|
||||
</select>
|
||||
@@ -1167,7 +1104,10 @@ Copy and paste link: <a href="${link_base_url}?event_id=${event_do.event_id}">${
|
||||
{#if $idaa_sess.recovery_meetings.attend_platform === 'Zoom' && $idaa_slct.event_obj.attend_json?.zoom}
|
||||
<div class="p-2 rounded bg-surface-50-950 border border-surface-200-800 flex flex-row flex-wrap gap-3">
|
||||
<label class="flex flex-col gap-1 text-sm font-semibold text-surface-700-300" for="attend_url_code">
|
||||
Zoom Meeting ID <span class="text-error-500 ml-0.5">*</span>
|
||||
<div class="flex items-center gap-1">
|
||||
<span>Zoom Meeting ID</span>
|
||||
<span class="text-error-500 ml-0.5">*</span>
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
inputmode="numeric"
|
||||
@@ -1453,8 +1393,11 @@ Copy and paste link: <a href="${link_base_url}?event_id=${event_do.event_id}">${
|
||||
logical "when does this meeting happen" unit displayed together in the view -->
|
||||
<div class="flex flex-row flex-wrap gap-3 items-end">
|
||||
<label class="flex flex-col gap-1 text-sm font-semibold text-surface-700-300" for="timezone">
|
||||
Timezone <span class="text-error-500 ml-0.5">*</span>
|
||||
{#if $ae_loc?.lu_time_zone_list?.length}
|
||||
<div class="flex items-center gap-1">
|
||||
<span>Timezone</span>
|
||||
<span class="text-error-500 ml-0.5">*</span>
|
||||
</div>
|
||||
{#if ($lq__lu_time_zone ?? []).length}
|
||||
<select
|
||||
id="timezone"
|
||||
name="timezone"
|
||||
@@ -1463,7 +1406,7 @@ Copy and paste link: <a href="${link_base_url}?event_id=${event_do.event_id}">${
|
||||
class="select p-1 preset-tonal-surface hover:preset-filled-surface-100-900 w-56"
|
||||
>
|
||||
<option value="" class:hidden={!$ae_loc.trusted_access}>-- None --</option>
|
||||
{#each $ae_loc.lu_time_zone_list as tz (tz.name)}
|
||||
{#each ($lq__lu_time_zone ?? []) as tz (tz.name)}
|
||||
<option value={tz.name}>{tz.name}</option>
|
||||
{/each}
|
||||
</select>
|
||||
|
||||
Reference in New Issue
Block a user