Merge branch 'dev' into feature/69-translation-keys

# Conflicts:
#	src/components/orgs/OrgDetail.svelte
#	src/components/runners/RunnersOverview.svelte

src/components/contacts/ContactDetail.svelte

@@ -31,7 +31,7 @@
     isEmailValid &&
     isPhoneValidOrEmpty &&
     ((isAddress1Valid && iszipcodevalid && iscityvalid) ||
-      address_checked === false);
+    editable.address_checked === false);
   const promise = GroupContactService.groupContactControllerGetOne(
     params.contact
   ).then((data) => {
@@ -42,6 +42,15 @@
     original_data.groups = original_data.groups.map((g) => g.id);
     editable.address_checked = editable.address.address1 !== null;
     original_data.address_checked = editable.address.address1 !== null;
+    if(editable.address_checked===false){
+      editable.address = {
+        address1: "",
+        address2: "",
+        city: "",
+        postalcode: "",
+        country: ""
+      }
+    }
   });
   RunnerOrganizationService.runnerOrganizationControllerGetAll().then((val) => {
     orgs = val;
@@ -64,7 +73,7 @@
       }).showToast();
       editable.address.country = "DE";
       if (editable.address_checked === false) {
-        editable.address = {};
+        editable.address = null;
       }
       if (editable.email) editable.email = editable.email;
       if (editable.phone) editable.phone = editable.phone;

src/components/orgs/AddOrgModal.svelte

@@ -13,7 +13,24 @@
   $: name = "";
   $: processed_last_submit = true;
   $: isOrgnameValid = name.trim().length !== 0;
