From 84a9cf069a4aa0940eaacc87ea67e745deabe939 Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp.dormann1@gmail.com>
Date: Fri, 15 Jan 2021 22:49:16 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20UX=20-=20ConfirmOrgDeletion=20cance?=
 =?UTF-8?q?l=20event=20reflection=20in=20datatable?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ref #16
---
 src/components/ConfirmOrgDeletion.svelte | 14 +++++----
 src/components/OrgDetail.svelte          | 32 ++++++++++-----------
 src/components/OrgOverview.svelte        | 36 ++++++++++++++----------
 3 files changed, 45 insertions(+), 37 deletions(-)

diff --git a/src/components/ConfirmOrgDeletion.svelte b/src/components/ConfirmOrgDeletion.svelte
index 43c73d0d..9f2d4831 100644
--- a/src/components/ConfirmOrgDeletion.svelte
+++ b/src/components/ConfirmOrgDeletion.svelte
@@ -4,8 +4,14 @@
   import { focusTrap } from "svelte-focus-trap";
   import { RunnerOrganisationService } from "@odit/lfk-client-js";
   import Toastify from "toastify-js";
+  import { createEventDispatcher } from "svelte";
   export let modal_open;
   export let delete_org;
+  const dispatch = createEventDispatcher();
+  function cancelDelete() {
+    modal_open = false;
+    dispatch("cancelDelete", { id: delete_org.id });
+  }
   function deleteOrg() {
     RunnerOrganisationService.runnerOrganisationControllerRemove(
       delete_org.id,
@@ -30,9 +36,7 @@
     class="fixed z-10 inset-0 overflow-y-auto"
     use:focusTrap
     use:clickOutside
-    on:click_outside={() => {
-      modal_open = false;
-    }}>
+    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">
@@ -84,9 +88,7 @@
             Confirm, delete organization and associated teams+runners.
           </button>
           <button
-            on:click={() => {
-              modal_open = false;
-            }}
+            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 organization
diff --git a/src/components/OrgDetail.svelte b/src/components/OrgDetail.svelte
index 70a57642..c1e69614 100644
--- a/src/components/OrgDetail.svelte
+++ b/src/components/OrgDetail.svelte
@@ -22,22 +22,22 @@
   let modal_open = false;
   let delete_org = {};
   function deleteOrganisation() {
-    RunnerOrganisationService.runnerOrganisationControllerRemove(
-      original.id,
-      false
-    )
-      .then((resp) => {
-        Toastify({
-          text: "Organization deleted",
-          duration: 500,
-          backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-        }).showToast();
-        location.replace("./");
-      })
-      .catch((err) => {
-        modal_open = true;
-        delete_org = original;
-      });
+    // RunnerOrganisationService.runnerOrganisationControllerRemove(
+    //   original.id,
+    //   false
+    // )
+    //   .then((resp) => {
+    //     Toastify({
+    //       text: "Organization deleted",
+    //       duration: 500,
+    //       backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
+    //     }).showToast();
+    //     location.replace("./");
+    //   })
+    //   .catch((err) => {
+    modal_open = true;
+    delete_org = original;
+    // });
   }
   function submit() {
     if (data_loaded === true && save_enabled) {
diff --git a/src/components/OrgOverview.svelte b/src/components/OrgOverview.svelte
index 33d14d95..c536b106 100644
--- a/src/components/OrgOverview.svelte
+++ b/src/components/OrgOverview.svelte
@@ -19,7 +19,13 @@
   );
 </script>
 
-<ConfirmOrgDeletion bind:modal_open bind:delete_org />
+<ConfirmOrgDeletion
+  on:cancelDelete={(event) => {
+    modal_open = false;
+    active_deletes[event.detail.id] = false;
+  }}
+  bind:modal_open
+  bind:delete_org />
 {#if store.state.jwtinfo.userdetails.permissions.includes('ORGANISATION:GET')}
   {#await promise}
     <div
@@ -116,20 +122,20 @@
                         Delete</button>
                       <button
                         on:click={() => {
-                          RunnerOrganisationService.runnerOrganisationControllerRemove(o.id, false)
-                            .then((resp) => {
-                              current_organizations = current_organizations.filter((obj) => obj.id !== o.id);
-                              Toastify({
-                                text: 'Organization deleted',
-                                duration: 500,
-                                backgroundColor:
-                                  'linear-gradient(to right, #00b09b, #96c93d)',
-                              }).showToast();
-                            })
-                            .catch((err) => {
-                              modal_open = true;
-                              delete_org = o;
-                            });
+                          // RunnerOrganisationService.runnerOrganisationControllerRemove(o.id, false)
+                          //   .then((resp) => {
+                          //     current_organizations = current_organizations.filter((obj) => obj.id !== o.id);
+                          //     Toastify({
+                          //       text: 'Organization deleted',
+                          //       duration: 500,
+                          //       backgroundColor:
+                          //         'linear-gradient(to right, #00b09b, #96c93d)',
+                          //     }).showToast();
+                          //   })
+                          //   .catch((err) => {
+                          modal_open = true;
+                          delete_org = o;
+                          // });
                         }}
                         tabindex="0"
                         class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">Confirm