From 7d8fb3bb109de45ee028f8ff769c93f7042c541c Mon Sep 17 00:00:00 2001
From: "Brian C. Arnold" <connect@brian-arnold.dev>
Date: Sun, 26 May 2024 08:08:07 -0400
Subject: [PATCH 1/2] Change Tags and Narrators to work the same as Genres on
 the Match Import page.

---
 client/components/modals/item/tabs/Match.vue | 29 ++++++++++++++++----
 1 file changed, 23 insertions(+), 6 deletions(-)

diff --git a/client/components/modals/item/tabs/Match.vue b/client/components/modals/item/tabs/Match.vue
index ed4db87a..c8640dcc 100644
--- a/client/components/modals/item/tabs/Match.vue
+++ b/client/components/modals/item/tabs/Match.vue
@@ -79,7 +79,7 @@
         <div v-if="selectedMatchOrig.narrator" class="flex items-center py-2">
           <ui-checkbox v-model="selectedMatchUsage.narrator" checkbox-bg="bg" @input="checkboxToggled" />
           <div class="flex-grow ml-4">
-            <ui-text-input-with-label v-model="selectedMatch.narrator" :disabled="!selectedMatchUsage.narrator" :label="$strings.LabelNarrators" />
+            <ui-multi-select v-model="selectedMatch.narrator" :items="narrators" :disabled="!selectedMatchUsage.narrator" :label="$strings.LabelNarrators" />
             <p v-if="mediaMetadata.narratorName" class="text-xs ml-1 text-white text-opacity-60">{{ $strings.LabelCurrently }} {{ mediaMetadata.narratorName || '' }}</p>
           </div>
         </div>
@@ -122,7 +122,7 @@
         <div v-if="selectedMatchOrig.tags" class="flex items-center py-2">
           <ui-checkbox v-model="selectedMatchUsage.tags" checkbox-bg="bg" @input="checkboxToggled" />
           <div class="flex-grow ml-4">
-            <ui-text-input-with-label v-model="selectedMatch.tags" :disabled="!selectedMatchUsage.tags" :label="$strings.LabelTags" />
+            <ui-multi-select v-model="selectedMatch.tags" :items="tags" :disabled="!selectedMatchUsage.tags" :label="$strings.LabelTags" />
             <p v-if="media.tags" class="text-xs ml-1 text-white text-opacity-60">{{ $strings.LabelCurrently }} {{ media.tags.join(', ') }}</p>
           </div>
         </div>
@@ -280,6 +280,9 @@ export default {
     bookCoverAspectRatio() {
       return this.$store.getters['libraries/getBookCoverAspectRatio']
     },
+    filterData() {
+      return this.$store.state.libraries.filterData
+    },
     providers() {
       if (this.isPodcast) return this.$store.state.scanners.podcastProviders
       return this.$store.state.scanners.providers
@@ -305,11 +308,16 @@ export default {
     isPodcast() {
       return this.mediaType == 'podcast'
     },
+    narrators() {
+      return this.filterData.narrators || []
+    },
     genres() {
-      const filterData = this.$store.state.libraries.filterData || {}
-      const currentGenres = filterData.genres || []
+      const currentGenres = this.filterData.genres || []
       const selectedMatchGenres = this.selectedMatch.genres || []
       return [...new Set([...currentGenres, ...selectedMatchGenres])]
+    },
+    tags() {
+      return this.filterData.tags || []
     }
   },
   methods: {
@@ -479,6 +487,15 @@ export default {
           // match.genres = match.genres.join(',')
           match.genres = match.genres.split(',').map((g) => g.trim())
         }
+        if (match.tags && !Array.isArray(match.tags)) {
+          match.tags = match.tags.split(',').map((g) => g.trim())
+        }
+        if (match.narrator && !Array.isArray(match.narrator)) {
+          match.narrator = match.narrator.split(',').map((g) => g.trim())
+        }
+        if (match.author && !Array.isArray(match.author)) {
+          match.author = match.author.split(',').map((g) => g.trim())
+        }
       }
 
       console.log('Select Match', match)
@@ -522,11 +539,11 @@ export default {
             )
             updatePayload.metadata.authors = authorPayload
           } else if (key === 'narrator') {
-            updatePayload.metadata.narrators = this.selectedMatch[key].split(',').map((v) => v.trim())
+            updatePayload.metadata.narrators = this.selectedMatch[key]
           } else if (key === 'genres') {
             updatePayload.metadata.genres = [...this.selectedMatch[key]]
           } else if (key === 'tags') {
-            updatePayload.tags = this.selectedMatch[key].split(',').map((v) => v.trim())
+            updatePayload.tags = this.selectedMatch[key]
           } else if (key === 'itunesId') {
             updatePayload.metadata.itunesId = Number(this.selectedMatch[key])
           } else {

From 7f28fbb3303b5e3ede12f5af52adb2bda4aee886 Mon Sep 17 00:00:00 2001
From: advplyr <advplyr@protonmail.com>
Date: Sun, 26 May 2024 14:37:07 -0500
Subject: [PATCH 2/2] Update:Prevent MultiSelect input from adding items that
 are whitespace & trim whitespace before adding items

---
 client/components/modals/item/tabs/Match.vue |  3 ---
 client/components/ui/MultiSelect.vue         | 27 ++++++++++++++------
 2 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/client/components/modals/item/tabs/Match.vue b/client/components/modals/item/tabs/Match.vue
index c8640dcc..9e2fe8be 100644
--- a/client/components/modals/item/tabs/Match.vue
+++ b/client/components/modals/item/tabs/Match.vue
@@ -493,9 +493,6 @@ export default {
         if (match.narrator && !Array.isArray(match.narrator)) {
           match.narrator = match.narrator.split(',').map((g) => g.trim())
         }
-        if (match.author && !Array.isArray(match.author)) {
-          match.author = match.author.split(',').map((g) => g.trim())
-        }
       }
 
       console.log('Select Match', match)
diff --git a/client/components/ui/MultiSelect.vue b/client/components/ui/MultiSelect.vue
index 516b062d..337f501f 100644
--- a/client/components/ui/MultiSelect.vue
+++ b/client/components/ui/MultiSelect.vue
@@ -302,6 +302,14 @@ export default {
         this.recalcMenuPos()
       })
     },
+    resetInput() {
+      this.textInput = null
+      this.currentSearch = null
+      this.selectedMenuItemIndex = null
+      this.$nextTick(() => {
+        this.blur()
+      })
+    },
     insertNewItem(item) {
       this.selected.push(item)
       this.$emit('input', this.selected)
@@ -316,15 +324,18 @@ export default {
     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)
+      const cleaned = this.textInput.trim()
+      if (!cleaned) {
+        this.resetInput()
       } else {
-        this.insertNewItem(this.textInput)
+        const matchesItem = this.items.find((i) => i === cleaned)
+        if (matchesItem) {
+          this.clickedOption(null, matchesItem)
+        } else {
+          this.insertNewItem(cleaned)
+        }
       }
+
       if (this.$refs.input) this.$refs.input.style.width = '24px'
     },
     scroll() {
@@ -352,4 +363,4 @@ input:read-only {
   color: #aaa;
   background-color: #444;
 }
-</style>
\ No newline at end of file
+</style>