New data model batch routes and batch editor

client/components/ui/Checkbox.vue

@@ -1,10 +1,10 @@
 <template>
-  <label class="flex justify-start items-center cursor-pointer">
-    <div class="border-2 rounded border-gray-400 flex flex-shrink-0 justify-center items-center" :class="wrapperClass">
-      <input v-model="selected" type="checkbox" class="opacity-0 absolute cursor-pointer" />
+  <label class="flex justify-start items-center" :class="!disabled ? 'cursor-pointer' : ''">
+    <div class="border-2 rounded flex flex-shrink-0 justify-center items-center" :class="wrapperClass">
+      <input v-model="selected" :disabled="disabled" type="checkbox" class="opacity-0 absolute" :class="!disabled ? 'cursor-pointer' : ''" />
       <svg v-if="selected" class="fill-current pointer-events-none" :class="svgClass" viewBox="0 0 20 20"><path d="M0 11l2-2 5 5L18 3l2 2L7 18z" /></svg>
     </div>
-    <div v-if="label" class="select-none pl-1 text-gray-100" :class="labelClass">{{ label }}</div>
+    <div v-if="label" class="select-none text-gray-100" :class="labelClassname">{{ label }}</div>
   </label>
 </template>
 
@@ -18,10 +18,19 @@ export default {
       type: String,
       default: 'white'
     },
+    borderColor: {
+      type: String,
+      default: 'gray-400'
+    },
     checkColor: {
       type: String,
       default: 'green-500'
-    }
+    },
+    labelClass: {
+      type: String,
+      default: ''
+    },
+    disabled: Boolean
   },
   data() {
     return {}
@@ -36,15 +45,17 @@ export default {
       }
     },
     wrapperClass() {
-      var classes = [`bg-${this.checkboxBg}`]
+      var classes = [`bg-${this.checkboxBg} border-${this.borderColor}`]
       if (this.small) classes.push('w-4 h-4')
       else classes.push('w-6 h-6')
 
       return classes.join(' ')
     },
-    labelClass() {
-      if (this.small) return 'text-xs md:text-sm'
-      return ''
+    labelClassname() {
+      if (this.labelClass) return this.labelClass
+      var classes = ['pl-1']
+      if (this.small) classes.push('text-xs md:text-sm')
+      return classes.join(' ')
     },
     svgClass() {
       var classes = [`text-${this.checkColor}`]

client/components/ui/InputDropdown.vue

@@ -8,7 +8,7 @@
         </div>
       </form>
 
-      <ul ref="menu" v-show="isFocused && items.length && (itemsToShow.length || 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">
+      <ul ref="menu" v-show="isFocused && itemsToShow.length" 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 itemsToShow">
           <li :key="item" 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">
@@ -47,7 +47,7 @@ export default {
   data() {
     return {
       isFocused: false,
-      currentSearch: null,
+      // currentSearch: null,
       typingTimeout: null,
       textInput: null
     }
@@ -70,12 +70,13 @@ export default {
       }
     },
     itemsToShow() {
-      if (!this.currentSearch || !this.textInput || this.textInput === this.input) {
-        return this.items
+      if (!this.editable) return this.items
+      if (!this.textInput || this.textInput === this.input) {
+        return []
       }
       return this.items.filter((i) => {
         var iValue = String(i).toLowerCase()
-        return iValue.includes(this.currentSearch.toLowerCase())
+        return iValue.includes(this.textInput.toLowerCase())
       })
     }
   },
@@ -83,7 +84,7 @@ export default {
     keydownInput() {
       clearTimeout(this.typingTimeout)
       this.typingTimeout = setTimeout(() => {
-        this.currentSearch = this.textInput
+        // this.currentSearch = this.textInput
       }, 100)
     },
     inputFocus() {
@@ -127,11 +128,11 @@ export default {
       if (val && !this.items.includes(val)) {
         this.$emit('newItem', val)
       }
-      this.currentSearch = null
+      // this.currentSearch = null
     },
     clickedOption(e, item) {
       this.textInput = null
-      this.currentSearch = null
+      // this.currentSearch = null
       this.input = item
       if (this.$refs.input) this.$refs.input.blur()
     }

client/components/ui/MultiSelect.vue

@@ -70,7 +70,7 @@ export default {
   computed: {
     selected: {
       get() {
-        return this.value
+        return this.value || []
       },
       set(val) {
         this.$emit('input', val)

client/components/ui/MultiSelectQueryInput.vue

@@ -82,6 +82,9 @@ export default {
         this.$emit('input', val)
       }
     },
+    userToken() {
+      return this.$store.getters['user/getToken']
+    },
     wrapperClass() {
       var classes = []
       if (this.disabled) classes.push('bg-black-300')
@@ -110,7 +113,7 @@ export default {
       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) => {
+      var results = await this.$axios.$get(`/api/${this.endpoint}?q=${this.currentSearch}&limit=15&token=${this.userToken}`).catch((error) => {
         console.error('Failed to get search results', error)
         return []
       })