From ce1f3842e0f581d9e94ea6079cf223d945f7465d Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp.dormann1@gmail.com>
Date: Mon, 11 Jan 2021 20:41:57 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=96=8A=20UserDetail=20-=20reactivity=20on?=
 =?UTF-8?q?=20edit=20+=20update=20functionality?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ref #12
---
 src/components/UserDetail.svelte | 38 ++++++++++++++++++++------------
 1 file changed, 24 insertions(+), 14 deletions(-)

diff --git a/src/components/UserDetail.svelte b/src/components/UserDetail.svelte
index 0ef16f3f..323d64a5 100644
--- a/src/components/UserDetail.svelte
+++ b/src/components/UserDetail.svelte
@@ -7,18 +7,28 @@
   export let params;
   const user_promise = UserService.userControllerGetOne(params.userid);
   let data_loaded = false;
-  let original_data = undefined;
+  $: original_data = {};
   $: editable_userdata = undefined;
   user_promise.then((data) => {
     data_loaded = true;
-    original_data = data;
+    original_data = Object.assign(original_data, data);
     editable_userdata = data;
   });
-  // $: changes_performed = lodashIsEqual(original_data, editable_userdata);
-  $: changes_performed = !lodashIsEqual({ test: 1 }, { test: 1 });
+  $: changes_performed = !lodashIsEqual(original_data, editable_userdata);
   function submit() {
     if (data_loaded === true && changes_performed === true) {
       console.log("ok, submitting...");
+      console.log(editable_userdata);
+      UserService.userControllerPut(original_data.id, editable_userdata)
+        .then((resp) => {
+          console.log(resp);
+          Object.assign(original_data, editable_userdata);
+          original_data = editable_userdata;
+          Object.assign(original_data, editable_userdata);
+        })
+        .catch((err) => {
+          console.log(err);
+        });
     } else {
       console.log("no changes performed");
     }
@@ -63,26 +73,26 @@
                 <polyline points="12 5 19 12 12 19" /></svg>
             </li>
             <li class="flex items-center">
-              <span class="mr-2">{user.firstname}
-                {user.middlename || ''}
-                {user.lastname}</span>
+              <span class="mr-2">{original_data.firstname}
+                {original_data.middlename || ''}
+                {original_data.lastname}</span>
             </li>
           </ol>
         </nav>
       </div>
     </div>
     <div class="mb-8 text-3xl font-extrabold leading-tight">
-      {user.firstname}
-      {user.middlename || ''}
-      {user.lastname}
-      <span data-id="user_actions_${user.id}">
+      {original_data.firstname}
+      {original_data.middlename || ''}
+      {original_data.lastname}
+      <span data-id="user_actions_${editable_userdata.id}">
         <button
           class="hidden w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-green-400 text-base font-medium text-white sm:w-auto sm:text-sm"
-          data-userid="${user.id}"
+          data-userid="${editable_userdata.id}"
           onclick="user__delete_cancel()">{$_('cancel')}</button>
         <button
           class="hidden w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-500 text-base font-medium text-white sm:w-auto sm:text-sm"
-          data-userid="${user.id}"
+          data-userid="${editable_userdata.id}"
           onclick="user__delete_confirm()">{$_('confirm-delete')}</button>
         <button
           type="button"
@@ -101,7 +111,7 @@
       <img
         alt={$_('profile-picture')}
         class="inline-block h-20 w-20 rounded-full overflow-hidden bg-gray-100"
-        src={user.profilePic} />
+        src={editable_userdata.profilePic} />
       <!-- <span
         class="inline-block h-12 w-12 rounded-full overflow-hidden bg-gray-100"><svg
           class="h-full w-full text-gray-300"