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

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')
-      }
     }
   }
 }