Moved modal import to overview for simplification

ref #94

src/components/cards/CardDetailModal.svelte

@@ -7,7 +7,8 @@
   import Toastify from "toastify-js";
   export let edit_modal_open;
   export let current_cards;
-  export let edit_card_id;
+  export let edit_card;
+  export let runner;
   const getRunnerLabel = (option) =>
     option.firstname + " " + (option.middlename || "") + " " + option.lastname;
   const filterRunners = (label, filterText, option) =>
@@ -27,7 +28,7 @@
       return { label: getRunnerLabel(r), value: r };
     });
   });
-  RunnerCardService.runnerCardControllerGetOne(edit_card_id).then((val) => {
+  RunnerCardService.runnerCardControllerGetOne(edit_card.id).then((val) => {
     runner = Object.assign(
       { runner },
       { label: getRunnerLabel(val.runner), value: val.runner }
@@ -73,7 +74,7 @@
             backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
           }).showToast();          
           current_cards[
-            current_cards.findIndex((c) => c.id === edit_card_id)
+            current_cards.findIndex((c) => c.id === edit_card.id)
           ] = result;
           current_cards = current_cards;
         })
@@ -88,7 +89,6 @@
     }
   }
 </script>
-
 {#if edit_modal_open}
   <div
     class="fixed z-10 inset-0 overflow-y-auto"

src/components/cards/Cards.svelte

@@ -1,15 +1,12 @@
 <script>
   import { _ } from "svelte-i18n";
   import store from "../../store";
-import AddCardBulkModal from "./AddCardBulkModal.svelte";
+  import AddCardBulkModal from "./AddCardBulkModal.svelte";
   import AddCardModal from "./AddCardModal.svelte";
-import CardDetailModal from "./CardDetailModal.svelte";
   import CardsOverview from "./CardsOverview.svelte";
   $: current_cards = [];
   export let modal_open = false;
   export let bulk_modal_open = false;
-  export let edit_modal_open = true;
-  export let edit_card_id = 1;
 </script>
 
 <section class="container p-5">
@@ -41,6 +38,3 @@ import CardDetailModal from "./CardDetailModal.svelte";
   <AddCardModal bind:current_cards bind:modal_open />
   <AddCardBulkModal bind:current_cards bind:bulk_modal_open />
 {/if}
-{#if store.state.jwtinfo.userdetails.permissions.includes('CARD:UPDATE')}
-  <CardDetailModal bind:current_cards bind:edit_modal_open bind:edit_card_id/>
-{/if}

src/components/cards/CardsOverview.svelte

@@ -4,6 +4,10 @@
   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;
   $: searchvalue = "";
   $: active_deletes = [];
   export let current_cards = [];
@@ -19,6 +23,9 @@
     return id.toString() === searchvalue;
   }
 </script>
+{#if store.state.jwtinfo.userdetails.permissions.includes('CARD:UPDATE')}
+  <CardDetailModal bind:current_cards bind:edit_modal_open bind:edit_card_id/>
+{/if}
 
 {#if store.state.jwtinfo.userdetails.permissions.includes('CARD:GET')}
   {#await cards_promise}
@@ -140,9 +147,11 @@
                   {:else}
                     <td
                       class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
-                      <a
+                      <button
-                        href="./{card.id}"
+                        on:click={(card)=>{
-                        class="text-indigo-600 hover:text-indigo-900">{$_('details')}</a>
+                          init();
+                        }}
+                        class="text-indigo-600 hover:text-indigo-900">{$_('details')}</button>
                       {#if store.state.jwtinfo.userdetails.permissions.includes('CARD:DELETE')}
                         <button
                           on:click={() => {