78 lines
No EOL
2.6 KiB
Svelte
78 lines
No EOL
2.6 KiB
Svelte
<script lang="ts">
|
|
import { deleteEntry } from "$lib/api";
|
|
import { credentials } from "$lib/stores";
|
|
import { TITLED_ENTRIES } from "$lib/entry";
|
|
import EntryKind from "./EntryKind.svelte";
|
|
import { createEventDispatcher } from "svelte";
|
|
|
|
let dispatch = createEventDispatcher()
|
|
|
|
export let id: string;
|
|
export let creationDate: Date;
|
|
export let kind: "song" | "album" | "event" | "feeling" | "environment" | "date" | "memory";
|
|
export let title: string | undefined;
|
|
|
|
export let isExtended = false;
|
|
let prevExtended = isExtended
|
|
|
|
$: if (prevExtended !== isExtended) {
|
|
dispatch(isExtended ? 'extended' : 'contracted', { id })
|
|
}
|
|
|
|
async function processDeletion(id: string) {
|
|
await deleteEntry($credentials!, id);
|
|
dispatch('deleted', {
|
|
id,
|
|
})
|
|
}
|
|
|
|
$: cardClass = () => {
|
|
let cardClass = "border border-gray-200 rounded-lg shadow w-full flex p-3.5"
|
|
|
|
if (isExtended) {
|
|
cardClass += " flex-col gap-1.5"
|
|
} else {
|
|
if (TITLED_ENTRIES.includes(kind)) {
|
|
cardClass += " flex-col"
|
|
} else {
|
|
cardClass += " gap-4 items-center"
|
|
}
|
|
}
|
|
|
|
return cardClass
|
|
};
|
|
</script>
|
|
|
|
<div class={cardClass()} id={`entry__${id}`}>
|
|
<button on:click={() => { prevExtended = isExtended; isExtended = !isExtended }}>
|
|
<div class="flex justify-between items-center">
|
|
<div class="flex items-center gap-2.5">
|
|
<EntryKind kind={kind}/>
|
|
{#if title != null && isExtended}
|
|
<span>Created at: <time datetime={creationDate.toISOString()}>{creationDate.toLocaleDateString()}</time></span>
|
|
{:else if title != null}
|
|
<h2 class="text-xl text-left font-semibold">{title}</h2>
|
|
{:else if isExtended}
|
|
<span>Created at: <time datetime={creationDate.toISOString()}>{creationDate.toLocaleDateString()}</time></span>
|
|
{/if}
|
|
</div>
|
|
{#if isExtended}
|
|
<button on:click={() => processDeletion(id)} class="rounded-lg bg-red-600 text-white px-2.5 py-1.5 text-center hover:bg-red-700 focus:ring-4 focus:ring-violet-300">Delete entry</button>
|
|
{/if}
|
|
</div>
|
|
|
|
{#if title != null && isExtended}
|
|
<h2 class="text-xl text-left font-semibold mt-2">{title}</h2>
|
|
{/if}
|
|
</button>
|
|
|
|
<slot/>
|
|
|
|
{#if !isExtended}
|
|
<slot name="contracted"/>
|
|
{/if}
|
|
|
|
{#if isExtended}
|
|
<slot name="extended"/>
|
|
{/if}
|
|
</div> |