108 lines
2.6 KiB
Vue
108 lines
2.6 KiB
Vue
<template>
|
|
<NcModal v-if="modalShow" :title="t('deck', 'Move card to another board')" @close="modalShow=false">
|
|
<div class="modal__content">
|
|
<h3>{{ t('deck', 'Move card to another board') }}</h3>
|
|
<NcMultiselect v-model="selectedBoard"
|
|
:placeholder="t('deck', 'Select a board')"
|
|
:options="activeBoards"
|
|
:max-height="100"
|
|
label="title"
|
|
@select="loadStacksFromBoard" />
|
|
<NcMultiselect v-model="selectedStack"
|
|
:placeholder="t('deck', 'Select a list')"
|
|
:options="stacksFromBoard"
|
|
:max-height="100"
|
|
label="title">
|
|
<span slot="noOptions">
|
|
{{ t('deck', 'List is empty') }}
|
|
</span>
|
|
</NcMultiselect>
|
|
|
|
<button :disabled="!isBoardAndStackChoosen" class="primary" @click="moveCard">
|
|
{{ t('deck', 'Move card') }}
|
|
</button>
|
|
<button @click="modalShow=false">
|
|
{{ t('deck', 'Cancel') }}
|
|
</button>
|
|
</div>
|
|
</NcModal>
|
|
</template>
|
|
|
|
<script>
|
|
import { NcModal, NcMultiselect } from '@nextcloud/vue'
|
|
import { generateUrl } from '@nextcloud/router'
|
|
import axios from '@nextcloud/axios'
|
|
import { subscribe, unsubscribe } from '@nextcloud/event-bus'
|
|
|
|
export default {
|
|
name: 'CardMoveDialog',
|
|
components: { NcModal, NcMultiselect },
|
|
data() {
|
|
return {
|
|
card: null,
|
|
modalShow: false,
|
|
selectedBoard: '',
|
|
selectedStack: '',
|
|
stacksFromBoard: [],
|
|
}
|
|
},
|
|
computed: {
|
|
activeBoards() {
|
|
return this.$store.getters.boards.filter((item) => item.deletedAt === 0 && item.archived === false)
|
|
},
|
|
isBoardAndStackChoosen() {
|
|
return !(this.selectedBoard === '' || this.selectedStack === '')
|
|
},
|
|
},
|
|
mounted() {
|
|
subscribe('deck:card:show-move-dialog', this.openModal)
|
|
},
|
|
destroyed() {
|
|
unsubscribe('deck:card:show-move-dialog', this.openModal)
|
|
},
|
|
methods: {
|
|
openModal(card) {
|
|
this.card = card
|
|
this.modalShow = true
|
|
},
|
|
async loadStacksFromBoard(board) {
|
|
try {
|
|
const url = generateUrl('/apps/deck/stacks/' + board.id)
|
|
const response = await axios.get(url)
|
|
this.stacksFromBoard = response.data
|
|
} catch (err) {
|
|
return err
|
|
}
|
|
},
|
|
async moveCard() {
|
|
this.copiedCard = Object.assign({}, this.card)
|
|
this.copiedCard.stackId = this.selectedStack.id
|
|
this.$store.dispatch('moveCard', this.copiedCard)
|
|
if (parseInt(this.boardId) === parseInt(this.selectedStack.boardId)) {
|
|
await this.$store.commit('addNewCard', { ...this.copiedCard })
|
|
}
|
|
this.modalShow = false
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.modal__content {
|
|
width: 25vw;
|
|
min-width: 250px;
|
|
min-height: 120px;
|
|
text-align: center;
|
|
margin: 20px 20px 100px 20px;
|
|
|
|
.multiselect {
|
|
margin-bottom: 10px;
|
|
}
|
|
}
|
|
|
|
.modal__content button {
|
|
float: right;
|
|
margin-top: 50px;
|
|
}
|
|
</style>
|