Collection form: add a button to remove added books

front/src/CollectionForm.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { computed, ref, useTemplateRef } from 'vue'
-import { getCollection, postCollectionChangePosition } from './api.js'
+import { getCollection, postCollectionChangePosition, deleteCollectionItem } from './api.js'
 import CollectionFormElement from './CollectionFormElement.vue'
 import AddBookToCollection from './AddBookToCollection.vue'
 import Pagination from './Pagination.vue'
@@ -91,6 +91,18 @@ function changePosition(id, position) {
     }
   })
 }
+
+function deleteItem(id) {
+  deleteCollectionItem(id).then((res) => {
+    if (res.ok) {
+      getCollection(data, error, props.id, limit, offset.value)
+    } else {
+      res.json().then((json) => {
+        error.value = json
+      })
+    }
+  })
+}
 </script>
 
 <template>
@@ -104,6 +116,7 @@ function changePosition(id, position) {
         @startgrab="itemIdBeingGrabbed = item.id"
         @grabbing="(y) => checkGrabbedPosition(item.id, y)"
         @stopgrab="onStopGrab"
+        @delete="deleteItem(item.id)"
         v-for="item in data.items"
         :key="item.id"
         v-bind="item"
@@ -134,10 +147,4 @@ function changePosition(id, position) {
   opacity: 0;
   transform: translateX(30px);
 }
-
-/* ensure leaving items are taken out of layout flow so that moving
-   animations can be calculated correctly. */
-.list-leave-active {
-  position: absolute;
-}
 </style>

front/src/CollectionFormElement.vue

@@ -10,7 +10,7 @@ const props = defineProps({
   isDragoverFromAbove: Boolean,
 })
 
-const emit = defineEmits(['positionchange', 'startgrab', 'stopgrab', 'grabbing'])
+const emit = defineEmits(['positionchange', 'startgrab', 'stopgrab', 'grabbing', 'delete'])
 
 const vFocus = {
   mounted: (el) => el.focus(),
@@ -109,6 +109,9 @@ function onPointerMove(e) {
           <div class="positionwidget centered is-narrow" @pointerdown="onPointerDown">
             <b-icon-list />
           </div>
+          <div @click="$emit('delete')" class="centered closebtn clickable">
+            <b-icon-x />
+          </div>
         </template>
       </BookListElement>
     </div>
@@ -153,7 +156,6 @@ function onPointerMove(e) {
   color: var(--bulma-scheme-main);
   font-size: 48px;
   margin-left: 30px;
-  margin-right: 30px;
   border-top-right-radius: var(--bulma-box-radius);
   border-bottom-right-radius: var(--bulma-box-radius);
   cursor: grab;
@@ -169,6 +171,12 @@ function onPointerMove(e) {
   border-radius: 10px;
 }
 
+.closebtn {
+  height: 40px;
+  width: 40px;
+  font-size: 36px;
+}
+
 @media (max-width: 1024px) {
   .inputpositionwidget {
     margin-top: 10px;

front/src/api.js

@@ -146,6 +146,10 @@ export function postCollectionChangePosition(collectionId, itemId, position) {
   )
 }
 
+export function deleteCollectionItem(itemId) {
+  return deleteApiCall('/ws/collection/item/' + itemId)
+}
+
 export function putBook(id, book) {
   return genericPayloadCall('/ws/book/edit/' + id, book.value, 'PUT')
 }
@@ -234,6 +238,22 @@ export function genericPayloadCall(apiRoute, object, method) {
   }
 }
 
+export function deleteApiCall(apiRoute) {
+  const { user } = useAuthStore()
+
+  if (user != null) {
+    return fetch(apiRoute, {
+      method: 'DELETE',
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: 'Bearer ' + user.token,
+      },
+    })
+  } else {
+    return Promise.resolve()
+  }
+}
+
 export function extractFormErrorFromField(fieldName, errors) {
   if (errors == null || typeof errors == 'undefined' || !Array.isArray(errors)) {
     return ''