Add: author object, author search api, author images #187

client/components/cards/PersonCard.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="h-24 flex">
+    <div class="w-32">
+      <img :src="imgSrc" class="w-full object-cover" />
+    </div>
+    <div class="flex-grow">
+      <p>{{ name }}</p>
+      <p class="text-sm text-gray-300">{{ description }}</p>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    person: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  data() {
+    return {
+      placeholder: '/Logo.png'
+    }
+  },
+  computed: {
+    userToken() {
+      return this.$store.getters['user/getToken']
+    },
+    _person() {
+      return this.person || {}
+    },
+    name() {
+      return this._person.name || ''
+    },
+    image() {
+      return this._person.image || null
+    },
+    description() {
+      return this._person.description
+    },
+    lastUpdate() {
+      return this._person.lastUpdate
+    },
+    imgSrc() {
+      if (!this.image) return this.placeholder
+      var encodedImg = this.image.replace(/%/g, '%25').replace(/#/g, '%23')
+
+      var url = new URL(encodedImg, document.baseURI)
+      return url.href + `?token=${this.userToken}&ts=${this.lastUpdate}`
+    }
+  },
+  methods: {},
+  mounted() {}
+}
+</script>

client/components/cards/SearchAuthorCard.vue

@@ -0,0 +1,73 @@
+<template>
+  <div>
+    <form @submit.prevent="submitSearch">
+      <div class="flex items-center justify-start -mx-1 h-20">
+        <!-- <div class="w-40 px-1">
+          <ui-dropdown v-model="provider" :items="providers" label="Provider" small />
+        </div> -->
+        <div class="flex-grow 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>
+    </form>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    authorName: String
+  },
+  data() {
+    return {
+      searchAuthor: null,
+      lastSearch: null,
+      isProcessing: false,
+      provider: 'audnexus',
+      providers: [
+        {
+          text: 'Audnexus',
+          value: 'audnexus'
+        }
+      ]
+    }
+  },
+  watch: {
+    authorName: {
+      immediate: true,
+      handler(newVal) {
+        this.searchAuthor = newVal
+      }
+    }
+  },
+  computed: {},
+  methods: {
+    getSearchQuery() {
+      return `q=${this.searchAuthor}`
+    },
+    submitSearch() {
+      if (!this.searchAuthor) {
+        this.$toast.warning('Author name is required')
+        return
+      }
+      this.runSearch()
+    },
+    async runSearch() {
+      var searchQuery = this.getSearchQuery()
+      if (this.lastSearch === searchQuery) return
+      this.isProcessing = true
+      this.lastSearch = searchQuery
+      var result = await this.$axios.$get(`/api/authors/search?${searchQuery}`).catch((error) => {
+        console.error('Failed', error)
+        return []
+      })
+      this.isProcessing = false
+      if (result) {
+        this.$emit('match', result)
+      }
+    }
+  },
+  mounted() {}
+}
+</script>