✨ UX - ConfirmOrgDeletion cancel event reflection in datatable

ref #16

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={() => {
+    on:click_outside={cancelDelete}>
-      modal_open = false;
-    }}>
     <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={() => {
+            on:click={cancelDelete}
-              modal_open = false;
-            }}
             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

src/components/OrgDetail.svelte

@@ -22,22 +22,22 @@
   let modal_open = false;
   let delete_org = {};
   function deleteOrganisation() {
-    RunnerOrganisationService.runnerOrganisationControllerRemove(
+    // RunnerOrganisationService.runnerOrganisationControllerRemove(
-      original.id,
+    //   original.id,
-      false
+    //   false
-    )
+    // )
-      .then((resp) => {
+    //   .then((resp) => {
-        Toastify({
+    //     Toastify({
-          text: "Organization deleted",
+    //       text: "Organization deleted",
-          duration: 500,
+    //       duration: 500,
-          backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
+    //       backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-        }).showToast();
+    //     }).showToast();
-        location.replace("./");
+    //     location.replace("./");
-      })
+    //   })
-      .catch((err) => {
+    //   .catch((err) => {
-        modal_open = true;
+    modal_open = true;
-        delete_org = original;
+    delete_org = original;
-      });
+    // });
   }
   function submit() {
     if (data_loaded === true && save_enabled) {

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)
+                          // RunnerOrganisationService.runnerOrganisationControllerRemove(o.id, false)
-                            .then((resp) => {
+                          //   .then((resp) => {
-                              current_organizations = current_organizations.filter((obj) => obj.id !== o.id);
+                          //     current_organizations = current_organizations.filter((obj) => obj.id !== o.id);
-                              Toastify({
+                          //     Toastify({
-                                text: 'Organization deleted',
+                          //       text: 'Organization deleted',
-                                duration: 500,
+                          //       duration: 500,
-                                backgroundColor:
+                          //       backgroundColor:
-                                  'linear-gradient(to right, #00b09b, #96c93d)',
+                          //         'linear-gradient(to right, #00b09b, #96c93d)',
-                              }).showToast();
+                          //     }).showToast();
-                            })
+                          //   })
-                            .catch((err) => {
+                          //   .catch((err) => {
-                              modal_open = true;
+                          modal_open = true;
-                              delete_org = o;
+                          delete_org = o;
-                            });
+                          // });
                         }}
                         tabindex="0"
                         class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">Confirm