src/components/cards/CardsOverview.svelte

@@ -24,7 +24,6 @@
   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 = {};
@@ -132,20 +131,6 @@
     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;
@@ -178,13 +163,6 @@
 {/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"
@@ -205,9 +183,23 @@
           on:click={async () => {
             const prom = [];
             for (const card of selectedCards) {
-              prom.push(deleteCard(card.id));
+              prom.push(
+                RunnerCardService.runnerCardControllerRemove(card.id, true)
+              );
             }
             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")}

src/components/cards/DeleteCardModal.svelte

@@ -1,128 +0,0 @@
-<script>
-  import { _ } from "svelte-i18n";
-  import { clickOutside } from "../base/outsideclick";
-  import { createEventDispatcher, onMount } from "svelte";
-  export let modal_open;
-  export let delete_card = {
-    id: 0,
-    code: "",
-    runner: {
-      firstname: "",
-      lastname: "",
-    },
-  };
-  const dispatch = createEventDispatcher();
-  onMount(() => {
-    document.onkeydown = (e) => {
-      e = e || window.event;
-      if (e.key === "Escape") {
-        modal_open = false;
-      }
-      if (e.keyCode === 13) {
-        if (createbtnenabled === true) {
-          createbtnenabled = false;
-          submit();
-        }
-      }
-    };
-  });
-  async function submit() {
-    dispatch("delete", { id: delete_card.id });
-    modal_open = false;
-  }
-</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
-                class="h-6 w-6 text-blue-600"
-                fill="currentColor"
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 24 24"
-                width="24"
-                height="24"
-                ><path fill="none" d="M0 0h24v24H0z" />
-                <path
-                  fill="currentColor"
-                  d="M22 10v10a1 1 0 01-1 1H3a1 1 0 01-1-1V10h20zm0-2H2V4a1 1 0 011-1h18a1 1 0 011 1v4zm-7 8v2h4v-2h-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-card")}
-                </p>
-              </div>
-              <div class="w-full">
-                {$_("card")} #{delete_card.code}<br />
-                <span class="inline-block">
-                  {$_("runner")}:
-                  {#if delete_card.runner}
-                    <span class="inline-block"
-                      >{delete_card.runner.firstname}
-                      {delete_card.runner.lastname}</span
-                    >
-                  {:else}
-                    {$_("non-blanko")}
-                  {/if}</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/locales/de.json

@@ -477,7 +477,5 @@
   "delete-cards": "Karten löschen",
   "cards-deleted": "Karten gelöscht",
   "please-confirm-the-deletion-of-runner": "Bitte bestätige die Löschung der Läufer:in",
-  "runner-deleted": "Läufer:in gelöscht",
+  "runner-deleted": "Läufer:in gelöscht"
-  "please-confirm-the-deletion-of-card": "Bitte bestätige die Löschung der Karte",
-  "card": "Läuferkarte"
 }

src/locales/en.json

@@ -477,7 +477,5 @@
   "delete-cards": "Delete cards",
   "cards-deleted": "Cards deleted",
   "please-confirm-the-deletion-of-runner": "Please confirm the deletion of this runner",
-  "runner-deleted": "runner deleted",
+  "runner-deleted": "runner deleted"
-  "please-confirm-the-deletion-of-card": "Please confirm the deletion of this card",
-  "card": "card"
 }