From cbcce336d68b0752daeaf4b5608c43ff6fa11c0d Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp.dormann1@gmail.com>
Date: Fri, 15 Jan 2021 23:02:40 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=92=20ConfirmTeamDeletion=20in=20Teams?=
 =?UTF-8?q?Overview?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ref #14
---
 src/components/ConfirmTeamDeletion.svelte | 97 +++++++++++++++++++++++
 src/components/TeamsOverview.svelte       | 19 ++++-
 2 files changed, 115 insertions(+), 1 deletion(-)
 create mode 100644 src/components/ConfirmTeamDeletion.svelte

diff --git a/src/components/ConfirmTeamDeletion.svelte b/src/components/ConfirmTeamDeletion.svelte
new file mode 100644
index 00000000..7d7c8e3b
--- /dev/null
+++ b/src/components/ConfirmTeamDeletion.svelte
@@ -0,0 +1,97 @@
+<script>
+  import { _ } from "svelte-i18n";
+  import { clickOutside } from "./outsideclick";
+  import { focusTrap } from "svelte-focus-trap";
+  import { RunnerTeamService } from "@odit/lfk-client-js";
+  import Toastify from "toastify-js";
+  import { createEventDispatcher } from "svelte";
+  export let modal_open;
+  export let delete_team;
+  const dispatch = createEventDispatcher();
+  function cancelDelete() {
+    modal_open = false;
+    dispatch("cancelDelete", { id: delete_team.id });
+  }
+  function deleteTeam() {
+    RunnerTeamService.runnerTeamControllerRemove(delete_team.id, true)
+      .then((resp) => {
+        Toastify({
+          text: "Team deleted",
+          duration: 500,
+          backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
+        }).showToast();
+        location.replace("./");
+      })
+      .catch((err) => {
+        //
+      });
+  }
+</script>
+
+{#if modal_open}
+  <div
+    class="fixed z-10 inset-0 overflow-y-auto"
+    use:focusTrap
+    use:clickOutside
+    on:click_outside={cancelDelete}>
+    <div
+      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
+      <div class="fixed inset-0 transition-opacity" aria-hidden="true">
+        <div
+          class="absolute inset-0 bg-gray-500 opacity-75"
+          data-id="modal_backdrop" />
+      </div>
+      <span
+        class="hidden sm:inline-block sm:align-middle sm:h-screen"
+        aria-hidden="true">&#8203;</span>
+      <div
+        class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="modal-headline">
+        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+          <div class="sm:flex sm:items-start">
+            <div
+              class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10">
+              <svg
+                class="h-6 w-6 text-blue-600"
+                fill="currentColor"
+                width="24"
+                height="24"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 640 512"><path
+                  fill="currentColor"
+                  d="M96 224c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm448 0c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm32 32h-64c-17.6 0-33.5 7.1-45.1 18.6 40.3 22.1 68.9 62 75.1 109.4h66c17.7 0 32-14.3 32-32v-32c0-35.3-28.7-64-64-64zm-256 0c61.9 0 112-50.1 112-112S381.9 32 320 32 208 82.1 208 144s50.1 112 112 112zm76.8 32h-8.3c-20.8 10-43.9 16-68.5 16s-47.6-6-68.5-16h-8.3C179.6 288 128 339.6 128 403.2V432c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48v-28.8c0-63.6-51.6-115.2-115.2-115.2zm-223.7-13.4C161.5 263.1 145.6 256 128 256H64c-35.3 0-64 28.7-64 64v32c0 17.7 14.3 32 32 32h65.9c6.3-47.4 34.9-87.3 75.2-109.4z" /></svg>
+            </div>
+            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+              <h3 class="text-lg leading-6 font-medium text-gray-900">
+                Attention!
+              </h3>
+              <div class="mt-2 mb-6">
+                <p class="text-sm text-gray-500">
+                  Do you want to delete the team
+                  {delete_team.name}?<br />All associated runners will be
+                  deleted too!
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+          <button
+            on:click={deleteTeam}
+            type="button"
+            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm">
+            Confirm, delete team and associated runners.
+          </button>
+          <button
+            on:click={cancelDelete}
+            type="button"
+            class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
+            Cancel, keep team
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+{/if}
diff --git a/src/components/TeamsOverview.svelte b/src/components/TeamsOverview.svelte
index d8400b8d..71e2143b 100644
--- a/src/components/TeamsOverview.svelte
+++ b/src/components/TeamsOverview.svelte
@@ -7,9 +7,12 @@
   import { users as usersstore } from "../store.js";
   import store from "../store";
   import TeamsEmptyState from "./TeamsEmptyState.svelte";
+  import ConfirmTeamDeletion from "./ConfirmTeamDeletion.svelte";
   $: searchvalue = "";
   $: active_deletes = [];
   export let current_teams = [];
+  let modal_open = false;
+  let delete_team = {};
   usersstore.subscribe((val) => {
     current_teams = val;
   });
@@ -18,6 +21,13 @@
   });
 </script>
 
+<ConfirmTeamDeletion
+  on:cancelDelete={(event) => {
+    modal_open = false;
+    active_deletes[event.detail.id] = false;
+  }}
+  bind:modal_open
+  bind:delete_team />
 {#if store.state.jwtinfo.userdetails.permissions.includes('TEAM:GET')}
   {#await teams_promise}
     <div
@@ -117,9 +127,16 @@
                           RunnerTeamService.runnerTeamControllerRemove(t.id, true)
                             .then((resp) => {
                               current_teams = current_teams.filter((obj) => obj.id !== t.id);
+                              Toastify({
+                                text: 'Organization deleted',
+                                duration: 500,
+                                backgroundColor:
+                                  'linear-gradient(to right, #00b09b, #96c93d)',
+                              }).showToast();
                             })
                             .catch((err) => {
-                              // error deleting user
+                              modal_open = true;
+                              delete_team = t;
                             });
                         }}
                         tabindex="0"