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

client/components/tables/CollectionBooksTable.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="w-full bg-primary bg-opacity-40">
+    <div class="w-full h-14 flex items-center px-4 bg-primary">
+      <p>Collection List</p>
+      <div class="w-6 h-6 bg-white bg-opacity-10 flex items-center justify-center rounded-full ml-2">
+        <p class="font-mono text-sm">{{ books.length }}</p>
+      </div>
+      <div class="flex-grow" />
+      <p v-if="totalDuration">{{ totalDurationPretty }}</p>
+    </div>
+    <template v-for="book in books">
+      <tables-collection-book-table-row :key="book.id" :book="book" />
+    </template>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    books: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {}
+  },
+  computed: {
+    totalDuration() {
+      var _total = 0
+      this.books.forEach((book) => {
+        _total += book.duration
+      })
+      return _total
+    },
+    totalDurationPretty() {
+      return this.$elapsedPretty(this.totalDuration)
+    }
+  },
+  methods: {},
+  mounted() {}
+}
+</script>

client/components/tables/collection/BookTableRow.vue

@@ -0,0 +1,58 @@
+<template>
+  <div class="w-full px-6 py-2" @mouseover="mouseover" @mouseleave="mouseleave" :class="isHovering ? 'bg-white bg-opacity-5' : ''">
+    <div v-if="book" class="flex h-20">
+      <covers-book-cover :audiobook="book" :width="50" />
+      <div class="w-80 h-full px-2 flex items-center">
+        <div>
+          <p class="truncate">{{ bookTitle }}</p>
+          <p class="truncate text-gray-400 text-sm">{{ bookAuthor }}</p>
+        </div>
+      </div>
+      <div class="flex-grow flex items-center">
+        <p>{{ bookDuration }}</p>
+      </div>
+      <!-- <div class="w-12 flex items-center justify-center">
+        <span class="material-icons text-lg text-white text-opacity-70 hover:text-opacity-100 cursor-pointer">radio_button_unchecked</span>
+      </div> -->
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    book: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  data() {
+    return {
+      isHovering: false
+    }
+  },
+  computed: {
+    _book() {
+      return this.book.book || {}
+    },
+    bookTitle() {
+      return this._book.title || ''
+    },
+    bookAuthor() {
+      return this._book.authorFL || ''
+    },
+    bookDuration() {
+      return this.$secondsToTimestamp(this.book.duration)
+    }
+  },
+  methods: {
+    mouseover() {
+      this.isHovering = true
+    },
+    mouseleave() {
+      this.isHovering = false
+    }
+  },
+  mounted() {}
+}
+</script>