Merge pull request #6452 from nextcloud/feat/1813-clonecopy-a-card

feat(cards): add card cloning ability

src/CardMoveDialog.vue

@@ -3,9 +3,8 @@
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 <template>
-	<NcModal v-if="modalShow" :title="t('deck', 'Move card to another board')" @close="modalShow=false">
+	<NcDialog :open.sync="modalShow" :name="t('deck', 'Move/copy card')">
 		<div class="modal__content">
-			<h3>{{ t('deck', 'Move card to another board') }}</h3>
 			<NcSelect v-model="selectedBoard"
 				:input-label="t('deck', 'Select a board')"
 				:placeholder="t('deck', 'Select a board')"
@@ -20,26 +19,28 @@
 				:options="stacksFromBoard"
 				:max-height="100"
 				label="title" />
-
-			<button :disabled="!isBoardAndStackChoosen" class="primary" @click="moveCard">
-				{{ t('deck', 'Move card') }}
-			</button>
-			<button @click="modalShow=false">
-				{{ t('deck', 'Cancel') }}
-			</button>
 		</div>
-	</NcModal>
+		<template #actions>
+			<NcButton :disabled="!isBoardAndStackChoosen" type="secondary" @click="moveCard">
+				{{ t('deck', 'Move card') }}
+			</NcButton>
+			<NcButton :disabled="!isBoardAndStackChoosen" type="primary" @click="cloneCard">
+				{{ t('deck', 'Copy card') }}
+			</NcButton>
+		</template>
+	</NcDialog>
 </template>
 
 <script>
-import { NcModal, NcSelect } from '@nextcloud/vue'
+import { NcDialog, 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: { NcDialog, NcSelect, NcButton },
 	data() {
 		return {
 			card: null,
@@ -50,6 +51,7 @@ export default {
 		}
 	},
 	computed: {
+		...mapGetters(['stackById', 'boardById']),
 		activeBoards() {
 			return this.$store.getters.boards.filter((item) => item.deletedAt === 0 && item.archived === false)
 		},
@@ -66,6 +68,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) {
@@ -81,33 +86,23 @@ export default {
 			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)) {
+			if (parseInt(this.selectedBoard.id) === parseInt(this.selectedStack.boardId)) {
 				await this.$store.commit('addNewCard', { ...this.copiedCard })
 			}
 			this.modalShow = false
 		},
+		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/components/cards/CardMenuEntries.vue

@@ -31,7 +31,7 @@
 			icon="icon-external"
 			:close-after-click="true"
 			@click="openCardMoveDialog">
-			{{ t('deck', 'Move card') }}
+			{{ t('deck', 'Move/copy card') }}
 		</NcActionButton>
 		<NcActionButton v-for="action in cardActions"
 			:key="action.label"

src/services/CardApi.js

@@ -4,7 +4,7 @@
  */
 
 import axios from '@nextcloud/axios'
-import { generateUrl } from '@nextcloud/router'
+import { generateOcsUrl, generateUrl } from '@nextcloud/router'
 
 export class CardApi {
 
@@ -28,6 +28,23 @@ export class CardApi {
 			})
 	}
 
+	cloneCard(cardId, targetStackId) {
+		return axios.post(generateOcsUrl(`apps/deck/api/v1.0/cards/${cardId}/clone`), {
+			targetStackId,
+		})
+			.then(
+				(response) => {
+					return Promise.resolve(response.data)
+				},
+				(err) => {
+					return Promise.reject(err)
+				},
+			)
+			.catch((err) => {
+				return Promise.reject(err)
+			})
+	}
+
 	deleteCard(cardId) {
 		return axios.delete(this.url(`/cards/${cardId}`))
 			.then(

src/store/card.js

@@ -272,6 +272,11 @@ export default {
 		},
 	},
 	actions: {
+		async cloneCard({ commit }, { cardId, targetStackId }) {
+			const createdCard = await apiClient.cloneCard(cardId, targetStackId)
+			commit('addCard', createdCard)
+			return createdCard
+		},
 		async addCard({ commit }, card) {
 			const createdCard = await apiClient.addCard(card)
 			commit('addCard', createdCard)