Making things look better. Now with a person look up for the presenter record. Wrapping up for the day.

This commit is contained in:
Scott Idem
2024-06-26 18:19:17 -04:00
parent 4d7e48a170
commit 20e1c46461
4 changed files with 239 additions and 20 deletions

View File

@@ -36,7 +36,8 @@ export type key_val = {
// *** BEGIN *** Longer-term app data. This should be stored to local storage.
export let ae_app_local_data_struct: key_val = {
'ver': '2024-06-26_12',
'ver': '2024-06-26_13',
'ver_idb': '2024-06-26_1625', // Clear if date IndexedDB version
'name': 'Aether - App Hub (SvelteKit 2.x Svelte 4.x)',
'theme': 'light',
'iframe': false,

View File

@@ -111,33 +111,61 @@ $: if ($events_trigger == 'load__event_session_obj_id' && $events_trig_kv['event
</section>
{/if}
{#if $ae_loc.ver < '2024-06-26_12'}
<div class="flex flex-col items-center justify-center bg-error-100 text-error-800 p-4 rounded-lg shadow-lg my-4 w-full">
<p>There is a new version of the app. Please use the button to clear the page cache and reload the page.</p>
{#if $ae_loc.ver != '2024-06-26_13' || $ae_loc.ver_idb != '2024-06-26_1625'}
<div class="flex flex-col items-center justify-center bg-error-100 text-error-800 p-4 rounded-lg shadow-lg space-y-2 my-4 w-full">
<span class="fas fa-exclamation-triangle text-4xl text-error-800"></span>
<h2 class="text-2xl font-bold">New Version Available</h2>
<p class="text-lg max-w-2xl text-center">
There is a new version of the web app (this website). Please use the button to clear some cached data and settings. The page will then reload.
</p>
<button
class="btn btn-xl variant-ghost-error"
class="btn btn-xl variant-ghost-success hover:variant-filled-success"
on:click={() => {
if (!confirm('Are you sure you want to clear the local and session storage?')) {
return false;
// This is not a very efficient way to do this, but it works for now.
// Do this first even if the localStorage will be cleared.
if ($ae_loc.ver_idb != '2024-06-26_1625') {
// Yep... this needs to be done differently.
$ae_loc.ver_idb = '2024-06-26_1625';
}
// Clear the local and session storage
localStorage.clear();
sessionStorage.clear();
if ($ae_loc.ver != '2024-06-26_13') {
alert('You will need to sign in again.')
// Clear the local and session storage. Clearing the localStorage will force it to be re-created.
localStorage.clear();
sessionStorage.clear();
}
// Clear Indexed DB as well
indexedDB.deleteDatabase('ae_core_db');
indexedDB.deleteDatabase('ae_events_db');
window.location.reload();
window.location.reload(true); // true only works with Firefox
// alert('Local and Session Storage cleared and Indexed DBs deleted. You will probably want to refresh the page.');
}}
title="New Version: Clear the browser storage for this page"
>
<span class="fas fa-eraser mx-1"></span>
Clear Storage &amp; DB &amp; Reload
<!-- <span class="fas fa-eraser mx-1"></span> -->
<span class="fas fa-sync mx-1"></span>
Clear App Data &amp; Settings - Reload
</button>
{#if $ae_loc.ver != '2024-06-26_13'}
<p class="text-lg font-bold max-w-2xl text-center">
You will need to sign in again after clearing the cache.
</p>
{/if}
<!-- <p>This reload will be done automatically in the future.</p> -->
</div>
{:else}
<!-- <div class="flex flex-col items-center justify-center bg-success-100 text-success-800 p-4 rounded-lg shadow-lg space-y-2 my-4 w-full">Local App Version {$ae_loc.ver}<br>Local App DB Version {$ae_loc.ver_idb}</div> -->
{/if}
<slot></slot>

View File

@@ -102,14 +102,29 @@ $: if ($events_trigger == 'load__event_session_obj_li' && $events_slct.event_id)
$events_trigger = null;
if (!$events_sess.pres_mgmt.fulltext_search_qry_str || $events_sess?.pres_mgmt.fulltext_search_qry_str.length <= 1 ) {
if ( $ae_loc.administrator_access ) {
console.log('Administrator access search');
handle_search__event_session($events_sess.pres_mgmt.fulltext_search_qry_str);
} else if ( $ae_loc.trusted_access ) {
console.log('Trusted access search');
handle_search__event_session($events_sess.pres_mgmt.fulltext_search_qry_str);
} else if (!$events_sess.pres_mgmt.fulltext_search_qry_str || $events_sess?.pres_mgmt.fulltext_search_qry_str.length <= 1 ) {
$events_slct.session_obj_li = [];
// $events_sess.pres_mgmt.fulltext_search_qry_str = '';
// return false;
} else {
handle_search__event_session($events_sess.pres_mgmt.fulltext_search_qry_str);
}
}
function handle_search__event_session(search_str: string) {
console.log('handle_search__event_session()');
// let type_code = $events_sess.pres_mgmt.search_badge_type_code;
let search_str = $events_sess.pres_mgmt.fulltext_search_qry_str.trim();
// let search_str = $events_sess.pres_mgmt.fulltext_search_qry_str.trim();
let search_method = 'lk'; // 'ft', 'lk', 'eq'
let ft_search_str_new = '';
let lk_search_str_new = '';
@@ -199,7 +214,7 @@ $: if ($events_trigger == 'load__event_session_obj_li' && $events_slct.event_id)
});
}
} // end if search string is valid
// } // end if search string is valid
}
@@ -353,8 +368,21 @@ $: if ($events_trigger == 'load__event_session_obj_li' && $events_slct.event_id)
{#if $events_slct?.session_obj_li && $events_slct.session_obj_li.length > 0}
<section class="ae_h_scrollfix">
<h2 class="h3">Results:</h2>
<section class="ae_h_scrollfix py-2 space-y-2">
<h2 class="h3">
<span class="text-md">
Results:
</span>
{#if $events_slct.session_obj_li.length}
<span class="text-3xl font-bold bg-success-100 px-4 border rounded-lg border-success-500"
title="Count {$events_slct.session_obj_li.length ?? 'None'}"
>
<span class="fas fa-list-ol mx-4"></span>
{$events_slct.session_obj_li.length ?? 'None'}
</span>
{/if}
</h2>
<table class="table">
<thead>
<tr>

View File

@@ -15,6 +15,7 @@ import { api } from '$lib/api';
import Element_ae_crud from '$lib/element_ae_crud.svelte';
// import Element_data_store from '$lib/element_data_store.svelte';
import { core_func } from '$lib/ae_core_functions';
import { ae_loc, ae_sess, ae_api, ae_trig, slct, slct_trigger } from '$lib/ae_stores';
import { db_events } from "$lib/db_events";
import { events_loc, events_sess, events_slct, events_trigger } from '$lib/ae_events_stores';
@@ -44,6 +45,9 @@ let lq__event_file_obj_li = liveQuery(
async () => await db_events.files.where('event_presenter_id_random').equals($events_slct.event_presenter_id).toArray()
);
$slct.person_obj_kv = {}; // This is intended for the POC lookup list when generated.
// $events_slct.event_presenter_obj = $lq__event_presenter_obj;
// $events_sess.pres_mgmt.disable_submit__opt_out = false;
@@ -435,10 +439,12 @@ async function handle_delete__event_file({event_file_id}) {
<a
href="mailto:{$events_slct.presenter_obj.email}"
class="text-blue-500"
title="Presenter's email address"
>{$events_slct.presenter_obj.email}</a>
</Element_ae_crud>
{#if $events_slct.presenter_obj.person_primary_email != $events_slct.presenter_obj.email}
<div>
<Element_ae_crud
api_cfg={$ae_api}
object_type={'person'}
@@ -450,15 +456,59 @@ async function handle_delete__event_file({event_file_id}) {
hide_edit_btn={!$ae_loc.trusted_access}
outline_element={false}
show_crud={false}
display_inline={false}
display_inline={true}
class_li={''}
>
<span class="fas fa-star-of-life"></span>
<span class="fas fa-envelope"></span>
<a
href="mailto:{$events_slct.presenter_obj.person_primary_email}"
class="text-blue-500"
title="Person's primary email address"
>{$events_slct.presenter_obj.person_primary_email}</a>
</Element_ae_crud>
<!-- We need a way to let them re-sync the email addresses. The update here should flow back to the person.primary_email. -->
<Element_ae_crud
trigger_patch={ae_triggers.update_person_primary_email}
api_cfg={$ae_api}
object_type={'person'}
object_id={$events_slct.presenter_obj.person_id_random}
field_name={'primary_email'}
field_type={'text'}
field_value={$events_slct.presenter_obj.email}
allow_null={false}
hide_edit_btn={true}
outline_element={false}
show_crud={false}
display_inline={true}
class_li={''}
on:ae_crud_updated={e => {
console.log(`ae_crud_updated:`, e.detail);
events_func.handle_load_ae_obj_id__event_presenter({api_cfg: $ae_api, event_presenter_id: $lq__event_presenter_obj?.event_presenter_id_random, log_lvl: 1})
.then(function (load_results) {
// Maybe reload page?
// window.location.reload();
});
}}
>
<button
type="button"
on:click={() => {
console.log('*** Sync email button clicked ***');
if (!confirm('Are you sure you want to sync the email addresses?')) {return false;}
ae_triggers.update_person_primary_email = true;
}}
class="btn btn-sm variant-soft-warning hover:variant-ghost-warning"
title="Use the email address from this presenter record to overwrite the person record."
>
<span class="fas fa-sync-alt mx-1"></span>
Sync
</button>
</Element_ae_crud>
</div>
{/if}
</li>
@@ -516,7 +566,8 @@ async function handle_delete__event_file({event_file_id}) {
class_li={''}
>
<span class="fas fa-user-secret"></span>
{$events_slct.presenter_obj.person_passcode ?? '-- passcode not set --'} (your passcode)
Passcode:
{$events_slct.presenter_obj.person_passcode ?? '-- passcode not set --'}
</Element_ae_crud>
<!-- <span class="fas fa-user-secret"></span>
@@ -532,6 +583,117 @@ async function handle_delete__event_file({event_file_id}) {
Edit
</button> -->
</li>
<li>
<!-- Allow for linking the presenter to a person record. -->
{#if $ae_loc.administrator_access}
<Element_ae_crud
trigger_patch={ae_triggers.update_person}
api_cfg={$ae_api}
object_type={'event_presenter'}
object_id={$events_slct.presenter_obj?.event_presenter_id_random}
field_name={'person_id_random'}
field_type={'select'}
field_value={$events_slct.presenter_obj.person_id_random}
select_option_li={$slct.person_obj_kv}
allow_null={$ae_loc.administrator_access}
hide_edit_btn={true}
outline_element={false}
show_crud={ae_tmp.show__edit_person}
display_inline={true}
class_li={''}
on:ae_crud_updated={e => {
console.log(`ae_crud_updated:`, e.detail);
events_func.handle_load_ae_obj_id__event_presenter({api_cfg: $ae_api, event_presenter_id: $lq__event_presenter_obj?.event_presenter_id_random, log_lvl: 1})
.then(function (load_results) {
// Maybe reload page?
// window.location.reload();
});
}}
>
<span class="fas fa-user-check"></span>
<!-- <span class="fas fa-link"></span> -->
Person link
{#if $events_slct.presenter_obj.person_id_random}
<span class="fas fa-link"></span>
{$events_slct.presenter_obj.person_id_random}
{:else}
<span class="fas fa-unlink"></span>
-- person not set --
{/if}
{#if ae_tmp?.show__edit_person}
{#await $slct.person_obj_li}
<span class="fas fa-spinner fa-spin mx-1"></span>
{:then person_obj_li}
<!-- loaded -->
{/await}
<!-- {/if} -->
<!-- {#if ae_tmp.show__edit_person} -->
<button
type="button"
on:click={() => {
console.log('Cancel the person for the presenter.');
ae_tmp.person_id = null;
ae_tmp.show__edit_person = false;
}}
class="btn btn-sm variant-soft-warning hover:variant-ghost-warning"
>
<span class="fas fa-times mx-1"></span>
Cancel
</button>
{:else}
<!-- {/if} -->
<button
type="button"
on:click={async () => {
console.log('Edit the person for the presenter.');
let params = {
qry__limit: 300,
}
$slct.person_obj_li = core_func.handle_load_ae_obj_li__person({api_cfg: $ae_api, account_id: $slct.account_id, params: params})
.then(function (load_results) {
console.log(`Loaded person_obj_li:`, load_results);
// We need to make this ready for the select option list. Convert the list to a key value pair with the person_id_random as the key. We also need to set the option text value to: full_name (primary_email)
if (load_results) {
let person_obj_li = load_results;
let person_obj_kv = {};
person_obj_kv[''] = '-- Select a person --';
person_obj_li.forEach((person_obj) => {
let option_text = `${person_obj.full_name} (${person_obj.primary_email})`;
person_obj_kv[person_obj.person_id_random] = option_text;
});
$slct.person_obj_kv = person_obj_kv;
}
$slct.person_obj_kv = $slct.person_obj_kv;
console.log(`$slct.person_obj_kv = `, $slct.person_obj_kv);
return load_results;
});
ae_tmp.person_id = $events_slct.presenter_obj?.person_id_random;
ae_tmp.show__edit_person = true;
}}
class="btn btn-sm variant-soft-warning hover:variant-ghost-warning"
>
<span class="fas fa-edit mx-1"></span>
Edit
</button>
{/if}
</Element_ae_crud>
{/if}
</li>
</ul>
<h3 class="h4">