Extracted deletion into function of overview

src/components/runners/DeleteRunnerModal.svelte

@@ -1,16 +1,14 @@
 <script>
   import { _ } from "svelte-i18n";
   import { clickOutside } from "../base/outsideclick";
-
-  import { RunnerService } from "@odit/lfk-client-js";
-  import Toastify from "toastify-js";
+  import { createEventDispatcher } from "svelte";
   export let modal_open;
   export let delete_runner = {
     id: 0,
     firstname: "",
     lastname: "",
   };
-  export let current_runners;
+  const dispatch = createEventDispatcher();
 
   function focus(el) {
     el.focus();
@@ -30,13 +28,7 @@
     };
   })();
   async function submit() {
-    await RunnerService.runnerControllerRemove(delete_runner.id, true);
-    current_runners = current_runners.filter((r)=>r.id !== delete_runner.id);
-    Toastify({
-      text: $_("runner-deleted"),
-      duration: 3500,
-      backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-    }).showToast();
+    dispatch('delete', {id: delete_runner.id})
   }
 </script>
 

src/components/runners/RunnersOverview.svelte

@@ -128,6 +128,17 @@
     getSortedRowModel: getSortedRowModel(),
   });
   const table = createSvelteTable(options);
+
+  async function deleteRunner(id) {
+    await RunnerService.runnerControllerRemove(delete_runner.id, true);
+    current_runners = current_runners.filter((r) => r.id !== delete_runner.id);
+    Toastify({
+      text: $_("runner-deleted"),
+      duration: 3500,
+      backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
+    }).showToast();
+  }
+
   onMount(() => {
     RunnerService.runnerControllerGetAll().then((val) => {
       current_runners = val;
@@ -152,7 +163,9 @@
 <DeleteRunnerModal
   delete_runner={active_delete}
   modal_open={active_delete != undefined}
-  bind:current_runners
+  on:delete={(event) => {
+    deleteRunner(event.detail.id);
+  }}
 />
 {#if store.state.jwtinfo.userdetails.permissions.includes("RUNNER:GET")}
   {#if !dataLoaded}