Collections: allow to drag and drop to change book position

front/src/CollectionForm.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { computed, ref } from 'vue'
-import { getCollection } from './api.js'
+import { getCollection, postCollectionChangePosition } from './api.js'
 import CollectionFormElement from './CollectionFormElement.vue'
 import AddBookToCollection from './AddBookToCollection.vue'
 import Pagination from './Pagination.vue'
@@ -17,6 +17,10 @@ const offset = computed(() => (pageNumber.value - 1) * limit)
 const data = ref(null)
 const error = ref(null)
 
+const itemIdBeingGrabbed = ref(null)
+
+const itemIdBeingOvered = ref(null)
+
 let totalElementsNumber = computed(() =>
   typeof data != 'undefined' && data.value != null ? data.value['count'] : 0,
 )
@@ -35,15 +39,59 @@ function pageChange(newPageNumber) {
 function fetchCollection() {
   pageChange(1)
 }
+
+function onDragStart(event, id) {
+  event.dataTransfer.effectAllowed = 'move'
+  // Custom type to identify a collectionitem drag
+  event.dataTransfer.setData('collectionitem', '')
+  itemIdBeingGrabbed.value = id
+}
+
+function onDragover(event) {
+  if (event.dataTransfer.types.includes('collectionitem')) {
+    event.preventDefault()
+  }
+}
+
+function onDrop(id, position) {
+  if (id == itemIdBeingGrabbed.value) {
+    //nothing to do
+    return
+  }
+  postCollectionChangePosition(props.id, itemIdBeingGrabbed.value, position).then((res) => {
+    if (res.ok) {
+      fetchCollection()
+    } else {
+      res.json().then((json) => {
+        error.value = json
+      })
+    }
+  })
+}
+
+function onDragend() {
+  itemIdBeingGrabbed.value = null
+  itemIdBeingOvered.value = null
+}
 </script>
 
 <template>
-  <div v-if="error">{{ $t('bookform.error', { error: error.message }) }}</div>
+  <div v-if="error">{{ $t('collection.error', { error: error }) }}</div>
   <div v-if="data">
     <h2 class="title">{{ data.name }}</h2>
     <AddBookToCollection :collection-id="props.id" @created="fetchCollection" />
     <div>
-      <CollectionFormElement v-for="item in data.items" :key="item.id" v-bind="item" />
+      <CollectionFormElement
+        @drop="onDrop(item.id, item.position)"
+        @dragstart="(e) => onDragStart(e, item.id)"
+        @dragend="onDragend"
+        @dragover="onDragover"
+        @dragenter="itemIdBeingOvered = item.id"
+        v-for="item in data.items"
+        :key="item.id"
+        :is-dragover="itemIdBeingOvered === item.id"
+        v-bind="item"
+      />
     </div>
     <Pagination
       class="mt-5"