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

client/components/modals/EditCollectionModal.vue

@@ -0,0 +1,120 @@
+<template>
+  <modals-modal v-model="show" name="edit-collection" :width="700" :height="'unset'" :processing="processing">
+    <template #outer>
+      <div class="absolute top-0 left-0 p-5 w-2/3 overflow-hidden">
+        <p class="font-book text-3xl text-white truncate">Collection</p>
+      </div>
+    </template>
+    <div class="p-4 w-full text-sm py-6 rounded-lg bg-bg shadow-lg border border-black-300 relative overflow-hidden" style="min-height: 400px; max-height: 80vh">
+      <form @submit.prevent="submitForm">
+        <div class="flex">
+          <covers-collection-cover :book-items="books" :width="200" :height="100 * 1.6" />
+          <div class="flex-grow px-4">
+            <ui-text-input-with-label v-model="newCollectionName" label="Name" class="mb-2" />
+
+            <ui-textarea-with-label v-model="newCollectionDescription" label="Description" />
+          </div>
+        </div>
+        <div class="absolute bottom-0 left-0 right-0 w-full py-2 px-4 flex">
+          <ui-btn small color="error" type="button" @click.stop="removeClick">Remove</ui-btn>
+          <div class="flex-grow" />
+          <ui-btn color="success" type="submit">Save</ui-btn>
+        </div>
+      </form>
+    </div>
+  </modals-modal>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      processing: false,
+      newCollectionName: null,
+      newCollectionDescription: null
+    }
+  },
+  watch: {
+    show: {
+      handler(newVal) {
+        if (newVal) {
+          this.init()
+        }
+      }
+    }
+  },
+  computed: {
+    show: {
+      get() {
+        return this.$store.state.globals.showEditCollectionModal
+      },
+      set(val) {
+        this.$store.commit('globals/setShowEditCollectionModal', val)
+      }
+    },
+    collection() {
+      return this.$store.state.globals.selectedCollection || {}
+    },
+    collectionName() {
+      return this.collection.name
+    },
+    books() {
+      return this.collection.books || []
+    }
+  },
+  methods: {
+    init() {
+      this.newCollectionName = this.collectionName
+      this.newCollectionDescription = this.collection.description || ''
+    },
+    removeClick() {
+      if (confirm(`Are you sure you want to remove collection "${this.collectionName}"?`)) {
+        this.processing = true
+        var collectionName = this.collectionName
+        this.$axios
+          .$delete(`/api/collection/${this.collection.id}`)
+          .then(() => {
+            this.processing = false
+            this.show = false
+            this.$toast.success(`Collection "${collectionName}" Removed`)
+          })
+          .catch((error) => {
+            console.error('Failed to remove collection', error)
+            this.processing = false
+            this.$toast.error(`Failed to remove collection`)
+          })
+      }
+    },
+    submitForm() {
+      if (this.newCollectionName === this.collectionName && this.newCollectionDescription === this.collection.description) {
+        return
+      }
+      if (!this.newCollectionName) {
+        return this.$toast.error('Collection must have a name')
+      }
+
+      this.processing = true
+
+      var collectionUpdate = {
+        name: this.newCollectionName,
+        description: this.newCollectionDescription || null
+      }
+      this.$axios
+        .$patch(`/api/collection/${this.collection.id}`, collectionUpdate)
+        .then((collection) => {
+          console.log('Collection Updated', collection)
+          this.processing = false
+          this.show = false
+          this.$toast.success(`Collection "${collection.name}" Updated`)
+        })
+        .catch((error) => {
+          console.error('Failed to update collection', error)
+          this.processing = false
+          this.$toast.error(`Failed to update collection`)
+        })
+    }
+  },
+  mounted() {},
+  beforeDestroy() {}
+}
+</script>

client/components/modals/UserCollectionsModal.vue

@@ -8,7 +8,7 @@
         <div class="w-full overflow-y-auto overflow-x-hidden max-h-96">
           <transition-group name="list-complete" tag="div">
             <template v-for="collection in sortedCollections">
