112 lines
3.3 KiB
Vue
112 lines
3.3 KiB
Vue
<template>
|
|
<div>
|
|
<ui-multi-select-query-input v-model="seriesItems" text-key="displayName" :label="$strings.LabelSeries" :disabled="disabled" readonly show-edit @edit="editSeriesItem" @add="addNewSeries" />
|
|
|
|
<modals-edit-series-input-inner-modal v-model="showSeriesForm" :selected-series="selectedSeries" :existing-series-names="existingSeriesNames" @submit="submitSeriesForm" />
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
value: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
disabled: Boolean
|
|
},
|
|
data() {
|
|
return {
|
|
selectedSeries: null,
|
|
showSeriesForm: false
|
|
}
|
|
},
|
|
computed: {
|
|
seriesItems: {
|
|
get() {
|
|
return (this.value || []).map((se) => {
|
|
return {
|
|
displayName: se.sequence ? `${se.name} #${se.sequence}` : se.name,
|
|
...se
|
|
}
|
|
})
|
|
},
|
|
set(val) {
|
|
this.$emit('input', val)
|
|
}
|
|
},
|
|
series() {
|
|
return this.filterData.series || []
|
|
},
|
|
filterData() {
|
|
return this.$store.state.libraries.filterData || {}
|
|
},
|
|
existingSeriesNames() {
|
|
// Only show series names not already selected
|
|
var alreadySelectedSeriesIds = (this.value || []).map((se) => se.id)
|
|
return this.series.filter((se) => !alreadySelectedSeriesIds.includes(se.id)).map((se) => se.name)
|
|
}
|
|
},
|
|
methods: {
|
|
cancelSeriesForm() {
|
|
this.showSeriesForm = false
|
|
},
|
|
editSeriesItem(series) {
|
|
var _series = this.seriesItems.find((se) => se.id === series.id)
|
|
if (!_series) return
|
|
|
|
this.selectedSeries = {
|
|
..._series
|
|
}
|
|
|
|
console.log('Selected series', this.selectedSeries)
|
|
this.showSeriesForm = true
|
|
},
|
|
addNewSeries() {
|
|
this.selectedSeries = {
|
|
id: `new-${Date.now()}`,
|
|
name: '',
|
|
sequence: ''
|
|
}
|
|
|
|
this.showSeriesForm = true
|
|
},
|
|
submitSeriesForm() {
|
|
console.log('submit series form', this.value, this.selectedSeries)
|
|
|
|
if (!this.selectedSeries.name) {
|
|
this.$toast.error('Must enter a series')
|
|
return
|
|
}
|
|
|
|
var existingSeriesIndex = this.seriesItems.findIndex((se) => se.id === this.selectedSeries.id)
|
|
|
|
var existingSeriesSameName = this.seriesItems.findIndex((se) => se.name.toLowerCase() === this.selectedSeries.name.toLowerCase())
|
|
if (existingSeriesSameName >= 0 && existingSeriesIndex < 0) {
|
|
console.error('Attempt to add duplicate series')
|
|
this.$toast.error('Cannot add two of the same series')
|
|
return
|
|
}
|
|
|
|
var seriesSameName = this.series.find((se) => se.name.toLowerCase() === this.selectedSeries.name.toLowerCase())
|
|
if (existingSeriesIndex < 0 && seriesSameName) {
|
|
this.selectedSeries.id = seriesSameName.id
|
|
}
|
|
|
|
var selectedSeriesCopy = { ...this.selectedSeries }
|
|
selectedSeriesCopy.displayName = selectedSeriesCopy.sequence ? `${selectedSeriesCopy.name} #${selectedSeriesCopy.sequence}` : selectedSeriesCopy.name
|
|
|
|
var seriesCopy = this.seriesItems.map((v) => ({ ...v }))
|
|
if (existingSeriesIndex >= 0) {
|
|
seriesCopy.splice(existingSeriesIndex, 1, selectedSeriesCopy)
|
|
this.seriesItems = seriesCopy
|
|
} else {
|
|
seriesCopy.push(selectedSeriesCopy)
|
|
this.seriesItems = seriesCopy
|
|
}
|
|
|
|
this.showSeriesForm = false
|
|
}
|
|
}
|
|
}
|
|
</script> |