Moved data loading to onmount

src/components/cards/CardsOverview.svelte

@@ -7,7 +7,6 @@
   import CardDetailModal from "./CardDetailModal.svelte";
   import GenerateRunnerCards from "../pdf_generation/GenerateRunnerCards.svelte";
   import InputElement from "../shared/InputElement.svelte";
-  import { groupFilter } from "../shared/tablefilters";
   import {
     createSvelteTable,
     flexRender,
@@ -23,6 +22,7 @@
   import TableHeader from "../shared/TableHeader.svelte";
   import CardStatus from "./CardStatus.svelte";
   import CardRunner from "./CardRunner.svelte";
+  import { onMount } from "svelte";
 
   export let edit_modal_open = false;
   export let runner = {};
@@ -30,6 +30,7 @@
   export let original_data = {};
   export let current_cards = [];
 
+  $: dataLoaded = false;
   $: selected =
     $table?.getSelectedRowModel().rows.map((row) => row.index) || [];
   $: selectedCards =
@@ -38,16 +39,6 @@
   $: cards_show = generate_cards.length > 0;
   $: generate_cards = [];
 
-  const cards_promise = RunnerCardService.runnerCardControllerGetAll().then(
-    (val) => {
-      current_cards = val;
-      options.update((options) => ({
-        ...options,
-        data: current_cards,
-      }));
-    }
-  );
-
   const columns = [
     {
       accessorKey: "code",
@@ -96,12 +87,10 @@
       enableSorting: false,
     },
   ];
+
   const options = writable({
     data: [],
     columns: columns,
-    filterFns: {
-      group: groupFilter,
-    },
     initialState: {
       pagination: {
         pageSize: 50,
@@ -113,6 +102,7 @@
     getPaginationRowModel: getPaginationRowModel(),
     getSortedRowModel: getSortedRowModel(),
   });
+
   const table = createSvelteTable(options);
 
   function open_edit_modal(card) {
@@ -136,6 +126,17 @@
     original_data = Object.assign(original_data, card);
     edit_modal_open = true;
   }
+
+  onMount(() => {
+    RunnerCardService.runnerCardControllerGetAll().then((val) => {
+      current_cards = val;
+      options.update((options) => ({
+        ...options,
+        data: current_cards,
+      }));
+      dataLoaded = true;
+    });
+  });
 </script>
 
 {#if store.state.jwtinfo.userdetails.permissions.includes("CARD:UPDATE")}
@@ -158,7 +159,7 @@
 {/if}
 
 {#if store.state.jwtinfo.userdetails.permissions.includes("CARD:GET")}
-  {#await cards_promise}
+  {#if !dataLoaded}
     <div
       class="bg-teal-lightest border-t-4 border-teal rounded-b text-teal-darkest px-4 py-3 shadow-md my-2"
       role="alert"
@@ -166,19 +167,19 @@
       <p class="font-bold">{$_("loading-cards")}</p>
       <p class="text-sm">{$_("this-might-take-a-moment")}</p>
     </div>
-  {:then}
+  {:else}
     {#if current_cards.length === 0}
       <CardsEmptyState />
     {:else}
       <div class="h-12 mt-1">
-        {#if cards_show}
+        {#if selected.length > 0}
           <button
             type="button"
             class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm inline-flex"
             id="options-menu"
             on:click={async () => {
               const prom = [];
-              for (const card of generate_cards) {
+              for (const card of selectedCards) {
                 prom.push(
                   RunnerCardService.runnerCardControllerRemove(card.id, true)
                 );
@@ -189,7 +190,13 @@
                 duration: 3500,
                 backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
               }).showToast();
-              //TODO: Delete cards from table
+              for (const card of generate_cards) {
+                current_cards = current_cards.filter((c) => c.id !== card.id);
+              }
+              options.update((options) => ({
+                ...options,
+                data: current_cards,
+              }));
             }}
           >
             {$_("delete-cards")}
@@ -255,14 +262,7 @@
       </table>
       <TableBottom {table} {selected} />
     {/if}
-  {:catch error}
+  {/if}
-    <div class="text-white px-6 py-4 border-0 rounded relative mb-4 bg-red-500">
-      <span class="inline-block align-middle mr-8">
-        <b class="capitalize">{$_("general_promise_error")}</b>
-        {error}
-      </span>
-    </div>
-  {/await}
 {/if}
 
 <style>