Orgs now use the new sponsoring contracts module

ref #94

src/components/orgs/OrgDetail.svelte

@@ -10,6 +10,7 @@
   import ImportRunnerModal from "../runners/ImportRunnerModal.svelte";
   import PromiseError from "../base/PromiseError.svelte";
   import Select from "svelte-select";
+  import GenerateSponsoringContracts from "../runners/GenerateSponsoringContracts.svelte";
   $: delete_triggered = false;
   $: address_valid_or_none =
     (isAddress1Valid && iszipcodevalid && iscityvalid) ||
@@ -26,7 +27,8 @@
   $: isAddress1Valid = editable.address?.address1?.trim().length !== 0;
   $: iszipcodevalid = editable.address?.postalcode?.trim().length !== 0;
   $: iscityvalid = editable.address?.city?.trim().length !== 0;
-  $: sponsoring_contracts_download_open = false;
+  $: sponsoring_contracts_show = true;
+  $: generate_orgs = [original_object];
   const getContactLabel = (option) =>
     option.firstname + " " + (option.middlename || "") + " " + option.lastname;
   const promise = RunnerOrganizationService.runnerOrganizationControllerGetOne(
@@ -60,14 +62,6 @@
   });
   let modal_open = false;
   let delete_org = {};
-  document.addEventListener("click", function (e) {
-    if (
-      e.target.parentNode?.parentNode?.id != "sponsoring:dropdown" &&
-      e.target.parentNode?.parentNode?.id != "sponsoring:dropdown:menu"
-    ) {
-      sponsoring_contracts_download_open = false;
-    }
-  });
   function deleteOrganization() {
     RunnerOrganizationService.runnerOrganizationControllerRemove(
       original_object.id,
@@ -115,55 +109,6 @@
     }
   }
   export let import_modal_open = false;
-  async function generateSponsoringContract(locale) {
-    sponsoring_contracts_download_open = false;
-    const runners = await RunnerOrganizationService.runnerOrganizationControllerGetRunners(
-      original_object.id
-    );
-    const toast = Toastify({
-      text: $_("generating-pdf"),
-      duration: -1,
-    }).showToast();
-    fetch(
-      `${config.baseurl}/documents/contracts?locale=${locale}&download=true&key=${config.documentserver_key}`,
-      {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify(runners),
-      }
-    )
-      .then((response) => {
-        if (response.status != "200") {
-          toast.hideToast();
-          Toastify({
-            text: $_("pdf-generation-failed"),
-            duration: 3500,
-            backgroundColor:
-              "linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
-          }).showToast();
-        } else {
-          return response.blob();
-        }
-      })
-      .then((blob) => {
-        const url = window.URL.createObjectURL(blob);
-        let a = document.createElement("a");
-        a.href = url;
-        a.download = "Sponsorings_" + original_object.name + ".pdf";
-        document.body.appendChild(a);
-        a.click();
-        a.remove();
-        toast.hideToast();
-        Toastify({
-          text: $_("pdf-successfully-generated"),
-          duration: 3500,
-          backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-        }).showToast();
-      })
-      .catch((err) => {});
-  }
 </script>
 
 <ImportRunnerModal
@@ -182,64 +127,9 @@
     <div class="mb-8 text-3xl font-extrabold leading-tight">
       {original_object.name}
       <span data-id="org_actions_${editable.id}">
