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

Improvement and updates to the event list loading and showing.

Browse Source
This commit is contained in:
Scott Idem
2024-10-01 11:28:50 -04:00
parent 35c901f144
commit d7284d5010
6 changed files with 124 additions and 178 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
src/routes/events_pres_mgmt/+layout.svelte
View File

@@ -102,51 +102,4 @@ if (browser) {
<title>Presentation Management - {$events_loc.title ?? 'Æ loading...'}</title>
</svelte:head>
{#if $ae_loc.administrator_access && 1==2}
<section
class="submenu flex flex-row justify-center"
class:hidden={$ae_loc.iframe}
>
<span class="btn-group variant-soft-secondary px-4 py-2">
{#each Object.entries(data.submenu) as [key, item]}
<!-- <a href="/settings/{item.slug}">{item.title}</a> -->
<!-- class:hidden={!$ae_loc.trusted_access && item.access} -->
{#if item.disable}
<button
title={item.title}
class="hover:variant-ghost-secondary"
class:hidden={(!$ae_loc.trusted_access && item.access === 'trusted') || (!$ae_loc.administrator_access && item.access === 'administrator' || item.hide)}
disabled={item.disable}
on:click={() => {
// window.location(item.href);
// href={item.href}
// invalidateAll
goto(item.href, { });
}}
>
{item.name}
</button>
{:else}
<a
href={item.href}
title={item.title}
class="hover:variant-ghost-secondary"
class:hidden={(!$ae_loc.trusted_access && item.access === 'trusted') || (!$ae_loc.administrator_access && item.access === 'administrator' || item.hide)}
class:disabled={item.disable}
>
{item.name}
</a>
{/if}
{/each}
</span>
</section>
{/if}
<!-- <div class="container m-auto"> -->
<slot></slot>
<!-- </div> -->

11
src/routes/events_pres_mgmt/+layout.ts
View File

@@ -7,7 +7,7 @@ import { events_func } from '$lib/ae_events_functions';
export async function load({ parent }) {
let log_lvl = 0;
let log_lvl = 1;
let data = await parent();
// console.log(`ae_events_pres_mgmt +layout.ts data:`, data);
@@ -30,11 +30,16 @@ export async function load({ parent }) {
}
if (browser) {
if (log_lvl) {
console.log(`ae_events_pres_mgmt +layout.ts data:`, data);
}
// Should we limit these to event.conference = true?
let load_event_obj_li = events_func.load_ae_obj_li__event({
api_cfg: ae_acct.api,
account_id: account_id,
params: {enabled: 'enabled', qry__limit: 25},
for_obj_type: 'account',
for_obj_id: account_id,
params: {qry__enabled: 'enabled', qry__limit: 25},
try_cache: true,
log_lvl: log_lvl
});

178
src/routes/events_pres_mgmt/+page.svelte
View File

@@ -5,7 +5,6 @@ export let data: any;
import { onMount } from 'svelte';
import { api } from '$lib/api';
import { liveQuery } from "dexie";
import { db_events } from "$lib/db_events";
import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/ae_stores';
@@ -14,53 +13,20 @@ import { ae_util } from '$lib/ae_utils/ae_utils';
// import Element_data_store from '$lib/element_data_store_v2.svelte';
let ae_acct = data[$slct.account_id];
// $events_slct.event_obj = ae_acct.slct.event_obj;
// $events_slct.event_obj_li = ae_acct.slct.event_obj_li;
let lq__event_obj_li = liveQuery(
() => db_events.events
.orderBy('start_datetime')
$: lq__event_obj_li = liveQuery(async () => {
let results = await db_events.events
.where('account_id')
.equals(ae_acct.slct.account_id)
.reverse()
.toArray()
// .sortBy('start_datetime')
// () => db_events.events
// .where('conference')
// // .aboveOrEqual(0)
// .equals('true')
// // .above(0)
// .sortBy('name') // Use sortBy() instead of orderBy(). toArray() is also not needed???
// // .sortBy('[priority+name]')
// // .orderBy('name')
// // .offset(10).limit(5)
// // .toArray()
);
// console.log(`lq__event_obj_li:`, $lq__event_obj_li);
.sortBy('start_datetime')
return results;
});
let lq__event_obj = liveQuery(
async () => db_events.events
.where('id')
.equals(ae_acct.slct.event_id)
.toArray()
// .first()
// .get($events_slct.event_id)
);
onMount(() => {
console.log('Events - Presentation Management: +page.svelte');
console.log('ae_ slct:', $slct);
let href_url = window.location.href;
// console.log(href_url);
$ae_loc.href_url = href_url;
// console.log(`$ae_loc.href_url = `, $ae_loc.href_url);
console.log(`lq__event_obj = `, $lq__event_obj);
// $events_slct.event_obj = db_events.events.get($events_slct.event_id);
// console.log(`$events_slct.event_obj = `, $events_slct.event_obj?.name);
// console.log('Events - Presentation Management: +page.svelte');
});
</script>
@@ -69,9 +35,6 @@ onMount(() => {
<h2 class="h3">Presentation Management for {$ae_loc.account_name ?? 'Æ loading...'}</h2>
<!-- {$events_slct.event_obj.name ?? '--'} -->
<!-- ({$events_slct.event_id}) -->
{#if $ae_loc.administrator_access}
<h3 class="h4">Administrator Access - Technical Support</h3>
<p>You are accessing the presentation management system with "administrator" level permissions.</p>
@@ -80,7 +43,7 @@ onMount(() => {
<p>You are accessing the presentation management system with "trusted" level permissions.</p>
{:else if !$ae_loc.trusted_access}
<h3 class="h4">Restricted Access</h3>
<p>You are accessing to the presentation management system is limited</p>
<p>You access to the presentation management system is limited.</p>
{/if}
<!-- <Element_data_store
@@ -106,78 +69,83 @@ onMount(() => {
/> -->
{#await ae_acct.slct.event_obj_li}
<div class="flex flex-row items-center justify-center">
<span class="fas fa-spinner fa-spin mx-1"></span>
<span>Loading...</span>
</div>
{:then}
<div class="flex flex-row items-center justify-center">
{#if $lq__event_obj_li}
<!-- <div class="flex flex-row items-center justify-center">
<span class="fas fa-check text-green-500 mx-1"></span>
<span>Loaded</span>
</div>
</div> -->
{#if ae_acct.slct.event_obj_li && $lq__event_obj_li}
<ul
class="space-y-2"
>
{#each $lq__event_obj_li as event_obj}
<li>
<!-- We do not want to show events more than 8 months old. -->
{#if (
new Date(event_obj.start_datetime).getTime())
{#if $lq__event_obj_li.length}
<ul
class="space-y-2"
>
{#each $lq__event_obj_li as event_obj}
<li
class:dim={event_obj?.hide}
>
(new Date().getTime() - (1000 * 60 * 60 * 24 * 30 * 8))
|| $ae_loc.trusted_access
}
<!-- {#if $events_slct.event_id === event_obj.event_id_random} -->
<a
href="/events_pres_mgmt/event/{event_obj.event_id_random}"
class="btn btn-md variant-ghost-primary hover:variant-filled-primary hover:underline"
on:pointerover={() => {
// When the cursor is hovering we want to set the event_id and event_obj
// $events_slct.event_id = event_obj.event_id_random;
// $events_slct.event_obj = event_obj;
}}
>
{ae_util.iso_datetime_formatter(event_obj.start_datetime, 'date_long')}
-
{event_obj.name}
</a>
{:else}
<button
disabled
class="btn btn-md variant-ghost-surface"
<!-- We do not want to show events more than 8 months old. -->
{#if (
new Date(event_obj.start_datetime ?? '').getTime())
>
{ae_util.iso_datetime_formatter(event_obj.start_datetime, 'date_long')}
-
{event_obj.name}
</button>
{/if}
(new Date().getTime() - (1000 * 60 * 60 * 24 * 30 * 8))
|| $ae_loc.trusted_access
}
{#if $ae_loc.trusted_access}
<a
data-sveltekit-reload
href="/event/{event_obj.event_id_random}"
class="btn btn-sm variant-ghost-warning hover:variant-filled-warning hover:underline"
>
Manage
</a>
{/if}
</li>
{/each}
</ul>
<!-- {#if $events_slct.event_id === event_obj.event_id_random} -->
<a
href="/events_pres_mgmt/event/{event_obj.event_id_random}"
class="btn btn-md variant-ghost-primary hover:variant-filled-primary"
>
{ae_util.iso_datetime_formatter(event_obj.start_datetime, 'date_long')}
-
{event_obj.name}
</a>
{:else}
<button
disabled
class="btn btn-md variant-ghost-surface"
>
{ae_util.iso_datetime_formatter(event_obj.start_datetime, 'date_long')}
-
{event_obj.name}
</button>
{/if}
{#if $ae_loc.trusted_access}
<a
data-sveltekit-reload
href="/event/{event_obj.event_id_random}"
class="btn btn-sm variant-ghost-warning hover:variant-filled-warning"
>
Manage
</a>
{/if}
</li>
{/each}
</ul>
{:else}
<div class="flex flex-row items-center justify-center">
<span class="fas fa-exclamation-triangle text-red-500 mx-1"></span>
<span>No events available to display.</span>
<span class="fas fa-exclamation-triangle text-red-500 mx-1"></span>
</div>
{/if}
{:else}
<div class="flex flex-row items-center justify-center">
<span class="fas fa-spinner fa-spin mx-1"></span>
<span>Loading...</span>
</div>
<!-- {/if} -->
{/if}
{:catch error}
<!-- {:catch error}
<div class="text-red-800">
<span class="fas fa-exclamation-triangle text-xl"></span>
<span>Error: {error.message}</span>
</div>
{/await}
{/await} -->
</section>

4
src/routes/events_pres_mgmt/+page.ts
View File

@@ -31,8 +31,4 @@ export async function load({ parent }) {
// data[account_id] = ae_acct;
return data;
// return {
// ae_events_pres_mgmt_page_ts: true,
// };
}