OSIT-AE-App-Svelte/src/routes/idaa/(idaa)/archives/+page.svelte

<script lang="ts">
    interface Props {
        /** @type {import('./$types').PageData} */
        data: any;
    }
    let { data }: Props = $props();

    let log_lvl: number = $state(0);

    // *** Import Svelte specific
    // import { page } from '$app/state';
    import { browser } from '$app/environment';
    // import { goto, invalidate, pushState, replaceState } from '$app/navigation';

    // *** Import other supporting libraries
    // import { Modal } from 'flowbite-svelte';
    import { liveQuery } from 'dexie';

    // *** Import Aether specific variables and functions
    // import type { key_val } from '$lib/ae_stores';
    // import { ae_util } from '$lib/ae_utils/ae_utils';
    // import { core_func } from '$lib/ae_core/ae_core_functions';
    import { db_archives } from '$lib/ae_archives/db_archives';
    import {
        ae_snip,
        ae_loc,
        ae_sess,
        ae_api,
        ae_trig,
        slct,
        slct_trigger
    } from '$lib/stores/ae_stores';
    import { core_func } from '$lib/ae_core/ae_core_functions';
    import {
        idaa_loc,
        idaa_sess,
        idaa_slct,
        idaa_trig
    } from '$lib/stores/ae_idaa_stores';
    // import { archives_func } from '$lib/ae_archives/ae_archives_functions';

    import Comp__archive_obj_li from './ae_idaa_comp__archive_obj_li.svelte';
    import Help_tech from '$lib/app_components/e_app_help_tech.svelte';

    let lq__archive_obj_li = $derived(
        liveQuery(async () => {
            let results = await db_archives.archive
                .where('account_id')
                .equals($slct.account_id)
                // .orderBy('updated_on')
                // .toArray()
                // .reverse() // Removed reverse: sortBy('sort') already provides the correct 1, 2, 3... order
                .sortBy('sort');
            // .sortBy('updated_on');
            // .sortBy('updated_on, created_on');
            // .sortBy('[updated_on+created_on]');
            // .sortBy('[created_on+updated_on]');

            return results;
        })
    );

    if (browser) {
        console.log('Browser environment detected.');

        // The archive_id should not already be set while the page is loading if we are looking at this page?
        // let message = {'archive_id': $idaa_slct?.archive_id ?? null};
        $idaa_slct.archive_id = null;
        $idaa_slct.archive_content_id = null;
        let message = {
            archive_id: $idaa_slct.archive_id,
            archive_content_id: $idaa_slct.archive_content_id
        };
        window.parent.postMessage(message, '*');

        // add_activity_log(
        //     {
        //         action: 'idaa_archives_page',
        //         action_with: 'browser',
        //     }
        // );
    }

    function add_activity_log({
        action = 'idaa_archives_page',
        action_with = 'none'
    }: {
        action?: string;
        action_with?: string;
    }) {
        let last_cache_refresh_iso = new Date($ae_loc?.last_cache_refresh);

        let activity_description = `
        ${$idaa_loc.novi_full_name ?? 'none'} ${$idaa_loc.novi_email ?? 'no-email'}
        allow=${$ae_loc?.allow_access}
        last_cache_refresh=${last_cache_refresh_iso.toLocaleString()}
        data_route=${data?.route.toString() ?? 'unknown'}
    `;

        let data_kv = {
            external_client_id: data?.route.id,
            name: `IDAA: ${$idaa_loc.novi_full_name ?? 'none'} ${$idaa_loc.novi_email ?? ''}`,
            description: activity_description ?? null,
            object_type: 'archive', // archive, post, event
            // object_id_random: data?.params?.archive_id ?? null,
            // object_id_random: ae_acct.slct.archive_id, // data?.params?.archive_id ?? null,
            url_root: data?.url.origin,
            // url_full_path: data?.url.href,
            url_full_path: data?.url.pathname,
            url_params: data?.url.searchParams.toString(),
            action: action,
            action_with: action_with ?? 'none',
            meta_json: {
                allow_access: $ae_loc?.allow_access,
                last_cache_refresh: $ae_loc?.last_cache_refresh,
                last_cache_refresh_iso: last_cache_refresh_iso.toISOString(),
                last_cache_refresh_locale:
                    last_cache_refresh_iso.toLocaleString(),
                access_level: $ae_loc?.access_level,
                iframe: $ae_loc?.iframe
                // site_access_key: $ae_loc?.site_access_key,
                // site_domain_access_key: $ae_loc?.site_domain_access_key,
                // site_domain: $ae_loc?.site_domain,
                // extra_data: extra_data ?? '',
                // log_lvl: log_lvl,
            }
        };

        core_func.create_ae_obj__activity_log({
            api_cfg: $ae_api,
            account_id: $ae_loc.account_id,
            data_kv: data_kv,
            log_lvl: log_lvl
        });
    }
</script>

<svelte:head>
    <title>
        IDAA Archives: - Novi - {$ae_loc?.title}
    </title>
</svelte:head>

<!-- <h1>Archives {$lq__archive_obj_li?.length}</h1> -->

<Help_tech
    e_class="mx-auto"
    e_class_h1="novi_m0"
    e_class_h2="novi_m0"
    btn_class="novi_btn"
    show_btn_class="z-10"
    additional_kv={{
        novi_uuid: $idaa_loc.novi_uuid,
        novi_email: $idaa_loc.novi_email,
        novi_full_name: $idaa_loc.novi_full_name
    }}
></Help_tech>

{#await lq__archive_obj_li}
    <div class="flex flex-col items-top justify-center p-8">
        <span class="fas fa-spinner fa-spin text-4xl text-primary-500 mb-4"
        ></span>
        <span class="text-lg text-gray-600 dark:text-gray-400"
            >Loading archives...</span
        >
    </div>
{:then}
    {#if $lq__archive_obj_li && $lq__archive_obj_li?.length}
        <Comp__archive_obj_li {lq__archive_obj_li} />
    {:else}
        <div class="flex flex-col items-top justify-center p-4 text-center">
            <p class="text-lg text-gray-600 dark:text-gray-400 mb-4">
                No archives found.
            </p>
            <p class="text-md text-gray-500 dark:text-gray-300">
                Archives will appear here once created.
            </p>
        </div>
    {/if}
{/await}