82 lines
3.0 KiB
Svelte
82 lines
3.0 KiB
Svelte
<script lang="ts">
|
|
import { goto } from '$app/navigation';
|
|
import { softDeleteContext, toggleFavorite, reorderContext } from '$lib/db/repositories';
|
|
import ConfirmDialog from '$lib/components/ConfirmDialog.svelte';
|
|
import type { AgendaContext, PersonMeta, PersonSubType } from '@ka-note/shared';
|
|
|
|
interface Props {
|
|
persons: AgendaContext[];
|
|
}
|
|
let { persons }: Props = $props();
|
|
|
|
function displayName(name: string): string {
|
|
return name.replace('Person ', '');
|
|
}
|
|
|
|
const subTypeLabels: Record<PersonSubType, string> = {
|
|
contact: 'Kontakt',
|
|
employee: 'Mitarbeiter',
|
|
colleague: 'Kollege'
|
|
};
|
|
|
|
const subTypeColors: Record<PersonSubType, string> = {
|
|
contact: 'bg-[#555] text-[#ccc]',
|
|
employee: 'bg-accent/30 text-accent',
|
|
colleague: 'bg-[#00b894]/30 text-[#00b894]'
|
|
};
|
|
|
|
let confirmDeleteId = $state<string | null>(null);
|
|
let confirmDeleteName = $state('');
|
|
|
|
function requestDelete(id: string, name: string) {
|
|
confirmDeleteId = id;
|
|
confirmDeleteName = name;
|
|
}
|
|
|
|
async function handleDelete() {
|
|
if (confirmDeleteId) await softDeleteContext(confirmDeleteId);
|
|
confirmDeleteId = null;
|
|
}
|
|
</script>
|
|
|
|
{#if persons.length > 0}
|
|
<div class="flex flex-col gap-2">
|
|
{#each persons as ctx, i (ctx.id)}
|
|
{@const subType = ((ctx.meta as PersonMeta | null)?.personSubType ?? 'contact') as PersonSubType}
|
|
<div class="flex items-center gap-2">
|
|
<div class="flex flex-col">
|
|
<button class="text-[#555] hover:text-[#aaa] disabled:opacity-20 leading-none px-1" onclick={() => reorderContext(ctx.id, 'up')} disabled={i === 0} title="Nach oben">▲</button>
|
|
<button class="text-[#555] hover:text-[#aaa] disabled:opacity-20 leading-none px-1" onclick={() => reorderContext(ctx.id, 'down')} disabled={i === persons.length - 1} title="Nach unten">▼</button>
|
|
</div>
|
|
<button
|
|
class="rounded border border-[#444] bg-sidebar px-2.5 py-2.5 transition-colors hover:border-[#666] {ctx.isFavorite ? 'text-yellow-400' : 'text-[#555] hover:text-yellow-400/60'}"
|
|
onclick={() => toggleFavorite(ctx.id)}
|
|
title={ctx.isFavorite ? 'Aus Sidebar entfernen' : 'In Sidebar anzeigen'}
|
|
>★</button>
|
|
<button
|
|
class="flex flex-1 items-center justify-between rounded-lg border border-[#444] bg-sidebar px-4 py-3 text-left transition-colors hover:border-[#666] hover:bg-[#2a2a2a]"
|
|
onclick={() => goto(`/context/${ctx.id}`)}
|
|
>
|
|
<span class="font-bold text-white">{displayName(ctx.name)}</span>
|
|
<span class="rounded px-2 py-0.5 text-xs {subTypeColors[subType]}">{subTypeLabels[subType]}</span>
|
|
</button>
|
|
<button
|
|
class="rounded border border-[#444] bg-sidebar px-2.5 py-2.5 text-[#888] transition-colors hover:border-red-900 hover:text-red-400"
|
|
onclick={() => requestDelete(ctx.id, displayName(ctx.name))}
|
|
title="Löschen"
|
|
>🗑</button>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
{:else}
|
|
<div class="text-muted">Keine Personen vorhanden.</div>
|
|
{/if}
|
|
|
|
{#if confirmDeleteId}
|
|
<ConfirmDialog
|
|
message={`Person \u201E${confirmDeleteName}\u201C wirklich löschen?`}
|
|
onconfirm={handleDelete}
|
|
oncancel={() => confirmDeleteId = null}
|
|
/>
|
|
{/if}
|