67 lines
1.9 KiB
Svelte
67 lines
1.9 KiB
Svelte
<script lang="ts">
|
|
import { LabelLoadedStore } from '$lib/label/adapter/presenter/labelLoadedStore';
|
|
import ColorCode from '$lib/label/framework/ui/ColorCode.svelte';
|
|
import EditLabelDialog, {
|
|
type EditLabelDialogFormParams,
|
|
} from '$lib/label/framework/ui/EditLabelDialog.svelte';
|
|
import PostLabel from '$lib/label/framework/ui/PostLabel.svelte';
|
|
import { getContext, onMount } from 'svelte';
|
|
|
|
const { id }: { id: number } = $props();
|
|
|
|
const labelLoadedStore = getContext<LabelLoadedStore>(LabelLoadedStore.name);
|
|
const labelLoadedState = $derived($labelLoadedStore);
|
|
const { trigger: loadLabel } = labelLoadedStore;
|
|
const label = $derived(labelLoadedState.data);
|
|
|
|
const formDefaultValues: EditLabelDialogFormParams | null = $derived.by(() => {
|
|
if (labelLoadedState.data === null) {
|
|
return null;
|
|
}
|
|
return {
|
|
name: labelLoadedState.data.name,
|
|
color: labelLoadedState.data.color.hexWithoutAlpha,
|
|
};
|
|
});
|
|
|
|
async function onSubmit(params: EditLabelDialogFormParams): Promise<boolean> {
|
|
return true;
|
|
}
|
|
|
|
onMount(() => loadLabel(id));
|
|
</script>
|
|
|
|
<div class="dashboard-container mb-10">
|
|
<div class="flex flex-row items-center justify-between">
|
|
<h1 class="py-16 text-5xl font-bold text-gray-800">Label Details</h1>
|
|
<EditLabelDialog
|
|
title="Update Label"
|
|
triggerButtonText="Edit"
|
|
disabled={!labelLoadedState.isSuccess()}
|
|
defaultValues={formDefaultValues ?? undefined}
|
|
{onSubmit}
|
|
/>
|
|
</div>
|
|
<div class="grid grid-cols-[auto_1fr] gap-x-8 gap-y-3">
|
|
<span class="font-medium whitespace-nowrap">ID</span>
|
|
<span>{label?.id}</span>
|
|
|
|
<span class="font-medium whitespace-nowrap">Name</span>
|
|
<span>{label?.name}</span>
|
|
|
|
<span class="font-medium whitespace-nowrap">Color</span>
|
|
<div class="content-center">
|
|
{#if label}
|
|
<ColorCode color={label.color} />
|
|
{/if}
|
|
</div>
|
|
|
|
<span class="font-medium whitespace-nowrap">Preview</span>
|
|
<div class="content-center">
|
|
{#if label}
|
|
<PostLabel {label} />
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
</div>
|