✨ PDF download from TeamDetail + TeamsOverview

ref #62

src/components/teams/TeamDetail.svelte

@@ -4,7 +4,7 @@
     RunnerOrganizationService,
     RunnerTeamService,
   } from "@odit/lfk-client-js";
-  import { _ } from "svelte-i18n";
+  import { getLocaleFromNavigator, _ } from "svelte-i18n";
   import Toastify from "toastify-js";
   import store from "../../store";
   import ImportRunnerModal from "../runners/ImportRunnerModal.svelte";
@@ -100,6 +100,34 @@
     <div class="mb-8 text-3xl font-extrabold leading-tight">
       {original.name}
       <span data-id="org_actions_${teamdata.id}">
+        <button
+          on:click={async () => {
+            const locale = getLocaleFromNavigator();
+            const runners = await RunnerTeamService.runnerTeamControllerGetRunners(teamdata.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_' + teamdata.name + '.pdf';
+                document.body.appendChild(a);
+                a.click();
+                a.remove();
+              })
+              .catch((err) => {});
+          }}
+          type="button"
+          class="w-full 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:ml-3 sm:w-auto sm:text-sm">{$_('generate-sponsoring-contracts')}</button>
         {#if store.state.jwtinfo.userdetails.permissions.includes('RUNNER:IMPORT')}
           <button
             on:click={() => {
@@ -255,7 +283,7 @@
   </section>
 {:else}
   {#await promise}
-    team detail is being loaded...
+    {$_('team-detail-is-being-loaded')}
   {:catch error}
     <PromiseError />
   {/await}

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">

src/locales/en.json

@@ -202,6 +202,7 @@
     "status": "Status",
     "successful-password-reset": "Successful password reset!",
     "team": "Team",
+    "team-detail-is-being-loaded": "team detail is being loaded...",
     "team-name": "Team name",
     "team-name-is-required": "team name is required",
     "teams": "Teams",