88 lines
3.1 KiB
Svelte
88 lines
3.1 KiB
Svelte
<script lang="ts">
|
|
import TableBody from '$lib/common/framework/components/ui/table/table-body.svelte';
|
|
import TableCell from '$lib/common/framework/components/ui/table/table-cell.svelte';
|
|
import TableHead from '$lib/common/framework/components/ui/table/table-head.svelte';
|
|
import TableHeader from '$lib/common/framework/components/ui/table/table-header.svelte';
|
|
import TableRow from '$lib/common/framework/components/ui/table/table-row.svelte';
|
|
import Table from '$lib/common/framework/components/ui/table/table.svelte';
|
|
import { LabelCreatedStore } from '$lib/label/adapter/presenter/labelCreatedStore';
|
|
import { LabelsListedStore } from '$lib/label/adapter/presenter/labelsListedStore';
|
|
import CreateLabelDialog, {
|
|
type CreateLabelDialogFormParams,
|
|
} from '$lib/label/framework/ui/CreateLabelDialog.svelte';
|
|
import PostLabel from '$lib/label/framework/ui/PostLabel.svelte';
|
|
import { ColorViewModel } from '$lib/label/adapter/presenter/colorViewModel';
|
|
import { getContext, onMount } from 'svelte';
|
|
import { toast } from 'svelte-sonner';
|
|
|
|
const labelCreatedStore = getContext<LabelCreatedStore>(LabelCreatedStore.name);
|
|
const labelCreatedState = $derived($labelCreatedStore);
|
|
const { trigger: createLabel } = labelCreatedStore;
|
|
|
|
const labelsListedStore = getContext<LabelsListedStore>(LabelsListedStore.name);
|
|
const labelsListedState = $derived($labelsListedStore);
|
|
const { trigger: loadLabels } = labelsListedStore;
|
|
|
|
async function onCreateLabelDialogSubmit(params: CreateLabelDialogFormParams) {
|
|
const colorViewModel = ColorViewModel.fromHex(params.color);
|
|
const color = colorViewModel.toEntity();
|
|
|
|
const state = await createLabel({
|
|
name: params.name,
|
|
color: color,
|
|
});
|
|
|
|
if (state.isSuccess()) {
|
|
loadLabels();
|
|
toast.success(`Label created successfully with ID: ${state.data.id}`);
|
|
} else if (state.isError()) {
|
|
toast.error('Failed to create label', {
|
|
description: state.error.message,
|
|
});
|
|
}
|
|
}
|
|
|
|
onMount(() => loadLabels());
|
|
</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</h1>
|
|
<CreateLabelDialog
|
|
disabled={labelCreatedState.isLoading()}
|
|
onSubmit={onCreateLabelDialogSubmit}
|
|
/>
|
|
</div>
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead>ID</TableHead>
|
|
<TableHead>Name</TableHead>
|
|
<TableHead>Color</TableHead>
|
|
<TableHead>Preview</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{#if labelsListedState.isSuccess()}
|
|
{#each labelsListedState.data as label (label.id)}
|
|
<TableRow>
|
|
<TableCell>{label.id}</TableCell>
|
|
<TableCell><span class="text-wrap">{label.name}</span></TableCell>
|
|
<TableCell>
|
|
<div class="flex items-center gap-2">
|
|
<div class="size-4 rounded-full" style="background-color: {label.color.hex};"></div>
|
|
<span class="font-mono text-sm">{label.color.hex}</span>
|
|
</div>
|
|
</TableCell>
|
|
<TableCell>
|
|
<div>
|
|
<PostLabel {label} />
|
|
</div>
|
|
</TableCell>
|
|
</TableRow>
|
|
{/each}
|
|
{/if}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|