-  $: createbtnenabled = isOrgnameValid;
+  $: isAddress1Valid = address_input1_value.trim().length !== 0;
+  $: iszipcodevalid = address_zipcode_value.trim().length !== 0;
+  $: iscityvalid = address_city_value.trim().length !== 0;
+  $: createbtnenabled =
+    isOrgnameValid &&
+    ((isAddress1Valid && iszipcodevalid && iscityvalid) ||
+      address_checked === false);
+  $: address_input1_value = "";
+  $: address_input2_value = "";
+  $: address_zipcode_value = "";
+  $: address_city_value = "";
+  $: address_checked = true;
+
+  let address_input1;
+  let address_input2;
+  let address_zipcode;
+  let address_city;
+
   (() => {
     document.onkeydown = (e) => {
       e = e || window.event;
@@ -35,9 +52,19 @@
         text: $_("organization-is-being-added"),
         duration: -1,
       }).showToast();
+      let address = {};
+      if (address_checked === true) {
+        address = {
+          address1: address_input1_value,
+          address2: address_input2_value || "",
+          postalcode: address_zipcode_value,
+          city: address_city_value,
+          country: "DE",
+        };
+      }
       RunnerOrganizationService.runnerOrganizationControllerPost({
         name,
-        address: undefined,
+        address: address,
         contact: undefined,
       })
         .then((result) => {
@@ -128,7 +155,105 @@
                     </span>
                   {/if}
                 </div>
-              </div>
+                <div class="flex items-start">
+                  <div class="flex items-center h-5">
+                    <input
+                      bind:checked={address_checked}
+                      id="comments"
+                      name="comments"
+                      type="checkbox"
+                      class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded" />
+                  </div>
+                  <div class="ml-3 text-sm">
+                    <label
+                      for="comments"
+                      class="font-medium text-gray-700">Address</label>
+                  </div>
+                </div>
+              {#if address_checked === true}
+                <div class="col-span-6">
+                  <label
+                    for="address1"
+                    class="block text-sm font-medium text-gray-700">Address</label>
+                  <input
+                    autocomplete="off"
+                    placeholder="Address"
+                    class:border-red-500={!isAddress1Valid}
+                    class:focus:border-red-500={!isAddress1Valid}
+                    class:focus:ring-red-500={!isAddress1Valid}
+                    bind:value={address_input1_value}
+                    bind:this={address_input1}
+                    type="text"
+                    name="address1"
+                    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 !isAddress1Valid}
+                    <span
+                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+                      Address is required
+                    </span>
+                  {/if}
+                </div>
+                <div class="col-span-6">
+                  <label
+                    for="address2"
+                    class="block text-sm font-medium text-gray-700">Apartment,
+                    suite, etc.</label>
+                  <input
+                    autocomplete="off"
+                    placeholder="Apartment, suite, etc."
+                    bind:value={address_input2_value}
+                    bind:this={address_input2}
+                    type="text"
+                    name="address2"
+                    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="col-span-6">
+                  <label
+                    for="zipcode"
+                    class="block text-sm font-medium text-gray-700">ZIP/ postal
+                    code</label>
+                  <input
+                    autocomplete="off"
+                    placeholder="ZIP/ postal code"
+                    class:border-red-500={!iszipcodevalid}
+                    class:focus:border-red-500={!iszipcodevalid}
+                    class:focus:ring-red-500={!iszipcodevalid}
+                    bind:value={address_zipcode_value}
+                    bind:this={address_zipcode}
+                    type="text"
+                    name="zipcode"
+                    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 !iszipcodevalid}
+                    <span
+                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+                      Valid zipcode/ postal code is required
+                    </span>
+                  {/if}
+                </div>
+                <div class="col-span-6">
+                  <label
+                    for="city"
+                    class="block text-sm font-medium text-gray-700">City</label>
+                  <input
+                    autocomplete="off"
+                    placeholder="City"
+                    class:border-red-500={!iscityvalid}
+                    class:focus:border-red-500={!iscityvalid}
+                    class:focus:ring-red-500={!iscityvalid}
+                    bind:value={address_city_value}
+                    bind:this={address_city}
+                    type="text"
+                    name="city"
+                    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 !iscityvalid}
+                    <span
+                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+                      Valid city is required
+                    </span>
+                  {/if}
+                </div>
+              {/if}
+            </div>
             </div>
           </div>
         </div>

src/components/orgs/OrgDetail.svelte

@@ -1,258 +1,361 @@
-<script>
+<script>
-  import {
+  import {
-    GroupContactService,
+    GroupContactService,
-    RunnerOrganizationService,
+    RunnerOrganizationService,
-  } from "@odit/lfk-client-js";
+  } from "@odit/lfk-client-js";
-  import { _ } from "svelte-i18n";
+  import { _ } from "svelte-i18n";
-  import Toastify from "toastify-js";
+  import Toastify from "toastify-js";
-  import store from "../../store";
+  import store from "../../store";
-  import ConfirmOrgDeletion from "./ConfirmOrgDeletion.svelte";
+  import ConfirmOrgDeletion from "./ConfirmOrgDeletion.svelte";
-  import ImportRunnerModal from "../runners/ImportRunnerModal.svelte";
+  import ImportRunnerModal from "../runners/ImportRunnerModal.svelte";
-  import PromiseError from "../base/PromiseError.svelte";
+  import PromiseError from "../base/PromiseError.svelte";
-  $: delete_triggered = false;
+  $: delete_triggered = false;
-  $: save_enabled = !data_changed;
+  $: address_valid_or_none =
-  export let params;
+    (isAddress1Valid && iszipcodevalid && iscityvalid) ||
-  let orgdata = {};
+    editable.address_checked === false;
-  let original = {};
+  $: save_enabled = data_changed && address_valid_or_none;
-  let contacts = [];
+  let original = "";
-  $: data_loaded = false;
+  let original_object = {};
-  $: data_changed = JSON.stringify(orgdata) === JSON.stringify(original);
+  let contacts = [];
-  const promise = RunnerOrganizationService.runnerOrganizationControllerGetOne(
+  export let params;
-    params.orgid
+  $: editable = {};
-  ).then((value) => {
+  $: data_loaded = false;
-    data_loaded = true;
+  $: data_changed = !(JSON.stringify(editable) === original);
-    if (value.contact) {
+  $: isAddress1Valid = editable.address?.address1?.trim().length !== 0;
-      if (value.contact !== "null") {
+  $: iszipcodevalid = editable.address?.postalcode?.trim().length !== 0;
-        value.contact = value.contact.id;
+  $: iscityvalid = editable.address?.city?.trim().length !== 0;
-      }
+
-    }
+  const promise = RunnerOrganizationService.runnerOrganizationControllerGetOne(
-    orgdata = Object.assign(orgdata, value);
+    params.orgid
-    original = Object.assign(original, value);
+  ).then((value) => {
-  });
+    data_loaded = true;
-  GroupContactService.groupContactControllerGetAll().then((val) => {
+    if (value.contact) {
-    contacts = val;
+      if (value.contact !== "null") {
-  });
+        value.contact = value.contact.id;
-  let modal_open = false;
+      }
-  let delete_org = {};
+    }
-  function deleteOrganization() {
+    value.address_checked = value.address.address1 !== null;
-    RunnerOrganizationService.runnerOrganizationControllerRemove(
+    if(value.address_checked===false){
-      original.id,
+      value.address = {
-      false
+        address1: "",
-    )
+        address2: "",
-      .then((resp) => {
+        city: "",
-        Toastify({
+        postalcode: "",
-          text: $_("organization-deleted"),
+        country: ""
-          duration: 500,
+      }
-          backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
+    }
-        }).showToast();
+    editable = Object.assign(editable, value);
-        location.replace("./");
+    editable = editable;
-      })
+    original_object = Object.assign(editable, value);
-      .catch((err) => {
+    original = JSON.stringify(value);
-        modal_open = true;
+  });
-        delete_org = original;
+  GroupContactService.groupContactControllerGetAll().then((val) => {
-      });
+    contacts = val;
-  }
+  });
-  function submit() {
+  let modal_open = false;
-    if (data_loaded === true && save_enabled) {
+  let delete_org = {};
-      Toastify({
+  function deleteOrganization() {
-        text: $_("updating-organization"),
+    RunnerOrganizationService.runnerOrganizationControllerRemove(
-        duration: 2500,
+      original_object.id,
-      }).showToast();
+      false
-      let postdata = orgdata;
+    )
-      postdata.contact = postdata.contact === "null" ? null : postdata.contact;
+      .then((resp) => {
-      RunnerOrganizationService.runnerOrganizationControllerPut(
+        Toastify({
-        original.id,
+          text: $_("organization-deleted"),
-        postdata
+          duration: 500,
-      )
+          backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-        .then((resp) => {
+        }).showToast();
-          Object.assign(original, orgdata);
+        location.replace("./");
-          original = orgdata;
+      })
-          Object.assign(original, orgdata);
+      .catch((err) => {
-          Toastify({
+        modal_open = true;
-            text: $_("updated-organization"),
+        delete_org = original_object;
-            duration: 2500,
+      });
-            backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
+  }
-          }).showToast();
+  function submit() {
-        })
+    if (data_loaded === true && save_enabled) {
-        .catch((err) => {});
+      Toastify({
-    } else {
+        text: $_("updating-organization"),
-    }
+        duration: 2500,
-  }
+      }).showToast();
-  export let import_modal_open = false;
+      let postdata = Object.assign({}, editable);
-</script>
+      if (postdata.address_checked === false) {
-
+        postdata.address = null;
-<ImportRunnerModal
+      }
-  on:cancelDelete={(event) => {
+      console.log(postdata)
-    import_modal_open = false;
+      postdata.contact = postdata.contact === "null" ? null : postdata.contact;
-  }}
+      RunnerOrganizationService.runnerOrganizationControllerPut(
-  current_runners={[]}
+        original_object.id,
-  passed_team={{}}
+        postdata
-  passed_orgs={[]}
+      )
-  passed_org={orgdata}
+        .then((resp) => {
-  opened_from="OrgDetail"
+          original = JSON.stringify(editable);
-  bind:import_modal_open />
+          Toastify({
-<ConfirmOrgDeletion bind:modal_open bind:delete_org />
+            text: $_("updated-organization"),
-{#if data_loaded}
+            duration: 2500,
-  <section class="container p-5">
+            backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-    <div class="mb-8 text-3xl font-extrabold leading-tight">
+          }).showToast();
-      {original.name}
+        })
-      <span data-id="org_actions_${orgdata.id}">
+        .catch((err) => {});
-        {#if store.state.jwtinfo.userdetails.permissions.includes('RUNNER:IMPORT')}
+    } else {
-          <button
+    }
-            on:click={() => {
+  }
-              import_modal_open = true;
+  export let import_modal_open = false;
-            }}
+</script>
-            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">
+<ImportRunnerModal
-            {$_('import-runners')}
+  on:cancelDelete={(event) => {
-          </button>
+    import_modal_open = false;
-        {/if}
+  }}
-        {#if store.state.jwtinfo.userdetails.permissions.includes('USER:DELETE')}
+  current_runners={[]}
-          {#if delete_triggered}
+  passed_team={{}}
-            <button
+  passed_orgs={[]}
-              on:click={deleteOrganization}
+  passed_org={editable}
-              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>
+  opened_from="OrgDetail"
-            <button
+  bind:import_modal_open />
-              on:click={() => {
+<ConfirmOrgDeletion bind:modal_open bind:delete_org />
-                delete_triggered = !delete_triggered;
+{#if data_loaded}
-              }}
+  <section class="container p-5">
-              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>
+    <div class="mb-8 text-3xl font-extrabold leading-tight">
-          {/if}
+      {original_object.name}
-          {#if !delete_triggered}
+      <span data-id="org_actions_${editable.id}">
-            <button
+        {#if store.state.jwtinfo.userdetails.permissions.includes('RUNNER:IMPORT')}
-              on:click={() => {
+          <button
-                delete_triggered = true;
+            on:click={() => {
-              }}
+              import_modal_open = 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-organization')}</button>
+            type="button"
-          {/if}
+            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">
-        {/if}
+            {$_('import-runners')}
-        {#if !delete_triggered}
+          </button>
-          <button
+        {/if}
-            on:click={submit}
+        {#if store.state.jwtinfo.userdetails.permissions.includes('USER:DELETE')}
-            disabled={!save_enabled}
+          {#if delete_triggered}
-            class:opacity-50={!save_enabled}
+            <button
-            type="button"
+              on:click={deleteOrganization}
-            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>
+              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>
-        {/if}
+            <button
-      </span>
+              on:click={() => {
-    </div>
+                delete_triggered = !delete_triggered;
-    <div class="flex flex-row mb-4">
+              }}
-      <div class="w-full">
+              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>
-        <nav class="w-full flex">
+          {/if}
-          <ol class="list-none flex flex-row items-center justify-start">
+          {#if !delete_triggered}
-            <li class="mr-2 flex items-center">
+            <button
-              <svg
+              on:click={() => {
-                stroke="currentColor"
+                delete_triggered = true;
-                fill="none"
+              }}
-                stroke-width="2"
+              type="button"
-                viewBox="0 0 24 24"
+              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-organization')}</button>
-                stroke-linecap="round"
+          {/if}
-                stroke-linejoin="round"
+        {/if}
-                class="h-3 w-3 stroke-current"
+        {#if !delete_triggered}
-                height="1em"
+          <button
-                width="1em"
+            on:click={submit}
-                xmlns="http://www.w3.org/2000/svg"><path
+            disabled={!save_enabled}
-                  d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
+            class:opacity-50={!save_enabled}
-                <polyline points="9 22 9 12 15 12 15 22" /></svg>
+            type="button"
-            </li>
+            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>
-            <li class="flex items-center">
+        {/if}
-              <a class="mr-2" href="/">{$_('home')}</a><svg
+      </span>
-                stroke="currentColor"
+    </div>
-                fill="none"
+    <div class="flex flex-row mb-4">
-                stroke-width="2"
+      <div class="w-full">
-                viewBox="0 0 24 24"
+        <nav class="w-full flex">
-                stroke-linecap="round"
+          <ol class="list-none flex flex-row items-center justify-start">
-                stroke-linejoin="round"
+            <li class="mr-2 flex items-center">
-                class="h-3 w-3 mr-2 stroke-current"
+              <svg
-                height="1em"
+                stroke="currentColor"
-                width="1em"
+                fill="none"
-                xmlns="http://www.w3.org/2000/svg"><line
+                stroke-width="2"
-                  x1="5"
+                viewBox="0 0 24 24"
-                  y1="12"
+                stroke-linecap="round"
-                  x2="19"
+                stroke-linejoin="round"
-                  y2="12" />
+                class="h-3 w-3 stroke-current"
-                <polyline points="12 5 19 12 12 19" /></svg>
+                height="1em"
-            </li>
+                width="1em"
-            <li class="mr-2 flex items-center">
+                xmlns="http://www.w3.org/2000/svg"><path
-              <svg
+                  d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
-                xmlns="http://www.w3.org/2000/svg"
+                <polyline points="9 22 9 12 15 12 15 22" /></svg>
-                viewBox="0 0 24 24"
+            </li>
-                width="24"
+            <li class="flex items-center">
-                height="24"><path fill="none" d="M0 0h24v24H0z" />
+              <a class="mr-2" href="/">{$_('home')}</a><svg
-                <path
+                stroke="currentColor"
-                  d="M21 20h2v2H1v-2h2V3a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v17zm-2 0V4H5v16h14zM8 11h3v2H8v-2zm0-4h3v2H8V7zm0 8h3v2H8v-2zm5 0h3v2h-3v-2zm0-4h3v2h-3v-2zm0-4h3v2h-3V7z" /></svg>
+                fill="none"
-            </li>
+                stroke-width="2"
-            <li class="flex items-center">
+                viewBox="0 0 24 24"
-              <a class="mr-2" href="./">{$_('organizations')}</a><svg
+                stroke-linecap="round"
-                stroke="currentColor"
+                stroke-linejoin="round"
-                fill="none"
+                class="h-3 w-3 mr-2 stroke-current"
-                stroke-width="2"
+                height="1em"
-                viewBox="0 0 24 24"
+                width="1em"
-                stroke-linecap="round"
+                xmlns="http://www.w3.org/2000/svg"><line
-                stroke-linejoin="round"
+                  x1="5"
-                class="h-3 w-3 mr-2 stroke-current"
+                  y1="12"
-                height="1em"
+                  x2="19"
-                width="1em"
+                  y2="12" />
-                xmlns="http://www.w3.org/2000/svg"><line
+                <polyline points="12 5 19 12 12 19" /></svg>
-                  x1="5"
+            </li>
-                  y1="12"
+            <li class="mr-2 flex items-center">
-                  x2="19"
+              <svg
-                  y2="12" />
+                xmlns="http://www.w3.org/2000/svg"
-                <polyline points="12 5 19 12 12 19" /></svg>
+                viewBox="0 0 24 24"
-            </li>
+                width="24"
-            <li class="flex items-center">
+                height="24"><path fill="none" d="M0 0h24v24H0z" />
-              <span class="mr-2">Org-Details #{params.orgid}</span>
+                <path
-            </li>
+                  d="M21 20h2v2H1v-2h2V3a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v17zm-2 0V4H5v16h14zM8 11h3v2H8v-2zm0-4h3v2H8V7zm0 8h3v2H8v-2zm5 0h3v2h-3v-2zm0-4h3v2h-3v-2zm0-4h3v2h-3V7z" /></svg>
-          </ol>
+            </li>
-        </nav>
+            <li class="flex items-center">
-      </div>
+              <a class="mr-2" href="./">{$_('organizations')}</a><svg
-    </div>
+                stroke="currentColor"
-    <div class="text-sm w-full">
+                fill="none"
-      <label for="name" class="font-medium text-gray-700">{$_('name')}</label>
+                stroke-width="2"
-      <input
+                viewBox="0 0 24 24"
-        autocomplete="off"
+                stroke-linecap="round"
-        placeholder={$_('name')}
+                stroke-linejoin="round"
-        type="text"
+                class="h-3 w-3 mr-2 stroke-current"
-        bind:value={orgdata.name}
+                height="1em"
-        name="name"
+                width="1em"
-        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" />
+                xmlns="http://www.w3.org/2000/svg"><line
-    </div>
+                  x1="5"
-    <div class="text-sm w-full">
+                  y1="12"
-      <label
+                  x2="19"
-        for="contact"
+                  y2="12" />
-        class="font-medium text-gray-700">{$_('contact')}</label>
+                <polyline points="12 5 19 12 12 19" /></svg>
-      <select
+            </li>
-        name="contact"
+            <li class="flex items-center">
-        bind:value={orgdata.contact}
+              <span class="mr-2">Org-Details #{params.orgid}</span>
-        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">
+            </li>
-        <option value="null">no contact</option>
+          </ol>
-        {#each contacts as c}
+        </nav>
-          <option value={c.id}>
+      </div>
-            {c.firstname}
+    </div>
-            {c.middlename || ''}
+    <div class="text-sm w-full">
-            {c.lastname}
+      <label for="name" class="font-medium text-gray-700">{$_('name')}</label>
-          </option>
+      <input
-        {/each}
+        autocomplete="off"
-      </select>
+        placeholder={$_('name')}
-    </div>
+        type="text"
-    <div class="text-sm w-full">
+        bind:value={editable.name}
-      <label
+        name="name"
-        for="address"
+        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" />
-        class="font-medium text-gray-700">{$_('address')}</label>
+    </div>
-      <input
+    <div class="text-sm w-full">
-        autocomplete="off"
+      <label
-        placeholder={$_('address')}
+        for="contact"
-        type="text"
+        class="font-medium text-gray-700">{$_('contact')}</label>
-        bind:value={orgdata.address}
+      <select
-        name="address"
+        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 rounded-md p-2" />
+        bind:value={editable.contact}
-    </div>
+        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">
-  </section>
+        <option value="null">no contact</option>
-{:else}
+        {#each contacts as c}
-  {#await promise}
+          <option value={c.id}>
-    {$_('organization-detail-is-being-loaded')}
+            {c.firstname}
-  {:catch error}
+            {c.middlename || ''}
-    <PromiseError />
+            {c.lastname}
-  {/await}
+          </option>
-{/if}
+        {/each}
+      </select>
+    </div>
+    <!--  -->
+    <div class="flex items-start mt-2">
+      <div class="flex items-center h-5">
+        <input
+          bind:checked={editable.address_checked}
+          id="comments"
+          name="comments"
+          type="checkbox"
+          class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded" />
+      </div>
+      <div class="ml-3 text-sm">
+        <label
+          for="comments"
+          class="font-medium text-gray-700">{$_('address')}</label>
+      </div>
+    </div>
+    {#if editable.address_checked === true}
+      <div class="col-span-6">
+        <label
+          for="address1"
+          class="block text-sm font-medium text-gray-700">{$_('address')}</label>
+        <input
+          autocomplete="off"
+          placeholder="Address"
+          class:border-red-500={!isAddress1Valid}
+          class:focus:border-red-500={!isAddress1Valid}
+          class:focus:ring-red-500={!isAddress1Valid}
+          bind:value={editable.address.address1}
+          type="text"
+          name="address1"
+          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 !isAddress1Valid}
+          <span
+            class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+            {$_('address-is-required')}
+          </span>
+        {/if}
+      </div>
+      <div class="col-span-6">
+        <label
+          for="address2"
+          class="block text-sm font-medium text-gray-700">{$_('apartment-suite-etc')}</label>
+        <input
+          autocomplete="off"
+          placeholder={$_('apartment-suite-etc')}
+          bind:value={editable.address.address2}
+          type="text"
+          name="address2"
+          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="col-span-6">
+        <label
+          for="zipcode"
+          class="block text-sm font-medium text-gray-700">{$_('zip-postal-code')}</label>
+        <input
+          autocomplete="off"
+          placeholder={$_('zip-postal-code')}
+          class:border-red-500={!iszipcodevalid}
+          class:focus:border-red-500={!iszipcodevalid}
+          class:focus:ring-red-500={!iszipcodevalid}
+          bind:value={editable.address.postalcode}
+          type="text"
+          name="zipcode"
+          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 !iszipcodevalid}
+          <span
+            class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+            {$_('valid-zipcode-postal-code-is-required')}
+          </span>
+        {/if}
+      </div>
+      <div class="col-span-6">
+        <label
+          for="city"
+          class="block text-sm font-medium text-gray-700">{$_('city')}</label>
+        <input
+          autocomplete="off"
+          placeholder={$_('city')}
+          class:border-red-500={!iscityvalid}
+          class:focus:border-red-500={!iscityvalid}
+          class:focus:ring-red-500={!iscityvalid}
+          bind:value={editable.address.city}
+          type="text"
+          name="city"
+          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 !iscityvalid}
+          <span
+            class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+            {$_('valid-city-is-required')}
+          </span>
+        {/if}
+      </div>
+    {/if}
+  </section>
+{:else}
+  {#await promise}
+    {$_('organization-detail-is-being-loaded')}
+  {:catch error}
+    <PromiseError />
+  {/await}
+{/if}

src/components/orgs/OrgOverview.svelte

@@ -88,9 +88,13 @@
                     <div class="flex items-center">
                       <div class="ml-4">
                         <div class="text-sm font-medium text-gray-900">
-                          {#if o.address}
+                          {#if o.address.address1 !== null}
-                            {JSON.stringify(o.address)}
+                            {o.address.address1}<br />
-                          {:else}no address specified{/if}
+                            {o.address.address2 || ''}<br />
+                            {o.address.postalcode}
+                            {o.address.city}
+                            {o.address.country}
+                          {/if}
                         </div>
                       </div>
                     </div>

src/components/runners/RunnersOverview.svelte

@@ -135,49 +135,56 @@
                         </div>
                       </div>
                     </td>
-                    <td class="px-6 py-4 whitespace-nowrap">
+                  <td class="px-6 py-4 whitespace-nowrap">
-                      {#if runner.email}
+                    {#if runner.email}
-                        <div class="text-sm text-gray-500">{runner.email}</div>
+                      <div class="text-sm text-gray-500">{runner.email}</div>
-                      {/if}
+                    {/if}
-                      {#if runner.phone}
+                    {#if runner.phone}
-                        <div class="text-sm text-gray-500">{runner.phone}</div>
+                      <div class="text-sm text-gray-500">{runner.phone}</div>
-                      {/if}
+                    {/if}
-                    </td>
+                    {#if runner.address.address1 !== null}
-                    <td class="px-6 py-4 whitespace-nowrap">
+                      {runner.address.address1}<br />
-                      {#if runner.group.responseType === 'RUNNERTEAM'}
+                      {runner.address.address2 || ''}<br />
-                        <a
+                      {runner.address.postalcode}
-                          href="../teams/{runner.group.id}"
+                      {runner.address.city}
-                          class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">{runner.group.name}</a>
+                      {runner.address.country}
-                      {/if}
+                    {/if}
-                      {#if runner.group.responseType === 'RUNNERORGANIZATION'}
+                  </td>
-                        <a
+                  <td class="px-6 py-4 whitespace-nowrap">
-                          href="../orgs/{runner.group.id}"
+                    {#if runner.group.responseType === 'RUNNERTEAM'}
-                          class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">{runner.group.name}</a>
+                      <a
-                      {/if}
+                        href="../teams/{runner.group.id}"
-                    </td>
+                        class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">{runner.group.name}</a>
-                    <td class="px-6 py-4 whitespace-nowrap">
+                    {/if}
-                      {runner.distance}
+                    {#if runner.group.responseType === 'RUNNERORGANIZATION'}
-                    </td>
+                      <a
-                    {#if active_deletes[runner.id] === true}
+                        href="../orgs/{runner.group.id}"
-                      <td
+                        class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">{runner.group.name}</a>
-                        class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+                    {/if}
-                        <button
+                  </td>
-                          on:click={() => {
+                  <td class="px-6 py-4 whitespace-nowrap">{runner.distance}</td>
-                            active_deletes[runner.id] = false;
+                  {#if active_deletes[runner.id] === true}
-                          }}
+                    <td
-                          tabindex="0"
+                      class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
-                          class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer">Cancel
+                      <button
-                          Delete</button>
+                        on:click={() => {
-                        <button
+                          active_deletes[runner.id] = false;
-                          on:click={() => {
+                        }}
-                            RunnerService.runnerControllerRemove(runner.id, true)
+                        tabindex="0"
-                              .then((resp) => {
+                        class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer">Cancel
-                                current_runners = current_runners.filter((obj) => obj.id !== runner.id);
+                        Delete</button>
-                              })
+                      <button
-                              .catch((err) => {});
+                        on:click={() => {
-                          }}
+                          RunnerService.runnerControllerRemove(runner.id, true)
-                          tabindex="0"
+                            .then((resp) => {
-                          class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">{$_('confirm-delete')}</button>
+                              current_runners = current_runners.filter((obj) => obj.id !== runner.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