Merge pull request 'feature/16-org-management' (#35) from feature/16-org-management into dev

Reviewed-on: #35
close #16

src/App.svelte

@@ -49,6 +49,7 @@
   import UserDetail from "./components/UserDetail.svelte";
   OpenAPI.BASE = config.baseurl;
   import { register as registerSW } from "./swmodule";
+  import TeamDetail from "./components/TeamDetail.svelte";
   store.init();
   // registerSW();
 </script>
@@ -85,8 +86,13 @@
         <Route path="/runners">
           <Runners />
         </Route>
-        <Route path="/teams">
-          <Teams />
+        <Route path="/teams/*">
+          <Route path="/">
+            <Teams />
+          </Route>
+          <Route path="/:teamid" let:params>
+            <TeamDetail {params} />
+          </Route>
         </Route>
         <Route path="/orgs/*">
           <Route path="/">

src/components/AddTeamModal.svelte

@@ -0,0 +1,181 @@
+<script>
+  import { _ } from "svelte-i18n";
+  import { clickOutside } from "./outsideclick";
+  import { focusTrap } from "svelte-focus-trap";
+  import {
+    RunnerOrganisationService,
+    RunnerTeamService,
+  } from "@odit/lfk-client-js";
+  import Toastify from "toastify-js";
+  export let modal_open;
+  export let current_teams;
+  let teamname_input_dom;
+  function focus(el) {
+    el.focus();
+  }
+  $: teamname = "";
+  $: processed_last_submit = true;
+  $: isTeamNameValid = teamname.trim().length !== 0;
+  $: createbtnenabled = isTeamNameValid;
+  (function () {
+    document.onkeydown = function (e) {
+      e = e || window.event;
+      if (e.key === "Escape") {
+        modal_open = false;
+      }
+      if (e.keyCode === 13) {
+        if (createbtnenabled === true) {
+          createbtnenabled = false;
+          submit();
+        }
+      }
+    };
+  })();
+  $: parentGroup = undefined;
+  $: orgs = [];
+  RunnerOrganisationService.runnerOrganisationControllerGetAll().then((val) => {
+    orgs = val;
+  });
+  function submit() {
+    if (processed_last_submit === true) {
+      processed_last_submit = false;
+      const toast = Toastify({
+        text: "Team is being added...",
+        duration: -1,
+      }).showToast();
+      RunnerTeamService.runnerTeamControllerPost({
+        parentGroup,
+        name: teamname,
+      })
+        .then((result) => {
+          teamname = "";
+          modal_open = false;
+          //
+          Toastify({
+            text: "Team added",
+            duration: 500,
+            backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
+          }).showToast();
+          current_teams.push(result);
+          current_teams = current_teams;
+        })
+        .catch((err) => {
+          //
+        })
+        .finally(() => {
+          processed_last_submit = true;
+          //
+          toast.hideToast();
+        });
+    }
+  }
+</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">
+                Create a new team
+              </h3>
+              <div class="mt-2 mb-6">
+                <p class="text-sm text-gray-500">
+                  Please provide the required information to add a new team.
+                </p>
+              </div>
+              <div class="grid grid-cols-6 gap-6">
+                <div class="col-span-6">
+                  <label
+                    for="firstname"
+                    class="block text-sm font-medium text-gray-700">{$_('team-name')}</label>
+                  <input
+                    use:focus
+                    autocomplete="off"
+                    placeholder={$_('team-name')}
+                    class:border-red-500={!isTeamNameValid}
+                    class:focus:border-red-500={!isTeamNameValid}
+                    class:focus:ring-red-500={!isTeamNameValid}
+                    bind:value={teamname}
+                    bind:this={teamname_input_dom}
+                    type="text"
+                    name="firstname"
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
+                  {#if !isTeamNameValid}
+                    <span
+                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+                      team name is required
+                    </span>
+                  {/if}
+                </div>
+                <div class="col-span-6">
+                  <label
+                    for="firstname"
+                    class="block text-sm font-medium text-gray-700">{$_('organization')}</label>
+                  <select
+                    bind:value={parentGroup}
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 dark:bg-gray-900 dark:text-gray-100 rounded-md p-2">
+                    {#each orgs as t}
+                      <option value={t.id}>{t.name}</option>
+                    {/each}
+                  </select>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+          <button
+            disabled={!createbtnenabled}
+            class:opacity-50={!createbtnenabled}
+            on:click={submit}
+            type="button"
+            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
+            {$_('create')}
+          </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')}
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+{/if}

src/components/ConfirmOrgDeletion.svelte

@@ -0,0 +1,100 @@
+<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";
+  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,
+      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={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 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={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
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+{/if}

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
-    )
-      .then((resp) => {
-        location.replace("./");
-      })
-      .catch((err) => {});
+    // 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) {
@@ -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">

src/components/OrgOverview.svelte

@@ -1,9 +1,13 @@
 <script>
   import { _ } from "svelte-i18n";
+  let modal_open = false;
+  let delete_org = {};
   import { RunnerOrganisationService } from "@odit/lfk-client-js";
   import "gridjs/dist/theme/mermaid.css";
   import store from "../store";
   import OrgsEmptyState from "./OrgsEmptyState.svelte";
+  import Toastify from "toastify-js";
+  import ConfirmOrgDeletion from "./ConfirmOrgDeletion.svelte";
   $: searchvalue = "";
   $: active_deletes = [];
   export let current_organizations = [];
@@ -15,6 +19,13 @@
   );
 </script>
 
+<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
@@ -111,12 +122,19 @@
                         Delete</button>
                       <button
                         on:click={() => {
-                          RunnerOrganisationService.runnerOrganisationControllerRemove(o.id, true)
+                          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) => {
-                              // error deleting user
+                              modal_open = true;
+                              delete_org = o;
                             });
                         }}
                         tabindex="0"

src/components/TeamDetail.svelte

@@ -0,0 +1,210 @@
+<script>
+  import {
+    RunnerOrganisationService,
+    RunnerTeamService,
+  } from "@odit/lfk-client-js";
+  import { _ } from "svelte-i18n";
+  import Toastify from "toastify-js";
+  import store from "../store";
+  import PromiseError from "./PromiseError.svelte";
+  $: delete_triggered = false;
+  $: save_enabled = !data_changed;
+  export let params;
+  let teamdata = {};
+  let original = {};
+  $: data_loaded = false;
+  $: data_changed = JSON.stringify(teamdata) === JSON.stringify(original);
+  const promise = RunnerTeamService.runnerTeamControllerGetOne(
+    params.teamid
+  ).then((value) => {
+    data_loaded = true;
+    teamdata = Object.assign(teamdata, value);
+    original = Object.assign(original, value);
+  });
+  $: orgs = [];
+  const orgs_promise = RunnerOrganisationService.runnerOrganisationControllerGetAll().then(
+    (val) => {
+      console.log(val);
+      orgs = val;
+      val.forEach((t) => {
+        console.log(t.name);
+      });
+    }
+  );
+  function deleteTeam() {
+    RunnerTeamService.runnerTeamControllerRemove(original.id, true)
+      .then((resp) => {
+        location.replace("./");
+      })
+      .catch((err) => {});
+  }
+  function submit() {
+    if (data_loaded === true && save_enabled) {
+      Toastify({
+        text: "updating team",
+        duration: 2500,
+      }).showToast();
+      teamdata.parentGroup = teamdata.parentGroup.id;
+      RunnerTeamService.runnerTeamControllerPut(original.id, teamdata)
+        .then((resp) => {
+          Object.assign(original, teamdata);
+          original = teamdata;
+          Object.assign(original, teamdata);
+          //
+          Toastify({
+            text: "updated team",
+            duration: 2500,
+            backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
+          }).showToast();
+        })
+        .catch((err) => {});
+    } else {
+    }
+  }
+</script>
+
+{#if data_loaded}
+  <section class="container p-5">
+    <div class="mb-8 text-3xl font-extrabold leading-tight">
+      {original.name}
+      <span data-id="org_actions_${teamdata.id}">
+        {#if store.state.jwtinfo.userdetails.permissions.includes('TEAM:DELETE')}
+          {#if delete_triggered}
+            <button
+              on:click={deleteTeam}
+              class="w-full 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')}</button>
+            <button
+              on:click={() => {
+                delete_triggered = !delete_triggered;
+              }}
+              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-400 text-base font-medium text-white sm:w-auto sm:text-sm">{$_('cancel')}</button>
+          {/if}
+          {#if !delete_triggered}
+            <button
+              on:click={() => {
+                delete_triggered = true;
+              }}
+              type="button"
+              class="w-full 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">{$_('delete-team')}</button>
+          {/if}
+        {/if}
+        {#if !delete_triggered}
+          <button
+            on:click={submit}
+            disabled={!save_enabled}
+            class:opacity-50={!save_enabled}
+            type="button"
+            class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">{$_('save-changes')}</button>
+        {/if}
+      </span>
+    </div>
+    <div class="flex flex-row mb-4">
+      <div class="w-full">
+        <nav class="w-full flex">
+          <ol class="list-none flex flex-row items-center justify-start">
+            <li class="mr-2 flex items-center">
+              <svg
+                stroke="currentColor"
+                fill="none"
+                stroke-width="2"
+                viewBox="0 0 24 24"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                class="h-3 w-3 stroke-current"
+                height="1em"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"><path
+                  d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
+                <polyline points="9 22 9 12 15 12 15 22" /></svg>
+            </li>
+            <li class="flex items-center">
+              <a class="mr-2" href="/">Home</a><svg
+                stroke="currentColor"
+                fill="none"
+                stroke-width="2"
+                viewBox="0 0 24 24"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                class="h-3 w-3 mr-2 stroke-current"
+                height="1em"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"><line
+                  x1="5"
+                  y1="12"
+                  x2="19"
+                  y2="12" />
+                <polyline points="12 5 19 12 12 19" /></svg>
+            </li>
+            <li class="mr-2 flex items-center">
+              <svg
+                class="flex-shrink-0 w-5 h-5 mr-2"
+                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>
+            </li>
+            <li class="flex items-center">
+              <a class="mr-2" href="./">Teams</a><svg
+                stroke="currentColor"
+                fill="none"
+                stroke-width="2"
+                viewBox="0 0 24 24"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                class="h-3 w-3 mr-2 stroke-current"
+                height="1em"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"><line
+                  x1="5"
+                  y1="12"
+                  x2="19"
+                  y2="12" />
+                <polyline points="12 5 19 12 12 19" /></svg>
+            </li>
+            <li class="flex items-center">
+              <span class="mr-2">Team-Details #{params.teamid}</span>
+            </li>
+          </ol>
+        </nav>
+      </div>
+    </div>
+    <div class="text-sm w-full">
+      <label for="name" class="font-medium text-gray-700">Name</label>
+      <input
+        autocomplete="off"
+        placeholder="Name"
+        type="text"
+        bind:value={teamdata.name}
+        name="name"
+        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 dark:bg-gray-900 dark:text-gray-100 rounded-md p-2" />
+    </div>
+    <div class="text-sm w-full">
+      <label
+        for="contact"
+        class="font-medium text-gray-700">{$_('contact')}</label>
+      <input
+        autocomplete="off"
+        placeholder={$_('contact')}
+        type="text"
+        bind:value={teamdata.contact}
+        name="contact"
+        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 dark:bg-gray-900 dark:text-gray-100 rounded-md p-2" />
+    </div>
+    <select
+      bind:value={teamdata.parentGroup}
+      class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 dark:bg-gray-900 dark:text-gray-100 rounded-md p-2">
+      {#each orgs as o}
+        <option value={o.id}>{o.name}</option>
+      {/each}
+    </select>
+  </section>
+{:else}
+  {#await promise}
+    team detail is being loaded...
+  {:catch error}
+    <PromiseError />
+  {/await}
+{/if}

src/components/Teams.svelte

@@ -1,10 +1,31 @@
 <script>
   import { _ } from "svelte-i18n";
+  import store from "../store";
+  import AddTeamModal from "./AddTeamModal.svelte";
+  export let modal_open = false;
+  import TeamsOverview from "./TeamsOverview.svelte";
+  console.log(store.state.jwtinfo.userdetails.permissions);
+  let current_teams=[];
 </script>
 
 <section class="container p-5">
   <span class="mb-1 text-3xl font-extrabold leading-tight">
     {$_('teams')}
+    {#if store.state.jwtinfo.userdetails.permissions.includes('USER:CREATE')}
+      <button
+        on:click={() => {
+          modal_open = true;
+        }}
+        type="button"
+        class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
+        Create Team
+      </button>
+    {/if}
   </span>
   <p class="mb-8 text-lg text-gray-500">everything is more fun together 🏃‍♂️🏃‍♀️🏃‍♂️</p>
+  <TeamsOverview bind:current_teams />
 </section>
+
+{#if store.state.jwtinfo.userdetails.permissions.includes('USER:CREATE')}
+  <AddTeamModal bind:current_teams bind:modal_open />
+{/if}

src/components/TeamsEmptyState.svelte

@@ -0,0 +1,15 @@
+<script>
+  import { _ } from "svelte-i18n";
+  import AddTeamModal from "./AddTeamModal.svelte";
+  let modal_open = false;
+  let current_teams = [];
+</script>
+
+<div class="text-center items-center justify-center">
+  <p class="mb-16 text-lg text-gray-500">
+    <span class="font-bold">There are no teams added yet.</span><br />
+    <span>Add your first team</span>
+  </p>
+</div>
+
+<AddTeamModal bind:modal_open bind:current_teams />

src/components/TeamsOverview.svelte

@@ -0,0 +1,160 @@
+<script>
+  import { t, _ } from "svelte-i18n";
+  import Toastify from "toastify-js";
+  import { RunnerTeamService } from "@odit/lfk-client-js";
+  const teams_promise = RunnerTeamService.runnerTeamControllerGetAll();
+  import "gridjs/dist/theme/mermaid.css";
+  import { users as usersstore } from "../store.js";
+  import store from "../store";
+  import TeamsEmptyState from "./TeamsEmptyState.svelte";
+  $: searchvalue = "";
+  $: active_deletes = [];
+  export let current_teams = [];
+  usersstore.subscribe((val) => {
+    current_teams = val;
+  });
+  teams_promise.then((data) => {
+    usersstore.set(data);
+  });
+</script>
+
+{#if store.state.jwtinfo.userdetails.permissions.includes('TEAM:GET')}
+  {#await teams_promise}
+    <div
+      class="bg-teal-lightest border-t-4 border-teal rounded-b text-teal-darkest px-4 py-3 shadow-md my-2"
+      role="alert">
+      <p class="font-bold">teams are being loaded...</p>
+      <p class="text-sm">{$_('this-might-take-a-moment')}</p>
+    </div>
+  {:then}
+    {#if current_teams.length === 0}
+      <TeamsEmptyState />
+    {:else}
+      <input
+        type="search"
+        bind:value={searchvalue}
+        placeholder={$_('datatable.search')}
+        aria-label={$_('datatable.search')}
+        class="gridjs-input gridjs-search-input mb-4" />
+      <div
+        class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll">
+        <table class="divide-y divide-gray-200 w-full">
+          <thead class="bg-gray-50">
+            <tr>
+              <th
+                scope="col"
+                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                Name
+              </th>
+              <th
+                scope="col"
+                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                {$_('organization')}
+              </th>
+              <th
+                scope="col"
+                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                Contact
+              </th>
+              <th scope="col" class="relative px-6 py-3">
+                <span class="sr-only">Action</span>
+              </th>
+            </tr>
+          </thead>
+          <tbody class="divide-y divide-gray-200">
+            {#each current_teams as t}
+              {#if Object.values(t)
+                .toString()
+                .toLowerCase()
+                .includes(searchvalue)}
+                <tr data-rowid="team_{t.id}">
+                  <td class="px-6 py-4 whitespace-nowrap">
+                    <div class="flex items-center">
+                      <div class="ml-4">
+                        <div
+                          class="text-sm font-medium text-gray-900 dark:text-gray-100">
+                          {t.name}
+                        </div>
+                      </div>
+                    </div>
+                  </td>
+                  <td class="px-6 py-4 whitespace-nowrap">
+                    <div class="flex items-center">
+                      <div class="ml-4">
+                        <div
+                          class="text-sm font-medium text-gray-900 dark:text-gray-100">
+                          {#if t.parentGroup}
+                            {t.parentGroup.name}
+                          {:else}no organization specified{/if}
+                        </div>
+                      </div>
+                    </div>
+                  </td>
+                  <td class="px-6 py-4 whitespace-nowrap">
+                    <div class="flex items-center">
+                      <div class="ml-4">
+                        <div
+                          class="text-sm font-medium text-gray-900 dark:text-gray-100">
+                          {#if t.contact}
+                            {JSON.stringify(t.contact)}
+                          {:else}no contact specified{/if}
+                        </div>
+                      </div>
+                    </div>
+                  </td>
+                  {#if active_deletes[t.id] === true}
+                    <td
+                      class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+                      <button
+                        on:click={() => {
+                          active_deletes[t.id] = false;
+                        }}
+                        tabindex="0"
+                        class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer">Cancel
+                        Delete</button>
+                      <button
+                        on:click={() => {
+                          RunnerTeamService.runnerTeamControllerRemove(t.id, true)
+                            .then((resp) => {
+                              current_teams = current_teams.filter((obj) => obj.id !== t.id);
+                            })
+                            .catch((err) => {
+                              // error deleting user
+                            });
+                        }}
+                        tabindex="0"
+                        class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">Confirm
+                        Delete</button>
+                    </td>
+                  {:else}
+                    <td
+                      class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+                      <a
+                        href="./{t.id}"
+                        class="text-indigo-600 hover:text-indigo-900">Edit</a>
+                      {#if store.state.jwtinfo.userdetails.permissions.includes('TEAM:DELETE')}
+                        <button
+                          on:click={() => {
+                            active_deletes[t.id] = true;
+                          }}
+                          tabindex="0"
+                          class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">Delete</button>
+                      {/if}
+                    </td>
+                  {/if}
+                </tr>
+              {/if}
+            {/each}
+          </tbody>
+        </table>
+      </div>
+    {/if}
+  {:catch error}
+    <div class="text-white px-6 py-4 border-0 rounded relative mb-4 bg-red-500">
+      <span class="inline-block align-middle mr-8">
+        <b class="capitalize">{$_('general_promise_error')}</b>
+        {error}
+      </span>
+    </div>
+  {/await}
+{/if}

src/components/UsersOverview.svelte

@@ -10,7 +10,6 @@
   export let current_users=[];
   $: advanced_search = false;
   usersstore.subscribe((val) => {
-    userscache = val;
     current_users=val;
   });
   users_promise.then((data) => {

src/locales/en.json

@@ -40,6 +40,7 @@
         "an_error_happened_while_fetching_the_data": "An error happened while fetching the data"
     },
     "delete-organization": "Delete Organization",
+    "delete-team": "Delete Team",
     "delete-user": "Delete User",
     "dependency_name": "Name",
     "dont-have-your-email-connected": "Don't have your email connected?",
@@ -94,6 +95,7 @@
     "minimum-lap-time-in-s": "minimum lap time in s",
     "no-license-text-could-be-found": "No license text could be found 😢",
     "no-tracks-added-yet": "there are no tracks added yet.",
+    "organization": "Organization",
     "organizations": "Organizations",
     "orgs": "Orgs",
     "oss_credit_description": "We use a lot of open source software on these projects, and would like to thank the following projects and contributors who help make open source great!",
@@ -111,6 +113,7 @@
     "settings": "Settings",
     "signout": "Sign out",
     "stats-are-being-loaded": "stats are being loaded...",
+    "team-name": "Team name",
     "teams": "Teams",
     "this-might-take-a-moment": "This might take a moment 👀",
     "total-distance": "total distance",