Add Card appends current cards

src/components/cards/AddCardBulkModal.svelte

@@ -4,11 +4,13 @@
   
   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;
@@ -43,6 +45,7 @@
             duration: 500,
             backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
           }).showToast();
+          dispatch("created", {cards: result})
         })
         .catch((err) => {
           //
@@ -71,11 +74,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

@@ -1,7 +1,7 @@
 <script>
   import { _ } from "svelte-i18n";
   import { clickOutside } from "../base/outsideclick";
-  
+
   import {
     RunnerCardService,
     RunnerService,
@@ -9,9 +9,10 @@
   } 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;
@@ -21,7 +22,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()) ||
@@ -79,8 +80,7 @@
             duration: 500,
             backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
           }).showToast();
-          current_cards.push(result);
-          current_cards = current_cards;
+          dispatch("created", { cards: [result] });
         })
         .catch((err) => {
           //
@@ -97,7 +97,6 @@
 {#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,34 +7,48 @@
   $: 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')}
-    {#if store.state.jwtinfo.userdetails.permissions.includes('CARD:CREATE')}
+    {$_("cards")}
+    {#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">
-        {$_('add-card')}
+        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")}
       </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">
-        {$_('create-bulk-cards')}
+        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")}
       </button>
     {/if}
   </span>
-  <CardsOverview bind:current_cards />
+  <CardsOverview bind:current_cards bind:addCards />
 </section>
 
-{#if store.state.jwtinfo.userdetails.permissions.includes('CARD:CREATE')}
-  <AddCardModal bind:current_cards bind:modal_open />
-  <AddCardBulkModal bind:current_cards bind:bulk_modal_open />
+{#if store.state.jwtinfo.userdetails.permissions.includes("CARD:CREATE")}
+  <AddCardModal
+    bind: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,6 +31,14 @@
   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 =