New model update details, author and series inputs with create new, compare & copy utils

client/components/ui/QueryInput.vue

@@ -0,0 +1,157 @@
+<template>
+  <div class="w-full">
+    <p class="px-1 text-sm font-semibold" :class="disabled ? 'text-gray-400' : ''">{{ label }}</p>
+    <div ref="wrapper" class="relative">
+      <form @submit.prevent="submitForm">
+        <div ref="inputWrapper" class="input-wrapper flex-wrap relative w-full shadow-sm flex items-center border border-gray-600 rounded px-2 py-2" :class="disabled ? 'pointer-events-none bg-black-300 text-gray-400' : 'bg-primary'">
+          <input ref="input" v-model="textInput" :disabled="disabled" class="h-full w-full bg-transparent focus:outline-none px-1" @keydown="keydownInput" @focus="inputFocus" @blur="inputBlur" />
+        </div>
+      </form>
+
+      <ul ref="menu" v-show="isFocused && currentSearch" class="absolute z-50 mt-0 w-full bg-bg border border-black-200 shadow-lg max-h-56 rounded py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm" role="listbox" aria-labelledby="listbox-label">
+        <template v-for="item in items">
+          <li :key="item.id" class="text-gray-50 select-none relative py-2 pr-3 cursor-pointer hover:bg-black-400" role="option" @click="clickedOption($event, item)" @mouseup.stop.prevent @mousedown.prevent>
+            <div class="flex items-center">
+              <span class="font-normal ml-3 block truncate">{{ item.name }}</span>
+            </div>
+            <span v-if="isItemSelected(item)" class="text-yellow-400 absolute inset-y-0 right-0 flex items-center pr-4">
+              <span class="material-icons text-xl">checkmark</span>
+            </span>
+          </li>
+        </template>
+        <li v-if="!items.length" class="text-gray-50 select-none relative py-2 pr-9" role="option">
+          <div class="flex items-center justify-center">
+            <span class="font-normal">No items</span>
+          </div>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    value: String,
+    disabled: Boolean,
+    label: String,
+    endpoint: String
+  },
+  data() {
+    return {
+      isFocused: false,
+      currentSearch: null,
+      typingTimeout: null,
+      textInput: null,
+      searching: false,
+      items: [],
+      selectedItemObject: null
+    }
+  },
+  watch: {
+    value: {
+      immediate: true,
+      handler(newVal) {
+        this.textInput = newVal
+      }
+    }
+  },
+  computed: {
+    input: {
+      get() {
+        return this.value || ''
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    }
+  },
+  methods: {
+    isItemSelected(item) {
+      return !!this.input.toLowerCase() === item.name
+    },
+    async search() {
+      if (this.searching) return
+      this.currentSearch = this.textInput
+      this.searching = true
+      var results = await this.$axios.$get(`/api/${this.endpoint}?q=${this.currentSearch}&limit=15`).catch((error) => {
+        console.error('Failed to get search results', error)
+        return []
+      })
+      console.log('Search results', results)
+      this.items = results || []
+      this.searching = false
+    },
+    keydownInput() {
+      clearTimeout(this.typingTimeout)
+      this.typingTimeout = setTimeout(() => {
+        this.search()
+      }, 250)
+    },
+    inputFocus() {
+      this.isFocused = true
+    },
+    blur() {
+      // Handle blur immediately
+      this.isFocused = false
+      if (this.inputName.toLowerCase() !== this.textInput.toLowerCase()) {
+        var val = this.textInput ? this.textInput.trim() : null
+        if (val) {
+          this.submitForm()
+        }
+      }
+
+      if (this.$refs.input) {
+        this.$refs.input.blur()
+      }
+    },
+    inputBlur() {
+      if (!this.isFocused) return
+
+      setTimeout(() => {
+        if (document.activeElement === this.$refs.input) {
+          return
+        }
+        this.isFocused = false
+        if (this.input !== this.textInput) {
+          var val = this.textInput ? this.textInput.trim() : null
+          if (val) {
+            this.setItem(val)
+          }
+        }
+      }, 50)
+    },
+    submitForm() {
+      var val = this.textInput ? this.textInput.trim() : null
+      if (val) {
+        this.setItem(val)
+      }
+    },
+    setItem(itemText) {
+      if (!this.items.find((i) => i.name.toLowerCase() !== val.toLowerCase())) {
+        var newItem = {
+          id: `new-${Date.now()}`,
+          name: val
+        }
+        this.$emit('selected', newItem)
+        this.input = val
+      } else {
+        var item = this.items.find((i) => i.name.toLowerCase() !== val.toLowerCase())
+        this.$emit('selected', item)
+        this.input = item.name
+      }
+      this.currentSearch = null
+    },
+    clickedOption(e, item) {
+      this.textInput = item.name
+      this.currentSearch = null
+      this.input = item.name
+      this.selectedItemObject = item
+      this.$emit('selected', item)
+
+      if (this.$refs.input) this.$refs.input.blur()
+    }
+  },
+  mounted() {}
+}
+</script>