Add multi select dropdown with query from server

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

@@ -14,7 +14,8 @@
         <div class="flex mt-2 -mx-1">
           <div class="w-3/4 px-1">
             <!-- <ui-text-input-with-label v-model="details.authors" label="Author" /> -->
-            <p>Authors placeholder</p>
+            <!-- <p>Authors placeholder</p> -->
+            <ui-multi-select-query-input ref="authorsSelect" v-model="authorNames" label="Authors" endpoint="authors/search" />
           </div>
           <div class="flex-grow px-1">
             <ui-text-input-with-label v-model="details.publishYear" type="number" label="Publish Year" />
@@ -115,6 +116,7 @@ export default {
         genres: []
       },
       newTags: [],
+      authorNames: [],
       resettingProgress: false,
       isScrollable: false,
       savingMetadata: false,
@@ -278,7 +280,7 @@ export default {
       this.details.title = this.mediaMetadata.title
       this.details.subtitle = this.mediaMetadata.subtitle
       this.details.description = this.mediaMetadata.description
-      this.details.authors = this.mediaMetadata.authors
+      this.details.authors = this.mediaMetadata.authors || []
       this.details.narrator = this.mediaMetadata.narrator
       this.details.genres = this.mediaMetadata.genres || []
       this.details.series = this.mediaMetadata.series
@@ -289,6 +291,7 @@ export default {
       this.details.asin = this.mediaMetadata.asin || null
 
       this.newTags = this.media.tags || []
+      this.authorNames = this.details.authors.map((au) => au.name)
     },
     removeItem() {
       if (confirm(`Are you sure you want to remove this item?\n\n*Does not delete your files, only removes the item from audiobookshelf`)) {

client/components/ui/MultiSelectQueryInput.vue

@@ -0,0 +1,252 @@
+<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" 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 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>
+            </div>
+            {{ item }}
+          </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>
+      </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>
+            <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 class="material-icons text-xl">checkmark</span>
+            </span> -->
+          </li>
+        </template>
+        <li v-if="!itemsToShow.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: {
+      type: Array,
+      default: () => []
+    },
+    endpoint: String,
+    label: String,
+    disabled: Boolean
+  },
+  data() {
+    return {
+      textInput: null,
+      currentSearch: null,
+      searching: false,
+      typingTimeout: null,
+      isFocused: false,
+      menu: null,
+      items: []
+    }
+  },
+  watch: {
+    showMenu(newVal) {
+      if (newVal) this.setListener()
+      else this.removeListener()
+    }
+  },
+  computed: {
+    selected: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    },
+    showMenu() {
+      return this.isFocused
+    },
+    itemsToShow() {
+      return this.items
+    }
+  },
+  methods: {
+    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()
+      }, 500)
+      this.setInputWidth()
+    },
+    setInputWidth() {
+      setTimeout(() => {
+        var value = this.$refs.input.value
+        var len = value.length * 7 + 24
+        this.$refs.input.style.width = len + 'px'
+        this.recalcMenuPos()
+      }, 50)
+    },
+    recalcMenuPos() {
+      if (!this.menu) return
+      var boundingBox = this.$refs.inputWrapper.getBoundingClientRect()
+      if (boundingBox.y > window.innerHeight - 8) {
+        // Input is off the page
+        return this.forceBlur()
+      }
+      var menuHeight = this.menu.clientHeight
+      var top = boundingBox.y + boundingBox.height - 4
+      if (top + menuHeight > window.innerHeight - 20) {
+        // Reverse menu to open upwards
+        top = boundingBox.y - menuHeight - 4
+      }
+
+      this.menu.style.top = top + 'px'
+      this.menu.style.left = boundingBox.x + 'px'
+      this.menu.style.width = boundingBox.width + 'px'
+    },
+    unmountMountMenu() {
+      if (!this.$refs.menu) return
+      this.menu = this.$refs.menu
+
+      var boundingBox = this.$refs.inputWrapper.getBoundingClientRect()
+      this.menu.remove()
+      document.body.appendChild(this.menu)
+      this.menu.style.top = boundingBox.y + boundingBox.height - 4 + 'px'
+      this.menu.style.left = boundingBox.x + 'px'
+      this.menu.style.width = boundingBox.width + 'px'
+    },
+    inputFocus() {
+      if (!this.menu) {
+        this.unmountMountMenu()
+      }
+      this.isFocused = true
+      this.$nextTick(this.recalcMenuPos)
+    },
+    inputBlur() {
+      if (!this.isFocused) return
+
+      setTimeout(() => {
+        if (document.activeElement === this.$refs.input) {
+          return
+        }
+        this.isFocused = false
+        if (this.textInput) this.submitForm()
+      }, 50)
+    },
+    focus() {
+      if (this.$refs.input) this.$refs.input.focus()
+    },
+    blur() {
+      if (this.$refs.input) this.$refs.input.blur()
+    },
+    forceBlur() {
+      this.isFocused = false
+      if (this.textInput) this.submitForm()
+      if (this.$refs.input) this.$refs.input.blur()
+    },
+    clickedOption(e, itemValue) {
+      if (e) {
+        e.stopPropagation()
+        e.preventDefault()
+      }
+      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)
+      } else {
+        newSelected = this.selected.concat([itemValue])
+      }
+      this.textInput = null
+      this.currentSearch = null
+      this.$emit('input', newSelected)
+      this.$nextTick(() => {
+        this.recalcMenuPos()
+      })
+    },
+    clickWrapper() {
+      if (this.disabled) return
+      if (this.showMenu) {
+        return this.blur()
+      }
+      this.focus()
+    },
+    removeItem(item) {
+      var remaining = this.selected.filter((i) => i !== item)
+      this.$emit('input', remaining)
+      this.$emit('removedItem', item)
+      this.$nextTick(() => {
+        this.recalcMenuPos()
+      })
+    },
+    insertNewItem(item) {
+      this.selected.push(item)
+      this.$emit('input', this.selected)
+      this.$emit('newItem', item)
+      this.textInput = null
+      this.currentSearch = null
+      this.$nextTick(() => {
+        this.blur()
+      })
+    },
+    submitForm() {
+      if (!this.textInput) return
+
+      var cleaned = this.textInput.trim()
+      var matchesItem = this.items.find((i) => {
+        return i === cleaned
+      })
+      if (matchesItem) {
+        this.clickedOption(null, matchesItem)
+      } else {
+        this.insertNewItem(this.textInput)
+      }
+    },
+    scroll() {
+      this.recalcMenuPos()
+    },
+    setListener() {
+      document.addEventListener('scroll', this.scroll, true)
+    },
+    removeListener() {
+      document.removeEventListener('scroll', this.scroll, true)
+    }
+  },
+  mounted() {},
+  beforeDestroy() {
+    if (this.menu) this.menu.remove()
+  }
+}
+</script>
+
+<style scoped>
+input {
+  border-style: inherit !important;
+}
+input:read-only {
+  color: #aaa;
+  background-color: #444;
+}
+</style>

