Files
OSIT-AE-App-Svelte/src/routes/events/ae_comp__event_session_obj_li.svelte
2025-09-29 14:17:27 -04:00

604 lines
24 KiB
Svelte
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<script lang="ts">
interface Props {
// Exports
log_lvl?: number;
container_class_li?: string|Array<string>;
// export let display_mode: string = 'default'; // 'default', 'compact', 'minimal', 'launcher'
// link_to_type?: null|string;
// link_to_id?: null|string;
lq__event_session_obj_li: any;
hide__session_location?: boolean;
hide__session_poc?: boolean;
show__launcher_link?: boolean;
show__launcher_link_legacy?: boolean;
show__location_link?: boolean;
show__session_files?: boolean;
show__session_presentations?: boolean;
}
let {
log_lvl = 0,
container_class_li = [],
// link_to_type,
// link_to_id,
lq__event_session_obj_li,
hide__session_location = false,
hide__session_poc = false,
show__launcher_link = false,
show__launcher_link_legacy = false,
show__location_link = false,
show__session_files = false,
show__session_presentations = false
}: Props = $props();
// *** Import Svelte specific
import type { key_val } from '$lib/ae_stores';
import { ae_util } from '$lib/ae_utils/ae_utils';
import Element_ae_crud from '$lib/element_ae_crud.svelte';
import Element_ae_crud_v2 from '$lib/element_ae_crud_v2.svelte';
// import Element_data_store from '$lib/element_data_store_v2.svelte';
import Comp_event_presenter_obj_li from '../events/[event_id]/presenter/ae_comp__event_presenter_obj_li_wrapper.svelte';
import Element_manage_event_file_li from '$lib/element_manage_event_file_li_direct.svelte';
// import { liveQuery } from "dexie";
// *** Import Aether specific variables and functions
import { core_func } from '$lib/ae_core/ae_core_functions';
// import { db_events } from "$lib/db_events";
import { ae_snip, 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';
// export let allow_basic: boolean = false;
// export let allow_moderator: boolean = false;
// if (log_lvl) {
// console.log(`link_to_type: ${link_to_type}; link_to_id: ${link_to_id}`);
// }
// Variables
// let ae_promises: key_val = {};
let ae_tmp: key_val = $state({});
let ae_triggers: key_val = $state({});
// *** Functions and Logic
</script>
<!-- xs:max-w-sm lg:max-w-100 -->
<!-- sm:border-red-200 md:border-yellow-200 lg:border-gray-100 -->
<section
class="
ae_comp event_session_obj_li
border-x-2 border-dashed border-x-red-500
sm:border-x-red-400 md:border-x-yellow-400 lg:border-x-transparent
px-0.5 py-2 space-y-2
min-w-full
w-full
container overflow-x-scroll {container_class_li}
"
>
{#if $lq__event_session_obj_li && $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} -->
<!-- {#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 xs:max-w-sm lg:max-w-100 container overflow-x-scroll"> -->
<h2 class="h3 text-success-800-400">
<span class="text-sm">
Sessions:
</span>
{#if $lq__event_session_obj_li?.length}
<span
class="text-3xl font-bold preset-filled-success-100-900 px-4 rounded-lg"
title="Count {$lq__event_session_obj_li.length ?? 'None'}"
>
<span class="fas fa-list-ol mx-4"></span>
{$lq__event_session_obj_li.length ?? 'None'}&times;
</span>
{/if}
</h2>
<table class="table table-auto table-striped ">
<thead>
<tr>
<th>Session</th>
<th>Date</th>
<th>
<span class="md:hidden">
Times
</span>
<span class="hidden md:inline">
StartEnd
</span>
</th>
<th
class:hidden={hide__session_location}
>Location</th>
<th
class:hidden={hide__session_poc}
>POC</th>
</tr>
</thead>
<tbody>
<!-- {#each $events_slct?.event_session_obj_li as session_obj} -->
{#each $lq__event_session_obj_li as session_obj, index}
<tr
class:dim={session_obj?.hide}
class:bg-warning-100={!session_obj?.enable}
class:text-warning-900={!session_obj?.enable}
>
<td>
<a
href="/events/{session_obj?.event_id}/session/{session_obj?.event_session_id}"
class="
btn
ae_btn_secondary_filled
min-w-full max-w-md
sm:w-80
text-xs/3 sm:text-xs/4 md:text-xs/4 lg:text-sm/4 xl:text-base/5
md:max-w-xs
sm:btn-sm
md:btn-md
"
title="{session_obj?.name} - {session_obj?.event_session_id_random}"
>
<!-- <span class="fas fa-eye m-0.25 text-xs text-surface-800-200"></span> -->
<span class="fas fa-chalkboard-teacher m-0.25 text-xs text-neutral-800/50"></span>
<!-- overflow-x-scroll -->
<span
class="
grow overflow-hidden text-wrap text-left
max-h-12 sm:max-h-12 md:max-h-9 lg:max-h-12 xl:max-h-16
"
>
<!-- <div> -->
<strong>{session_obj?.name}</strong>
<!-- </div> -->
</span>
{#if session_obj?.file_count_all}
<span class="badge preset-tonal-success hover:preset-filled-success-500" title="{session_obj?.file_count_all}× files under session">
<span class="fas fa-file-alt mx-1"></span>
{session_obj?.file_count_all}×
</span>
{:else}
<!-- Nothing -->
{/if}
</a>
{#if show__session_presentations && $ae_loc.manager_access}
<Comp_event_presenter_obj_li
link_to_type={'event_session'}
link_to_id={session_obj?.event_session_id_random}
display_mode={'minimal'}
log_lvl={log_lvl}
>
</Comp_event_presenter_obj_li>
{/if}
{#if show__session_files && $ae_loc.manager_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 class="flex flex-col text-xs lg:text-sm">
<span>
{ae_util.iso_datetime_formatter(session_obj?.start_datetime,'dddd')}
</span>
<span style="break-inside: avoid;">
{ae_util.iso_datetime_formatter(session_obj?.start_datetime,'date_long_month_day')}
</span>
</span>
</td>
<td>
<span class="flex flex-col items-center md:flex-row md:items-start md:text-center max-w-36 text-xs lg:text-sm">
{#if session_obj?.start_datetime}
<span style="break-inside: avoid;">
{ae_util.iso_datetime_formatter(session_obj?.start_datetime,'time_12_short')}
</span>
<span class="grow">
</span>
<span style="break-inside: avoid;">
{ae_util.iso_datetime_formatter(session_obj?.end_datetime,'time_12_short')}
</span>
{:else}
{@html ae_snip.html__not_set}
{/if}
</span>
</td>
<td
class:hidden={hide__session_location}
>
<!-- Minimum level access to see the link here is "trusted". -->
<!-- BEGIN: Legacy link -->
{#if show__launcher_link_legacy}
<a
data-sveltekit-preload-data="false"
href="/event/{session_obj?.event_id_random}/launcher/{session_obj?.event_location_id_random}"
class="btn btn-sm preset-tonal-secondary hover:preset-filled-secondary-500 text-xs lg:text-sm"
title="Launcher: {session_obj?.event_location_name} {session_obj?.event_location_id_random}"
>
<span class="fas fa-paper-plane m-1"></span>
{@html session_obj?.event_location_name ? session_obj?.event_location_name : ae_snip.html__not_set}
</a>
{:else}
<span>
{session_obj?.event_location_name ?? '-- not set --'}
</span>
{/if}
<!-- END: Legacy Link -->
{#if show__launcher_link}
<a
href="/events/{session_obj?.event_id_random}/launcher/{session_obj?.event_location_id_random}?session_id={session_obj?.event_session_id_random}"
class="btn btn-sm preset-tonal-surface hover:preset-filled-secondary-500 text-xs lg:text-sm"
title="Launcher: {session_obj?.event_location_name} {session_obj?.event_location_id_random}"
>
<span class="fas fa-plane m-1"></span>
{@html session_obj?.event_location_name ? session_obj?.event_location_name : ae_snip.html__not_set}
</a>
{:else}
<!-- <span>
{session_obj?.event_location_name ?? '-- not set --'}
</span> -->
{/if}
{#if show__location_link}
<a
href="/events/{session_obj?.event_id_random}/location/{session_obj?.event_location_id_random}"
class="btn btn-sm preset-tonal-surface hover:preset-filled-tertiary-500 text-xs lg:text-sm"
title="Location: {session_obj?.event_location_name} {session_obj?.event_location_id_random}"
>
<span class="fas fa-map-marker-alt m-1"></span>
<!-- {@html session_obj?.event_location_name ? session_obj?.event_location_name : ae_snip.html__not_set} -->
</a>
{/if}
{#if $ae_loc.edit_mode}
<Element_ae_crud_v2
api_cfg={$ae_api}
trigger_patch={ae_triggers.update_location}
object_type={'event_session'}
object_id={session_obj?.event_session_id_random}
field_name={'event_location_id_random'}
field_type={'button'}
current_field_value={session_obj?.event_location_id_random}
allow_null={true}
select_option_li={$slct.location_obj_kv}
hide_element={!$ae_loc.edit_mode}
hide_edit_btn={true}
hide_edit_form={$events_sess.pres_mgmt.show__edit_location[session_obj?.event_session_id_random] !== true}
outline_element={false}
display_inline={true}
class_li={'m-1'}
>
{#await $slct.location_obj_li}
<span class="fas fa-spinner fa-spin mx-1"></span>
{:then location_obj_li}
{#if location_obj_li && location_obj_li.length > 0}
<label class="text-sm">Location:
<select
bind:value={ae_tmp[session_obj.event_session_id_random].event_location_id_random}
class="select min-w-fit max-w-md text-sm"
>
<option value="">-- No location --</option>
{#each location_obj_li as location_obj}
<option
value={location_obj.event_location_id_random}
selected={location_obj.event_location_id_random == session_obj?.event_location_id_random}
>
{location_obj.name}
({location_obj.event_location_id_random})
</option>
{/each}
</select>
</label>
<button
type="button"
disabled={ae_tmp[session_obj.event_session_id_random].event_location_id_random == session_obj?.event_location_id_random}
onclick={() => {
console.log('Save the location for the session.');
let location_id = ae_tmp[session_obj.event_session_id_random].event_location_id_random;
console.log('Selected location ID:', location_id);
ae_triggers.update_location = true;
}}
class="btn btn-sm preset-tonal-warning hover:preset-tonal-warning border border-warning
"
>
<span class="fas fa-save mx-1"></span>
Save
</button>
{/if}
{/await}
</Element_ae_crud_v2>
{/if}
{#if ae_tmp?.show__edit_location}
{#await $slct.event_location_obj_li}
<span class="fas fa-spinner fa-spin mx-1"></span>
{:then event_location_obj_li}
<!-- {#if event_location_obj_li && event_location_obj_li.length > 0}
{/if} -->
{/await}
<button
type="button"
onclick={() => {
console.log('Cancel editing the location for the session.');
ae_tmp.event_location_id = null;
ae_tmp.show__edit_event_location = false;
$events_sess.pres_mgmt.show__edit_location[session_obj?.event_session_id_random] = false;
}}
class="btn btn-sm preset-tonal-warning hover:preset-tonal-warning border border-warning-500"
>
<span class="fas fa-times mx-1"></span>
Cancel
</button>
{:else}
<button
type="button"
onclick={() => {
console.log('Edit the location for the session.');
let params = {
qry__limit: 50,
}
// $slct.event_location_obj_li = await core_func.load_ae_obj_li__event_location({api_cfg: $ae_api, account_id: $slct.account_id, params: params});
$slct.event_location_obj_li = events_func.load_ae_obj_li__event_location({
api_cfg: $ae_api,
for_obj_type: 'event',
for_obj_id: session_obj?.event_id_random,
params: params,
log_lvl: log_lvl
})
.then(function (load_results) {
console.log(`Loaded event_location_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 event_location_id_random as the key. We also need to set the option text value to: name (room)
if (load_results) {
let event_location_obj_li = load_results;
let event_location_obj_kv = {}; //: key_val = {};
event_location_obj_kv[''] = '-- Select a location --';
event_location_obj_li.forEach((event_location_obj) => {
let option_text = `${event_location_obj.name} (${event_location_obj.code})`;
event_location_obj_kv[event_location_obj.event_location_id_random] = option_text;
});
$slct.event_location_obj_kv = event_location_obj_kv;
}
// $slct.event_location_obj_kv = $slct.event_location_obj_kv;
console.log(`$slct.event_location_obj_kv = `, $slct.event_location_obj_kv);
return load_results;
})
.finally(function () {
console.log(`Finally...`);
ae_tmp.event_location_id = session_obj?.event_location_id_random;
ae_tmp.show__edit_event_location = true;
$events_sess.pres_mgmt.show__edit_location[session_obj?.event_session_id_random] = true;
});
}}
class="btn btn-sm preset-tonal-warning group"
>
<span class="fas fa-edit m-0.75"></span>
<span class="hidden group-hover:inline">Edit</span>
</button>
{/if}
</td>
<td
class:hidden={hide__session_poc}
>
<span class="flex flex-col items-start lg:flex-row lg:items-center lg:justify-between text-xs lg:text-sm">
{#if session_obj?.poc_person_full_name}
<span style="break-inside: avoid;" class="">
<span class="fas fa-user m-0.25 text-xs text-surface-800-200"></span>
{session_obj?.poc_person_full_name}
</span>
<!-- <br> -->
{#if $ae_loc.trusted_access && session_obj?.poc_person_primary_email}
<span style="break-inside: avoid;" class="text-xs">
<a href="mailto:{session_obj?.poc_person_primary_email}" class="hover:underline">
<span class="fas fa-envelope m-0.25 text-xs text-surface-800-200"></span>
{session_obj?.poc_person_primary_email}
</a>
</span>
{/if}
{:else}
{@html ae_snip.html__not_set}
{/if}
{#if 1==3 && $ae_loc.administrator_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.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}
onclick={() => {
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 preset-tonal-warning hover:preset-tonal-warning border border-warning-500"
>
<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"
onclick={() => {
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 preset-tonal-warning hover:preset-tonal-warning border border-warning-500"
>
<span class="fas fa-times mx-1"></span>
Cancel
</button>
{:else}
<button
type="button"
onclick={() => {
console.log('Edit the POC person for the session.');
// let params = {
// qry__limit: 300,
// }
$slct.person_obj_li = core_func.load_ae_obj_li__person({
api_cfg: $ae_api,
for_obj_type: 'account',
for_obj_id: $slct.account_id,
limit: $ae_loc.person.qry_limit__people,
// 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 ae_btn_warning"
class:hidden={!$ae_loc.edit_mode}
>
<span class="fas fa-edit mx-1"></span>
Edit
</button>
{/if}
{/if} <!-- $ae_loc.trusted_access -->
</span> <!-- flex flex-col items-center md:flex-row md:items-start -->
</td>
</tr>
{/each}
</tbody>
</table>
<!-- </section> -->
{:else}
<p class="text-center text-2xl bg-gray-100 p-4 rounded-md">
<span class="fas fa-exclamation-triangle text-2xl text-yellow-500"></span>
No results to show. Please use the search above to find your session.
<span class="fas fa-exclamation-triangle text-2xl text-yellow-500"></span>
</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}
</section>