AddRunnerModal - improved team select

ref #13

src/components/AddRunnerModal.svelte

@@ -2,7 +2,11 @@
   import { _ } from "svelte-i18n";
   import { clickOutside } from "./outsideclick";
   import { focusTrap } from "svelte-focus-trap";
-  import { RunnerService, RunnerTeamService } from "@odit/lfk-client-js";
+  import {
+    RunnerService,
+    RunnerTeamService,
+    RunnerOrganizationService,
+  } from "@odit/lfk-client-js";
   import isEmail from "validator/es/lib/isEmail";
   import isMobilePhone from "validator/es/lib/isMobilePhone";
   import Toastify from "toastify-js";
@@ -14,9 +18,13 @@
   let middlename_input;
   let phone_input;
   let email_input;
-  let groups = [];
+  let teams = [];
   RunnerTeamService.runnerTeamControllerGetAll().then((val) => {
-    groups = val;
+    teams = val;
+  });
+  let orgs = [];
+  RunnerOrganizationService.runnerOrganizationControllerGetAll().then((val) => {
+    orgs = val;
   });
   function focus(el) {
     el.focus();
@@ -146,11 +154,11 @@
             </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 Runner
+                {$_('create-a-new-runner')}
               </h3>
               <div class="mt-2 mb-6">
                 <p class="text-sm text-gray-500">
-                  Please provide the required information to add a new runner.
+                  {$_('please-provide-the-required-information-to-add-a-new-runner')}
                 </p>
               </div>
               <div class="grid grid-cols-6 gap-6">
@@ -215,13 +223,20 @@
                 <div class="col-span-6">
                   <label
                     for="team"
-                    class="block text-sm font-medium text-gray-700">Team</label>
+                    class="block text-sm font-medium text-gray-700">{$_('team')}</label>
                   <select
                     name="team"
                     bind:value={selected_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 groups as g}
-                      <option value={g.id}>{g.name}</option>
+                    {#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>
@@ -243,8 +258,7 @@
                   {#if !isPhoneValidOrEmpty}
                     <span
                       class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
-                      the provided phone number is invalid.<br />please enter a
-                      valid international number...
+                      {$_('the-provided-phone-number-is-invalid-less-than-br-greater-than-please-enter-a-valid-international-number')}
                     </span>
                   {/if}
                 </div>