From d868ba4154b7ef7176a82b63b6e29e83fe6b3f3a Mon Sep 17 00:00:00 2001
From: Gauthier Roebroeck <gauthier.roebroeck@gmail.com>
Date: Wed, 22 Jan 2025 11:57:29 +0800
Subject: [PATCH] feat(webui): reorder reading lists and collection by index
 input

Refs: #1584
---
 komga-webui/src/components/ItemBrowser.vue | 32 ++++++++++++++++++++--
 1 file changed, 30 insertions(+), 2 deletions(-)

diff --git a/komga-webui/src/components/ItemBrowser.vue b/komga-webui/src/components/ItemBrowser.vue
index 7410a09f..d8c90500 100644
--- a/komga-webui/src/components/ItemBrowser.vue
+++ b/komga-webui/src/components/ItemBrowser.vue
@@ -10,9 +10,11 @@
                  v-bind="dragOptions"
                  :forceFallback="true"
                  :scroll-sensitivity="200"
+                 @start="transitions = false"
+                 @end="transitions = true"
       >
         <transition-group type="transition"
-                          :name="!draggable ? 'flip-list' : null"
+                          :name="transitions ? 'flip-list' : null"
                           :class="flexClass"
         >
           <v-item
@@ -39,6 +41,20 @@
                   :disable-fab="draggable || deletable"
                 ></item-card>
 
+                <v-slide-y-reverse-transition>
+                  <v-text-field v-if="draggable"
+                                v-model="localItemsIndex[JSON.stringify(item)]"
+                                type="number"
+                                min="0"
+                                :max="localItems.length - 1"
+                                solo
+                                style="position: absolute; top: 0; left: 0;"
+                                ref=""
+                                @blur="updateIndex(item)"
+                                @keydown.enter="updateIndex(item)"
+                  />
+                </v-slide-y-reverse-transition>
+
                 <v-slide-y-reverse-transition>
                   <v-icon v-if="draggable"
                           class="handle"
@@ -132,10 +148,12 @@ export default Vue.extend({
   data: () => {
     return {
       selectedItems: [] as any[],
-      localItems: [],
+      localItems: [] as any[],
+      localItemsIndex: {} as Record<string, any>,
       lastClickedNoShift: undefined as any,
       lastClickedShift: undefined as any,
       width: 150,
+      transitions: true,
     }
   },
   watch: {
@@ -154,6 +172,10 @@ export default Vue.extend({
     items: {
       handler() {
         this.localItems = this.items as []
+        this.localItemsIndex = {}
+        for (const [i, value] of this.localItems.entries()) {
+          this.$set(this.localItemsIndex, JSON.stringify(value), i)
+        }
       },
       immediate: true,
     },
@@ -227,6 +249,12 @@ export default Vue.extend({
       const index = this.localItems.findIndex((e: any) => e.id === item.id)
       this.localItems.splice(index, 1)
     },
+    updateIndex(item: any) {
+      const oldIndex = this.localItems.indexOf(item)
+      const newIndex = Math.min(Math.max(this.localItemsIndex[JSON.stringify(item)], 0), this.localItems.length - 1)
+      if (oldIndex != newIndex)
+        this.localItems.splice(oldIndex, 1, this.localItems.splice(newIndex, 1, this.localItems[oldIndex])[0])
+    },
   },
 })
 </script>