src/components/cards/AddCardBulkModal.svelte

@@ -4,13 +4,11 @@
   
   import { RunnerCardService } from "@odit/lfk-client-js";
   import Toastify from "toastify-js";
-  import { createEventDispatcher } from "svelte";
   export let bulk_modal_open;
+  export let current_cards;
   function focus(el) {
     el.focus();
   }
-  const dispatch = createEventDispatcher();
-
   $: card_count = 0;
   $: is_card_count_valid = card_count > 0;
   $: processed_last_submit = true;
@@ -45,7 +43,6 @@
             duration: 500,
             backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
           }).showToast();
-          dispatch("created", {cards: result})
         })
         .catch((err) => {
           //
@@ -74,11 +71,11 @@
             duration: 500,
             backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
           }).showToast();
+          current_cards = current_cards.concat(result);
           const toast = Toastify({
             text: $_("generating-pdf"),
             duration: -1,
           }).showToast();
-          dispatch("created", {cards: result})
           fetch(
             `${config.baseurl_documentserver}/cards?&download=true&key=${config.documentserver_key}`,
             {

src/components/cards/AddCardModal.svelte

@@ -9,10 +9,9 @@
   } from "@odit/lfk-client-js";
   import Select from "svelte-select";
   import Toastify from "toastify-js";
-  import { createEventDispatcher } from "svelte";
   export let modal_open;
+  export let current_cards;
 
-  const dispatch = createEventDispatcher();
   const getRunnerLabel = (option) => {
     if (option.middlename) {
       return option.firstname + " " + option.middlename + " " + option.lastname;
@@ -22,7 +21,7 @@
 
   const filterRunners = (label, filterText, option) => {
     if (filterText.startsWith("#")) {
-      return option.value.id == parseInt(filterText.replace("#", ""));
+      return option.value.id == parseInt(filterText.replace("#",""))
     }
     return (
       label.toLowerCase().includes(filterText.toLowerCase()) ||
@@ -80,7 +79,8 @@
             duration: 500,
             backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
           }).showToast();
-          dispatch("created", { cards: [result] });
+          current_cards.push(result);
+          current_cards = current_cards;
         })
         .catch((err) => {
           //
@@ -97,6 +97,7 @@
 {#if modal_open}
   <div
     class="fixed z-10 inset-0 overflow-y-auto"
+    
     use:clickOutside
     on:click_outside={() => {
       modal_open = false;

src/components/cards/Cards.svelte

@@ -7,48 +7,34 @@
   $: current_cards = [];
   export let modal_open = false;
   export let bulk_modal_open = false;
-  let addCards;
 </script>
 
 <section class="container p-5">
   <span class="mb-1 text-3xl font-extrabold leading-tight">
-    {$_("cards")}
+    {$_('cards')}
-    {#if store.state.jwtinfo.userdetails.permissions.includes("CARD:CREATE")}
+    {#if store.state.jwtinfo.userdetails.permissions.includes('CARD:CREATE')}
       <button
         on:click={() => {
           modal_open = true;
         }}
         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"
+        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">
-      >
+        {$_('add-card')}
-        {$_("add-card")}
       </button>
       <button
         on:click={() => {
           bulk_modal_open = true;
         }}
         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"
+        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">
-      >
+        {$_('create-bulk-cards')}
-        {$_("create-bulk-cards")}
       </button>
     {/if}
   </span>
-  <CardsOverview bind:current_cards bind:addCards />
+  <CardsOverview bind:current_cards />
 </section>
 
-{#if store.state.jwtinfo.userdetails.permissions.includes("CARD:CREATE")}
+{#if store.state.jwtinfo.userdetails.permissions.includes('CARD:CREATE')}
-  <AddCardModal
+  <AddCardModal bind:current_cards bind:modal_open />
-    bind:modal_open
+  <AddCardBulkModal bind:current_cards bind:bulk_modal_open />
-    on:created={(event) => {
-      console.log(event)
-      addCards(event.detail.cards);
-    }}
-  />
-  <AddCardBulkModal
-    bind:bulk_modal_open
-    on:created={(event) => {
-      addCards(event.detail.cards);
-    }}
-  />
 {/if}

src/components/cards/CardsOverview.svelte

@@ -31,14 +31,6 @@
   export let editable = {};
   export let original_data = {};
   export let current_cards = [];
-  export const addCards = (cards) => {
-    console.log(cards)
-    current_cards = current_cards.concat(...cards);
-    options.update((options) => ({
-      ...options,
-      data: current_cards,
-    }));
-  };
 
   $: dataLoaded = false;
   $: selected =
@@ -214,21 +206,9 @@
           on:click={async () => {
             const prom = [];
             for (const card of selectedCards) {
-              prom.push(
+              prom.push(deleteCard(card.id));
-                await RunnerCardService.runnerCardControllerRemove(
-                  card.id,
-                  true
-                )
-              );
             }
             await Promise.all(prom);
-            for (const card of selectedCards) {
-              current_cards = current_cards.filter((r) => r.id !== card.id);
-            }
-            options.update((options) => ({
-              ...options,
-              data: current_cards,
-            }));
           }}
         >
           {$_("delete-cards")}