From 6012d0577e2ae6caf44aaee54335188bc767fff7 Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp.dormann1@gmail.com>
Date: Sun, 10 Jan 2021 14:26:52 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=96=8A=20add=20basic=20UserDetail=20editi?=
 =?UTF-8?q?ng=20reactivity?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ref #12
---
 package.json                     |  1 +
 src/components/UserDetail.svelte | 44 ++++++++++++++++++++++++++------
 2 files changed, 37 insertions(+), 8 deletions(-)

diff --git a/package.json b/package.json
index 35675b4c..f0c147b6 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
 		"filepond": "4.25.1",
 		"gridjs": "3.2.1",
 		"localforage": "1.9.0",
+		"lodash.isequal": "^4.5.0",
 		"svelte-filepond": "0.0.1",
 		"svelte-focus-trap": "1.0.1",
 		"svelte-i18n": "3.3.0",
diff --git a/src/components/UserDetail.svelte b/src/components/UserDetail.svelte
index 5ca38693..228ef9c8 100644
--- a/src/components/UserDetail.svelte
+++ b/src/components/UserDetail.svelte
@@ -1,15 +1,28 @@
 <script>
   import { _ } from "svelte-i18n";
+  import lodashIsEqual from "lodash.isequal";
   import { UserService } from "@odit/lfk-client-js";
   import "gridjs/dist/theme/mermaid.css";
-  import { tracks as tracksstore } from "../store.js";
   import PromiseError from "./PromiseError.svelte";
   export let params;
   const user_promise = UserService.userControllerGetOne(params.userid);
+  let data_loaded = false;
+  let original_data = undefined;
+  $: editable_userdata = undefined;
   user_promise.then((data) => {
-    console.log(data);
-    tracksstore.set(data);
+    data_loaded = true;
+    original_data = data;
+    editable_userdata = data;
   });
+  // $: changes_performed = lodashIsEqual(original_data, editable_userdata);
+  $: changes_performed = !lodashIsEqual({ test: 1 }, { test: 1 });
+  function submit() {
+    if (data_loaded === true && changes_performed === true) {
+      console.log("ok, submitting...");
+    } else {
+      console.log("no changes performed");
+    }
+  }
 </script>
 
 {#await user_promise}
@@ -58,10 +71,11 @@
         </nav>
       </div>
     </div>
-    <span class="mb-4 text-3xl font-extrabold leading-tight">{user.firstname}
+    <div class="mb-8 text-3xl font-extrabold leading-tight">
+      {user.firstname}
       {user.middlename || ''}
       {user.lastname}
-      <div data-id="user_actions_${user.id}">
+      <span data-id="user_actions_${user.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}"
@@ -74,8 +88,15 @@
           type="button"
           class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm">Delete
           User</button>
-      </div>
-    </span>
+        <button
+          disabled={!changes_performed}
+          class:opacity-50={!changes_performed}
+          type="button"
+          on:click={submit}
+          class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">Save
+          Changes</button>
+      </span>
+    </div>
 
     <!--  -->
     <div class="mt-2 flex items-center">
@@ -97,8 +118,13 @@
     <div class="mt-3 text-sm w-full">
       <input
         id="enabled"
+        on:change={() => {
+          editable_userdata.enabled = !editable_userdata.enabled;
+          // TODO: this reactive set does not work?
+        }}
         name="enabled"
         type="checkbox"
+        checked={editable_userdata.enabled}
         class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded" />
       <label
         for="enabled"
@@ -111,6 +137,7 @@
         autocomplete="off"
         placeholder="First name"
         type="text"
+        bind:value={editable_userdata.firstname}
         name="firstname"
         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 dark:bg-gray-900 dark:text-gray-100 rounded-md p-2" />
     </div>
@@ -120,6 +147,7 @@
         autocomplete="off"
         placeholder="Middle name"
         type="text"
+        bind:value={editable_userdata.middlename}
         name="middlename"
         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 dark:bg-gray-900 dark:text-gray-100 rounded-md p-2" />
     </div>
@@ -129,11 +157,11 @@
         autocomplete="off"
         placeholder="Last name"
         type="text"
+        bind:value={editable_userdata.lastname}
         name="lastname"
         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 dark:bg-gray-900 dark:text-gray-100 rounded-md p-2" />
     </div>
   </section>
 {:catch error}
-  <!-- promise was rejected -->
   <PromiseError {error} />
 {/await}