From 5bb91346410ca8880975def919259b14aa2902b0 Mon Sep 17 00:00:00 2001 From: Scott Idem Date: Mon, 19 Feb 2024 19:37:03 -0500 Subject: [PATCH] I need to stop for the night. --- src/lib/ae_stores.ts | 15 ++--- src/routes/sponsorships/+page.svelte | 36 +++++++---- .../10_edit_modal__sponsorship_obj.svelte | 61 +++++++++++-------- .../10_view_modal__sponsorship_obj.svelte | 2 +- 4 files changed, 66 insertions(+), 48 deletions(-) diff --git a/src/lib/ae_stores.ts b/src/lib/ae_stores.ts index da5aaee2..ed526ada 100644 --- a/src/lib/ae_stores.ts +++ b/src/lib/ae_stores.ts @@ -58,16 +58,17 @@ export let ae_app_local_data_struct: key_val = { } console.log(`Aether Config - App Local Storage Data:`, ae_app_local_data_struct); -// This does not work yet... +// This works, but does not uses local storage: +export let ae_loc = writable(ae_app_local_data_struct); + +// This works and uses local storage: +// export let ae_loc: Writable = localStorageStore('ae_loc', ae_app_local_data_struct); + + +// This does not work yet...? Don't use. // const ae_loc_store: Writable = localStorageStore('ae_loc', ae_app_local_data_struct); // console.log(`store - $ae_loc:`, ae_loc_store); -// Testing: -export let ae_loc: Writable = localStorageStore('ae_loc', ae_app_local_data_struct); - -// This works: -// export let ae_loc = writable(ae_loc_store); - // *** BEGIN *** Temporary app data. This should be stored to session storage. export let ae_app_session_data_struct: key_val = { diff --git a/src/routes/sponsorships/+page.svelte b/src/routes/sponsorships/+page.svelte index f3fe1e9c..4c2e4472 100644 --- a/src/routes/sponsorships/+page.svelte +++ b/src/routes/sponsorships/+page.svelte @@ -17,11 +17,13 @@ const modalStore = getModalStore(); import { api } from '$lib/api'; 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_modal_sponsorship_obj from './10_view_modal__sponsorship_obj.svelte'; +// Viewing const modalComponentViewSponsorshipObj: ModalComponent = { ref: View_modal_sponsorship_obj }; const modal_view__sponsorship_obj: ModalSettings = { @@ -31,6 +33,26 @@ const modal_view__sponsorship_obj: ModalSettings = { position: '', // default is "items-center" }; + +// Editing +const modalComponentEditSponsorshipObj: ModalComponent = { ref: Edit_modal_sponsorship_obj }; + +const modal_edit__sponsorship_obj: ModalSettings = { + type: 'component', + component: modalComponentEditSponsorshipObj, + title: 'Edit Sponsorship', + position: '', // default is "items-center" +}; + +$: if ($ae_loc.mod.sponsorships.show_edit__sponsorship_obj) { + console.log('Show Modal Edit'); + modalStore.trigger(modal_edit__sponsorship_obj); +} else if ($ae_loc.mod.sponsorships.show_view__sponsorship_obj) { + console.log('Show Modal View'); + modalStore.trigger(modal_view__sponsorship_obj); +} + + // 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.sponsorships.show_edit__sponsorship_obj = false; $ae_loc.mod.sponsorships.show_view__sponsorship_obj = false; @@ -288,12 +310,6 @@ async function handle_load_ae_obj_id__sponsorship({sponsorship_id, try_cache=fal return ae_sponsorship_obj_get_promise; } -const modal_edit__sponsorship_obj: ModalSettings = { - type: 'component', - component: 'modalComponentEditSponsorshipObj', - title: 'Edit Sponsorship', - position: '', // default is "items-center" -}; // const modal_view__sponsorship_obj: ModalSettings = { // type: 'component', @@ -307,13 +323,7 @@ const modal_edit__sponsorship_obj: ModalSettings = { // $slct_trigger = null; // } -$: if ($ae_loc.mod.sponsorships.show_edit__sponsorship_obj) { - console.log('Show Modal Edit'); - modalStore.trigger(modal_edit__sponsorship_obj); -} else if ($ae_loc.mod.sponsorships.show_view__sponsorship_obj) { - console.log('Show Modal View'); - modalStore.trigger(modal_view__sponsorship_obj); -} + // const modal: ModalSettings = { // type: 'alert', diff --git a/src/routes/sponsorships/10_edit_modal__sponsorship_obj.svelte b/src/routes/sponsorships/10_edit_modal__sponsorship_obj.svelte index da1e1286..ecfc4e6c 100644 --- a/src/routes/sponsorships/10_edit_modal__sponsorship_obj.svelte +++ b/src/routes/sponsorships/10_edit_modal__sponsorship_obj.svelte @@ -2,11 +2,12 @@ import type { SvelteComponent } from 'svelte'; import { createEventDispatcher } from 'svelte'; -const dispatch = createEventDispatcher(); +// const dispatch = createEventDispatcher(); import { localStorageStore } from '@skeletonlabs/skeleton'; import type { Writable } from 'svelte/store'; -const store_current_tab: Writable = localStorageStore('store_current_tab', 'start'); +// const store_current_tab: Writable = localStorageStore('store_current_tab', 'start'); +let store_current_tab: string = 'start'; // console.log(`store_current_tab:`, $store_current_tab); // Stores @@ -28,20 +29,20 @@ type key_val = { }; -// Form Data -const formData = { - name: 'Jane Doe', - tel: '214-555-1234', - email: 'jdoe@email.com' -}; +// // Form Data +// const formData = { +// name: 'Jane Doe', +// tel: '214-555-1234', +// email: 'jdoe@email.com' +// }; // const form_data = $slct.sponsorship_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(); -} +// function onFormSubmit(): void { +// if ($modalStore[0].response) $modalStore[0].response(formData); +// modalStore.close(); +// } // Base Classes const cBase = 'card p-4 w-modal-wide shadow-xl space-y-4 ae_modal_scrollfix'; @@ -52,8 +53,9 @@ const cBase = 'card p-4 w-modal-wide shadow-xl space-y-4 ae_modal_scrollfix'; const cHeader = 'text-2xl font-bold'; 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; + +// let tab_set = $store_current_tab; +let tab_set = store_current_tab; $ae_loc.mod.sponsorships.disable_submit__sponsorship_obj = false; let placeholder_li: key_val = { @@ -61,6 +63,7 @@ let placeholder_li: key_val = { 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__sponsorship_obj: Promise; @@ -334,7 +337,7 @@ async function handle_update__sponsorship({ }) { console.log('*** handle_update__sponsorship() ***'); - api_ae_promises.update__sponsorship_obj = api.update_ae_obj_id_crud({ + ae_promises.update__sponsorship_obj = api.update_ae_obj_id_crud({ api_cfg: $ae_api, obj_type: obj_type, obj_id: obj_id, @@ -374,26 +377,26 @@ async function handle_update__sponsorship({ border="" class="bg-surface-100-800-token w-full" > - + Start - + Files - + Gala Guests - + More - {#if $store_current_tab === 'start'} + {#if store_current_tab === 'start'}
- {:else if $store_current_tab === 'files'} + {:else if store_current_tab === 'files'} - {:else if $store_current_tab === 'gala_guests'} + {:else if store_current_tab === 'gala_guests'}
{#if $slct.sponsorship_obj.guest_li_json && $slct.sponsorship_obj.guest_li_json.length && $slct.sponsorship_obj.guest_li_json[0].full_name} {#each $slct.sponsorship_obj.guest_li_json as guest, index}
- Guest {index} - {guest.given_name} {guest.family_name} + + Guest {index} - + {guest.full_name ?? `${guest.given_name} {guest.family_name}`} +
- {:else if $store_current_tab === 'options'} + {:else if store_current_tab === 'options'} {/if} + \ No newline at end of file + diff --git a/src/routes/sponsorships/10_view_modal__sponsorship_obj.svelte b/src/routes/sponsorships/10_view_modal__sponsorship_obj.svelte index 0b3e3a3b..60be5eff 100644 --- a/src/routes/sponsorships/10_view_modal__sponsorship_obj.svelte +++ b/src/routes/sponsorships/10_view_modal__sponsorship_obj.svelte @@ -2,7 +2,7 @@ import type { SvelteComponent } from 'svelte'; // Stores -import { getModalStore } from '@skeletonlabs/skeleton'; +// import { getModalStore } from '@skeletonlabs/skeleton'; // Props /** Exposes parent props to this component. */