Sponsorships and Speakers are working and looking pretty well. Other general clean up.
This commit is contained in:
Scott Idem
@@ -51,7 +51,7 @@ export function load({ params, url }) { // route
|
||||
console.log(`slct = `, get(slct));
|
||||
|
||||
let slct_trigger_tmp = get(slct_trigger);
|
||||
slct_trigger_tmp = 'load__event_obj';
|
||||
slct_trigger_tmp = 'load__event_presenter_obj_li';
|
||||
slct_trigger.set(slct_trigger_tmp);
|
||||
console.log(`slct_trigger = `, get(slct_trigger));
|
||||
}
|
||||
|
||||
@@ -19,20 +19,79 @@ const modalStore = getModalStore();
|
||||
|
||||
import { api } from '$lib/api';
|
||||
import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/ae_stores';
|
||||
import type { key_val } from '$lib/ae_stores';
|
||||
|
||||
|
||||
import Edit_modal_event_presenter_obj from './10_edit_modal__event_presenter_obj.svelte';
|
||||
import List_event_presenter_obj from './10_list__event_presenter_obj.svelte';
|
||||
import View_modal_event_presenter_obj from './10_view_modal__event_presenter_obj.svelte';
|
||||
|
||||
type key_val = {
|
||||
[key: string]: any;
|
||||
|
||||
// Editing
|
||||
const modalComponentEditEventPresenterObj: ModalComponent = { ref: Edit_modal_event_presenter_obj, props: {container_class_li: 'w-full p-4 space-y-4 card', container_header_class_li: 'card-header text-2xl font-bold'} };
|
||||
|
||||
const modal_edit__event_presenter_obj: ModalSettings = {
|
||||
type: 'component',
|
||||
component: modalComponentEditEventPresenterObj,
|
||||
title: 'Edit Event Presenter',
|
||||
position: '', // default is "items-center"
|
||||
};
|
||||
|
||||
// console.log($slct, $slct_trigger);
|
||||
// if ($slct.event_id) {
|
||||
// // $slct_trigger = 'load__event_obj';
|
||||
// console.log(`$slct.event_id = `, $slct.event_id);
|
||||
// }
|
||||
// Viewing
|
||||
const modalComponentViewEventPresenterObj: ModalComponent = { ref: View_modal_event_presenter_obj, props: {container_class_li: 'w-full p-4 space-y-4 card', container_header_class_li: 'card-header text-2xl font-bold'} };
|
||||
|
||||
const modal_view__event_presenter_obj: ModalSettings = {
|
||||
type: 'component',
|
||||
component: modalComponentViewEventPresenterObj,
|
||||
title: 'View Event Presenter',
|
||||
position: '', // default is "items-center"
|
||||
|
||||
// Provide arbitrary classes to the backdrop and modal elements:
|
||||
// backdropClasses: '!bg-green-500',
|
||||
// modalClasses: 'w-modal-wide',
|
||||
// modalClasses: 'w-full',
|
||||
|
||||
// Provide arbitrary metadata to your modal instance:
|
||||
// meta: {
|
||||
// component_root_classes: 'w-full',
|
||||
// fn: do_something_function
|
||||
// },
|
||||
};
|
||||
|
||||
// We don't want the edit or view to show up by default. Maybe if we see an object ID param in the URL, we can show the view modal.
|
||||
$ae_loc.mod.events.show_edit__event_presenter_obj = false;
|
||||
$ae_loc.mod.sponsorships.show_view__event_presenter_obj = false;
|
||||
|
||||
$: if ($slct_trigger == 'show_edit__event_presenter_obj' && $ae_loc.mod.events.show_edit__event_presenter_obj) {
|
||||
console.log('Show Modal Edit');
|
||||
$slct_trigger = null;
|
||||
|
||||
let location = window.location.href;
|
||||
const url = new URL(location);
|
||||
url.searchParams.set('event_presenter_id', $slct.event_presenter_id);
|
||||
history.pushState({}, '', url);
|
||||
|
||||
// modalStore.clear();
|
||||
modalStore.trigger(modal_edit__event_presenter_obj);
|
||||
}
|
||||
$: if ($slct_trigger == 'show_view__event_presenter_obj' && $ae_loc.mod.events.show_view__event_presenter_obj) {
|
||||
console.log('Show Modal View');
|
||||
$slct_trigger = null;
|
||||
|
||||
let location = window.location.href;
|
||||
const url = new URL(location);
|
||||
url.searchParams.set('event_presenter_id', $slct.event_presenter_id);
|
||||
history.pushState({}, '', url);
|
||||
|
||||
// modalStore.clear();
|
||||
modalStore.trigger(modal_view__event_presenter_obj);
|
||||
}
|
||||
|
||||
|
||||
if ($slct.event_id && !$slct.event_presenter_obj_li) {
|
||||
console.log(`No presenter list was found for Event ID: ${$slct.event_id}`);
|
||||
|
||||
$slct_trigger = 'load__event_presenter_obj_li';
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
console.log('Events - Speakers: +page.svelte');
|
||||
@@ -47,8 +106,8 @@ onMount(() => {
|
||||
});
|
||||
|
||||
|
||||
$: if ($slct_trigger == 'load__event_obj' && $slct.event_id) {
|
||||
console.log('Selected Event ID:', $slct.event_id);
|
||||
$: if ($slct_trigger == 'load__event_presenter_obj_li' && $slct.event_id) {
|
||||
console.log(`load__event_presenter_obj_li event_id: ${$slct.event_id}`);
|
||||
|
||||
$slct_trigger = null;
|
||||
|
||||
@@ -113,6 +172,47 @@ async function handle_load_ae_obj_li__event_presenter({event_id, try_cache=true}
|
||||
return ae_event_presenter_obj_li_get_promise;
|
||||
}
|
||||
|
||||
|
||||
// Load the Event Presenter Obj with ID based on the URL param.
|
||||
$: if ($slct_trigger == 'load__event_presenter_obj' && $slct.event_presenter_id) {
|
||||
console.log('Selected Event Presenter ID:', $slct.event_presenter_id);
|
||||
|
||||
$slct_trigger = null;
|
||||
|
||||
handle_load_ae_obj_id__event_presenter({event_presenter_id: $slct.event_presenter_id, try_cache: false});
|
||||
}
|
||||
|
||||
let ae_event_presenter_obj_get_promise: Promise<any>;
|
||||
|
||||
async function handle_load_ae_obj_id__event_presenter({event_presenter_id, try_cache=false}) {
|
||||
console.log(`*** handle_load_ae_obj_id__event_presenter() *** event_presenter_id=${event_presenter_id}`);
|
||||
|
||||
let params = {};
|
||||
|
||||
// $ae_loc.hub.event_presenter_id_qry_status = 'loading';
|
||||
ae_event_presenter_obj_get_promise = api.get_ae_obj_id_crud({
|
||||
api_cfg: $ae_api,
|
||||
obj_type: 'event_presenter',
|
||||
obj_id: event_presenter_id,
|
||||
use_alt_table: false, // NOTE: This will use the table_name_alt value instead of the table_name value in the API config.
|
||||
use_alt_base: false, // NOTE: This will use the base_name_alt value instead of the base_name value in the API config.
|
||||
params: params,
|
||||
log_lvl: 0
|
||||
})
|
||||
.then(function (event_presenter_obj_get_result) {
|
||||
if (event_presenter_obj_get_result) {
|
||||
$slct.event_presenter_obj = event_presenter_obj_get_result;
|
||||
console.log(`event presenter object:`, $slct.event_presenter_obj);
|
||||
}
|
||||
})
|
||||
.catch(function (error) {
|
||||
console.log('No results returned or failed.', error);
|
||||
});
|
||||
|
||||
return ae_event_presenter_obj_get_promise;
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,937 @@
|
||||
<script lang="ts">
|
||||
import type { SvelteComponent } from 'svelte';
|
||||
import { createEventDispatcher, onMount } from 'svelte';
|
||||
|
||||
// const dispatch = createEventDispatcher();
|
||||
|
||||
|
||||
// This works and uses local storage:
|
||||
// store_current_tab must be prefixed with $ to be reactive.
|
||||
import { clipboard, localStorageStore, ProgressRadial } from '@skeletonlabs/skeleton';
|
||||
import type { Writable } from 'svelte/store';
|
||||
const store_current_tab: Writable<string> = localStorageStore('store_current_tab', 'start');
|
||||
console.log(`store_current_tab:`, $store_current_tab);
|
||||
|
||||
|
||||
// This works, but does not uses local storage:
|
||||
// store_current_tab is not reactive and should not be prefixed with $.
|
||||
// let store_current_tab: string = 'start';
|
||||
// console.log(`store_current_tab:`, store_current_tab);
|
||||
|
||||
|
||||
// This does not work:
|
||||
// let tab_set = $store_current_tab;
|
||||
// let tab_set = store_current_tab;
|
||||
|
||||
// Stores
|
||||
import { getModalStore, FileDropzone, TabGroup, Tab, TabAnchor } from '@skeletonlabs/skeleton';
|
||||
|
||||
// Props
|
||||
/** Exposes parent props to this component. */
|
||||
export let parent: SvelteComponent;
|
||||
export let container_class_li = '';
|
||||
export let container_header_class_li = '';
|
||||
|
||||
const modalStore = getModalStore();
|
||||
|
||||
|
||||
import { ae_util } from '$lib/ae_utils';
|
||||
import { api } from '$lib/api';
|
||||
import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/ae_stores';
|
||||
import type { key_val } from '$lib/ae_stores';
|
||||
|
||||
|
||||
onMount(() => {
|
||||
console.log('** Component Mounted: ** View Modal - Sponsorship Obj');
|
||||
|
||||
if ($slct.event_presenter_id && $ae_loc.href_url) {
|
||||
$ae_loc.mod.events.presenter_link = `${$ae_loc.href_url}/load?ae_id=${$slct.event_presenter_id}`;
|
||||
console.log('Speaker link:', $ae_loc.mod.events.presenter_link);
|
||||
}
|
||||
});
|
||||
|
||||
// // Form Data
|
||||
// const formData = {
|
||||
// name: 'Jane Doe',
|
||||
// tel: '214-555-1234',
|
||||
// email: 'jdoe@email.com'
|
||||
// };
|
||||
|
||||
// const form_data = $slct.event_presenter_obj;
|
||||
|
||||
// We've created a custom submit function to pass the response and close the modal.
|
||||
// function onFormSubmit(): void {
|
||||
// if ($modalStore[0].response) $modalStore[0].response(formData);
|
||||
// modalStore.close();
|
||||
// }
|
||||
|
||||
// Base Classes
|
||||
const cBase = 'card p-4 shadow-xl space-y-4 ae_modal_scrollfix';
|
||||
// w-modal-wide
|
||||
// const cBase = 'bg-surface-100-800-token w-screen h-screen';
|
||||
// const cBase = 'card h-screen';
|
||||
// const cBase = 'card p-4 w-modal-wide h-screen shadow-xl space-y-4';
|
||||
|
||||
const cHeader = 'text-2xl font-bold';
|
||||
const cForm = 'border border-surface-500 p-4 space-y-4 rounded-container-token';
|
||||
|
||||
|
||||
|
||||
$ae_loc.mod.events.disable_submit__event_presenter_obj = false;
|
||||
let placeholder_li: key_val = {
|
||||
file_logo_primary: '-- No File Selected --',
|
||||
file_logo_secondary: '-- No File Selected --',
|
||||
file_media_promo_video: '-- No File Selected --',
|
||||
};
|
||||
let ae_promises_init: key_val = {};
|
||||
let ae_promises: key_val = {};
|
||||
// let ae_promises.api_create__event_presenter_obj: Promise<any>;
|
||||
|
||||
if ($slct.event_presenter_id) {
|
||||
console.log(`Sponsorship ID selected: ${$slct.event_presenter_id}`);
|
||||
console.log(`Sponsorship object selected:`, $slct.event_presenter_obj);
|
||||
|
||||
// $slct_trigger = 'load__event_presenter_obj';
|
||||
|
||||
// $ae_loc.mod.events.presenter_link = `${$ae_loc.href_url}/load?ae_id=${$slct.event_presenter_id}`;
|
||||
// console.log('Sponsorship link:', $ae_loc.mod.events.presenter_link);
|
||||
} else {
|
||||
$slct.event_presenter_id = null;
|
||||
$slct.event_presenter_obj = {
|
||||
sponsorship_cfg_id_random: $ae_loc.mod.events.sponsorship_cfg_id,
|
||||
|
||||
name: null,
|
||||
description: null,
|
||||
|
||||
poc_person_id: null,
|
||||
|
||||
logo_li_json: null,
|
||||
media_li_json: null,
|
||||
|
||||
social_li_json: null,
|
||||
|
||||
guest_li_json: null,
|
||||
|
||||
level_num: null,
|
||||
level_str: null,
|
||||
amount: null,
|
||||
paid: null,
|
||||
enable: null,
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
|
||||
$: if ($slct.event_presenter_obj) {
|
||||
// Logo related
|
||||
if ($slct.event_presenter_obj.logo_li_json) {
|
||||
if ($slct.event_presenter_obj.logo_li_json.primary.hosted_file_id_random) {
|
||||
placeholder_li.file_logo_primary = `<img src="https://dev-demo.oneskyit.com/hosted_file/download/${$slct.event_presenter_obj.logo_li_json.primary.hosted_file_id_random}">${$slct.event_presenter_obj.logo_li_json.primary.filename}`;
|
||||
}
|
||||
if ($slct.event_presenter_obj.logo_li_json.secondary.hosted_file_id_random) {
|
||||
placeholder_li.file_logo_secondary = `<img src="https://dev-demo.oneskyit.com/hosted_file/download/${$slct.event_presenter_obj.logo_li_json.secondary.hosted_file_id_random}">${$slct.event_presenter_obj.logo_li_json.secondary.filename}`;
|
||||
}
|
||||
}
|
||||
// Other media files related
|
||||
if ($slct.event_presenter_obj.media_li_json) {
|
||||
if ($slct.event_presenter_obj.media_li_json.promo_video && $slct.event_presenter_obj.media_li_json.promo_video.hosted_file_id_random) {
|
||||
placeholder_li.file_media_promo_video = `<video src="https://dev-demo.oneskyit.com/hosted_file/download/${$slct.event_presenter_obj.media_li_json.promo_video.hosted_file_id_random}" controls></video>${$slct.event_presenter_obj.media_li_json.promo_video.filename}`;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function handle_submit_form(event) {
|
||||
console.log('*** handle_submit_form() ***');
|
||||
|
||||
$ae_loc.mod.events.disable_submit__event_presenter_obj = true;
|
||||
|
||||
// Data in
|
||||
let form_data = new FormData(event.target);
|
||||
console.log(form_data);
|
||||
|
||||
let sponsorship_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(sponsorship_di);
|
||||
|
||||
// Data out
|
||||
let sponsorship_do: key_val = {};
|
||||
|
||||
if (!$slct.event_presenter_id) {
|
||||
// sponsorship_do['account_id_random'] = $ae_loc.account_id;
|
||||
sponsorship_do['sponsorship_cfg_id_random'] = $slct.sponsorship_cfg_id;
|
||||
// sponsorship_do['enable'] = true;
|
||||
}
|
||||
|
||||
if (sponsorship_di.poc_full_name || sponsorship_di.poc_email) {
|
||||
sponsorship_do['poc_json'] = {
|
||||
full_name: sponsorship_di.poc_full_name,
|
||||
email: sponsorship_di.poc_email,
|
||||
phone_mobile: sponsorship_di.poc_phone_mobile,
|
||||
};
|
||||
}
|
||||
|
||||
if (sponsorship_di.organization_name) {
|
||||
// Using the organization_name field to store the name of the sponsorship.
|
||||
sponsorship_do['name'] = sponsorship_di.organization_name;
|
||||
}
|
||||
// if (sponsorship_di.description) {
|
||||
// sponsorship_do['description'] = sponsorship_di.description;
|
||||
// }
|
||||
|
||||
if (sponsorship_di.level_num) {
|
||||
sponsorship_do['level_num'] = Number(sponsorship_di.level_num);
|
||||
let level_num = sponsorship_do['level_num'];
|
||||
|
||||
if ($slct.sponsorship_cfg_obj.level_li_json) {
|
||||
let level_str = `${$slct.sponsorship_cfg_obj.level_li_json[level_num].name} - ${$slct.sponsorship_cfg_obj.level_li_json[level_num].amount}`;
|
||||
sponsorship_do['level_str'] = level_str;
|
||||
}
|
||||
}
|
||||
|
||||
// Loop through possible guest list (up to 20) and add to the guest_li_json array.
|
||||
|
||||
let temp_guest_li = [];
|
||||
for (let i = 0; i < 20; i++) {
|
||||
if (sponsorship_di[`guest_${i}_full_name`] || sponsorship_di[`guest_${i}_given_name`]) {
|
||||
let guest_x_full_name = sponsorship_di[`guest_${i}_given_name`] + ' ' + sponsorship_di[`guest_${i}_family_name`];
|
||||
temp_guest_li.push({
|
||||
given_name: sponsorship_di[`guest_${i}_given_name`],
|
||||
family_name: sponsorship_di[`guest_${i}_family_name`],
|
||||
full_name: guest_x_full_name,
|
||||
email: sponsorship_di[`guest_${i}_email`],
|
||||
phone_mobile: sponsorship_di[`guest_${i}_phone_mobile`],
|
||||
phone_home: sponsorship_di[`guest_${i}_phone_home`],
|
||||
phone_office: sponsorship_di[`guest_${i}_phone_office`],
|
||||
city: sponsorship_di[`guest_${i}_city`],
|
||||
other_text: sponsorship_di[`guest_${i}_other_text`],
|
||||
});
|
||||
}
|
||||
}
|
||||
if (temp_guest_li.length) {
|
||||
sponsorship_do['guest_li_json'] = temp_guest_li;
|
||||
}
|
||||
|
||||
if (sponsorship_di.social_media_facebook || sponsorship_di.social_media_twitter || sponsorship_di.social_media_instagram || sponsorship_di.social_media_linkedin) {
|
||||
sponsorship_do['social_li_json'] = {
|
||||
facebook: sponsorship_di.social_media_facebook,
|
||||
twitter: sponsorship_di.social_media_twitter,
|
||||
instagram: sponsorship_di.social_media_instagram,
|
||||
linkedin: sponsorship_di.social_media_linkedin,
|
||||
};
|
||||
}
|
||||
|
||||
sponsorship_do['hide'] = !!sponsorship_di.hide;
|
||||
sponsorship_do['priority'] = !!sponsorship_di.priority;
|
||||
if (sponsorship_di.sort) {
|
||||
// Change this to a number type
|
||||
sponsorship_do['sort'] = Number(sponsorship_di.sort);
|
||||
} else {
|
||||
sponsorship_do['sort'] = null;
|
||||
}
|
||||
if (sponsorship_di.group) {
|
||||
sponsorship_do['group'] = sponsorship_di.group;
|
||||
} else {
|
||||
sponsorship_do['group'] = null;
|
||||
}
|
||||
if (sponsorship_do['enable']) {
|
||||
sponsorship_do['enable'] = !!sponsorship_di.enable;
|
||||
}
|
||||
|
||||
// if (tinyMCE.get('notes')) {
|
||||
// sponsorship_do['notes'] = tinyMCE.get('notes').getContent();
|
||||
// } else {
|
||||
sponsorship_do['notes'] = sponsorship_di.notes;
|
||||
// }
|
||||
|
||||
console.log(sponsorship_do);
|
||||
|
||||
if (!$slct.event_presenter_id) {
|
||||
ae_promises.create__sponsorship = await handle_create__sponsorship({
|
||||
obj_type: 'sponsorship',
|
||||
data: sponsorship_do
|
||||
});
|
||||
$ae_loc.mod.events.disable_submit__event_presenter_obj = false;
|
||||
|
||||
} else {
|
||||
ae_promises.update__event_presenter_obj = await handle_update__sponsorship({
|
||||
obj_type: 'sponsorship',
|
||||
obj_id: $slct.event_presenter_id,
|
||||
data: sponsorship_do
|
||||
});
|
||||
$ae_loc.mod.events.disable_submit__event_presenter_obj = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function handle_submit_form_files(event) {
|
||||
console.log('*** handle_submit_form() ***');
|
||||
|
||||
let sponsorship_do: key_val = {};
|
||||
|
||||
if ($slct.event_presenter_obj.logo_li_json) {
|
||||
console.log('The logo_li_json was found.');
|
||||
sponsorship_do.logo_li_json = $slct.event_presenter_obj.logo_li_json;
|
||||
} else {
|
||||
console.log('The logo_li_json was not found or is empty.');
|
||||
sponsorship_do.logo_li_json = {};
|
||||
}
|
||||
|
||||
if ($slct.event_presenter_obj.media_li_json) {
|
||||
console.log('The media_li_json was found.');
|
||||
sponsorship_do.media_li_json = $slct.event_presenter_obj.media_li_json;
|
||||
} else {
|
||||
console.log('The media_li_json was not found or is empty.');
|
||||
sponsorship_do.media_li_json = {};
|
||||
}
|
||||
|
||||
let hosted_file_results;
|
||||
// let logo_li_json = {};
|
||||
// let media_li_json = {};
|
||||
|
||||
if (event.target.file_logo_primary.files.length > 0) {
|
||||
console.log('The primary logo file was found.');
|
||||
hosted_file_results = await handle_input_upload_files(event.target.file_logo_primary.files);
|
||||
|
||||
if (hosted_file_results) {
|
||||
sponsorship_do.logo_li_json.primary = hosted_file_results[0];
|
||||
console.log(sponsorship_do.logo_li_json);
|
||||
placeholder_li.file_logo_primary = `<img src="/hosted_file/download/${sponsorship_do.logo_li_json.primary.hosted_file_id_random}">${sponsorship_do.logo_li_json.primary.filename}`;
|
||||
}
|
||||
}
|
||||
|
||||
if (event.target.file_logo_secondary.files.length > 0) {
|
||||
console.log('The secondary logo file was found.');
|
||||
hosted_file_results = await handle_input_upload_files(event.target.file_logo_secondary.files);
|
||||
|
||||
if (hosted_file_results) {
|
||||
sponsorship_do.logo_li_json.secondary = hosted_file_results[0];
|
||||
console.log(sponsorship_do.logo_li_json);
|
||||
}
|
||||
}
|
||||
|
||||
if (event.target.file_media_promo_video.files.length > 0) {
|
||||
console.log('The promo video file was found.');
|
||||
hosted_file_results = await handle_input_upload_files(event.target.file_media_promo_video.files);
|
||||
|
||||
if (hosted_file_results) {
|
||||
sponsorship_do.media_li_json.promo_video = hosted_file_results[0];
|
||||
console.log(sponsorship_do.media_li_json);
|
||||
}
|
||||
}
|
||||
|
||||
console.log(sponsorship_do);
|
||||
|
||||
|
||||
ae_promises.update__event_presenter_obj = await handle_update__sponsorship({
|
||||
obj_type: 'sponsorship',
|
||||
obj_id: $slct.event_presenter_id,
|
||||
data: sponsorship_do
|
||||
});
|
||||
|
||||
// let sponsorship_do: key_val = {
|
||||
// logo_li_json: {
|
||||
// primary: hosted_file_results[0],
|
||||
// }
|
||||
|
||||
// };
|
||||
|
||||
|
||||
// sponsorship_do['logo_li_json'] = hosted_file_result;
|
||||
|
||||
// sponsorship_do['notes'] = 'Update after file upload!';
|
||||
|
||||
// update_event_presenter_obj_promise = await api.update_ae_obj_id_crud({
|
||||
// api_cfg: $ae_api,
|
||||
// obj_type: 'sponsorship',
|
||||
// obj_id: $slct.event_presenter_id,
|
||||
// fields: sponsorship_do,
|
||||
// key: $ae_api.api_crud_super_key,
|
||||
// log_lvl: 1
|
||||
// })
|
||||
// .then(function (event_presenter_obj_update_result) {
|
||||
// if (!event_presenter_obj_update_result) {
|
||||
// console.log('The result was null or false.');
|
||||
// return false;
|
||||
// }
|
||||
// return event_presenter_obj_update_result;
|
||||
// })
|
||||
// .catch(function (error) {
|
||||
// console.log('Something went wrong.');
|
||||
// console.log(error);
|
||||
// return false;
|
||||
// });
|
||||
|
||||
}
|
||||
|
||||
|
||||
async function handle_input_upload_files(input_upload_files) {
|
||||
console.log('*** handle_input_upload_files() ***');
|
||||
|
||||
const form_data = new FormData();
|
||||
|
||||
form_data.append('account_id', $ae_loc.account_id);
|
||||
form_data.append('link_to_type', 'sponsorship');
|
||||
form_data.append('link_to_id', $slct.event_presenter_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 = await api.post_object({api_cfg: $ae_api, endpoint: endpoint, params: params, form_data: form_data});
|
||||
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_create__sponsorship({
|
||||
obj_type,
|
||||
data
|
||||
}) {
|
||||
console.log('*** handle_create__sponsorship() ***');
|
||||
|
||||
ae_promises.api_create__event_presenter_obj = api.create_ae_obj_crud({
|
||||
api_cfg: $ae_api,
|
||||
obj_type: obj_type,
|
||||
fields: data,
|
||||
key: $ae_api.api_crud_super_key,
|
||||
log_lvl: 2
|
||||
})
|
||||
.then(async function (create__obj_result) {
|
||||
if (!create__obj_result) {
|
||||
console.log('The result was null or false.');
|
||||
return false;
|
||||
}
|
||||
return create__obj_result;
|
||||
})
|
||||
.catch(function (error) {
|
||||
console.log('Something went wrong.');
|
||||
console.log(error);
|
||||
return false;
|
||||
});
|
||||
|
||||
return ae_promises.api_create__event_presenter_obj;
|
||||
}
|
||||
|
||||
|
||||
async function handle_update__sponsorship({
|
||||
obj_type,
|
||||
obj_id,
|
||||
data
|
||||
}) {
|
||||
console.log('*** handle_update__sponsorship() ***');
|
||||
|
||||
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,
|
||||
log_lvl: 2
|
||||
})
|
||||
.then(async function (update__obj_result) {
|
||||
if (!update__obj_result) {
|
||||
console.log('The result was null or false.');
|
||||
return false;
|
||||
}
|
||||
return update__obj_result;
|
||||
})
|
||||
.catch(function (error) {
|
||||
console.log('Something went wrong.');
|
||||
console.log(error);
|
||||
return false;
|
||||
});
|
||||
|
||||
return ae_promises.update__event_presenter_obj;
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- @component This is the Event Presenters modal edit form. -->
|
||||
|
||||
{#if $modalStore[0]}
|
||||
<div class="svelte_component ae_edit_modal ae_obj__event_presenter {container_class_li}">
|
||||
<header class={container_header_class_li}>
|
||||
{$modalStore[0].title ?? '-- No Title --'}
|
||||
|
||||
{#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}
|
||||
</header>
|
||||
|
||||
|
||||
{#if $ae_loc.mod.events.presenter_link}
|
||||
<div class="flex justify-end">
|
||||
<button
|
||||
class="btn variant-soft-secondary"
|
||||
use:clipboard={$ae_loc.mod.events.presenter_link}
|
||||
>
|
||||
<span class="fas fa-copy mx-1"></span>
|
||||
Copy link for {$slct.event_presenter_id}
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
|
||||
<TabGroup
|
||||
justify="justify-center"
|
||||
active="variant-ghost-primary"
|
||||
hover="hover:variant-soft-primary"
|
||||
flex="flex-1 lg:flex-none"
|
||||
rounded=""
|
||||
border=""
|
||||
class="bg-surface-100-800-token w-full"
|
||||
>
|
||||
<Tab bind:group={$store_current_tab} name="tab_start" value={'start'}>
|
||||
<svelte:fragment slot="lead"><span class="fas fa-home"></span></svelte:fragment>
|
||||
<span>Start</span>
|
||||
</Tab>
|
||||
<Tab bind:group={$store_current_tab} name="tab_files" value={'files'} disabled={!$slct.event_presenter_obj.event_presenter_id_random}>
|
||||
<svelte:fragment slot="lead"><span class="fas fa-file-upload"></span></svelte:fragment>
|
||||
Files
|
||||
</Tab>
|
||||
<Tab bind:group={$store_current_tab} name="tab_biograhpy" value={'biograhpy'} disabled={!$slct.event_presenter_obj.event_presenter_id_random}>
|
||||
<svelte:fragment slot="lead"><span class="fas fa-users"></span></svelte:fragment>
|
||||
Biography
|
||||
</Tab>
|
||||
<Tab bind:group={$store_current_tab} name="tab_options" value={'options'} disabled={!$slct.event_presenter_obj.event_presenter_id_random}>
|
||||
<svelte:fragment slot="lead"><span class="fas fa-info"></span></svelte:fragment>
|
||||
More
|
||||
</Tab>
|
||||
|
||||
<!-- Tab Panels --->
|
||||
<svelte:fragment slot="panel">
|
||||
|
||||
|
||||
{#if $store_current_tab === 'start'}
|
||||
|
||||
|
||||
<form
|
||||
class="modal-form {cForm}"
|
||||
on:submit|preventDefault={handle_submit_form}
|
||||
>
|
||||
|
||||
|
||||
|
||||
|
||||
<fieldset class="mb-8 flex flex-wrap gap-4">
|
||||
<legend class="legend">Speaker</legend>
|
||||
|
||||
<label for="full_name">Full name
|
||||
<div class="input-group grid-cols-[auto_1fr_auto]">
|
||||
<div class="input-group-shim">
|
||||
{#if !$ae_loc.trusted_access && $slct.event_presenter_obj.event_presenter_id_random}
|
||||
<span class="fas fa-lock" title="Field is locked"></span>
|
||||
{:else}
|
||||
<span class="fas fa-unlock" title="Field is unlocked"></span>
|
||||
{/if}
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
class="input"
|
||||
id="full_name" name="full_name"
|
||||
placeholder="Full name"
|
||||
value={($slct.event_presenter_obj.full_name ? $slct.event_presenter_obj.full_name : '')}
|
||||
autocomplete="name"
|
||||
readonly={!$ae_loc.trusted_access && $slct.event_presenter_obj.event_presenter_id_random}
|
||||
required
|
||||
>
|
||||
</div>
|
||||
</label>
|
||||
<label for="email">Email
|
||||
<div class="input-group grid-cols-[auto_1fr_auto]">
|
||||
<div class="input-group-shim">
|
||||
{#if !$ae_loc.trusted_access && $slct.event_presenter_obj.event_presenter_id_random}
|
||||
<span class="fas fa-lock" title="Field is locked"></span>
|
||||
{:else}
|
||||
<span class="fas fa-unlock" title="Field is unlocked"></span>
|
||||
{/if}
|
||||
</div>
|
||||
<input
|
||||
type="email"
|
||||
class="input"
|
||||
id="email"
|
||||
name="email"
|
||||
placeholder="Email"
|
||||
value={($slct.event_presenter_obj.email ? $slct.event_presenter_obj.email : '')}
|
||||
autocomplete="email"
|
||||
readonly={!$ae_loc.trusted_access && $slct.event_presenter_obj.event_presenter_id_random}
|
||||
required
|
||||
>
|
||||
</div>
|
||||
</label>
|
||||
|
||||
<label for="phone_mobile">Mobile phone
|
||||
<input
|
||||
type="tel"
|
||||
class="input"
|
||||
id="phone_mobile"
|
||||
name="phone_mobile"
|
||||
placeholder="Mobile phone"
|
||||
value={($slct.event_presenter_obj.phone_mobile ? $slct.event_presenter_obj.phone_mobile : '')}
|
||||
autocomplete="tel"
|
||||
>
|
||||
</label>
|
||||
|
||||
<label for="affiliations" class="label">Affiliations/Organization
|
||||
<input type="text" id="affiliations" name="affiliations" required max="200" value={$slct.event_presenter_obj.affiliations ?? ''} placeholder="Affiliations or organization" autocomplete="off" class="input" />
|
||||
</label>
|
||||
|
||||
|
||||
<!-- Collect the organization mailing address -->
|
||||
<fieldset class="mb-8 flex flex-wrap gap-4">
|
||||
<legend class="legend">Mailing Address</legend>
|
||||
|
||||
<label for="address_line_1" class="label max-w-64">
|
||||
<!-- Line 1 (Street) -->
|
||||
<input type="text" id="address_line_1" name="address_line_1" value={$slct.event_presenter_obj.address_street ?? ''} placeholder="Line 1 (street)" autocomplete="street-address" class="input text-xs" />
|
||||
</label>
|
||||
<label for="address_line_2" class="label max-w-64">
|
||||
<!-- Line 2 (Suite) -->
|
||||
<input type="text" id="address_line_2" name="address_line_2" value={$slct.event_presenter_obj.address_suite ?? ''} placeholder="Line 2 (suite)" autocomplete="address-line2" class="input text-xs" />
|
||||
</label>
|
||||
<label for="address_city" class="label max-w-64">
|
||||
<!-- City -->
|
||||
<input type="text" id="address_city" name="address_city" value={$slct.event_presenter_obj.address_city ?? ''} placeholder="City" autocomplete="address-level2" class="input text-xs" />
|
||||
</label>
|
||||
<label for="address_state" class="label max-w-64">
|
||||
<!-- State/Province -->
|
||||
<input type="text" id="address_state_province" name="address_state_province" value={$slct.event_presenter_obj.address_state_province ?? ''} placeholder="State/Province" autocomplete="address-level1" class="input text-xs" />
|
||||
</label>
|
||||
<label for="address_postal_code" class="label max-w-64">
|
||||
<!-- Postal code/Zip -->
|
||||
<input type="text" id="address_postal_code" name="address_postal_code" value={$slct.event_presenter_obj.address_postal_code ?? ''} placeholder="Postal code/Zip" autocomplete="postal-code" class="input text-xs" />
|
||||
</label>
|
||||
<label for="address_country" class="label max-w-64">
|
||||
<!-- Country -->
|
||||
<input type="text" id="address_country" name="address_country" value={$slct.event_presenter_obj.address_country ?? ''} placeholder="Country" autocomplete="country-name" class="input text-xs" />
|
||||
</label>
|
||||
</fieldset>
|
||||
|
||||
</fieldset>
|
||||
|
||||
<!-- </section> -->
|
||||
|
||||
<fieldset class="mb-8">
|
||||
<legend class="legend">Agreements & Accommodations</legend>
|
||||
|
||||
<label for="waiver" class="label">
|
||||
<input
|
||||
type="checkbox"
|
||||
class="checkbox"
|
||||
id="waiver"
|
||||
name="waiver"
|
||||
value="1"
|
||||
checked={$slct.event_presenter_obj.waiver}
|
||||
>
|
||||
Yes, I understand the "Speaker General Waiver".
|
||||
</label>
|
||||
|
||||
<label for="accommodations" class="label">
|
||||
<input
|
||||
type="checkbox"
|
||||
class="checkbox"
|
||||
id="accommodations"
|
||||
name="accommodations"
|
||||
value="1"
|
||||
checked={$slct.event_presenter_obj.accommodations}
|
||||
>
|
||||
Yes, please have a member of the CHOW team reach out for special accommodations or assistance.
|
||||
</label>
|
||||
</fieldset>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
class="btn {parent.buttonPositive} m-2"
|
||||
disabled={($ae_loc.mod.events.disable_submit__event_presenter_obj)}
|
||||
on:click={() => {
|
||||
console.log('*** Save start button clicked ***');
|
||||
// if (!confirm('Are you sure you want to save this sponsorship?')) {return false;}
|
||||
// handle_submit_form();
|
||||
// handle_submit_form;
|
||||
}}
|
||||
>
|
||||
<span class="fas fa-check mx-1"></span>
|
||||
Save
|
||||
</button>
|
||||
|
||||
</form>
|
||||
|
||||
|
||||
{:else if $store_current_tab === 'files'}
|
||||
|
||||
|
||||
<form
|
||||
class="modal-form {cForm}"
|
||||
on:submit|preventDefault={handle_submit_form_files}
|
||||
>
|
||||
|
||||
<section>
|
||||
<h2>Logos</h2>
|
||||
<p>Add your logo here. This logo will be displayed at the gala.</p>
|
||||
<label for="file_logo_primary">
|
||||
Upload logo (png, webp, jpg, svg)
|
||||
<FileDropzone
|
||||
id="file_logo_primary"
|
||||
name="file_logo_primary"
|
||||
padding="p-1"
|
||||
accept="image/*"
|
||||
on:change={(e) => {
|
||||
console.log('*** FileDropzone change event ***', e);
|
||||
|
||||
if (e.target.files.length) {
|
||||
placeholder_li.file_logo_primary = `Ready to upload: ${e.target.files[0].name}`;
|
||||
} else {
|
||||
placeholder_li.file_logo_primary = 'No files selected.';
|
||||
}
|
||||
}}
|
||||
>
|
||||
<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">PNG, WEBP, JPG only image types</svelte:fragment>
|
||||
</FileDropzone>
|
||||
{@html placeholder_li.file_logo_primary}
|
||||
</label>
|
||||
|
||||
<label for="file_logo_secondary">
|
||||
Upload a version of your logo for use with dark backgrounds (png, webp, jpg, svg)
|
||||
<FileDropzone
|
||||
id="file_logo_secondary"
|
||||
name="file_logo_secondary"
|
||||
padding="p-1"
|
||||
accept="image/*"
|
||||
on:change={(e) => {
|
||||
console.log('*** FileDropzone change event ***', e);
|
||||
|
||||
if (e.target.files.length) {
|
||||
placeholder_li.file_logo_secondary = `Ready to upload: ${e.target.files[0].name}`;
|
||||
} else {
|
||||
placeholder_li.file_logo_secondary = 'No files selected.';
|
||||
}
|
||||
}}
|
||||
>
|
||||
<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">PNG, WEBP, JPG only image types</svelte:fragment>
|
||||
</FileDropzone>
|
||||
{@html placeholder_li.file_logo_secondary}
|
||||
</label>
|
||||
|
||||
</section>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
class="btn {parent.buttonPositive}"
|
||||
disabled={($ae_loc.mod.events.disable_submit__event_presenter_obj)}
|
||||
on:click={() => {
|
||||
console.log('*** Save button clicked ***');
|
||||
// if (!confirm('Are you sure you want to save this sponsorship?')) {return false;}
|
||||
// handle_submit_form();
|
||||
// handle_submit_form;
|
||||
}}
|
||||
>
|
||||
<span class="fas fa-check mx-1"></span>
|
||||
Save
|
||||
</button>
|
||||
|
||||
</form>
|
||||
|
||||
|
||||
{:else if $store_current_tab === 'biograhpy'}
|
||||
|
||||
|
||||
<section class="biograhpy">
|
||||
<form
|
||||
class="modal-form {cForm}"
|
||||
on:submit|preventDefault={handle_submit_form}
|
||||
>
|
||||
<label class="label ae_label event_presenter__biography">Speaker Biography
|
||||
<textarea name="biography" id="biography" class="textarea ae_value event_presenter__biography tinymce_editor editor_basic" rows="5" cols="70" bind:value={$slct.event_presenter_obj.biography} placeholder="A short biography or overview of this event_presenter."></textarea>
|
||||
</label>
|
||||
|
||||
<div class="flex flex-wrap gap-2 p-1">
|
||||
<button
|
||||
type="submit"
|
||||
class="btn {parent.buttonPositive} btn-sm"
|
||||
disabled={($ae_loc.mod.events.disable_submit__event_presenter_obj)}
|
||||
on:click={() => {
|
||||
console.log('*** Save button clicked ***');
|
||||
// if (!confirm('Are you sure you want to save this sponsorship?')) {return false;}
|
||||
// handle_submit_form();
|
||||
// handle_submit_form;
|
||||
}}
|
||||
>
|
||||
<span class="fas fa-check mx-1"></span>
|
||||
Save
|
||||
</button>
|
||||
|
||||
</div>
|
||||
|
||||
</form>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
{:else if $store_current_tab === 'options'}
|
||||
|
||||
|
||||
<form
|
||||
class="modal-form {cForm}"
|
||||
on:submit|preventDefault={handle_submit_form}
|
||||
>
|
||||
<!-- Ask for common social media URLs. (Twitter, Facebook, Instagram, etc) -->
|
||||
{#if $slct.event_presenter_obj.social_li_json}
|
||||
<fieldset class="sponsorship__social_media">
|
||||
<legend class="legend">Social Media</legend>
|
||||
|
||||
<label for="social_media_twitter" class="label">Twitter
|
||||
<input type="url" id="social_media_twitter" name="social_media_twitter" class="input" placeholder="Twitter" value={$slct.event_presenter_obj.social_li_json.twitter ?? ''} autocomplete="url" />
|
||||
</label>
|
||||
<label for="social_media_facebook" class="label">Facebook
|
||||
<input type="url" id="social_media_facebook" name="social_media_facebook" class="input" placeholder="Facebook" value={$slct.event_presenter_obj.social_li_json.facebook ?? ''} autocomplete="url" />
|
||||
</label>
|
||||
<label for="social_media_instagram" class="label">Instagram
|
||||
<input type="url" id="social_media_instagram" name="social_media_instagram" class="input" placeholder="Instagram" value={$slct.event_presenter_obj.social_li_json.instagram ?? ''} autocomplete="url" />
|
||||
</label>
|
||||
<label for="social_media_linkedin" class="label">LinkedIn
|
||||
<input type="url" id="social_media_linkedin" name="social_media_linkedin" class="input" placeholder="LinkedIn" value={$slct.event_presenter_obj.social_li_json.linkedin ?? ''} autocomplete="url" />
|
||||
</label>
|
||||
</fieldset>
|
||||
{/if}
|
||||
|
||||
<fieldset class="sponsorship__more_questions">
|
||||
<legend class="legend">More Questions</legend>
|
||||
|
||||
<label for="question" class="label">This is another question?
|
||||
<div class="label">
|
||||
<input
|
||||
type="text"
|
||||
class="input"
|
||||
id="question"
|
||||
name="question"
|
||||
placeholder="The answer!"
|
||||
value={$slct.event_presenter_obj.question ?? ''}
|
||||
autocomplete="off"
|
||||
readonly={$ae_loc.trusted_access}
|
||||
required
|
||||
>
|
||||
</div>
|
||||
</label>
|
||||
|
||||
<label class="label ae_label sponsorship__comments">Comments
|
||||
<textarea name="comments" id="comments" class="textarea ae_value sponsorship__comments tinymce_editor editor_basic" rows="5" cols="70" bind:value={$slct.event_presenter_obj.comments} placeholder="Any comments or questions about sponsorship."></textarea>
|
||||
</label>
|
||||
</fieldset>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
class="btn {parent.buttonPositive}"
|
||||
disabled={($ae_loc.mod.events.disable_submit__event_presenter_obj)}
|
||||
on:click={() => {
|
||||
console.log('*** Save more button clicked ***');
|
||||
// if (!confirm('Are you sure you want to save this sponsorship?')) {return false;}
|
||||
// handle_submit_form();
|
||||
// handle_submit_form;
|
||||
}}
|
||||
>
|
||||
<span class="fas fa-check mx-1"></span>
|
||||
Save
|
||||
</button>
|
||||
|
||||
</form>
|
||||
|
||||
{/if}
|
||||
|
||||
</svelte:fragment>
|
||||
</TabGroup>
|
||||
|
||||
<!-- </form> -->
|
||||
<!-- prettier-ignore -->
|
||||
<footer class="modal-footer {parent.regionFooter}">
|
||||
{#if $slct.event_presenter_id}
|
||||
<!-- {#if $ae_loc.administrator_access} -->
|
||||
<button
|
||||
on:click={() => {
|
||||
// if (!confirm('Are you sure you want to delete this sponsorship?')) {return false;}
|
||||
// handle_delete_event_presenter_obj({event_presenter_id: $slct.event_presenter_id, method: 'delete'});
|
||||
|
||||
// $slct.event_presenter_id = null;
|
||||
// $slct.event_presenter_obj = {};
|
||||
}}
|
||||
class="btn {parent.buttonNegative}"
|
||||
title="Delete record permanently"
|
||||
>
|
||||
<span class="fas fa-minus mx-1"></span> Delete
|
||||
</button>
|
||||
<!-- {/if} -->
|
||||
{/if}
|
||||
<button class="btn {parent.buttonNeutral}" on:click={parent.onClose}>
|
||||
<span class="fas fa-window-close mx-1"></span>
|
||||
{parent.buttonTextCancel}
|
||||
</button>
|
||||
<!-- <button class="btn {parent.buttonPositive}" on:click={handle_submit_form}>
|
||||
<span class="fas fa-check mx-1"></span>
|
||||
Submit Form
|
||||
</button> -->
|
||||
|
||||
<!-- {#if $slct.event_presenter_id}
|
||||
<button
|
||||
type="submit"
|
||||
class="btn {parent.buttonPositive}"
|
||||
disabled={($ae_loc.mod.events.disable_submit__event_presenter_obj)}
|
||||
on:click={() => {
|
||||
console.log('*** Save button clicked ***');
|
||||
if (!confirm('Are you sure you want to save this sponsorship?')) {return false;}
|
||||
handle_submit_form();
|
||||
}}
|
||||
>
|
||||
<span class="fas fa-check mx-1"></span>
|
||||
Save
|
||||
</button>
|
||||
{:else}
|
||||
<button
|
||||
type="submit"
|
||||
class="ae_btn btn_primary"
|
||||
disabled={($ae_loc.mod.events.disable_submit__event_presenter_obj)}
|
||||
on:click={() => {
|
||||
if (!confirm('Are you sure you want to create this sponsorship?')) {return false;}
|
||||
}}
|
||||
>
|
||||
<span class="fas fa-plus mx-1"></span>
|
||||
Save New Event
|
||||
</button>
|
||||
{/if} -->
|
||||
</footer>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@@ -46,7 +46,6 @@ onMount(() => {
|
||||
$slct.event_presenter_obj = ae_event_presenter_obj;
|
||||
console.log(`Selected Event Presenter ID: ${$slct.event_presenter_id}`);
|
||||
console.log(`Selected Event Presenter Object:`, $slct.event_presenter_obj);
|
||||
// $slct_trigger = 'load__event_presenter_obj';
|
||||
|
||||
$ae_loc.mod.events.show_main__options = true;
|
||||
$ae_loc.mod.events.show_edit__event_presenter_obj = false;
|
||||
@@ -116,7 +115,7 @@ onMount(() => {
|
||||
</tfoot>
|
||||
</table>
|
||||
{:else}
|
||||
<div>No event_presenters avalible to show at this time</div>
|
||||
<div>No event presenters avalible to show at this time</div>
|
||||
{/if}
|
||||
</section>
|
||||
|
||||
|
||||
@@ -0,0 +1,175 @@
|
||||
<script lang="ts">
|
||||
import type { SvelteComponent } from 'svelte';
|
||||
import { createEventDispatcher, onMount } from 'svelte';
|
||||
|
||||
// Stores
|
||||
// import { getModalStore } from '@skeletonlabs/skeleton';
|
||||
|
||||
import { ae_util } from '$lib/ae_utils';
|
||||
import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/ae_stores';
|
||||
|
||||
// Props
|
||||
/** Exposes parent props to this component. */
|
||||
export let parent: SvelteComponent;
|
||||
console.log(`Parent:`, parent);
|
||||
export let container_class_li = '';
|
||||
export let container_header_class_li = '';
|
||||
|
||||
// const dispatch = createEventDispatcher();
|
||||
|
||||
if ($slct.event_presenter_id) {
|
||||
console.log(`Presenter ID selected: ${$slct.event_presenter_id}`);
|
||||
console.log(`Presenter object selected:`, $slct.event_presenter_obj);
|
||||
|
||||
$slct_trigger = 'load__event_presenter_obj';
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
console.log('** Component Mounted: ** View Modal - Presenter Obj');
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<!-- @component This is the Presenters modal view form. -->
|
||||
|
||||
<section class="svelte_component ae_view_modal ae_obj__event_presenter {container_class_li}">
|
||||
|
||||
<header class={container_header_class_li}>{@html $slct.event_presenter_obj.full_name}</header>
|
||||
|
||||
<div class="event_presenter__content">
|
||||
<div
|
||||
class="event_presenter_biography biography"
|
||||
>
|
||||
<div class="ae_label event_presenter__biography">Biography:</div>
|
||||
<pre class="ae_value event_presenter__biography">{@html $slct.event_presenter_obj.biography ? $slct.event_presenter_obj.biography : '-- No Bio Given --'}</pre>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class:ae_d_none={!$slct.event_presenter_obj.phone_mobile}
|
||||
class="event_presenter_phone_mobile"
|
||||
>
|
||||
<span class="ae_label">Phone:</span>
|
||||
<span class="ae_value"><span class="fas fa-phone"></span> {$slct.event_presenter_obj.phone_mobile} — {$slct.event_presenter_obj.phone_mobile}</span>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<span class="ae_label">Approved:</span>
|
||||
$
|
||||
<span class="ae_value">
|
||||
{$slct.event_presenter_obj.approve ? 'Yes, marked as approved' : 'Not yet marked as approved'}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="ae_list event_presenter__guests">
|
||||
<h2>More Information</h2>
|
||||
|
||||
<div class="ae_warning">More info will go here</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<section class="card-footer ae_section ae_meta event_presenter__meta">
|
||||
<div class="ae_group">
|
||||
<span
|
||||
class="event_presenter__id"
|
||||
class:ae_d_none={!$ae_loc.administrator_access}>
|
||||
ID:
|
||||
{$slct.event_presenter_obj.event_presenter_id_random}
|
||||
</span>
|
||||
<span
|
||||
class="event_presenter__created_on"
|
||||
>
|
||||
Created on: {ae_util.iso_datetime_formatter($slct.event_presenter_obj.created_on, 'datetime_short')}
|
||||
</span>
|
||||
<span
|
||||
class="event_presenter__updated_on"
|
||||
class:ae_d_none={!$slct.event_presenter_obj.updated_on}
|
||||
>
|
||||
Updated on: {ae_util.iso_datetime_formatter($slct.event_presenter_obj.updated_on, 'datetime_short')}
|
||||
</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<footer class="modal-footer {parent.regionFooter}">
|
||||
{#if $ae_loc.trusted_access || $slct.event_presenter_obj.external_person_id === $ae_loc.novi_uuid || $slct.event_presenter_obj.contact_1_email === $ae_loc.novi_email}
|
||||
<div class="ae_options">
|
||||
<button
|
||||
on:click={() => {
|
||||
// $slct.event_presenter_id = $slct.event_presenter_obj.event_presenter_id_random;
|
||||
// $slct.event_presenter_obj = $slct.event_presenter_obj;
|
||||
|
||||
// const url = new URL(location);
|
||||
// url.searchParams.set('event_presenter_id', $slct.event_presenter_obj.event_presenter_id_random);
|
||||
// history.pushState({}, '', url);
|
||||
|
||||
// $ae_loc.mod.events.show_main__options = true;
|
||||
// $ae_loc.mod.events.show_list__event_presenterj_li = true;
|
||||
// $slct_trigger = 'load__event_presenter_obj';
|
||||
|
||||
$ae_loc.mod.events.show_view__event_presenter_obj = false;
|
||||
$ae_loc.mod.events.show_edit__event_presenter_obj = true;
|
||||
parent.onClose();
|
||||
$slct_trigger = 'show_edit__event_presenter_obj';
|
||||
}}
|
||||
class="btn variant-filled"
|
||||
title={`Edit presenter: ${$slct.event_presenter_obj.name}`}
|
||||
>
|
||||
<span class="fas fa-edit"></span> Edit
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
<button
|
||||
class="btn {parent.buttonNeutral}"
|
||||
on:click={() => {
|
||||
|
||||
let location = window.location.href;
|
||||
const url = new URL(location);
|
||||
url.searchParams.delete('event_presenter_id');
|
||||
history.pushState({}, '', url);
|
||||
|
||||
parent.onClose();
|
||||
}}
|
||||
>
|
||||
{parent.buttonTextCancel}
|
||||
</button>
|
||||
</footer>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
<style>
|
||||
.ae_label {
|
||||
font-size: smaller;
|
||||
}
|
||||
.ae_value {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.event_presenter__user_timezone {
|
||||
font-size: smaller;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.event_presenter_obj .ae_meta {
|
||||
flex-direction: column;
|
||||
/* justify-content: space-between; */
|
||||
}
|
||||
|
||||
.event_presenter_obj .ae_meta .ae_group {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.event_presenter_obj .ae_meta .ae_options {
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
/* a {
|
||||
color: #82B6E1;
|
||||
} */
|
||||
</style>
|
||||
Reference in New Issue
Block a user