-              <modals-collections-user-collection-item :key="collection.id" :collection="collection" class="list-complete-item" @add="addToCollection" @remove="removeFromCollection" />
+              <modals-collections-user-collection-item :key="collection.id" :collection="collection" class="list-complete-item" @add="addToCollection" @remove="removeFromCollection" @close="show = false" />
             </template>
           </transition-group>
         </div>

client/components/modals/collections/UserCollectionItem.vue

@@ -2,9 +2,9 @@
   <div class="flex items-center px-4 py-2 justify-start relative hover:bg-bg" :class="wrapperClass" @mouseover="mouseover" @mouseleave="mouseleave">
     <div v-if="isBookIncluded" class="absolute top-0 left-0 h-full w-1 bg-success z-10" />
     <!-- <span class="material-icons" :class="highlight ? 'text-success' : 'text-white text-opacity-80'">{{ highlight ? 'bookmark' : 'bookmark_border' }}</span> -->
-    <div class="w-16 max-w-16 text-center">
+    <div class="w-20 max-w-20 text-center">
       <!-- <img src="/Logo.png" /> -->
-      <cards-group-cover :name="collection.name" :book-items="books" :width="64" :height="64" type="collection" />
+      <covers-collection-cover :book-items="books" :width="80" :height="40 * 1.6" />
     </div>
     <div class="flex-grow overflow-hidden px-2">
       <!-- <template v-if="isEditing">
@@ -20,7 +20,7 @@
           </div>
         </form>
       </template> -->
-      <p class="pl-2 pr-2 truncate">{{ collection.name }}</p>
+      <nuxt-link :to="`/collection/${collection.id}`" class="pl-2 pr-2 truncate hover:underline cursor-pointer" @click.native="clickNuxtLink">{{ collection.name }}</nuxt-link>
     </div>
     <div v-if="!isEditing" class="h-full flex items-center justify-end transform" :class="isHovering ? 'transition-transform translate-0 w-16' : 'translate-x-40 w-0'">
       <ui-btn v-if="!isBookIncluded" color="success" :padding-x="3" small class="h-9" @click.stop="clickAdd"><span class="material-icons pt-px">add</span></ui-btn>
@@ -61,6 +61,9 @@ export default {
     }
   },
   methods: {
+    clickNuxtLink() {
+      this.$emit('close')
+    },
     mouseover() {
       if (this.isEditing) return
       this.isHovering = true

client/components/modals/edit-tabs/Cover.vue

@@ -2,7 +2,7 @@
   <div class="w-full h-full overflow-hidden overflow-y-auto px-4 py-6 relative">
     <div class="flex">
       <div class="relative">
-        <cards-book-cover :audiobook="audiobook" />
+        <covers-book-cover :audiobook="audiobook" />
         <!-- book cover overlay -->
         <div v-if="book.cover" class="absolute top-0 left-0 w-full h-full z-10 opacity-0 hover:opacity-100 transition-opacity duration-100">
           <div class="absolute top-0 left-0 w-full h-16 bg-gradient-to-b from-black-600 to-transparent" />
@@ -57,7 +57,7 @@
           <p v-if="!coversFound.length">No Covers Found</p>
           <template v-for="cover in coversFound">
             <div :key="cover" class="m-0.5 border-2 border-transparent hover:border-yellow-300 cursor-pointer" :class="cover === imageUrl ? 'border-yellow-300' : ''" @click="updateCover(cover)">
-              <cards-preview-cover :src="cover" :width="80" show-open-new-tab />
+              <covers-preview-cover :src="cover" :width="80" show-open-new-tab />
             </div>
           </template>
         </div>
@@ -68,7 +68,7 @@
       <p class="text-lg">Preview Cover</p>
       <span class="absolute top-4 right-4 material-icons text-2xl cursor-pointer" @click="resetCoverPreview">close</span>
       <div class="flex justify-center py-4">
-        <cards-preview-cover :src="previewUpload" :width="240" />
+        <covers-preview-cover :src="previewUpload" :width="240" />
       </div>
       <div class="absolute bottom-0 right-0 flex py-4 px-5">
         <ui-btn :disabled="processingUpload" class="mx-2" @click="resetCoverPreview">Clear</ui-btn>