src/components/ContactDetail.svelte

@@ -10,10 +10,16 @@
   import Toastify from "toastify-js";
   import PromiseError from "./PromiseError.svelte";
   import isEmail from "validator/es/lib/isEmail";
+  $: address_checked = true;
   let data_loaded = false;
   let orgs = [];
   let teams = [];
+  let address_input1;
+  let address_input2;
+  let address_zipcode;
+  let address_city;
   $: address_input1_value = "";
+  $: address_input2_value = "";
   $: address_zipcode_value = "";
   $: address_city_value = "";
   export let params;
@@ -41,8 +47,8 @@
   promise.then((data) => {
     data_loaded = true;
     original_data = Object.assign(original_data, data);
-    original_data.group = original_data.group.id;
     editable = Object.assign(editable, original_data);
+    address_checked = editable.address1 === null;
   });
   RunnerOrganizationService.runnerOrganizationControllerGetAll().then((val) => {
     orgs = val;
@@ -51,7 +57,7 @@
     teams = val;
   });
   $: isPhoneValidOrEmpty =
-    (editable.phone.includes("+") &&
+    (editable.phone?.includes("+") &&
       isMobilePhone(
         editable.phone
           .replaceAll("(", "")
@@ -279,6 +285,101 @@
         {/each}
       </select>
     </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}
   </section>
 {:catch error}
   <PromiseError {error} />