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,14 +8,56 @@ 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">
+      <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">
         <b-icon-list />
@@ -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;

internal/apitest/post_collection_changeposition_test.go

@@ -52,6 +52,7 @@ func TestPostCollectionChangePositionHandler_LastPosition(t *testing.T) {
 	_, collection := testGetCollection(t, collectionId, "10", "0")
 	assert.Equal(t, "Recherches philosophiques", collection.Items[7].Book.Title)
 	assert.Equal(t, "Le château", collection.Items[6].Book.Title)
+	assert.Equal(t, uint(8), collection.Items[7].Position)
 }
 
 func TestPostCollectionChangePositionHandler_FirstPosition(t *testing.T) {

internal/routes/collectionchangepositionpost.go

@@ -76,7 +76,7 @@ func PostCollectionChangePositionHandler(ac appcontext.AppContext) {
 		newPosition = uint(count)
 	}
 
-	if item.Position == collectionBookPosition.Position {
+	if item.Position == newPosition {
 		//nothing to do
 		ac.C.String(http.StatusOK, "Success")
 		return
@@ -84,11 +84,11 @@ func PostCollectionChangePositionHandler(ac appcontext.AppContext) {
 	lowerPosition := item.Position + 1
 	higherPosition := item.Position - 1
 	operationToDo := ""
-	if item.Position < collectionBookPosition.Position {
+	if item.Position < newPosition {
-		higherPosition = collectionBookPosition.Position
+		higherPosition = newPosition
 		operationToDo = "position - 1"
 	} else {
-		lowerPosition = collectionBookPosition.Position
+		lowerPosition = newPosition
 		operationToDo = "position + 1"
 	}
 
@@ -100,7 +100,7 @@ func PostCollectionChangePositionHandler(ac appcontext.AppContext) {
 		return
 	}
 
-	item.Position = collectionBookPosition.Position
+	item.Position = newPosition
 	ac.Db.Save(&item)
 	ac.C.String(http.StatusOK, "Success")
 }