KawAnime/components/choiceWindow.vue

86 lines
2.0 KiB
Vue

<template lang="pug">
v-dialog(v-model='show', persistent, max-width='650', @keydown.esc='hide()')
v-card
v-card-title.headline Add «{{ entry }}» to
v-card-text
v-layout(row, wrap)
template(v-for='i in 5')
v-flex(v-if='i < 4', xs4)
v-checkbox.option.primary--text(
v-model='selected',
:value='options[i - 1].value',
:label='options[i - 1].label'
)
v-flex.checkbox-container(v-else, xs6)
v-checkbox.option.primary--text(
v-model='selected',
:value='options[i - 1].value',
:label='options[i - 1].label'
)
v-card-actions
v-spacer
v-btn.blue--text.darken-1(flat, @click='add()') Add
v-btn.blue--text.darken-1(flat, @click='hide()') Close
</template>
<script>
export default {
props: {
entry: ''
},
data () {
return {
selected: [],
options: [{
label: 'Watch list',
value: 'watchList'
}, {
label: 'Watching',
value: 'watching'
}, {
label: 'Seen',
value: 'seen'
}, {
label: 'On Hold',
value: 'onHold'
}, {
label: 'Dropped',
value: 'dropped'
}]
}
},
methods: {
hide () {
this.$store.commit('setAddToChoice', false)
},
add () {
this.selected.forEach((listName) => {
const entry = this.entry
this.$store.dispatch('watchLists/updateList', {
listName: listName,
entry: entry
})
})
this.hide()
}
},
computed: {
show: {
get () {
return this.$store.state.addToChoice
},
set (bool) {
this.$store.commit('setAddToChoice', bool)
}
}
}
}
</script>
<style lang="stylus" scoped>
.option
width 60%
margin-left 35%
</style>