upd

2026-06-04 13:58:24 +03:00
parent 40a281b87e
commit 2d665fab66
7 changed files with 174 additions and 51 deletions
--- a/frontend/app/components/LeftPanel.vue
+++ b/frontend/app/components/LeftPanel.vue
@@ -25,7 +25,7 @@
        <input
          class="search-input"
          type="text"
-          placeholder="Search by ID..."
+          placeholder="Search..."
          :value="search"
          @input="onSearchInput"
        >
@@ -40,7 +40,8 @@
          class="item-row"
          :style="{ '--i': Math.min(index, 14) }"
        >
-          <span class="item-id">{{ item.id }}</span>
+          <span class="item-id">#{{ item.id }}</span>
+          <span class="item-value">{{ item.value }}</span>
          <button class="action-btn" title="Move to selected" @click="emit('select', item.id!)">
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true">
              <path d="M2.5 7H11.5M8.5 3.5L12 7L8.5 10.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
@@ -339,7 +340,7 @@ function submitAdd() {
 .item-row {
  display: flex;
  align-items: center;
-  justify-content: space-between;
+  gap: 10px;
  padding: 9px 12px 9px 20px;
  border-bottom: 1px solid var(--border);
  animation: item-in 350ms cubic-bezier(0.16, 1, 0.3, 1) both;
@@ -356,15 +357,21 @@ function submitAdd() {
 }

 .item-id {
+  font-family: var(--font-mono);
+  font-size: 0.72rem;
+  color: var(--text-muted);
+  flex-shrink: 0;
+  min-width: 44px;
+}
+
+.item-value {
+  flex: 1;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-primary);
-
-  &::before {
-    content: '#';
-    color: var(--text-muted);
-    margin-right: 1px;
-  }
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }

 .action-btn {
--- a/frontend/app/components/RightPanel.vue
+++ b/frontend/app/components/RightPanel.vue
@@ -17,20 +17,21 @@
        <input
          class="search-input"
          type="text"
-          placeholder="Search by ID..."
+          placeholder="Search..."
          :value="search"
          @input="onSearchInput"
        >
      </div>
    </div>

-    <div class="panel-body">
+    <div ref="panelBody" class="panel-body">
      <VueDraggableNext
        v-model="localItems"
        tag="ul"
        class="item-list"
        handle=".drag-handle"
-        @end="onDragEnd"
+        @start="onDragStarted"
+        @end="onDragEndFull"
      >
        <li
          v-for="(item, index) in localItems"
@@ -48,8 +49,8 @@
              <circle cx="6" cy="10" r="1.2" />
            </svg>
          </span>
-          <!--          <span class="item-order">{{ index + 1 }}</span> -->
-          <span class="item-id">{{ item.id }}</span>
+          <span class="item-id">#{{ item.id }}</span>
+          <span class="item-value">{{ item.value }}</span>
          <button class="action-btn" title="Remove from selected" @click="emit('deselect', item.id!)">
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true">
              <path d="M11.5 7H2.5M5.5 3.5L2 7L5.5 10.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
@@ -92,6 +93,7 @@ const emit = defineEmits<{
 }>()

 const sentinel = ref<HTMLElement | null>(null)
+const panelBody = ref<HTMLElement | null>(null)
 let observer: IntersectionObserver | null = null

 watch(sentinel, (el) => {
@@ -109,10 +111,67 @@ watch(sentinel, (el) => {
  }
 })

+// ── Auto-scroll during drag ──────────────────────────────────────────────────
+
+const SCROLL_ZONE = 80
+const SCROLL_MAX_SPEED = 12
+
+let isDragging = false
+let scrollSpeed = 0
+let scrollRafId: number | null = null
+
+function scrollLoop() {
+  if (!isDragging || !panelBody.value) {
+    scrollRafId = null
+    return
+  }
+  if (scrollSpeed !== 0) {
+    panelBody.value.scrollTop += scrollSpeed
+  }
+  scrollRafId = requestAnimationFrame(scrollLoop)
+}
+
+function onPointerMoveDrag(e: PointerEvent) {
+  if (!isDragging || !panelBody.value) return
+  const rect = panelBody.value.getBoundingClientRect()
+  const y = e.clientY - rect.top
+  if (y >= 0 && y < SCROLL_ZONE) {
+    scrollSpeed = -((SCROLL_ZONE - y) / SCROLL_ZONE) * SCROLL_MAX_SPEED
+  }
+  else {
+    scrollSpeed = 0
+  }
+}
+
+function onDragStarted() {
+  isDragging = true
+  scrollSpeed = 0
+  document.addEventListener('pointermove', onPointerMoveDrag)
+  scrollRafId = requestAnimationFrame(scrollLoop)
+}
+
+function onDragEndFull(event: { oldIndex: number, newIndex: number }): void {
+  isDragging = false
+  scrollSpeed = 0
+  document.removeEventListener('pointermove', onPointerMoveDrag)
+  if (scrollRafId !== null) {
+    cancelAnimationFrame(scrollRafId)
+    scrollRafId = null
+  }
+  const moved = localItems.value[event.newIndex]
+  if (!moved) return
+  const after = event.newIndex > 0 ? localItems.value[event.newIndex - 1] : null
+  emit('reorder', moved.id!, after?.id ?? null)
+}
+
 onUnmounted(() => {
  observer?.disconnect()
+  document.removeEventListener('pointermove', onPointerMoveDrag)
+  if (scrollRafId !== null) cancelAnimationFrame(scrollRafId)
 })

+// ── Search ───────────────────────────────────────────────────────────────────
+
 let debounceTimer: ReturnType<typeof setTimeout> | null = null

 function onSearchInput(e: Event) {
@@ -124,17 +183,13 @@ function onSearchInput(e: Event) {
  }, 300)
 }

+// ── Local items for drag-and-drop ────────────────────────────────────────────
+
 const localItems = ref([...props.items])

 watch(() => props.items, (val) => {
  localItems.value = [...val]
 }, { deep: true })
-
-function onDragEnd(event: { oldIndex: number, newIndex: number }): void {
-  const moved = localItems.value[event.newIndex]
-  const after = event.newIndex > 0 ? localItems.value[event.newIndex - 1] : null
-  emit('reorder', moved.id!, after?.id ?? null)
-}
 </script>

 <style scoped lang="scss">
@@ -296,26 +351,22 @@ function onDragEnd(event: { oldIndex: number, newIndex: number }): void {
  }
 }

-.item-order {
+.item-id {
  font-family: var(--font-mono);
-  font-size: 0.68rem;
+  font-size: 0.72rem;
  color: var(--text-muted);
-  min-width: 18px;
-  text-align: right;
  flex-shrink: 0;
+  min-width: 44px;
 }

-.item-id {
+.item-value {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-primary);
-
-  &::before {
-    content: '#';
-    color: var(--text-muted);
-    margin-right: 1px;
-  }
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }

 .action-btn {
--- a/frontend/app/composables/useItems.ts
+++ b/frontend/app/composables/useItems.ts
@@ -21,12 +21,25 @@ export function useItems() {

  async function fetchLeft(reset = false): Promise<void> {
    if (reset) {
-      leftPage.value = 1
-      leftItems.value = []
-      leftHasMore.value = true
-    }
-    if (!leftHasMore.value || leftLoading.value)
+      if (leftLoading.value) return
+      leftLoading.value = true
+      try {
+        const data = await client.api.itemsList({
+          page: 1,
+          limit: 20,
+          ...(leftSearch.value ? { search: leftSearch.value } : {}),
+        })
+        leftItems.value = [...(data.data ?? [])]
+        leftHasMore.value = data.hasMore ?? false
+        leftItemsTotal.value = data.total || 0
+        leftPage.value = 2
+      }
+      finally {
+        leftLoading.value = false
+      }
      return
+    }
+    if (!leftHasMore.value || leftLoading.value) return
    leftLoading.value = true
    try {
      const data = await client.api.itemsList({
@@ -46,12 +59,25 @@ export function useItems() {

  async function fetchRight(reset = false): Promise<void> {
    if (reset) {
-      rightPage.value = 1
-      rightItems.value = []
-      rightHasMore.value = true
-    }
-    if (!rightHasMore.value || rightLoading.value)
+      if (rightLoading.value) return
+      rightLoading.value = true
+      try {
+        const data = await client.api.itemsSelectedList({
+          page: 1,
+          limit: 20,
+          ...(rightSearch.value ? { search: rightSearch.value } : {}),
+        })
+        rightItems.value = [...(data.data ?? [])]
+        rightHasMore.value = data.hasMore ?? false
+        rightItemsTotal.value = data.total || 0
+        rightPage.value = 2
+      }
+      finally {
+        rightLoading.value = false
+      }
      return
+    }
+    if (!rightHasMore.value || rightLoading.value) return
    rightLoading.value = true
    try {
      const data = await client.api.itemsSelectedList({
--- a/frontend/app/services/api.ts
+++ b/frontend/app/services/api.ts
@@ -12,6 +12,7 @@

 export interface Item {
  id?: number;
+  value?: string;
 }

 export interface PaginatedItems {