✨ PDF download from TeamDetail + TeamsOverview

ref #62

src/components/teams/TeamsOverview.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { t, _ } from "svelte-i18n";
+  import { getLocaleFromNavigator, t, _ } from "svelte-i18n";
   import Toastify from "toastify-js";
   import { RunnerTeamService } from "@odit/lfk-client-js";
   const teams_promise = RunnerTeamService.runnerTeamControllerGetAll();
@@ -44,11 +44,64 @@
         placeholder={$_('datatable.search')}
         aria-label={$_('datatable.search')}
         class="gridjs-input gridjs-search-input mb-4" />
+      <div class="h-12">
+        {#if current_teams.some((r) => r.is_selected === true)}
+          <button
+            on:click={async () => {
+              const locale = getLocaleFromNavigator();
+              const teams = current_teams.filter((r) => r.is_selected === true);
+              for await (const t of teams) {
+                const runners = await RunnerTeamService.runnerTeamControllerGetRunners(t.id);
+                fetch(
+                  `https://dev.lauf-fuer-kaya.de/documents/contracts?locale=${locale}&download=true&key=${config.documentserver_key}`,
+                  {
+                    method: 'POST',
+                    headers: {
+                      'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify(runners),
+                  }
+                )
+                  .then((response) => response.blob())
+                  .then((blob) => {
+                    const url = window.URL.createObjectURL(blob);
+                    let a = document.createElement('a');
+                    a.href = url;
+                    a.download = 'Sponsorings_' + t.name + '.pdf';
+                    document.body.appendChild(a);
+                    a.click();
+                    a.remove();
+                  })
+                  .catch((err) => {});
+              }
+            }}
+            type="button"
+            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-gray-600 text-base font-medium text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 sm:w-auto sm:text-sm">
+            {$_('generate-sponsoring-contracts')}
+          </button>
+        {/if}
+      </div>
       <div
         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">
+                <span
+                  on:click={() => {
+                    const newstate = !current_teams.some((r) => r.is_selected === true);
+                    current_teams = current_teams.map((r) => {
+                      r.is_selected = newstate;
+                      return r;
+                    });
+                  }}
+                  class="underline cursor-pointer select-none">{#if current_teams.some((r) => r.is_selected === true)}
+                    {$_('deselect-all')}
+                  {:else}{$_('select-all')}{/if}
+                </span>
+              </th>
               <th
                 scope="col"
                 class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
@@ -76,6 +129,12 @@
                 .toLowerCase()
                 .includes(searchvalue)}
                 <tr data-rowid="team_{t.id}">
+                  <td class="px-6 py-4 whitespace-nowrap">
+                    <input
+                      bind:checked={t.is_selected}
+                      type="checkbox"
+                      class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded" />
+                  </td>
                   <td class="px-6 py-4 whitespace-nowrap">
                     <div class="flex items-center">
                       <div class="ml-4">