src/components/cards/CardsOverview.svelte

@@ -32,7 +32,7 @@
   export let original_data = {};
   export let current_cards = [];
   export const addCards = (cards) => {
-    console.log(cards);
+    console.log(cards)
     current_cards = current_cards.concat(...cards);
     options.update((options) => ({
       ...options,
@@ -155,27 +155,15 @@
     }).showToast();
   }
 
-  onMount(async () => {
+  onMount(() => {
-    let page = 0;
+    RunnerCardService.runnerCardControllerGetAll().then((val) => {
-    while (page >= 0) {
+      current_cards = val;
-      const cards = await RunnerCardService.runnerCardControllerGetAll(
-        page,
-        500
-      );
-      if (cards.length == 0) {
-        page = -2;
-      }
-
-      current_cards = current_cards.concat(...cards);
       options.update((options) => ({
         ...options,
         data: current_cards,
       }));
-
       dataLoaded = true;
-      page++;
+    });
-    }
-    console.log("All cards loaded");
   });
 </script>
 
@@ -241,7 +229,7 @@
               ...options,
               data: current_cards,
             }));
-            $table.resetRowSelection();
+            $table.resetRowSelection()
           }}
         >
           {$_("delete-cards")}
@@ -261,10 +249,7 @@
           </svg>
         </button>
       {/if}
-      <GenerateRunnerCards
+      <GenerateRunnerCards cards_show={selected.length>0} bind:generate_cards={selectedCards} />
-        cards_show={selected.length > 0}
-        bind:generate_cards={selectedCards}
-      />
     </div>
     <div class="overflow-x-auto">
       <table class="w-full">

src/components/donations/DonationsOverview.svelte

@@ -5,16 +5,18 @@
   import Toastify from "toastify-js";
   import DonationsEmptyState from "./DonationsEmptyState.svelte";
   import AddDonationPaymentModal from "./AddDonationPaymentModal.svelte";
-  import { onMount } from "svelte";
   $: searchvalue = "";
   $: active_deletes = [];
-  $: dataLoaded = false;
   export let current_donations = [];
   export let payment_modal_open = false;
   export let editable = {};
   export let original_data = {};
   export let paid_amount_input = 0;
