From 642f1373e3f7602a99f091ade5f92377538daf39 Mon Sep 17 00:00:00 2001
From: Ferdinand Thiessen <opensource@fthiessen.de>
Date: Thu, 22 Aug 2024 00:14:43 +0200
Subject: [PATCH] feat(NcDialogButton): Allow to return `false` from callback
 to keep dialog open

If the callback returns `false` then the click event will not be forwarded.
This could be usful if the click triggers a validation that fails and the user
should be able to fix the issue.

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
---
 .../NcDialogButton/NcDialogButton.vue         | 28 ++++++++++++++-----
 1 file changed, 21 insertions(+), 7 deletions(-)

diff --git a/src/components/NcDialogButton/NcDialogButton.vue b/src/components/NcDialogButton/NcDialogButton.vue
index a2cd246953..426a693ec6 100644
--- a/src/components/NcDialogButton/NcDialogButton.vue
+++ b/src/components/NcDialogButton/NcDialogButton.vue
@@ -17,7 +17,8 @@ Dialog button component used by NcDialog in the actions slot to display the butt
 		<template #icon>
 			<!-- @slot Allow to set a custom icon for the button -->
 			<slot name="icon">
-				<NcIconSvgWrapper v-if="icon !== undefined" :svg="icon" />
+				<NcLoadingIcon v-if="isLoading" />
+				<NcIconSvgWrapper v-else-if="icon !== undefined" :svg="icon" />
 			</slot>
 		</template>
 	</NcButton>
@@ -27,6 +28,8 @@ Dialog button component used by NcDialog in the actions slot to display the butt
 import { defineComponent } from 'vue'
 import NcButton from '../NcButton/index.js'
 import NcIconSvgWrapper from '../NcIconSvgWrapper/index.js'
+import NcLoadingIcon from '../NcLoadingIcon/index.js'
+import { ref } from 'vue';
 
 export default defineComponent({
 	name: 'NcDialogButton',
@@ -34,12 +37,14 @@ export default defineComponent({
 	components: {
 		NcButton,
 		NcIconSvgWrapper,
+		NcLoadingIcon,
 	},
 
 	props: {
 		/**
-		 * The function that will be called when the button is pressed
-		 * @type {() => void}
+		 * The function that will be called when the button is pressed.
+		 * If the function returns `false` the click is ignored and the dialog will not be closed.
+		 * @type {() => void|false|Promise<void|false>}
 		 */
 		callback: {
 			type: Function,
@@ -99,16 +104,25 @@ export default defineComponent({
 	emits: ['click'],
 
 	setup(props, { emit }) {
+		const isLoading = ref(false)
+
 		/**
 		 * Handle clicking the button
 		 * @param {MouseEvent} e The click event
 		 */
-		const handleClick = (e) => {
-			props.callback?.()
-			emit('click', e)
+		const handleClick = async (e) => {
+			isLoading.value = true
+			try {
+				const response = await props.callback?.()
+				if (response !== false) {
+					emit('click', e)
+				}
+			} finally {
+				isLoading.value = false
+			}
 		}
 
-		return { handleClick }
+		return { handleClick, isLoading }
 	},
 })
 </script>