Added delete runner modal

src/components/runners/DeleteRunnerModal.svelte

@@ -0,0 +1,119 @@
+<script>
+  import { _ } from "svelte-i18n";
+  import { clickOutside } from "../base/outsideclick";
+
+  import { RunnerService } from "@odit/lfk-client-js";
+  import Toastify from "toastify-js";
+  export let modal_open;
+  export let delete_runner = {
+    id: 0,
+    firstname: "",
+    lastname: "",
+  };
+
+  function focus(el) {
+    el.focus();
+  }
+  (() => {
+    document.onkeydown = (e) => {
+      e = e || window.event;
+      if (e.key === "Escape") {
+        modal_open = false;
+      }
+      if (e.keyCode === 13) {
+        if (createbtnenabled === true) {
+          createbtnenabled = false;
+          submit();
+        }
+      }
+    };
+  })();
+  function submit() {
+    RunnerService.runnerControllerRemove(delete_runner.id, true);
+  }
+</script>
+
+{#if modal_open}
+  <div
+    class="fixed z-10 inset-0 overflow-y-auto"
+    use:clickOutside
+    on:click_outside={() => {
+      modal_open = false;
+    }}
+  >
+    <div
+      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
+    >
+      <div class="fixed inset-0 transition-opacity" aria-hidden="true">
+        <div
+          class="absolute inset-0 bg-gray-500 opacity-75"
+          data-id="modal_backdrop"
+        />
+      </div>
+      <span
+        class="hidden sm:inline-block sm:align-middle sm:h-screen"
+        aria-hidden="true">&#8203;</span
+      >
+      <div
+        class="inline-block align-bottom bg-white rounded-lg text-left shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="modal-headline"
+      >
+        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+          <div class="sm:flex sm:items-start">
+            <div
+              class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                class="h-6 w-6 text-blue-600"
+                fill="currentColor"
+                width="24"
+                height="24"
+                ><path fill="none" d="M0 0h24v24H0z" />
+                <path
+                  d="M9.83 8.79L8 9.456V13H6V8.05h.015l5.268-1.918c.244-.093.51-.14.782-.131a2.616 2.616 0 0 1 2.427 1.82c.186.583.356.977.51 1.182A4.992 4.992 0 0 0 19 11v2a6.986 6.986 0 0 1-5.402-2.547l-.581 3.297L15 15.67V23h-2v-5.986l-2.05-1.987-.947 4.298-6.894-1.215.348-1.97 4.924.868L9.83 8.79zM13.5 5.5a2 2 0 1 1 0-4 2 2 0 0 1 0 4z"
+                /></svg
+              >
+            </div>
+            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+              <h3 class="text-lg leading-6 font-medium text-gray-900">
+                {$_("confirm-delete")}
+              </h3>
+              <div class="mt-2 mb-6">
+                <p class="text-sm text-gray-500">
+                  {$_("please-confirm-the-deletion-of-runner")}
+                </p>
+              </div>
+              <div class="grid grid-cols-6 gap-6">
+                <span class="inline-block"
+                  >{delete_runner.firstname} {delete_runner.lastname}</span
+                >
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+          <button
+            on:click={submit}
+            type="button"
+            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"
+          >
+            {$_("delete")}
+          </button>
+          <button
+            on:click={() => {
+              modal_open = false;
+            }}
+            type="button"
+            class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
+          >
+            {$_("cancel")}
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+{/if}

src/components/runners/RunnersOverview.svelte

@@ -24,6 +24,7 @@
   import InputElement from "../shared/InputElement.svelte";
   import { groupFilter } from "../shared/tablefilters";
   import TableActions from "../shared/TableActions.svelte";
+  import DeleteRunnerModal from "./DeleteRunnerModal.svelte";
 
   $: selectedRunners =
     $table?.getSelectedRowModel().rows.map((row) => row.original) || [];
@@ -76,9 +77,15 @@
         return renderComponent(TableActions, {
           detailsLink: `./${info.getValue()}`,
           deleteAction: () => {
-            console.log(info.getValue());
+            active_delete =
+              current_runners[
+                current_runners.findIndex((r) => r.id == info.getValue())
+              ];
           },
-          deleteEnabled: store.state.jwtinfo.userdetails.permissions.includes("RUNNER:DELETE"),
+          deleteEnabled:
+            store.state.jwtinfo.userdetails.permissions.includes(
+              "RUNNER:DELETE"
+            ),
         });
       },
       enableColumnFilter: false,
@@ -87,7 +94,7 @@
 
   //
 
-  $: active_deletes = [];
+  $: active_delete = undefined;
   let dataLoaded = false;
   export let current_runners = [];
   $: sponsoring_contracts_show = selected.length > 0;
@@ -142,6 +149,10 @@
   });
 </script>
 
+<DeleteRunnerModal
+  delete_runner={active_delete}
+  modal_open={active_delete != undefined}
+/>
 {#if store.state.jwtinfo.userdetails.permissions.includes("RUNNER:GET")}
   {#if !dataLoaded}
     <div