🐞 fixed bug in OrgDetail address reactivity

ref #72

src/components/orgs/OrgDetail.svelte

@@ -10,17 +10,20 @@
   import ImportRunnerModal from "../runners/ImportRunnerModal.svelte";
   import PromiseError from "../base/PromiseError.svelte";
   $: delete_triggered = false;
-  $: save_enabled = (data_changed && ((isAddress1Valid && iszipcodevalid && iscityvalid) ||
+  $: address_valid_or_none =
-      orgdata.address_checked === false));
+    (isAddress1Valid && iszipcodevalid && iscityvalid) ||
-  export let params;
+    editable.address_checked === false;
-  $: orgdata = {};
+  $: save_enabled = data_changed && address_valid_or_none;
-  $: original = {};
+  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 = orgdata.address?.address1?.trim().length !== 0;
+  $: isAddress1Valid = editable.address?.address1?.trim().length !== 0;
-  $: iszipcodevalid = orgdata.address?.postalcode?.trim().length !== 0;
+  $: iszipcodevalid = editable.address?.postalcode?.trim().length !== 0;
-  $: iscityvalid = orgdata.address?.city?.trim().length !== 0;
+  $: iscityvalid = editable.address?.city?.trim().length !== 0;
 
   const promise = RunnerOrganizationService.runnerOrganizationControllerGetOne(
     params.orgid
@@ -31,10 +34,11 @@
         value.contact = value.contact.id;
       }
     }
-    orgdata = Object.assign(orgdata, value);
+    value.address_checked = value.address.address1 !== null;
-    original = Object.assign(original, value);
+    editable = Object.assign(editable, value);
-    orgdata.address_checked = orgdata.address.address1 !== null;
+    editable = editable;
-    original.address_checked = orgdata.address.address1 !== null;
+    original_object = Object.assign(editable, value);
+    original = JSON.stringify(value);
   });
   GroupContactService.groupContactControllerGetAll().then((val) => {
     contacts = val;
@@ -43,7 +47,7 @@
   let delete_org = {};
   function deleteOrganization() {
     RunnerOrganizationService.runnerOrganizationControllerRemove(
-      original.id,
+      original_object.id,
       false
     )
       .then((resp) => {
@@ -55,9 +59,9 @@
         location.replace("./");
       })
       .catch((err) => {
-    modal_open = true;
+        modal_open = true;
-    delete_org = original;
+        delete_org = original_object;
-    });
+      });
   }
   function submit() {
     if (data_loaded === true && save_enabled) {
@@ -65,20 +69,17 @@
         text: "updating organization",
         duration: 2500,
       }).showToast();
-      let postdata = orgdata;
+      let postdata = Object.assign({}, editable);
       if (postdata.address_checked === false) {
-        postdata.address = {};
+        postdata.address = null;
       }
       postdata.contact = postdata.contact === "null" ? null : postdata.contact;
       RunnerOrganizationService.runnerOrganizationControllerPut(
-        original.id,
+        original_object.id,
         postdata
       )
         .then((resp) => {
-          Object.assign(original, orgdata);
+          original = JSON.stringify(editable);
-          original = orgdata;
-          Object.assign(original, orgdata);
-          //
           Toastify({
             text: "updated organization",
             duration: 2500,
@@ -99,15 +100,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}
+      {original_object.name}
-      <span data-id="org_actions_${orgdata.id}">
+      <span data-id="org_actions_${editable.id}">
         {#if store.state.jwtinfo.userdetails.permissions.includes('RUNNER:IMPORT')}
           <button
             on:click={() => {
@@ -148,10 +149,6 @@
         {/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">
@@ -229,7 +226,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>
@@ -239,7 +236,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}
@@ -255,7 +252,7 @@
     <div class="flex items-start mt-2">
       <div class="flex items-center h-5">
         <input
-          bind:checked={orgdata.address_checked}
+          bind:checked={editable.address_checked}
           id="comments"
           name="comments"
           type="checkbox"
@@ -267,7 +264,7 @@
           class="font-medium text-gray-700">{$_('address')}</label>
       </div>
     </div>
-    {#if orgdata.address_checked === true}
+    {#if editable.address_checked === true}
       <div class="col-span-6">
         <label
           for="address1"
@@ -278,7 +275,7 @@
           class:border-red-500={!isAddress1Valid}
           class:focus:border-red-500={!isAddress1Valid}
           class:focus:ring-red-500={!isAddress1Valid}
-          bind:value={orgdata.address.address1}
+          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" />
@@ -296,7 +293,7 @@
         <input
           autocomplete="off"
           placeholder={$_('apartment-suite-etc')}
-          bind:value={orgdata.address.address2}
+          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" />
@@ -311,7 +308,7 @@
           class:border-red-500={!iszipcodevalid}
           class:focus:border-red-500={!iszipcodevalid}
           class:focus:ring-red-500={!iszipcodevalid}
-          bind:value={orgdata.address.postalcode}
+          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" />
@@ -332,7 +329,7 @@
           class:border-red-500={!iscityvalid}
           class:focus:border-red-500={!iscityvalid}
           class:focus:ring-red-500={!iscityvalid}
-          bind:value={orgdata.address.city}
+          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" />