Now w/ working dialog🎉🎉🎉

ref #94

src/components/cards/CardDetailModal.svelte

@@ -7,8 +7,9 @@
   import Toastify from "toastify-js";
   export let edit_modal_open;
   export let current_cards;
-  export let edit_card;
-  export let runner;
+  export let runner = {};
+  export let editable = {};
+  export let original_data = {};
   const getRunnerLabel = (option) =>
     option.firstname + " " + (option.middlename || "") + " " + option.lastname;
   const filterRunners = (label, filterText, option) =>
@@ -17,10 +18,7 @@
   function focus(el) {
     el.focus();
   }
-  $: runner = {};
   $: runners = [];
-  $: editable = {};
-  $: original_data = {};
   $: enabled = true;
   $: processed_last_submit = true;
   RunnerService.runnerControllerGetAll().then((val) => {
@@ -28,15 +26,6 @@
       return { label: getRunnerLabel(r), value: r };
     });
   });
-  RunnerCardService.runnerCardControllerGetOne(edit_card.id).then((val) => {
-    runner = Object.assign(
-      { runner },
-      { label: getRunnerLabel(val.runner), value: val.runner }
-    );
-    val.runner = val.runner?.id;
-    editable = Object.assign(editable, val);
-    original_data = Object.assign(original_data, val);
-  });
   $: createbtnenabled = !(
     JSON.stringify(editable) === JSON.stringify(original_data)
   );
@@ -63,6 +52,7 @@
       }).showToast();
       RunnerCardService.runnerCardControllerPut(original_data.id, editable)
         .then((result) => {
+          let id = original_data.id;
           runner = {};
           editable = {};
           original_data = {};
@@ -72,9 +62,14 @@
             text: $_("card-updated"),
             duration: 500,
             backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-          }).showToast();          
+          }).showToast();
+          console.log(
+            JSON.stringify(
+              current_cards
+            )
+          );
           current_cards[
-            current_cards.findIndex((c) => c.id === edit_card.id)
+            current_cards.findIndex((c) => c.id === id)
           ] = result;
           current_cards = current_cards;
         })
@@ -89,6 +84,7 @@
     }
   }
 </script>
+
 {#if edit_modal_open}
   <div
     class="fixed z-10 inset-0 overflow-y-auto"

src/components/cards/CardsOverview.svelte

@@ -1,13 +1,14 @@
 <script>
-  import { getLocaleFromNavigator, _ } from "svelte-i18n";
+  import { getLocaleFromNavigator, json, _ } from "svelte-i18n";
   import { RunnerCardService } from "@odit/lfk-client-js";
   import store from "../../store";
   import Toastify from "toastify-js";
   import CardsEmptyState from "./CardsEmptyState.svelte";
   import CardDetailModal from "./CardDetailModal.svelte";
-  import {init} from "./CardDetailModal.svelte";
   export let edit_modal_open = false;
-  export let edit_card_id = 0;
+  export let runner = {};
+  export let editable = {};
+  export let original_data = {};
   $: searchvalue = "";
   $: active_deletes = [];
   export let current_cards = [];
@@ -22,9 +23,33 @@
     }
     return id.toString() === searchvalue;
   }
+  const getRunnerLabel = (option) =>
+    option?.firstname + " " + (option?.middlename || "") + " " + (option?.lastname || "{$_('non-blanko')}");
+  function open_edit_modal(card) {
+    if(card.runner?.id){
+      runner = Object.assign(
+        { runner },
+        { label: getRunnerLabel(card.runner), value: card.runner }
+      );
+      card.runner = card.runner.id;
+    }
+    else{
+      card.runner=null;
+      runner = null
+    }
+    editable = Object.assign(editable, card);
+    original_data = Object.assign(original_data, card);
+    edit_modal_open = true;
+  }
 </script>
+
 {#if store.state.jwtinfo.userdetails.permissions.includes('CARD:UPDATE')}
-  <CardDetailModal bind:current_cards bind:edit_modal_open bind:edit_card_id/>
+  <CardDetailModal
+    bind:current_cards
+    bind:edit_modal_open
+    bind:runner
+    bind:editable
+    bind:original_data />
 {/if}
 
 {#if store.state.jwtinfo.userdetails.permissions.includes('CARD:GET')}
@@ -148,8 +173,8 @@
                     <td
                       class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                       <button
-                        on:click={(card)=>{
-                          init();
+                        on:click={() => {
+                          open_edit_modal(card);
                         }}
                         class="text-indigo-600 hover:text-indigo-900">{$_('details')}</button>
                       {#if store.state.jwtinfo.userdetails.permissions.includes('CARD:DELETE')}