-
+  const donations_promise = DonationService.donationControllerGetAll().then(
+    (val) => {
+      current_donations = val;
+    }
+  );
   function should_display_based_on_id(id) {
     if (searchvalue.toString().slice(-1) === "*") {
       return id.toString().startsWith(searchvalue.replace("*", ""));
@@ -24,250 +26,210 @@
   function open_payment_modal(donation) {
     editable = Object.assign({}, donation);
     original_data = Object.assign({}, donation);
-    paid_amount_input = (donation.paidAmount / 100).toFixed(2);
+    paid_amount_input = (donation.paidAmount/100).toFixed(2);
     payment_modal_open = true;
   }
-
-  onMount(async () => {
-    let page = 0;
-    while (page >= 0) {
-      const donations = await DonationService.donationControllerGetAll(
-        page,
-        500
-      );
-      if (donations.length == 0) {
-        page = -2;
-      }
-
-      current_donations = current_donations.concat(...donations);
-
-      dataLoaded = true;
-      page++;
-    }
-    console.log("All donations loaded");
-  });
 </script>
 
-<AddDonationPaymentModal
+<AddDonationPaymentModal bind:current_donations bind:original_data bind:editable bind:paid_amount_input bind:payment_modal_open />
-  bind:current_donations
+{#if store.state.jwtinfo.userdetails.permissions.includes('DONATION:GET')}
-  bind:original_data
+  {#await donations_promise}
-  bind:editable
-  bind:paid_amount_input
-  bind:payment_modal_open
-/>
-{#if store.state.jwtinfo.userdetails.permissions.includes("DONATION:GET")}
-  {#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"
+      role="alert">
-    >
       <p class="font-bold">donations are being loaded</p>
-      <p class="text-sm">{$_("this-might-take-a-moment")}</p>
+      <p class="text-sm">{$_('this-might-take-a-moment')}</p>
     </div>
-  {:else if current_donations.length === 0}
+  {:then}
-    <DonationsEmptyState />
+    {#if current_donations.length === 0}
-  {:else}
+      <DonationsEmptyState />
-    <input
+    {:else}
-      type="search"
+      <input
-      bind:value={searchvalue}
+        type="search"
-      placeholder={$_("datatable.search")}
+        bind:value={searchvalue}
-      aria-label={$_("datatable.search")}
+        placeholder={$_('datatable.search')}
-      class="mb-4"
+        aria-label={$_('datatable.search')}
-    />
+        class="mb-4" />
-    <div
+      <div
-      class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll"
+        class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll">
-    >
+        <table class="divide-y divide-gray-200 w-full">
-      <table class="divide-y divide-gray-200 w-full">
+          <thead class="bg-gray-50">
-        <thead class="bg-gray-50">
+            <tr>
-          <tr>
+              <th
-            <th
+                scope="col"
-              scope="col"
+                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-              class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+                {$_('donor')}
-            >
+              </th>
-              {$_("donor")}
+              <th
-            </th>
+                scope="col"
-            <th
+                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-              scope="col"
+                {$_('runner')}
-              class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+              </th>
-            >
+              <th
-              {$_("runner")}
+                scope="col"
-            </th>
+                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-            <th
+                {$_('amount-per-kilometer')}
-              scope="col"
+              </th>
-              class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+              <th
-            >
+                scope="col"
-              {$_("amount-per-kilometer")}
+                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-            </th>
+                {$_('donation-amount')}
-            <th
+              </th>
-              scope="col"
+              <th
-              class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+                scope="col"
-            >
+                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-              {$_("donation-amount")}
+                {$_('paid-amount')}
-            </th>
+              </th>
-            <th
+              <th
-              scope="col"
+                scope="col"
-              class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-            >
+                {$_('status')}
-              {$_("paid-amount")}
+              </th>
-            </th>
+              <th scope="col" class="relative px-6 py-3">
-            <th
+                <span class="sr-only">{$_('action')}</span>
-              scope="col"
+              </th>
-              class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+            </tr>
-            >
+          </thead>
-              {$_("status")}
+          <tbody class="divide-y divide-gray-200">
-            </th>
+            {#each current_donations as donation}
-            <th scope="col" class="relative px-6 py-3">
+              {#if donation.donor.firstname
-              <span class="sr-only">{$_("action")}</span>
-            </th>
-          </tr>
-        </thead>
-        <tbody class="divide-y divide-gray-200">
-          {#each current_donations as donation}
-            {#if donation.donor.firstname
-              .toLowerCase()
-              .includes(searchvalue.toLowerCase()) || donation.donor.lastname
                 .toLowerCase()
-                .includes(searchvalue.toLowerCase()) || donation.runner?.firstname
+                .includes(
-                .toLowerCase()
+                  searchvalue.toLowerCase()
-                .includes(searchvalue.toLowerCase()) || donation.runner?.lastname
+                ) ||  donation.donor.lastname
-                .toLowerCase()
+                  .toLowerCase()
-                .includes(searchvalue.toLowerCase()) || should_display_based_on_id(donation.id)}
+                  .includes(
-              <tr data-rowid="donation_{donation.id}">
+                    searchvalue.toLowerCase()
-                <td class="px-6 py-4 whitespace-nowrap">
+                  ) || donation.runner?.firstname
-                  <div class="flex items-center">
+                  .toLowerCase()
-                    <a
+                  .includes(
-                      href="../donors/{donation.donor.id}"
+                    searchvalue.toLowerCase()
-                      class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800"
+                  ) || donation.runner?.lastname
-                      >{donation.donor.firstname}
+                  .toLowerCase()
-                      {donation.donor.middlename || ""}
+                  .includes(
-                      {donation.donor.lastname}</a
+                    searchvalue.toLowerCase()
-                    >
+                  ) || should_display_based_on_id(donation.id)}
-                  </div>
+                <tr data-rowid="donation_{donation.id}">
-                </td>
+                  <td class="px-6 py-4 whitespace-nowrap">
-                <td class="px-6 py-4 whitespace-nowrap">
+                    <div class="flex items-center">
-                  {#if donation.runner}
-                    <div class="text-sm font-medium text-gray-900">
                       <a
-                        href="../runners/{donation.runner.id}"
+                        href="../donors/{donation.donor.id}"
-                        class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800"
+                        class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">{donation.donor.firstname}
-                        >{donation.runner.firstname}
+                        {donation.donor.middlename || ''}
-                        {donation.runner.middlename || ""}
+                        {donation.donor.lastname}</a>
-                        {donation.runner.lastname}</a
-                      >
                     </div>
-                  {:else}
-                    <div class="text-sm font-medium text-gray-900">
-                      {$_("fixed-donation")}
-                    </div>
-                  {/if}
-                </td>
-                <td class="px-6 py-4 whitespace-nowrap">
-                  {#if donation.amountPerDistance}
-                    <div class="text-sm font-medium text-gray-900">
-                      {(donation.amountPerDistance / 100)
-                        .toFixed(2)
-                        .toLocaleString("de-DE", { valute: "EUR" })}€
-                    </div>
-                  {:else}
-                    <div class="text-sm font-medium text-gray-900">
-                      {$_("fixed-donation")}
-                    </div>
-                  {/if}
-                </td>
-                <td class="px-6 py-4 whitespace-nowrap">
-                  <div class="text-sm font-medium text-gray-900">
-                    {(donation.amount / 100)
-                      .toFixed(2)
-                      .toLocaleString("de-DE", { valute: "EUR" })}€
-                  </div>
-                </td>
-                <td class="px-6 py-4 whitespace-nowrap">
-                  <div class="text-sm font-medium text-gray-900">
-                    {(donation.paidAmount / 100)
-                      .toFixed(2)
-                      .toLocaleString("de-DE", { valute: "EUR" })}€
-                  </div>
-                </td>
-                <td class="px-6 py-4 whitespace-nowrap">
-                  {#if donation.status == "PAID"}
-                    <span
-                      class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800"
-                      >{$_("paid")}</span
-                    >
-                  {:else}
-                    <span
-                      class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800"
-                      >{$_("open")}</span
-                    >
-                  {/if}
-                </td>
-                {#if active_deletes[donation.id] === true}
-                  <td
-                    class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"
-                  >
-                    <button
-                      on:click={() => {
-                        active_deletes[donation.id] = false;
-                      }}
-                      tabindex="0"
-                      class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer"
-                      >{$_("cancel-delete")}</button
-                    >
-                    <button
-                      on:click={() => {
-                        DonationService.donationControllerRemove(
-                          donation.id,
-                          false
-                        ).then((resp) => {
-                          current_donations = current_donations.filter(
-                            (obj) => obj.id !== donation.id
-                          );
-                          Toastify({
-                            text: $_("donation-deleted"),
-                            duration: 500,
-                            backgroundColor:
-                              "linear-gradient(to right, #00b09b, #96c93d)",
-                          }).showToast();
-                        });
-                      }}
-                      tabindex="0"
-                      class="ml-4 text-red-600 hover:text-red-900 cursor-pointer"
-                      >{$_("confirm-delete")}</button
-                    >
                   </td>
-                {:else}
+                  <td class="px-6 py-4 whitespace-nowrap">
-                  <td
+                    {#if donation.runner}
-                    class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"
+                      <div class="text-sm font-medium text-gray-900">
-                  >
+                        <a
-                    <button
+                          href="../runners/{donation.runner.id}"
-                      on:click={() => {
+                          class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">{donation.runner.firstname}
-                        open_payment_modal(donation);
+                          {donation.runner.middlename || ''}
-                      }}
+                          {donation.runner.lastname}</a>
-                      class="text-[#025a21] hover:text-green-900 mr-4"
+                      </div>
-                      >{$_("enter-payment")}</button
+                    {:else}
-                    >
+                      <div class="text-sm font-medium text-gray-900">
-                    <a
+                        {$_('fixed-donation')}
-                      href="./{donation.id}"
+                      </div>
-                      class="text-indigo-600 hover:text-indigo-900"
-                      >{$_("details")}</a
-                    >
-                    {#if store.state.jwtinfo.userdetails.permissions.includes("DONATION:DELETE")}
-                      <button
-                        on:click={() => {
-                          active_deletes[donation.id] = true;
-                        }}
-                        tabindex="0"
-                        class="ml-4 text-red-600 hover:text-red-900 cursor-pointer"
-                        >{$_("delete")}</button
-                      >
                     {/if}
                   </td>
-                {/if}
+                  <td class="px-6 py-4 whitespace-nowrap">
-              </tr>
+                    {#if donation.amountPerDistance}
-            {/if}
+                      <div class="text-sm font-medium text-gray-900">
-          {/each}
+                        {(donation.amountPerDistance / 100)
-        </tbody>
+                          .toFixed(2)
-      </table>
+                          .toLocaleString('de-DE', { valute: 'EUR' })}€
+                      </div>
+                    {:else}
+                      <div class="text-sm font-medium text-gray-900">
+                        {$_('fixed-donation')}
+                      </div>
+                    {/if}
+                  </td>
+                  <td class="px-6 py-4 whitespace-nowrap">
+                    <div class="text-sm font-medium text-gray-900">
+                      {(donation.amount / 100)
+                        .toFixed(2)
+                        .toLocaleString('de-DE', { valute: 'EUR' })}€
+                    </div>
+                  </td>
+                  <td class="px-6 py-4 whitespace-nowrap">
+                    <div class="text-sm font-medium text-gray-900">
+                      {(donation.paidAmount / 100)
+                        .toFixed(2)
+                        .toLocaleString('de-DE', { valute: 'EUR' })}€
+                    </div>
+                  </td>
+                  <td class="px-6 py-4 whitespace-nowrap">
+                    {#if donation.status =="PAID"}
+                      <span
+                        class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">{$_('paid')}</span>
+                    {:else}
+                      <span
+                        class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">{$_('open')}</span>
+                    {/if}
+                  </td>
+                  {#if active_deletes[donation.id] === true}
+                    <td
+                      class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+                      <button
+                        on:click={() => {
+                          active_deletes[donation.id] = false;
+                        }}
+                        tabindex="0"
+                        class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer">{$_('cancel-delete')}</button>
+                      <button
+                        on:click={() => {
+                          DonationService.donationControllerRemove(donation.id, false).then(
+                            (resp) => {
+                              current_donations = current_donations.filter(
+                                (obj) => obj.id !== donation.id
+                              );
+                              Toastify({
+                                text: $_('donation-deleted'),
+                                duration: 500,
+                                backgroundColor:
+                                  'linear-gradient(to right, #00b09b, #96c93d)',
+                              }).showToast();
+                            }
+                          );
+                        }}
+                        tabindex="0"
+                        class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">{$_('confirm-delete')}</button>
+                    </td>
+                  {:else}
+                    <td
+                      class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+                      <button
+                        on:click={() => {open_payment_modal(donation);}}
+                        class="text-[#025a21] hover:text-green-900 mr-4">{$_('enter-payment')}</button>
+                      <a
+                        href="./{donation.id}"
+                        class="text-indigo-600 hover:text-indigo-900">{$_('details')}</a>
+                      {#if store.state.jwtinfo.userdetails.permissions.includes('DONATION:DELETE')}
+                        <button
+                          on:click={() => {
+                            active_deletes[donation.id] = true;
+                          }}
+                          tabindex="0"
+                          class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">{$_('delete')}</button>
+                      {/if}
+                    </td>
+                  {/if}
+                </tr>
+              {/if}
+            {/each}
+          </tbody>
+        </table>
+      </div>
+    {/if}
+  {:catch error}
+    <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>
-  {/if}
+  {/await}
 {/if}

src/components/runners/RunnersOverview.svelte

@@ -50,6 +50,7 @@
     }));
   };
 
+
   //Section table
   const columns = [
     {
@@ -156,7 +157,16 @@
     }).showToast();
   }
 
-  onMount(async () => {
+  onMount(() => {
+    RunnerService.runnerControllerGetAll().then((val) => {
+      current_runners = val;
+      dataLoaded = true;
+
+      options.update((options) => ({
+        ...options,
+        data: current_runners,
+      }));
+    });
     RunnerTeamService.runnerTeamControllerGetAll().then((val) => {
       teams = val;
     });
@@ -165,24 +175,6 @@
         orgs = val;
       }
     );
-
-    let page = 0;
-    while (page >= 0) {
-      const runners = await RunnerService.runnerControllerGetAll(page, 1000);
-      if (runners.length == 0) {
-        page = -2;
-      }
-
-      current_runners = current_runners.concat(...runners);
-      options.update((options) => ({
-        ...options,
-        data: current_runners,
-      }));
-
-      dataLoaded = true;
-      page++;
-    }
-    console.log("All runners loaded");
   });
 </script>
 

src/components/scans/ScansOverview.svelte

@@ -30,7 +30,6 @@
     $table?.getSelectedRowModel().rows.map((row) => row.index) || [];
 
   $: active_delete = undefined;
-  $: dataLoaded = false;
   export let current_scans = [];
   export const addScans = (scans) => {
     current_scans = current_scans.concat(...scans);
@@ -40,6 +39,15 @@
     }));
   };
 
+  const scans_promise = ScanService.scanControllerGetAll().then((val) => {
+    current_scans = val;
+    // handler.setRows(val);
+    current_scans = val;
+    options.update((options) => ({
+      ...options,
+      data: current_scans,
+    }));
+  });
   let allTracks = [];
   TrackService.trackControllerGetAll().then((val) => {
     allTracks = val;
@@ -91,7 +99,7 @@
       accessorKey: "timestamp",
       header: () => $_("timestamp"),
       cell: (info) => {
-        return new Date(parseInt(info.getValue()) * 1000).toLocaleString();
+        return (new Date(parseInt(info.getValue())*1000)).toLocaleString()
       },
       enableColumnFilter: false,
     },
@@ -175,26 +183,6 @@
       backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
     }).showToast();
   }
-
-  onMount(async () => {
-    let page = 0;
-    while (page >= 0) {
-      const scans = await ScanService.scanControllerGetAll(page, 500);
-      if (scans.length == 0) {
-        page = -2;
-      }
-
-      current_scans = current_scans.concat(...scans);
-      options.update((options) => ({
-        ...options,
-        data: current_scans,
-      }));
-
-      dataLoaded = true;
-      page++;
-    }
-    console.log("All scans loaded");
-  });
 </script>
 
 <DeleteScanModal
@@ -205,7 +193,7 @@
   }}
 />
 {#if store.state.jwtinfo.userdetails.permissions.includes("SCAN:GET")}
-  {#if !dataLoaded}
+  {#await scans_promise}
     <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"
@@ -213,96 +201,105 @@
       <p class="font-bold">{$_("scans-are-being-loaded")}</p>
       <p class="text-sm">{$_("this-might-take-a-moment")}</p>
     </div>
-  {:else if current_scans.length === 0}
+  {:then}
-    <ScansEmptyState />
+    {#if current_scans.length === 0}
-  {:else}
+      <ScansEmptyState />
-    {#if selected.length > 0}
+    {:else}
-      <button
+      {#if selected.length > 0}
-        type="button"
+        <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"
+          type="button"
-        id="options-menu"
+          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"
-        on:click={async () => {
+          id="options-menu"
-          const prom = [];
+          on:click={async () => {
-          for (const scan of selectedScans) {
+            const prom = [];
-            prom.push(ScanService.scanControllerRemove(scan.id, true));
+            for (const scan of selectedScans) {
-          }
+              prom.push(ScanService.scanControllerRemove(scan.id, true));
-          await Promise.all(prom);
+            }
-          for (const scan of selectedScans) {
+            await Promise.all(prom);
-            current_scans = current_scans.filter((r) => r.id !== scan.id);
+            for (const scan of selectedScans) {
-          }
+              current_scans = current_scans.filter((r) => r.id !== scan.id);
-          options.update((options) => ({
+            }
-            ...options,
+            options.update((options) => ({
-            data: current_scans,
+              ...options,
-          }));
+              data: current_scans,
-          $table.resetRowSelection();
+            }));
-          Toastify({
+            $table.resetRowSelection();
-            text: $_("scan-deleted"),
+            Toastify({
-            duration: 3500,
+              text: $_("scan-deleted"),
-            backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
+              duration: 3500,
-          }).showToast();
+              backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-        }}
+            }).showToast();
-      >
+          }}
-        {$_("delete-scans")}
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke-width="1.5"
-          stroke="currentColor"
-          class="w-5 h-5"
         >
-          <path
+          {$_("delete-scans")}
-            stroke-linecap="round"
+          <svg
-            stroke-linejoin="round"
+            xmlns="http://www.w3.org/2000/svg"
-            d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"
+            fill="none"
-          />
+            viewBox="0 0 24 24"
-        </svg>
+            stroke-width="1.5"
-      </button>
+            stroke="currentColor"
-    {/if}
+            class="w-5 h-5"
-    <div class="overflow-x-auto">
+          >
-      <table class="w-full">
+            <path
-        <thead>
+              stroke-linecap="round"
-          {#each $table.getHeaderGroups() as headerGroup}
+              stroke-linejoin="round"
-            <tr class="select-none">
+              d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"
-              <th class="inset-y-0 left-0 px-4 py-2 text-left w-px">
+            />
-                <InputElement
+          </svg>
-                  type="checkbox"
+        </button>
-                  checked={$table.getIsAllRowsSelected()}
+      {/if}
-                  indeterminate={$table.getIsSomeRowsSelected()}
+      <div class="overflow-x-auto">
-                  on:change={() => $table.toggleAllRowsSelected()}
+        <table class="w-full">
-                />
+          <thead>
-              </th>
+            {#each $table.getHeaderGroups() as headerGroup}
-              {#each headerGroup.headers as header}
+              <tr class="select-none">
-                <TableHeader {header} />
+                <th class="inset-y-0 left-0 px-4 py-2 text-left w-px">
-              {/each}
+                  <InputElement
-            </tr>
+                    type="checkbox"
-          {/each}
+                    checked={$table.getIsAllRowsSelected()}
-        </thead>
+                    indeterminate={$table.getIsSomeRowsSelected()}
-        <tbody>
+                    on:change={() => $table.toggleAllRowsSelected()}
-          {#each $table.getRowModel().rows as row}
+                  />
-            <tr>
+                </th>
-              <td class="inset-y-0 left-0 px-4 py-2 text-center w-px">
+                {#each headerGroup.headers as header}
-                <InputElement
+                  <TableHeader {header} />
-                  type="checkbox"
+                {/each}
-                  checked={row.getIsSelected()}
+              </tr>
-                  on:change={() => row.toggleSelected()}
+            {/each}
-                />
+          </thead>
-              </td>
+          <tbody>
-              {#each row.getVisibleCells() as cell}
+            {#each $table.getRowModel().rows as row}
-                <td>
+              <tr>
-                  <svelte:component
+                <td class="inset-y-0 left-0 px-4 py-2 text-center w-px">
-                    this={flexRender(
+                  <InputElement
-                      cell.column.columnDef.cell,
+                    type="checkbox"
-                      cell.getContext()
+                    checked={row.getIsSelected()}
-                    )}
+                    on:change={() => row.toggleSelected()}
                   />
                 </td>
-              {/each}
+                {#each row.getVisibleCells() as cell}
-            </tr>
+                  <td>
-          {/each}
+                    <svelte:component
-        </tbody>
+                      this={flexRender(
-      </table>
+                        cell.column.columnDef.cell,
+                        cell.getContext()
+                      )}
+                    />
+                  </td>
+                {/each}
+              </tr>
+            {/each}
+          </tbody>
+        </table>
+      </div>
+      <TableBottom {table} {selected} />
+    {/if}
+  {:catch error}
+    <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>
-    <TableBottom {table} {selected} />
+  {/await}
-  {/if}
 {/if}