OSIT-AE-App-Svelte/src/routes/testing/data_store_v3/+page.svelte

<script lang="ts">
    import AE_Element_Data_Store_V3 from '$lib/elements/element_data_store_v3.svelte';
    import { ae_loc } from '$lib/stores/ae_stores';
    import { db_core } from '$lib/ae_core/db_core';

    // let test_code_global = 'hub__site__root_page_header'; // Expected to be a global default
    // let test_name_global = 'Global Header Test - hub__site__root_page_header';
    // let test_code_account = 'hub__site__root_page_header';
    // let test_name_account = 'Account Header Test - hub__site__root_page_header';
    // let test_code_specific = 'event_launcher_main_info';
    // let test_name_specific = 'Event Specific Test - event_launcher_main_info';


    let test_null_act_and_for = 'events__leads__overview'; // Expecting the Global Default
    let test_code_account = 'hub__site__root_page_header'; // Expecting the Account Default
    let test_code_and_for = 'event_launcher_main_info'; // Expecting the Specific Record (Event ID)
    let test_event_id = 'pjrcghqwert';


    let log_lvl = 2;
    let refresh_trigger = $state(0);

    async function clear_cache() {
        if (log_lvl) console.log('Asking to confirm clearing Data Store cache...');

        if (confirm('Are you sure you want to clear the local Data Store cache?')) {
            await db_core.data_store.clear();
            refresh_trigger++;
            alert('Cache cleared.');
        }
    }
</script>

<div class="p-8 space-y-8 max-w-4xl mx-auto h-full overflow-y-auto">
    <header class="border-b border-surface-500/30 pb-4 flex justify-between items-center">
        <div>
            <h1 class="h1">Data Store V3 Test Page</h1>
            <p class="opacity-70">Testing cascading lookup: Specific &rarr; Account &rarr; Global</p>
        </div>
        <div class="flex gap-2">
            <button class="btn variant-filled-warning" onclick={clear_cache}>
                <span class="fas fa-trash mr-2"></span> Clear Cache
            </button>
            <button class="btn variant-filled-primary" onclick={() => refresh_trigger++}>
                <span class="fas fa-sync mr-2"></span> Force Refresh
            </button>
        </div>
    </header>

    {#key refresh_trigger}
    <section class="card p-4 space-y-4 variant-soft-primary">
        <h2 class="h3">Scenario 1: Global Default</h2>
        <p class="text-sm">Fetching code <code>{test_null_act_and_for}</code>. Should fall back to <code>account_id = NULL</code> if not found for account.</p>
        <div class="bg-surface-100-800-token p-4 rounded-lg border border-surface-500/20">
            <AE_Element_Data_Store_V3
                ds_code={test_null_act_and_for}
                ds_name={'Global Default Test'}
                {log_lvl}
                debug={true}
            />
        </div>
    </section>

    <section class="card p-4 space-y-4 variant-soft-secondary">
        <h2 class="h3">Scenario 2: Account Default</h2>
        <p class="text-sm">Fetching code <code>{test_code_account}</code> for Account ID: <code>{$ae_loc.account_id}</code>.</p>
        <div class="bg-surface-100-800-token p-4 rounded-lg border border-surface-500/20">
            <AE_Element_Data_Store_V3
                ds_code={test_code_account}
                ds_name={'Account Default Test'}
                {log_lvl}
                debug={true}
            />
        </div>
    </section>

    <section class="card p-4 space-y-4 variant-soft-tertiary">
        <h2 class="h3">Scenario 3: Specific Record (Event Override)</h2>
        <p class="text-sm">Fetching code <code>{test_code_and_for}</code> linked to <code>for_type: event</code> and <code>for_id: {test_event_id}</code>.</p>
        <div class="bg-surface-100-800-token p-4 rounded-lg border border-surface-500/20">
            <AE_Element_Data_Store_V3
                ds_code={test_code_and_for}
                ds_name={'Specific Record Test'}
                for_type="event"
                for_id={test_event_id}
                {log_lvl}
                debug={true}
            />
        </div>
    </section>

    <section class="card p-4 space-y-4 variant-soft-tertiary">
        <h2 class="h3">Scenario 4: Change Props Passed</h2>
        <p class="text-sm">Fetching code <code>{test_code_and_for}</code> linked to <code>for_type: event</code> and <code>for_id: {test_event_id}</code>.</p>
        <div class="bg-surface-100-800-token p-4 rounded-lg border border-surface-500/20">
            <AE_Element_Data_Store_V3
                ds_code={test_code_and_for}
                ds_name={'Specific Record Test'}
                ds_type="html"
                for_type="event"
                for_id={test_event_id}
                class_li="w-fit max-w-(--breakpoint-lg) text-xl text-red-500 font-bold text-center p-1 m-1 border border-red-200 rounded-md bg-red-100"
                show_edit={false}
                show_edit_btn={true}
                {log_lvl}
                debug={true}
            />
        </div>
    </section>
    {/key}

    <section class="card p-4 space-y-4">
        <h2 class="h3">Current Context</h2>
        <div class="grid grid-cols-2 gap-4 text-xs font-mono">
            <div class="bg-surface-900 text-success-500 p-2 rounded">
                <strong>Account ID:</strong> {$ae_loc.account_id || 'NULL'}
            </div>
            <div class="bg-surface-900 text-success-500 p-2 rounded">
                <strong>Edit Mode:</strong> {$ae_loc.edit_mode}
            </div>
        </div>
    </section>
</div>