-        <div id="sponsoring:dropdown" class="relative inline-block">
+        <GenerateSponsoringContracts
-          <div>
+          bind:sponsoring_contracts_show
-            <button
+          bind:generate_orgs />
-              on:click={() => {
-                sponsoring_contracts_download_open = !sponsoring_contracts_download_open;
-              }}
-              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 inline-flex"
-              id="options-menu"
-              aria-haspopup="true"
-              aria-expanded="true">
-              {$_('generate-sponsoring-contracts')}
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="24"
-                height="24"
-                viewBox="0 0 24 24"
-                class="-mr-1 ml-2 h-5 w-5"><path
-                  fill="none"
-                  d="M0 0h24v24H0z" />
-                <path
-                  fill="currentColor"
-                  d="M3 19h18v2H3v-2zm10-5.83l6.07-6.07 1.42 1.41L12 17 3.52 8.52l1.4-1.42L11 13.17V2h2v11.17z" /></svg>
-            </button>
-          </div>
-          {#if sponsoring_contracts_download_open}
-            <div
-              class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5"
-              id="sponsoring:dropdown:menu">
-              <div
-                class="py-1"
-                role="menu"
-                aria-orientation="vertical"
-                aria-labelledby="options-menu">
-                <span
-                  class="block w-full text-left px-4 py-2 text-sm text-gray-700">{$_('select-language')}</span>
-                <button
-                  on:click={() => {
-                    generateSponsoringContract('de');
-                  }}
-                  type="submit"
-                  class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900 inline-flex"
-                  role="menuitem">
-                  {$_('german')}
-                </button>
-                <button
-                  on:click={() => {
-                    generateSponsoringContract('en');
-                  }}
-                  type="submit"
-                  class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900 inline-flex"
-                  role="menuitem">
-                  {$_('english')}
-                </button>
-              </div>
-            </div>
-          {/if}
-        </div>
         {#if store.state.jwtinfo.userdetails.permissions.includes('RUNNER:IMPORT')}
           <button
             on:click={() => {

src/components/orgs/OrgOverview.svelte

@@ -1,5 +1,6 @@
 <script>
   import { getLocaleFromNavigator, _ } from "svelte-i18n";
+  import GenerateSponsoringContracts from "../runners/GenerateSponsoringContracts.svelte";
   let modal_open = false;
   let delete_org = {};
   import { RunnerOrganizationService } from "@odit/lfk-client-js";
@@ -9,7 +10,8 @@
   import ConfirmOrgDeletion from "./ConfirmOrgDeletion.svelte";
   $: searchvalue = "";
   $: active_deletes = [];
-  $: sponsoring_contracts_download_open = false;
+  $: sponsoring_contracts_show = current_organizations.some((r) => r.is_selected === true);
+  $: generate_orgs = current_organizations.filter((r) => r.is_selected === true);
   export let current_organizations = [];
 
   const promise = RunnerOrganizationService.runnerOrganizationControllerGetAll().then(
@@ -17,72 +19,6 @@
       current_organizations = val;
     }
   );
-
-  document.addEventListener("click", function (e) {
-    if (
-      e.target.parentNode?.parentNode?.id != "sponsoring:dropdown" &&
-      e.target.parentNode?.parentNode?.id != "sponsoring:dropdown:menu"
-    ) {
-      sponsoring_contracts_download_open = false;
-    }
-  });
-
-  async function generateSponsoringContract(locale) {
-    sponsoring_contracts_download_open = false;
-    const orgs = current_organizations.filter((r) => r.is_selected === true);
-    const toast = Toastify({
-      text: $_("generating-pdfs"),
-      duration: -1,
-    }).showToast();
-    let count = 0;
-    for await (const o of orgs) {
-      const runners = await RunnerOrganizationService.runnerOrganizationControllerGetRunners(
-        o.id
-      );
-      fetch(
-        `${config.baseurl}/documents/contracts?locale=${locale}&download=true&key=${config.documentserver_key}`,
-        {
-          method: "POST",
-          headers: {
-            "Content-Type": "application/json",
-          },
-          body: JSON.stringify(runners),
-        }
-      )
-        .then((response) => {
-          if (response.status != "200") {
-            toast.hideToast();
-            Toastify({
-              text: $_("pdf-generation-failed"),
-              duration: 3500,
-              backgroundColor:
-                "linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
-            }).showToast();
-          } else {
-            return response.blob();
-          }
-        })
-        .then((blob) => {
-          count++;
-          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();
-          if (count === orgs.length) {
-            toast.hideToast();
-            Toastify({
-              text: $_("pdfs-successfully-generated"),
-              duration: 3500,
-              backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-            }).showToast();
-          }
-        })
-        .catch((err) => {});
-    }
-  }
 </script>
 
 <ConfirmOrgDeletion
@@ -111,56 +47,9 @@
         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)}
+        <GenerateSponsoringContracts
-        <div id="sponsoring:dropdown" class="relative inline-block">
+            bind:sponsoring_contracts_show
-          <div>
+            bind:generate_orgs />
-            <button
-              on:click={() => {
-                sponsoring_contracts_download_open = !sponsoring_contracts_download_open;
-              }}
-              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 inline-flex"
-              id="options-menu"
-              aria-haspopup="true"
-              aria-expanded="true">
-              {$_('generate-sponsoring-contracts')}
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="-mr-1 ml-2 h-5 w-5"><path fill="none" d="M0 0h24v24H0z"/><path fill="currentColor" d="M3 19h18v2H3v-2zm10-5.83l6.07-6.07 1.42 1.41L12 17 3.52 8.52l1.4-1.42L11 13.17V2h2v11.17z"/></svg>
-            </button>
-          </div>
-          {#if sponsoring_contracts_download_open}
-            <div
-              class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5"
-              id="sponsoring:dropdown:menu">
-              <div
-                class="py-1"
-                role="menu"
-                aria-orientation="vertical"
-                aria-labelledby="options-menu">
-                <span
-                  class="block w-full text-left px-4 py-2 text-sm text-gray-700">{$_('select-language')}</span>
-                <button
-                  on:click={() => {
-                    generateSponsoringContract('de');
-                  }}
-                  type="submit"
-                  class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900 inline-flex"
-                  role="menuitem">
-                  {$_('german')}
-                </button>
-                <button
-                  on:click={() => {
-                    generateSponsoringContract('en');
-                  }}
-                  type="submit"
-                  class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900 inline-flex"
-                  role="menuitem">
-                  {$_('english')}
-                </button>
-              </div>
-            </div>
-          {/if}
-        </div>
-        {/if}
       </div>
       <div
         class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll">