Add: experimental match tab with google books search #59, Add: isbn field for books #59

client/components/cards/BookMatchCard.vue

@@ -6,11 +6,11 @@
         <div class="flex items-center">
           <h1>{{ book.title }}</h1>
           <div class="flex-grow" />
-          <p>{{ book.year || book.first_publish_date }}</p>
+          <p>{{ book.publishYear }}</p>
         </div>
         <p class="text-gray-400">{{ book.author }}</p>
         <div class="w-full max-h-12 overflow-hidden">
-          <p class="text-gray-500 text-xs" v-html="book.description"></p>
+          <p class="text-gray-500 text-xs">{{ book.description }}</p>
         </div>
       </div>
     </div>
@@ -53,7 +53,7 @@ export default {
     }
   },
   mounted() {
-    this.selectedCover = this.bookCovers.length ? this.bookCovers[0] : null
+    this.selectedCover = this.bookCovers.length ? this.bookCovers[0] : this.book.cover || null
   }
 }
 </script>

client/components/modals/EditModal.vue

@@ -20,7 +20,7 @@
 
     <div class="w-full h-full text-sm rounded-b-lg rounded-tr-lg bg-bg shadow-lg border border-black-300">
       <keep-alive>
-        <component v-if="audiobook" :is="tabName" :audiobook="audiobook" :processing.sync="processing" @close="show = false" />
+        <component v-if="audiobook" :is="tabName" :audiobook="audiobook" :processing.sync="processing" @close="show = false" @selectTab="selectTab" />
       </keep-alive>
     </div>
   </modals-modal>
@@ -44,11 +44,6 @@ export default {
           title: 'Cover',
           component: 'modals-edit-tabs-cover'
         },
-        // {
-        //   id: 'match',
-        //   title: 'Match',
-        //   component: 'modals-edit-tabs-match'
-        // },
         {
           id: 'tracks',
           title: 'Tracks',
@@ -68,6 +63,11 @@ export default {
           id: 'download',
           title: 'Download',
           component: 'modals-edit-tabs-download'
+        },
+        {
+          id: 'match',
+          title: 'Match',
+          component: 'modals-edit-tabs-match'
         }
       ]
     }
@@ -123,12 +123,16 @@ export default {
     userCanDownload() {
       return this.$store.getters['user/getUserCanDownload']
     },
+    showExperimentalFeatures() {
+      return this.$store.state.showExperimentalFeatures
+    },
     availableTabs() {
       if (!this.userCanUpdate && !this.userCanDownload) return []
       return this.tabs.filter((tab) => {
         if (tab.id === 'download' && this.isMissing) return false
         if ((tab.id === 'download' || tab.id === 'tracks') && this.userCanDownload) return true
         if (tab.id !== 'download' && tab.id !== 'tracks' && this.userCanUpdate) return true
+        if (tab.id === 'match' && this.showExperimentalFeatures) return true
         return false
       })
     },
@@ -194,7 +198,9 @@ export default {
       }
     },
     selectTab(tab) {
-      this.selectedTab = tab
+      if (this.availableTabs.find((t) => t.id === tab)) {
+        this.selectedTab = tab
+      }
     },
     audiobookUpdated() {
       if (!this.show) this.fetchOnShow = true

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

@@ -1,15 +1,17 @@
 <template>
-  <div class="w-full h-full overflow-hidden px-4 py-6">
+  <div class="w-full h-full overflow-hidden px-4 py-6 relative">
     <form @submit.prevent="submitSearch">
       <div class="flex items-center justify-start -mx-1 h-20">
-        <div class="w-72 px-1">
-          <ui-text-input-with-label v-model="searchTitle" label="Search Title" placeholder="Search" :disabled="processing" />
+        <div class="w-40 px-1">
+          <ui-dropdown v-model="provider" :items="providers" label="Provider" small />
         </div>
         <div class="w-72 px-1">
-          <ui-text-input-with-label v-model="searchAuthor" label="Author" :disabled="processing" />
+          <ui-text-input-with-label v-model="searchTitle" label="Search Title" placeholder="Search" />
+        </div>
+        <div class="w-72 px-1">
+          <ui-text-input-with-label v-model="searchAuthor" label="Author" />
         </div>
         <ui-btn class="mt-5 ml-1" type="submit">Search</ui-btn>
-        <div class="flex-grow" />
       </div>
     </form>
     <div v-show="processing" class="flex h-full items-center justify-center">
@@ -23,6 +25,51 @@
         <cards-book-match-card :key="index" :book="res" @select="selectMatch" />
       </template>
     </div>
+    <div v-if="selectedMatch" class="absolute top-0 left-0 w-full bg-bg h-full p-8 max-h-full overflow-y-auto overflow-x-hidden">
+      <div class="flex mb-2">
+        <div class="w-8 h-8 rounded-full hover:bg-white hover:bg-opacity-10 flex items-center justify-center cursor-pointer" @click="selectedMatch = null">
+          <span class="material-icons text-3xl">arrow_back</span>
+        </div>
+        <p class="text-xl pl-3">Update Book Details</p>
+      </div>
+      <form @submit.prevent="submitMatchUpdate">
+        <div v-if="selectedMatch.cover" class="flex items-center py-2">
+          <ui-checkbox v-model="selectedMatchUsage.cover" />
+          <ui-text-input-with-label v-model="selectedMatch.cover" :disabled="!selectedMatchUsage.cover" label="Cover" class="flex-grow ml-4" />
+        </div>
+        <div v-if="selectedMatch.title" class="flex items-center py-2">
+          <ui-checkbox v-model="selectedMatchUsage.title" />
+          <ui-text-input-with-label v-model="selectedMatch.title" :disabled="!selectedMatchUsage.title" label="Title" class="flex-grow ml-4" />
+        </div>
+        <div v-if="selectedMatch.subtitle" class="flex items-center py-2">
+          <ui-checkbox v-model="selectedMatchUsage.subtitle" />
+          <ui-text-input-with-label v-model="selectedMatch.subtitle" :disabled="!selectedMatchUsage.subtitle" label="Subtitle" class="flex-grow ml-4" />
+        </div>
+        <div v-if="selectedMatch.author" class="flex items-center py-2">
+          <ui-checkbox v-model="selectedMatchUsage.author" />
+          <ui-text-input-with-label v-model="selectedMatch.author" :disabled="!selectedMatchUsage.author" label="Author" class="flex-grow ml-4" />
+        </div>
+        <div v-if="selectedMatch.description" class="flex items-center py-2">
+          <ui-checkbox v-model="selectedMatchUsage.description" />
+          <ui-textarea-with-label v-model="selectedMatch.description" :rows="3" :disabled="!selectedMatchUsage.description" label="Description" class="flex-grow ml-4" />
+        </div>
+        <div v-if="selectedMatch.publisher" class="flex items-center py-2">
+          <ui-checkbox v-model="selectedMatchUsage.publisher" />
+          <ui-text-input-with-label v-model="selectedMatch.publisher" :disabled="!selectedMatchUsage.publisher" label="Publisher" class="flex-grow ml-4" />
+        </div>
+        <div v-if="selectedMatch.publishYear" class="flex items-center py-2">
+          <ui-checkbox v-model="selectedMatchUsage.publishYear" />
+          <ui-text-input-with-label v-model="selectedMatch.publishYear" :disabled="!selectedMatchUsage.publishYear" label="Publish Year" class="flex-grow ml-4" />
+        </div>
+        <div v-if="selectedMatch.isbn" class="flex items-center py-2">
+          <ui-checkbox v-model="selectedMatchUsage.isbn" />
+          <ui-text-input-with-label v-model="selectedMatch.isbn" :disabled="!selectedMatchUsage.isbn" label="ISBN" class="flex-grow ml-4" />
+        </div>
+        <div class="flex items-center justify-end py-2">
+          <ui-btn color="success" type="submit">Update</ui-btn>
+        </div>
+      </form>
+    </div>
   </div>
 </template>
 
@@ -41,9 +88,30 @@ export default {
       searchTitle: null,
       searchAuthor: null,
       lastSearch: null,
-      provider: 'best',
+      providers: [
+        {
+          text: 'Google Books',
+          value: 'google'
+        },
+        {
+          text: 'Open Library',
+          value: 'openlibrary'
+        }
+      ],
+      provider: 'google',
       searchResults: [],
-      hasSearched: false
+      hasSearched: false,
+      selectedMatch: null,
+      selectedMatchUsage: {
+        title: true,
+        subtitle: true,
+        cover: true,
+        author: true,
+        description: true,
+        isbn: true,
+        publisher: true,
+        publishYear: true
+      }
     }
   },
   watch: {
@@ -95,6 +163,18 @@ export default {
       this.hasSearched = true
     },
     init() {
+      this.selectedMatch = null
+      this.selectedMatchUsage = {
+        title: true,
+        subtitle: true,
+        cover: true,
+        author: true,
+        description: true,
+        isbn: true,
+        publisher: true,
+        publishYear: true
+      }
+
       if (this.audiobook.id !== this.audiobookId) {
         this.searchResults = []
         this.hasSearched = false
@@ -107,31 +187,63 @@ export default {
         return
       }
       this.searchTitle = this.audiobook.book.title
-      this.searchAuthor = this.audiobook.book.author || ''
+      this.searchAuthor = this.audiobook.book.authorFL || ''
     },
-    async selectMatch(match) {
+    selectMatch(match) {
+      this.selectedMatch = match
+    },
+    buildMatchUpdatePayload() {
+      var updatePayload = {}
+      for (const key in this.selectedMatchUsage) {
+        if (this.selectedMatchUsage[key] && this.selectedMatch[key]) {
+          updatePayload[key] = this.selectedMatch[key]
+        }
+      }
+      return updatePayload
+    },
+    async submitMatchUpdate() {
+      var updatePayload = this.buildMatchUpdatePayload()
+      if (!Object.keys(updatePayload).length) {
+        return
+      }
       this.isProcessing = true
-      const updatePayload = {
-        book: {}
+
+      if (updatePayload.cover) {
+        var coverPayload = {
+          url: updatePayload.cover
+        }
+        var success = await this.$axios.$post(`/api/audiobook/${this.audiobook.id}/cover`, coverPayload).catch((error) => {
+          console.error('Failed to update', error)
+          return false
+        })
+        if (success) {
+          this.$toast.success('Book Cover Updated')
+        } else {
+          this.$toast.error('Book Cover Failed to Update')
+        }
+        console.log('Updated cover')
+        delete updatePayload.cover
       }
-      if (match.cover) {
-        updatePayload.book.cover = match.cover
+
+      if (Object.keys(updatePayload).length) {
+        var bookUpdatePayload = {
+          book: updatePayload
+        }
+        var success = await this.$axios.$patch(`/api/audiobook/${this.audiobook.id}`, bookUpdatePayload).catch((error) => {
+          console.error('Failed to update', error)
+          return false
+        })
+        if (success) {
+          this.$toast.success('Book Details Updated')
+          this.selectedMatch = null
+          this.$emit('selectTab', 'details')
+        } else {
+          this.$toast.error('Book Details Failed to Update')
+        }
+      } else {
+        this.selectedMatch = null
       }
-      if (match.title) {
-        updatePayload.book.title = match.title
-      }
-      if (match.description) {
-        updatePayload.book.description = match.description
-      }
-      var updatedAudiobook = await this.$axios.$patch(`/api/audiobook/${this.audiobook.id}`, updatePayload).catch((error) => {
-        console.error('Failed to update', error)
-        return false
-      })
       this.isProcessing = false
-      if (updatedAudiobook) {
-        this.$toast.success('Update Successful')
-        this.$emit('close')
-      }
     }
   }
 }

client/components/ui/Checkbox.vue

@@ -0,0 +1,33 @@
+<template>
+  <label class="flex justify-start items-start">
+    <div class="bg-white border-2 rounded border-gray-400 w-6 h-6 flex flex-shrink-0 justify-center items-center focus-within:border-blue-500">
+      <input v-model="selected" type="checkbox" class="opacity-0 absolute" />
+      <svg v-if="selected" class="fill-current w-4 h-4 text-green-500 pointer-events-none" viewBox="0 0 20 20"><path d="M0 11l2-2 5 5L18 3l2 2L7 18z" /></svg>
+    </div>
+    <div v-if="label" class="select-none">{{ label }}</div>
+  </label>
+</template>
+
+<script>
+export default {
+  props: {
+    value: Boolean,
+    label: Boolean
+  },
+  data() {
+    return {}
+  },
+  computed: {
+    selected: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', !!val)
+      }
+    }
+  },
+  methods: {},
+  mounted() {}
+}
+</script>

client/components/ui/Dropdown.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="relative w-full" v-click-outside="clickOutside">
-    <p class="text-sm text-opacity-75 mb-1">{{ label }}</p>
-    <button type="button" :disabled="disabled" class="relative h-10 w-full border border-gray-500 rounded shadow-sm pl-3 pr-10 py-2 text-left focus:outline-none sm:text-sm cursor-pointer bg-primary" aria-haspopup="listbox" aria-expanded="true" @click.stop.prevent="clickShowMenu">
+    <p class="text-sm font-semibold">{{ label }}</p>
+    <button type="button" :disabled="disabled" class="relative w-full border border-gray-500 rounded shadow-sm pl-3 pr-8 py-2 text-left focus:outline-none sm:text-sm cursor-pointer bg-primary" :class="small ? 'h-9' : 'h-10'" aria-haspopup="listbox" aria-expanded="true" @click.stop.prevent="clickShowMenu">
       <span class="flex items-center">
-        <span class="block truncate">{{ selectedText }}</span>
+        <span class="block truncate" :class="small ? 'text-sm' : ''">{{ selectedText }}</span>
       </span>
       <span class="ml-3 absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
         <span class="material-icons text-gray-100">expand_more</span>
@@ -36,7 +36,8 @@ export default {
       type: Array,
       default: () => []
     },
-    disabled: Boolean
+    disabled: Boolean,
+    small: Boolean
   },
   data() {
     return {

client/components/ui/TextInput.vue

@@ -80,6 +80,7 @@ input {
   border-style: inherit !important;
 }
 input:read-only {
+  color: #aaa;
   background-color: #444;
 }
 </style>

client/components/ui/TextInputWithLabel.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="w-full">
-    <p class="px-1 text-sm font-semibold">
+    <p class="px-1 text-sm font-semibold" :class="disabled ? 'text-gray-400' : ''">
       {{ label }}<em v-if="note" class="font-normal text-xs pl-2">{{ note }}</em>
     </p>
     <ui-text-input v-model="inputValue" :disabled="disabled" :type="type" class="w-full" />

client/components/ui/TextareaInput.vue

@@ -38,10 +38,11 @@ export default {
 </script>
 
 <style scoped>
-input {
+textarea {
   border-style: inherit !important;
 }
-input:read-only {
-  background-color: #eee;
+textarea:read-only {
+  color: #aaa;
+  background-color: #444;
 }
 </style>

client/components/ui/TextareaWithLabel.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="w-full">
-    <p class="px-1 text-sm font-semibold">{{ label }}</p>
-    <ui-textarea-input v-model="inputValue" :rows="rows" class="w-full" />
+    <p class="px-1 text-sm font-semibold" :class="disabled ? 'text-gray-400' : ''">{{ label }}</p>
+    <ui-textarea-input v-model="inputValue" :disabled="disabled" :rows="rows" class="w-full" />
   </div>
 </template>
 
@@ -10,6 +10,7 @@ export default {
   props: {
     value: [String, Number],
     label: String,
+    disabled: Boolean,
     rows: {
       type: Number,
       default: 2

client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "audiobookshelf-client",
-  "version": "1.5.5",
+  "version": "1.5.6",
   "description": "Audiobook manager and player",
   "main": "index.js",
   "scripts": {