lfk/frontend
2
0
Fork 0
Code Issues 3 Pull Requests Actions Projects Releases Wiki Activity

🖊 add basic UserDetail editing reactivity

Browse Source 
ref #12
This commit is contained in:
Philipp Dormann 2021-01-10 14:26:52 +01:00
parent 5ec1dfa8b0
commit 6012d0577e
2 changed files with 37 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -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",

44
src/components/UserDetail.svelte
View File

@ -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}