🔒 ConfirmOrgDeletion in OrgDetail

ref #16

src/components/ConfirmOrgDeletion.svelte

@@ -0,0 +1,98 @@
+<script>
+  import { _ } from "svelte-i18n";
+  import { clickOutside } from "./outsideclick";
+  import { focusTrap } from "svelte-focus-trap";
+  import { RunnerOrganisationService } from "@odit/lfk-client-js";
+  import Toastify from "toastify-js";
+  export let modal_open;
+  export let delete_org;
+  function deleteOrg() {
+    RunnerOrganisationService.runnerOrganisationControllerRemove(
+      delete_org.id,
+      true
+    )
+      .then((resp) => {
+        Toastify({
+          text: "Organization 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={() => {
+      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">
+        <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 organization
+                  {delete_org.name}?<br />All associated teams and 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={deleteOrg}
+            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 organization and associated teams+runners.
+          </button>
+          <button
+            on:click={() => {
+              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
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+{/if}

src/components/Dashboard.svelte

@@ -1,53 +1,11 @@
 <script>
   import { _ } from "svelte-i18n";
-  import { active } from "tinro";
   import localForage from "localforage";
   import { router } from "tinro";
-
-  import store from "../store";
   import NoComponentLoaded from "./NoComponentLoaded.svelte";
-  import { AuthService, OpenAPI } from "@odit/lfk-client-js";
-
-  let activePage = "dashboard";
+  import { AuthService } from "@odit/lfk-client-js";
   let dropdown1 = false;
-  let navOpen = false;
-  function ismobile() {
-    let check = false;
-    (function (a) {
-      if (
-        /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(
-          a
-        ) ||
-        /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(
-          a.substr(0, 4)
-        )
-      )
-        check = true;
-    })(navigator.userAgent || navigator.vendor || window.opera);
-    const aspectratio=window.innerWidth/window.innerHeight;
-    if(aspectratio<=0.765){
-      check=true;
-    }
-    return check;
-  }
-  $: mobile = ismobile();
-  window.addEventListener('resize', function(){
-    const aspectratio=window.innerWidth/window.innerHeight;
-    if(aspectratio<=0.765){
-      navOpen=false;
-      mobile=true;
-    }else{
-      navOpen=true;
-      mobile=false;
-
-    }
-  });
-//   $: if (mobile===true) {
-//     console.log("changed to mobile");
-// }
-//   $: if (mobile===false) {
-//     console.log("changed to md");
-// }
+  $: navOpen = false;
   function logout() {
     localForage.clear();
     location.replace("/");
@@ -56,18 +14,15 @@
 
 <section class="min-h-screen bg-gray-50">
   <nav
-    class:hidden={!navOpen && mobile}
+    class:-translate-x-full={!navOpen}
+    class:translate-x-0={navOpen}
     class="select-none fixed top-0 left-0 z-20 h-full pb-10 overflow-x-hidden overflow-y-auto transition origin-left transform border-r w-60 md:translate-x-0 bg-gray-50">
     <a href="/" class="flex items-center px-4 py-5">
-      <img
-        src="/lfk-logo.png"
-        alt="Logo"
-        class="h-10" />
+      <img src="/lfk-logo.png" alt="Logo" class="h-10" />
       <h3 class="text-lg">Lauf für Kaya! Admin</h3>
     </a>
     <nav class="text-sm font-medium text-gray-600" aria-label="Main Navigation">
       <a
-        class:dark:bg-gray-900={$router.path === '/'}
         class:bg-gray-100={$router.path === '/'}
         class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
         href="/">
@@ -82,7 +37,6 @@
         <span>{$_('dashboard-title')}</span>
       </a>
       <a
-        class:dark:bg-gray-900={$router.path.includes('/orgs/')}
         class:bg-gray-100={$router.path.includes('/orgs/')}
         class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
         href="/orgs/">
@@ -98,7 +52,6 @@
         <span>{$_('orgs')}</span>
       </a>
       <a
-        class:dark:bg-gray-900={$router.path === '/users/'}
         class:bg-gray-100={$router.path === '/users/'}
         class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
         href="/users/">
@@ -114,7 +67,6 @@
         <span>{$_('users')}</span>
       </a>
       <a
-        class:dark:bg-gray-900={$router.path === '/runners/'}
         class:bg-gray-100={$router.path === '/runners/'}
         class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
         href="/runners/">
@@ -130,7 +82,6 @@
         <span>{$_('runners')}</span>
       </a>
       <a
-        class:dark:bg-gray-900={$router.path === '/teams/'}
         class:bg-gray-100={$router.path === '/teams/'}
         class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
         href="/teams/">
@@ -146,7 +97,6 @@
         <span>{$_('teams')}</span>
       </a>
       <a
-        class:dark:bg-gray-900={$router.path === '/tracks/'}
         class:bg-gray-100={$router.path === '/tracks/'}
         class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
         href="/tracks/">
@@ -162,8 +112,7 @@
         <span>{$_('tracks')}</span>
       </a>
       <a
-        class:dark:bg-gray-900={activePage === 'blub'}
-        class:bg-gray-100={activePage === 'blub'}
+        class:bg-gray-100={false}
         class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
         href="#">
         <svg
@@ -182,8 +131,7 @@
       <div>
         <div
           tabindex="0"
-          class:dark:bg-gray-900={activePage === 'blub'}
-          class:bg-gray-100={activePage === 'blub'}
+          class:bg-gray-100={false}
           class="flex items-center justify-between px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
           role="button"
           on:click={() => {
@@ -258,7 +206,6 @@
         <span>{$_('changelog')}</span>
       </a>
       <a
-        class:dark:bg-gray-900={$router.path === '/settings/'}
         class:bg-gray-100={$router.path === '/settings/'}
         class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
         href="/settings/">
@@ -275,7 +222,6 @@
         <span>{$_('settings')}</span>
       </a>
       <a
-        class:dark:bg-gray-900={$router.path === '/about/'}
         class:bg-gray-100={$router.path === '/about/'}
         class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
         href="/about/">
@@ -312,65 +258,10 @@
     </nav>
   </nav>
   <div class="ml-0 transition md:ml-60">
-    <header
-      class="flex items-center justify-between w-full px-4 border-b h-14">
-      <button
-        on:click={() => {
-          navOpen = !navOpen;
-        }}
-        class="block btn btn-light md:hidden">
-        <span class="sr-only">Menu</span>
-        <svg
-          class="w-4 h-4"
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 20 20"
-          fill="currentColor">
-          <path
-            fill-rule="evenodd"
-            d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
-            clip-rule="evenodd" />
-        </svg>
-      </button>
-      <!-- <div class="hidden -ml-3 form-icon md:block w-96">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke="currentColor">
-          <path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
-        </svg>
-        <input
-          class="border-0 form-input"
-          placeholder="Search for articles..." />
-      </div> -->
-      <div class="flex items-end">
-        <a href="#" class="flex text-gray-500">
-          <svg
-            class="flex-shrink-0 w-5 h-5"
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 20 20"
-            fill="currentColor">
-            <path
-              d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z" />
-          </svg>
-        </a>
-        <a href="/profile/" class="ml-4">
-          <img
-            class="h-8 w-8 rounded-full"
-            src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
-            alt="Profile Picture" />
-        </a>
-      </div>
-    </header>
     <slot>
       <NoComponentLoaded />
     </slot>
   </div>
-  <!-- Sidebar Backdrop -->
   <div
     on:click={() => {
       navOpen = false;

src/components/OrgDetail.svelte

@@ -3,6 +3,7 @@
   import { _ } from "svelte-i18n";
   import Toastify from "toastify-js";
   import store from "../store";
+  import ConfirmOrgDeletion from "./ConfirmOrgDeletion.svelte";
   import PromiseError from "./PromiseError.svelte";
   $: delete_triggered = false;
   $: save_enabled = !data_changed;
@@ -18,15 +19,25 @@
     orgdata = Object.assign(orgdata, value);
     original = Object.assign(original, value);
   });
+  let modal_open = false;
+  let delete_org = {};
   function deleteOrganisation() {
     RunnerOrganisationService.runnerOrganisationControllerRemove(
       original.id,
-      true
+      false
     )
       .then((resp) => {
+        Toastify({
+          text: "Organization deleted",
+          duration: 500,
+          backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
+        }).showToast();
         location.replace("./");
       })
-      .catch((err) => {});
+      .catch((err) => {
+        modal_open = true;
+        delete_org = original;
+      });
   }
   function submit() {
     if (data_loaded === true && save_enabled) {
@@ -55,6 +66,7 @@
   }
 </script>
 
+<ConfirmOrgDeletion bind:modal_open bind:delete_org />
 {#if data_loaded}
   <section class="container p-5">
     <div class="mb-8 text-3xl font-extrabold leading-tight">