feat: improved ConfirmOrgDeletionModal

src/components/orgs/Orgs.svelte

@@ -4,7 +4,7 @@
 	import { RunnerOrganizationService } from "@odit/lfk-client-js";
 	import store from "../../store";
 	import OrgsEmptyState from "./OrgsEmptyState.svelte";
-	import ConfirmOrgDeletion from "./ConfirmOrgDeletion.svelte";
+	import ConfirmOrgDeletionModal from "./ConfirmOrgDeletionModal.svelte";
 	import GenerateRunnerCards from "../pdf_generation/GenerateRunnerCards.svelte";
 	import GenerateRunnerCertificates from "../pdf_generation/GenerateRunnerCertificates.svelte";
 	import toast from "svelte-french-toast";
@@ -30,6 +30,7 @@
 		);
 	import { _ } from "svelte-i18n";
 	import AddOrgModal from "./AddOrgModal.svelte";
+	let delete_modal_open = false;
 	let modal_open = false;
 	import ImportRunnerModal from "../runners/ImportRunnerModal.svelte";
 	let import_modal_open = false;
@@ -61,12 +62,12 @@
 			{$_("import-runners")}
 		</button>
 	{/if}
-	<ConfirmOrgDeletion
+	<ConfirmOrgDeletionModal
 		on:cancelDelete={(event) => {
-			modal_open = false;
+			delete_modal_open = false;
 			active_deletes[event.detail.id] = false;
 		}}
-		bind:modal_open
+		bind:modal_open={delete_modal_open}
 		bind:delete_org
 	/>
 	{#if store.state.jwtinfo.userdetails.permissions.includes("ORGANIZATION:GET")}
@@ -196,63 +197,27 @@
 												</div>
 											</div>
 										</td>
-										{#if active_deletes[o.id] === true}
-											<td
-												class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"
+										<td
+											class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"
+										>
+											<a
+												href="./{o.id}"
+												class="text-indigo-600 hover:text-indigo-900"
+												>{$_("details")}</a
 											>
+											{#if store.state.jwtinfo.userdetails.permissions.includes("ORGANIZATION:DELETE")}
 												<button
 													on:click={() => {
-														active_deletes[o.id] = false;
-													}}
-													tabindex="0"
-													class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer"
-													>{$_("cancel-delete")}</button
-												>
-												<button
-													on:click={() => {
-														toast.loading($_("deleting-organization"));
-														RunnerOrganizationService.runnerOrganizationControllerRemove(
-															o.id,
-															false
-														)
-															.then((resp) => {
-																current_organizations =
-																	current_organizations.filter(
-																		(obj) => obj.id !== o.id
-																	);
-																toast($_("organization-deleted"));
-															})
-															.catch((err) => {
-																modal_open = true;
-																delete_org = o;
-															});
+														active_deletes[o.id] = true;
+														delete_modal_open = true;
+														delete_org = o;
 													}}
 													tabindex="0"
 													class="ml-4 text-red-600 hover:text-red-900 cursor-pointer"
-													>{$_("confirm-delete")}</button
+													>{$_("delete")}</button
 												>
-											</td>
-										{:else}
-											<td
-												class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"
-											>
-												<a
-													href="./{o.id}"
-													class="text-indigo-600 hover:text-indigo-900"
-													>{$_("details")}</a
-												>
-												{#if store.state.jwtinfo.userdetails.permissions.includes("ORGANIZATION:DELETE")}
-													<button
-														on:click={() => {
-															active_deletes[o.id] = true;
-														}}
-														tabindex="0"
-														class="ml-4 text-red-600 hover:text-red-900 cursor-pointer"
-														>{$_("delete")}</button
-													>
-												{/if}
-											</td>
-										{/if}
+											{/if}
+										</td>
 									</tr>
 								{/if}
 							{/each}