First part of org detail address edit

ref #72

src/components/orgs/OrgDetail.svelte

@@ -10,13 +10,18 @@
   import ImportRunnerModal from "../runners/ImportRunnerModal.svelte";
   import PromiseError from "../base/PromiseError.svelte";
   $: delete_triggered = false;
-  $: save_enabled = !data_changed;
+  $: save_enabled = (data_changed && ((isAddress1Valid && iszipcodevalid && iscityvalid) ||
+      orgdata.address_checked === false));
   export let params;
-  let orgdata = {};
+  $: orgdata = {};
-  let original = {};
+  $: original = {};
   let contacts = [];
   $: data_loaded = false;
-  $: data_changed = JSON.stringify(orgdata) === JSON.stringify(original);
+  $: data_changed = !(JSON.stringify(orgdata) === JSON.stringify(original));
+  $: isAddress1Valid = orgdata.address?.address1?.trim().length !== 0;
+  $: iszipcodevalid = orgdata.address?.postalcode?.trim().length !== 0;
+  $: iscityvalid = orgdata.address?.city?.trim().length !== 0;
+
   const promise = RunnerOrganizationService.runnerOrganizationControllerGetOne(
     params.orgid
   ).then((value) => {
@@ -28,6 +33,8 @@
     }
     orgdata = Object.assign(orgdata, value);
     original = Object.assign(original, value);
+    orgdata.address_checked = orgdata.address.address1 !== null;
+    original.address_checked = orgdata.address.address1 !== null;
   });
   GroupContactService.groupContactControllerGetAll().then((val) => {
     contacts = val;
@@ -59,6 +66,9 @@
         duration: 2500,
       }).showToast();
       let postdata = orgdata;
+      if (postdata.address_checked === false) {
+        postdata.address = {};
+      }
       postdata.contact = postdata.contact === "null" ? null : postdata.contact;
       RunnerOrganizationService.runnerOrganizationControllerPut(
         original.id,
@@ -138,6 +148,10 @@
         {/if}
       </span>
     </div>
+    <p>Displayed: {data_changed}</p>
+    <p>Target: {!(JSON.stringify(orgdata.address) === JSON.stringify(original.address))}</p>
+    <p>Edit: {JSON.stringify(orgdata.address)}</p>
+    <p>Original: {JSON.stringify(original.address)}</p>
     <div class="flex flex-row mb-4">
       <div class="w-full">
         <nav class="w-full flex">
@@ -237,18 +251,99 @@
         {/each}
       </select>
     </div>
-    <div class="text-sm w-full">
+    <!--  -->
+    <div class="flex items-start mt-2">
+      <div class="flex items-center h-5">
+        <input
+          bind:checked={orgdata.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="address"
+          for="comments"
           class="font-medium text-gray-700">{$_('address')}</label>
+      </div>
+    </div>
+    {#if orgdata.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')}
+          placeholder="Address"
+          class:border-red-500={!isAddress1Valid}
+          class:focus:border-red-500={!isAddress1Valid}
+          class:focus:ring-red-500={!isAddress1Valid}
+          bind:value={orgdata.address.address1}
           type="text"
-        bind:value={orgdata.address}
+          name="address1"
-        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" />
+        {#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={orgdata.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={orgdata.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={orgdata.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}