🏃‍♂️ support for runner group edit

ref #13

src/components/RunnerDetail.svelte

@@ -2,7 +2,11 @@
   import { _ } from "svelte-i18n";
   import lodashIsEqual from "lodash.isequal";
   import store from "../store";
-  import { RunnerService } from "@odit/lfk-client-js";
+  import {
+    RunnerService,
+    RunnerTeamService,
+    RunnerOrganizationService,
+  } from "@odit/lfk-client-js";
   import Toastify from "toastify-js";
   import PromiseError from "./PromiseError.svelte";
   import isEmail from "validator/es/lib/isEmail";
@@ -23,7 +27,16 @@
   runner_promise.then((data) => {
     data_loaded = true;
     original_data = Object.assign(original_data, data);
-    editable = data;
+    original_data.group = original_data.group.id;
+    editable = Object.assign(editable, original_data);
+  });
+  let orgs = [];
+  RunnerOrganizationService.runnerOrganizationControllerGetAll().then((val) => {
+    orgs = val;
+  });
+  let teams = [];
+  RunnerTeamService.runnerTeamControllerGetAll().then((val) => {
+    teams = val;
   });
   function submit() {
     if (data_loaded === true && save_enabled) {
@@ -31,7 +44,6 @@
         text: "Updating runner...",
         duration: 2500,
       }).showToast();
-      editable.group = editable.group.id;
       RunnerService.runnerControllerPut(original_data.id, editable)
         .then((resp) => {
           Object.assign(original_data, editable);
@@ -224,6 +236,24 @@
         name="phone"
         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" />
     </div>
+    <div class="text-sm w-full">
+      <span class="font-medium text-gray-700">{$_('group')}</span>
+      <select
+        bind:value={editable.group}
+        name="team"
+        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">
+        {#each teams as team}
+          <option value={team.id}>
+            {team.parentGroup.name}
+            &gt;
+            {team.name}
+          </option>
+        {/each}
+        {#each orgs as org}
+          <option value={org.id}>{org.name}</option>
+        {/each}
+      </select>
+    </div>
     <div class="text-sm w-full">
       <span class="font-medium text-gray-700">{$_('distance')}</span>
       <br />