Merge pull request 'feature/175-request_pagination' (#176) from feature/175-request_pagination into dev

Reviewed-on: #176

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,15 +155,27 @@
     }).showToast();
   }
 
-  onMount(() => {
+  onMount(async () => {
-    RunnerCardService.runnerCardControllerGetAll().then((val) => {
+    let page = 0;
-      current_cards = val;
+    while (page >= 0) {
+      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>
 
@@ -229,7 +241,7 @@
               ...options,
               data: current_cards,
             }));
-            $table.resetRowSelection()
+            $table.resetRowSelection();
           }}
         >
           {$_("delete-cards")}
@@ -249,7 +261,10 @@
           </svg>
         </button>
       {/if}
-      <GenerateRunnerCards cards_show={selected.length>0} bind:generate_cards={selectedCards} />
+      <GenerateRunnerCards
+        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,18 +5,16 @@
   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("*", ""));
@@ -29,64 +27,97 @@
     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 bind:current_donations bind:original_data bind:editable bind:paid_amount_input bind:payment_modal_open />
+<AddDonationPaymentModal
-{#if store.state.jwtinfo.userdetails.permissions.includes('DONATION:GET')}
+  bind:current_donations
-  {#await donations_promise}
+  bind:original_data
+  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>
-  {:then}
+  {:else if current_donations.length === 0}
-    {#if current_donations.length === 0}
     <DonationsEmptyState />
   {:else}
     <input
       type="search"
       bind:value={searchvalue}
-        placeholder={$_('datatable.search')}
+      placeholder={$_("datatable.search")}
-        aria-label={$_('datatable.search')}
+      aria-label={$_("datatable.search")}
-        class="mb-4" />
+      class="mb-4"
+    />
     <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">
         <thead class="bg-gray-50">
           <tr>
             <th
               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')}
+            >
+              {$_("donor")}
             </th>
             <th
               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"
-                {$_('runner')}
+            >
+              {$_("runner")}
             </th>
             <th
               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"
-                {$_('amount-per-kilometer')}
+            >
+              {$_("amount-per-kilometer")}
             </th>
             <th
               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"
-                {$_('donation-amount')}
+            >
+              {$_("donation-amount")}
             </th>
             <th
               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"
-                {$_('paid-amount')}
+            >
+              {$_("paid-amount")}
             </th>
             <th
               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')}
+            >
+              {$_("status")}
             </th>
             <th scope="col" class="relative px-6 py-3">
-                <span class="sr-only">{$_('action')}</span>
+              <span class="sr-only">{$_("action")}</span>
             </th>
           </tr>
         </thead>
@@ -94,29 +125,23 @@
           {#each current_donations as donation}
             {#if donation.donor.firstname
               .toLowerCase()
-                .includes(
+              .includes(searchvalue.toLowerCase()) || donation.donor.lastname
-                  searchvalue.toLowerCase()
-                ) ||  donation.donor.lastname
                 .toLowerCase()
-                  .includes(
+                .includes(searchvalue.toLowerCase()) || donation.runner?.firstname
-                    searchvalue.toLowerCase()
-                  ) || donation.runner?.firstname
                 .toLowerCase()
-                  .includes(
+                .includes(searchvalue.toLowerCase()) || donation.runner?.lastname
-                    searchvalue.toLowerCase()
-                  ) || donation.runner?.lastname
                 .toLowerCase()
-                  .includes(
+                .includes(searchvalue.toLowerCase()) || should_display_based_on_id(donation.id)}
-                    searchvalue.toLowerCase()
-                  ) || should_display_based_on_id(donation.id)}
               <tr data-rowid="donation_{donation.id}">
                 <td class="px-6 py-4 whitespace-nowrap">
                   <div class="flex items-center">
                     <a
                       href="../donors/{donation.donor.id}"
-                        class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">{donation.donor.firstname}
+                      class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800"
-                        {donation.donor.middlename || ''}
+                      >{donation.donor.firstname}
-                        {donation.donor.lastname}</a>
+                      {donation.donor.middlename || ""}
+                      {donation.donor.lastname}</a
+                    >
                   </div>
                 </td>
                 <td class="px-6 py-4 whitespace-nowrap">
@@ -124,13 +149,15 @@
                     <div class="text-sm font-medium text-gray-900">
                       <a
                         href="../runners/{donation.runner.id}"
-                          class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">{donation.runner.firstname}
+                        class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800"
-                          {donation.runner.middlename || ''}
+                        >{donation.runner.firstname}
-                          {donation.runner.lastname}</a>
+                        {donation.runner.middlename || ""}
+                        {donation.runner.lastname}</a
+                      >
                     </div>
                   {:else}
                     <div class="text-sm font-medium text-gray-900">
-                        {$_('fixed-donation')}
+                      {$_("fixed-donation")}
                     </div>
                   {/if}
                 </td>
@@ -139,11 +166,11 @@
                     <div class="text-sm font-medium text-gray-900">
                       {(donation.amountPerDistance / 100)
                         .toFixed(2)
-                          .toLocaleString('de-DE', { valute: 'EUR' })}€
+                        .toLocaleString("de-DE", { valute: "EUR" })}€
                     </div>
                   {:else}
                     <div class="text-sm font-medium text-gray-900">
-                        {$_('fixed-donation')}
+                      {$_("fixed-donation")}
                     </div>
                   {/if}
                 </td>
@@ -151,69 +178,88 @@
                   <div class="text-sm font-medium text-gray-900">
                     {(donation.amount / 100)
                       .toFixed(2)
-                        .toLocaleString('de-DE', { valute: 'EUR' })}€
+                      .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' })}€
+                      .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>
+                      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>
+                      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">
+                    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>
+                      class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer"
+                      >{$_("cancel-delete")}</button
+                    >
                     <button
                       on:click={() => {
-                          DonationService.donationControllerRemove(donation.id, false).then(
+                        DonationService.donationControllerRemove(
-                            (resp) => {
+                          donation.id,
+                          false
+                        ).then((resp) => {
                           current_donations = current_donations.filter(
                             (obj) => obj.id !== donation.id
                           );
                           Toastify({
-                                text: $_('donation-deleted'),
+                            text: $_("donation-deleted"),
                             duration: 500,
                             backgroundColor:
-                                  'linear-gradient(to right, #00b09b, #96c93d)',
+                              "linear-gradient(to right, #00b09b, #96c93d)",
                           }).showToast();
-                            }
+                        });
-                          );
                       }}
                       tabindex="0"
-                        class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">{$_('confirm-delete')}</button>
+                      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">
+                    class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"
+                  >
                     <button
-                        on:click={() => {open_payment_modal(donation);}}
+                      on:click={() => {
-                        class="text-[#025a21] hover:text-green-900 mr-4">{$_('enter-payment')}</button>
+                        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>
+                      class="text-indigo-600 hover:text-indigo-900"
-                      {#if store.state.jwtinfo.userdetails.permissions.includes('DONATION:DELETE')}
+                      >{$_("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>
+                        class="ml-4 text-red-600 hover:text-red-900 cursor-pointer"
+                        >{$_("delete")}</button
+                      >
                     {/if}
                   </td>
                 {/if}
@@ -224,12 +270,4 @@
       </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>
-  {/await}
 {/if}

src/components/runners/RunnersOverview.svelte

@@ -50,7 +50,6 @@
     }));
   };
 
-
   //Section table
   const columns = [
     {
@@ -157,16 +156,7 @@
     }).showToast();
   }
 
-  onMount(() => {
+  onMount(async () => {
-    RunnerService.runnerControllerGetAll().then((val) => {
-      current_runners = val;
-      dataLoaded = true;
-
-      options.update((options) => ({
-        ...options,
-        data: current_runners,
-      }));
-    });
     RunnerTeamService.runnerTeamControllerGetAll().then((val) => {
       teams = val;
     });
@@ -175,6 +165,24 @@
         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,6 +30,7 @@
     $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);
@@ -39,15 +40,6 @@
     }));
   };
 
-  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;
@@ -99,7 +91,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,
     },
@@ -183,6 +175,26 @@
       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
@@ -193,7 +205,7 @@
   }}
 />
 {#if store.state.jwtinfo.userdetails.permissions.includes("SCAN:GET")}
-  {#await scans_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"
@@ -201,8 +213,7 @@
       <p class="font-bold">{$_("scans-are-being-loaded")}</p>
       <p class="text-sm">{$_("this-might-take-a-moment")}</p>
     </div>
-  {:then}
+  {:else if current_scans.length === 0}
-    {#if current_scans.length === 0}
     <ScansEmptyState />
   {:else}
     {#if selected.length > 0}
@@ -294,12 +305,4 @@
     </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>
-  {/await}
 {/if}