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

Separating out components and functions to make things more modular.

Browse Source
This commit is contained in:
Scott Idem
2024-07-03 17:48:06 -04:00
parent 270a1429f8
commit 4aae2bead4
16 changed files with 528 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
src/routes/events_pres_mgmt/session/[slug]/+page.svelte
View File

@@ -20,12 +20,12 @@ let ae_triggers: key_val = {};
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 { 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';
import Form_agree from './form_agree.svelte';
import Presenter_view from './presenter_view.svelte';
import Form_agree from '../../form_agree.svelte';
import Presenter_view from '../../presenter_view.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';
@@ -333,7 +333,8 @@ $: if ($slct_trigger == 'load__event_file_obj_li') {
events_func.handle_load_ae_obj_li__event_file({
api_cfg: $ae_api,
event_session_id: $events_slct.event_session_id,
for_obj_type: 'event_session',
for_obj_id: $events_slct.event_session_id,
try_cache: false
});
}
@@ -465,49 +466,23 @@ $: if ($slct_trigger == 'load__event_presenter_obj_li') {
>
<div
class="pres_mgmt__session_help flex flex-col items-center space-y-2 border border-blue-200 rounded-md p-2 hover:bg-blue-100"
class="pres_mgmt__session_menu {ae_snip.classes__events_pres_mgmt_menu}"
class:border-none={!$events_loc.pres_mgmt.show_content__session_help}
>
<div>
<button
type="button"
on:click={() => {
$events_loc.pres_mgmt.show_content__session_help = !$events_loc.pres_mgmt.show_content__session_help;
}}
class="btn btn-sm mx-1 variant-soft-tertiary text-info-300 hover:text-info-800"
title="Help and information about the session"
>
<span class="fas fa-question-circle mx-1"></span>
{#if $events_loc.pres_mgmt.show_content__session_help}
Hide
{:else}
Show
{/if}
Help?
</button>
</div>
<Element_data_store
ds_code="events__pres_mgmt__session_help"
ds_name="Default: Events - Pres Mgmt Session Help"
ds_type="html"
for_type="event"
for_id={$events_slct.event_id}
class_li="bg-yellow-100 p-2 rounded-md border border-yellow-200"
show_edit={false}
show_edit_btn={true}
hide={!$events_loc.pres_mgmt.show_content__session_help}
/>
<div>
<a href="/events_pres_mgmt/event/{$events_slct.event_session_obj.event_id_random}" class="{ae_snip.classes__events_pres_mgmt_menu__button}">
<span class="fas fa-arrow-left mx-1"></span>
Back to Session Search
</a>
<div>
<button
type="button"
on:click={() => {
$events_loc.pres_mgmt.show_content__session_help = !$events_loc.pres_mgmt.show_content__session_help;
}}
class="btn btn-sm mx-1 variant-ghost-error hover:variant-filled-error"
class:hidden={!$events_loc.pres_mgmt.show_content__session_help}
title="Help and information about the session search"
class="{ae_snip.classes__events_pres_mgmt_menu__button}"
title="Help and information about the session"
>
<span class="fas fa-question-circle mx-1"></span>
{#if $events_loc.pres_mgmt.show_content__session_help}
@@ -517,13 +492,45 @@ $: if ($slct_trigger == 'load__event_presenter_obj_li') {
{/if}
Help?
</button>
</div>
</div>
<Element_data_store
ds_code="events__pres_mgmt__session_help"
ds_name="Default: Events - Pres Mgmt Session Help"
ds_type="html"
for_type="event"
for_id={$events_slct.event_id}
class_li="bg-yellow-100 p-2 rounded-md border border-yellow-200"
show_edit={false}
show_edit_btn={true}
hide={!$events_loc.pres_mgmt.show_content__session_help}
/>
<div>
<button
type="button"
on:click={() => {
$events_loc.pres_mgmt.show_content__session_help = !$events_loc.pres_mgmt.show_content__session_help;
}}
class="btn btn-sm mx-1 variant-ghost-error hover:variant-filled-error"
class:hidden={!$events_loc.pres_mgmt.show_content__session_help}
title="Help and information about the session search"
>
<span class="fas fa-question-circle mx-1"></span>
{#if $events_loc.pres_mgmt.show_content__session_help}
Hide
{:else}
Show
{/if}
Help?
</button>
</div>
</div>
{#if $events_slct.event_session_id && $lq__event_session_obj}
<h2 class="h2 text-center rounded-md p-2 bg-gray-300">
{@html $lq__event_session_obj?.name ?? ae_html.not_set}
{@html $lq__event_session_obj?.name ?? ae_snip.html__not_set}
</h2>
<!-- Information about the session -->
@@ -641,7 +648,7 @@ $: if ($slct_trigger == 'load__event_presenter_obj_li') {
</Element_ae_crud>
</li>
<li>
<strong class="text-sm">Location/Room:</strong> {@html $lq__event_session_obj.event_location_name ? $lq__event_session_obj.event_location_name : ae_html.not_set}
<strong class="text-sm">Location/Room:</strong> {@html $lq__event_session_obj.event_location_name ? $lq__event_session_obj.event_location_name : ae_snip.html__not_set}
{#if $ae_loc.trusted_access && $ae_loc.edit_mode}
<Element_ae_crud
@@ -751,7 +758,7 @@ $: if ($slct_trigger == 'load__event_presenter_obj_li') {
<li>
<strong class="text-sm">Moderator/Champion:</strong>
<span title={$lq__event_session_obj?.poc_person_id_random}>
{@html $lq__event_session_obj.poc_person_full_name ? $lq__event_session_obj.poc_person_full_name : ae_html.not_set}
{@html $lq__event_session_obj.poc_person_full_name ? $lq__event_session_obj.poc_person_full_name : ae_snip.html__not_set}
</span>
{#if $ae_loc.trusted_access && $ae_loc.edit_mode}
@@ -949,7 +956,7 @@ $: if ($slct_trigger == 'load__event_presenter_obj_li') {
{#if $ae_loc.administrator_access}
<li>
<strong class="text-sm">Session passcode:</strong> {@html $lq__event_session_obj.passcode ? $lq__event_session_obj.passcode : ae_html.not_set}
<strong class="text-sm">Session passcode:</strong> {@html $lq__event_session_obj.passcode ? $lq__event_session_obj.passcode : ae_snip.html__not_set}
</li>
{/if}
@@ -1004,7 +1011,7 @@ $: if ($slct_trigger == 'load__event_presenter_obj_li') {
>{$lq__event_session_obj.description}</pre>
{:else}
{@html ae_html.not_set}
{@html ae_snip.html__not_set}
{/if}
</Element_ae_crud>
</div>
@@ -1382,7 +1389,7 @@ $: if ($slct_trigger == 'load__event_presenter_obj_li') {
>{event_presentation_obj.description}</pre>
{:else}
{@html ae_html.not_set}
{@html ae_snip.html__not_set}
{/if}
<!-- {:else}
<div class="text-sm text-gray-500 bg-gray-100 p-1 rounded-md border border-gray-200"

3
src/routes/events_pres_mgmt/session/[slug]/+page.ts
View File

@@ -75,7 +75,8 @@ export async function load({ parent }) { // route
let load_event_file_obj_li = await events_func.handle_load_ae_obj_li__event_file({
api_cfg: ae_acct.api,
event_session_id: event_session_id,
for_obj_type: 'event_session',
for_obj_id: event_session_id,
params: {enabled: 'all', qry__limit: 50},
try_cache: false
})

363
src/routes/events_pres_mgmt/session/[slug]/form_agree.svelte
View File

@@ -1,363 +0,0 @@
<script lang="ts">
console.log(`ae_events_pres_mgmt session [slug] form_agree.svelte`);
import { onMount } from 'svelte';
import { liveQuery } from "dexie";
import type { key_val } from '$lib/ae_stores';
import { ae_util } from '$lib/ae_utils';
import { api } from '$lib/api';
import Element_data_store from '$lib/element_data_store.svelte';
import Element_ae_crud from '$lib/element_ae_crud.svelte';
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';
import { events_func } from '$lib/ae_events_functions';
let ae_triggers: key_val = {};
let ae_promises: key_val = {}; // Promise<any>;
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($events_slct.event_presentation_id)
// );
console.log(`$events_slct.event_presenter_id:`, $events_slct.event_presenter_id);
let lq__event_presenter_obj = liveQuery(
() => db_events.presenters.get($events_slct.event_presenter_id)
);
let lq__event_presentation_obj = liveQuery(
() => db_events.presentations.get($events_slct.event_presentation_id)
);
$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 Session [slug]: form_agree.svelte');
console.log(`$events_slct.event_presenter_id:`, $events_slct.event_presenter_id);
console.log(`$lq__event_presenter_obj:`, $lq__event_presenter_obj);
// console.log($lq__event_presenter_obj.data_json);
});
async function handle_submit_form(event) {
console.log('*** handle_submit_form() ***');
$events_sess.pres_mgmt.disable_submit__opt_out = true;
$events_sess.pres_mgmt.submit_status = 'saving';
// Data in
let form_data = new FormData(event.target);
console.log(form_data);
let opt_out_di: key_val = ae_util.extract_prefixed_form_data({prefix: null, form_data: form_data, trim_values: true, bool_tf_str: true, log_lvl: 0});
console.log(`opt_out_di:`, opt_out_di);
// Data out
let opt_out_do: key_val = {};
opt_out_do.optout_audio = opt_out_di.optout_audio??false;
opt_out_do.optout_video = opt_out_di.optout_video??false;
opt_out_do.optout_transcription_and_publication = opt_out_di.optout_transcription_and_publication??false;
opt_out_do.optout_publication_in_app = opt_out_di.optout_publication_in_app??false;
console.log(`opt_out_do:`, opt_out_do);
let data_out = {
data_json: opt_out_do,
}
ae_promises.update__event_presenter_obj = await handle_update__event_presenter({
obj_type: 'event_presenter',
obj_id: $lq__event_presenter_obj?.event_presenter_id_random,
data: data_out
});
console.log(ae_promises.update__event_presenter_obj);
$events_sess.pres_mgmt.disable_submit__opt_out = false;
$events_sess.pres_mgmt.submit_status = 'saved';
}
async function handle_update__event_presenter({
obj_type,
obj_id,
data
}) {
console.log('*** handle_update__event_presenter() ***');
ae_promises.update__event_presenter_obj = api.update_ae_obj_id_crud({
api_cfg: $ae_api,
obj_type: obj_type,
obj_id: obj_id,
fields: data,
key: $ae_api.api_crud_super_key,
return_obj: true,
log_lvl: 2
})
.then(async function (update__obj_result) {
if (!update__obj_result) {
console.log('The result was null or false.');
return false;
} else {
console.log(`update__obj_result = `, update__obj_result);
}
$slct_trigger = 'load__event_presenter_obj_li';
return update__obj_result;
})
.catch(function (error) {
console.log('Something went wrong.');
console.log(error);
return false;
});
return ae_promises.update__event_presenter_obj;
}
// function send_init_confirm_email() {
// console.log(`*** send_init_confirm_email() *** to ${$lq__event_presenter_obj.email}.`);
// let subject = `LCI 2024 Pres Mgmt Hub Link for ${$lq__event_session_obj.name} (ID: ${$lq__event_session_obj.event_session_id_random})`;
// let body_html = `
// <div>${$lq__event_session_obj.full_name},
// <p>The link to sign in to the presentation management hub for LCI 2024 is below. If you need to make any changes or updates to your submission, you may access it via via the link below.</p>
// </div>
// <br>
// <div>
// LCI 2024 Session ID: ${$lq__event_session_obj.event_session_id_random}<br>
// <p>Use this link to view or update your LCI 2024 presentation information.<br>
// Copy and paste link: <a href="xxx">xxxx</a></p>
// </div>`;
// api.send_email({
// api_cfg: $ae_api,
// from_email: 'noreply+presmgmt@oneskyit.com',
// from_name: 'LCI 2024 Pres Mgmt Hub',
// to_email: 'test+agree@oneskyit.com',
// subject: subject,
// body_html: body_html,
// });
// }
</script>
<!-- {#await $lq__event_presenter_obj}
Loading...
{:then result} -->
{#if $lq__event_presenter_obj}
<h2 class="h3">
Presenter Agreement for:<br>
<strong>{$lq__event_presenter_obj.full_name} ({$lq__event_presenter_obj.email})</strong>
</h2>
<Element_data_store
ds_code="event_presenter_agree_text"
ds_type="html"
class_li="p-2"
/>
<section class="text-lg border border-red-200 rounded-md bg-red-100 space-y-2">
<!-- Highlight the persons name, email, and that whole line. -->
<p class="text-lg bg-yellow-100 p-2">
<strong>{$lq__event_presenter_obj.full_name} ({$lq__event_presenter_obj.email})</strong> agrees to the following terms and conditions for the presentation:
</p>
<h3 class="h4">Title: "{$lq__event_presentation_obj?.name}"</h3>
<h3 class="h4">Opt-Out?</h3>
<form
class="modal-form {$ae_loc.hub.classes__form}"
on:submit|preventDefault={handle_submit_form}
>
<p>Speaker does not permit the use of presentation materials as described in section(s), above for: (please check for all that apply)</p>
<label
class="label p-1 hover:variant-ghost-warning rounded-md"
for="optout_audio">
<input
type="checkbox"
class="checkbox variant-ghost-warning checked:variant-filled-warning hover:variant-filled-error"
id="optout_audio"
name="optout_audio"
checked={$lq__event_presenter_obj.data_json?.optout_audio}
value={true}
>
Opt-out - Audio Reproduction of Presentation
</label>
<label
class="label p-1 hover:variant-ghost-warning rounded-md"
for="optout_video">
<input
type="checkbox"
class="checkbox variant-ghost-warning checked:variant-filled-warning hover:variant-filled-error"
id="optout_video"
name="optout_video"
checked={$lq__event_presenter_obj.data_json?.optout_video}
value={true}
>
Opt-out - Video Reproduction of Presentation
</label>
<label
class="label p-1 hover:variant-ghost-warning rounded-md"
for="optout_transcription_and_publication">
<input
type="checkbox"
class="checkbox variant-ghost-warning checked:variant-filled-warning hover:variant-filled-error"
id="optout_transcription_and_publication"
name="optout_transcription_and_publication"
checked={$lq__event_presenter_obj.data_json?.optout_transcription_and_publication}
value={true}
>
Opt-out - Transcription and Publication of Presentation on LCI Website
</label>
<label
class="label p-1 hover:variant-ghost-warning rounded-md"
for="optout_publication_in_app">
<input
type="checkbox"
class="checkbox variant-ghost-warning checked:variant-filled-warning hover:variant-filled-error"
id="optout_publication_in_app"
name="optout_publication_in_app"
checked={$lq__event_presenter_obj.data_json?.optout_publication_in_app}
value={true}
>
Opt-out - Publication of Presentation on LCI Congress App
</label>
<button
type="submit"
disabled={($events_sess.pres_mgmt?.disable_submit__opt_out)}
on:click={() => {
console.log('*** Save button clicked ***');
}}
class="btn btn-md variant-ghost-warning hover:variant-filled-secondary m-2"
>
<span class="fas fa-check mx-1"></span>
Save Opt-Out?
{#await ae_promises.update__event_presenter_obj}
<div class="modal-loading">
<span class="fas fa-spinner fa-spin"></span>
<span class="loading-text">
<!-- <ProgressRadial value={undefined} /> -->
Saving...
</span>
</div>
{:then update__event_presenter_obj_result}
{#if update__event_presenter_obj_result}
<div class="modal-loading">
<span class="fas fa-check-circle"></span>
<span class="loading-text">Successfully saved!</span>
</div>
{/if}
{:catch error}
<div class="modal-loading">
<span class="fas fa-exclamation-triangle"></span>
<span class="loading-text">Error: {error.message}</span>
</div>
{/await}
</button>
</form>
<h3 class="h4">Agree?</h3>
<!-- Agree (agreement) means this presenter has agreed to the terms and conditions. -->
<Element_ae_crud
trigger_patch={ae_triggers.agree}
api_cfg={$ae_api}
object_type={'event_presenter'}
object_id={$lq__event_presenter_obj?.event_presenter_id_random}
field_name={'agree'}
field_type={'button'}
field_value={tmp_agree}
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 event:`, e.detail);
// Wait 1 second to make sure it saved...?
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) {
// Wait and then close
// $events_loc.pres_mgmt.show_content__agree_text = null;
// Maybe reload page... to get the outline view to refresh?
window.location.reload();
});
}}
>
{#if !$lq__event_presenter_obj?.agree}
<div>
Not Agreed:
<span class="fas fa-times text-red-500 m-1"></span>
<!-- <span class="fas fa-question text-red-500 m-1"></span> -->
</div>
<div>
Waiting for agreement to the Guest Speaker Consent and Release and Terms and Conditions before you can move on.
</div>
{:else}
Agreed:
<span class="fas fa-check text-green-500 m-1"></span>
Marked as agreed
{/if}
<div class="text-center">
{#if $ae_loc.trusted_access || $events_loc.auth__kv.presentation[$events_slct.event_presentation_id]}
<button
type="button"
on:click={() => {
tmp_agree = !$lq__event_presenter_obj?.agree;
ae_triggers.agree = true;
}}
class="btn btn-lg variant-ghost-success hover:variant-filled-primary m-2"
class:variant-ghost-warning={$lq__event_presenter_obj?.agree}
>
{#if $lq__event_presenter_obj?.agree}
<!-- <span class="fas fa-sync m-1"></span> -->
<span class="fas fa-times text-red-500 mx-1"></span>
Change to not agreed?
{:else}
<span class="fa fa-check m-1 text-green-500"></span>
Mark as agreed?
{/if}
<!-- {@html ($lq__event_presenter_obj?.agree ? '<span class="fas fa-sync m-1"></span> Not agreed?' : '<span class="fa fa-sync m-1"></span> Mark as agreed?')} -->
</button>
{/if}
</div>
</Element_ae_crud>
</section>
{/if}
<!-- {/await} -->

989
src/routes/events_pres_mgmt/session/[slug]/presenter_view.svelte
View File

@@ -1,989 +0,0 @@
<script lang="ts">
console.log(`ae_events_pres_mgmt session [slug] form_agree.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_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';
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_session_obj = liveQuery(
// () => db_events.sessions.get($events_slct.event_session_id)
// );
// let lq__event_presentation_obj = liveQuery(
// async () => await db_events.presentations.get($events_slct.event_presentation_id)
// );
console.log(`$events_slct.event_presenter_id:`, $events_slct.event_presenter_id);
let lq__event_presenter_obj = liveQuery(
() => db_events.presenters.get($events_slct.event_presenter_id)
);
let lq__event_presentation_obj = liveQuery(
() => db_events.presentations.get($events_slct.event_presentation_id)
);
let lq__event_file_obj_li = liveQuery(
async () => await db_events.files.where('event_presenter_id_random').equals($events_slct.event_presenter_id).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 POC 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 Session [slug]: presenter_view.svelte');
console.log(`$events_slct.event_presenter_id:`, $events_slct.event_presenter_id);
$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 = $events_slct.event_presenter_id;
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: 1
})
.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 = $events_slct.event_presenter_id;
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;
}
</script>
<!-- {#await $lq__event_presenter_obj} -->
<!-- Loading... -->
<!-- {:then result} -->
{#if $lq__event_presenter_obj}
<h2 class="h3">
Presenter Details for:<br>
<strong>
{$lq__event_presenter_obj.full_name}
</strong>
<span class="text-sm">
({$lq__event_presenter_obj.email})
</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/${$events_slct.event_session_id}?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}
</h2>
<section class="p-2">
<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.handle_load_ae_obj_id__event_presentation({api_cfg: $ae_api, event_presentation_id: $lq__event_presentation_obj?.event_presentation_id_random, log_lvl: 1});
}}
>
Title: "{$lq__event_presentation_obj?.name}"
</Element_ae_crud>
<!-- Title: "{$lq__event_presentation_obj?.name}" -->
</h3>
<h3 class="h4">Presenter:</h3>
<ul
class="space-y-2 px-4"
>
<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}
> -->
<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.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();
});
}}
>
{$lq__event_presenter_obj.given_name}
</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={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.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();
});
}}
>
{$lq__event_presenter_obj.family_name}
</Element_ae_crud>
<!-- </div> -->
<!-- {/if} -->
<!-- <button
on:click={() => {
console.log('*** Edit button clicked ***');
$events_sess.pres_mgmt.show_edit__event_presenter_name = !$events_sess.pres_mgmt.show_edit__event_presenter_name;
}}
class="btn btn-sm variant-soft-warning hover:variant-ghost-warning"
>
<span class="fas fa-edit mx-1"></span>
Edit
</button> -->
</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={'email'}
field_type={'text'}
field_value={$lq__event_presenter_obj.email}
allow_null={false}
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.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-envelope"></span>
<a
href="mailto:{$lq__event_presenter_obj.email}"
class="text-blue-500"
title="Presenter's email address"
>{$lq__event_presenter_obj.email}</a>
</Element_ae_crud>
{#if $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.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-star-of-life"></span>
<span class="fas fa-envelope"></span>
<a
href="mailto:{$lq__event_presenter_obj.person_primary_email}"
class="text-blue-500"
title="Person's primary email address"
>{$lq__event_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={$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.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>
<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={false}
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.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-building"></span>
{$lq__event_presenter_obj.affiliations ?? '-- affiliations not set --'}
</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={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.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-star-of-life"></span>
<span class="fas fa-building"></span>
{$lq__event_presenter_obj.person_affiliations ?? '-- affiliations not set --'}
</Element_ae_crud>
<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={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 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>
</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={false}
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.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-tag"></span>
{$lq__event_presenter_obj.professional_title && $lq__event_presenter_obj.professional_title.length ? $lq__event_presenter_obj.professional_title : '-- professional title not set --'}
</Element_ae_crud>
</li>
<li>
<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.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-secret"></span>
Passcode:
{$lq__event_presenter_obj.person_passcode ?? '-- passcode not set --'}
</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>
<!-- 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={$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.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 $lq__event_presenter_obj.person_id_random}
<span class="fas fa-link"></span>
{$lq__event_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 = $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>
Edit
</button>
{/if}
</Element_ae_crud>
{/if}
<!-- A sync button to use the person record fields to update the event_presenter fields -->
{#if $ae_loc.administrator_access}
<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;}
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.handle_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: 1,
})
.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}
</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>
<textarea
name="biography"
id="presenter__biography"
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>
<!-- {/if} -->
</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.handle_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: 1,
})
.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-secondary 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
class="modal-form {$ae_loc.hub.classes__form} flex flex-col space-y-2 items-center w-full"
on:submit|preventDefault={handle_submit_form_files}
>
<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[$events_slct.event_presenter_id]}
{$ae_sess.api_upload_kv[$events_slct.event_presenter_id].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-full max-w-96 sm:max-w-fit">
<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[$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={''}
/>
</div>
</section>
{/if}
<!-- {/await} -->