server/ApiController.js

@@ -22,12 +22,11 @@ const PodcastFinder = require('./finders/PodcastFinder')
 const FileSystemController = require('./controllers/FileSystemController')
 
 class ApiController {
-  constructor(db, auth, scanner, streamManager, rssFeeds, downloadManager, coverController, backupManager, watcher, cacheManager, emitter, clientEmitter) {
+  constructor(db, auth, scanner, streamManager, downloadManager, coverController, backupManager, watcher, cacheManager, emitter, clientEmitter) {
     this.db = db
     this.auth = auth
     this.scanner = scanner
     this.streamManager = streamManager
-    this.rssFeeds = rssFeeds
     this.downloadManager = downloadManager
     this.backupManager = backupManager
     this.coverController = coverController
@@ -145,6 +144,7 @@ class ApiController {
     this.router.get('/search/covers', this.findCovers.bind(this))
     this.router.get('/search/books', this.findBooks.bind(this))
     this.router.get('/search/podcast', this.findPodcasts.bind(this))
+    this.router.get('/search/authors', this.findAuthor.bind(this))
 
     //
     // File System Routes
@@ -155,7 +155,7 @@ class ApiController {
     // Others
     //
     this.router.get('/authors', this.getAuthors.bind(this))
-    this.router.get('/authors/search', this.searchAuthor.bind(this))
+    this.router.get('/authors/search', this.searchAuthors.bind(this))
     this.router.get('/authors/:id', this.getAuthor.bind(this))
     this.router.post('/authors', this.createAuthor.bind(this))
     this.router.patch('/authors/:id', this.updateAuthor.bind(this))
@@ -165,8 +165,6 @@ class ApiController {
 
     this.router.post('/authorize', this.authorize.bind(this))
 
-    this.router.post('/feed', this.openRssFeed.bind(this))
-
     this.router.get('/download/:id', this.download.bind(this))
 
     this.router.post('/syncUserAudiobookData', this.syncUserAudiobookData.bind(this))
@@ -201,6 +199,12 @@ class ApiController {
     res.json(results)
   }
 
+  async findAuthor(req, res) {
+    var query = req.query.q
+    var author = await this.authorFinder.findAuthorByName(query)
+    res.json(author)
+  }
+
   authorize(req, res) {
     if (!req.user) {
       Logger.error('Invalid user in authorize')
@@ -209,20 +213,19 @@ class ApiController {
     res.json({ user: req.user })
   }
 
-  async openRssFeed(req, res) {
-    var audiobookId = req.body.audiobookId
-    var audiobook = this.db.audiobooks.find(ab => ab.id === audiobookId)
-    if (!audiobook) return res.sendStatus(404)
-    var feed = await this.rssFeeds.openFeed(audiobook)
-    console.log('Feed open', feed)
-    res.json(feed)
-  }
-
   async getAuthors(req, res) {
     var authors = this.db.authors.filter(p => p.isAuthor)
     res.json(authors)
   }
 
+  searchAuthors(req, res) {
+    var query = req.query.q || ''
+    var limit = req.query.limit && !isNaN(req.query.limit) ? Number(req.query.limit) : 100
+    var authors = this.db.authors.filter(au => au.name.toLowerCase().includes(query.toLowerCase()))
+    authors = authors.slice(0, limit)
+    res.json(authors)
+  }
+
   async getAuthor(req, res) {
     var author = this.db.authors.find(p => p.id === req.params.id)
     if (!author) {
@@ -231,12 +234,6 @@ class ApiController {
     res.json(author.toJSON())
   }
 
-  async searchAuthor(req, res) {
-    var query = req.query.q
-    var author = await this.authorFinder.findAuthorByName(query)
-    res.json(author)
-  }
-
   async createAuthor(req, res) {
     var author = await this.authorFinder.createAuthor(req.body)
     if (!author) {

server/Server.js

@@ -25,7 +25,6 @@ const LogManager = require('./LogManager')
 const ApiController = require('./ApiController')
 const HlsController = require('./HlsController')
 const StreamManager = require('./StreamManager')
-const RssFeeds = require('./RssFeeds')
 const DownloadManager = require('./DownloadManager')
 const CoverController = require('./CoverController')
 const CacheManager = require('./CacheManager')
@@ -62,9 +61,8 @@ class Server {
     this.scanner = new Scanner(this.db, this.coverController, this.emitter.bind(this))
 
     this.streamManager = new StreamManager(this.db, this.emitter.bind(this), this.clientEmitter.bind(this))
-    this.rssFeeds = new RssFeeds(this.Port, this.db)
     this.downloadManager = new DownloadManager(this.db, this.Uid, this.Gid)
-    this.apiController = new ApiController(this.db, this.auth, this.scanner, this.streamManager, this.rssFeeds, this.downloadManager, this.coverController, this.backupManager, this.watcher, this.cacheManager, this.emitter.bind(this), this.clientEmitter.bind(this))
+    this.apiController = new ApiController(this.db, this.auth, this.scanner, this.streamManager, this.downloadManager, this.coverController, this.backupManager, this.watcher, this.cacheManager, this.emitter.bind(this), this.clientEmitter.bind(this))
     this.hlsController = new HlsController(this.db, this.auth, this.streamManager, this.emitter.bind(this), this.streamManager.StreamsPath)
 
     Logger.logManager = this.logManager