✨ OrgOverview - multiple pdf download

ref #62

src/components/orgs/OrgOverview.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { _ } from "svelte-i18n";
+  import { getLocaleFromNavigator, _ } from "svelte-i18n";
   let modal_open = false;
   let delete_org = {};
   import { RunnerOrganizationService } from "@odit/lfk-client-js";
@@ -43,11 +43,64 @@
         placeholder={$_('datatable.search')}
         aria-label={$_('datatable.search')}
         class="gridjs-input gridjs-search-input mb-4" />
+      <div class="h-12">
+        {#if current_organizations.some((r) => r.is_selected === true)}
+          <button
+            on:click={async () => {
+              const locale = getLocaleFromNavigator();
+              const orgs = current_organizations.filter((r) => r.is_selected === true);
+              for await (const o of orgs) {
+                const runners = await RunnerOrganizationService.runnerOrganizationControllerGetRunners(o.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_' + o.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_organizations.some((r) => r.is_selected === true);
+                    current_organizations = current_organizations.map((r) => {
+                      r.is_selected = newstate;
+                      return r;
+                    });
+                  }}
+                  class="underline cursor-pointer select-none">{#if current_organizations.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">
@@ -75,6 +128,12 @@
                 .toLowerCase()
                 .includes(searchvalue)}
                 <tr data-rowid="org_{o.id}">
+                  <td class="px-6 py-4 whitespace-nowrap">
+                    <input
+                      bind:checked={o.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">
@@ -148,7 +207,7 @@
                       class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                       <a
                         href="./{o.id}"
-                        class="text-indigo-600 hover:text-indigo-900">{$_('edit')}</a>
+                        class="text-indigo-600 hover:text-indigo-900">{$_('details')}</a>
                       {#if store.state.jwtinfo.userdetails.permissions.includes('ORGANIZATION:DELETE')}
                         <button
                           on:click={() => {