Merge pull request 'Addresses for orgs and a bunch of bugfixes feature/72-adddress_for_everyone' (#73) from feature/72-adddress_for_everyone into dev

Reviewed-on: #73

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) => {
@@ -133,7 +160,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

@@ -10,13 +10,21 @@
   import ImportRunnerModal from "../runners/ImportRunnerModal.svelte";
   import PromiseError from "../base/PromiseError.svelte";
   $: delete_triggered = false;
-  $: save_enabled = !data_changed;
-  export let params;
-  let orgdata = {};
-  let original = {};
+  $: address_valid_or_none =
+    (isAddress1Valid && iszipcodevalid && iscityvalid) ||
+    editable.address_checked === false;
+  $: save_enabled = data_changed && address_valid_or_none;
+  let original = "";
+  let original_object = {};
   let contacts = [];
+  export let params;
+  $: editable = {};
   $: data_loaded = false;
-  $: data_changed = JSON.stringify(orgdata) === JSON.stringify(original);
+  $: data_changed = !(JSON.stringify(editable) === original);
+  $: isAddress1Valid = editable.address?.address1?.trim().length !== 0;
+  $: iszipcodevalid = editable.address?.postalcode?.trim().length !== 0;
+  $: iscityvalid = editable.address?.city?.trim().length !== 0;
+
   const promise = RunnerOrganizationService.runnerOrganizationControllerGetOne(
     params.orgid
   ).then((value) => {
@@ -26,8 +34,20 @@
         value.contact = value.contact.id;
       }
     }
-    orgdata = Object.assign(orgdata, value);
-    original = Object.assign(original, value);
+    value.address_checked = value.address.address1 !== null;
+    if(value.address_checked===false){
+      value.address = {
+        address1: "",
+        address2: "",
+        city: "",
+        postalcode: "",
+        country: ""
+      }
+    }
+    editable = Object.assign(editable, value);
+    editable = editable;
+    original_object = Object.assign(editable, value);
+    original = JSON.stringify(value);
   });
   GroupContactService.groupContactControllerGetAll().then((val) => {
     contacts = val;
@@ -36,7 +56,7 @@
   let delete_org = {};
   function deleteOrganization() {
     RunnerOrganizationService.runnerOrganizationControllerRemove(
-      original.id,
+      original_object.id,
       false
     )
       .then((resp) => {
@@ -48,9 +68,9 @@
         location.replace("./");
       })
       .catch((err) => {
-    modal_open = true;
-    delete_org = original;
-    });
+        modal_open = true;
+        delete_org = original_object;
+      });
   }
   function submit() {
     if (data_loaded === true && save_enabled) {
@@ -58,17 +78,18 @@
         text: "updating organization",
         duration: 2500,
       }).showToast();
-      let postdata = orgdata;
+      let postdata = Object.assign({}, editable);
+      if (postdata.address_checked === false) {
+        postdata.address = null;
+      }
+      console.log(postdata)
       postdata.contact = postdata.contact === "null" ? null : postdata.contact;
       RunnerOrganizationService.runnerOrganizationControllerPut(
-        original.id,
+        original_object.id,
         postdata
       )
         .then((resp) => {
-          Object.assign(original, orgdata);
-          original = orgdata;
-          Object.assign(original, orgdata);
-          //
+          original = JSON.stringify(editable);
           Toastify({
             text: "updated organization",
             duration: 2500,
@@ -89,15 +110,15 @@
   current_runners={[]}
   passed_team={{}}
   passed_orgs={[]}
-  passed_org={orgdata}
+  passed_org={editable}
   opened_from="OrgDetail"
   bind:import_modal_open />
 <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">
-      {original.name}
-      <span data-id="org_actions_${orgdata.id}">
+      {original_object.name}
+      <span data-id="org_actions_${editable.id}">
         {#if store.state.jwtinfo.userdetails.permissions.includes('RUNNER:IMPORT')}
           <button
             on:click={() => {
@@ -215,7 +236,7 @@
         autocomplete="off"
         placeholder="Name"
         type="text"
-        bind:value={orgdata.name}
+        bind:value={editable.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 rounded-md p-2" />
     </div>
@@ -225,7 +246,7 @@
         class="font-medium text-gray-700">{$_('contact')}</label>
       <select
         name="contact"
-        bind:value={orgdata.contact}
+        bind:value={editable.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">
         <option value="null">no contact</option>
         {#each contacts as c}
@@ -237,18 +258,99 @@
         {/each}
       </select>
     </div>
-    <div class="text-sm w-full">
-      <label
-        for="address"
-        class="font-medium text-gray-700">{$_('address')}</label>
-      <input
-        autocomplete="off"
-        placeholder={$_('address')}
-        type="text"
-        bind:value={orgdata.address}
-        name="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" />
+    <!--  -->
+    <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}

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}
-                            {JSON.stringify(o.address)}
-                          {:else}no address specified{/if}
+                          {#if o.address.address1 !== null}
+                            {o.address.address1}<br />
+                            {o.address.address2 || ''}<br />
+                            {o.address.postalcode}
+                            {o.address.city}
+                            {o.address.country}
+                          {/if}
                         </div>
                       </div>
                     </div>

src/components/runners/RunnersOverview.svelte

@@ -115,6 +115,13 @@
                     {#if runner.phone}
                       <div class="text-sm text-gray-500">{runner.phone}</div>
                     {/if}
+                    {#if runner.address.address1 !== null}
+                      {runner.address.address1}<br />
+                      {runner.address.address2 || ''}<br />
+                      {runner.address.postalcode}
+                      {runner.address.city}
+                      {runner.address.country}
+                    {/if}
                   </td>
                   <td class="px-6 py-4 whitespace-nowrap">
                     {#if runner.group.responseType === 'RUNNERTEAM'}