2f3125c64b
- Batch formatted all Journals module files using Prettier with printWidth: 80. - Refactored preventDefault to prevent_default across all Svelte components. - Standardized line breaks for imports and long attribute lists for better readability. - Ensured consistent snake_case naming for internal identifiers.
164 lines
6.6 KiB
Svelte
164 lines
6.6 KiB
Svelte
<script lang="ts">
|
|
/**
|
|
* ae_comp__journal_obj_li.svelte
|
|
* Modernized Journal List Component
|
|
* Layout: Responsive Grid (1 col mobile, 2 col tablet, 3 col desktop)
|
|
* Style: Tailwind 4 + Skeleton UI Reference Standard
|
|
*/
|
|
import {
|
|
BookOpenText,
|
|
BookType,
|
|
Hash,
|
|
Calendar,
|
|
Clock
|
|
} from 'lucide-svelte';
|
|
import { ae_util } from '$lib/ae_utils/ae_utils';
|
|
import { ae_loc } from '$lib/stores/ae_stores';
|
|
|
|
interface Props {
|
|
lq__journal_obj_li: any;
|
|
}
|
|
|
|
let { lq__journal_obj_li }: Props = $props();
|
|
</script>
|
|
|
|
<!-- Responsive Grid Container -->
|
|
<section
|
|
class="journal_list grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 w-full max-w-7xl px-4"
|
|
>
|
|
{#if $lq__journal_obj_li && $lq__journal_obj_li.length}
|
|
{#each $lq__journal_obj_li as journal, index}
|
|
<div
|
|
class="
|
|
journal_card
|
|
group relative
|
|
flex flex-col justify-between
|
|
bg-surface-50 dark:bg-surface-900
|
|
border border-surface-500/20 rounded-xl
|
|
p-5 shadow-sm hover:shadow-xl hover:border-primary-500/50
|
|
transition-all duration-200 ease-in-out
|
|
"
|
|
class:hidden={(journal?.hide || !journal?.enable) &&
|
|
!$ae_loc.trusted_access}
|
|
class:opacity-60={journal.hide}
|
|
class:border-warning-500={!journal?.enable}
|
|
>
|
|
<!-- Top Section: Title & Badge -->
|
|
<div class="space-y-3">
|
|
<header class="flex justify-between items-start gap-2">
|
|
<div class="flex items-center gap-3">
|
|
<div
|
|
class="p-2 bg-primary-500/10 rounded-lg text-primary-500 group-hover:bg-primary-500 group-hover:text-white transition-colors"
|
|
>
|
|
<BookType size="1.5em" />
|
|
</div>
|
|
<h3
|
|
class="text-xl font-bold text-surface-900 dark:text-surface-100 line-clamp-1"
|
|
>
|
|
{journal.name}
|
|
</h3>
|
|
</div>
|
|
|
|
{#if journal.type_code}
|
|
<span
|
|
class="badge preset-tonal-warning text-[10px] uppercase tracking-wider font-bold"
|
|
>
|
|
{journal.type_code}
|
|
</span>
|
|
{/if}
|
|
</header>
|
|
|
|
<!-- Description (Power User / Edit Mode Only) -->
|
|
{#if journal.description && $ae_loc.edit_mode}
|
|
<div
|
|
class="prose prose-sm dark:prose-invert max-h-24 overflow-y-auto bg-surface-100/50 dark:bg-surface-800/50 p-3 rounded-lg text-xs font-mono"
|
|
>
|
|
{@html journal.description_md_html}
|
|
</div>
|
|
{/if}
|
|
|
|
<!-- Quick Stats (Clean View) -->
|
|
<div
|
|
class="flex items-center gap-4 text-xs text-surface-600 dark:text-surface-400"
|
|
>
|
|
<div
|
|
class="flex items-center gap-1"
|
|
title="Entry Count"
|
|
>
|
|
<Hash size="1.2em" />
|
|
<span class="font-bold"
|
|
>{journal.journal_entry_count ?? 0}</span
|
|
>
|
|
</div>
|
|
<div
|
|
class="flex items-center gap-1"
|
|
title="Last Updated"
|
|
>
|
|
<Clock size="1.2em" />
|
|
<span
|
|
>{ae_util.iso_datetime_formatter(
|
|
journal.updated_on || journal.created_on,
|
|
'date_short'
|
|
)}</span
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Bottom Section: Actions -->
|
|
<div
|
|
class="mt-6 pt-4 border-t border-surface-500/10 flex flex-col gap-3"
|
|
>
|
|
<a
|
|
href="/journals/{journal?.journal_id}"
|
|
class="btn variant-filled-primary w-full font-bold shadow-md hover:scale-[1.02] active:scale-95 transition-all"
|
|
>
|
|
<BookOpenText size="1.2em" class="mr-2" />
|
|
<span>Open Journal</span>
|
|
</a>
|
|
|
|
<!-- Admin Metadata (Edit Mode Only) -->
|
|
{#if $ae_loc.edit_mode && $ae_loc.administrator_access}
|
|
<div
|
|
class="flex items-center justify-center gap-2 text-[10px] opacity-50 font-mono"
|
|
>
|
|
<Calendar size="1em" />
|
|
<span
|
|
>Created: {ae_util.iso_datetime_formatter(
|
|
journal.created_on,
|
|
'datetime_iso_12_no_seconds'
|
|
)}</span
|
|
>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
|
|
<!-- Status Indicators (Edit Mode Only) -->
|
|
{#if $ae_loc.edit_mode}
|
|
<div class="absolute -top-2 -right-2 flex gap-1">
|
|
{#if journal.hide}
|
|
<span
|
|
class="badge-icon variant-filled-surface shadow-sm"
|
|
title="Hidden">🚫</span
|
|
>
|
|
{/if}
|
|
{#if !journal.enable}
|
|
<span
|
|
class="badge-icon variant-filled-warning shadow-sm"
|
|
title="Disabled">⚠️</span
|
|
>
|
|
{/if}
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
{/each}
|
|
{:else}
|
|
<div
|
|
class="col-span-full p-20 text-center opacity-50 flex flex-col items-center gap-4"
|
|
>
|
|
<BookType size="4em" />
|
|
<p class="text-xl">No journals found in this view.</p>
|
|
</div>
|
|
{/if}
|
|
</section>
|