Add: Experimental collections edit, book list, collection cover #151

client/pages/audiobook/_id/index.vue

@@ -4,7 +4,7 @@
       <div class="flex flex-col sm:flex-row max-w-6xl mx-auto">
         <div class="w-full flex justify-center md:block sm:w-32 md:w-52" style="min-width: 208px">
           <div class="relative" style="height: fit-content">
-            <cards-book-cover :audiobook="audiobook" :width="bookCoverWidth" />
+            <covers-book-cover :audiobook="audiobook" :width="bookCoverWidth" />
             <div class="absolute bottom-0 left-0 h-1.5 bg-yellow-400 shadow-sm" :class="userIsRead ? 'bg-success' : 'bg-yellow-400'" :style="{ width: 208 * progressPercent + 'px' }"></div>
           </div>
         </div>

client/pages/batch/index.vue

@@ -4,7 +4,7 @@
       <template v-for="audiobook in audiobookCopies">
         <div :key="audiobook.id" class="w-full max-w-3xl border border-black-300 p-6 -ml-px -mt-px flex">
           <div class="w-32">
-            <cards-book-cover :audiobook="audiobook.originalAudiobook" :width="120" />
+            <covers-book-cover :audiobook="audiobook.originalAudiobook" :width="120" />
           </div>
           <div class="flex-grow pl-4">
             <ui-text-input-with-label v-model="audiobook.book.title" label="Title" />

client/pages/collection/_id.vue

@@ -2,24 +2,34 @@
   <div id="page-wrapper" class="bg-bg page overflow-hidden" :class="streamAudiobook ? 'streaming' : ''">
     <div class="w-full h-full overflow-y-auto px-2 py-6 md:p-8">
       <div class="flex flex-col sm:flex-row max-w-6xl mx-auto">
-        <div class="w-full flex justify-center md:block sm:w-32 md:w-52" style="min-width: 208px">
+        <div class="w-full flex justify-center md:block sm:w-32 md:w-52" style="min-width: 240px">
           <div class="relative" style="height: fit-content">
-            <cards-group-cover :name="collectionName" type="collection" :book-items="bookItems" :width="176" :height="176" />
+            <covers-collection-cover :book-items="bookItems" :width="240" :height="120 * 1.6" />
           </div>
         </div>
         <div class="flex-grow px-2 py-6 md:py-0 md:px-10">
-          <div class="flex">
-            <div class="mb-4">
-              <div class="flex sm:items-end flex-col sm:flex-row">
-                <h1 class="text-2xl md:text-3xl font-sans">
-                  {{ collectionName }}
-                </h1>
-              </div>
-            </div>
+          <div class="flex sm:items-end flex-col sm:flex-row">
+            <h1 class="text-2xl md:text-3xl font-sans">
+              {{ collectionName }}
+            </h1>
+            <div class="flex-grow" />
+
+            <ui-icon-btn icon="edit" class="mx-0.5" @click="editClick" />
+
+            <ui-icon-btn icon="delete" class="mx-0.5" @click="removeClick" />
           </div>
+
+          <div class="my-8 max-w-2xl">
+            <p class="text-base text-gray-100">{{ description }}</p>
+          </div>
+
+          <tables-collection-books-table :books="bookItems" />
         </div>
       </div>
     </div>
+    <div v-show="processingRemove" class="absolute top-0 left-0 w-full h-full z-10 bg-black bg-opacity-40 flex items-center justify-center">
+      <ui-loading-indicator />
+    </div>
   </div>
 </template>
 
@@ -42,7 +52,9 @@ export default {
     }
   },
   data() {
-    return {}
+    return {
+      processingRemove: false
+    }
   },
   computed: {
     streamAudiobook() {
@@ -53,9 +65,33 @@ export default {
     },
     collectionName() {
       return this.collection.name || ''
+    },
+    description() {
+      return this.collection.description || ''
+    }
+  },
+  methods: {
+    editClick() {
+      this.$store.commit('globals/setEditCollection', this.collection)
+    },
+    removeClick() {
+      if (confirm(`Are you sure you want to remove collection "${this.collectionName}"?`)) {
+        this.processingRemove = true
+        var collectionName = this.collectionName
+        this.$axios
+          .$delete(`/api/collection/${this.collection.id}`)
+          .then(() => {
+            this.processingRemove = false
+            this.$toast.success(`Collection "${collectionName}" Removed`)
+          })
+          .catch((error) => {
+            console.error('Failed to remove collection', error)
+            this.processingRemove = false
+            this.$toast.error(`Failed to remove collection`)
+          })
+      }
     }
   },
-  methods: {},
   mounted() {}
 }
 </script>

client/pages/config/users/_id.vue

@@ -26,7 +26,7 @@
           </tr>
           <tr v-for="ab in userAudiobooks" :key="ab.audiobookId" :class="!ab.isRead ? '' : 'isRead'">
             <td>
-              <cards-book-cover :width="50" :audiobook="ab" />
+              <covers-book-cover :width="50" :audiobook="ab" />
             </td>
             <td class="font-book">
               <p>{{ ab.book ? ab.book.title : ab.audiobookTitle || 'Unknown' }}</p>