Moving away from using modal with iframes. Scroll issues. Especially with Safari.

2025-06-30 18:09:08 -04:00
parent 2d66984581
commit ec7ec7b566
7 changed files with 314 additions and 4 deletions
--- a/src/lib/ae_posts/db_posts.ts
+++ b/src/lib/ae_posts/db_posts.ts
@@ -114,6 +114,7 @@ export class MySubClassedDexie extends Dexie {
                id, post_id,
                account_id,
                topic_id, topic,
+                name,
                title,
                full_name, email,
                archive, archive_on,
@@ -123,6 +124,7 @@ export class MySubClassedDexie extends Dexie {
            comment: `
                id, post_comment_id,
                post_id,
+                name,
                title,
                full_name, email,
                tmp_sort_1, tmp_sort_2,
--- a/src/routes/idaa/(idaa)/archives/[archive_id]/+page.svelte
+++ b/src/routes/idaa/(idaa)/archives/[archive_id]/+page.svelte
@@ -267,6 +267,20 @@ if (browser) {
        lq__archive_obj={lq__archive_obj}
        />

+    {#snippet footer()}
+        <button
+            type="button"
+            class="btn btn-sm btn-secondary"
+            onclick={() => {
+                $idaa_sess.archives.show__modal_view__archive_id = false;
+                $idaa_sess.archives.show__modal_edit__archive_id = false;
+            }}
+            >
+            <span class="fas fa-times"></span>
+            Close
+        </button>
+    {/snippet}
+
 </Modal>


@@ -317,6 +331,20 @@ if (browser) {
        lq__archive_content_obj={lq__archive_content_obj}
        />

+    {#snippet footer()}
+        <button
+            type="button"
+            class="btn btn-sm btn-secondary"
+            onclick={() => {
+                $idaa_sess.archives.show__modal_view__archive_content_id = false;
+                $idaa_sess.archives.show__modal_edit__archive_content_id = false;
+            }}
+            >
+            <span class="fas fa-times"></span>
+            Close
+        </button>
+    {/snippet}
+
 </Modal>


--- a/src/routes/idaa/(idaa)/bb/+page.svelte
+++ b/src/routes/idaa/(idaa)/bb/+page.svelte
@@ -87,6 +87,7 @@ let lq__post_comment_obj = $derived(liveQuery(async () => {
 $effect(() => {
    if ($idaa_trig.post_li) {
        $idaa_trig.post_li = false;
+        log_lvl = 1;

        if (log_lvl) {
            console.log(`Triggered: $idaa_trig.post_li`);
@@ -114,7 +115,7 @@ $effect(() => {
            hidden: $idaa_loc.bb.qry__hidden,
            limit: $idaa_loc.bb.qry__limit,
            order_by_li: $idaa_loc.bb.qry__order_by_li,
-            try_cache: true,
+            // try_cache: true,
            log_lvl: log_lvl,
        });
    }
@@ -136,7 +137,7 @@ $effect(() => {
            hidden: $idaa_loc.bb.qry__hidden,
            limit: $idaa_loc.bb.qry__limit,
            inc_comment_li: true,
-            try_cache: true,
+            // try_cache: true,
            log_lvl: log_lvl,
        })
        .then((post_obj) => {
--- a/src/routes/idaa/(idaa)/bb/[post_id]/+page.svelte
+++ b/src/routes/idaa/(idaa)/bb/[post_id]/+page.svelte
@@ -0,0 +1,210 @@
+<script lang="ts">
+import  type { PageData } from './$types';
+
+let { data }: { data: PageData } = $props();
+
+let log_lvl: number = 0;
+
+// *** Import Svelte specific
+import { onDestroy } from "svelte";
+import { browser } from '$app/environment';
+
+// *** Import other supporting libraries
+import { Modal } from 'flowbite-svelte';
+import { liveQuery } from "dexie";
+
+// *** Import Aether specific variables and functions
+import { ae_util } from '$lib/ae_utils/ae_utils';
+import { db_posts } from "$lib/ae_posts/db_posts";
+
+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, idaa_trig, idaa_prom } from '$lib/ae_idaa_stores';
+import { posts_func } from '$lib/ae_posts/ae_posts_functions';
+
+import Comp__post_obj_id_view from '.././ae_idaa_comp__post_obj_id_view.svelte';
+
+// *** Quickly pull out data from parent(s)
+let ae_acct = data[$slct.account_id];
+if (log_lvl) {
+    console.log(`ae_acct = `, ae_acct);
+}
+
+$idaa_sess.bb.edit__post_id = null;
+$idaa_slct.post_id = ae_acct.slct.post_id;
+// $idaa_slct.post_obj = ae_acct.slct.post_obj;
+
+// Functions and Logic
+let lq__post_obj = $derived(liveQuery(async () => {
+    let results = await db_posts.post
+        .get($idaa_slct.post_id ?? ''); // null or undefined does not reset things like '' does
+
+    return results;
+}));
+
+let lq__post_comment_obj_li = $derived(liveQuery(async () => {
+    let results = await db_posts.comment
+        .where('post_id')
+        .equals($idaa_slct.post_id ?? '') // null or undefined does not reset things like '' does
+        .reverse()
+        .sortBy('updated_on');
+        // .sortBy('title');
+
+    return results;
+}));
+
+let lq__post_comment_obj = $derived(liveQuery(async () => {
+    let results = await db_posts.comment
+        .get($idaa_slct.post_comment_id ?? ''); // null or undefined does not reset things like '' does
+
+    return results;
+}));
+
+if (browser) {
+    console.log('Browser environment detected.');
+
+    let message = {'post_id': $idaa_slct?.post_id ?? null};
+    window.parent.postMessage(message, "*");
+
+    if ($ae_loc?.iframe) {
+        console.log('In iframe, sending message to parent window to scroll to top as well');
+        window.parent.postMessage({'scroll_to': 0}, "*"); // This should be in pixels
+    }
+}
+
+onDestroy(() => {
+    log_lvl = 1;
+    if (log_lvl) {
+        console.log(`Destroying bb page for post_id: ${$idaa_slct?.post_id}`);
+    }
+
+    let message = {'post_id': null};
+    window.parent.postMessage(message, "*");
+
+    $idaa_slct.post_id = null;
+    $idaa_slct.post_obj = null;
+});
+</script>
+
+
+
+<svelte:head>
+	<title>
+        IDAA Bulletin Board:
+        {$lq__post_obj?.name ? ae_util.shorten_string({ string: $lq__post_obj?.name, max_length: 20, begin_length: 10, end_length: 4 }) : ''}
+        - Novi - {$ae_loc?.name}
+    </title>
+</svelte:head>
+
+<header class="ae_header flex flex-row flex-wrap gap-2 items-center justify-evenly w-full">
+    <h2
+        class="
+            ae_name post__name
+            h3
+            text-2xl font-bold
+            flex flex-row gap-2 items-center justify-center
+            min-w-1/2
+            max-w-full
+            "
+            >
+            <!-- <span class="ae_icon fas fa-calendar-alt"></span> -->
+            <span class="ae_icon fas fa-calendar-day"></span>
+            {$lq__post_obj?.name ? $lq__post_obj?.name : 'BB Post'}
+    </h2>
+
+    <div
+        class="
+            flex flex-row gap-2 items-center justify-evenly
+            min-w-1/4
+            max-w-full
+        "
+        >
+        {#if $lq__post_obj?.topic_id}<span class="badge badge-info preset-tonal-secondary"><span class="fas fa-user-md m-1"></span> {$lq__post_obj?.topic_name}</span>{/if}
+
+        <span class="float-right flex flex-row flex-wrap gap-1 items-center justify-end">
+
+            {#if $lq__post_obj?.topic_name}
+                <span class="badge badge-info preset-tonal-tertiary"><span class="fas fa-user-md m-1"></span> {$lq__post_obj?.topic_name}</span>
+            {/if}
+            {#if $ae_loc.trusted_access && $lq__post_obj?.hide}
+                <span class="badge badge-warning"><span class="fas fa-exclamation-triangle m-1"></span> Hidden</span>
+            {/if}
+            {#if $ae_loc.administrator_access && !$lq__post_obj?.enable}
+                <span class="badge badge-warning preset-tonal-warning"><span class="fas fa-exclamation-triangle m-1"></span> Not enabled</span>
+            {/if}
+        </span>
+    </div>
+
+</header>
+
+<div
+    class="
+        flex flex-row gap-2 items-center justify-evenly
+        w-full
+        p-1 pb-2 mb-2
+        border-b border-b-surface-300-700
+        "
+    >
+
+    <a href="/idaa/bb" class="novi_btn btn btn-secondary btn-sm
+        preset-tonal-tertiary border border-tertiary-500
+        hover:preset-filled-tertiary-500
+        transition
+        ">
+        <span class="fas fa-arrow-left m-1"></span> Back to Posts List
+        <!-- <span class="fas fa-times m-1"></span> View Other Meetings -->
+    </a>
+
+    <!-- View (default)/Edit post_id toggle -->
+    {#if $idaa_sess.bb.edit__post_id}
+        <button
+            type="button"
+            class="novi_btn btn btn-warning btn-sm preset-tonal-tertiary border border-tertiary-500
+            hover:preset-filled-tertiary-500 transition"
+            onclick={() => {
+                $idaa_sess.bb.edit__post_id = false;
+                if (log_lvl) {
+                    console.log(`Toggle edit__post_id: ${$idaa_sess.bb.edit__post_id}`);
+                }
+            }}
+            title="View this BB Post"
+            >
+            View Post?
+        </button>
+    {:else}
+        <!-- This checks if the currently logged in Novi user has a matching UUID or email address. -->
+        {#if ($ae_loc.trusted_access && $ae_loc.edit_mode) || $lq__post_obj?.external_person_id === $idaa_loc.novi_uuid || $lq__post_obj?.contact_li_json[0].email === $idaa_loc.novi_email}
+            <button
+                type="button"
+                class="novi_btn btn btn-warning btn-sm preset-tonal-warning border border-warning-500
+                hover:preset-filled-warning-500 transition"
+                onclick={() => {
+                    $idaa_sess.bb.edit__post_id = $idaa_slct.post_id;
+                    if (log_lvl) {
+                        console.log(`Toggle edit__post_id: ${$idaa_sess.bb.edit__post_id}`);
+                    }
+                }}
+                title="Edit this BB Post"
+                >
+                <span class="fas fa-edit m-1"></span>
+                Edit Post?
+            </button>
+        {/if}
+    {/if}
+</div>
+
+
+
+{#if $idaa_sess.bb.edit__post_id}
+<!-- <Comp__post_obj_id_edit
+    lq__post_obj={lq__post_obj}
+    lq__post_comment_obj_li={lq__post_comment_obj_li}
+    lq__post_comment_obj={lq__post_comment_obj}
+    /> -->
+    EDIT GOES HERE?
+{:else}
+<Comp__post_obj_id_view
+    lq__post_obj={lq__post_obj}
+    lq__post_comment_obj_li={lq__post_comment_obj_li}
+    lq__post_comment_obj={lq__post_comment_obj}
+    />
+{/if}
--- a/src/routes/idaa/(idaa)/bb/[post_id]/+page.ts
+++ b/src/routes/idaa/(idaa)/bb/[post_id]/+page.ts
@@ -0,0 +1,42 @@
+import type { PageLoad } from './$types';
+
+console.log(`ae_idaa_bulletin_board [post_id] +page.ts start`);
+
+import { browser } from '$app/environment';
+import { posts_func } from '$lib/ae_posts/ae_posts_functions';
+
+export const load = (async ({ params, parent }) => { // route
+    let log_lvl: number = 0;
+
+    let data = await parent();
+    data.log_lvl = log_lvl;
+
+    let account_id = data.account_id;
+    let ae_acct = data[account_id];
+
+    let post_id = params.post_id;
+
+    ae_acct.slct.post_id = post_id;
+
+    if (browser) {
+        if (log_lvl) {
+            console.log(`ae_idaa_posts posts [post_id] +page.ts: post_id = `, post_id);
+        }
+        // Load post post object
+        let load_post_obj = await posts_func.load_ae_obj_id__post({
+            api_cfg: ae_acct.api,
+            post_id:  post_id,
+            inc_comment_li: true,
+            log_lvl: log_lvl
+        });
+        if (log_lvl) {
+            console.log(`load_post_obj = `, load_post_obj);
+        }
+        ae_acct.slct.post_obj = load_post_obj;
+    }
+
+    data[account_id] = ae_acct;
+
+    return data;
+    // return {};
+}) satisfies PageLoad;
--- a/src/routes/idaa/(idaa)/bb/ae_idaa_comp__post_obj_li.svelte
+++ b/src/routes/idaa/(idaa)/bb/ae_idaa_comp__post_obj_li.svelte
@@ -56,7 +56,31 @@ onMount(() => {
        {/if}

        <div class="ae_options flex flex-row gap-2 items-center justify-center">
+            <a
+                href="/idaa/bb/{idaa_post_obj?.post_id}"
+                class="novi_btn btn btn-secondary btn-md preset-tonal-primary border border-primary-500 hover:preset-filled-primary-500 transition"
+                title={`Open to see details: ${idaa_post_obj?.name}`}
+                >
+                <span class="fas fa-envelope-open m-1"></span>
+                <!-- <span class="fas fa-info-circle"></span> -->
+                View Post
+
+                {#if idaa_post_obj?.post_comment_count}
+                    <span class="ae_badge ae_info post__post_comment_count">
+                        <span class="fas fa-comments"></span> {(idaa_post_obj?.post_comment_count == 1 ? `${idaa_post_obj?.post_comment_count} comment` : `${idaa_post_obj?.post_comment_count} comments` )}
+                    </span>
+                {/if}
+
+                {#if idaa_post_obj?.linked_li_json?.length}
+                    <span class="ae_badge ae_info post__linked_li_count">
+                        <span class="fas fa-link"></span> {idaa_post_obj?.linked_li_json?.length}
+                        {(idaa_post_obj?.linked_li_json?.length == 1 ? ' file' : ' files')}
+                    </span>
+                {/if}
+            </a>
            <button
+                type="button"
+                disabled={!$ae_loc.administrator_access}
                on:click={() => {
                    $idaa_slct.post_id = idaa_post_obj?.post_id;
                    $idaa_slct.post_obj = idaa_post_obj;
@@ -76,7 +100,7 @@ onMount(() => {
                    $idaa_sess.bb.show__modal_view__post_id = idaa_post_obj?.post_id;
                    $idaa_sess.bb.show__modal_edit__post_id = false;
                }}
-                class="novi_btn btn btn-md preset-tonal-primary border border-primary-500 hover:preset-filled-primary-500 transition"
+                class="novi_btn btn btn-md preset-tonal-error border border-error-500 hover:preset-filled-error-500 transition"
                title={`View: ${idaa_post_obj?.title}`}
                >
                <span class="fas fa-envelope-open m-1"></span> Open
@@ -97,6 +121,8 @@ onMount(() => {

            {#if ($ae_loc.trusted_access && $ae_loc.edit_mode) || idaa_post_obj.external_person_id === $idaa_loc.novi_uuid}
                <button
+                    type="button"
+                    disabled={!$ae_loc.administrator_access}
                    on:click={() => {
                        $idaa_slct.post_id = idaa_post_obj?.post_id;
                        $idaa_slct.post_obj = idaa_post_obj;
@@ -108,7 +134,7 @@ onMount(() => {
                        $idaa_sess.bb.show__modal_view__post_id = idaa_post_obj.post_id;
                        $idaa_sess.bb.show__inline_edit__post_obj = true;
                    }}
-                    class="novi_btn btn btn-sm preset-tonal-warning border border-warning-500 hover:preset-filled-warning-500 transition"
+                    class="novi_btn btn btn-sm preset-tonal-error border border-error-500 hover:preset-filled-error-500 transition"
                    title={`Edit post: ${idaa_post_obj.title}`}
                    >
                    <span class="fas fa-edit m-1"></span> Edit Post
--- a/src/routes/idaa/(idaa)/recovery_meetings/[event_id]/+page.svelte
+++ b/src/routes/idaa/(idaa)/recovery_meetings/[event_id]/+page.svelte
@@ -36,6 +36,7 @@ $idaa_slct.event_id = ae_acct.slct.event_id;
 // $idaa_slct.event_obj = ae_acct.slct.event_obj;


+// Functions and Logic
 let lq__event_obj = $derived(liveQuery(async () => {
    if (log_lvl) {
        console.log(`lq__event_obj: event_id = ${$idaa_slct?.event_id}`);