Init

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

@@ -0,0 +1,100 @@
+<template>
+  <div class="w-full h-full overflow-hidden">
+    <div class="flex items-center mb-4">
+      <div class="w-72">
+        <form @submit.prevent="submitSearch">
+          <ui-text-input-with-label v-model="search" label="Search Title" placeholder="Search" :disabled="processing" />
+        </form>
+      </div>
+      <div class="flex-grow" />
+    </div>
+    <div v-show="processing" class="flex h-full items-center justify-center">
+      <p>Loading...</p>
+    </div>
+    <div v-show="!processing" class="w-full max-h-full overflow-y-auto overflow-x-hidden">
+      <template v-for="(res, index) in searchResults">
+        <div :key="index" class="w-full border-b border-gray-700 pb-2 hover:bg-gray-300 hover:bg-opacity-10 cursor-pointer" @click="selectMatch(res)">
+          <div class="flex py-1">
+            <img :src="res.cover || '/book_placeholder.jpg'" class="h-24 object-cover" style="width: 60px" />
+            <div class="px-4 flex-grow">
+              <div class="flex items-center">
+                <h1>{{ res.title }}</h1>
+                <div class="flex-grow" />
+                <p>{{ res.first_publish_year || res.first_publish_date }}</p>
+              </div>
+              <p class="text-gray-400">{{ res.author }}</p>
+              <div class="w-full max-h-12 overflow-hidden">
+                <p class="text-gray-500 text-xs" v-html="res.description"></p>
+              </div>
+            </div>
+          </div>
+          <div v-if="res.covers && res.covers.length > 1" class="flex">
+            <template v-for="cover in res.covers.slice(1)">
+              <img :key="cover" :src="cover" class="h-20 w-12 object-cover mr-1" />
+            </template>
+          </div>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    audiobook: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  data() {
+    return {
+      search: null,
+      lastSearch: null,
+      processing: false,
+      searchResults: []
+    }
+  },
+  watch: {
+    audiobook: {
+      immediate: true,
+      handler(newVal) {
+        if (newVal) this.init()
+      }
+    }
+  },
+  computed: {},
+  methods: {
+    submitSearch() {
+      this.runSearch()
+    },
+    async runSearch() {
+      if (this.lastSearch === this.search) return
+      console.log('Search', this.lastSearch, this.search)
+
+      this.searchResults = []
+      this.processing = true
+      this.lastSearch = this.search
+      var results = await this.$axios.$get(`/api/find/search?title=${this.search}`)
+      console.log('Got results', results)
+      this.searchResults = results
+      this.processing = false
+    },
+    init() {
+      if (!this.audiobook.book || !this.audiobook.book.title) {
+        this.search = null
+        return
+      }
+      if (this.searchResults.length) {
+        console.log('Already hav ereuslts', this.searchResults, this.lastSearch)
+      }
+      this.search = this.audiobook.book.title
+      this.runSearch()
+    },
+    selectMatch(match) {}
+  },
+  mounted() {
+    console.log('Match mounted')
+  }
+}
+</script>