put copy logic into move dialog

Signed-off-by: grnd-alt <git@belakkaf.net>

src/App.vue

@@ -26,7 +26,6 @@
 		</div>
 		<KeyboardShortcuts />
 		<CardMoveDialog />
-		<CardCloneDialog />
 	</NcContent>
 </template>
 
@@ -39,7 +38,6 @@ import { BoardApi } from './services/BoardApi.js'
 import { emit, subscribe } from '@nextcloud/event-bus'
 import { loadState } from '@nextcloud/initial-state'
 import CardMoveDialog from './CardMoveDialog.vue'
-import CardCloneDialog from './CardCloneDialog.vue'
 
 const boardApi = new BoardApi()
 
@@ -47,7 +45,6 @@ export default {
 	name: 'App',
 	components: {
 		CardMoveDialog,
-		CardCloneDialog,
 		AppNavigation,
 		NcModal,
 		NcContent,

src/CardCloneDialog.vue

@@ -1,120 +0,0 @@
-<!--
-  - 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.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>

src/CardMoveDialog.vue

@@ -5,7 +5,7 @@
 <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>
+			<h3>{{ t('deck', 'Move/copy card to another board') }}</h3>
 			<NcSelect v-model="selectedBoard"
 				:input-label="t('deck', 'Select a board')"
 				:placeholder="t('deck', 'Select a board')"
@@ -21,25 +21,29 @@
 				:max-height="100"
 				label="title" />
 
-			<button :disabled="!isBoardAndStackChoosen" class="primary" @click="moveCard">
+			<NcButton :disabled="!isBoardAndStackChoosen" type="primary" @click="moveCard">
 				{{ t('deck', 'Move card') }}
-			</button>
-			<button @click="modalShow = false">
+			</NcButton>
+			<NcButton :disabled="!isBoardAndStackChoosen" type="primary" @click="cloneCard">
+				{{ t('deck', 'Copy card') }}
+			</NcButton>
+			<NcButton @click="modalShow = false">
 				{{ t('deck', 'Cancel') }}
-			</button>
+			</NcButton>
 		</div>
 	</NcModal>
 </template>
 
 <script>
-import { NcModal, NcSelect } from '@nextcloud/vue'
+import { NcModal, NcSelect, NcButton } from '@nextcloud/vue'
 import { generateUrl } from '@nextcloud/router'
 import axios from '@nextcloud/axios'
 import { subscribe, unsubscribe } from '@nextcloud/event-bus'
+import { mapGetters } from 'vuex'
 
 export default {
 	name: 'CardMoveDialog',
-	components: { NcModal, NcSelect },
+	components: { NcModal, NcSelect, NcButton },
 	data() {
 		return {
 			card: null,
@@ -50,6 +54,7 @@ export default {
 		}
 	},
 	computed: {
+		...mapGetters(['stackById', 'boardById']),
 		activeBoards() {
 			return this.$store.getters.boards.filter((item) => item.deletedAt === 0 && item.archived === false)
 		},
@@ -66,6 +71,9 @@ export default {
 	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) {
@@ -86,6 +94,10 @@ export default {
 			}
 			this.modalShow = false
 		},
+		async cloneCard() {
+			this.$store.dispatch('cloneCard', { cardId: this.card.id, targetStackId: this.selectedStack.id })
+			this.modalShow = false
+		},
 	},
 }
 </script>
@@ -106,6 +118,10 @@ export default {
 	}
 }
 
+button{
+	margin-left: 6px;
+}
+
 .modal__content button {
 	float: right;
 	margin-top: 50px;

src/components/cards/CardMenuEntries.vue

@@ -31,15 +31,7 @@
 			icon="icon-external"
 			:close-after-click="true"
 			@click="openCardMoveDialog">
-			{{ t('deck', 'Move card') }}
-		</NcActionButton>
-		<NcActionButton v-if="canEdit"
-			:close-after-click="true"
-			@click="openCardCloneDialog">
-			<template #icon>
-				<CloneIcon :size="20" decorative />
-			</template>
-			{{ t('deck', 'Clone card') }}
+			{{ t('deck', 'Move/copy card') }}
 		</NcActionButton>
 		<NcActionButton v-for="action in cardActions"
 			:key="action.label"
@@ -66,7 +58,6 @@
 import { NcActionButton } from '@nextcloud/vue'
 import { mapGetters, mapState } from 'vuex'
 import ArchiveIcon from 'vue-material-design-icons/Archive.vue'
-import CloneIcon from 'vue-material-design-icons/ContentCopy.vue'
 import CardBulletedIcon from 'vue-material-design-icons/CardBulleted.vue'
 import { generateUrl } from '@nextcloud/router'
 import { getCurrentUser } from '@nextcloud/auth'
@@ -77,7 +68,7 @@ import { emit } from '@nextcloud/event-bus'
 
 export default {
 	name: 'CardMenuEntries',
-	components: { CloneIcon, NcActionButton, ArchiveIcon, CardBulletedIcon },
+	components: { NcActionButton, ArchiveIcon, CardBulletedIcon },
 	props: {
 		card: {
 			type: Object,
@@ -177,9 +168,6 @@ export default {
 		openCardMoveDialog() {
 			emit('deck:card:show-move-dialog', this.card)
 		},
-		openCardCloneDialog() {
-			emit('deck:card:show-clone-dialog', this.card)
-		},
 	},
 }
 </script>