From e24b84e7095fc929d1c160646dfaa01a260f229b Mon Sep 17 00:00:00 2001
From: Nicolai Ort <info@nicolai-ort.com>
Date: Sun, 28 Feb 2021 16:33:17 +0100
Subject: [PATCH] New download buttons for everyone (that can generate
 sponsoring contracts)

ref #84
---
 src/components/orgs/OrgDetail.svelte          | 56 ++++++++++++++++---
 src/components/orgs/OrgOverview.svelte        | 56 ++++++++++++++++---
 src/components/runners/RunnerDetail.svelte    |  2 -
 src/components/runners/RunnersOverview.svelte | 56 ++++++++++++++++---
 src/components/teams/TeamDetail.svelte        | 54 ++++++++++++++++--
 src/components/teams/TeamsOverview.svelte     | 56 ++++++++++++++++---
 6 files changed, 241 insertions(+), 39 deletions(-)

diff --git a/src/components/orgs/OrgDetail.svelte b/src/components/orgs/OrgDetail.svelte
index ce547d0e..fe32bded 100644
--- a/src/components/orgs/OrgDetail.svelte
+++ b/src/components/orgs/OrgDetail.svelte
@@ -24,7 +24,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;
+  
   const promise = RunnerOrganizationService.runnerOrganizationControllerGetOne(
     params.orgid
   ).then((value) => {
@@ -167,12 +168,53 @@
     <div class="mb-8 text-3xl font-extrabold leading-tight">
       {original_object.name}
       <span data-id="org_actions_${editable.id}">
-        <button
-          on:click={async () => {
-            generateSponsoringContract('de');
-          }}
-          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>
+        <div id="sponsoring:dropdown" class="relative inline-block">
+          <div>
+            <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">
+              <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={() => {
diff --git a/src/components/orgs/OrgOverview.svelte b/src/components/orgs/OrgOverview.svelte
index 07b78da1..74d095ce 100644
--- a/src/components/orgs/OrgOverview.svelte
+++ b/src/components/orgs/OrgOverview.svelte
@@ -9,6 +9,7 @@
   import ConfirmOrgDeletion from "./ConfirmOrgDeletion.svelte";
   $: searchvalue = "";
   $: active_deletes = [];
+  $: sponsoring_contracts_download_open = false;
   export let current_organizations = [];
 
   const promise = RunnerOrganizationService.runnerOrganizationControllerGetAll().then(
@@ -102,14 +103,53 @@
         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 () => {
-              generateSponsoringContract('de');
-            }}
-            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>
+        <div id="sponsoring:dropdown" class="relative inline-block">
+          <div>
+            <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">
+              <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
diff --git a/src/components/runners/RunnerDetail.svelte b/src/components/runners/RunnerDetail.svelte
index f7d77c44..128bf1ef 100644
--- a/src/components/runners/RunnerDetail.svelte
+++ b/src/components/runners/RunnerDetail.svelte
@@ -219,7 +219,6 @@
                     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')}
-                    <!-- <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 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>
                   <button
                     on:click={() => {
@@ -229,7 +228,6 @@
                     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')}
-                    <!-- <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 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>
               </div>
diff --git a/src/components/runners/RunnersOverview.svelte b/src/components/runners/RunnersOverview.svelte
index 5bdd4c89..321bd563 100644
--- a/src/components/runners/RunnersOverview.svelte
+++ b/src/components/runners/RunnersOverview.svelte
@@ -20,6 +20,7 @@
   $: filter__teams = selectedFilter_teams || [];
   $: filter__orgs = selectedFilter || [];
   $: filterGroupIDs = filter__teams.concat(filter__orgs).map((i) => i.value);
+  $: sponsoring_contracts_download_open = false;
   $: teams = [];
   $: orgs = [];
   $: mappedteams = teams.map(function (g) {
@@ -128,14 +129,53 @@
       </div>
       <div class="h-12">
         {#if current_runners.some((r) => r.is_selected === true)}
-          <button
-            on:click={() => {
-              generateSponsoringContract('de');
-            }}
-            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>
+        <div id="sponsoring:dropdown" class="relative inline-block">
+          <div>
+            <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">
+              <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
diff --git a/src/components/teams/TeamDetail.svelte b/src/components/teams/TeamDetail.svelte
index 65b842df..8db931c2 100644
--- a/src/components/teams/TeamDetail.svelte
+++ b/src/components/teams/TeamDetail.svelte
@@ -24,6 +24,7 @@
   $: save_enabled = !data_changed;
   $: data_loaded = false;
   $: data_changed = JSON.stringify(teamdata) === JSON.stringify(original);
+  $: sponsoring_contracts_download_open = false;
   //
   const promise = RunnerTeamService.runnerTeamControllerGetOne(
     params.teamid
@@ -149,12 +150,53 @@
     <div class="mb-8 text-3xl font-extrabold leading-tight">
       {original.name}
       <span data-id="org_actions_${teamdata.id}">
-        <button
-          on:click={async () => {
-            generateSponsoringContract('de');
-          }}
-          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>
+        <div id="sponsoring:dropdown" class="relative inline-block">
+          <div>
+            <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">
+              <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={() => {
diff --git a/src/components/teams/TeamsOverview.svelte b/src/components/teams/TeamsOverview.svelte
index 20dc436a..28c311d2 100644
--- a/src/components/teams/TeamsOverview.svelte
+++ b/src/components/teams/TeamsOverview.svelte
@@ -8,6 +8,7 @@
   import ConfirmTeamDeletion from "./ConfirmTeamDeletion.svelte";
   $: searchvalue = "";
   $: active_deletes = [];
+  $: sponsoring_contracts_download_open = false;
   export let current_teams = [];
   let modal_open = false;
   let delete_team = {};
@@ -102,14 +103,53 @@
         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 () => {
-              generateSponsoringContract('de');
-            }}
-            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>
+        <div id="sponsoring:dropdown" class="relative inline-block">
+          <div>
+            <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">
+              <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