122 lines
3.0 KiB
Vue
122 lines
3.0 KiB
Vue
<!--
|
|
- SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
|
|
- SPDX-License-Identifier: AGPL-3.0-or-later
|
|
-->
|
|
<template>
|
|
<NcModal v-if="modalShow" :title="t('deck', 'Clone card')" @close="modalShow = false">
|
|
<div class="modal__content">
|
|
<h3>{{ t('deck', 'Clone card to another board') }}</h3>
|
|
<NcSelect v-model="selectedBoard"
|
|
:input-label="t('deck', 'Select a board')"
|
|
:placeholder="t('deck', 'Select a board')"
|
|
:options="activeBoards"
|
|
:max-height="100"
|
|
label="title"
|
|
@option:selected="loadStacksFromBoard" />
|
|
<NcSelect v-model="selectedStack"
|
|
:disabled="stacksFromBoard.length === 0"
|
|
:placeholder="stacksFromBoard.length === 0 ? t('deck', 'No lists available') : t('deck', 'Select a list')"
|
|
:input-label="t('deck', 'Select a list')"
|
|
:options="stacksFromBoard"
|
|
:max-height="100"
|
|
label="title" />
|
|
|
|
<button :disabled="!isBoardAndStackChoosen" class="primary" @click="cloneCard">
|
|
{{ t('deck', 'Clone card') }}
|
|
</button>
|
|
<button @click="modalShow = false">
|
|
{{ t('deck', 'Cancel') }}
|
|
</button>
|
|
</div>
|
|
</NcModal>
|
|
</template>
|
|
|
|
<script>
|
|
import { NcModal, NcSelect } from '@nextcloud/vue'
|
|
import { generateUrl } from '@nextcloud/router'
|
|
import axios from '@nextcloud/axios'
|
|
import { subscribe, unsubscribe } from '@nextcloud/event-bus'
|
|
import { mapGetters, mapState } from 'vuex'
|
|
|
|
export default {
|
|
name: 'CardCloneDialog',
|
|
components: { NcModal, NcSelect },
|
|
data() {
|
|
return {
|
|
card: null,
|
|
modalShow: false,
|
|
selectedBoard: '',
|
|
selectedStack: '',
|
|
stacksFromBoard: [],
|
|
}
|
|
},
|
|
computed: {
|
|
...mapGetters([
|
|
'boards',
|
|
'stackById',
|
|
'boardById',
|
|
]),
|
|
...mapState({
|
|
currentBoard: state => state.currentBoard,
|
|
}),
|
|
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-clone-dialog', this.openModal)
|
|
},
|
|
destroyed() {
|
|
unsubscribe('deck:card:show-clone-dialog', this.openModal)
|
|
},
|
|
methods: {
|
|
openModal(card) {
|
|
this.card = card
|
|
this.selectedStack = this.stackById(this.card.stackId)
|
|
this.selectedBoard = this.boardById(this.selectedStack.boardId)
|
|
this.loadStacksFromBoard(this.selectedBoard)
|
|
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 cloneCard() {
|
|
this.$store.dispatch('cloneCard', { cardId: this.card.id, targetStackId: this.selectedStack.id })
|
|
this.$store.dispatch('addCard', this.copiedCard)
|
|
this.modalShow = false
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.modal__content {
|
|
min-width: 250px;
|
|
min-height: 120px;
|
|
margin: 20px 20px 100px 20px;
|
|
|
|
h3 {
|
|
font-weight: bold;
|
|
text-align: center;
|
|
}
|
|
|
|
.select {
|
|
margin-bottom: 12px;
|
|
}
|
|
}
|
|
|
|
.modal__content button {
|
|
float: right;
|
|
margin-top: 50px;
|
|
}
|
|
</style>
|