chore: Move from NcModal to NcDialog

Signed-off-by: Julius Knorr <jus@bitgrid.net>

cypress/e2e/cardFeatures.js

@@ -303,7 +303,7 @@ describe('Card', function () {
 			})
 		})
 
-		it.only('clone card', () => {
+		it('clone card', () => {
 			cy.intercept({ method: 'POST', url: '**/apps/deck/**/cards/*/clone' }).as('clone')
 			cy.get('.card:contains("Hello world")').should('be.visible').click()
 			cy.get('#app-sidebar-vue')
@@ -311,7 +311,7 @@ describe('Card', function () {
 
 			cy.get('.app-sidebar-header .action-item__menutoggle').click()
 			cy.get('.v-popper__popper button:contains("Move/copy card")').click()
-			cy.get('.modal__content button:contains("Copy card")').click()
+			cy.get('.modal-container button:contains("Copy card")').click()
 			cy.wait('@clone', { timeout: 7000 })
 			cy.get('.card:contains("Hello world")').should('have.length', 2)
 		})

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/copy card to another board') }}</h3>
 			<NcSelect v-model="selectedBoard"
 				:input-label="t('deck', 'Select a board')"
 				:placeholder="t('deck', 'Select a board')"
@@ -20,22 +19,20 @@
 				:options="stacksFromBoard"
 				:max-height="100"
 				label="title" />
-
-			<NcButton :disabled="!isBoardAndStackChoosen" type="primary" @click="moveCard">
+		</div>
+		<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>
-			<NcButton @click="modalShow = false">
-				{{ t('deck', 'Cancel') }}
-			</NcButton>
-		</div>
-	</NcModal>
+		</template>
+	</NcDialog>
 </template>
 
 <script>
-import { NcModal, NcSelect, NcButton } 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'
@@ -43,7 +40,7 @@ import { mapGetters } from 'vuex'
 
 export default {
 	name: 'CardMoveDialog',
-	components: { NcModal, NcSelect, NcButton },
+	components: { NcDialog, NcSelect, NcButton },
 	data() {
 		return {
 			card: null,
@@ -104,26 +101,8 @@ export default {
 
 <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;
 	}
 }
-
-button{
-	margin-left: 6px;
-}
-
-.modal__content button {
-	float: right;
-	margin-top: 50px;
-}
 </style>