Basic card delete modal

src/components/cards/CardsOverview.svelte

@@ -24,6 +24,7 @@
   import CardRunner from "./CardRunner.svelte";
   import { onMount } from "svelte";
   import { runnerFilter } from "../shared/tablefilters";
+  import DeleteCardModal from "./DeleteCardModal.svelte";
 
   export let edit_modal_open = false;
   export let runner = {};
@@ -131,6 +132,20 @@
     edit_modal_open = true;
   }
 
+  async function deleteCard(delete_card_id) {
+    await RunnerCardService.runnerCardControllerRemove(delete_card_id, true);
+    current_cards = current_cards.filter((r) => r.id !== delete_card_id);
+    options.update((options) => ({
+      ...options,
+      data: current_cards,
+    }));
+    Toastify({
+      text: $_("card-deleted"),
+      duration: 3500,
+      backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
+    }).showToast();
+  }
+
   onMount(() => {
     RunnerCardService.runnerCardControllerGetAll().then((val) => {
       current_cards = val;
@@ -163,6 +178,13 @@
 {/if}
 
 {#if store.state.jwtinfo.userdetails.permissions.includes("CARD:GET")}
+  <DeleteCardModal
+    delete_card={active_delete}
+    modal_open={active_delete != undefined}
+    on:delete={(event) => {
+      deleteCard(event.detail.id);
+    }}
+  />
   {#if !dataLoaded}
     <div
       class="bg-teal-lightest border-t-4 border-teal rounded-b text-teal-darkest px-4 py-3 shadow-md my-2"
@@ -183,23 +205,9 @@
           on:click={async () => {
             const prom = [];
             for (const card of selectedCards) {
-              prom.push(
-                RunnerCardService.runnerCardControllerRemove(card.id, true)
-              );
+              prom.push(deleteCard(card.id));
             }
             await Promise.all(prom);
-            Toastify({
-              text: $_("cards-deleted"),
-              duration: 3500,
-              backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-            }).showToast();
-            for (const card of generate_cards) {
-              current_cards = current_cards.filter((c) => c.id !== card.id);
-            }
-            options.update((options) => ({
-              ...options,
-              data: current_cards,
-            }));
           }}
         >
           {$_("delete-cards")}