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

Work in progress of moving the session list out to a separate component.

Browse Source
This commit is contained in:
Scott Idem
2024-07-02 15:42:45 -04:00
parent a1515ba6b6
commit d8e062b8c7
3 changed files with 409 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/routes/events_pres_mgmt/ae_comp__event_presenter_obj_li.svelte
View File

@@ -3,10 +3,10 @@
import { createEventDispatcher, onMount } from 'svelte';
import type { key_val } from '$lib/ae_stores';
import { ae_util } from '$lib/ae_utils';
import { api, send_email } from '$lib/api';
import Element_ae_crud from '$lib/element_ae_crud.svelte';
import Element_data_store from '$lib/element_data_store.svelte';
// import { ae_util } from '$lib/ae_utils';
// import { api, send_email } from '$lib/api';
// import Element_ae_crud from '$lib/element_ae_crud.svelte';
// import Element_data_store from '$lib/element_data_store.svelte';
import { liveQuery } from "dexie";
import { core_func } from '$lib/ae_core_functions';
@@ -34,11 +34,11 @@ if ($ae_loc.administrator_access) {
allow_moderator = true;
}
let ae_promises: key_val = {};
// let ae_promises: key_val = {};
let ae_tmp: key_val = {};
let ae_triggers: key_val = {};
// let ae_triggers: key_val = {};
let dq__where_type_val: string = link_to_type; // "event", "event_session", "event_presentation"
// let dq__where_type_val: string = link_to_type; // "event", "event_session", "event_presentation"
let dq__where_type_id_val: string = `${link_to_type}_id_random`;
let dq__where_eq_id_val: string = link_to_id;
@@ -330,3 +330,7 @@ onMount(() => {
</section>
<style>
</style>

19
src/routes/events_pres_mgmt/event/[slug]/+page.svelte
View File

@@ -13,8 +13,9 @@ import { ae_util } from '$lib/ae_utils';
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 Comp_event_presenter_obj_li from '../../ae_comp__event_presenter_obj_li.svelte';
import Element_manage_event_file_li from '$lib/element_manage_event_file_li.svelte';
// import Comp_event_presenter_obj_li from '../../ae_comp__event_presenter_obj_li.svelte';
import Comp_event_session_obj_li from './ae_comp__event_session_obj_li.svelte';
// import Element_manage_event_file_li from '$lib/element_manage_event_file_li.svelte';
import { liveQuery } from "dexie";
import { core_func } from '$lib/ae_core_functions';
@@ -527,7 +528,15 @@ async function handle_search__event_session(
{/if}
{/await}
{#if $events_slct.event_session_obj_li?.length == event_session_id_random_li?.length && event_session_id_random_li.length == $lq_kv__event_session_obj_li?.length}
{#if $events_slct.event_session_obj_li?.length == event_session_id_random_li?.length}
<Comp_event_session_obj_li
link_to_type={'event'}
link_to_id={$events_slct.event_id}
event_session_id_random_li={event_session_id_random_li}
/>
{/if}
{#if 1==3 && $events_slct.event_session_obj_li?.length == event_session_id_random_li?.length && event_session_id_random_li.length == $lq_kv__event_session_obj_li?.length}
<!-- {#if $events_slct?.event_session_obj_li && $events_slct.event_session_obj_li.length > 0} -->
<section class="ae_h_scrollfix py-2 space-y-2">
<h2 class="h3">
@@ -579,7 +588,7 @@ async function handle_search__event_session(
{/if}
</a>
{#if $ae_loc.administrator_access}
<!-- {#if $ae_loc.administrator_access}
<Comp_event_presenter_obj_li
link_to_type={'event_session'}
link_to_id={session_obj.event_session_id_random}
@@ -598,7 +607,7 @@ async function handle_search__event_session(
container_class_li={''}
display_mode={'minimal'}
/>
{/if}
{/if} -->
</td>
<td>

384
src/routes/events_pres_mgmt/event/[slug]/ae_comp__event_session_obj_li.svelte Normal file
View File

@@ -0,0 +1,384 @@
<script lang="ts">
// Imports
// import { createEventDispatcher, onMount } from 'svelte';
import type { key_val } from '$lib/ae_stores';
import { ae_util } from '$lib/ae_utils';
// import { api, send_email } from '$lib/api';
import Element_ae_crud from '$lib/element_ae_crud.svelte';
// import Element_data_store from '$lib/element_data_store.svelte';
import Comp_event_presenter_obj_li from '../../ae_comp__event_presenter_obj_li.svelte';
import Element_manage_event_file_li from '$lib/element_manage_event_file_li.svelte';
import { liveQuery } from "dexie";
import { core_func } from '$lib/ae_core_functions';
import { db_events } from "$lib/db_events";
import { ae_html, ae_loc, ae_sess, ae_api, ae_trig, slct, slct_trigger } from '$lib/ae_stores';
import { events_loc, events_sess, events_slct, events_trigger, events_trig_kv } from '$lib/ae_events_stores';
import { events_func } from '$lib/ae_events_functions';
// Exports
export let container_class_li: string|Array<string> = [];
export let link_to_type: string;
export let link_to_id: string;
export let event_session_id_random_li: Array<string> = ['VSBH-19-41-50'];
// export let allow_basic: boolean = false;
// export let allow_moderator: boolean = false;
// export let display_mode: string = 'default'; // 'default', 'compact', 'minimal', 'launcher'
// let ae_promises: key_val = {};
let ae_tmp: key_val = {};
let ae_triggers: key_val = {};
// let dq__where_type_val: string = link_to_type; // "event", "event_location", "event_track"
let dq__where_type_id_val: string = `${link_to_type}_id_random`;
let dq__where_eq_id_val: string = link_to_id;
// Functions and Logic
import { browser } from '$app/environment';
if (browser) {
console.log('Browser environment detected.');
}
// let lq__event_obj = liveQuery(
// () => db_events.events.get($events_slct.event_id)
// );
// let lq__event_session_obj_li = liveQuery(
// () => db_events.sessions
// .where(dq__where_type_id_val)
// .equals(dq__where_eq_id_val)
// .sortBy('name')
// );
let lq_kv__event_session_obj_li = liveQuery(
() => db_events.sessions
.bulkGet(event_session_id_random_li)
.then(results => {
// console.log(`LQ Results:`, results);
// If the results are an array
if (results.length == 1) {
// If the first item is undefined we need to do something.
if (results[0] == undefined) {
console.log('Something went wrong! No sessions found?');
// return [];
// return [{ id: '' }];
// return 'NOTHING???';
}
return results;
}else if (results.length > 1) {
return results;
} else {
return ['No sessions found.'];
}
// return results;
})
.catch(error => {
console.error(`LQ Error: ${error}`);
return ['No sessions found.'];
})
.finally(() => {
console.log(`LQ Finally:`, $lq_kv__event_session_obj_li);
})
);
</script>
<section class="ae_comp event_session_obj_li {container_class_li} max-w-100 outline overflow-x-scroll">
{#if event_session_id_random_li && $events_slct.event_session_obj_li?.length == $lq_kv__event_session_obj_li?.length}
<!-- {#if $events_slct.event_session_obj_li?.length == event_session_id_random_li?.length && event_session_id_random_li.length == $lq__event_session_obj_li?.length} -->
<!-- {#if $events_slct?.event_session_obj_li && $events_slct.event_session_obj_li.length > 0} -->
<!-- <section class="ae_h_scrollfix py-2 space-y-2"> -->
<section class="py-2 space-y-2">
<h2 class="h3">
<span class="text-md">
Results:
</span>
{#if $events_slct.event_session_obj_li.length}
<span class="text-3xl font-bold bg-success-100 px-4 border rounded-lg border-success-200"
title="Count {$events_slct.event_session_obj_li.length ?? 'None'}"
>
<span class="fas fa-list-ol mx-4"></span>
{$events_slct.event_session_obj_li.length ?? 'None'}
</span>
{/if}
</h2>
<table class="table">
<thead>
<tr>
<th>Session</th>
<th>Date</th>
<th>Start/End</th>
<th>Location</th>
<th>POC</th>
</tr>
</thead>
<tbody>
<!-- {#each $events_slct?.event_session_obj_li as session_obj} -->
{#each $lq_kv__event_session_obj_li as session_obj}
<tr>
<td>
<a
href="/events_pres_mgmt/session/{session_obj.event_session_id_random}"
class="btn btn-md variant-ghost-secondary hover:variant-filled-secondary min-w-full max-w-md"
title="{session_obj.name} - {session_obj.event_session_id_random}"
>
<span class="fas fa-eye mx-1"></span>
<!-- overflow-x-scroll -->
<span class="grow overflow-hidden">
<strong>{session_obj.name}</strong>
</span>
{#if session_obj.file_count_all}
<span class="badge variant-glass-success hover:variant-filled-success" title="{session_obj.file_count}x files under session">
<span class="fas fa-file-alt mx-1"></span>
{session_obj.file_count_all}x
</span>
{:else}
<!-- Nothing -->
{/if}
</a>
<!-- {#if $ae_loc.administrator_access}
<Comp_event_presenter_obj_li
link_to_type={'event_session'}
link_to_id={session_obj.event_session_id_random}
display_mode={'minimal'}
>
</Comp_event_presenter_obj_li>
{/if} -->
<!-- {#if $ae_loc.administrator_access}
<Element_manage_event_file_li
link_to_type={'event_session'}
link_to_id={session_obj.event_session_id_random}
allow_basic={$events_loc.auth__kv.session[$events_slct.event_session_id] || $events_loc.auth__kv.presenter[$events_slct.event_presenter_id]}
allow_moderator={$events_loc.auth__kv.session[$events_slct.event_session_id]}
container_class_li={''}
display_mode={'minimal'}
/>
{/if} -->
</td>
<td>
<span style="break-inside: avoid;">
{ae_util.iso_datetime_formatter(session_obj.start_datetime,'dddd')}
{ae_util.iso_datetime_formatter(session_obj.start_datetime,'date_long_month_day')}
</span>
<td>
{#if session_obj.start_datetime}
<span style="break-inside: avoid;">
{ae_util.iso_datetime_formatter(session_obj.start_datetime,'time_short')}
</span>
&ndash;<wbr>
<span style="break-inside: avoid;">
{ae_util.iso_datetime_formatter(session_obj.end_datetime,'time_short')}
</span>
{:else}
{@html ae_html.not_set}
{/if}
</td>
<td>{session_obj.event_location_name ?? '-- not set --'}</td>
<td>
{#if session_obj.poc_person_full_name}
<span style="break-inside: avoid;">
<span class="fas fa-user mx-1"></span>
{session_obj.poc_person_full_name}
</span>
<!-- <br> -->
{#if $ae_loc.trusted_access}
<span style="break-inside: avoid;">
<a href="mailto:{session_obj.poc_person_primary_email}" class="hover:underline">
<span class="fas fa-envelope mx-1"></span>
{session_obj.poc_person_primary_email}
</a>
</span>
{/if}
{:else}
{@html ae_html.not_set}
{/if}
{#if $ae_loc.trusted_access}
{#if session_obj.event_session_id_random == $events_slct.event_session_id && ae_tmp[$events_slct.event_session_id] && ae_tmp[$events_slct.event_session_id].show__edit_poc_person}
<Element_ae_crud
trigger_patch={ae_triggers.update_person_poc}
api_cfg={$ae_api}
object_type={'event_session'}
object_id={$events_slct?.event_session_id}
field_name={'poc_person_id_random'}
field_type={'button'}
field_value={ae_tmp[$events_slct.event_session_id].poc_person_id}
allow_null={false}
hide_edit_btn={true}
outline_element={false}
show_crud={false}
display_inline={true}
class_li={'m-1'}
on:ae_crud_updated={e => {
console.log(`ae_crud_updated:`, e.detail);
events_func.handle_load_ae_obj_id__event_session({api_cfg: $ae_api, event_session_id: $events_slct?.event_session_id, log_lvl: 1})
.then(function (load_results) {
ae_tmp[$events_slct.event_session_id].poc_person_id = null;
ae_tmp[$events_slct.event_session_id].show__edit_poc_person = false;
$events_slct.event_session_id = null;
$events_slct.event_obj = null;
// Careful with the trigger_patch. It will keep firing if not reset.
ae_triggers.update_person_poc = false;
// Maybe reload page?
// window.location.reload();
});
}}
>
{#await $slct.person_obj_li}
<span class="fas fa-spinner fa-spin mx-1"></span>
{:then person_obj_li}
{#if person_obj_li && person_obj_li.length > 0}
<label class="text-sm">PoC:
<select
bind:value={ae_tmp[$events_slct.event_session_id].poc_person_id}
class="select min-w-fit max-w-md text-sm"
>
<option value="">-- Select a person --</option>
{#each person_obj_li as person_obj}
<option
value={person_obj.person_id_random}
selected={person_obj.person_id_random == $events_slct?.event_session_obj?.poc_person_id_random}
>
{person_obj.full_name}
({person_obj.primary_email})
<!-- (ID: {person_obj.person_id_random}) -->
</option>
{/each}
</select>
</label>
<button
type="button"
disabled={ae_tmp[$events_slct.event_session_id].poc_person_id == $events_slct?.event_session_obj?.poc_person_id_random}
on:click={() => {
console.log('Save the POC person for the session.');
let person_id = ae_tmp[$events_slct.event_session_id].poc_person_id;
console.log('Selected person ID:', person_id);
ae_triggers.update_person_poc = true;
}}
class="btn btn-sm variant-soft-warning hover:variant-ghost-warning"
>
<span class="fas fa-save mx-1"></span>
Save
</button>
{/if}
{/await}
</Element_ae_crud>
{/if}
{#if ae_tmp[$events_slct.event_session_id] && ae_tmp[$events_slct.event_session_id].show__edit_poc_person}
<button
type="button"
on:click={() => {
console.log('Cancel the POC person for the session.');
ae_tmp[$events_slct.event_session_id].poc_person_id = null;
ae_tmp[$events_slct.event_session_id].show__edit_poc_person = false;
$events_slct.event_session_id = null;
$events_slct.event_obj = null;
}}
class="btn btn-sm variant-soft-warning hover:variant-ghost-warning"
>
<span class="fas fa-times mx-1"></span>
Cancel
</button>
{:else}
<button
type="button"
on:click={() => {
console.log('Edit the POC person for the session.');
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});
$events_slct.event_session_id = session_obj?.event_session_id_random;
ae_tmp[$events_slct.event_session_id] = {
poc_person_id: session_obj?.poc_person_id_random,
show__edit_poc_person: true,
};
// }
// ae_tmp[$events_slct.event_session_id].poc_person_id = $events_slct?.event_session_obj?.poc_person_id_random;
// ae_tmp[$events_slct.event_session_id].show__edit_poc_person = true;
}}
class="btn btn-sm variant-soft-warning hover:variant-ghost-warning"
>
<span class="fas fa-edit mx-1"></span>
Edit
</button>
{/if}
{/if} <!-- $ae_loc.trusted_access -->
</td>
</tr>
{/each}
</tbody>
</table>
</section>
{:else}
<p class="text-center text-2xl bg-gray-100 p-4 rounded-md">
No results to show. Please use the search above to find your session.
</p>
<div class="text-sm text-gray-500 text-center">
Query results length: {$events_slct.event_session_obj_li?.length};
<!-- ID list length: {event_session_id_random_li?.length}; -->
<!-- LQ results length: {$lq__event_session_obj_li?.length} -->
LQ KV results length: {$lq_kv__event_session_obj_li?.length}
</div>
{/if}
<!-- This is to help correct a bug(?) with Dexie and LiveQuery and Svelte. The LiveQuery value may not be updated if no results are found. This a problem on the very first run. -->
<!-- This needs to be in here so it works correctly with the liveQuery. -->
<!-- {#if $events_slct.event_session_obj_li?.length == $lq__event_session_obj_li?.length} -->
<!-- {#if $events_slct.event_session_obj_li?.length == event_session_id_random_li?.length && event_session_id_random_li.length == $lq__event_session_obj_li?.length} -->
<!-- <div
class="text-sm text-gray-500 text-center"
class:hidden={!$ae_loc.administrator_access}
> -->
<!-- Count: -->
<!-- {event_session_id_random_li.length} -->
<!-- {$lq__event_session_obj_li?.map(event_session_obj => event_session_obj?.event_session_id_random)} -->
<!-- {#if $lq__event_session_obj_li?.length > 0}
<div class="flex flex-row flex-wrap justify-center items-center space-x-2 space-y-2">
{#each $lq__event_session_obj_li as event_session_obj}
<span>
{event_session_obj?.event_session_id_random}
</span>
{/each}
</div>
{:else}
<div class="text-center">
<span class="fas fa-exclamation-triangle text-2xl text-yellow-500"></span>
<span class="text-lg">No results found.</span>
</div>
{/if} -->
<!-- </div>
{:else} -->
<!-- No match -->
<!-- {/if} -->
</section>