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>