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

Made the closing of the modals cleaner

Browse Source
This commit is contained in:
Scott Idem
2024-02-27 17:04:03 -05:00
parent c93d84f3c3
commit 22efa3fd96
5 changed files with 27 additions and 219 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/routes/events_speakers/+page.svelte
View File

@@ -34,6 +34,8 @@ const modal_edit__event_presenter_obj: ModalSettings = {
component: modalComponentEditEventPresenterObj,
title: 'Edit Event Presenter',
position: '', // default is "items-center"
response: (r: boolean | undefined) => handle_modal_close(r)
};
// Viewing
@@ -55,8 +57,19 @@ const modal_view__event_presenter_obj: ModalSettings = {
// component_root_classes: 'w-full',
// fn: do_something_function
// },
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('event_presenter_id');
history.pushState({}, '', url);
}
// 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.events.show_edit__event_presenter_obj = false;
$ae_loc.mod.sponsorships.show_view__event_presenter_obj = false;

10
src/routes/events_speakers/10_view_modal__event_presenter_obj.svelte
View File

@@ -125,15 +125,7 @@ onMount(() => {
{/if}
<button
class="btn {parent.buttonNeutral}"
on:click={() => {
let location = window.location.href;
const url = new URL(location);
url.searchParams.delete('event_presenter_id');
history.pushState({}, '', url);
parent.onClose();
}}
on:click={() => {parent.onClose();}}
>
{parent.buttonTextCancel}
</button>

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

@@ -36,12 +36,7 @@ const modal_edit__sponsorship_obj: ModalSettings = {
title: 'Edit Sponsorship',
position: '', // default is "items-center"
// Provide arbitrary classes to the backdrop and modal elements:
// backdropClasses: '!bg-green-500',
// modalClasses: 'w-modal-wide',
// Provide arbitrary metadata to your modal instance:
// meta: { fn: do_something_function }
response: (r: boolean | undefined) => handle_modal_close(r)
};
// Viewing
@@ -59,8 +54,19 @@ const modal_view__sponsorship_obj: ModalSettings = {
// Provide arbitrary metadata to your modal instance:
// meta: { fn: do_something_function }
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('event_presenter_id');
history.pushState({}, '', url);
}
// 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;

195
src/routes/sponsorships/10_view__sponsorship_obj.svelte
View File

@@ -1,195 +0,0 @@
<script lang="ts">
import { createEventDispatcher, onMount } from 'svelte';
import { fade } from 'svelte/transition';
import dayjs from 'dayjs';
import { ae_util } from '$lib/ae_utils';
import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/ae_stores';
export let container_class_li = [];
const dispatch = createEventDispatcher();
if ($slct.sponsorship_id) {
console.log(`Sponsorship ID selected: ${$slct.sponsorship_id}`);
console.log(`Sponsorship object selected:`, $slct.sponsorship_obj);
$slct_trigger = 'load__sponsorship_obj';
}
onMount(() => {
console.log('** Component Mounted: ** View - Sponsorship Obj');
});
// dayjs.extend(window.dayjs_plugin_utc)
// dayjs.extend(window.dayjs_plugin_timezone);
// console.log(`UTC offset: ${dayjs().utcOffset()}`);
// console.log(`TZ offset: ${dayjs().utcOffset('US/Pacific')}`);
// // let test_time = dayjs.utc('2024-01-08 11:55').tz('Asia/Taipei');
// // let test_time = dayjs.utc('2024-01-08 14:15').tz('America/New_York');
// let test_time = dayjs.tz('2024-01-08 14:15', 'US/Pacific');
// console.log(test_time.format('YYYY-MM-DD HH:mm'));
// let adjusted_to_local_tz = test_time.tz('America/New_York');
// console.log(adjusted_to_local_tz.format('YYYY-MM-DD HH:mm'));
// let adjusted_to_local_tz_v2 = dayjs.tz('2024-01-08 14:15', 'US/Pacific').tz('America/New_York');
// console.log(adjusted_to_local_tz_v2);
</script>
<section class="svelte_component ae_section ae_view sponsorship_obj view__sponsorship_obj {container_class_li.join(' ')}">
<div class="sponsorship__header">
<h2 class="sponsorship__name">{@html $slct.sponsorship_obj.name}</h2>
</div>
<div class="sponsorship__content">
<div
class="sponsorship_description description"
>
<div class="ae_label sponsorship__description">Description:</div>
<pre class="ae_value sponsorship__description">{@html $slct.sponsorship_obj.description ? $slct.sponsorship_obj.description : '-- No Description Given --'}</pre>
</div>
<div
class:ae_d_none={!$slct.sponsorship_obj.level_num}
class="sponsorship_level"
>
<span class="ae_label">Level of Sponsorship:</span>
<span class="ae_value"><span class="fas fa-gem"></span> {$slct.sponsorship_obj.level_num} &mdash; {$slct.sponsorship_obj.level_str}</span>
</div>
<div>
<span class="ae_label">Paid:</span>
$
<span class="ae_value">
{$slct.sponsorship_obj.paid ? 'Yes, marked as paid' : 'Not yet marked as paid'}
</span>
</div>
<div class="ae_list sponsorship__guests">
<h2>Guest List</h2>
{#if $slct.sponsorship_obj.guest_li_json && $slct.sponsorship_obj.guest_li_json.length && $slct.sponsorship_obj.guest_li_json[0].full_name}
<ul>
{#each $slct.sponsorship_obj.guest_li_json as guest, index}
<li class="sponsorship__guest"
class:ae_d_none={!$slct.sponsorship_obj.guest_li_json[index].full_name}
>
<span class="ae_label">
<span class="fas fa-user"></span> Contact:
</span>
{$slct.sponsorship_obj.guest_li_json[index].full_name}
{#if $slct.sponsorship_obj.guest_li_json[index].email}
| <a href="mailto:{$slct.sponsorship_obj.guest_li_json[index].email}?Subject={$slct.sponsorship_obj.full_name}">{$slct.sponsorship_obj.guest_li_json[index].email}</a>
{/if}
{#if $slct.sponsorship_obj.guest_li_json[index].phone_mobile}
<span class="ae_label">| Mobile:</span>
<a href="tel:{$slct.sponsorship_obj.guest_li_json[index].phone_mobile}">{$slct.sponsorship_obj.guest_li_json[index].phone_mobile}</a>
{/if}
{#if $slct.sponsorship_obj.guest_li_json[index].phone_home}
<span class="ae_label">| Home:</span>
<a href="tel:{$slct.sponsorship_obj.guest_li_json[index].phone_home}">{$slct.sponsorship_obj.guest_li_json[index].phone_home}</a>
{/if}
{#if $slct.sponsorship_obj.guest_li_json[index].phone_office}
<span class="ae_label">| Office:</span>
<a href="tel:{$slct.sponsorship_obj.guest_li_json[index].phone_office}">{$slct.sponsorship_obj.guest_li_json[index].phone_office}</a>
{/if}
{#if $slct.sponsorship_obj.guest_li_json[index].other_text}| {$slct.sponsorship_obj.guest_li_json[index].other_text}{/if}
</li>
{/each}
</ul>
{:else}
<div class="ae_warning">No guest list found!</div>
{/if}
</div>
<section class="ae_section ae_meta sponsorship__meta">
<div class="ae_group">
<span
class="sponsorship__id"
class:ae_d_none={!$ae_loc.administrator_access}>
ID:
{$slct.sponsorship_obj.sponsorship_id_random}
</span>
<span
class="sponsorship__created_on"
>
Created on: {ae_util.iso_datetime_formatter($slct.sponsorship_obj.created_on, 'datetime_short')}
</span>
<span
class="sponsorship__updated_on"
class:ae_d_none={!$slct.sponsorship_obj.updated_on}
>
Updated on: {ae_util.iso_datetime_formatter($slct.sponsorship_obj.updated_on, 'datetime_short')}
</span>
</div>
{#if $ae_loc.trusted_access || $slct.sponsorship_obj.external_person_id === $ae_loc.novi_uuid || $slct.sponsorship_obj.contact_1_email === $ae_loc.novi_email}
<div class="ae_options">
<button
on:click={() => {
// $slct.sponsorship_id = $slct.sponsorship_obj.sponsorship_id_random;
// $slct.sponsorship_obj = $slct.sponsorship_obj;
// const url = new URL(location);
// url.searchParams.set('sponsorship_id', $slct.sponsorship_obj.sponsorship_id_random);
// history.pushState({}, '', url);
// $ae_loc.mod.sponsorships.show_main__options = true;
// $ae_loc.mod.sponsorships.show_list__sponsorship_obj_li = true;
$slct_trigger = 'load__sponsorship_obj';
$ae_loc.mod.sponsorships.show_view__sponsorship_obj = false;
$ae_loc.mod.sponsorships.show_edit__sponsorship_obj = true;
}}
class="btn btn-xs btn-secondary"
title={`Edit sponsorship: ${$slct.sponsorship_obj.name}`}
>
<span class="fas fa-edit"></span> Edit
</button>
</div>
{/if}
</section>
</div>
</section>
<style>
.ae_label {
font-size: smaller;
}
.ae_value {
font-weight: bold;
}
.sponsorship__user_timezone {
font-size: smaller;
font-style: italic;
}
.sponsorship_obj .ae_meta {
flex-direction: column;
/* justify-content: space-between; */
}
.sponsorship_obj .ae_meta .ae_group {
flex-direction: row;
}
.sponsorship_obj .ae_meta .ae_options {
flex-direction: row;
justify-content: space-between;
}
/* a {
color: #82B6E1;
} */
</style>

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

@@ -155,15 +155,7 @@ onMount(() => {
{/if}
<button
class="btn {parent.buttonNeutral}"
on:click={() => {
let location = window.location.href;
const url = new URL(location);
url.searchParams.delete('sponsorship_id');
history.pushState({}, '', url);
parent.onClose();
}}
on:click={() => {parent.onClose();}}
>
{parent.buttonTextCancel}
</button>