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"

front/src/CollectionFormElement.vue

@@ -2,12 +2,14 @@
 import BookListElement from './BookListElement.vue'
 
 const props = defineProps({
+  isDragover: Boolean,
+  id: Number,
   position: Number,
   book: Array,
 })
 </script>
 <template>
-  <div class="collectionitembox">
+  <div :class="isDragover ? 'dragover' : ''" draggable="true" class="collectionitembox">
     <BookListElement v-bind="props.book">
       <div class="separator" />
       <div class="positionindicator centered is-narrow">
@@ -50,9 +52,15 @@ const props = defineProps({
   margin-right: 30px;
   border-top-right-radius: var(--bulma-box-radius);
   border-bottom-right-radius: var(--bulma-box-radius);
+  cursor: grab;
 }
 
-.positionwidget:hover {
-  cursor: move;
+.positionwidget:active {
+  cursor: grabbing;
+}
+
+.dragover {
+  border: 3px solid var(--bulma-primary);
+  border-radius: 10px;
 }
 </style>

front/src/api.js

@@ -130,7 +130,7 @@ export function postCollection(collection) {
   return genericPayloadCall('/ws/collection', collection, 'POST')
 }
 
-export function postCollectionAddBook(collectionId, bookId) {
+export function postCollectionAddBook(collectionId, position) {
   return genericPayloadCall(
     '/ws/collection/' + collectionId + '/addbook',
     { bookId: bookId },
@@ -138,6 +138,14 @@ export function postCollectionAddBook(collectionId, bookId) {
   )
 }
 
+export function postCollectionChangePosition(collectionId, itemId, position) {
+  return genericPayloadCall(
+    '/ws/collection/' + collectionId + '/changeposition',
+    { itemId: itemId, position: position },
+    'POST',
+  )
+}
+
 export function putBook(id, book) {
   return genericPayloadCall('/ws/book/edit/' + id, book.value, 'PUT')
 }