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

I need to stop for the night.

Browse Source
This commit is contained in:
Scott Idem
2024-02-19 19:37:03 -05:00
parent 3403210efd
commit 5bb9134641
4 changed files with 66 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/lib/ae_stores.ts
View File

@@ -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<key_val> = localStorageStore('ae_loc', ae_app_local_data_struct);
// This does not work yet...? Don't use.
// const ae_loc_store: Writable<string> = localStorageStore('ae_loc', ae_app_local_data_struct);
// console.log(`store - $ae_loc:`, ae_loc_store);
// Testing:
export let ae_loc: Writable<key_val> = 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 = {

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

@@ -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',

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

@@ -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<string> = localStorageStore('store_current_tab', 'start');
// const store_current_tab: Writable<string> = 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<any>;
@@ -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"
>
<Tab bind:group={$store_current_tab} name="tab_start" value={'start'}>
<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.sponsorship_obj.sponsorship_id_random}>
<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'} disabled={!$slct.sponsorship_obj.sponsorship_id_random}>
<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'} disabled={!$slct.sponsorship_obj.sponsorship_id_random}>
<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>
<!-- Tab Panels --->
<svelte:fragment slot="panel">
{#if $store_current_tab === 'start'}
{#if store_current_tab === 'start'}
<form
class="modal-form {cForm}"
on:submit|preventDefault={handle_submit_form}
@@ -521,7 +524,7 @@ async function handle_update__sponsorship({
</form>
{:else if $store_current_tab === 'files'}
{:else if store_current_tab === 'files'}
<form
class="modal-form {cForm}"
on:submit|preventDefault={handle_submit_form_files}
@@ -627,20 +630,23 @@ async function handle_update__sponsorship({
</form>
{:else if $store_current_tab === 'gala_guests'}
{:else if store_current_tab === 'gala_guests'}
<section>
{#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}
<fieldset class="border border-gray-500/20 p-4">
<legend class="legend">Guest {index} - {guest.given_name} {guest.family_name}</legend>
<legend class="legend">
Guest {index} -
{guest.full_name ?? `${guest.given_name} {guest.family_name}`}
</legend>
<div class="flex flex-wrap gap-4">
<label for="guest_{index}_given_name" class="label max-w-64">Given name
<input type="text" class="input" id="guest_{index}_given_name" name="guest_{index}_given_name" placeholder="Full name" value={guest.given_name ?? ''} autocomplete="name">
<input type="text" class="input" id="guest_{index}_given_name" name="guest_{index}_given_name" placeholder="First name" value={guest.given_name ?? ''} autocomplete="name">
</label>
<label for="guest_{index}_family_name" class="label max-w-64">Family name
<input type="text" class="input" id="guest_{index}_family_name" name="guest_{index}_family_name" placeholder="Full name" value={guest.family_name ?? ''} autocomplete="name">
<input type="text" class="input" id="guest_{index}_family_name" name="guest_{index}_family_name" placeholder="Last name" value={guest.family_name ?? ''} autocomplete="name">
</label>
<label for="guest_{index}_email" class="label max-w-64">Email
<input type="email" class="input" id="guest_{index}_email" name="guest_{index}_email" placeholder="Email" value={guest.email ?? ''} autocomplete="email">
@@ -666,7 +672,7 @@ async function handle_update__sponsorship({
</section>
{:else if $store_current_tab === 'options'}
{:else if store_current_tab === 'options'}
<form
class="modal-form {cForm}"
on:submit|preventDefault={handle_submit_form}
@@ -795,5 +801,6 @@ async function handle_update__sponsorship({
</div>
{/if}
<style>
</style>
</style>

2
src/routes/sponsorships/10_view_modal__sponsorship_obj.svelte
View File

@@ -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. */