137 lines
3.8 KiB
Vue
137 lines
3.8 KiB
Vue
<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-3 right-3 md:top-5 md:right-5 h-8 w-8 md:h-12 md:w-12 flex items-center justify-center cursor-pointer text-white hover:text-gray-300">
|
|
<span class="material-icons text-2xl md:text-4xl">close</span>
|
|
</div>
|
|
<div ref="content" class="text-white">
|
|
<form v-if="selectedSeries" @submit.prevent="submitSeriesForm">
|
|
<div class="bg-bg rounded-lg px-2 py-6 sm:p-6 md:p-8" @click.stop>
|
|
<div class="flex">
|
|
<div class="flex-grow p-1 min-w-48 sm:min-w-64 md:min-w-80">
|
|
<ui-input-dropdown ref="newSeriesSelect" v-model="selectedSeries.name" :items="existingSeriesNames" :disabled="!isNewSeries" :label="$strings.LabelSeriesName" />
|
|
</div>
|
|
<div class="w-24 sm:w-28 md:w-40 p-1">
|
|
<ui-text-input-with-label ref="sequenceInput" v-model="selectedSeries.sequence" :label="$strings.LabelSequence" />
|
|
</div>
|
|
</div>
|
|
<div class="flex justify-end mt-2 p-1">
|
|
<ui-btn type="submit">{{ $strings.ButtonSubmit }}</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)
|
|
}
|
|
},
|
|
isNewSeries() {
|
|
if (!this.selectedSeries || !this.selectedSeries.id) return false
|
|
return this.selectedSeries.id.startsWith('new')
|
|
}
|
|
},
|
|
methods: {
|
|
setInputFocus() {
|
|
if (this.isNewSeries) {
|
|
// Focus on series input if new series
|
|
if (this.$refs.newSeriesSelect) {
|
|
this.$refs.newSeriesSelect.setFocus()
|
|
}
|
|
} else {
|
|
// Focus on sequence input if existing series
|
|
if (this.$refs.sequenceInput) {
|
|
this.$refs.sequenceInput.setFocus()
|
|
}
|
|
}
|
|
},
|
|
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)
|
|
|
|
this.$store.commit('setInnerModalOpen', true)
|
|
this.$eventBus.$on('modal-hotkey', this.hotkey)
|
|
|
|
this.setInputFocus()
|
|
},
|
|
setHide() {
|
|
if (this.content) this.content.style.transform = 'scale(0)'
|
|
if (this.el) this.el.remove()
|
|
|
|
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> |