feat(webui): reorder reading lists and collection by index input

Refs: #1584
This commit is contained in:
Gauthier Roebroeck 2025-01-22 11:57:29 +08:00
parent 6d71f4b398
commit d868ba4154

View file

@ -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>