Bug fixes. Style setting improvements.

This commit is contained in:
Scott Idem
2024-02-28 15:45:02 -05:00
parent 00a28588b7
commit 713fcb3c62
12 changed files with 438 additions and 122 deletions

View File

@@ -327,7 +327,7 @@ $: if ($slct_trigger == 'set_access_code_li' && !$ae_loc.ds['hub__page__access_c
<Element_access_type />
<Element_app_cfg />
<Element_app_cfg set_theme_mode={true} set_theme_name={true} />
<style lang="postcss">

View File

@@ -68,6 +68,19 @@ function handle_modal_close(response: boolean | undefined) {
const url = new URL(location);
url.searchParams.delete('event_presenter_id');
history.pushState({}, '', url);
let message = {'event_presenter_id': null};
window.parent.postMessage(message, "*");
// console.log('Message sent to parent (iframe):', message);
}
if ($slct_trigger == 'msg_parent' && $slct.event_id) {
console.log(`Message parent with event_id ${$slct.event_id}`);
$slct_trigger = null;
let message = {'event_id': $slct.event_id};
window.parent.postMessage(message, "*");
// console.log('Message sent to parent (iframe):', message);
}
// 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.
@@ -85,7 +98,12 @@ $: if ($slct_trigger == 'show_edit__event_presenter_obj' && $ae_loc.mod.events.s
// modalStore.clear();
modalStore.trigger(modal_edit__event_presenter_obj);
let message = {'event_presenter_id': $slct.event_presenter_id};
window.parent.postMessage(message, "*");
// console.log('Message sent to parent (iframe):', message);
}
$: 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;
@@ -97,8 +115,11 @@ $: if ($slct_trigger == 'show_view__event_presenter_obj' && $ae_loc.mod.events.s
// modalStore.clear();
modalStore.trigger(modal_view__event_presenter_obj);
}
let message = {'event_presenter_id': $slct.event_presenter_id};
window.parent.postMessage(message, "*");
// console.log('Message sent to parent (iframe):', message);
}
if ($slct.event_id && !$slct.event_presenter_obj_li) {
console.log(`No presenter list was found for Event ID: ${$slct.event_id}`);
@@ -116,6 +137,8 @@ onMount(() => {
$ae_loc.href_url = href_url;
// console.log(`$ae_loc.href_url = `, $ae_loc.href_url);
$slct_trigger = 'msg_parent';
});

View File

@@ -63,8 +63,21 @@ function handle_modal_close(response: boolean | undefined) {
let location = window.location.href;
const url = new URL(location);
url.searchParams.delete('event_presenter_id');
url.searchParams.delete('sponsorship_id');
history.pushState({}, '', url);
let message = {'sponsorship_id': null};
window.parent.postMessage(message, "*");
// console.log('Message sent to parent (iframe):', message);
}
if ($slct_trigger == 'msg_parent' && $slct.sponsorship_cfg_id) {
console.log(`Message parent with sponsorship_cfg_id ${$slct.sponsorship_cfg_id}`);
$slct_trigger = null
let message = {'sponsorship_cfg_id': $slct.sponsorship_cfg_id};
window.parent.postMessage(message, "*");
// console.log('Message sent to parent (iframe):', message);
}
// 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.
@@ -78,12 +91,17 @@ $: if ($slct_trigger == 'show_edit__sponsorship_obj' && $ae_loc.mod.sponsorships
console.log('Show Modal Edit');
$slct_trigger = null;
let location = window.location.href;
const url = new URL(location);
url.searchParams.set('sponsorship_id', $slct.sponsorship_id);
history.pushState({}, '', url);
if ($slct.sponsorship_id) {
let location = window.location.href;
const url = new URL(location);
url.searchParams.set('sponsorship_id', $slct.sponsorship_id);
history.pushState({}, '', url);
let message = {'sponsorship_id': $slct.sponsorship_id};
window.parent.postMessage(message, "*");
// console.log('Message sent to parent (iframe):', message);
}
// $ae_loc.mod.sponsorships.show_view__sponsorship_obj = false;
// modalStore.clear();
modalStore.trigger(modal_edit__sponsorship_obj);
}
@@ -96,13 +114,15 @@ $: if ($slct_trigger == 'show_view__sponsorship_obj' && $ae_loc.mod.sponsorships
url.searchParams.set('sponsorship_id', $slct.sponsorship_id);
history.pushState({}, '', url);
// $ae_loc.mod.sponsorships.show_edit__sponsorship_obj = false;
// modalStore.clear();
modalStore.trigger(modal_view__sponsorship_obj);
let message = {'sponsorship_id': $slct.sponsorship_id};
window.parent.postMessage(message, "*");
// console.log('Message sent to parent (iframe):', message);
}
let ae_account_obj_get_promise;
let ae_sponsorship_obj_li_get_promise;
onMount(() => {
@@ -115,6 +135,8 @@ onMount(() => {
$ae_loc.href_url = href_url;
// console.log(`$ae_loc.href_url = `, $ae_loc.href_url);
$slct_trigger = 'msg_parent';
});
@@ -124,45 +146,6 @@ if ($ae_loc.account_id) {
handle_load_ae_obj_li__sponsorship({account_id: $slct.account_id, try_cache: false});
}
// async function handle_load_ae_obj_id__account({account_id, try_cache=false}) {
// console.log('*** handle_load_ae_obj_id__account() ***');
// 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);
// }
// // 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);
// });
// return ae_account_obj_get_promise;
// }
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);
@@ -258,6 +241,8 @@ $: if ($slct_trigger == 'load__sponsorship_cfg_obj' && $slct.sponsorship_cfg_id)
$slct_trigger = null;
$ae_loc.mod.sponsorships.cfg_id = $slct.sponsorship_cfg_id;
handle_load_ae_obj_id__sponsorship_cfg({sponsorship_cfg_id: $slct.sponsorship_cfg_id, try_cache: false});
}
@@ -413,7 +398,7 @@ async function handle_load_ae_obj_id__sponsorship({sponsorship_id, try_cache=fal
</script>
<div class="container h-full mx-auto items-center">
<section class="container h-full mx-auto items-center">
<div class="space-y-10 flex flex-col">
<h1 class="h1 text-center">&AElig; - Sponsorships</h1>
@@ -431,7 +416,7 @@ async function handle_load_ae_obj_id__sponsorship({sponsorship_id, try_cache=fal
}}
>
<span class="fas fa-edit mx-1"></span>
Start/Edit Sponsorship
Start Sponsorship
</button>
<!-- <button
@@ -492,7 +477,7 @@ async function handle_load_ae_obj_id__sponsorship({sponsorship_id, try_cache=fal
</section> -->
</div>
</div>
</section>
<style lang="postcss">

View File

@@ -1,6 +1,7 @@
<script lang="ts">
import type { SvelteComponent } from 'svelte';
import { createEventDispatcher, onMount } from 'svelte';
import { fade } from 'svelte/transition';
// const dispatch = createEventDispatcher();
@@ -44,7 +45,8 @@ onMount(() => {
console.log('** Component Mounted: ** View Modal - Sponsorship Obj');
if ($slct.sponsorship_id && $ae_loc.href_url) {
$ae_loc.mod.sponsorships.link = `${$ae_loc.href_url}/load?ae_id=${$slct.sponsorship_id}`;
// $ae_loc.mod.sponsorships.link = `${$ae_loc.href_url}/load?sponsorship_id=${$slct.sponsorship_id}`;
$ae_loc.mod.sponsorships.link = `${$ae_loc.site_domain}/sponsorships/load?sponsorship_id=${$slct.sponsorship_id}`;
console.log('Sponsorship link:', $ae_loc.mod.sponsorships.link);
}
});
@@ -64,7 +66,7 @@ onMount(() => {
const cForm = 'border border-surface-500 p-4 space-y-4 rounded-container-token';
$ae_loc.mod.sponsorships.submit_status = null;
$ae_loc.mod.sponsorships.disable_submit__sponsorship_obj = false;
let placeholder_li: key_val = {
file_logo_primary: '-- No File Selected --',
@@ -85,7 +87,7 @@ if ($slct.sponsorship_id) {
} else {
$slct.sponsorship_id = null;
$slct.sponsorship_obj = {
sponsorship_cfg_id_random: $ae_loc.mod.sponsorships.sponsorship_cfg_id,
sponsorship_cfg_id_random: $ae_loc.mod.sponsorships.cfg_id,
name: null,
description: null,
@@ -130,6 +132,7 @@ async function handle_submit_form(event) {
console.log('*** handle_submit_form() ***');
$ae_loc.mod.sponsorships.disable_submit__sponsorship_obj = true;
$ae_loc.mod.sponsorships.submit_status = 'saving';
// Data in
let form_data = new FormData(event.target);
@@ -173,6 +176,10 @@ async function handle_submit_form(event) {
}
}
if (sponsorship_di.amount) {
sponsorship_do['amount'] = Number(sponsorship_di.amount)*100;
}
// Loop through possible guest list (up to 20) and add to the guest_li_json array.
let temp_guest_li = [];
@@ -235,7 +242,13 @@ async function handle_submit_form(event) {
obj_type: 'sponsorship',
data: sponsorship_do
});
console.log(ae_promises.create__sponsorship);
$slct.sponsorship_id = ae_promises.create__sponsorship.obj_id_random;
// $ae_loc.mod.sponsorships.link = `${$ae_loc.href_url}/load?sponsorship_id=${$slct.sponsorship_id}`;
$ae_loc.mod.sponsorships.link = `${$ae_loc.site_domain}/sponsorships/load?sponsorship_id=${$slct.sponsorship_id}`;
console.log('Sponsorship link:', $ae_loc.mod.sponsorships.link);
$ae_loc.mod.sponsorships.disable_submit__sponsorship_obj = false;
$ae_loc.mod.sponsorships.submit_status = 'created';
} else {
ae_promises.update__sponsorship_obj = await handle_update__sponsorship({
@@ -244,12 +257,16 @@ async function handle_submit_form(event) {
data: sponsorship_do
});
$ae_loc.mod.sponsorships.disable_submit__sponsorship_obj = false;
$ae_loc.mod.sponsorships.submit_status = 'updated';
}
}
async function handle_submit_form_files(event) {
console.log('*** handle_submit_form() ***');
$ae_loc.mod.sponsorships.disable_submit__sponsorship_obj = true;
$ae_loc.mod.sponsorships.submit_status = 'saving';
let sponsorship_do: key_val = {};
if ($slct.sponsorship_obj.logo_li_json) {
@@ -311,6 +328,7 @@ async function handle_submit_form_files(event) {
obj_id: $slct.sponsorship_id,
data: sponsorship_do
});
$ae_loc.mod.sponsorships.submit_status = 'updated';
// let sponsorship_do: key_val = {
// logo_li_json: {
@@ -387,26 +405,26 @@ async function handle_create__sponsorship({
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;
api_cfg: $ae_api,
obj_type: obj_type,
fields: data,
key: $ae_api.api_crud_super_key,
log_lvl: 2
})
.catch(function (error) {
console.log('Something went wrong.');
console.log(error);
.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;
return ae_promises.api_create__sponsorship_obj;
}
@@ -418,27 +436,27 @@ async function handle_update__sponsorship({
console.log('*** handle_update__sponsorship() ***');
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;
api_cfg: $ae_api,
obj_type: obj_type,
obj_id: obj_id,
fields: data,
key: $ae_api.api_crud_super_key,
log_lvl: 2
})
.catch(function (error) {
console.log('Something went wrong.');
console.log(error);
.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;
return ae_promises.update__sponsorship_obj;
}
</script>
@@ -831,7 +849,7 @@ async function handle_update__sponsorship({
id="amount"
name="amount"
placeholder="Amount"
value={$slct.sponsorship_obj.amount ?? ''}
value={$slct.sponsorship_obj.amount ? $slct.sponsorship_obj.amount/100 : ''}
autocomplete="off"
readonly={$slct.sponsorship_obj.paid}
required
@@ -983,9 +1001,6 @@ async function handle_update__sponsorship({
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>
@@ -1205,6 +1220,37 @@ async function handle_update__sponsorship({
</button>
<!-- {/if} -->
{/if}
{#if $ae_loc.mod.sponsorships.submit_status == 'saving'}
<div class="awaiting alert_msg_pulse" out:fade={{ duration: 2000 }}>Saving...</div>
{:else if $ae_loc.mod.sponsorships.submit_status == 'saved'}
<div class="awaiting" out:fade={{ duration: 2000 }}>Finished saving</div>
{:else}
<!-- <div class="awaiting" out:fade={{ duration: 2000 }}>Nothing here yet</div> -->
{/if}
{#await ae_promises.update__sponsorship_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__sponsorship_obj_result}
{#if update__sponsorship_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 class="btn variant-filled-primary" on:click={parent.onClose}>
<span class="fas fa-times mx-1"></span>
Close

View File

@@ -110,7 +110,7 @@ onMount(() => {
title="Not Paid"></span>
{/if}
{#if ae_sponsorship_obj.amount}
<span class="ae_value sponsorships__amount">${ae_sponsorship_obj.amount}</span>
<span class="ae_value sponsorships__amount">${ae_sponsorship_obj.amount/100}</span>
{/if}
</td>

View File

@@ -59,6 +59,16 @@ onMount(() => {
<span class="ae_value"><span class="fas fa-gem"></span> {$slct.sponsorship_obj.level_num} &mdash; {$slct.sponsorship_obj.level_str}</span>
</div>
<div
class:hidden={!$slct.sponsorship_obj.amount}
class="sponsorship_amount"
>
<span class="ae_label">Amount:</span>
<span class="ae_value">
${$slct.sponsorship_obj.amount/100}
</span>
</div>
<div>
<span class="ae_label">Paid:</span>
$
@@ -67,8 +77,6 @@ onMount(() => {
</span>
</div>
<div class="ae_list sponsorship__guests">
<h2>Guest List</h2>

View File

@@ -26,15 +26,39 @@ type key_val = {
};
// Editing
const modalComponentEditSponsorshipObj: ModalComponent = { ref: Edit_modal_sponsorship_obj };
const modalComponentEditSponsorshipObj: ModalComponent = { ref: Edit_modal_sponsorship_obj, props: {container_class_li: 'w-full p-4 space-y-4 card'} };
const modal_edit__sponsorship_obj: ModalSettings = {
type: 'component',
component: modalComponentEditSponsorshipObj,
title: 'Edit Your Sponsorship',
position: '', // default is "items-center"
response: (r: boolean | undefined) => handle_modal_close(r)
};
function handle_modal_close(response: boolean | undefined) {
console.log('Modal closed. Response:', response);
let location = window.location.href;
const url = new URL(location);
url.searchParams.delete('sponsorship_id');
history.pushState({}, '', url);
let message = {'sponsorship_id': null};
window.parent.postMessage(message, "*");
// console.log('Message sent to parent (iframe):', message);
}
if ($slct_trigger == 'msg_parent' && $slct.sponsorship_cfg_id) {
console.log(`Message parent with sponsorship_cfg_id ${$slct.sponsorship_cfg_id}`);
$slct_trigger = null
let message = {'sponsorship_cfg_id': $slct.sponsorship_cfg_id};
window.parent.postMessage(message, "*");
// console.log('Message sent to parent (iframe):', message);
}
$ae_loc.hostname = data.url.hostname;
$ae_loc.site_domain = data.url.origin;
@@ -112,7 +136,8 @@ async function handle_load_ae_obj_id__sponsorship_cfg({sponsorship_cfg_id, try_c
// Load the Sponsorship Obj with ID based on the URL param.
$slct.sponsorship_id = data.url.searchParams.get('ae_id');
// $slct.sponsorship_id = data.url.searchParams.get('ae_id');
$slct.sponsorship_id = data.url.searchParams.get('sponsorship_id');
$slct_trigger = 'load__sponsorship_obj';