added drag&drop
This commit is contained in:
parent
6116069fff
commit
623d3f90bf
|
|
@ -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}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue