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

This is the first commit of the day. It is probably the last. Lots of general prep for a demo.

Browse Source
This commit is contained in:
Scott Idem
2024-02-19 18:28:55 -05:00
parent 6f0680f282
commit 3403210efd
10 changed files with 851 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/routes/sponsorships/10_edit__sponsorship_obj.svelte → backups/src/routes/sponsorships/10_edit__sponsorship_obj.svelte
View File

@@ -1043,9 +1043,32 @@ async function handle_delete_sponsorship_obj({sponsorship_id, method='disable'})
<section class="ae_section ae_options ae_row ae_actions sponsorship__options sponsorship__actions"> <!-- BEGIN: section sponsorship__options -->
{#if $slct.sponsorship_id}
<button type="submit" class="ae_btn btn_primary" disabled={(disable_submit_btn)}><span class="fas fa-check"></span> Save</button>
<button
type="submit"
class="ae_btn btn_primary"
disabled={($ae_loc.sposnorships.disable_submit__sponsorship_obj)}
on:click={() => {
if (!confirm('Are you sure you want to save this sponsorship?')) {return false;}
// handle_submit_form();
}}
>
<span class="fas fa-check"></span> Save
</button>
{:else}
<button type="submit" class="ae_btn btn_primary" disabled={(disable_submit_btn)} onclick="return confirm('Are you sure you want to create this sponsorship?');"><span class="fas fa-plus"></span> Save New Event</button>
<button
type="submit"
class="ae_btn btn_primary"
disabled={($ae_loc.sposnorships.disable_submit__sponsorship_obj)}
on:click={() => {
if (!confirm('Are you sure you want to create this sponsorship?')) {return false;}
// handle_delete_archive_content_obj({archive_content_id: $slct.archive_content_id, hosted_file_id: $slct.archive_content_obj.hosted_file_id_random});
// $slct.archive_content_id = null;
// $slct.archive_content_obj = {};
}}
>
<span class="fas fa-plus"></span> Save New Sponsorship
</button>
{/if}
{#if $slct.sponsorship_id}

0
src/routes/sponsorships/[slug]/hold +page.ts → backups/src/routes/sponsorships/[slug]/hold +page.ts
View File

4
src/lib/ae_stores.ts
View File

@@ -45,9 +45,13 @@ export let ae_app_local_data_struct: key_val = {
'mod': { // module
'events': {},
'sponsorships': {
for_type: null,
for_id: null,
show_edit__sponsorship_obj: false,
show_list__sponsorship_obj_li: true,
show_view__sponsorship_obj: false,
disable_submit__sponsorship_obj: false,
},
'testing': {},
},

111
src/lib/ae_utils.ts
View File

@@ -126,7 +126,118 @@ export let iso_datetime_formatter = function iso_datetime_formatter(raw_datetime
}
/* This utility function looks for any form data with the prefixed name passed and returns a new object.
* This function is used heavily! Be very careful making changes!!!
* If rm_empty_id then it will remove/ignore fields matching. This helps with the API and new records/objects
* If rm_empty then it will remove/ignore fields matching. Sometimes this is needed.
* If trim_values then it will trim string values.
* If bool_tf_str then it will convert string values of true/false (case insensitive) to boolean values.
* Updated 2023-12-22
*/
export let extract_prefixed_form_data = function extract_prefixed_form_data({prefix=null, form_data={}, rm_empty_id=true, rm_empty=false, trim_values=false, bool_tf_str=false, log_lvl=0}) {
if (log_lvl) {
console.log('*** extract_prefixed_form_data() ***');
if (prefix) {
console.log(`Looking for prefixed fields: ${prefix}; Removing emptry ID fields: ${rm_empty_id}; Removing empty fields: ${rm_empty}; Trim string values: ${trim_values}; Convert true/false string values to boolean: ${bool_tf_str}`);
} else {
console.log(`No prefix set. Looking at all fields. Removing emptry ID fields: ${rm_empty_id}; Removing empty fields: ${rm_empty}; Trim string values: ${trim_values}; Convert true/false string values to boolean: ${bool_tf_str}`);
}
}
if (log_lvl > 1) {
console.log('Form Data:');
console.log(form_data);
}
// const data_obj: any = {}; // future TS
let data_obj = {};
for (let field of form_data) {
let [obj_prop_name, obj_prop_value] = field;
if (log_lvl > 1) {
console.log(`${obj_prop_name}: ${obj_prop_value} type=${typeof obj_prop_value}`);
}
// Trim string values if needed
if (trim_values && typeof obj_prop_value === 'string') {
if (log_lvl && obj_prop_value.trim() != obj_prop_value) {
console.log('Trimming string value!');
obj_prop_value = obj_prop_value.trim();
}
}
// Convert string to boolean if needed
if (bool_tf_str && typeof obj_prop_value === 'string') {
// console.log('Flag set for converting true/false string values to boolean!');
if (obj_prop_value.toLowerCase() === 'true') {
if (log_lvl) {
console.log('Converting string to boolean value: true');
}
obj_prop_value = true;
} else if (obj_prop_value.toLowerCase() === 'false') {
if (log_lvl) {
console.log('Converting string to boolean value: false');
}
obj_prop_value = false;
}
}
if (prefix && obj_prop_name.startsWith(prefix)) { // Prefix set
// if (obj_prop_name.startsWith(prefix)) {
obj_prop_name = obj_prop_name.replace(prefix, '');
if (log_lvl) {
console.log(`Checking: (${prefix})${obj_prop_name} value=${obj_prop_value}`);
}
if (rm_empty_id && obj_prop_name.endsWith('id_random') && !obj_prop_value) {
if (log_lvl) {
console.log(`Match but empty *_id_random. Ignoring/removing: ${obj_prop_name}`);
}
} else if (rm_empty && !obj_prop_value) {
if (log_lvl) {
console.log(`Match but empty. Ignoring/removing: ${obj_prop_name}`);
}
} else {
if (log_lvl) {
console.log(`Match: ${prefix})${obj_prop_name} value=${obj_prop_value}`);
}
data_obj[obj_prop_name] = obj_prop_value;
}
} else if (prefix && !obj_prop_name.startsWith(prefix)) { // Prefix set
if (log_lvl > 1) {
console.log('Did not start with prefix. Ignoring');
}
} else { // No prefix set
if (log_lvl) {
console.log(`Checking: ${obj_prop_name} value=${obj_prop_value}`);
}
if (rm_empty_id && obj_prop_name.endsWith('id_random') && !obj_prop_value) {
if (log_lvl > 1) {
console.log(`Match but empty *_id_random. Ignoring/removing: ${obj_prop_name}`);
}
} else if (rm_empty && !obj_prop_value) {
if (log_lvl > 1) {
console.log(`Match but empty. Ignoring/removing: ${obj_prop_name}`);
}
} else {
if (log_lvl > 1) {
console.log(`Match: ${obj_prop_name} value=${obj_prop_value}`);
}
data_obj[obj_prop_name] = obj_prop_value;
}
}
}
if (log_lvl > 1) {
console.log(data_obj);
}
return data_obj;
}
export let ae_util = {
iso_datetime_formatter: iso_datetime_formatter,
extract_prefixed_form_data: extract_prefixed_form_data,
};
// export default ae_util;

6
src/routes/+layout.svelte
View File

@@ -53,12 +53,10 @@ type key_val = {
import { api } from '$lib/api';
import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/ae_stores';
console.log(api);
// console.log(api);
console.log($ae_loc, $ae_sess, $ae_api);
import Edit_sponsorship_obj from './sponsorships/10_edit__sponsorship_obj.svelte';
// const ae_loc_test_store: Writable<string> = localStorageStore('ae_loc_test', {'test': 'This is a test'});
// // Subscribe to the store
// ae_loc_test_store.subscribe(() => {});
@@ -81,7 +79,7 @@ let get_ds_hub_site_footer_promise = handle_get_data_store_obj_w_code({code: 'hu
async function handle_get_data_store_obj_w_code({code, data_type='text'}) {
console.log('*** handle_get_data_store_obj_w_code() ***');
console.log(`*** handle_get_data_store_obj_w_code() *** code=${code}`);
// let get_item_result = window.localStorage.getItem(code);
// localStorage.getItem(code);

6
src/routes/sponsorships/+layout.ts
View File

@@ -1,8 +1,8 @@
/** @type {import('./$types').LayoutLoad} */
export function load({ params, url }) { // route
console.log(`page data - params:`, params);
// console.log(`page data - route:`, route);
console.log(`page data - url:`, url);
console.log(`Svelte Sponsorships layout.ts data = params:`, params);
// console.log(`Svelte Sponsorships layout.ts data = route:`, route);
console.log(`Svelte Sponsorships layout.ts data = url:`, url);
let data_struct = {
params: params,

151
src/routes/sponsorships/+page.svelte
View File

@@ -20,9 +20,6 @@ import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/ae_stores';
// import Edit_sponsorship_obj from './10_edit__sponsorship_obj.svelte';
import Edit_modal_sponsorship_obj from './10_edit_modal__sponsorship_obj.svelte';
import List_sponsorship_obj from './10_list__sponsorship_obj.svelte';
import View_sponsorship_obj from './10_view__sponsorship_obj.svelte';
import View_modal_sponsorship_obj from './10_view_modal__sponsorship_obj.svelte';
const modalComponentViewSponsorshipObj: ModalComponent = { ref: View_modal_sponsorship_obj };
@@ -43,7 +40,7 @@ type key_val = {
};
export let data;
console.log(`page data:`, data);
// console.log(`Svelte Sponsorships page data:`, data);
let ae_account_obj_get_promise;
let ae_sponsorship_obj_li_get_promise;
@@ -59,51 +56,51 @@ onMount(() => {
if ($ae_loc.account_id) {
$slct.account_id = $ae_loc.account_id;
// handle_load_ae_account_id_obj({account_id: $slct.account_id, try_cache: false});
handle_load_ae_sponsorship_obj_li({account_id: $slct.account_id, try_cache: false});
// handle_load_ae_obj_id__account({account_id: $slct.account_id, try_cache: false});
handle_load_ae_obj_li__sponsorship({account_id: $slct.account_id, try_cache: false});
}
async function handle_load_ae_account_id_obj({account_id, try_cache=false}) {
console.log('*** handle_load_account_id_obj() ***');
// async function handle_load_ae_obj_id__account({account_id, try_cache=false}) {
// console.log('*** handle_load_ae_obj_id__account() ***');
let params = {};
// let params = {};
$ae_loc.hub.account_id_qry_status = 'loading';
ae_account_obj_get_promise = api.get_ae_obj_id_crud({
api_cfg: $ae_api,
obj_type: 'account',
obj_id: account_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 (account_obj_get_result) {
if (account_obj_get_result) {
$slct.account_obj = account_obj_get_result;
console.log(`account object:`, $slct.account_obj);
}
// $ae_loc.hub.account_id_qry_status = 'loading';
// ae_account_obj_get_promise = api.get_ae_obj_id_crud({
// api_cfg: $ae_api,
// obj_type: 'account',
// obj_id: account_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 (account_obj_get_result) {
// if (account_obj_get_result) {
// $slct.account_obj = account_obj_get_result;
// console.log(`account object:`, $slct.account_obj);
// }
// Auto show the selected account ID
// Is this pushState needed here?
// Set the URL param "account_id" to the current account ID.
const url = new URL(location);
url.searchParams.set('account_id', $slct.account_id);
history.pushState({}, '', url);
// // Auto show the selected account ID
// // Is this pushState needed here?
// // Set the URL param "account_id" to the current account ID.
// const url = new URL(location);
// url.searchParams.set('account_id', $slct.account_id);
// history.pushState({}, '', url);
// Is this postMessage needed here?
let message = {'account_id': $slct.account_id};
window.parent.postMessage(message, "*");
})
.catch(function (error) {
console.log('No results returned or failed.', error);
});
// // Is this postMessage needed here?
// let message = {'account_id': $slct.account_id};
// window.parent.postMessage(message, "*");
// })
// .catch(function (error) {
// console.log('No results returned or failed.', error);
// });
return ae_account_obj_get_promise;
}
// return ae_account_obj_get_promise;
// }
async function handle_load_ae_sponsorship_obj_li({account_id, try_cache=true}) {
console.log('*** handle_load_ae_sponsorship_obj_li() ***');
async function handle_load_ae_obj_li__sponsorship({account_id, try_cache=true}) {
console.log('*** handle_load_ae_obj_li__sponsorship() ***');
// console.log($ae_loc.mod.sponsorships);
// let fulltext_search_qry_str = ($ae_loc.mod.sponsorships && $ae_loc.mod.sponsorships.fulltext_search_qry_str ? $ae_loc.mod.sponsorships.fulltext_search_qry_str : '');
@@ -182,18 +179,76 @@ async function handle_load_ae_sponsorship_obj_li({account_id, try_cache=true}) {
return ae_sponsorship_obj_li_get_promise;
}
$: if ($slct_trigger == 'load__sponsorship_obj' && $slct.sponsorship_id) {
console.log('Selected Sponsorship ID:', $slct.sponsorship_id);
console.log('Selected Sponsorship Object:', $slct.sponsorship_obj);
// Load the Sponsorship Cfg Obj with ID based on the URL param.
$slct.sponsorship_cfg_id = data.url.searchParams.get('sponsorship_cfg_id');
$slct_trigger = 'load__sponsorship_cfg_obj';
$: if ($slct_trigger == 'load__sponsorship_cfg_obj' && $slct.sponsorship_cfg_id) {
console.log('Selected Sponsorship Cfg ID:', $slct.sponsorship_cfg_id);
$slct_trigger = null;
handle_load_ae_sponsorship_id_obj({sponsorship_id: $slct.sponsorship_id, try_cache: false});
handle_load_ae_obj_id__sponsorship_cfg({sponsorship_cfg_id: $slct.sponsorship_cfg_id, try_cache: false});
}
let ae_sponsorship_cfg_obj_get_promise;
async function handle_load_ae_obj_id__sponsorship_cfg({sponsorship_cfg_id, try_cache=false}) {
console.log(`*** handle_load_ae_obj_id__sponsorship_cfg() *** sponsorship_cfg_id=${sponsorship_cfg_id}`);
let params = {};
// $ae_loc.hub.sponsorship_cfg_id_qry_status = 'loading';
ae_sponsorship_cfg_obj_get_promise = api.get_ae_obj_id_crud({
api_cfg: $ae_api,
obj_type: 'sponsorship_cfg',
obj_id: sponsorship_cfg_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: 1
})
.then(function (sponsorship_cfg_obj_get_result) {
if (sponsorship_cfg_obj_get_result) {
$slct.sponsorship_cfg_obj = sponsorship_cfg_obj_get_result;
console.log(`sponsorship object:`, $slct.sponsorship_cfg_obj);
}
// Auto show the selected sponsorship ID
// Is this pushState needed here?
// Set the URL param "sponsorship_cfg_id" to the current sponsorship ID.
// const url = new URL(location);
// url.searchParams.set('sponsorship_cfg_id', $slct.sponsorship_cfg_id);
// history.pushState({}, '', url);
// Is this postMessage needed here?
// let message = {'sponsorship_cfg_id': $slct.sponsorship_cfg_id};
// window.parent.postMessage(message, "*");
// modalStore.trigger(modal_view__sponsorship_cfg_obj);
})
.catch(function (error) {
console.log('No results returned or failed.', error);
});
return ae_sponsorship_cfg_obj_get_promise;
}
// Load the Sponsorship Obj with ID based on the URL param.
$: if ($slct_trigger == 'load__sponsorship_obj' && $slct.sponsorship_id) {
console.log('Selected Sponsorship ID:', $slct.sponsorship_id);
$slct_trigger = null;
handle_load_ae_obj_id__sponsorship({sponsorship_id: $slct.sponsorship_id, try_cache: false});
}
let ae_sponsorship_obj_get_promise;
async function handle_load_ae_sponsorship_id_obj({sponsorship_id, try_cache=false}) {
console.log('*** handle_load_sponsorship_id_obj() ***');
async function handle_load_ae_obj_id__sponsorship({sponsorship_id, try_cache=false}) {
console.log(`*** handle_load_ae_obj_id__sponsorship() *** sponsorship_id=${sponsorship_id}`);
let params = {};
@@ -205,7 +260,7 @@ async function handle_load_ae_sponsorship_id_obj({sponsorship_id, try_cache=fals
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: 2
log_lvl: 1
})
.then(function (sponsorship_obj_get_result) {
if (sponsorship_obj_get_result) {

567
src/routes/sponsorships/10_edit_modal__sponsorship_obj.svelte
View File

@@ -1,6 +1,8 @@
<script lang="ts">
import type { SvelteComponent } from 'svelte';
import { createEventDispatcher } from 'svelte';
const dispatch = createEventDispatcher();
import { localStorageStore } from '@skeletonlabs/skeleton';
import type { Writable } from 'svelte/store';
@@ -8,7 +10,7 @@ const store_current_tab: Writable<string> = localStorageStore('store_current_tab
// console.log(`store_current_tab:`, $store_current_tab);
// Stores
import { getModalStore, TabGroup, Tab, TabAnchor } from '@skeletonlabs/skeleton';
import { getModalStore, FileDropzone, TabGroup, Tab, TabAnchor } from '@skeletonlabs/skeleton';
// Props
/** Exposes parent props to this component. */
@@ -17,10 +19,13 @@ export let parent: SvelteComponent;
const modalStore = getModalStore();
// import { ae_util } from '$lib/ae_utils';
// import { api } from '$lib/api';
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';
type key_val = {
[key: string]: any;
};
// Form Data
@@ -49,6 +54,309 @@ const cForm = 'border border-surface-500 p-4 space-y-4 rounded-container-token';
// let tab_set: string = 'start';
let tab_set = $store_current_tab;
$ae_loc.mod.sponsorships.disable_submit__sponsorship_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: key_val = {};
// let ae_promises.api_create__sponsorship_obj: Promise<any>;
$: if ($slct.sponsorship_obj) {
// Logo related
if ($slct.sponsorship_obj.logo_li_json) {
if ($slct.sponsorship_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.sponsorship_obj.logo_li_json.primary.hosted_file_id_random}">${$slct.sponsorship_obj.logo_li_json.primary.filename}`;
}
if ($slct.sponsorship_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.sponsorship_obj.logo_li_json.secondary.hosted_file_id_random}">${$slct.sponsorship_obj.logo_li_json.secondary.filename}`;
}
}
// Other media files related
if ($slct.sponsorship_obj.media_li_json) {
if ($slct.sponsorship_obj.media_li_json.promo_video && $slct.sponsorship_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.sponsorship_obj.media_li_json.promo_video.hosted_file_id_random}" controls></video>${$slct.sponsorship_obj.media_li_json.promo_video.filename}`;
}
}
}
async function handle_submit_form(event) {
console.log('*** handle_submit_form() ***');
$ae_loc.mod.sponsorships.disable_submit__sponsorship_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.sponsorship_id) {
sponsorship_do['account_id_random'] = $ae_loc.account_id;
sponsorship_do['sponsorship_cfg_id_random'] = $slct.sponsorship_cfg_id;
// sponsorship_do['enable'] = true;
}
sponsorship_do['name'] = sponsorship_di.name;
// if (tinyMCE.get('description')) {
// sponsorship_do['description'] = tinyMCE.get('description').getContent();
// } else {
sponsorship_do['description'] = sponsorship_di.description;
// }
if (sponsorship_di.level_num) {
sponsorship_do['level_num'] = Number(sponsorship_di.level_num);
if (sponsorship_do['level_num'] == 1) {
sponsorship_do['level_str'] = 'Lowest Level Sponsorship ($5,000)';
} else if (sponsorship_do['level_num'] == 2) {
sponsorship_do['level_str'] = 'Mid-level Sponsor ($7,500)';
} else if (sponsorship_do['level_num'] == 3) {
sponsorship_do['level_str'] = 'High Level Sponsor ($15,000)';
}
}
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.sponsorship_id) {
ae_promises.create__sponsorship = await handle_create__sponsorship({
obj_type: 'sponsorship',
data: sponsorship_do
});
} else {
ae_promises.update__sponsorship_obj = await handle_update__sponsorship({
obj_type: 'sponsorship',
obj_id: $slct.sponsorship_id,
data: sponsorship_do
});
}
}
async function handle_submit_form_files(event) {
console.log('*** handle_submit_form() ***');
let sponsorship_do: key_val = {};
if ($slct.sponsorship_obj.logo_li_json) {
console.log('The logo_li_json was found.');
sponsorship_do.logo_li_json = $slct.sponsorship_obj.logo_li_json;
} else {
console.log('The logo_li_json was not found or is empty.');
sponsorship_do.logo_li_json = {};
}
if ($slct.sponsorship_obj.media_li_json) {
console.log('The media_li_json was found.');
sponsorship_do.media_li_json = $slct.sponsorship_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__sponsorship_obj = await handle_update__sponsorship({
obj_type: 'sponsorship',
obj_id: $slct.sponsorship_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_sponsorship_obj_promise = await api.update_ae_obj_id_crud({
// api_cfg: $ae_api,
// obj_type: 'sponsorship',
// obj_id: $slct.sponsorship_id,
// fields: sponsorship_do,
// key: $ae_api.api_crud_super_key,
// log_lvl: 1
// })
// .then(function (sponsorship_obj_update_result) {
// if (!sponsorship_obj_update_result) {
// console.log('The result was null or false.');
// return false;
// }
// return sponsorship_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.sponsorship_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__sponsorship_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__sponsorship_obj;
}
async function handle_update__sponsorship({
obj_type,
obj_id,
data
}) {
console.log('*** handle_update__sponsorship() ***');
api_ae_promises.update__sponsorship_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__sponsorship_obj;
}
</script>
<!-- @component This is the Sponsorships modal edit form. -->
@@ -57,7 +365,6 @@ let tab_set = $store_current_tab;
<div class="modal-example-form {cBase}">
<header class={cHeader}>{$modalStore[0].title ?? '-- No Title --'}</header>
<form class="modal-form {cForm}">
<TabGroup
justify="justify-center"
active="variant-ghost-primary"
@@ -71,15 +378,15 @@ let tab_set = $store_current_tab;
<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'}>
<Tab bind:group={$store_current_tab} name="tab_files" value={'files'} disabled={!$slct.sponsorship_obj.sponsorship_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_gala_guests" value={'gala_guests'}>
<Tab bind:group={$store_current_tab} name="tab_gala_guests" value={'gala_guests'} disabled={!$slct.sponsorship_obj.sponsorship_id_random}>
<svelte:fragment slot="lead"><span class="fas fa-users"></span></svelte:fragment>
Gala Guests
</Tab>
<Tab bind:group={$store_current_tab} name="tab_options" value={'options'}>
<Tab bind:group={$store_current_tab} name="tab_options" value={'options'} disabled={!$slct.sponsorship_obj.sponsorship_id_random}>
<svelte:fragment slot="lead"><span class="fas fa-info"></span></svelte:fragment>
More
</Tab>
@@ -87,6 +394,10 @@ let tab_set = $store_current_tab;
<!-- Tab Panels --->
<svelte:fragment slot="panel">
{#if $store_current_tab === 'start'}
<form
class="modal-form {cForm}"
on:submit|preventDefault={handle_submit_form}
>
<section class="ae_section sponsorship__contacts border border-gray-500/20 p-4">
<fieldset class="sponsorship__poc_person flex flex-wrap gap-4">
<legend class="legend">Point of Contact</legend>
@@ -94,7 +405,7 @@ let tab_set = $store_current_tab;
<label for="poc_full_name">Full name
<div class="input-group grid-cols-[auto_1fr_auto]">
<div class="input-group-shim">
{#if !$ae_loc.trusted_access}
{#if !$ae_loc.trusted_access && $slct.sponsorship_obj.sposorship_id_random}
<span class="fas fa-lock" title="Field is locked"></span>
{:else}
<span class="fas fa-unlock" title="Field is unlocked"></span>
@@ -107,7 +418,7 @@ let tab_set = $store_current_tab;
placeholder="Full name"
value={($slct.sponsorship_obj.poc_json && $slct.sponsorship_obj.poc_json.full_name ? $slct.sponsorship_obj.poc_json.full_name : '')}
autocomplete="name"
readonly={!$ae_loc.trusted_access}
readonly={!$ae_loc.trusted_access && $slct.sponsorship_obj.sposorship_id_random}
required
>
</div>
@@ -115,7 +426,7 @@ let tab_set = $store_current_tab;
<label for="poc_email">Email
<div class="input-group grid-cols-[auto_1fr_auto]">
<div class="input-group-shim">
{#if !$ae_loc.trusted_access}
{#if !$ae_loc.trusted_access && $slct.sponsorship_obj.sposorship_id_random}
<span class="fas fa-lock" title="Field is locked"></span>
{:else}
<span class="fas fa-unlock" title="Field is unlocked"></span>
@@ -129,7 +440,7 @@ let tab_set = $store_current_tab;
placeholder="Email"
value={($slct.sponsorship_obj.poc_json && $slct.sponsorship_obj.poc_json.email ? $slct.sponsorship_obj.poc_json.email : '')}
autocomplete="email"
readonly={!$ae_loc.trusted_access}
readonly={!$ae_loc.trusted_access && $slct.sponsorship_obj.sposorship_id_random}
required
>
</div>
@@ -172,23 +483,150 @@ let tab_set = $store_current_tab;
<li><strong>High Level</strong> - Please join the gala along with 10 guests. You will also be able to upload a promo video that will play at the end of the gala.</li>
</ul>
</label>
<label for="amount">Additional amount?
<div class="input-group grid-cols-[auto_1fr_auto]">
<div class="input-group-shim">
<span>$</span>
</div>
<input
type="number"
class="input"
id="amount"
name="amount"
placeholder="Amount"
value={$slct.sponsorship_obj.amount ?? ''}
autocomplete="off"
readonly={$ae_loc.trusted_access}
required
>
</div>
</label>
</section>
<button
type="submit"
class="btn {parent.buttonPositive}"
disabled={($ae_loc.mod.sponsorships.disable_submit__sponsorship_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 === '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)
<div><input type="file" id="file_logo_primary" name="file_logo_primary" class="m-4" /></div>
<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>
<hr class="border border-gray-500/20 my-4" />
<h2>Promo video</h2>
<p>Add your promotional video here. This video will play at the end of the gala.</p>
<label for="file_promo_video">Promotional video (mp4, mpv, webm, mkv)
<div><input type="file" id="file_promo_video" name="file_promo_video" class="m-4" /></div>
<label for="file_media_promo_video">
Promotional video (mp4, mpv, webm, mkv)
<FileDropzone
id="file_media_promo_video"
name="file_media_promo_video"
padding="p-1"
accept="video/*"
on:change={(e) => {
console.log('*** FileDropzone change event ***', e);
if (e.target.files.length) {
placeholder_li.file_media_promo_video = `Ready to upload: ${e.target.files[0].name}`;
} else {
placeholder_li.file_media_promo_video = '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_media_promo_video}
</label>
</section>
<button
type="submit"
class="btn {parent.buttonPositive}"
disabled={($ae_loc.mod.sponsorships.disable_submit__sponsorship_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 === 'gala_guests'}
<section>
@@ -229,34 +667,75 @@ let tab_set = $store_current_tab;
</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) -->
<fieldset class="sponsorship__social_media">
<legend class="legend">Social Media</legend>
<section>
<label for="amount">Additional amount?
<div class="input-group grid-cols-[auto_1fr_auto]">
<div class="input-group-shim">
<span>$</span>
</div>
<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.sponsorship_obj.social_media_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.sponsorship_obj.social_media_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.sponsorship_obj.social_media_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.sponsorship_obj.social_media_linkedin ?? ''} autocomplete="url" />
</label>
</fieldset>
<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="number"
type="text"
class="input"
id="amount"
name="amount"
placeholder="Amount"
value={$slct.sponsorship_obj.amount ?? ''}
id="question"
name="question"
placeholder="The answer!"
value={$slct.sponsorship_obj.question ?? ''}
autocomplete="off"
readonly={$ae_loc.trusted_access}
required
>
</div>
</label>
</section>
<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.sponsorship_obj.comments} placeholder="Any comments or questions about sponsorship."></textarea>
</label>
</fieldset>
<button
type="submit"
class="btn {parent.buttonPositive}"
disabled={($ae_loc.mod.sponsorships.disable_submit__sponsorship_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>
{/if}
</svelte:fragment>
</TabGroup>
</form>
<!-- </form> -->
<!-- prettier-ignore -->
<footer class="modal-footer {parent.regionFooter}">
{#if $slct.sponsorship_id}
@@ -280,10 +759,38 @@ let tab_set = $store_current_tab;
<span class="fas fa-window-close mx-1"></span>
{parent.buttonTextCancel}
</button>
<button class="btn {parent.buttonPositive}" on:click={onFormSubmit}>
<!-- <button class="btn {parent.buttonPositive}" on:click={handle_submit_form}>
<span class="fas fa-check mx-1"></span>
Submit Form
</button>
</button> -->
<!-- {#if $slct.sponsorship_id}
<button
type="submit"
class="btn {parent.buttonPositive}"
disabled={($ae_loc.mod.sponsorships.disable_submit__sponsorship_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.sponsorships.disable_submit__sponsorship_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}

73
src/routes/sponsorships/[slug]/+page.svelte
View File

@@ -1,6 +1,6 @@
<script lang="ts">
export let data;
console.log(`page data:`, data);
console.log(`Svelte page data:`, data);
import { onMount } from 'svelte';
@@ -45,29 +45,83 @@ onMount(() => {
// console.log(`$ae_loc.href_url = `, $ae_loc.href_url);
// $ae_loc.mod.sponsorships.show_edit__sponsorship_obj = true;
// Load the Sponsorship Cfg Obj with ID based on the URL param.
$slct.sponsorship_cfg_id = data.url.searchParams.get('sponsorship_cfg_id');
$slct_trigger = 'load__sponsorship_cfg_obj';
$: if ($slct_trigger == 'load__sponsorship_cfg_obj' && $slct.sponsorship_cfg_id) {
console.log('Selected Sponsorship Cfg ID:', $slct.sponsorship_cfg_id);
$slct_trigger = null;
handle_load_ae_obj_id__sponsorship_cfg({sponsorship_cfg_id: $slct.sponsorship_cfg_id, try_cache: false});
}
let ae_sponsorship_cfg_obj_get_promise;
async function handle_load_ae_obj_id__sponsorship_cfg({sponsorship_cfg_id, try_cache=false}) {
console.log(`*** handle_load_ae_obj_id__sponsorship_cfg() *** sponsorship_cfg_id=${sponsorship_cfg_id}`);
let params = {};
// $ae_loc.hub.sponsorship_cfg_id_qry_status = 'loading';
ae_sponsorship_cfg_obj_get_promise = api.get_ae_obj_id_crud({
api_cfg: $ae_api,
obj_type: 'sponsorship_cfg',
obj_id: sponsorship_cfg_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 (sponsorship_cfg_obj_get_result) {
if (sponsorship_cfg_obj_get_result) {
$slct.sponsorship_cfg_obj = sponsorship_cfg_obj_get_result;
console.log(`sponsorship object:`, $slct.sponsorship_cfg_obj);
}
// Auto show the selected sponsorship ID
// Is this pushState needed here?
// Set the URL param "sponsorship_cfg_id" to the current sponsorship ID.
// const url = new URL(location);
// url.searchParams.set('sponsorship_cfg_id', $slct.sponsorship_cfg_id);
// history.pushState({}, '', url);
// Is this postMessage needed here?
// let message = {'sponsorship_cfg_id': $slct.sponsorship_cfg_id};
// window.parent.postMessage(message, "*");
// modalStore.trigger(modal_view__sponsorship_cfg_obj);
})
.catch(function (error) {
console.log('No results returned or failed.', error);
});
return ae_sponsorship_cfg_obj_get_promise;
}
// Load the Sponsorship Obj with ID based on the URL param.
$slct.sponsorship_id = data.url.searchParams.get('ae_id');
console.log(data.url.searchParams.get('ae_id'));
console.log(`Selected Sponsorship ID:`, $slct.sponsorship_id);
$slct_trigger = 'load__sponsorship_obj';
$: if ($slct_trigger == 'load__sponsorship_obj' && $slct.sponsorship_id) {
console.log('Selected Sponsorship ID:', $slct.sponsorship_id);
console.log('Selected Sponsorship Object:', $slct.sponsorship_obj);
$slct_trigger = null;
handle_load_ae_sponsorship_id_obj({sponsorship_id: $slct.sponsorship_id, try_cache: false});
handle_load_ae_obj_id__sponsorship({sponsorship_id: $slct.sponsorship_id, try_cache: false});
modalStore.trigger(modal_edit__sponsorship_obj);
}
let ae_sponsorship_obj_get_promise;
async function handle_load_ae_sponsorship_id_obj({sponsorship_id, try_cache=false}) {
console.log('*** handle_load_sponsorship_id_obj() ***');
async function handle_load_ae_obj_id__sponsorship({sponsorship_id, try_cache=false}) {
console.log(`*** handle_load_ae_obj_id__sponsorship() *** sponsorship_id=${sponsorship_id}`);
let params = {};
@@ -79,7 +133,7 @@ async function handle_load_ae_sponsorship_id_obj({sponsorship_id, try_cache=fals
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: 2
log_lvl: 1
})
.then(function (sponsorship_obj_get_result) {
if (sponsorship_obj_get_result) {
@@ -106,7 +160,6 @@ async function handle_load_ae_sponsorship_id_obj({sponsorship_id, try_cache=fals
}
</script>

6
src/routes/testing/+page.svelte
View File

@@ -26,12 +26,12 @@ onMount(() => {
if ($ae_loc.account_id) {
$slct.account_id = $ae_loc.account_id;
// handle_load_ae_account_id_obj({account_id: $slct.account_id, try_cache: false});
// handle_load_ae_account_obj_id({account_id: $slct.account_id, try_cache: false});
handle_load_ae_sponsorship_obj_li({account_id: $slct.account_id, try_cache: false});
}
async function handle_load_ae_account_id_obj({account_id, try_cache=false}) {
console.log('*** handle_load_account_id_obj() ***');
async function handle_load_ae_account_obj_id({account_id, try_cache=false}) {
console.log('*** handle_load_account_obj_id() ***');
let params = {};