src/components/cards/CardDetailModal.svelte

@@ -7,6 +7,7 @@
   import Toastify from "toastify-js";
   import { createEventDispatcher } from "svelte";
   export let edit_modal_open;
+  export let current_cards;
   export let runner = {};
   export let editable = {};
   export let original_data = {};
@@ -29,6 +30,9 @@
   $: enabled = true;
   $: processed_last_submit = true;
   const dispatch = createEventDispatcher();
+  function dataUpdated() {
+		dispatch('dataUpdated',);
+	}
   RunnerService.runnerControllerGetAll().then((val) => {
     runners = val.map((r) => {
       return { label: getRunnerLabel(r), value: r };
@@ -71,7 +75,9 @@
             duration: 500,
             backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
           }).showToast();
-          dispatch('dataUpdated', {card: result});
+          current_cards[current_cards.findIndex((c) => c.id === id)] = result;
+          current_cards = current_cards;
+          dataUpdated();
         })
         .catch((err) => {
           //

src/components/cards/CardsOverview.svelte

@@ -47,12 +47,18 @@
       }));
     }
   );
+  const getRunnerLabel = (option) =>
+    option?.firstname +
+    " " +
+    (option?.middlename || "") +
+    " " +
+    (option?.lastname || "{$_('non-blanko')}");
 
   const columns = [
     {
-      accessorKey: "code",
+      accessorKey: "id",
-      header: () => $_("code"),
+      header: () => "id",
-      filterFn: `includesString`,
+      filterFn: `equalsString`,
     },
     {
       accessorKey: "runner",
@@ -75,13 +81,7 @@
       header: () => $_("action"),
       cell: (info) => {
         return renderComponent(TableActions, {
-          detailsAction: () => {
+          detailsLink: `./${info.row.original.id}`,
-            open_edit_modal(
-              current_cards[
-                current_cards.findIndex((r) => r.id == info.row.original.id)
-              ]
-            );
-          },
           deleteAction: () => {
             active_delete =
               current_cards[
@@ -116,12 +116,6 @@
   const table = createSvelteTable(options);
 
   function open_edit_modal(card) {
-    const getRunnerLabel = (option) =>
-      option.firstname +
-      " " +
-      (option.middlename || "") +
-      " " +
-      option.lastname;
     if (card.runner?.id) {
       runner = Object.assign(
         { runner },
@@ -140,19 +134,13 @@
 
 {#if store.state.jwtinfo.userdetails.permissions.includes("CARD:UPDATE")}
   <CardDetailModal
+    bind:current_cards
     bind:edit_modal_open
     bind:runner
     bind:editable
     bind:original_data
-    on:dataUpdated={(event) => {
+    on:dataUpdated={() => {
-      current_cards[
+      //TODO:
-        current_cards.findIndex((c) => c.id === event.detail.card.id)
-      ] = event.detail.card;
-      current_cards = current_cards;
-      options.update((options) => ({
-        ...options,
-        data: current_cards,
-      }));
     }}
   />
 {/if}