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

Package updates and trying to fix a reversion with reactivity within the same page file. The Dexie liveQuery does not seem to refresh correctly when on the same page. It does show the update on child components. Even if nearly identical.

Browse Source
This commit is contained in:
Scott Idem
2024-12-23 17:23:36 -05:00
parent 24931de306
commit 066bd66178
9 changed files with 662 additions and 489 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
src/app.postcss
View File

@@ -481,4 +481,52 @@ img.qr_code:focus {
.reset_css a:hover {
color: hsla(210, 100%, 50%, .75);
text-decoration: none;
}
/* .ae_btn.btn-danger,
.ae_btn.btn-info,
.ae_btn.btn-warning {
border-radius: 60px;
} */
/* .ae_margin_xs {
margin: 0.25em;
}
.ae_margin_sm {
margin: 0.5em;
}
.ae_margin_md {
margin: 0.75em;
}
.ae_margin_lg {
margin: 1em;
}
.ae_margin_lg {
margin: 1.25em;
} */
.iframe .novi_btn {
border-radius: 60px;
border-color: hsla(0, 0%, 50%, .5);
}
.iframe .novi_margin_sm {
/* margin: 0.5em; */
}
.iframe button.ae_normal,
.iframe .btn.ae_normal {
/* font: normal 1em sans-serif; */
font-size: 1rem;
}
.iframe button.ae_smaller,
.iframe .btn.ae_smaller {
font-size: 0.8rem;
}
.iframe button.ae_smallest,
.iframe .btn.ae_smallest {
font-size: 0.65rem;
}

49
src/routes/idaa/(idaa)/archives/[archive_id]/+page.svelte
View File

@@ -1,6 +1,6 @@
<script lang="ts">
/** @type {import('./$types').PageData} */
let log_lvl: number = 0;
let log_lvl: number = 1;
// *** Import Svelte specific
import { browser } from '$app/environment';
@@ -25,7 +25,8 @@ import Archive_view from './ae_idaa_comp__archive_obj_id_view.svelte';
import Archive_content_obj_li from './ae_idaa_comp__archive_content_obj_li.svelte';
import Archive_content_obj_id_edit from './ae_idaa_comp__archive_content_obj_id_edit.svelte';
import Media_player from './../ae_idaa_comp__media_player.svelte';
// import Media_player from './../ae_idaa_comp__media_player.svelte';
import Modal_media_player from './ae_idaa_comp__modal_media_player.svelte';
interface Props {
data: any;
@@ -50,7 +51,9 @@ $idaa_slct.archive_id = ae_acct.slct.archive_id;
let lq__archive_obj = $derived(liveQuery(async () => {
console.log(`lq__archive_obj: archive_id = ${$idaa_slct?.archive_id}`);
if (log_lvl) {
console.log(`lq__archive_obj: archive_id = ${$idaa_slct?.archive_id}`);
}
let results = await db_archives.archive
.get($idaa_slct?.archive_id ?? ''); // null or undefined does not reset things like '' does
@@ -85,10 +88,19 @@ let lq__archive_content_obj_li = $derived(liveQuery(async () => {
}));
let lq__archive_content_obj = $derived(liveQuery(async () => {
let results = await db_archives.content
.get($idaa_slct.archive_content_id ?? ''); // null or undefined does not reset things like '' does
if (log_lvl) {
console.log(`lq__archive_content_obj: archive_content_id = ${$idaa_slct?.archive_content_id}`);
}
if ($idaa_slct.archive_content_id) {
let results = await db_archives.content
.get($idaa_slct.archive_content_id); // null or undefined does not reset things like '' does
return results;
return results;
}
// const results = await db_archives.content
// .get($idaa_slct.archive_content_id); // null or undefined does not reset things like '' does
// return results;
}));
@@ -266,8 +278,8 @@ if (browser) {
<!-- Modal: Archive Content edit ID -->
<Modal
title="{$lq__archive_content_obj?.name ?? 'New Archive Content'} - {$lq__archive_content_obj?.id ?? 'Not Saved Yet'}"
bind:open={$idaa_sess.archives.show__modal_edit__archive_content_id}
title="{$lq__archive_content_obj?.name ?? 'New Archive Content'} - {$lq__archive_content_obj?.id ?? 'Not Saved Yet'}"
autoclose={false}
placement="top-center"
size="xl"
@@ -332,10 +344,22 @@ if (browser) {
<!-- Modal: Archive Content ID media player -->
<!-- {#if $lq__archive_content_obj?.name} -->
{#if $idaa_slct.archive_content_id && $idaa_sess.archives.show__modal_view__archive_content_id}
<Modal_media_player
lq__archive_content_obj={lq__archive_content_obj}
/>
{/if}
{#if 1==2}
<Modal
title="{$lq__archive_content_obj?.name} - {$lq__archive_content_obj?.archive_content_id}"
bind:open={$idaa_sess.archives.show__modal_view__archive_content_id}
autoclose={false}
title="{$lq__archive_content_obj?.name} - {$lq__archive_content_obj?.archive_content_id}"
autoclose={true}
onclose={() => {
// We want to cancel the inline edit if the modal is closed
// $idaa_sess.archives.show__inline_edit__archive_content_id = false;
}}
outsideclose={true}
placement="top-center"
size="xl"
@@ -349,7 +373,7 @@ if (browser) {
<span class="text-sm text-gray-500">
Viewing:
</span>
{$lq__archive_content_obj?.name} - {$lq__archive_content_obj?.archive_content_id}</h3>
{$idaa_slct.archive_content_obj?.name} - {$lq__archive_content_obj?.archive_content_id}</h3>
</div>
@@ -359,4 +383,7 @@ if (browser) {
lq__archive_content_obj={lq__archive_content_obj}
/>
</Modal>
{$lq__archive_content_obj?.archive_content_id}
</Modal>
{/if}

1
src/routes/idaa/(idaa)/archives/[archive_id]/ae_idaa_comp__archive_content_obj_id_edit.svelte
View File

@@ -328,6 +328,7 @@ async function handle_hosted_files_uploaded(hosted_file_id_li: string[], hosted_
class="input w-full"
placeholder="Content name"
>
{$lq__archive_content_obj?.name}
</label>
<label for="description">

10
src/routes/idaa/(idaa)/archives/[archive_id]/ae_idaa_comp__archive_content_obj_li.svelte
View File

@@ -1,5 +1,6 @@
<script lang="ts">
// *** Import Svelte specific
import { goto, invalidate, pushState, replaceState } from '$app/navigation';
// *** Import Aether specific variables and functions
import type { key_val } from '$lib/ae_stores';
@@ -34,7 +35,7 @@ let ae_promises: key_val = $state({});
<div class="ae_row archive_content__group flex flex-row items-center justify-center">
<button
type="button"
class="btn btn-md btn-info variant-glass-secondary hover:variant-filled-secondary transition w-96"
class="novi_btn novi_margin_sm btn btn-md btn-info variant-glass-secondary hover:variant-filled-secondary transition w-96"
onclick={() => {
if ($idaa_sess.archives.show_list__archive_content_li_group == idaa_archive_content_obj.group) {
$idaa_sess.archives.show_list__archive_content_li_group = null;
@@ -91,6 +92,11 @@ let ae_promises: key_val = $state({});
$idaa_slct.archive_content_id = idaa_archive_content_obj?.archive_content_id;
$idaa_slct.archive_content_obj = idaa_archive_content_obj;
const url = new URL(location);
url.searchParams.set('archive_content_id', idaa_archive_content_obj?.archive_content_id);
pushState(url, {});
// replaceState(url, {});
let message = {'archive_content_id': $idaa_slct?.archive_content_id};
window.parent.postMessage(message, "*");
@@ -106,7 +112,7 @@ let ae_promises: key_val = $state({});
$idaa_sess.archives.show__modal_view__archive_content_id = $idaa_slct.archive_content_id;
$idaa_sess.archives.show__modal_edit__archive_content_id = false;
}}
class="btn btn-md btn-primary variant-ghost-primary hover:variant-filled-primary transition"
class="novi_btn btn btn-md btn-primary variant-ghost-primary hover:variant-filled-primary transition"
title={`View: ${idaa_archive_content_obj?.name}`}
>
<span class="fas fa-play m-1"></span> Play/View

64
src/routes/idaa/(idaa)/archives/[archive_id]/ae_idaa_comp__modal_media_player.svelte Normal file
View File

@@ -0,0 +1,64 @@
<script lang="ts">
/** @type {import('./$types').PageData} */
// *** Import Svelte specific
// import { onDestroy, onMount } from 'svelte';
// import { browser } from '$app/environment';
// *** Import other supporting libraries
import { Modal } from 'flowbite-svelte';
// *** Import Aether specific variables and functions
// import { ae_snip, ae_loc, ae_sess, ae_api, ae_trig, slct, slct_trigger } from '$lib/ae_stores';
import { idaa_loc, idaa_sess, idaa_slct } from '$lib/ae_idaa_stores';
import Media_player from './../ae_idaa_comp__media_player.svelte';
interface Props {
log_lvl?: number;
lq__archive_content_obj: any;
}
let { log_lvl, lq__archive_content_obj }: Props = $props();
if (log_lvl) {
console.log(`lq__archive_content_obj:`, lq__archive_content_obj);
}
</script>
<Modal
bind:open={$idaa_sess.archives.show__modal_view__archive_content_id}
title="{$lq__archive_content_obj?.name} - {$lq__archive_content_obj?.archive_content_id}"
autoclose={true}
onclose={() => {
// We want to cancel the inline edit if the modal is closed
// $idaa_sess.archives.show__inline_edit__archive_content_id = false;
}}
outsideclose={true}
placement="top-center"
size="xl"
class="top-center bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 rounded-lg border-gray-200 dark:border-gray-700 divide-gray-200 dark:divide-gray-700 shadow-md relative flex flex-col mx-auto w-full divide-y"
>
{#snippet header()}
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-lg font-semibold">
<span class="text-sm text-gray-500">
Viewing:
</span>
{$idaa_slct.archive_content_obj?.name} - {$lq__archive_content_obj?.archive_content_id}</h3>
</div>
{/snippet}
<Media_player
lq__archive_content_obj={lq__archive_content_obj}
/>
{$lq__archive_content_obj?.archive_content_id}
</Modal>

2
src/routes/idaa/(idaa)/archives/ae_idaa_comp__archive_obj_li.svelte
View File

@@ -50,7 +50,7 @@ let { lq__archive_obj_li }: Props = $props();
<div class="ae_options flex flex-row gap-2 items-center justify-center">
<a href="/idaa/archives/{idaa_archive_obj?.archive_id}" class="btn btn-md variant-ghost-primary hover:variant-filled-primary transition" title={`View: ${idaa_archive_obj?.name}`}>
<a href="/idaa/archives/{idaa_archive_obj?.archive_id}" class="btn btn-secondary btn-md variant-ghost-primary hover:variant-filled-primary transition" title={`View: ${idaa_archive_obj?.name}`}>
<span class="fas fa-envelope-open m-1"></span> Open
{#if idaa_archive_obj?.archive_content_count}

4
src/routes/idaa/(idaa)/recovery_meetings/ae_idaa_comp__event_obj_li.svelte
View File

@@ -96,7 +96,7 @@ onMount(() => {
$idaa_sess.recovery_meetings.show__modal_view = true;
$idaa_sess.recovery_meetings.show__modal_edit = false;
}}
class="btn btn-md variant-ghost-primary hover:variant-filled-primary transition"
class="novi_btn btn btn-primary btn-md variant-ghost-primary hover:variant-filled-primary transition"
title={`Open to see details: ${idaa_event_obj?.name}`}
>
<span class="fas fa-envelope-open m-1"></span>
@@ -121,7 +121,7 @@ onMount(() => {
$idaa_sess.recovery_meetings.show__modal_view = false;
$idaa_sess.recovery_meetings.show__modal_edit = true;
}}
class="btn btn-sm variant-ghost-warning hover:variant-filled-warning transition"
class="novi_btn btn btn-warning btn-sm variant-ghost-warning hover:variant-filled-warning transition"
title={`Edit meeting: ${idaa_event_obj?.name}`}
>
<span class="fas fa-edit m-1"></span>

8
src/routes/idaa/(idaa)/recovery_meetings/ae_idaa_comp__event_obj_qry.svelte
View File

@@ -214,7 +214,7 @@ if ($idaa_loc.recovery_meetings.qry__fulltext_str && $idaa_loc.recovery_meetings
<div class="ae_group flex flex-row gap-2 w-full items-center justify-center">
<button
type="button"
class="btn btn-sm variant-ghost-warning hover:variant-filled-warning transition-all"
class="novi_btn btn btn-sm variant-ghost-warning hover:variant-filled-warning transition-all"
on:click={() => {
$idaa_loc.recovery_meetings.qry__fulltext_str = '';
// $idaa_trig.event_li_qry = true;
@@ -239,11 +239,11 @@ if ($idaa_loc.recovery_meetings.qry__fulltext_str && $idaa_loc.recovery_meetings
}
}
style="width: 50%;"
class="bs-input input text-sm hover:text-2xl font-bold font-mono w-80 transition-all"
class="input text-sm hover:text-2xl font-bold font-mono w-80 transition-all"
>
<button
type="submit"
class="btn btn-lg variant-ghost-success hover:variant-filled-success text-2xl font-bold w-48 transition-all"
class="novi_btn btn btn-lg variant-ghost-success hover:variant-filled-success text-2xl font-bold w-48 transition-all"
title="Search for meetings by day of week, location, contacts, etc."
>
<!-- <span class="fas fa-search m-1"></span> -->
@@ -518,7 +518,7 @@ if ($idaa_loc.recovery_meetings.qry__fulltext_str && $idaa_loc.recovery_meetings
$idaa_sess.recovery_meetings.show__modal_view = false;
$idaa_sess.recovery_meetings.show__modal_edit = true;
}}
class="btn_new_recovery_meeting btn btn-sm variant-ghost-warning hover:variant-filled-warning transition text-xs"
class="novi_btn btn btn-warning btn-sm variant-ghost-warning hover:variant-filled-warning transition text-xs"
disabled={!$ae_loc.authenticated_access}
>
<span class="fas fa-plus m-1"></span> Create New Meeting