feat: improve ConfirmTeamDeletionModal

src/components/teams/Teams.svelte

@@ -6,11 +6,10 @@
 	const teams_promise = RunnerTeamService.runnerTeamControllerGetAll();
 	import store, { users as usersstore } from "../../store.js";
 	import TeamsEmptyState from "./TeamsEmptyState.svelte";
-	import ConfirmTeamDeletion from "./ConfirmTeamDeletion.svelte";
+	import ConfirmTeamDeletionModal from "./ConfirmTeamDeletionModal.svelte";
 	import GenerateSponsoringContracts from "../pdf_generation/GenerateSponsoringContracts.svelte";
 	import GenerateRunnerCards from "../pdf_generation/GenerateRunnerCards.svelte";
 	import GenerateRunnerCertificates from "../pdf_generation/GenerateRunnerCertificates.svelte";
-	import toast from "svelte-french-toast";
 	$: searchvalue = "";
 	$: active_deletes = [];
 	$: sponsoring_contracts_show = current_teams.some(
@@ -19,6 +18,7 @@
 	$: cards_show = current_teams.some((r) => r.is_selected === true);
 	$: certificates_show = current_teams.some((r) => r.is_selected === true);
 	$: generate_teams = current_teams.filter((r) => r.is_selected === true);
+	let delete_modal_open = false;
 	let modal_open = false;
 	let delete_team = {};
 	usersstore.subscribe((val) => {
@@ -44,12 +44,12 @@
 			{$_("create-team")}
 		</button>
 	{/if}
-	<ConfirmTeamDeletion
+	<ConfirmTeamDeletionModal
 		on:cancelDelete={(event) => {
 			modal_open = false;
 			active_deletes[event.detail.id] = false;
 		}}
-		bind:modal_open
+		bind:modal_open={delete_modal_open}
 		bind:delete_team
 	/>
 	{#if store.state.jwtinfo.userdetails.permissions.includes("TEAM:GET")}
@@ -182,61 +182,27 @@
 												</div>
 											</div>
 										</td>
-										{#if active_deletes[t.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="./{t.id}"
+												class="text-indigo-600 hover:text-indigo-900"
+												>{$_("details")}</a
 											>
+											{#if store.state.jwtinfo.userdetails.permissions.includes("TEAM:DELETE")}
 												<button
 													on:click={() => {
-														active_deletes[t.id] = false;
-													}}
-													tabindex="0"
-													class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer"
-													>{$_("cancel-delete")}</button
-												>
-												<button
-													on:click={() => {
-														RunnerTeamService.runnerTeamControllerRemove(
-															t.id,
-															false
-														)
-															.then((resp) => {
-																current_teams = current_teams.filter(
-																	(obj) => obj.id !== t.id
-																);
-																toast($_("team-deleted"));
-															})
-															.catch((err) => {
-																modal_open = true;
-																delete_team = t;
-															});
+														active_deletes[t.id] = true;
+														delete_modal_open = true;
+														delete_team = t;
 													}}
 													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="./{t.id}"
-													class="text-indigo-600 hover:text-indigo-900"
-													>{$_("details")}</a
-												>
-												{#if store.state.jwtinfo.userdetails.permissions.includes("TEAM:DELETE")}
-													<button
-														on:click={() => {
-															active_deletes[t.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}