feat: organize lists with drag and drop
This commit is contained in:
+145
-7
@@ -9,6 +9,7 @@ import { buildTaskRrule, defaultTaskDueAt, filterTasks, fromDateTimeLocal, group
|
||||
import { formatApiErrorDetail, isTaskView, nextTotalAfterLocalTaskAdd, normalizeRequiredName, readStoredBoolean, readStoredNavigation, shouldToggleRowSwipe, writeCountdownCache, writeStoredBoolean, writeStoredNavigation } from './lib/mvp-utils'
|
||||
import { csrfHeader } from './lib/csrf'
|
||||
import { createCompletionPulse } from './lib/completion-motion'
|
||||
import { captureListDragPointer, getAdjacentListMove, hasExceededLongPressMovement, moveListToScope, snapshotListDragPointer, type ListDragPointer } from './lib/list-drag'
|
||||
import MvpPanel from './MvpPanel.vue'
|
||||
import CountdownPanel from './CountdownPanel.vue'
|
||||
import FloatingAddButton from './components/FloatingAddButton.vue'
|
||||
@@ -39,6 +40,14 @@ const activeView = ref<View>(restoredNavigation.view)
|
||||
const selectedTask = ref<Task | null>(null)
|
||||
const sidebarCreateOpen = ref(false)
|
||||
const sidebarAction = ref<{ kind: 'folders' | 'lists'; item: FolderItem | TaskList } | null>(null)
|
||||
const listMoveMenuOpen = ref(false)
|
||||
const listDrag = ref<{ id: string; pointerId: number; startX: number; startY: number; offsetY: number; lastX: number; lastY: number } | null>(null)
|
||||
const listDropFolderId = ref<string | null | undefined>(undefined)
|
||||
const listReorderTarget = ref('')
|
||||
const listReorderPlacement = ref<'before' | 'after'>('after')
|
||||
let listHandleLongPressTimer: number | undefined
|
||||
let listHandlePending: { id: string; pointer: ListDragPointer } | undefined
|
||||
let suppressListClickId = ''
|
||||
const query = ref('')
|
||||
const error = ref('')
|
||||
const notice = ref('')
|
||||
@@ -792,8 +801,137 @@ function runSidebarCreate(kind: 'folder' | 'list') {
|
||||
sidebarCreateOpen.value = false
|
||||
kind === 'folder' ? void createFolder() : void createList(null)
|
||||
}
|
||||
function closeSidebarAction() { sidebarAction.value = null }
|
||||
function closeSidebarAction() { sidebarAction.value = null; listMoveMenuOpen.value = false }
|
||||
function toggleFolder(id: string) { const next = new Set(expandedFolders.value); next.has(id) ? next.delete(id) : next.add(id); expandedFolders.value = next }
|
||||
|
||||
function beginListDrag(list: TaskList, pointer: ListDragPointer) {
|
||||
if (list.is_inbox) return
|
||||
clearListHandlePress()
|
||||
listDrag.value = { id: list.id, pointerId: pointer.pointerId, startX: pointer.clientX, startY: pointer.clientY, offsetY: 0, lastX: pointer.clientX, lastY: pointer.clientY }
|
||||
listDropFolderId.value = list.folder_id
|
||||
listReorderTarget.value = list.id
|
||||
captureListDragPointer(pointer)
|
||||
}
|
||||
function startListHandlePress(list: TaskList, event: PointerEvent) {
|
||||
const pointer = snapshotListDragPointer(event)
|
||||
if (event.pointerType !== 'touch') {
|
||||
beginListDrag(list, pointer)
|
||||
return
|
||||
}
|
||||
clearListHandlePress()
|
||||
listHandlePending = { id: list.id, pointer }
|
||||
listHandleLongPressTimer = window.setTimeout(() => beginListDrag(list, pointer), 450)
|
||||
}
|
||||
function moveListHandle(list: TaskList, event: PointerEvent) {
|
||||
if (!listDrag.value && listHandlePending?.id === list.id && listHandlePending.pointer.pointerId === event.pointerId) {
|
||||
if (hasExceededLongPressMovement(
|
||||
{ x: listHandlePending.pointer.clientX, y: listHandlePending.pointer.clientY },
|
||||
{ x: event.clientX, y: event.clientY },
|
||||
5,
|
||||
)) clearListHandlePress()
|
||||
return
|
||||
}
|
||||
moveListDrag(list, event)
|
||||
}
|
||||
function clearListHandlePress() {
|
||||
if (listHandleLongPressTimer) window.clearTimeout(listHandleLongPressTimer)
|
||||
listHandleLongPressTimer = undefined
|
||||
listHandlePending = undefined
|
||||
}
|
||||
function resolveListDrop(event: PointerEvent) {
|
||||
const activeId = listDrag.value?.id
|
||||
const elements = document.elementsFromPoint(event.clientX, event.clientY)
|
||||
const row = elements.map((element) => element.closest<HTMLElement>('[data-list-id]')).find((element) => element?.dataset.listId !== activeId)
|
||||
if (row?.dataset.listId) {
|
||||
const target = lists.value.find((item) => item.id === row.dataset.listId)
|
||||
if (target && !target.is_inbox) {
|
||||
listDropFolderId.value = target.folder_id
|
||||
listReorderTarget.value = target.id
|
||||
const rect = row.getBoundingClientRect()
|
||||
listReorderPlacement.value = event.clientY < rect.top + rect.height / 2 ? 'before' : 'after'
|
||||
return
|
||||
}
|
||||
}
|
||||
const folder = elements.map((element) => element.closest<HTMLElement>('[data-folder-id]')).find(Boolean)
|
||||
if (folder?.dataset.folderId) {
|
||||
listDropFolderId.value = folder.dataset.folderId
|
||||
listReorderTarget.value = ''
|
||||
expandedFolders.value = new Set(expandedFolders.value).add(folder.dataset.folderId)
|
||||
return
|
||||
}
|
||||
if (elements.some((element) => element.closest('.list-root-drop'))) {
|
||||
listDropFolderId.value = null
|
||||
listReorderTarget.value = ''
|
||||
}
|
||||
}
|
||||
function moveListDrag(list: TaskList, event: PointerEvent) {
|
||||
const drag = listDrag.value
|
||||
if (!drag || drag.id !== list.id) return
|
||||
drag.offsetY = event.clientY - drag.startY
|
||||
drag.lastX = event.clientX
|
||||
drag.lastY = event.clientY
|
||||
resolveListDrop(event)
|
||||
}
|
||||
async function persistListMove(list: TaskList, folderId: string | null, targetId?: string, placement: 'before' | 'after' = 'after') {
|
||||
if (list.is_inbox) return
|
||||
const previous = lists.value
|
||||
const result = moveListToScope(previous, list.id, folderId, targetId, placement)
|
||||
if (result.items === previous) return
|
||||
lists.value = result.items
|
||||
if (folderId) expandedFolders.value = new Set(expandedFolders.value).add(folderId)
|
||||
try {
|
||||
if (list.folder_id !== folderId) {
|
||||
await api(`/lists/${list.id}/move`, { method: 'PUT', body: JSON.stringify({ folder_id: folderId, list_ids: result.orderedIds }) })
|
||||
} else {
|
||||
await api('/lists/reorder', { method: 'PUT', body: JSON.stringify({ folder_id: folderId, list_ids: result.orderedIds }) })
|
||||
}
|
||||
toast(folderId ? '清单已移动' : '清单已移出文件夹')
|
||||
} catch (reason) {
|
||||
lists.value = previous
|
||||
fail(reason)
|
||||
}
|
||||
}
|
||||
function finishListDrag(list: TaskList, event: PointerEvent) {
|
||||
clearListHandlePress()
|
||||
const drag = listDrag.value
|
||||
if (!drag || drag.id !== list.id) return
|
||||
const moved = Math.hypot(event.clientX - drag.startX, event.clientY - drag.startY) > 5
|
||||
const folderId = listDropFolderId.value ?? null
|
||||
const targetId = listReorderTarget.value && listReorderTarget.value !== list.id ? listReorderTarget.value : undefined
|
||||
const placement = listReorderPlacement.value
|
||||
cancelListDrag()
|
||||
if (!moved && folderId === list.folder_id && !targetId) return
|
||||
suppressListClickId = list.id
|
||||
window.setTimeout(() => { if (suppressListClickId === list.id) suppressListClickId = '' }, 400)
|
||||
void persistListMove(list, folderId, targetId, placement)
|
||||
}
|
||||
function selectListUnlessDragged(list: TaskList) {
|
||||
if (suppressListClickId === list.id) { suppressListClickId = ''; return }
|
||||
void switchView('tasks', list.id)
|
||||
}
|
||||
function cancelListDrag() {
|
||||
clearListHandlePress()
|
||||
listDrag.value = null
|
||||
listDropFolderId.value = undefined
|
||||
listReorderTarget.value = ''
|
||||
}
|
||||
function openListMoveMenu() { listMoveMenuOpen.value = !listMoveMenuOpen.value }
|
||||
function moveListFromMenu(folderId: string | null) {
|
||||
const item = sidebarAction.value?.kind === 'lists' ? sidebarAction.value.item as TaskList : null
|
||||
if (!item) return
|
||||
listMoveMenuOpen.value = false
|
||||
void persistListMove(item, folderId)
|
||||
closeSidebarAction()
|
||||
}
|
||||
function canMoveListWithinScope(item: TaskList, direction: 'up' | 'down') {
|
||||
return getAdjacentListMove(lists.value, item.id, direction) !== null
|
||||
}
|
||||
function moveListWithinScope(item: TaskList, direction: 'up' | 'down') {
|
||||
const move = getAdjacentListMove(lists.value, item.id, direction)
|
||||
if (!move) return
|
||||
void persistListMove(item, item.folder_id, move.targetId, move.placement)
|
||||
closeSidebarAction()
|
||||
}
|
||||
function formatDue(value: string | null, hasTime = true) {
|
||||
if (!value) return ''
|
||||
const date = new Date(value)
|
||||
@@ -837,13 +975,13 @@ onMounted(bootstrap)
|
||||
<button :class="{ active: activeView==='habits' }" @click="switchView('habits')"><Repeat2 />习惯</button>
|
||||
<button :class="{ active: activeView==='countdowns' }" @click="switchView('countdowns')"><CalendarHeart />倒数日</button>
|
||||
</nav>
|
||||
<div class="section-title"><span>我的清单</span><span class="sidebar-create-wrap"><button class="mini-icon list-create-trigger" aria-label="新建清单或文件夹" :aria-expanded="sidebarCreateOpen" @click="toggleSidebarCreate"><Plus /></button><span v-if="sidebarCreateOpen" class="sidebar-popover sidebar-create-menu"><button @click="runSidebarCreate('list')"><ListTodo/>新建清单</button><button @click="runSidebarCreate('folder')"><Folder/>新建文件夹</button></span></span></div>
|
||||
<div class="section-title list-root-drop" :class="{'list-drop-target':listDrag&&listDropFolderId===null&&!listReorderTarget}" @pointermove="listDrag&&resolveListDrop($event)"><span>我的清单</span><span class="sidebar-create-wrap"><button class="mini-icon list-create-trigger" aria-label="新建清单或文件夹" :aria-expanded="sidebarCreateOpen" @click="toggleSidebarCreate"><Plus /></button><span v-if="sidebarCreateOpen" class="sidebar-popover sidebar-create-menu"><button @click="runSidebarCreate('list')"><ListTodo/>新建清单</button><button @click="runSidebarCreate('folder')"><Folder/>新建文件夹</button></span></span></div>
|
||||
<div class="folders">
|
||||
<div v-for="folder in folders" :key="folder.id" class="folder-block">
|
||||
<div class="folder-row"><button :title="folder.name" :aria-label="folder.name" @click="toggleFolder(folder.id)"><ChevronDown v-if="expandedFolders.has(folder.id)"/><ChevronRight v-else/><Folder/><span>{{folder.name}}</span></button><span class="row-actions"><button aria-label="打开文件夹操作" :aria-expanded="sidebarAction?.item.id===folder.id" @click="openSidebarAction('folders',folder)"><Ellipsis/></button></span></div>
|
||||
<div v-for="list in lists.filter(l=>l.folder_id===folder.id && !l.is_inbox)" v-show="expandedFolders.has(folder.id)" :key="list.id" class="list-row" :class="{active:activeView==='tasks'&&activeList===list.id}"><button class="list-row-main" :title="list.name" :aria-label="list.name" @click="switchView('tasks',list.id)"><i/><span>{{list.name}}</span></button><span class="row-actions"><button aria-label="打开清单操作" :aria-expanded="sidebarAction?.item.id===list.id" @click="openSidebarAction('lists',list)"><Ellipsis/></button></span></div>
|
||||
<div v-for="folder in folders" :key="folder.id" class="folder-block" :data-folder-id="folder.id">
|
||||
<div class="folder-row" :class="{'list-drop-target':listDrag&&listDropFolderId===folder.id&&!listReorderTarget}" @pointermove="listDrag&&resolveListDrop($event)"><button :title="folder.name" :aria-label="folder.name" @click="toggleFolder(folder.id)"><ChevronDown v-if="expandedFolders.has(folder.id)"/><ChevronRight v-else/><Folder/><span>{{folder.name}}</span></button><span class="row-actions"><button aria-label="打开文件夹操作" :aria-expanded="sidebarAction?.item.id===folder.id" @click="openSidebarAction('folders',folder)"><Ellipsis/></button></span></div>
|
||||
<div v-for="list in lists.filter(l=>l.folder_id===folder.id && !l.is_inbox)" v-show="expandedFolders.has(folder.id)" :key="list.id" :data-list-id="list.id" class="list-row" :class="{active:activeView==='tasks'&&activeList===list.id,'list-dragging':listDrag?.id===list.id,'list-reorder-target':listReorderTarget===list.id&&listDrag?.id!==list.id}" :style="{'--list-drag-y':`${listDrag?.id===list.id?listDrag.offsetY:0}px`}" @pointermove="moveListDrag(list,$event)" @pointerup="finishListDrag(list,$event)" @pointercancel="cancelListDrag"><button class="list-drag-handle" aria-label="拖动清单排序或移动到文件夹" title="长按拖动清单" @pointerdown.stop="startListHandlePress(list,$event)" @pointermove.stop="moveListHandle(list,$event)" @pointerup.stop="finishListDrag(list,$event)" @pointercancel.stop="cancelListDrag"><GripVertical/></button><button class="list-row-main" :title="list.name" :aria-label="list.name" @click="selectListUnlessDragged(list)"><i/><span>{{list.name}}</span></button><span class="row-actions"><button aria-label="打开清单操作" :aria-expanded="sidebarAction?.item.id===list.id" @click="openSidebarAction('lists',list)"><Ellipsis/></button></span></div>
|
||||
</div>
|
||||
<div v-for="list in lists.filter(l=>!l.folder_id&&!l.is_inbox)" :key="list.id" class="list-row" :class="{active:activeView==='tasks'&&activeList===list.id}"><button class="list-row-main" :title="list.name" :aria-label="list.name" @click="switchView('tasks',list.id)"><i/><span>{{list.name}}</span></button><span class="row-actions"><button aria-label="打开清单操作" :aria-expanded="sidebarAction?.item.id===list.id" @click="openSidebarAction('lists',list)"><Ellipsis/></button></span></div>
|
||||
<div v-for="list in lists.filter(l=>!l.folder_id&&!l.is_inbox)" :key="list.id" :data-list-id="list.id" class="list-row" :class="{active:activeView==='tasks'&&activeList===list.id,'list-dragging':listDrag?.id===list.id,'list-reorder-target':listReorderTarget===list.id&&listDrag?.id!==list.id}" :style="{'--list-drag-y':`${listDrag?.id===list.id?listDrag.offsetY:0}px`}" @pointermove="moveListDrag(list,$event)" @pointerup="finishListDrag(list,$event)" @pointercancel="cancelListDrag"><button class="list-drag-handle" aria-label="拖动清单排序或移动到文件夹" title="长按拖动清单" @pointerdown.stop="startListHandlePress(list,$event)" @pointermove.stop="moveListHandle(list,$event)" @pointerup.stop="finishListDrag(list,$event)" @pointercancel.stop="cancelListDrag"><GripVertical/></button><button class="list-row-main" :title="list.name" :aria-label="list.name" @click="selectListUnlessDragged(list)"><i/><span>{{list.name}}</span></button><span class="row-actions"><button aria-label="打开清单操作" :aria-expanded="sidebarAction?.item.id===list.id" @click="openSidebarAction('lists',list)"><Ellipsis/></button></span></div>
|
||||
<template v-if="archivedLists.length">
|
||||
<div class="section-title"><span>已归档清单</span></div>
|
||||
<div v-for="list in archivedLists" :key="list.id" class="list-row archived-row"><div class="list-row-main archived-row-label" :title="list.name" :aria-label="`已归档清单：${list.name}`"><ArchiveRestore/><span>{{list.name}}</span></div><span class="row-actions archived-actions"><button aria-label="恢复清单" @click="restoreList(list)"><ArchiveRestore/>恢复</button></span></div>
|
||||
@@ -853,7 +991,7 @@ onMounted(bootstrap)
|
||||
<button :class="{active:activeView==='trash'}" @click="switchView('trash')"><Trash2 />回收站</button>
|
||||
<button :class="{active:activeView==='settings'}" @click="switchView('settings')"><Settings />设置</button>
|
||||
</nav>
|
||||
<div v-if="sidebarAction" class="sidebar-action-mask app-sheet-mask" @click.self="closeSidebarAction"><section class="sidebar-action-sheet app-sheet app-sheet--actions" role="dialog" aria-modal="true" :aria-label="`${sidebarAction.item.name}操作`"><header class="app-sheet__header"><b>{{sidebarAction.item.name}}</b><button class="icon" aria-label="关闭清单操作" @click="closeSidebarAction"><X/></button></header><div class="app-sheet__body"><button @click="renameEntity(sidebarAction.kind,sidebarAction.item);closeSidebarAction()"><Pencil/>重命名</button><button v-if="sidebarAction.kind==='folders'" @click="createList(sidebarAction.item.id);closeSidebarAction()"><Plus/>新建清单</button><button class="danger" @click="deleteEntity(sidebarAction.kind,sidebarAction.item);closeSidebarAction()"><component :is="sidebarAction.kind==='folders' ? Trash2 : ArchiveRestore"/>{{sidebarAction.kind==='folders'?'删除文件夹':'归档清单'}}</button></div></section></div>
|
||||
<div v-if="sidebarAction" class="sidebar-action-mask app-sheet-mask" @click.self="closeSidebarAction"><section class="sidebar-action-sheet app-sheet app-sheet--actions" role="dialog" aria-modal="true" :aria-label="`${sidebarAction.item.name}操作`"><header class="app-sheet__header"><b>{{sidebarAction.item.name}}</b><button class="icon" aria-label="关闭清单操作" @click="closeSidebarAction"><X/></button></header><div class="app-sheet__body"><button @click="renameEntity(sidebarAction.kind,sidebarAction.item);closeSidebarAction()"><Pencil/>重命名</button><button v-if="sidebarAction.kind==='folders'" @click="createList(sidebarAction.item.id);closeSidebarAction()"><Plus/>新建清单</button><template v-if="sidebarAction.kind==='lists'"><button aria-label="上移清单" :disabled="!canMoveListWithinScope(sidebarAction.item as TaskList, 'up')" @click="moveListWithinScope(sidebarAction.item as TaskList, 'up')">上移</button><button aria-label="下移清单" :disabled="!canMoveListWithinScope(sidebarAction.item as TaskList, 'down')" @click="moveListWithinScope(sidebarAction.item as TaskList, 'down')">下移</button><button aria-label="移动到文件夹" aria-haspopup="menu" :aria-expanded="listMoveMenuOpen" @click="openListMoveMenu"><Folder/>移动到文件夹</button><div v-if="listMoveMenuOpen" class="list-move-menu" role="menu" aria-label="选择目标文件夹"><button v-if="(sidebarAction.item as TaskList).folder_id" role="menuitem" @click="moveListFromMenu(null)">移出文件夹</button><button v-for="folder in folders" :key="folder.id" role="menuitem" :disabled="(sidebarAction.item as TaskList).folder_id===folder.id" @click="moveListFromMenu(folder.id)">{{folder.name}}</button></div></template><button class="danger" @click="deleteEntity(sidebarAction.kind,sidebarAction.item);closeSidebarAction()"><component :is="sidebarAction.kind==='folders' ? Trash2 : ArchiveRestore"/>{{sidebarAction.kind==='folders'?'删除文件夹':'归档清单'}}</button></div></section></div>
|
||||
</aside>
|
||||
|
||||
<main>
|
||||
|
||||
Reference in New Issue
Block a user