mirror of
https://github.com/advplyr/audiobookshelf.git
synced 2025-12-13 23:39:39 +00:00
Update multi-series edit for match and make into separate component with inner modal
This commit is contained in:
advplyr
parent
a5dacd7821
commit
f41d6d5c77
7 changed files with 284 additions and 108 deletions
120
client/components/modals/EditSeriesInputInnerModal.vue
Normal file
120
client/components/modals/EditSeriesInputInnerModal.vue
Normal file
|
|
@ -0,0 +1,120 @@
|
|||
<template>
|
||||
<div ref="wrapper" class="hidden absolute top-0 left-0 w-full h-full bg-black bg-opacity-50 rounded-lg items-center justify-center" style="z-index: 51" @click="clickClose">
|
||||
<div class="absolute top-5 right-5 h-12 w-12 flex items-center justify-center cursor-pointer text-white hover:text-gray-300">
|
||||
<span class="material-icons text-4xl">close</span>
|
||||
</div>
|
||||
<div ref="content" class="text-white">
|
||||
<form v-if="selectedSeries" @submit.prevent="submitSeriesForm">
|
||||
<div class="bg-bg rounded-lg p-8" @click.stop>
|
||||
<div class="flex">
|
||||
<div class="flex-grow p-1 min-w-80">
|
||||
<ui-input-dropdown ref="newSeriesSelect" v-model="selectedSeries.name" :items="existingSeriesNames" :disabled="!selectedSeries.id.startsWith('new')" label="Series Name" />
|
||||
</div>
|
||||
<div class="w-40 p-1">
|
||||
<ui-text-input-with-label v-model="selectedSeries.sequence" label="Sequence" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-end mt-2 p-1">
|
||||
<ui-btn type="submit">Save</ui-btn>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
value: Boolean,
|
||||
selectedSeries: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
existingSeriesNames: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
el: null,
|
||||
content: null
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
show(newVal) {
|
||||
if (newVal) {
|
||||
this.$nextTick(this.setShow)
|
||||
} else {
|
||||
this.setHide()
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
show: {
|
||||
get() {
|
||||
return this.value
|
||||
},
|
||||
set(val) {
|
||||
this.$emit('input', val)
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
submitSeriesForm() {
|
||||
if (this.$refs.newSeriesSelect) {
|
||||
this.$refs.newSeriesSelect.blur()
|
||||
}
|
||||
|
||||
this.$emit('submit')
|
||||
},
|
||||
clickClose() {
|
||||
this.show = false
|
||||
},
|
||||
hotkey(action) {
|
||||
if (action === this.$hotkeys.Modal.CLOSE) {
|
||||
this.show = false
|
||||
}
|
||||
},
|
||||
setShow() {
|
||||
if (!this.el || !this.content) {
|
||||
this.init()
|
||||
}
|
||||
if (!this.el || !this.content) {
|
||||
return
|
||||
}
|
||||
|
||||
document.body.appendChild(this.el)
|
||||
setTimeout(() => {
|
||||
this.content.style.transform = 'scale(1)'
|
||||
}, 10)
|
||||
document.documentElement.classList.add('modal-open')
|
||||
|
||||
this.$store.commit('setInnerModalOpen', true)
|
||||
this.$eventBus.$on('modal-hotkey', this.hotkey)
|
||||
},
|
||||
setHide() {
|
||||
if (this.content) this.content.style.transform = 'scale(0)'
|
||||
if (this.el) this.el.remove()
|
||||
document.documentElement.classList.remove('modal-open')
|
||||
|
||||
this.$store.commit('setInnerModalOpen', false)
|
||||
this.$eventBus.$off('modal-hotkey', this.hotkey)
|
||||
},
|
||||
init() {
|
||||
this.el = this.$refs.wrapper
|
||||
this.content = this.$refs.content
|
||||
if (this.content && this.el) {
|
||||
this.el.classList.remove('hidden')
|
||||
this.el.classList.add('flex')
|
||||
this.content.style.transform = 'scale(0)'
|
||||
this.content.style.transition = 'transform 0.25s cubic-bezier(0.16, 1, 0.3, 1)'
|
||||
this.el.style.opacity = 1
|
||||
this.el.remove()
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -104,6 +104,7 @@ export default {
|
|||
}
|
||||
},
|
||||
hotkey(action) {
|
||||
if (this.$store.state.innerModalOpen) return
|
||||
if (action === this.$hotkeys.Modal.CLOSE) {
|
||||
this.show = false
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="w-full h-full overflow-hidden px-4 py-6 relative">
|
||||
<div id="match-wrapper" class="w-full h-full overflow-hidden px-4 py-6 relative">
|
||||
<form @submit.prevent="submitSearch">
|
||||
<div class="flex items-center justify-start -mx-1 h-20">
|
||||
<div class="w-40 px-1">
|
||||
|
|
@ -87,7 +87,7 @@
|
|||
<div v-if="selectedMatch.series" class="flex items-center py-2">
|
||||
<ui-checkbox v-model="selectedMatchUsage.series" />
|
||||
<div class="flex-grow ml-4">
|
||||
<ui-multi-select-query-input v-if="selectedMatch.series" ref="seriesSelect" v-model="seriesItems" text-key="displayName" label="Series" readonly />
|
||||
<widgets-series-input-widget v-model="selectedMatch.series" />
|
||||
<p v-if="mediaMetadata.seriesName" class="text-xs ml-1 text-white text-opacity-60">Currently: {{ mediaMetadata.seriesName || '' }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -198,9 +198,9 @@ export default {
|
|||
publishedYear: true,
|
||||
series: true,
|
||||
volumeNumber: true,
|
||||
genres: true,
|
||||
tags: true,
|
||||
language: true,
|
||||
genres: true,
|
||||
tags: true,
|
||||
language: true,
|
||||
explicit: true,
|
||||
asin: true,
|
||||
isbn: true,
|
||||
|
|
@ -233,12 +233,15 @@ export default {
|
|||
get() {
|
||||
return this.selectedMatch.series.map((se) => {
|
||||
return {
|
||||
id: `new-${Math.floor(Math.random() * 10000)}`,
|
||||
displayName: se.volumeNumber ? `${se.series} #${se.volumeNumber}` : se.series,
|
||||
...se
|
||||
name: se.series,
|
||||
sequence: se.volumeNumber || ''
|
||||
}
|
||||
})
|
||||
},
|
||||
set(val) {
|
||||
console.log('set series items', val)
|
||||
this.selectedMatch.series = val
|
||||
}
|
||||
},
|
||||
|
|
@ -332,9 +335,9 @@ export default {
|
|||
publishedYear: true,
|
||||
series: true,
|
||||
volumeNumber: true,
|
||||
genres: true,
|
||||
tags: true,
|
||||
language: true,
|
||||
genres: true,
|
||||
tags: true,
|
||||
language: true,
|
||||
explicit: true,
|
||||
asin: true,
|
||||
isbn: true,
|
||||
|
|
@ -362,6 +365,17 @@ export default {
|
|||
else this.provider = localStorage.getItem('book-provider') || 'google'
|
||||
},
|
||||
selectMatch(match) {
|
||||
if (match && match.series) {
|
||||
match.series = match.series.map((se) => {
|
||||
return {
|
||||
id: `new-${Math.floor(Math.random() * 10000)}`,
|
||||
displayName: se.volumeNumber ? `${se.series} #${se.volumeNumber}` : se.series,
|
||||
name: se.series,
|
||||
sequence: se.volumeNumber || ''
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
this.selectedMatch = match
|
||||
},
|
||||
buildMatchUpdatePayload() {
|
||||
|
|
@ -372,21 +386,33 @@ export default {
|
|||
for (const key in this.selectedMatchUsage) {
|
||||
if (this.selectedMatchUsage[key] && this.selectedMatch[key]) {
|
||||
if (key === 'series') {
|
||||
if(!Array.isArray(this.selectedMatch[key])) this.selectedMatch[key] = [{ series: this.selectedMatch[key], volumeNumber: volumeNumber }]
|
||||
var seriesPayload = []
|
||||
this.selectedMatch[key].forEach(seriesItem => seriesPayload.push({
|
||||
id: `new-${Math.floor(Math.random() * 10000)}`,
|
||||
name: seriesItem.series,
|
||||
sequence: seriesItem.volumeNumber
|
||||
}))
|
||||
if (!Array.isArray(this.selectedMatch[key])) {
|
||||
seriesPayload.push({
|
||||
id: `new-${Math.floor(Math.random() * 10000)}`,
|
||||
name: this.selectedMatch[key],
|
||||
sequence: volumeNumber
|
||||
})
|
||||
} else {
|
||||
this.selectedMatch[key].forEach((seriesItem) =>
|
||||
seriesPayload.push({
|
||||
id: seriesItem.id,
|
||||
name: seriesItem.name,
|
||||
sequence: seriesItem.sequence
|
||||
})
|
||||
)
|
||||
}
|
||||
|
||||
updatePayload.metadata.series = seriesPayload
|
||||
} else if (key === 'author' && !this.isPodcast) {
|
||||
if(!Array.isArray(this.selectedMatch[key])) this.selectedMatch[key] = [this.selectedMatch[key]]
|
||||
if (!Array.isArray(this.selectedMatch[key])) this.selectedMatch[key] = [this.selectedMatch[key]]
|
||||
var authorPayload = []
|
||||
this.selectedMatch[key].forEach(authorName => authorPayload.push({
|
||||
id: `new-${Math.floor(Math.random() * 10000)}`,
|
||||
name: authorName
|
||||
}))
|
||||
this.selectedMatch[key].forEach((authorName) =>
|
||||
authorPayload.push({
|
||||
id: `new-${Math.floor(Math.random() * 10000)}`,
|
||||
name: authorName
|
||||
})
|
||||
)
|
||||
updatePayload.metadata.authors = authorPayload
|
||||
} else if (key === 'narrator') {
|
||||
updatePayload.metadata.narrators = [this.selectedMatch[key]]
|
||||
|
|
@ -401,7 +427,7 @@ export default {
|
|||
}
|
||||
}
|
||||
}
|
||||
console.log(updatePayload)
|
||||
|
||||
return updatePayload
|
||||
},
|
||||
async submitMatchUpdate() {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue