A lot of little changes everywhere. Sorry...

This commit is contained in:
Scott Idem
2024-03-02 20:09:25 -05:00
parent 0dbf869d5d
commit 4db9e68543
12 changed files with 434 additions and 166 deletions

View File

@@ -1,11 +1,11 @@
<script lang="ts">
import { onMount } from 'svelte';
export let data;
console.log(`Svelte Sponsorships [slug] page data:`, data);
console.log(`ae_ Svelte Sponsorships [slug] +page data:`, data);
import { onMount } from 'svelte';
// https://github.com/skeletonlabs/skeleton/blob/master/packages/skeleton/src/lib/utilities/Modal/types.ts
// To retrieve the store, getModalStore must be invoked at the top level of your component!
import { getDrawerStore, getModalStore } from '@skeletonlabs/skeleton';
import type {
@@ -17,13 +17,12 @@ import type {
const modalStore = getModalStore();
import { api } from '$lib/api';
import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/ae_stores';
import { ae_loc, ae_sess, ae_api, ae_trig, slct, slct_trigger } from '$lib/ae_stores';
import { ae_util } from '$lib/ae_utils';
import type { key_val } from '$lib/ae_stores';
import Edit_modal_sponsorship_obj from '../10_edit_modal__sponsorship_obj.svelte';
type key_val = {
[key: string]: any;
};
// Editing
const modalComponentEditSponsorshipObj: ModalComponent = { ref: Edit_modal_sponsorship_obj, props: {container_class_li: 'w-full p-4 space-y-4 card'} };
@@ -37,6 +36,8 @@ const modal_edit__sponsorship_obj: ModalSettings = {
response: (r: boolean | undefined) => handle_modal_close(r)
};
// This should be merged with the ae_util.handle_url_and_message() function.
function handle_modal_close(response: boolean | undefined) {
console.log('Modal closed. Response:', response);
@@ -59,9 +60,14 @@ if ($slct_trigger == 'msg_parent' && $slct.sponsorship_cfg_id) {
// console.log('Message sent to parent (iframe):', message);
}
$ae_loc.hostname = data.url.hostname;
$ae_loc.site_domain = data.url.origin;
// 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 a modal.
$ae_loc.mod.sponsorships.show_edit__sponsorship_obj = false;
$ae_loc.mod.sponsorships.show_view__sponsorship_obj = false;
onMount(() => {
console.log('Sponsorships [New/Edit]: +page.svelte');
@@ -69,10 +75,22 @@ onMount(() => {
// console.log(`$ae_loc = `, $ae_loc);
let url = window.location.href;
console.log(url);
// console.log(url);
$ae_loc.href_url = url;
console.log(`$ae_loc.href_url = `, $ae_loc.href_url);
// console.log(`$ae_loc.href_url = `, $ae_loc.href_url);
$slct_trigger = null;
ae_util.handle_url_and_message('sponsorship_id', $slct.sponsorship_id);
if ($slct.sponsorship_id) {
console.log(`Got an ID. Let's show the modal!`);
// handle_url_and_message('sponsorship_id', $slct.sponsorship_id);
modalStore.trigger(modal_edit__sponsorship_obj);
} else {
// handle_url_and_message('sponsorship_id', null);
}
});
// console.log(`$ae_loc = `, $ae_loc);
// $ae_loc.href_url = url;
@@ -83,6 +101,7 @@ onMount(() => {
$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);
@@ -138,7 +157,13 @@ 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('sponsorship_id');
$slct_trigger = 'load__sponsorship_obj';
if ($slct.sponsorship_id) {
console.log('Selected Sponsorship ID:', $slct.sponsorship_id);
$slct_trigger = 'load__sponsorship_obj';
// $ae_loc.mod.sponsorships.show_edit__sponsorship_obj = true;
// $slct_trigger = 'show_edit__sponsorship_obj';
}
$: if ($slct_trigger == 'load__sponsorship_obj' && $slct.sponsorship_id) {
@@ -148,7 +173,8 @@ $: if ($slct_trigger == 'load__sponsorship_obj' && $slct.sponsorship_id) {
handle_load_ae_obj_id__sponsorship({sponsorship_id: $slct.sponsorship_id, try_cache: false});
modalStore.trigger(modal_edit__sponsorship_obj);
// modalStore.trigger(modal_edit__sponsorship_obj);
// $slct_trigger = 'show_edit__sponsorship_obj';
}
let ae_sponsorship_obj_get_promise;
@@ -192,42 +218,123 @@ async function handle_load_ae_obj_id__sponsorship({sponsorship_id, try_cache=fal
return ae_sponsorship_obj_get_promise;
}
let testing = false;
// $: if ($slct_trigger == 'show_edit__sponsorship_obj' && $ae_loc.mod.sponsorships.show_edit__sponsorship_obj) {
$: if (testing) {
// && $ae_loc.mod.sponsorships.show_edit__sponsorship_obj
// $: if ($slct_trigger == 'show_edit__sponsorship_obj') {
console.log('Show Modal Edit');
$slct_trigger = null;
testing = false;
// $ae_trig.m_sponsorships__show_modal_edit = false;
// 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);
// }
// modalStore.clear();
modalStore.trigger(modal_edit__sponsorship_obj);
}
// KEEP and MOVE: This is the original function.
// The name should be something like "example_id".
function handle_url_and_message(name: string, value: null|string) {
console.log(`*** handle_url_and_message() *** name=${name} value=${value}`);
if (value) {
let location = window.location.href;
const url = new URL(location);
url.searchParams.set(name, value);
history.pushState({}, '', url);
let message = {name: value};
window.parent.postMessage(message, "*");
} else {
let location = window.location.href;
const url = new URL(location);
url.searchParams.delete(name);
history.pushState({}, '', url);
let message = {name: null};
window.parent.postMessage(message, "*");
}
// console.log('Message sent to parent (iframe):', message);
}
</script>
<section
class="container h-full mx-auto"
class="container h-full mx-auto flex flex-col items-center space-y-4"
>
{#if $ae_loc.ds.hub__page__sponsorships__create_info_header}
{@html $ae_loc.ds.hub__page__sponsorships__create_info_header}
{:else}
<header>
<h1 class="h1">Information Goes Here</h1>
</header>
{/if}
<!-- <section class="btn btn-group"> -->
{#if $slct.sponsorship_id}
<button
class="btn variant-ghost-primary w-96"
on:click={() => {
ae_util.handle_url_and_message('sponsorship_id', $slct.sponsorship_id);
modalStore.trigger(modal_edit__sponsorship_obj);
// $ae_loc.mod.sponsorships.show_edit__sponsorship_obj = true;
// $slct_trigger = 'load__sponsorship_obj';
// $slct_trigger = 'show_edit__sponsorship_obj';
// modalStore.trigger(modal_edit__sponsorship_obj);
// $ae_trig.m_sponsorships__show_modal_edit = true;
}}
>
<span class="fas fa-edit mx-1"></span>
Edit Sponsorship {$slct.sponsorship_id}
</button>
{:else}
<button
class="btn variant-ghost-primary w-96"
on:click={() => {
ae_util.handle_url_and_message('sponsorship_id', null);
modalStore.trigger(modal_edit__sponsorship_obj);
// $slct_trigger = 'load__sponsorship_obj';
$slct_trigger = 'show_edit__sponsorship_obj';
$ae_loc.mod.sponsorships.show_edit__sponsorship_obj = true;
// modalStore.trigger(modal_edit__sponsorship_obj);
}}
>
<span class="fas fa-edit mx-1"></span>
Start Sponsor Submission Form
</button>
{/if}
<!-- </section> -->
{#if $ae_loc.ds.hub__page__sponsorships__create_info}
{@html $ae_loc.ds.hub__page__sponsorships__create_info}
{:else}
<header>
<h1 class="h1">Information Goes Here</h1>
</header>
<section>
<div class="alert alert-info">
More information goes here.
</div>
</section>
{/if}
<!-- <section class="btn btn-group"> -->
<button
class="btn variant-ghost-primary"
on:click={() => {
// $ae_loc.mod.sponsorships.show_edit__sponsorship_obj = true;
modalStore.trigger(modal_edit__sponsorship_obj);
}}
>
<span class="fas fa-edit mx-1"></span>
Start Sponsor Submission Form
</button>
<!-- </section> -->
</section>