From c2bd696bfedcfdaf0b13eb165d800691d58ca010 Mon Sep 17 00:00:00 2001
From: Nicolai Ort <info@nicolai-ort.com>
Date: Sun, 28 Feb 2021 17:39:21 +0100
Subject: [PATCH] Implemented rough outside click handler for the dropdown

ref #84
---
 src/components/orgs/OrgDetail.svelte          |  11 +-
 src/components/orgs/OrgOverview.svelte        |  12 +-
 src/components/runners/RunnerDetail.svelte    |  11 +-
 src/components/runners/RunnersOverview.svelte | 111 ++++++++++--------
 src/components/teams/TeamDetail.svelte        |  11 +-
 src/components/teams/TeamsOverview.svelte     |  11 +-
 6 files changed, 116 insertions(+), 51 deletions(-)

diff --git a/src/components/orgs/OrgDetail.svelte b/src/components/orgs/OrgDetail.svelte
index 2b4abe3e..ea459cf0 100644
--- a/src/components/orgs/OrgDetail.svelte
+++ b/src/components/orgs/OrgDetail.svelte
@@ -55,6 +55,14 @@
   });
   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,
@@ -185,7 +193,8 @@
           </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">
+              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"
diff --git a/src/components/orgs/OrgOverview.svelte b/src/components/orgs/OrgOverview.svelte
index be0dbcac..31431a94 100644
--- a/src/components/orgs/OrgOverview.svelte
+++ b/src/components/orgs/OrgOverview.svelte
@@ -18,6 +18,15 @@
     }
   );
 
+  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);
@@ -120,7 +129,8 @@
           </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">
+              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"
diff --git a/src/components/runners/RunnerDetail.svelte b/src/components/runners/RunnerDetail.svelte
index 128bf1ef..9be0137f 100644
--- a/src/components/runners/RunnerDetail.svelte
+++ b/src/components/runners/RunnerDetail.svelte
@@ -33,6 +33,14 @@
     original_data.group = original_data.group.id;
     editable = Object.assign(editable, original_data);
   });
+  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;
+    }
+  });
   let orgs = [];
   RunnerOrganizationService.runnerOrganizationControllerGetAll().then((val) => {
     orgs = val;
@@ -203,7 +211,8 @@
             </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">
+                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"
diff --git a/src/components/runners/RunnersOverview.svelte b/src/components/runners/RunnersOverview.svelte
index c2324204..a9e00dc3 100644
--- a/src/components/runners/RunnersOverview.svelte
+++ b/src/components/runners/RunnersOverview.svelte
@@ -31,6 +31,14 @@
       return { value: g.id, label: g.name };
     })
     .concat(mappedteams);
+  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;
+    }
+  });
   RunnerTeamService.runnerTeamControllerGetAll().then((val) => {
     teams = val;
   });
@@ -129,53 +137,64 @@
       </div>
       <div class="h-12">
         {#if current_runners.some((r) => r.is_selected === true)}
-        <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 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}
-        </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
diff --git a/src/components/teams/TeamDetail.svelte b/src/components/teams/TeamDetail.svelte
index 5485ad97..546af829 100644
--- a/src/components/teams/TeamDetail.svelte
+++ b/src/components/teams/TeamDetail.svelte
@@ -44,6 +44,14 @@
   GroupContactService.groupContactControllerGetAll().then((val) => {
     contacts = 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;
+    }
+  });
   function deleteTeam() {
     RunnerTeamService.runnerTeamControllerRemove(original.id, false)
       .then((resp) => {
@@ -167,7 +175,8 @@
           </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">
+              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"
diff --git a/src/components/teams/TeamsOverview.svelte b/src/components/teams/TeamsOverview.svelte
index 82ebf1aa..4aee5e49 100644
--- a/src/components/teams/TeamsOverview.svelte
+++ b/src/components/teams/TeamsOverview.svelte
@@ -18,6 +18,14 @@
   teams_promise.then((data) => {
     usersstore.set(data);
   });
+  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 teams = current_teams.filter((r) => r.is_selected === true);
@@ -120,7 +128,8 @@
           </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">
+              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"