Collection book list: allow to directly input a position

front/src/CollectionForm.vue

@@ -58,7 +58,11 @@ function onDrop(id, position) {
     //nothing to do
     return
   }
-  postCollectionChangePosition(props.id, itemIdBeingGrabbed.value, position).then((res) => {
+  changePosition(itemIdBeingGrabbed.value, position)
+}
+
+function changePosition(id, position) {
+  postCollectionChangePosition(props.id, id, position).then((res) => {
     if (res.ok) {
       getCollection(data, error, props.id, limit, offset.value)
     } else {
@@ -87,6 +91,7 @@ function onDragend() {
         @dragend="onDragend"
         @dragover="onDragover"
         @dragenter="itemIdBeingOvered = item.id"
+        @positionchange="(pos) => changePosition(item.id, pos)"
         v-for="item in data.items"
         :key="item.id"
         :is-dragover="itemIdBeingOvered === item.id"

front/src/CollectionFormElement.vue

@@ -1,4 +1,5 @@
 <script setup>
+import { ref } from 'vue'
 import BookListElement from './BookListElement.vue'
 
 const props = defineProps({
@@ -7,13 +8,55 @@ const props = defineProps({
   position: Number,
   book: Array,
 })
+
+const emit = defineEmits('positionchange')
+
+const vFocus = {
+  mounted: (el) => el.focus(),
+}
+
+const isInputtingPosition = ref(false)
+const inputtedPosition = ref('')
+
+function onPositionInput() {
+  if (inputtedPosition.value != '' && !isNaN(inputtedPosition.value)) {
+    const parsedPosition = parseInt(inputtedPosition.value)
+    if (parsedPosition != props.position) {
+      emit('positionchange', parsedPosition)
+    }
+  }
+  clearPositionInput()
+}
+
+function clearPositionInput() {
+  isInputtingPosition.value = false
+  inputtedPosition.value = ''
+}
 </script>
 <template>
   <div :class="isDragover ? 'dragover' : ''" draggable="true" class="collectionitembox">
     <BookListElement v-bind="props.book">
       <div class="separator" />
-      <div class="positionindicator centered is-narrow">
-        {{ props.position }}
+      <div class="centered">
+        <div
+          v-if="!isInputtingPosition"
+          @click="isInputtingPosition = true"
+          class="positionindicator centered is-narrow clickable"
+        >
+          {{ props.position }}
+        </div>
+        <div v-else>
+          <input
+            type="text"
+            v-model="inputtedPosition"
+            v-focus
+            @blur="clearPositionInput"
+            @keyup.enter="onPositionInput"
+            size="1"
+            class="positioninput"
+            :placeholder="props.position"
+          />
+        </div>
       </div>
       <div class="separator" />
       <div class="positionwidget centered is-narrow">
@@ -45,6 +88,16 @@ const props = defineProps({
   margin-right: 40px;
 }
 
+.positioninput {
+  font-size: 36px;
+  margin-left: 20px;
+  margin-right: 20px;
+  text-align: center;
+  background: var(--bulma-scheme-main);
+  border-radius: 10%;
+  color: var(--bulma-body-color);
+}
+
 .positionwidget {
   color: var(--bulma-scheme-main);
   font-size: 48px;