Fix:Authors dropdown to use filter data instead of API endpoint #2077

This commit is contained in:
advplyr 2023-09-12 12:33:41 -05:00
parent ab97a9d613
commit 9553c19b33
3 changed files with 14 additions and 17 deletions

View File

@ -46,7 +46,7 @@ export default {
type: Array, type: Array,
default: () => [] default: () => []
}, },
endpoint: String, filterKey: String,
label: String, label: String,
disabled: Boolean, disabled: Boolean,
readonly: Boolean, readonly: Boolean,
@ -60,7 +60,6 @@ export default {
return { return {
textInput: null, textInput: null,
currentSearch: null, currentSearch: null,
searching: false,
typingTimeout: null, typingTimeout: null,
isFocused: false, isFocused: false,
menu: null, menu: null,
@ -97,6 +96,9 @@ export default {
}, },
itemsToShow() { itemsToShow() {
return this.items return this.items
},
filterData() {
return this.$store.state.libraries.filterData || {}
} }
}, },
methods: { methods: {
@ -109,20 +111,15 @@ export default {
getIsSelected(itemValue) { getIsSelected(itemValue) {
return !!this.selected.find((i) => i.id === itemValue) return !!this.selected.find((i) => i.id === itemValue)
}, },
async search() { search() {
if (this.searching) return
this.currentSearch = this.textInput this.currentSearch = this.textInput
this.searching = true const dataToSearch = this.filterData[this.filterKey] || []
const results = await this.$axios
.$get(`/api/${this.endpoint}?q=${this.currentSearch}&limit=15&token=${this.userToken}`) const results = dataToSearch.filter((au) => {
.then((res) => res.results || res) return au.name.toLowerCase().includes(this.currentSearch.toLowerCase().trim())
.catch((error) => { })
console.error('Failed to get search results', error)
return []
})
this.items = results || [] this.items = results || []
this.searching = false
}, },
keydownInput() { keydownInput() {
clearTimeout(this.typingTimeout) clearTimeout(this.typingTimeout)

View File

@ -12,8 +12,8 @@
<div class="flex flex-wrap mt-2 -mx-1"> <div class="flex flex-wrap mt-2 -mx-1">
<div class="w-full md:w-3/4 px-1"> <div class="w-full md:w-3/4 px-1">
<!-- Authors filter only contains authors in this library, use query input to query all authors --> <!-- Authors filter only contains authors in this library, uses filter data -->
<ui-multi-select-query-input ref="authorsSelect" v-model="details.authors" :label="$strings.LabelAuthors" endpoint="authors/search" /> <ui-multi-select-query-input ref="authorsSelect" v-model="details.authors" :label="$strings.LabelAuthors" filter-key="authors" />
</div> </div>
<div class="flex-grow px-1 mt-2 md:mt-0"> <div class="flex-grow px-1 mt-2 md:mt-0">
<ui-text-input-with-label ref="publishYearInput" v-model="details.publishedYear" type="number" :label="$strings.LabelPublishYear" /> <ui-text-input-with-label ref="publishYearInput" v-model="details.publishedYear" type="number" :label="$strings.LabelPublishYear" />

View File

@ -26,8 +26,8 @@
</div> </div>
<div v-if="!isPodcastLibrary" class="flex items-center px-4 w-1/2"> <div v-if="!isPodcastLibrary" class="flex items-center px-4 w-1/2">
<ui-checkbox v-model="selectedBatchUsage.authors" /> <ui-checkbox v-model="selectedBatchUsage.authors" />
<!-- Authors filter only contains authors in this library, use query input to query all authors --> <!-- Authors filter only contains authors in this library, uses filter data -->
<ui-multi-select-query-input ref="authorsSelect" v-model="batchDetails.authors" :disabled="!selectedBatchUsage.authors" :label="$strings.LabelAuthors" endpoint="authors/search" class="mb-4 ml-4" /> <ui-multi-select-query-input ref="authorsSelect" v-model="batchDetails.authors" :disabled="!selectedBatchUsage.authors" :label="$strings.LabelAuthors" filter-key="authors" class="mb-4 ml-4" />
</div> </div>
<div v-if="!isPodcastLibrary && !isMapAppend" class="flex items-center px-4 w-1/2"> <div v-if="!isPodcastLibrary && !isMapAppend" class="flex items-center px-4 w-1/2">
<ui-checkbox v-model="selectedBatchUsage.publishedYear" /> <ui-checkbox v-model="selectedBatchUsage.publishedYear" />