Merge pull request #3190 from nextcloud/backport/3188/stable5.2

[stable5.2] Format AppNavigationForm.vue (refs #3099)

Author: Chartman123

src/components/AppNavigationForm.vue

@@ -86,33 +86,23 @@
 				v-if="canEdit && !readOnly"
 				close-after-click
 				:disabled="isFormLocked"
-				@click="showDeleteDialog = true">
+				@click="onConfirmDelete">
 				<template #icon>
 					<IconDelete :size="20" />
 				</template>
 				{{ t('forms', 'Delete form') }}
 			</NcActionButton>
-			<NcDialog
-				:open.sync="showDeleteDialog"
-				:name="t('forms', 'Delete form')"
-				:message="
-					t('forms', 'Are you sure you want to delete {title}?', {
-						title: formTitle,
-					})
-				"
-				:buttons="buttons" />
 		</template>
 	</NcListItem>
 </template>
 
 <script>
 import { getCurrentUser } from '@nextcloud/auth'
 import { generateOcsUrl } from '@nextcloud/router'
-import { showError } from '@nextcloud/dialogs'
+import { DialogSeverity, getDialogBuilder, showError } from '@nextcloud/dialogs'
 import NcActionButton from '@nextcloud/vue/components/NcActionButton'
 import NcActionRouter from '@nextcloud/vue/components/NcActionRouter'
 import NcActionSeparator from '@nextcloud/vue/components/NcActionSeparator'
-import NcDialog from '@nextcloud/vue/components/NcDialog'
 import NcListItem from '@nextcloud/vue/components/NcListItem'
 import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
 import axios from '@nextcloud/axios'
@@ -126,8 +116,6 @@ import IconPencil from 'vue-material-design-icons/PencilOutline.vue'
 import IconPoll from 'vue-material-design-icons/Poll.vue'
 import IconShareVariant from 'vue-material-design-icons/ShareVariantOutline.vue'
 
-import IconDeleteSvg from '@mdi/svg/svg/delete.svg?raw'
-
 import FormsIcon from './Icons/FormsIcon.vue'
 
 import { FormState } from '../models/Constants.ts'
@@ -150,7 +138,6 @@ export default {
 		NcActionButton,
 		NcActionRouter,
 		NcActionSeparator,
-		NcDialog,
 		NcListItem,
 		NcLoadingIcon,
 	},
@@ -176,17 +163,6 @@ export default {
 	data() {
 		return {
 			loading: false,
-			showDeleteDialog: false,
-			buttons: [
-				{
-					label: t('forms', 'Delete form'),
-					icon: IconDeleteSvg,
-					type: 'error',
-					callback: () => {
-						this.onDeleteForm()
-					},
-				},
-			],
 		}
 	},
 
@@ -306,6 +282,33 @@ export default {
 			this.$emit('clone', this.form.id)
 		},
 
+		async onConfirmDelete() {
+			const dialog = getDialogBuilder(t('forms', 'Delete form'))
+				.setText(
+					t('forms', 'Are you sure you want to delete {title}?', {
+						title: this.formTitle,
+					}),
+				)
+				.setSeverity(DialogSeverity.Error)
+				.setButtons([
+					{
+						label: t('forms', 'Cancel'),
+						callback: () => {},
+						variant: 'secondary',
+					},
+					{
+						label: t('forms', 'Delete form'),
+						callback: () => {
+							this.onDeleteForm()
+						},
+						variant: 'error',
+					},
+				])
+				.build()
+
+			await dialog.show()
+		},
+
 		async onToggleArchive() {
 			try {
 				// TODO: add loading status feedback ?