Files
OSIT-AE-App-Svelte/src/routes/journals/ae_comp__journal_obj_li.svelte

125 lines
5.0 KiB
Svelte

<script lang="ts">
// let log_lvl: number = 0;
// *** Import Svelte specific
// import { goto } from '$app/navigation';
// *** Import other supporting libraries
// import { Spinner } from 'flowbite-svelte';
import { BookOpenText } from '@lucide/svelte';
// *** Import Aether specific variables and functions
import { ae_util } from '$lib/ae_utils/ae_utils';
import { ae_snip, ae_loc, ae_sess, ae_api, ae_trig, slct, slct_trigger } from '$lib/ae_stores';
import { journals_loc, journals_sess, journals_slct } from '$lib/ae_journals/ae_journals_stores';
// *** Setup Svelte properties
interface Props {
lq__journal_obj_li: any;
}
let { lq__journal_obj_li }: Props = $props();
</script>
<section class="journal_list flex flex-col gap-2 items-center justify-center w-full">
{#if $lq__journal_obj_li && $lq__journal_obj_li.length}
{#each $lq__journal_obj_li as journals_journal_obj, index}
<div
class="container journal journal_obj border border-1 rounded p-2 mb-2 space-y-2 w-full max-w-screen-lg flex flex-col items-center justify-center bg-{journals_journal_obj?.cfg_json.color_scheme}-100"
class:hidden={(journals_journal_obj?.hide || !journals_journal_obj?.enable) && !$ae_loc.trusted_access}
class:dim={journals_journal_obj.hide}
class:bg-warning-100={!journals_journal_obj?.enable}
class:text-warning-900={!journals_journal_obj?.enable}
>
<header class="ae_header flex flex-row gap-2 items-center justify-between w-full">
<h3 class="journal__name h3">
<span class="journal__name">{@html journals_journal_obj.name}</span>
</h3>
<!-- Show a label if the type code is set -->
{#if journals_journal_obj.type_code}
<span class="bg-yellow-50 text-yellow-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-yellow-900 dark:text-yellow-300">
<!-- <span class="ae_label">Type:</span> -->
<span class="ae_value">{journals_journal_obj.type_code}</span>
</span>
{/if}
</header>
<!-- {journals_journal_obj?.tmp_sort_3} -->
{#if journals_journal_obj.description}
<div
class="
prose
space-y-1
journal__description
p-2
w-full max-w-screen-sm md:max-w-screen-md
font-mono
text-gray-900
dark:bg-blue-900 dark:text-gray-100
shadow-md rounded-lg
text-sm font-normal text-wrap word-break
prose-h1:underline prose-h1:decoration-double
prose-h2:underline
prose-h1:text-2xl prose-h2:text-xl prose-h3:text-lg
prose-h1:m-0 prose-h2:m-0 prose-h3:m-0 prose-h4:m-0 prose-h5:m-0 prose-h6:m-0
prose-li:m-0 prose-li:p-0 prose-li:line-height-none
"
>
{@html journals_journal_obj.description_md_html}
</div>
{/if}
<div class="ae_options flex flex-row gap-2 items-center justify-center">
<a href="/journals/{journals_journal_obj?.journal_id}" class="btn btn-secondary btn-md variant-ghost-primary hover:variant-filled-primary hover:underline transition" title={`View: ${journals_journal_obj?.name}`}>
<!-- <span class="fas fa-envelope-open m-1"></span> -->
<BookOpenText class="m-1" />
Open
{#if journals_journal_obj?.journal_entry_count}
<span class="ae_badge ae_info journal__journal_entry_count">
{@html (journals_journal_obj?.journal_entry_count == 1 ? `${journals_journal_obj?.journal_entry_count}&times; entry` : `${journals_journal_obj?.journal_entry_count}&times; entries` )}
</span>
{/if}
</a>
</div>
<section
class="ae_section ae_footer ae_meta journal__meta mt-2 flex flex-col sm:flex-row gap-1 items-center justify-center text-sm text-gray-500"
class:hidden={!$ae_loc.administrator_access || !$ae_loc.edit_mode}
>
<div class="ae_group">
{#if !journals_journal_obj.updated_on}
<span
class="journal__created_on"
>
<span class="ae_label">Created on:</span>
<span class="ae_value">{ae_util.iso_datetime_formatter(journals_journal_obj.created_on, 'datetime_12_long')}</span>
</span>
{:else}
<span
class="journal__updated_on"
>
<span class="ae_label">Updated on:</span>
<span class="ae_value">{ae_util.iso_datetime_formatter(journals_journal_obj.updated_on, 'datetime_12_long')}</span>
</span>
{/if}
</div>
</section>
</div>
{/each}
{:else}
No journals found at this time
{/if}
</section>
<!-- {/if} -->