🧹 RunnerDetail cleanup + i18n 🌎

ref #13

src/components/RunnerDetail.svelte

@@ -6,19 +6,13 @@
   import Toastify from "toastify-js";
   import PromiseError from "./PromiseError.svelte";
   import isEmail from "validator/es/lib/isEmail";
-  export let params;
   const runner_promise = RunnerService.runnerControllerGetOne(params.runnerid);
   let data_loaded = false;
+  export let params;
   $: delete_triggered = false;
   $: original_data = {};
   $: editable = {};
-  runner_promise.then((data) => {
-    data_loaded = true;
-    original_data = Object.assign(original_data, data);
-    editable = data;
-  });
   $: changes_performed = !lodashIsEqual(original_data, editable);
-
   $: isEmailValid =
     (editable.email || "") === "" ||
     (editable.email && isEmail(editable.email || ""));
@@ -26,6 +20,11 @@
   $: isLastnameValid = editable.lastname !== "";
   $: save_enabled =
     changes_performed && isFirstnameValid && isLastnameValid && isEmailValid;
+  runner_promise.then((data) => {
+    data_loaded = true;
+    original_data = Object.assign(original_data, data);
+    editable = data;
+  });
   function submit() {
     if (data_loaded === true && save_enabled) {
       Toastify({
@@ -60,7 +59,7 @@
 
 {#await runner_promise}
   <!--  -->
-{:then user}
+{:then}
   <section class="container p-5 select-none">
     <div class="flex flex-row mb-4">
       <div class="w-full">
@@ -108,13 +107,12 @@
       {original_data.firstname}
       {original_data.middlename || ''}
       {original_data.lastname}
-      <span data-id="user_actions_${editable.id}">
+      <span data-id="runner_actions_${editable.id}">
         {#if store.state.jwtinfo.userdetails.permissions.includes('RUNNER:DELETE')}
           {#if delete_triggered}
             <button
               on:click={deleteRunner}
-              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
+              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-deletion')}</button>
-              Deletion</button>
             <button
               on:click={() => {
                 delete_triggered = !delete_triggered;
@@ -127,8 +125,7 @@
                 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
+              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-runner')}</button>
-              Runner</button>
           {/if}
         {/if}
         {#if !delete_triggered}
@@ -228,7 +225,7 @@
         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">Distance</span>
+      <span class="font-medium text-gray-700">{$_('distance')}</span>
       <br />
       <span class="text-gray-700">{original_data.distance} km</span>
     </div>

src/locales/en.json

@@ -14,6 +14,7 @@
     "changelog": "Changelog",
     "close": "Close",
     "confirm-delete": "Confirm Delete",
+    "confirm-deletion": "Confirm Deletion",
     "contact": "Contact",
     "count_organizations": "# Organizations",
     "count_teams": "# Teams",
@@ -45,9 +46,11 @@
         "an_error_happened_while_fetching_the_data": "An error happened while fetching the data"
     },
     "delete-organization": "Delete Organization",
+    "delete-runner": "Delete Runner",
     "delete-team": "Delete Team",
     "delete-user": "Delete User",
     "dependency_name": "Name",
+    "distance": "Distance",
     "dont-have-your-email-connected": "Don't have your email connected?",
     "dont-panic-were-resetting-it": "Don't panic, we're resetting it ✌",
     "drag-and-drop-your-files-or": "Drag & Drop your files or",