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

client/components/ui/MultiSelectQueryInput.vue

@@ -3,26 +3,30 @@
     <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" style="min-height: 40px" class="flex-wrap relative w-full shadow-sm flex items-center border border-gray-600 rounded-md px-2 py-1 cursor-text" :class="disabled ? 'bg-black-300' : 'bg-primary'" @click.stop.prevent="clickWrapper" @mouseup.stop.prevent @mousedown.prevent>
-          <div v-for="item in selected" :key="item" class="rounded-full px-2 py-1 ma-0.5 text-xs bg-bg flex flex-nowrap whitespace-nowrap items-center relative">
+        <div ref="inputWrapper" style="min-height: 36px" class="flex-wrap relative w-full shadow-sm flex items-center border border-gray-600 rounded px-2 py-0.5" :class="wrapperClass" @click.stop.prevent="clickWrapper" @mouseup.stop.prevent @mousedown.prevent>
+          <div v-for="item in selected" :key="item.id" class="rounded-full px-2 py-0.5 m-0.5 text-xs bg-bg flex flex-nowrap whitespace-nowrap items-center justify-center relative min-w-12">
             <div class="w-full h-full rounded-full absolute top-0 left-0 opacity-0 hover:opacity-100 px-1 bg-bg bg-opacity-75 flex items-center justify-end cursor-pointer">
-              <span class="material-icons text-white hover:text-error" style="font-size: 1.1rem" @click.stop="removeItem(item)">close</span>
+              <span v-if="showEdit" class="material-icons text-white hover:text-warning mr-1" style="font-size: 1rem" @click.stop="editItem(item)">edit</span>
+              <span class="material-icons text-white hover:text-error" style="font-size: 1.1rem" @click.stop="removeItem(item.id)">close</span>
             </div>
-            {{ item }}
+            {{ item[textKey] }}
           </div>
-          <input ref="input" v-model="textInput" :disabled="disabled" style="min-width: 40px; width: 40px" class="h-full bg-primary focus:outline-none px-1" @keydown="keydownInput" @focus="inputFocus" @blur="inputBlur" />
+          <div v-if="showEdit" class="rounded-full cursor-pointer w-6 h-6 mx-0.5 bg-bg flex items-center justify-center">
+            <span class="material-icons text-white hover:text-success pt-px pr-px" style="font-size: 1.1rem" @click.stop="addItem">add</span>
+          </div>
+          <input v-show="!readonly" ref="input" v-model="textInput" :disabled="disabled" style="min-width: 40px; width: 40px" class="h-full bg-primary focus:outline-none px-1" @keydown="keydownInput" @focus="inputFocus" @blur="inputBlur" />
         </div>
       </form>
 
       <ul ref="menu" v-show="showMenu" class="absolute z-50 mt-1 w-full bg-bg border border-black-200 shadow-lg max-h-56 rounded-md 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 itemsToShow">
-          <li :key="item.id" class="text-gray-50 select-none relative py-2 pr-9 cursor-pointer hover:bg-black-400" role="option" @click="clickedOption($event, item.name)" @mouseup.stop.prevent @mousedown.prevent>
+          <li :key="item.id" class="text-gray-50 select-none relative py-2 pr-9 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="selected.includes(item)" class="text-yellow-400 absolute inset-y-0 right-0 flex items-center pr-4">
+            <span v-if="getIsSelected(item.id)" class="text-yellow-400 absolute inset-y-0 right-0 flex items-center pr-4">
               <span class="material-icons text-xl">checkmark</span>
-            </span> -->
+            </span>
           </li>
         </template>
         <li v-if="!itemsToShow.length" class="text-gray-50 select-none relative py-2 pr-9" role="option">
@@ -44,7 +48,13 @@ export default {
     },
     endpoint: String,
     label: String,
-    disabled: Boolean
+    disabled: Boolean,
+    readonly: Boolean,
+    showEdit: Boolean,
+    textKey: {
+      type: String,
+      default: 'name'
+    }
   },
   data() {
     return {
@@ -66,20 +76,36 @@ export default {
   computed: {
     selected: {
       get() {
-        return this.value
+        return this.value || []
       },
       set(val) {
         this.$emit('input', val)
       }
     },
+    wrapperClass() {
+      var classes = []
+      if (this.disabled) classes.push('bg-black-300')
+      else classes.push('bg-primary')
+      if (!this.readonly) classes.push('cursor-text')
+      return classes.join(' ')
+    },
     showMenu() {
-      return this.isFocused
+      return this.isFocused && this.currentSearch
     },
     itemsToShow() {
       return this.items
     }
   },
   methods: {
+    addItem() {
+      this.$emit('add')
+    },
+    editItem(item) {
+      this.$emit('edit', item)
+    },
+    getIsSelected(itemValue) {
+      return !!this.selected.find((i) => i.id === itemValue)
+    },
     async search() {
       if (this.searching) return
       this.currentSearch = this.textInput
@@ -96,7 +122,7 @@ export default {
       clearTimeout(this.typingTimeout)
       this.typingTimeout = setTimeout(() => {
         this.search()
-      }, 500)
+      }, 250)
       this.setInputWidth()
     },
     setInputWidth() {
@@ -165,7 +191,7 @@ export default {
       if (this.textInput) this.submitForm()
       if (this.$refs.input) this.$refs.input.blur()
     },
-    clickedOption(e, itemValue) {
+    clickedOption(e, item) {
       if (e) {
         e.stopPropagation()
         e.preventDefault()
@@ -173,11 +199,11 @@ export default {
       if (this.$refs.input) this.$refs.input.focus()
 
       var newSelected = null
-      if (this.selected.includes(itemValue)) {
-        newSelected = this.selected.filter((s) => s !== itemValue)
-        this.$emit('removedItem', itemValue)
+      if (this.getIsSelected(item.id)) {
+        newSelected = this.selected.filter((s) => s.id !== item.id)
+        this.$emit('removedItem', item.id)
       } else {
-        newSelected = this.selected.concat([itemValue])
+        newSelected = this.selected.concat([item])
       }
       this.textInput = null
       this.currentSearch = null
@@ -193,10 +219,10 @@ export default {
       }
       this.focus()
     },
-    removeItem(item) {
-      var remaining = this.selected.filter((i) => i !== item)
+    removeItem(itemId) {
+      var remaining = this.selected.filter((i) => i.id !== itemId)
       this.$emit('input', remaining)
-      this.$emit('removedItem', item)
+      this.$emit('removedItem', itemId)
       this.$nextTick(() => {
         this.recalcMenuPos()
       })
@@ -221,7 +247,10 @@ export default {
       if (matchesItem) {
         this.clickedOption(null, matchesItem)
       } else {
-        this.insertNewItem(this.textInput)
+        this.insertNewItem({
+          id: `new-${Date.now()}`,
+          name: this.textInput
+        })
       }
     },
     scroll() {