mirror of
https://github.com/gotson/komga.git
synced 2026-05-08 21:00:16 +02:00
feat(webui): reorder reading lists and collection by index input
Refs: #1584
This commit is contained in:
parent
6d71f4b398
commit
d868ba4154
1 changed files with 30 additions and 2 deletions
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue