added drag&drop

This commit is contained in:
beo3000 2026-02-22 16:17:03 +01:00
parent 6116069fff
commit 623d3f90bf
1 changed files with 59 additions and 15 deletions

View File

@ -2,7 +2,7 @@
import type { Topic } from '@ka-note/shared';
import { liveQuery } from 'dexie';
import { db } from '$lib/db/schema';
import { createTopic, createHistoryEntry, JOURNAL_TOPIC_ID } from '$lib/db/repositories';
import { createTopic, createHistoryEntry, updateTopicSortOrder, JOURNAL_TOPIC_ID } from '$lib/db/repositories';
import { today } from '$lib/db/helpers';
import { processedTopicIds } from '$lib/stores/agenda';
import TopicInput from './TopicInput.svelte';
@ -53,6 +53,34 @@
const topic = await createTopic(contextId, title);
await createHistoryEntry(topic.id, today(), 'Thema angelegt.');
}
// --- Drag & Drop ---
let dragId = $state<string | null>(null);
let dragOverId = $state<string | null>(null);
function onDragStart(id: string) {
dragId = id;
}
function onDragOver(id: string) {
if (dragId && id !== dragId) dragOverId = id;
}
function onDragEnd() {
if (dragId && dragOverId) {
const list = showSplit ? [...openTopics] : [...allTopics];
const fromIdx = list.findIndex(t => t.id === dragId);
const toIdx = list.findIndex(t => t.id === dragOverId);
if (fromIdx !== -1 && toIdx !== -1) {
const reordered = [...list];
const [moved] = reordered.splice(fromIdx, 1);
reordered.splice(toIdx, 0, moved);
updateTopicSortOrder(contextId, reordered.map(t => t.id));
}
}
dragId = null;
dragOverId = null;
}
</script>
<TopicInput oncreate={handleCreate} />
@ -65,13 +93,21 @@
{/if}
{#each openTopics as topic (topic.id)}
<TopicCard
{topic}
{contextId}
{isDailyLog}
{isMeetingMode}
isProcessed={false}
/>
<div
draggable="true"
ondragstart={() => onDragStart(topic.id)}
ondragover={(e) => { e.preventDefault(); onDragOver(topic.id); }}
ondragend={onDragEnd}
class="transition-opacity {dragId === topic.id ? 'opacity-30' : ''} {dragOverId === topic.id ? 'outline outline-2 outline-accent rounded-lg' : ''}"
>
<TopicCard
{topic}
{contextId}
{isDailyLog}
{isMeetingMode}
isProcessed={false}
/>
</div>
{/each}
{#if processedTopics.length > 0}
@ -91,13 +127,21 @@
{/each}
{:else}
{#each allTopics as topic (topic.id)}
<TopicCard
{topic}
{contextId}
{isDailyLog}
{isMeetingMode}
isProcessed={processedIds.has(topic.id)}
/>
<div
draggable="true"
ondragstart={() => onDragStart(topic.id)}
ondragover={(e) => { e.preventDefault(); onDragOver(topic.id); }}
ondragend={onDragEnd}
class="transition-opacity {dragId === topic.id ? 'opacity-30' : ''} {dragOverId === topic.id ? 'outline outline-2 outline-accent rounded-lg' : ''}"
>
<TopicCard
{topic}
{contextId}
{isDailyLog}
{isMeetingMode}
isProcessed={processedIds.has(topic.id)}
/>
</div>
{/each}
{/if}