Collections browser: add a button to remove collections

front/src/CollectionFormElement.vue

@@ -180,7 +180,6 @@ function onPointerMove(e) {
   height: 40px;
   width: 40px;
   font-size: 36px;
-
 }
 
 .align-right {

front/src/CollectionListElement.vue

@@ -1,7 +1,13 @@
 <script setup>
 import { getImagePathOrDefault } from './api.js'
+import { useTemplateRef, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 
+const emit = defineEmits(['delete'])
+
+const closeButtonDesktop = useTemplateRef('closeDesktop')
+const closeButtonMobile = useTemplateRef('closeMobile')
+
 const props = defineProps({
   id: Number,
   name: String,
@@ -11,9 +17,15 @@ const props = defineProps({
 
 const router = useRouter()
 
-function goToCollection() {
-  const collectionId = props.id
-  router.push(`/collection/${props.id}`)
+function onClick(e) {
+  if (
+    (closeButtonDesktop.value && closeButtonDesktop.value.contains(e.target)) ||
+    (closeButtonMobile.value && closeButtonMobile.value.contains(e.target))
+  ) {
+    emit('delete')
+  } else {
+    router.push(`/collection/${props.id}`)
+  }
 }
 
 function setBookOpacityClass(index) {
@@ -33,11 +45,16 @@ function setBookOpacityClass(index) {
 </script>
 
 <template>
-  <div class="collectioncontainer has-background-dark p-2" @click="goToCollection">
+  <div class="collectioncontainer has-background-dark p-2" @click="onClick">
     <div class="collectionheader">
-      <h2 class="subtitle">
+      <h2 class="namecontainer subtitle">
         {{ props.name }}
       </h2>
+      <div class="is-hidden-desktop align-right">
+        <div ref="closeMobile" @click="$emit('delete')" class="centered closebtn clickable">
+          <b-icon-x />
+        </div>
+      </div>
     </div>
     <div class="collectionpreviewbooks" v-if="props.books && props.books.length > 0">
       <div
@@ -53,6 +70,9 @@ function setBookOpacityClass(index) {
         />
       </div>
     </div>
+    <div ref="closeDesktop" class="is-hidden-touch centered closebtn clickable">
+      <b-icon-x />
+    </div>
   </div>
 </template>
 
@@ -75,6 +95,11 @@ img {
   transition: ease-in-out 0.02s;
 }
 
+.namecontainer {
+  flex: 1;
+  margin-bottom: 0px;
+}
+
 .collectionheader {
   flex: 1;
   display: flex;
@@ -117,6 +142,17 @@ img {
   opacity: 10%;
 }
 
+.closebtn {
+  height: 40px;
+  width: 40px;
+  font-size: 36px;
+}
+
+.align-right {
+  display: flex;
+  justify-content: flex-end;
+}
+
 @media (max-width: 1024px) {
   img {
     max-height: 75px;

front/src/CollectionsBrowser.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { ref, computed } from 'vue'
-import { getCollections } from './api.js'
+import { getCollections, deleteCollection } from './api.js'
 import { useRouter } from 'vue-router'
 import CollectionListElement from './CollectionListElement.vue'
 import Pagination from './Pagination.vue'
@@ -35,6 +35,18 @@ function pageChange(newPageNumber) {
 function goToCollection(id) {
   router.push(`/collection/${id}`)
 }
+
+function removeList(id) {
+  deleteCollection(id).then((res) => {
+    if (res.ok) {
+      fetchData()
+    } else {
+      res.json().then((json) => {
+        error.value = json
+      })
+    }
+  })
+}
 </script>
 
 <template>
@@ -44,7 +56,7 @@ function goToCollection(id) {
       <AddCollection @created="goToCollection" />
       <div class="collectionslist">
         <div class="my-2" v-for="collection in data.collections" :key="collection.id">
-          <CollectionListElement v-bind="collection" />
+          <CollectionListElement @delete="removeList(collection.id)" v-bind="collection" />
         </div>
       </div>
       <Pagination

front/src/api.js

@@ -150,6 +150,10 @@ export function deleteCollectionItem(itemId) {
   return deleteApiCall('/ws/collection/item/' + itemId)
 }
 
+export function deleteCollection(id) {
+  return deleteApiCall('/ws/collection/' + id)
+}
+
 export function putBook(id, book) {
   return genericPayloadCall('/ws/book/edit/' + id, book.value, 'PUT')
 }