feat(items): support drag-and-drop reordering and contextual insert

Implement drag-and-drop sorting in the items grid Add right-click context menu to insert new items before or after Update backend to process insertion anchors during item creation
2026-05-05 07:01:21 +08:00
parent a17344d216
commit 357dc061d6
8 changed files with 500 additions and 19 deletions
--- a/frontend/src/services/api.ts
+++ b/frontend/src/services/api.ts
@@ -800,6 +800,8 @@ export interface ItemPayload {
  acquisitionMethodIds: number[];
  tagIds: number[];
  imagePath: string;
+  insertBeforeItemId?: number | null;
+  insertAfterItemId?: number | null;
 }

 export interface AncientArtifactPayload {
--- a/frontend/src/styles/main.css
+++ b/frontend/src/styles/main.css
@@ -2615,6 +2615,121 @@ button:disabled,
  opacity: 1;
 }

+.item-grid-slot {
+  position: relative;
+  min-width: 0;
+}
+
+.item-grid-slot .entity-card {
+  width: 100%;
+  height: 100%;
+}
+
+.item-grid-slot .entity-card,
+.item-grid-slot .entity-card__image {
+  -webkit-user-drag: none;
+}
+
+.item-grid-card--interactive {
+  cursor: grab;
+  touch-action: manipulation;
+  user-select: none;
+}
+
+.item-grid-card--interactive:active {
+  cursor: grabbing;
+}
+
+.item-grid-slot.is-dragging {
+  z-index: 4;
+  opacity: 0.72;
+  transform: scale(0.99);
+}
+
+.item-grid-slot.is-dragging .entity-card {
+  background: color-mix(in srgb, var(--pokemon-yellow) 12%, var(--surface));
+  box-shadow: var(--shadow-soft);
+}
+
+.item-grid-slot.is-drop-target::before {
+  content: "";
+  position: absolute;
+  right: 0;
+  left: 0;
+  z-index: 6;
+  height: 3px;
+  border-radius: 999px;
+  background: var(--pokemon-blue);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pokemon-blue) 18%, transparent);
+}
+
+.item-grid-slot.is-drop-before::before {
+  top: 0;
+}
+
+.item-grid-slot.is-drop-after::before {
+  bottom: 0;
+}
+
+.item-grid-move,
+.item-grid-enter-active,
+.item-grid-leave-active {
+  transition:
+    transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1),
+    opacity 0.18s ease;
+}
+
+.item-grid-enter-from,
+.item-grid-leave-to {
+  opacity: 0;
+  transform: scale(0.94);
+}
+
+.item-grid-leave-active {
+  position: absolute;
+}
+
+.item-context-menu {
+  position: fixed;
+  z-index: 60;
+  width: min(216px, calc(100vw - 32px));
+  display: grid;
+  gap: 4px;
+  padding: 8px;
+  border: 2px solid var(--line-strong);
+  border-radius: var(--radius-card);
+  background: var(--surface);
+  box-shadow: var(--shadow-raised);
+}
+
+.item-context-menu__option {
+  min-height: 44px;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 10px 12px;
+  border: 1px solid var(--line);
+  border-radius: var(--radius-control);
+  background: var(--surface-soft);
+  color: var(--ink-soft);
+  font-weight: 850;
+  cursor: pointer;
+  text-align: left;
+}
+
+.item-context-menu__option:hover,
+.item-context-menu__option:focus-visible {
+  border-color: var(--pokemon-blue);
+  background: color-mix(in srgb, var(--pokemon-blue) 9%, var(--surface-soft));
+  color: var(--pokemon-blue-deep);
+}
+
+.item-context-menu__option .ui-icon {
+  width: 20px;
+  height: 20px;
+}
+
 .catalog-card-action {
  min-height: 36px;
  max-width: 100%;
@@ -4061,6 +4176,10 @@ button:disabled,
  .sidebar-tooltip,
  .side-nav__link,
  .side-nav__chevron,
+  .item-grid-slot,
+  .item-grid-move,
+  .item-grid-enter-active,
+  .item-grid-leave-active,
  .reorderable-row,
  .reorderable-list-move,
  .drag-handle {
@@ -4068,6 +4187,9 @@ button:disabled,
  }

  .life-page .ui-button:hover,
+  .item-grid-enter-from,
+  .item-grid-leave-to,
+  .item-grid-slot.is-dragging,
  .reorderable-row.is-dragging,
  .drag-handle:active {
    transform: none;
--- a/frontend/src/views/ItemEdit.vue
+++ b/frontend/src/views/ItemEdit.vue
@@ -65,6 +65,8 @@ const itemCreateDefaultsStorageKey = 'pokopia_item_create_defaults';
 const routeId = computed(() => (typeof route.params.id === 'string' ? route.params.id : ''));
 const isEditing = computed(() => routeId.value !== '');
 const isEventCreate = computed(() => route.name === 'event-item-new');
+const insertBeforeItemId = computed(() => queryItemId(route.query.insertBeforeItemId));
+const insertAfterItemId = computed(() => queryItemId(route.query.insertAfterItemId));
 const pageTitle = computed(() =>
  isEditing.value
    ? t('pages.items.editTitle', { name: itemForm.value.name || t('pages.items.fallbackName') })
@@ -82,6 +84,12 @@ function toIds(values: string[]): number[] {
  return values.map(Number).filter((item) => Number.isInteger(item) && item > 0);
 }

+function queryItemId(value: unknown): number | null {
+  const rawValue = Array.isArray(value) ? value[0] : value;
+  const id = Number(rawValue);
+  return Number.isInteger(id) && id > 0 ? id : null;
+}
+
 function errorText(error: unknown, fallback: string) {
  return error instanceof Error && error.message ? error.message : fallback;
 }
@@ -264,6 +272,12 @@ async function saveItem() {
      tagIds: toIds(itemForm.value.tagIds),
      imagePath: itemForm.value.imagePath
    };
+    if (!isEditing.value && insertBeforeItemId.value !== null) {
+      payload.insertBeforeItemId = insertBeforeItemId.value;
+    }
+    if (!isEditing.value && insertAfterItemId.value !== null) {
+      payload.insertAfterItemId = insertAfterItemId.value;
+    }
    const saved = isEditing.value ? await api.updateItem(routeId.value, payload) : await api.createItem(payload);
    await router.push(`/items/${saved.id}`);
  } catch (error) {
--- a/frontend/src/views/ItemsList.vue
+++ b/frontend/src/views/ItemsList.vue
@@ -2,14 +2,14 @@
 import { Icon } from '@iconify/vue';
 import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useRoute } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
 import EntityCard from '../components/EntityCard.vue';
 import FilterPanel from '../components/FilterPanel.vue';
 import PageHeader from '../components/PageHeader.vue';
 import Skeleton from '../components/Skeleton.vue';
 import Tabs, { type TabOption } from '../components/Tabs.vue';
 import TagsSelect from '../components/TagsSelect.vue';
-import { iconAdd, iconChevronDown, iconItem } from '../icons';
+import { iconAdd, iconChevronDown, iconChevronUp, iconItem } from '../icons';
 import { api, getAuthToken, type AuthUser, type Item, type Options } from '../services/api';
 import ItemEdit from './ItemEdit.vue';

@@ -19,16 +19,30 @@ const props = defineProps<{

 const options = ref<Options | null>(null);
 const route = useRoute();
+const router = useRouter();
 const { t } = useI18n();
 const items = ref<Item[]>([]);
 const currentUser = ref<AuthUser | null>(null);
 const loading = ref(true);
+const ordering = ref(false);
 const search = ref('');
 const categoryId = ref('');
 const usageId = ref('');
 const tagIds = ref<string[]>([]);
 const createDefaultsMenu = ref<HTMLElement | null>(null);
 const createDefaultsOpen = ref(false);
+const itemContextMenu = ref<{
+  item: Item;
+  x: number;
+  y: number;
+} | null>(null);
+const itemContextMenuRef = ref<HTMLElement | null>(null);
+const draggingItemId = ref<number | null>(null);
+const dropTargetItemId = ref<number | null>(null);
+const dropInsertAfter = ref(false);
+const suppressNextItemClick = ref(false);
+const dragSourceItems = ref<Item[]>([]);
+const dropCommitted = ref(false);

 type ItemCreateDefaults = {
  categoryId: string;
@@ -59,6 +73,16 @@ const pageTitle = computed(() => (props.eventOnly ? t('pages.eventItems.title')
 const pageSubtitle = computed(() => (props.eventOnly ? t('pages.eventItems.subtitle') : t('pages.items.subtitle')));
 const pageKicker = computed(() => (props.eventOnly ? t('pages.eventItems.kicker') : t('pages.items.kicker')));
 const createTarget = computed(() => (props.eventOnly ? '/event-items/new' : '/items/new'));
+const isAllView = computed(() => !props.eventOnly && categoryId.value === '');
+const hasActiveFilters = computed(
+  () => search.value.trim() !== '' || usageId.value !== '' || tagIds.value.length > 0 || categoryId.value !== ''
+);
+const itemSortingAllowed = computed(
+  () => isAllView.value && !hasActiveFilters.value && currentUser.value?.permissions.includes('items.order') === true
+);
+const itemInsertionAllowed = computed(
+  () => itemSortingAllowed.value && currentUser.value?.permissions.includes('items.create') === true
+);

 const categoryTabs = computed<TabOption[]>(() => [
  { value: '', label: t('common.all') },
@@ -88,6 +112,57 @@ function itemCardImage(item: Item) {
  return item.image ? { src: item.image.url, alt: t('media.imageAlt', { name: item.name }) } : undefined;
 }

+function sameItem(first: number, second: number): boolean {
+  return first === second;
+}
+
+function reorderedItems(currentItems: Item[], draggedId: number, targetId: number, insertAfter: boolean): Item[] {
+  if (sameItem(draggedId, targetId)) {
+    return currentItems;
+  }
+
+  const draggedItem = currentItems.find((item) => sameItem(item.id, draggedId));
+  if (!draggedItem) {
+    return currentItems;
+  }
+
+  const nextItems = currentItems.filter((item) => !sameItem(item.id, draggedId));
+  const targetIndex = nextItems.findIndex((item) => sameItem(item.id, targetId));
+  if (targetIndex < 0) {
+    return currentItems;
+  }
+
+  nextItems.splice(targetIndex + (insertAfter ? 1 : 0), 0, draggedItem);
+  return nextItems;
+}
+
+function hasOrderChanged(currentItems: Item[], nextItems: Item[]): boolean {
+  return currentItems.length !== nextItems.length || currentItems.some((item, index) => !sameItem(item.id, nextItems[index]?.id ?? -1));
+}
+
+function clampMenuPosition(x: number, y: number) {
+  const width = 216;
+  const height = 104;
+  return {
+    x: Math.max(16, Math.min(x, window.innerWidth - width - 16)),
+    y: Math.max(16, Math.min(y, window.innerHeight - height - 16))
+  };
+}
+
+function menuPositionForEvent(event: MouseEvent | KeyboardEvent) {
+  if (event instanceof MouseEvent) {
+    return clampMenuPosition(event.clientX, event.clientY);
+  }
+
+  const target = event.currentTarget instanceof HTMLElement ? event.currentTarget : null;
+  if (target) {
+    const rect = target.getBoundingClientRect();
+    return clampMenuPosition(rect.left, rect.bottom + 6);
+  }
+
+  return clampMenuPosition(window.innerWidth / 2, window.innerHeight / 2);
+}
+
 function readItemCreateDefaults(): ItemCreateDefaults {
  if (typeof sessionStorage === 'undefined') {
    return emptyItemCreateDefaults();
@@ -171,14 +246,20 @@ function clearItemCreateDefaults() {
 }

 function onCreateDefaultsDocumentPointerDown(event: PointerEvent) {
-  if (createDefaultsMenu.value && !createDefaultsMenu.value.contains(event.target as Node)) {
+  const target = event.target as Node | null;
+  if (createDefaultsMenu.value && target && !createDefaultsMenu.value.contains(target)) {
    closeCreateDefaultsMenu();
  }
+
+  if (itemContextMenu.value && itemContextMenuRef.value && target && !itemContextMenuRef.value.contains(target)) {
+    closeItemContextMenu();
+  }
 }

 function onCreateDefaultsKeydown(event: KeyboardEvent) {
  if (event.key === 'Escape') {
    closeCreateDefaultsMenu();
+    closeItemContextMenu();
  }

  if (event.key === 'ContextMenu' || (event.shiftKey && event.key === 'F10')) {
@@ -186,6 +267,151 @@ function onCreateDefaultsKeydown(event: KeyboardEvent) {
  }
 }

+function onDocumentKeydown(event: KeyboardEvent) {
+  if (event.key === 'Escape') {
+    closeCreateDefaultsMenu();
+    closeItemContextMenu();
+  }
+}
+
+function closeItemContextMenu() {
+  itemContextMenu.value = null;
+}
+
+function openItemContextMenu(item: Item, event: MouseEvent | KeyboardEvent) {
+  if (!itemInsertionAllowed.value) {
+    return;
+  }
+
+  event.preventDefault();
+  closeCreateDefaultsMenu();
+
+  const { x, y } = menuPositionForEvent(event);
+  itemContextMenu.value = { item, x, y };
+}
+
+function startItemInsert(position: 'before' | 'after') {
+  if (!itemContextMenu.value) {
+    return;
+  }
+
+  const queryKey = position === 'before' ? 'insertBeforeItemId' : 'insertAfterItemId';
+  void router.push({
+    path: createTarget.value,
+    query: { [queryKey]: String(itemContextMenu.value.item.id) }
+  });
+  closeItemContextMenu();
+}
+
+function clearItemDragState() {
+  draggingItemId.value = null;
+  dropTargetItemId.value = null;
+  dropInsertAfter.value = false;
+  dragSourceItems.value = [];
+  dropCommitted.value = false;
+}
+
+function startItemDrag(item: Item, event: DragEvent) {
+  if (!itemSortingAllowed.value || ordering.value) {
+    return;
+  }
+
+  draggingItemId.value = item.id;
+  dropTargetItemId.value = null;
+  dropInsertAfter.value = false;
+  suppressNextItemClick.value = false;
+  dragSourceItems.value = [...items.value];
+  dropCommitted.value = false;
+  event.dataTransfer?.setData('text/plain', String(item.id));
+  if (event.dataTransfer) {
+    event.dataTransfer.effectAllowed = 'move';
+    event.dataTransfer.dropEffect = 'move';
+  }
+}
+
+function endItemDrag() {
+  if (draggingItemId.value !== null && !dropCommitted.value && dragSourceItems.value.length) {
+    items.value = [...dragSourceItems.value];
+  }
+
+  if (draggingItemId.value !== null) {
+    suppressNextItemClick.value = true;
+  }
+
+  clearItemDragState();
+}
+
+function previewItemDrop(targetItem: Item, event: DragEvent) {
+  if (!itemSortingAllowed.value || draggingItemId.value === null || ordering.value) {
+    return;
+  }
+
+  const draggedId = draggingItemId.value;
+  if (sameItem(draggedId, targetItem.id)) {
+    dropTargetItemId.value = null;
+    dropInsertAfter.value = false;
+    return;
+  }
+
+  const element = event.currentTarget instanceof HTMLElement ? event.currentTarget : null;
+  const insertAfter = element ? event.clientY > element.getBoundingClientRect().top + element.getBoundingClientRect().height / 2 : false;
+  dropTargetItemId.value = targetItem.id;
+  dropInsertAfter.value = insertAfter;
+  if (event.dataTransfer) {
+    event.dataTransfer.dropEffect = 'move';
+  }
+
+  const nextItems = reorderedItems(items.value, draggedId, targetItem.id, insertAfter);
+  if (hasOrderChanged(items.value, nextItems)) {
+    items.value = nextItems;
+  }
+}
+
+async function dropItem(targetItem: Item, event: DragEvent) {
+  if (!itemSortingAllowed.value || draggingItemId.value === null || ordering.value) {
+    clearItemDragState();
+    return;
+  }
+
+  previewItemDrop(targetItem, event);
+  const nextItems = [...items.value];
+  const previousItems = dragSourceItems.value.length ? [...dragSourceItems.value] : nextItems;
+  dropCommitted.value = true;
+  clearItemDragState();
+
+  if (!hasOrderChanged(previousItems, nextItems)) {
+    return;
+  }
+
+  items.value = nextItems;
+  ordering.value = true;
+  suppressNextItemClick.value = true;
+  try {
+    await api.reorderItems(nextItems.map((item) => item.id));
+    items.value = await api.items(itemQuery.value);
+  } catch {
+    items.value = previousItems;
+  } finally {
+    ordering.value = false;
+  }
+}
+
+function handleItemKeydown(item: Item, event: KeyboardEvent) {
+  if (event.key === 'ContextMenu' || (event.shiftKey && event.key === 'F10')) {
+    openItemContextMenu(item, event);
+  }
+}
+
+function handleItemClick(event: MouseEvent) {
+  if (!suppressNextItemClick.value) {
+    return;
+  }
+
+  event.preventDefault();
+  event.stopPropagation();
+  suppressNextItemClick.value = false;
+}
+
 async function loadItems() {
  loading.value = true;
  items.value = await api.items(itemQuery.value);
@@ -194,6 +420,7 @@ async function loadItems() {

 onMounted(async () => {
  document.addEventListener('pointerdown', onCreateDefaultsDocumentPointerDown);
+  document.addEventListener('keydown', onDocumentKeydown);
  if (getAuthToken()) {
    try {
      currentUser.value = (await api.me()).user;
@@ -208,11 +435,21 @@ onMounted(async () => {

 onBeforeUnmount(() => {
  document.removeEventListener('pointerdown', onCreateDefaultsDocumentPointerDown);
+  document.removeEventListener('keydown', onDocumentKeydown);
 });

 watch(itemQuery, loadItems);
 watch(itemCreateDefaults, persistItemCreateDefaults, { deep: true });
-watch(showEditor, closeCreateDefaultsMenu);
+watch(showEditor, () => {
+  closeCreateDefaultsMenu();
+  closeItemContextMenu();
+});
+watch(itemSortingAllowed, (allowed) => {
+  if (!allowed) {
+    clearItemDragState();
+    closeItemContextMenu();
+  }
+});
 </script>

 <template>
@@ -341,7 +578,7 @@ watch(showEditor, closeCreateDefaultsMenu);
      <article
        v-for="index in skeletonCardCount"
        :key="`item-skeleton-${index}`"
-        class="entity-card entity-card--skeleton entity-card--collection-compact"
+        class="entity-card entity-card--skeleton entity-card--collection-compact item-grid-card"
      >
        <Skeleton variant="box" width="92px" height="92px" class="skeleton-entity-mark" />
        <div class="entity-card__content">
@@ -350,18 +587,57 @@ watch(showEditor, closeCreateDefaultsMenu);
        </div>
      </article>
    </div>
-    <div v-else class="entity-grid catalog-card-grid collections-card-grid">
-      <EntityCard
+    <TransitionGroup v-else name="item-grid" tag="div" class="entity-grid catalog-card-grid collections-card-grid">
+      <div
        v-for="item in items"
        :key="item.id"
-        :title="item.name"
-        :subtitle="item.category.name"
-        :to="`/items/${item.id}`"
-        :icon="iconItem"
-        :image="itemCardImage(item)"
-        :ribbon="item.usage?.name"
-        compact-tooltip
-      />
+        class="item-grid-slot"
+        :class="{
+          'item-grid-card--interactive': itemSortingAllowed,
+          'is-dragging': draggingItemId === item.id,
+          'is-drop-target': dropTargetItemId === item.id,
+          'is-drop-after': dropTargetItemId === item.id && dropInsertAfter,
+          'is-drop-before': dropTargetItemId === item.id && !dropInsertAfter
+        }"
+        :draggable="itemSortingAllowed"
+        :aria-haspopup="itemInsertionAllowed ? 'menu' : undefined"
+        @contextmenu="openItemContextMenu(item, $event)"
+        @dragstart="startItemDrag(item, $event)"
+        @dragend="endItemDrag"
+        @dragover.prevent="previewItemDrop(item, $event)"
+        @drop.prevent="dropItem(item, $event)"
+        @click.capture="handleItemClick"
+        @keydown="handleItemKeydown(item, $event)"
+      >
+        <EntityCard
+          :title="item.name"
+          :subtitle="item.category.name"
+          :to="`/items/${item.id}`"
+          :icon="iconItem"
+          :image="itemCardImage(item)"
+          :ribbon="item.usage?.name"
+          class="item-grid-card"
+          compact-tooltip
+        />
+      </div>
+    </TransitionGroup>
+
+    <div
+      v-if="itemContextMenu"
+      ref="itemContextMenuRef"
+      class="item-context-menu"
+      role="menu"
+      :aria-label="t('pages.items.itemActions')"
+      :style="{ left: `${itemContextMenu.x}px`, top: `${itemContextMenu.y}px` }"
+    >
+      <button type="button" class="item-context-menu__option" role="menuitem" @click="startItemInsert('before')">
+        <Icon :icon="iconChevronUp" class="ui-icon" aria-hidden="true" />
+        {{ t('pages.items.insertBeforeItem') }}
+      </button>
+      <button type="button" class="item-context-menu__option" role="menuitem" @click="startItemInsert('after')">
+        <Icon :icon="iconChevronDown" class="ui-icon" aria-hidden="true" />
+        {{ t('pages.items.insertAfterItem') }}
+      </button>
    </div>

    <ItemEdit v-if="showEditor" />