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

🖊 UserDetail - reactivity on edit + update functionality

Browse Source 
ref #12
This commit is contained in:
Philipp Dormann 2021-01-11 20:41:57 +01:00
parent 81c1537bad
commit ce1f3842e0
1 changed files with 24 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
src/components/UserDetail.svelte
View File

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