🚧 WIP on ContactDetail

ref #50

src/components/AddContactModal.svelte

@@ -254,7 +254,7 @@
                     class="block text-sm font-medium text-gray-700">{$_('team')}</label>
                   <select
                     name="team"
-                    multiple="true"
+                    multiple
                     bind:value={selected_team}
                     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">
                     {#each teams as team}

src/components/ContactDetail.svelte

@@ -1,6 +1,5 @@
 <script>
   import { _ } from "svelte-i18n";
-  import lodashIsEqual from "lodash.isequal";
   import store from "../store";
   import {
     GroupContactService,
@@ -10,26 +9,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;
-  const promise = GroupContactService.groupContactControllerGetOne(
-    params.contact
-  );
   $: delete_triggered = false;
   $: original_data = {};
   $: editable = {};
-  $: changes_performed = !lodashIsEqual(original_data, editable);
+  $: changes_performed = !(
+    JSON.stringify(original_data) === JSON.stringify(editable)
+  );
   $: isEmailValid =
     (editable.email || "") === "" ||
     (editable.email && isEmail(editable.email || ""));
@@ -40,15 +29,18 @@
     isFirstnameValid &&
     isLastnameValid &&
     isEmailValid &&
-    isAddress1Valid &&
+    isPhoneValidOrEmpty &&
-    iszipcodevalid &&
+    ((isAddress1Valid && iszipcodevalid && iscityvalid) ||
-    iscityvalid &&
+      address_checked === false);
-    isPhoneValidOrEmpty;
+  const promise = GroupContactService.groupContactControllerGetOne(
-  promise.then((data) => {
+    params.contact
+  ).then((data) => {
     data_loaded = true;
     original_data = Object.assign(original_data, data);
     editable = Object.assign(editable, original_data);
-    address_checked = editable.address1 === null;
+    console.log(editable.address);
+    editable.address_checked = editable.address.address1 !== null;
+    original_data.address_checked = editable.address.address1 !== null;
   });
   RunnerOrganizationService.runnerOrganizationControllerGetAll().then((val) => {
     orgs = val;
@@ -57,24 +49,29 @@
     teams = val;
   });
   $: isPhoneValidOrEmpty =
-    (editable.phone?.includes("+") &&
+    editable.phone?.includes("+") ||
-      isMobilePhone(
+    editable.phone === "" ||
-        editable.phone
+    editable.phone === null;
-          .replaceAll("(", "")
+  $: isAddress1Valid = editable.address?.address1?.trim().length !== 0;
-          .replaceAll(")", "")
+  $: iszipcodevalid = editable.address?.postalcode?.trim().length !== 0;
-          .replaceAll("-", "")
+  $: iscityvalid = editable.address?.city?.trim().length !== 0;
-          .replaceAll(" ", "")
-      )) ||
-    editable.phone === "";
-  $: isAddress1Valid = address_input1_value.trim().length !== 0;
-  $: iszipcodevalid = address_zipcode_value.trim().length !== 0;
-  $: iscityvalid = address_city_value.trim().length !== 0;
   function submit() {
     if (data_loaded === true && save_enabled) {
       Toastify({
         text: "Contact is being updated...",
         duration: 2500,
       }).showToast();
+      editable.address.country = "DE";
+      if (editable.address_checked === false) {
+        editable.address = {};
+      }
+      delete editable.responseType;
+      delete editable.address_checked;
+      if (editable.email) editable.email = editable.email;
+      if (editable.phone) editable.phone = editable.phone;
+      if (editable.middlename) editable.middlename = editable.middlename;
+      console.log(JSON.stringify(editable));
+      console.log(editable);
       GroupContactService.groupContactControllerPut(original_data.id, editable)
         .then((resp) => {
           Object.assign(original_data, editable);
@@ -262,16 +259,25 @@
         autocomplete="off"
         placeholder={$_('phone')}
         type="tel"
+        class:border-red-500={!isPhoneValidOrEmpty}
+        class:focus:border-red-500={!isPhoneValidOrEmpty}
+        class:focus:ring-red-500={!isPhoneValidOrEmpty}
         bind:value={editable.phone}
         name="phone"
         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 !isPhoneValidOrEmpty}
+        <span
+          class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+          valid international phone number is required...
+        </span>
+      {/if}
     </div>
     <div class="text-sm w-full">
       <span class="font-medium text-gray-700">{$_('groups')}</span>
       <select
-        bind:value={editable.group}
+        bind:value={editable.groups}
         name="team"
-        multiple="true"
+        multiple
         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">
         {#each teams as team}
           <option value={team.id}>
@@ -286,10 +292,10 @@
       </select>
     </div>
     <!--  -->
-    <div class="flex items-start">
+    <div class="flex items-start mt-2">
       <div class="flex items-center h-5">
         <input
-          bind:checked={address_checked}
+          bind:checked={editable.address_checked}
           id="comments"
           name="comments"
           type="checkbox"
@@ -299,7 +305,7 @@
         <label for="comments" class="font-medium text-gray-700">Address</label>
       </div>
     </div>
-    {#if address_checked === true}
+    {#if editable.address_checked === true}
       <div class="col-span-6">
         <label
           for="address1"
@@ -310,8 +316,7 @@
           class:border-red-500={!isAddress1Valid}
           class:focus:border-red-500={!isAddress1Valid}
           class:focus:ring-red-500={!isAddress1Valid}
-          bind:value={address_input1_value}
+          bind:value={editable.address.address1}
-          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" />
@@ -329,8 +334,7 @@
         <input
           autocomplete="off"
           placeholder="Apartment, suite, etc."
-          bind:value={address_input2_value}
+          bind:value={editable.address.address2}
-          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" />
@@ -345,8 +349,7 @@
           class:border-red-500={!iszipcodevalid}
           class:focus:border-red-500={!iszipcodevalid}
           class:focus:ring-red-500={!iszipcodevalid}
-          bind:value={address_zipcode_value}
+          bind:value={editable.address.postalcode}
-          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" />
@@ -367,8 +370,7 @@
           class:border-red-500={!iscityvalid}
           class:focus:border-red-500={!iscityvalid}
           class:focus:ring-red-500={!iscityvalid}
-          bind:value={address_city_value}
+          bind:value={editable.address.city}
-          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" />