Added confirmation dialog for delete task operation

Author: zonia3000

CHANGELOG.md

@@ -3,6 +3,7 @@
 
 # Unreleased
 
+* Added confirmation dialog for delete task operation (\#272).
 * Enabled task info tab and rendered docs info from markdown (\#271).
 * Update import-workflow feature (\#269).
 * Revamp home page and user-related layout (\#259).

src/routes/tasks/+page.svelte

@@ -9,6 +9,7 @@
 	import TaskInfoModal from '$lib/components/tasks/TaskInfoModal.svelte';
 	import TaskCollection from '$lib/components/tasks/TaskCollection.svelte';
 	import StandardErrorAlert from '$lib/components/common/StandardErrorAlert.svelte';
+	import ConfirmActionButton from '$lib/components/common/ConfirmActionButton.svelte';
 
 	// Error property to be set in order to show errors in UI
 	let errorReasons = undefined;
@@ -242,10 +243,15 @@
 									<i class="bi bi-pencil" />
 									Edit
 								</button>
-								<button class="btn btn-danger" on:click={() => handleDeleteTask(task.id)}>
-									<i class="bi bi-trash" />
-									Delete
-								</button>
+								<ConfirmActionButton
+									modalId="confirmTaskDeleteModal{task.id}"
+									style={'danger'}
+									btnStyle="danger"
+									buttonIcon="trash"
+									label={'Delete'}
+									message={`Delete task ${task.name}`}
+									callbackAction={() => handleDeleteTask(task.id)}
+								/>
 							</td>
 						</tr>
 					{/each}