Files
OSIT-AE-App-Svelte/src/routes/events_pres_mgmt/presenter_view.svelte
2024-08-15 15:49:26 -04:00

1501 lines
61 KiB
Svelte

<script lang="ts">
console.log(`ae_events_pres_mgmt presenter_view.svelte`);
import { createEventDispatcher, onMount } from 'svelte';
import { clipboard, FileDropzone } from '@skeletonlabs/skeleton';
import { liveQuery } from "dexie";
const dispatch = createEventDispatcher();
import type { key_val } from '$lib/ae_stores';
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 Element_manage_event_file_li from '$lib/element_manage_event_file_li.svelte';
import { core_func } from '$lib/ae_core_functions';
import { ae_snip, 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';
import { events_func } from '$lib/ae_events_functions';
// Exports
// export let event_presenter_id: string;
export let lq__event_presenter_obj: any;
// export let event_presentation_id: string;
export let lq__event_presentation_obj: any;
// export let display_mode: string = 'default'; // 'default', 'compact', 'minimal', 'launcher'
let ae_placeholder_li: key_val = {};
let ae_promises: key_val = {}; // Promise<any>;
let ae_tmp: key_val = {};
ae_tmp.show__file_li = true;
let ae_triggers: key_val = {};
let lq__event_obj = liveQuery(
() => db_events.events.get($events_slct.event_id)
);
// let lq__event_session_obj = liveQuery(
// () => db_events.sessions.get($events_slct.event_session_id)
// );
// let lq__event_presentation_obj = liveQuery(
// async () => await db_events.presentations.get(event_presentation_id)
// );
console.log(`event_presenter_id:`, $lq__event_presenter_obj?.event_presenter_id_random);
// let lq__event_presenter_obj = liveQuery(
// async () => await db_events.presenters.get(event_presenter_id)
// );
// let event_presentation_id: null|string = $lq__event_presenter_obj?.event_presentation_id_random ?? '';
// event_presentation_id = $lq__event_presenter_obj?.event_presentation_id_random ?? event_presentation_id;
console.log(`event_presentation_id:`, $lq__event_presentation_obj?.event_presentation_id_random);
// $events_slct.event_presentation_id = event_presentation_id;
// event_presentation_id = $lq__event_presenter_obj?.event_presentation_id_random;
// let lq__event_presentation_obj = liveQuery(
// () => db_events.presentations.get(event_presentation_id)
// );
// export let event_presentation_obj: any = $lq__event_presentation_obj;
let lq__event_file_obj_li = liveQuery(
async () => await db_events.files.where('event_presenter_id_random').equals($lq__event_presenter_obj?.event_presenter_id_random).toArray()
);
ae_tmp.biography = null;
$: if ($lq__event_presenter_obj?.biography && ae_tmp.biography === null) {
ae_tmp.biography = JSON.parse(JSON.stringify($lq__event_presenter_obj.biography));
}
// console.log(`ae_tmp.biography:`, $lq__event_presenter_obj?.biography);
$slct.person_obj_kv = {}; // This is intended for the person presenter lookup list when generated.
// $events_slct.event_presenter_obj = $lq__event_presenter_obj;
// $events_sess.pres_mgmt.disable_submit__opt_out = false;
// let tmp_agree = false;
// let tmp_opt_out: key_val = {
// audio: false,
// video: false,
// transcription_and_publication: false,
// publication_in_app: false
// };
onMount(() => {
console.log('Events Pres Mgmt: presenter_view.svelte');
console.log(`event_presenter_id:`, $lq__event_presenter_obj?.event_presenter_id_random);
$slct_trigger = 'load__event_file_obj_li';
// ae_tmp.biography = $lq__event_presenter_obj?.biography;
});
async function handle_submit_form_files(event) {
console.log('*** handle_submit_form() ***');
$events_sess.pres_mgmt.disable_submit__event_file_obj = true;
$events_sess.pres_mgmt.submit_status = 'saving';
let hosted_file_results;
if (event.target.presenter_event_file.files.length > 0) {
hosted_file_results = await handle_input_upload_files(event.target.presenter_event_file.files);
if (hosted_file_results) {
console.log(`hosted_file_results:`, hosted_file_results);
} else {
console.log(`hosted_file_results:`, hosted_file_results);
}
}
$events_sess.pres_mgmt.disable_submit__event_file_obj = false;
}
async function handle_input_upload_files(input_upload_files) {
console.log('*** handle_input_upload_files() ***');
let link_to_type = 'event_presenter';
let link_to_id = $lq__event_presenter_obj?.event_presenter_id_random;
const form_data = new FormData();
form_data.append('account_id', $ae_loc.account_id);
form_data.append('link_to_type', link_to_type);
form_data.append('link_to_id', link_to_id);
for (let i = 0; i < input_upload_files.length; i++) {
form_data.append(`file_list`, input_upload_files[i]);
}
let params = null;
let endpoint = '/hosted_file/upload_files';
console.log(form_data);
params = null;
// Uncomment and the post_promise is not seen by the "await" below
// post_promise = await api.post_object({api_cfg: $cfg.api, endpoint: endpoint, params: params, data:form_data});
// Uncomment so that the post_promise is not seen by the "await" below
ae_promises.upload__hosted_file_obj = api.post_object({
api_cfg: $ae_api,
endpoint: endpoint,
params: params,
form_data: form_data,
task_id: link_to_id,
log_lvl: 0
})
.then(async function (result) {
// NOTE: The /hosted_file/upload_files endpoint will always return a list of successful files uploaded. In this case we are only uploading one file and expecting a list of one item.
let x = 0;
console.log(result[x]);
let hosted_file_obj = result[x];
let hosted_file_id = hosted_file_obj.hosted_file_id_random;
let event_file_data: key_val = {};
event_file_data['hosted_file_id_random'] = hosted_file_id;
event_file_data['for_type'] = link_to_type;
event_file_data['for_id_random'] = link_to_id;
event_file_data['filename'] = hosted_file_obj.filename;
event_file_data['extension'] = hosted_file_obj.extension;
event_file_data['enable'] = true;
console.log(event_file_data);
// $events_sess.pres_mgmt.new_upload_list[i].uploaded_bytes = 10; // fake 10 bytes at least...
let event_file_id = await events_func.create_event_file_obj_from_hosted_file_async({
api_cfg: $ae_api,
hosted_file_id: hosted_file_id,
data: event_file_data,
log_lvl: 2
})
.then(function (create_result) {
console.log(create_result); // NOTE: This should be the event_file_id string
// let event_file_id = create_result;
return create_result;
});
return event_file_id;
})
.then(function (event_file_id) {
// NOTE: Need to make sure the event file records are created first. The update won't see the changes if too fast.
// dispatch(
// 'event_file_obj_li_updated',
// {
// link_to_type: link_to_type,
// link_to_id: link_to_id,
// }
// );
// $ae_events.pres_mgmt.new_upload_list[i].uploaded = true;
// $ae_events.pres_mgmt.new_upload_list[i].uploaded_bytes = event.target.event_file_upload_file_list.files[i].size;
return event_file_id;
})
.catch(function (error) {
console.log('Something went wrong.');
console.log(error);
return false;
})
.finally(function (event_file_id) {
// $events_sess.pres_mgmt.files_uploading_count--;
$slct_trigger = 'load__event_file_obj_li';
return event_file_id;
});
console.log(ae_promises.upload__hosted_file_obj);
let hosted_file_result = ae_promises.upload__hosted_file_obj;
return hosted_file_result;
}
async function handle_delete__event_file({event_file_id}) {
console.log(`*** handle_delete__event_file() *** event_file_id:`, event_file_id);
let link_to_type = 'event_presenter';
let link_to_id = $lq__event_presenter_obj?.event_presenter_id_random;
ae_promises.delete__event_file_obj = await events_func.handle_delete_ae_obj_id__event_file({
api_cfg: $ae_api,
event_file_id: event_file_id,
log_lvl: 2
})
.then(function (event_file_obj_result) {
console.log(event_file_obj_result);
if (!event_file_obj_result) {
console.log('The result was null or false.');
return false;
} else {
console.log(`event_file_obj_result = `, event_file_obj_result);
}
dispatch(
'event_file_obj_deleted',
{
event_file_id: event_file_id,
link_to_type: link_to_type,
link_to_id: link_to_id,
}
);
return event_file_obj_result;
}).catch(function (error) {
console.log('Something went wrong deleting the event file.');
console.log(error);
return false;
});
return ae_promises.delete__event_file_obj;
}
$: if ($lq__event_presenter_obj) {
// Generate a QR code for the object ID.
// ae_promises.generate_qr_code_obj_id = core_func.generate_qr_code({api_cfg: $ae_api, account_id: $slct.account_id, qr_type: 'obj', qr_id: $lq__event_presenter_obj?.event_presenter_id_random, obj_type: 'event_presenter', obj_id: $lq__event_presenter_obj?.event_presenter_id_random});
// Generate a QR code for the URL.
let qr_id_url = `${$lq__event_presenter_obj?.event_presenter_id_random}_url`;
// URL for this page (be sure to URL encode it):
let url_str = `${$ae_loc.url_origin}/events_pres_mgmt/presenter/${$lq__event_presenter_obj?.event_presenter_id_random}`;
url_str = encodeURI(url_str);
ae_promises.generate_qr_code_url = core_func.generate_qr_code({api_cfg: $ae_api, account_id: $slct.account_id, qr_type: 'str', qr_id: qr_id_url, str: url_str});
}
</script>
{#if $lq__event_presenter_obj}
<h2 class="h3">
Presenter Details for:<br>
<strong>
{$lq__event_presenter_obj.full_name}
</strong>
<span class="text-sm">
{#if (!$ae_loc.trusted_access && !$events_loc.auth__kv.presenter[$lq__event_presenter_obj?.event_presenter_id_random] && !$events_loc.auth__kv.session[$lq__event_presenter_obj.event_session_id_random])}
<!-- Only show the domain name of the email address. -->
<!-- ( -->
<!-- {$lq__event_presenter_obj.email.replace(/@.*$/, '@...')} -->
<!-- {$lq__event_presenter_obj.person_primary_email.substring(0, 1) + '...@example.com'} -->
{#if $lq__event_presenter_obj?.email}
({$lq__event_presenter_obj.email.replace(/^(.{3}).*@/, '$1...@')})
{:else}
<!-- email
{ae_snip.html__not_set} -->
{/if}
<!-- ) -->
<!-- {@html $lq__event_presenter_obj?.email ? $lq__event_presenter_obj?.email.replace(/^(.{3}).*@/, '$1...@') : 'email'+ae_snip.html__not_set} -->
<!-- ) -->
(Not signed in as presenter)
{:else}
({@html $lq__event_presenter_obj.email ?? 'email '+ae_snip.html__not_set})
{/if}
</span>
{#if $ae_loc.trusted_access}
<!-- A button to copy the access link to the clipboard. -->
<!-- Example: /events_pres_mgmt/session/Wh8UnJlbIA0?person_id=fV1dl_IJ0yY&person_pass=abc123 -->
<button
type="button"
use:clipboard={encodeURI(`${$ae_loc.url_origin}/events_pres_mgmt/session/${$lq__event_presenter_obj.event_session_id_random}?person_id=${$lq__event_presenter_obj.person_id_random}&person_pass=${$lq__event_presenter_obj.person_passcode}&presentation_id=${$lq__event_presenter_obj?.event_presentation_id_random}&presenter_id=${$lq__event_presenter_obj?.event_presenter_id_random}`)}
class="btn btn-sm variant-ghost-warning float-right m-1"
title="Copy the presenter access link to the clipboard."
>
<span class="fas fa-copy mx-1"></span>
Copy Access Link
</button>
{/if}
{#if $ae_loc.trusted_access || !$events_loc.auth__person?.id }
<button
type="button"
on:click={() => {
console.log('Email the access link');
if (!$lq__event_presenter_obj.email) {
alert('No email address found for this presenter.');
return;
}
if (confirm(`This will send the sign in email to ${$lq__event_presenter_obj.email}`)) {
console.log('Send the email to the presenter.');
} else {
console.log('Cancelled sending the email.');
return false;
}
events_func.email_sign_in__event_presenter(
{
api_cfg: $ae_api,
to_email: $lq__event_presenter_obj.email,
to_name: $lq__event_presenter_obj?.full_name?? '-- not set --',
base_url: $ae_loc.url_origin,
person_id: $lq__event_presenter_obj?.person_id_random?? '-- not set --',
person_passcode: $lq__event_presenter_obj.person_passcode?? '-- not set --',
event_session_id: $lq__event_presenter_obj.event_session_id_random,
event_presentation_id: $lq__event_presenter_obj?.event_presentation_id_random,
event_presenter_id: $lq__event_presenter_obj?.event_presenter_id_random,
session_name: $lq__event_presenter_obj?.event_session_name?? '-- not set --',
presentation_name: $lq__event_presenter_obj?.event_presentation_name?? '-- not set --',
}
);
}}
class="btn btn-sm variant-ghost-secondary hover:variant-filled-secondary my-0.5 float-right"
title="Email the access link to the presenter"
>
<span class="fas fa-envelope mx-1"></span>
Email Access Link
</button>
{/if}
</h2>
<section class="p-2">
<h3 class="h4">
<span class="text-md font-normal">
Session:
</span>
<a
href="/events_pres_mgmt/session/{$lq__event_presenter_obj.event_session_id_random}"
class="text-blue-500 hover:text-blue-800 hover:underline"
title="ID: {$lq__event_presentation_obj?.event_session_id_random}"
>{$lq__event_presenter_obj.event_session_name}</a>
</h3>
<h3 class="h4">
<Element_ae_crud
api_cfg={$ae_api}
object_type={'event_presentation'}
object_id={$lq__event_presenter_obj?.event_presentation_id_random}
field_name={'name'}
field_type={'text'}
field_value={$lq__event_presentation_obj?.name}
allow_null={false}
hide_edit_btn={!$ae_loc.trusted_access || !$ae_loc.edit_mode}
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.load_ae_obj_id__event_presentation({api_cfg: $ae_api, event_presentation_id: $lq__event_presentation_obj?.event_presentation_id_random, log_lvl: 0});
}}
>
<span class="text-md font-normal">
Presentation Title:
</span>
<span
title="ID: {$lq__event_presentation_obj?.event_presentation_id_random}"
>
"{$lq__event_presenter_obj?.event_presentation_name}"
</span>
</Element_ae_crud>
<!-- Title: "{$lq__event_presentation_obj?.name}" -->
</h3>
<h3 class="h4">
<span class="text-md font-normal">
Presenter:
<span class="text-md font-normal">
</h3>
{#await ae_promises.generate_qr_code_obj_id}
Generating...
{:then result}
{#if ae_promises.generate_qr_code_obj_id}
<!-- {img_obj_url} -->
<span class="float-right flex flex-col items-center justify-center">
<img
class="qr_code qr_type_obj_id h-32 w-32 hover:h-48 hover:w-48 hidden"
style=""
src={result}
alt="Object ID QR code"
/>
<!-- src="{$cfg.api['base_url']}/qr/{$client.account_id}/{event_badge_obj.event_badge_id_random}?filename=qr_{$client.account_id}_{event_badge_obj.event_badge_id_random}_mecard.png" -->
<!-- src={qr_img_src} -->
<!-- on:dblclick={() => {
// (hide_qr) ? hide_qr = !hide_qr : hide_qr;
(hide_qr) ? hide_qr = false : hide_qr = true;
}} -->
<span>
<span class="fas fa-qrcode"></span>
Presenter ID
</span>
</span>
{/if}
{/await}
{#await ae_promises.generate_qr_code_url}
Generating...
{:then result}
{#if ae_promises.generate_qr_code_url && $ae_loc.trusted_access}
<span class="float-right m-1 p-1 flex flex-col items-center justify-center outline outline-gray-200 *:hover:inline">
<img
class="qr_code qr_type_url h-32 w-32 hover:h-48 hover:w-48"
style=""
src={result}
alt="URL QR code"
/>
<span>
<span class="fas fa-link"></span>
<span>Presenter URL</span>
</span>
<!-- URL: <a href="{$ae_loc.url_origin}/events_pres_mgmt/presenter/{$lq__event_presenter_obj?.event_presenter_id_random}" target="_blank">{$ae_loc.url_origin}/events_pres_mgmt/presenter/{$lq__event_presenter_obj?.event_presenter_id_random}</a> -->
<div class="hidden">
This QR is a link back to this page.
</div>
</span>
{/if}
{/await}
<ul
class="space-y-2 px-4"
>
<li
class:hidden={!$ae_loc.trusted_access && !$ae_loc.edit_mode}
>
<Element_ae_crud
api_cfg={$ae_api}
object_type={'event_presenter'}
object_id={$lq__event_presenter_obj?.event_presenter_id_random}
field_name={'external_id'}
field_type={'text'}
field_value={$lq__event_presenter_obj.external_id}
allow_null={true}
hide_edit_btn={!$ae_loc.administrator_access || !$ae_loc.edit_mode}
outline_element={false}
show_crud={false}
display_inline={true}
display_block_edit={false}
class_li={''}
on:ae_crud_updated={e => {
console.log(`ae_crud_updated:`, e.detail);
events_func.load_ae_obj_id__event_presenter({
api_cfg: $ae_api, event_presenter_id: $lq__event_presenter_obj?.event_presenter_id_random, log_lvl: 0
})
.then(function (load_results) {
// Maybe reload page?
// window.location.reload();
});
}}
>
<span class="fas fa-id-card"></span>
{$lq__event_obj?.mod_pres_mgmt_json?.external_id_label ?? 'External ID'}:
<span class="font-bold">
{@html $lq__event_presenter_obj?.external_id ?? ae_snip.html__not_set}
</span>
</Element_ae_crud>
{#if $lq__event_presenter_obj.external_id != $lq__event_presenter_obj.person_external_id}
<div>
<Element_ae_crud
api_cfg={$ae_api}
object_type={'person'}
object_id={$lq__event_presenter_obj.person_id_random}
field_name={'external_id'}
field_type={'text'}
field_value={$lq__event_presenter_obj.person_external_id}
allow_null={true}
hide_edit_btn={!$ae_loc.administrator_access || !$ae_loc.edit_mode}
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.load_ae_obj_id__event_presenter({
api_cfg: $ae_api, event_presenter_id: $lq__event_presenter_obj?.event_presenter_id_random, log_lvl: 0
})
.then(function (load_results) {
// Maybe reload page?
// window.location.reload();
});
}}
>
<span class="fas fa-star-of-life"></span>
Person External ID:
<span class="font-bold">
{@html $lq__event_presenter_obj.person_external_id ?? ae_snip.html__not_set}
</span>
</Element_ae_crud>
<Element_ae_crud
trigger_patch={ae_triggers.update_person_external_id}
api_cfg={$ae_api}
object_type={'person'}
object_id={$lq__event_presenter_obj.person_id_random}
field_name={'external_id'}
field_type={'text'}
field_value={$lq__event_presenter_obj.external_id}
allow_null={true}
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.load_ae_obj_id__event_presenter({
api_cfg: $ae_api, event_presenter_id: $lq__event_presenter_obj?.event_presenter_id_random, log_lvl: 0
})
.then(function (load_results) {
// Maybe reload page?
// window.location.reload();
});
}}
>
<button
type="button"
on:click={() => {
console.log('*** Sync external ID button clicked ***');
if (!confirm('Are you sure you want to sync the external IDs?')) {return false;}
ae_triggers.update_person_external_id = true;
}}
class="btn btn-sm variant-soft-warning hover:variant-ghost-warning"
title="Use the external ID 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>
<li>
<span class="fas fa-user"></span>
<!-- {#if !$events_sess.pres_mgmt.show_edit__event_presenter_name}
{$events_slct.presenter_obj.full_name}
{:else} -->
<!-- <div
hidden={!$events_sess.pres_mgmt.show_edit__event_presenter_name}
> -->
<!-- </div> -->
<!-- {/if} -->
<Element_ae_crud
api_cfg={$ae_api}
object_type={'event_presenter'}
object_id={$lq__event_presenter_obj?.event_presenter_id_random}
field_name={'given_name'}
field_type={'text'}
field_value={$lq__event_presenter_obj.given_name}
allow_null={false}
hide_edit_btn={!$ae_loc.trusted_access || !$ae_loc.edit_mode}
outline_element={false}
show_crud={false}
display_inline={true}
display_block_edit={false}
class_li={''}
on:ae_crud_updated={e => {
console.log(`ae_crud_updated:`, e.detail);
events_func.load_ae_obj_id__event_presenter({
api_cfg: $ae_api, event_presenter_id: $lq__event_presenter_obj?.event_presenter_id_random, log_lvl: 0
})
.then(function (load_results) {
// Maybe reload page?
// window.location.reload();
});
}}
>
<span class="font-bold">
{$lq__event_presenter_obj.given_name}
</span>
</Element_ae_crud>
<Element_ae_crud
api_cfg={$ae_api}
object_type={'event_presenter'}
object_id={$lq__event_presenter_obj?.event_presenter_id_random}
field_name={'family_name'}
field_type={'text'}
field_value={$lq__event_presenter_obj.family_name}
allow_null={true}
hide_edit_btn={!$ae_loc.trusted_access || !$ae_loc.edit_mode}
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.load_ae_obj_id__event_presenter({
api_cfg: $ae_api, event_presenter_id: $lq__event_presenter_obj?.event_presenter_id_random, log_lvl: 0
})
.then(function (load_results) {
// Maybe reload page?
// window.location.reload();
});
}}
>
<span class="font-bold">
{$lq__event_presenter_obj.family_name}
</span>
</Element_ae_crud>
</li>
<li
class:hidden={!$ae_loc.trusted_access && !$events_loc.auth__kv.presenter[$lq__event_presenter_obj?.event_presenter_id_random] && !$events_loc.auth__kv.session[$lq__event_presenter_obj.event_session_id_random]}
>
<Element_ae_crud
api_cfg={$ae_api}
object_type={'event_presenter'}
object_id={$lq__event_presenter_obj?.event_presenter_id_random}
field_name={'email'}
field_type={'text'}
field_value={$lq__event_presenter_obj.email}
allow_null={true}
hide_edit_btn={!$ae_loc.trusted_access || !$ae_loc.edit_mode}
outline_element={false}
show_crud={false}
display_inline={false}
class_li={''}
on:ae_crud_updated={e => {
console.log(`ae_crud_updated:`, e.detail);
events_func.load_ae_obj_id__event_presenter({
api_cfg: $ae_api, event_presenter_id: $lq__event_presenter_obj?.event_presenter_id_random, log_lvl: 0
})
.then(function (load_results) {
// Maybe reload page?
// window.location.reload();
});
}}
>
<span class="fas fa-envelope"></span>
<span class="font-bold">
{#if $lq__event_presenter_obj.email}
<a
href="mailto:{$lq__event_presenter_obj.email}"
class="text-blue-500 hover:text-blue-800 hover:underline"
title="Presenter's email address"
>{$lq__event_presenter_obj.email}</a>
{:else}
email
{@html ae_snip.html__not_set}
{/if}
</span>
</Element_ae_crud>
{#if $lq__event_presenter_obj.person_primary_email && $lq__event_presenter_obj.person_primary_email != $lq__event_presenter_obj.email}
<div>
<Element_ae_crud
api_cfg={$ae_api}
object_type={'person'}
object_id={$lq__event_presenter_obj.person_id_random}
field_name={'primary_email'}
field_type={'text'}
field_value={$lq__event_presenter_obj.person_primary_email}
allow_null={false}
hide_edit_btn={!$ae_loc.trusted_access || !$ae_loc.edit_mode}
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.load_ae_obj_id__event_presenter({
api_cfg: $ae_api, event_presenter_id: $lq__event_presenter_obj?.event_presenter_id_random, log_lvl: 0
})
.then(function (load_results) {
// Maybe reload page?
// window.location.reload();
});
}}
>
<span class="fas fa-star-of-life"></span>
<span class="fas fa-envelope"></span>
<span class="font-bold">
{#if $lq__event_presenter_obj.person_primary_email}
<a
href="mailto:{$lq__event_presenter_obj.person_primary_email}"
class="text-blue-500 hover:text-blue-800 hover:underline"
title="Person's primary email address"
>{$lq__event_presenter_obj.person_primary_email}</a>
{:else}
email
{@html ae_snip.html__not_set}
{/if}
<!-- <a
href="mailto:{$lq__event_presenter_obj.person_primary_email}"
class="text-blue-500 underline hover:text-blue-800"
title="Person's primary email address"
>{$lq__event_presenter_obj.person_primary_email}</a>
</span> -->
</Element_ae_crud>
{#if $ae_loc.trusted_access}
<!-- 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={$lq__event_presenter_obj.person_id_random}
field_name={'primary_email'}
field_type={'text'}
field_value={$lq__event_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.load_ae_obj_id__event_presenter({
api_cfg: $ae_api, event_presenter_id: $lq__event_presenter_obj?.event_presenter_id_random, log_lvl: 0
})
.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>
{/if}
</div>
{/if}
</li>
<li>
<Element_ae_crud
api_cfg={$ae_api}
object_type={'event_presenter'}
object_id={$lq__event_presenter_obj?.event_presenter_id_random}
field_name={'affiliations'}
field_type={'text'}
field_value={$lq__event_presenter_obj.affiliations}
allow_null={true}
hide_edit_btn={!$ae_loc.trusted_access || !$ae_loc.edit_mode}
outline_element={false}
show_crud={false}
display_inline={false}
class_li={''}
on:ae_crud_updated={e => {
console.log(`ae_crud_updated:`, e.detail);
events_func.load_ae_obj_id__event_presenter({
api_cfg: $ae_api, event_presenter_id: $lq__event_presenter_obj?.event_presenter_id_random, log_lvl: 0
})
.then(function (load_results) {
});
}}
>
<span class="fas fa-building"></span>
<span class="font-bold">
{@html $lq__event_presenter_obj.affiliations ?? 'affiliations'+ae_snip.html__not_set}
</span>
</Element_ae_crud>
{#if $lq__event_presenter_obj.person_affiliations != $lq__event_presenter_obj.affiliations}
<div>
<Element_ae_crud
api_cfg={$ae_api}
object_type={'person'}
object_id={$lq__event_presenter_obj.person_id_random}
field_name={'affiliations'}
field_type={'text'}
field_value={$lq__event_presenter_obj.person_affiliations}
allow_null={true}
hide_edit_btn={!$ae_loc.trusted_access || !$ae_loc.edit_mode}
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.load_ae_obj_id__event_presenter({
api_cfg: $ae_api, event_presenter_id: $lq__event_presenter_obj?.event_presenter_id_random, log_lvl: 0
});
}}
>
<span class="fas fa-star-of-life"></span>
<span class="fas fa-building"></span>
<span class="font-bold">
{@html $lq__event_presenter_obj.person_affiliations ?? 'affiliations'+ae_snip.html__not_set}
</span>
</Element_ae_crud>
{#if $ae_loc.trusted_access}
<Element_ae_crud
trigger_patch={ae_triggers.update_person_affiliations}
api_cfg={$ae_api}
object_type={'person'}
object_id={$lq__event_presenter_obj.person_id_random}
field_name={'affiliations'}
field_type={'text'}
field_value={$lq__event_presenter_obj.affiliations}
allow_null={true}
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.load_ae_obj_id__event_presenter({
api_cfg: $ae_api, event_presenter_id: $lq__event_presenter_obj?.event_presenter_id_random, log_lvl: 0
})
.then(function (load_results) {
// Maybe reload page?
// window.location.reload();
});
}}
>
<button
type="button"
on:click={() => {
console.log('*** Sync affiliations button clicked ***');
if (!confirm('Are you sure you want to sync the affiliations?')) {return false;}
ae_triggers.update_person_affiliations = true;
}}
class="btn btn-sm variant-soft-warning hover:variant-ghost-warning"
title="Use the affiliations from this presenter record to overwrite the person record."
>
<span class="fas fa-sync-alt mx-1"></span>
Sync
</button>
</Element_ae_crud>
{/if}
</div>
{/if}
</li>
<li>
<Element_ae_crud
api_cfg={$ae_api}
object_type={'event_presenter'}
object_id={$lq__event_presenter_obj?.event_presenter_id_random}
field_name={'professional_title'}
field_type={'text'}
field_value={$lq__event_presenter_obj.professional_title}
allow_null={true}
hide_edit_btn={!$ae_loc.trusted_access || !$ae_loc.edit_mode}
outline_element={false}
show_crud={false}
display_inline={false}
class_li={''}
on:ae_crud_updated={e => {
console.log(`ae_crud_updated:`, e.detail);
events_func.load_ae_obj_id__event_presenter({
api_cfg: $ae_api, event_presenter_id: $lq__event_presenter_obj?.event_presenter_id_random, log_lvl: 0
})
.then(function (load_results) {
});
}}
>
<span class="fas fa-user-tag"></span>
<span class="font-bold">
{@html $lq__event_presenter_obj.professional_title && $lq__event_presenter_obj.professional_title.length ? $lq__event_presenter_obj.professional_title : 'professional title'+ae_snip.html__not_set}
</span>
</Element_ae_crud>
{#if $lq__event_presenter_obj.person_professional_title != $lq__event_presenter_obj.professional_title}
<div>
<Element_ae_crud
api_cfg={$ae_api}
object_type={'person'}
object_id={$lq__event_presenter_obj.person_id_random}
field_name={'professional_title'}
field_type={'text'}
field_value={$lq__event_presenter_obj.person_professional_title}
allow_null={true}
hide_edit_btn={!$ae_loc.trusted_access || !$ae_loc.edit_mode}
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.load_ae_obj_id__event_presenter({
api_cfg: $ae_api, event_presenter_id: $lq__event_presenter_obj?.event_presenter_id_random, log_lvl: 0
});
}}
>
<span class="fas fa-star-of-life"></span>
<span class="fas fa-user-tag"></span>
<span class="font-bold">
{@html $lq__event_presenter_obj.person_professional_title && $lq__event_presenter_obj.person_professional_title.length ? $lq__event_presenter_obj.person_professional_title : 'professional title'+ae_snip.html__not_set}
</span>
</Element_ae_crud>
{#if $ae_loc.trusted_access}
<Element_ae_crud
trigger_patch={ae_triggers.update_person_professional_title}
api_cfg={$ae_api}
object_type={'person'}
object_id={$lq__event_presenter_obj.person_id_random}
field_name={'professional_title'}
field_type={'text'}
field_value={$lq__event_presenter_obj.professional_title}
allow_null={true}
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.load_ae_obj_id__event_presenter({
api_cfg: $ae_api, event_presenter_id: $lq__event_presenter_obj?.event_presenter_id_random, log_lvl: 0
})
.then(function (load_results) {
// Maybe reload page?
// window.location.reload();
});
}}
>
<button
type="button"
on:click={() => {
console.log('*** Sync professional title button clicked ***');
if (!confirm('Are you sure you want to sync the professional title?')) {return false;}
ae_triggers.update_person_professional_title = true;
}}
class="btn btn-sm variant-soft-warning hover:variant-ghost-warning"
title="Use the professional title from this presenter record to overwrite the person record."
>
<span class="fas fa-sync-alt mx-1"></span>
Sync
</button>
</Element_ae_crud>
{/if}
</div>
{/if}
</li>
<li
class:hidden={!$ae_loc.trusted_access}
>
<span class="fas fa-user-check"></span>
Person link:
<!-- Allow for linking the presenter to a person record. -->
{#if $ae_loc.trusted_access}
<Element_ae_crud
trigger_patch={ae_triggers.update_person}
api_cfg={$ae_api}
object_type={'event_presenter'}
object_id={$lq__event_presenter_obj?.event_presenter_id_random}
field_name={'person_id_random'}
field_type={'select'}
field_value={$lq__event_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.load_ae_obj_id__event_presenter({
api_cfg: $ae_api, event_presenter_id: $lq__event_presenter_obj?.event_presenter_id_random, log_lvl: 0
})
.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 $lq__event_presenter_obj.person_id_random}
<a
href="/core/person/{$lq__event_presenter_obj.person_id_random}"
class="text-blue-500 hover:text-blue-800 hover:underline"
title="View Person: {$lq__event_presenter_obj.person_full_name} {$lq__event_presenter_obj.person_id_random}"
>
<span class="fas fa-link"></span>
{$lq__event_presenter_obj.person_id_random}
</a>
{:else}
<span class="fas fa-unlink"></span>
person
{@html ae_snip.html__not_set}
{/if}
{#if $ae_loc.administrator_access && $ae_loc.edit_mode}
{#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}
<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 = $lq__event_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>
Re-link
</button>
{/if}
{/if} <!-- $ae_loc.edit_mode -->
</Element_ae_crud>
{/if}
<!-- A sync button to use the person record fields to update the event_presenter fields -->
{#if $ae_loc.administrator_access && $lq__event_presenter_obj?.person_id_random}
<button
type="button"
on:click={() => {
console.log('*** Sync person button clicked ***');
if (!confirm('Are you sure you want to sync from the person record?')) {return false;}
// NOTE: The external_id should not really be changed once it is set. The person.external_sys_id may need to be updated as well.
let event_presenter_data = {
'external_id': $lq__event_presenter_obj.person_external_id,
'given_name': $lq__event_presenter_obj.person_given_name,
'family_name': $lq__event_presenter_obj.person_family_name,
'professional_title': $lq__event_presenter_obj.person_professional_title,
'affiliations': $lq__event_presenter_obj.person_affiliations,
'email': $lq__event_presenter_obj.person_primary_email,
// 'passcode': $lq__event_presenter_obj.person_passcode,
};
let person_update_result = events_func.update_ae_obj__event_presenter({
api_cfg: $ae_api,
event_presenter_id: $lq__event_presenter_obj?.event_presenter_id_random,
data_kv: event_presenter_data,
log_lvl: 0,
})
.then(function (update_result) {
// console.log(update_result);
// return update_result;
});
return person_update_result;
}}
class="btn btn-sm variant-soft-warning hover:variant-ghost-warning"
title="Sync the person record fields to the presenter record. person_id: {$lq__event_presenter_obj.person_id_random}; presenter_id: {$lq__event_presenter_obj?.event_presenter_id_random}"
>
<span class="fas fa-sync-alt mx-1"></span>
Sync Person
</button>
{/if}
{#if $ae_loc.administrator_access && !$lq__event_presenter_obj?.person_id_random}
<button
type="button"
on:click={async () => {
console.log('Add Person');
let person_data = {
account_id_random: $slct.account_id,
source_code: 'manual:SK',
external_id: $lq__event_presenter_obj?.external_id?? 'AE-temp-ID',
// user_id_random: user_obj.user_id_random,
given_name: $lq__event_presenter_obj.given_name?? 'New',
family_name: $lq__event_presenter_obj?.family_name?? 'Presenter',
primary_email: $lq__event_presenter_obj?.email?? 'test+newpres@oneskyit.com',
code: $lq__event_presenter_obj?.code?? 'new_presenter',
// Random number between 100000 and 999999
passcode: Math.floor(Math.random() * 900000) + 100000,
professional_title: $lq__event_presenter_obj?.professional_title?? 'Presenter',
affiliations: $lq__event_presenter_obj?.affiliations?? '',
enable: true,
}
let new_person_obj = await core_func.handle_create_ae_obj__person({
api_cfg: $ae_api,
// user_id: $ae_loc.user_id,
data_kv: person_data,
log_lvl: 0,
})
console.log('new_person_obj:', new_person_obj);
// We then need to update the event_presenter with the new person_id.
events_func.update_ae_obj__event_presenter({
api_cfg: $ae_api,
event_presenter_id: $lq__event_presenter_obj?.event_presenter_id_random,
data_kv: {person_id_random: new_person_obj.person_id_random},
log_lvl: 0,
})
}}
class:hidden={!$ae_loc.edit_mode}
class="btn btn-sm variant-soft-warning hover:variant-filled-warning"
>
<span class="fas fa-plus mx-1"></span>
Add Person
</button>
{/if}
</li>
<li
class:hidden={!$lq__event_presenter_obj.person_id_random || !$ae_loc.trusted_access && !$events_loc.auth__kv.presenter[$lq__event_presenter_obj?.event_presenter_id_random]}
>
<Element_ae_crud
api_cfg={$ae_api}
object_type={'person'}
object_id={$lq__event_presenter_obj.person_id_random}
field_name={'passcode'}
field_type={'text'}
field_value={$lq__event_presenter_obj.person_passcode}
allow_null={true}
hide_edit_btn={!$ae_loc.trusted_access || !$ae_loc.edit_mode}
outline_element={false}
show_crud={false}
display_inline={false}
class_li={''}
on:ae_crud_updated={e => {
console.log(`ae_crud_updated:`, e.detail);
events_func.load_ae_obj_id__event_presenter({
api_cfg: $ae_api, event_presenter_id: $lq__event_presenter_obj?.event_presenter_id_random, log_lvl: 0
})
.then(function (load_results) {
// Maybe reload page?
// window.location.reload();
});
}}
>
<span class="fas fa-star-of-life"></span>
<span class="fas fa-user-secret"></span>
Passcode:
<span
class="font-bold"
>
{@html $lq__event_presenter_obj.person_passcode ?? ae_snip.html__not_set }
</span>
</Element_ae_crud>
<!-- <span class="fas fa-user-secret"></span>
{$lq__event_presenter_obj.person_passcode} (your passcode)
<button
title="Edit your passcode"
class="btn btn-sm variant-soft-warning"
class:hidden={!$ae_loc.trusted_access}
>
<span class="fas fa-edit">
</span>
Edit
</button> -->
</li>
<li
class:hidden={!$lq__event_presenter_obj.person_id_random || !$ae_loc.trusted_access || !$ae_loc.edit_mode}
>
<Element_ae_crud
api_cfg={$ae_api}
object_type={'person'}
object_id={$lq__event_presenter_obj.person_id_random}
field_name={'external_sys_id'}
field_type={'text'}
field_value={$lq__event_presenter_obj.person_external_sys_id}
allow_null={true}
hide_edit_btn={!$ae_loc.administrator_access || !$ae_loc.edit_mode}
outline_element={false}
show_crud={false}
display_inline={false}
class_li={''}
on:ae_crud_updated={e => {
console.log(`ae_crud_updated:`, e.detail);
events_func.load_ae_obj_id__event_presenter({
api_cfg: $ae_api, event_presenter_id: $lq__event_presenter_obj?.event_presenter_id_random, log_lvl: 0
})
.then(function (load_results) {
// Maybe reload page?
// window.location.reload();
});
}}
>
<span class="fas fa-star-of-life"></span>
<span class="fas fa-fingerprint"></span>
External System ID:
<span
class="font-bold"
>
{@html $lq__event_presenter_obj.person_external_sys_id ?? ae_snip.html__not_set}
</span>
</Element_ae_crud>
</li>
<!-- The presenters biography. There should be a character counter. -->
<li>
<div class="label event_presenter__biography required space-y-4">
<label for="presenter__biography" class="label">
<span class="fas fa-book"></span>
Presenter Biography
<span class="text-sm text-gray-500">
(75 to 100 words or 600 character limit)
</span>
</label>
<button
type="button"
use:clipboard={ae_tmp.biography.trim()}
class="btn btn-sm variant-ghost-warning float-right m-1"
class:hidden={ae_tmp.biography.length < 100}
title="Copy the presenter access link to the clipboard."
>
<span class="fas fa-copy mx-1"></span>
Copy Biography Text
</button>
<textarea
name="biography"
id="presenter__biography"
disabled={!$ae_loc.trusted_access && !$events_loc.auth__kv.presenter[$lq__event_presenter_obj?.event_presenter_id_random]}
class="textarea ae_value event_presenter__biography font-mono"
class:variant-glass-error={(ae_tmp.biography && ae_tmp.biography.length >600 ? true : false)}
required
rows="8" cols="70"
bind:value={ae_tmp.biography}
placeholder="Enter brief biography here"></textarea>
</div>
<p>Biography length: {(ae_tmp.biography ? ae_util.number_w_commas(ae_tmp.biography.length) : 0)} characters; {(ae_tmp.biography ? ae_util.number_w_commas(ae_util.count_words(ae_tmp.biography)) : 0)} estimated words</p>
<!-- <p>Biography length: </p> -->
<p>The biography should be plain text only and be at most 100 words.</p>
<!-- <p>1,250 characters is roughly 250 words</p> -->
<!-- <p>1,375 characters is roughly 250 to 300 words</p> -->
<div class="flex flex-wrap gap-2 p-1">
<button
type="button"
class="btn btn-md variant-glass-primary hover:variant-filled-primary"
disabled={(ae_tmp.biography == $lq__event_presenter_obj.biography)}
on:click={() => {
console.log('*** Save button clicked ***');
let event_presenter_data = {
'biography': ae_tmp.biography,
};
ae_promises.update__event_presenter_obj = events_func.update_ae_obj__event_presenter({
api_cfg: $ae_api,
event_presenter_id: $lq__event_presenter_obj?.event_presenter_id_random,
data_kv: event_presenter_data,
log_lvl: 0,
})
.then(function (update_result) {
// console.log(update_result);
// return update_result;
});
}}
>
{#await ae_promises.update__event_presenter_obj}
<span class="fas fa-spinner fa-spin mx-1"></span>
{:then}
{#if (ae_tmp.biography == $lq__event_presenter_obj.biography)}
<span class="fas fa-check mx-1"></span>
{:else}
<span class="fas fa-save mx-1"></span>
{/if}
{/await}
Save Biography
</button>
</div>
</li>
</ul>
<h3 class="h4">
Upload File(s):
</h3>
<button
type="button"
on:click={() => {
console.log('*** Refresh button clicked ***');
ae_tmp.show__file_li = false;
console.log(`$lq__event_file_obj_li:`, $lq__event_file_obj_li);
$slct_trigger = 'load__event_file_obj_li';
ae_tmp.show__file_li = true;
}}
class="btn btn-sm variant-soft-tertiary hover:variant-ghost-warning float-right transition hover:transition-all"
>
<span class="fas fa-sync-alt mx-1"></span>
Refresh Files
</button>
<div class="text-sm text-center bg-orange-100 rounded-md p-2">
WARNING: The file upload and management is a work in progress. You can upload and delete files, but not yet rename them. You may need to refresh the page if your changes are not showing up.
</div>
<form
on:submit|preventDefault={handle_submit_form_files}
class:hidden={!$ae_loc.trusted_access && !$events_loc.auth__kv.presenter[$lq__event_presenter_obj?.event_presenter_id_random] && !$events_loc.auth__kv.session[$lq__event_presenter_obj.event_session_id_random]}
class="modal-form {$ae_loc.hub.classes__form} flex flex-col space-y-2 items-center w-full"
>
<label for="input__presenter_event_file">
Upload outline or draft file(s):
<FileDropzone
id="input__presenter_event_file"
name="presenter_event_file"
padding="p-1"
accept="*"
class="w-96 variant-glass-warning"
on:change={(e) => {
console.log('*** FileDropzone change event ***', e);
if (e.target.files.length) {
ae_placeholder_li.new_file = `Ready to upload: ${e.target.files[0].name}`;
$events_sess.pres_mgmt.disable_submit__event_file_obj = false;
} else {
$events_sess.pres_mgmt.disable_submit__event_file_obj = true;
ae_placeholder_li.new_file = null;
}
}}
>
<svelte:fragment slot="lead"><span class="fas fa-file-upload"></svelte:fragment>
<svelte:fragment slot="message"><strong>Upload your file</strong> (drag and drop)</svelte:fragment>
<svelte:fragment slot="meta">Presentation related files only<br>(PowerPoint, Keynote, PDF, mp4, Word Doc, Excel, txt, etc)</svelte:fragment>
{ae_placeholder_li.new_file ?? 'No files selected.'}
</FileDropzone>
</label>
<button
type="submit"
class="btn btn-md variant-ghost-secondary m-2"
disabled={($events_sess.pres_mgmt.disable_submit__event_file_obj)}
on:click={() => {
console.log('*** Save button clicked ***');
// if (!confirm('Are you sure you want to save this event_presenter?')) {return false;}
// handle_submit_form();
// handle_submit_form;
}}
>
{#await ae_promises.upload__hosted_file_obj}
<span class="fas fa-spinner fa-spin mx-1"></span>
<span class="">
Uploading
{#if $ae_sess.api_upload_kv[$lq__event_presenter_obj?.event_presenter_id_random]}
{$ae_sess.api_upload_kv[$lq__event_presenter_obj?.event_presenter_id_random].percent_completed}%
{/if}
</span>
{:then}
<span class="fas fa-upload mx-1"></span>
<span class="text-sm">
Upload:
</span>
<!-- <span class="fas fa-save mx-1"></span> -->
<span class="grow">
File
</span>
{/await}
<!-- <span class="fas fa-save mx-1"></span>
<span class="grow">
Upload File
</span> -->
</button>
</form>
<div class="overflow-x-auto w-max max-w-full">
<Element_manage_event_file_li
link_to_type={'event_presenter'}
link_to_id={$lq__event_presenter_obj?.event_presenter_id_random}
allow_basic={$events_loc.auth__kv.session[$lq__event_presenter_obj.event_session_id_random] || $events_loc.auth__kv.presenter[$lq__event_presenter_obj?.event_presenter_id_random]}
allow_moderator={$events_loc.auth__kv.session[$lq__event_presenter_obj.event_session_id_random]}
container_class_li={''}
/>
</div>
</section>
{/if}