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; export let params;
const user_promise = UserService.userControllerGetOne(params.userid); const user_promise = UserService.userControllerGetOne(params.userid);
let data_loaded = false; let data_loaded = false;
let original_data = undefined; $: original_data = {};
$: editable_userdata = undefined; $: editable_userdata = undefined;
user_promise.then((data) => { user_promise.then((data) => {
data_loaded = true; data_loaded = true;
original_data = data; original_data = Object.assign(original_data, data);
editable_userdata = data; editable_userdata = data;
}); });
// $: changes_performed = lodashIsEqual(original_data, editable_userdata); $: changes_performed = !lodashIsEqual(original_data, editable_userdata);
$: changes_performed = !lodashIsEqual({ test: 1 }, { test: 1 });
function submit() { function submit() {
if (data_loaded === true && changes_performed === true) { if (data_loaded === true && changes_performed === true) {
console.log("ok, submitting..."); 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 { } else {
console.log("no changes performed"); console.log("no changes performed");
} }
@ -63,26 +73,26 @@
<polyline points="12 5 19 12 12 19" /></svg> <polyline points="12 5 19 12 12 19" /></svg>
</li> </li>
<li class="flex items-center"> <li class="flex items-center">
<span class="mr-2">{user.firstname} <span class="mr-2">{original_data.firstname}
{user.middlename || ''} {original_data.middlename || ''}
{user.lastname}</span> {original_data.lastname}</span>
</li> </li>
</ol> </ol>
</nav> </nav>
</div> </div>
</div> </div>
<div class="mb-8 text-3xl font-extrabold leading-tight"> <div class="mb-8 text-3xl font-extrabold leading-tight">
{user.firstname} {original_data.firstname}
{user.middlename || ''} {original_data.middlename || ''}
{user.lastname} {original_data.lastname}
<span data-id="user_actions_${user.id}"> <span data-id="user_actions_${editable_userdata.id}">
<button <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" 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> onclick="user__delete_cancel()">{$_('cancel')}</button>
<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" 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> onclick="user__delete_confirm()">{$_('confirm-delete')}</button>
<button <button
type="button" type="button"
@ -101,7 +111,7 @@
<img <img
alt={$_('profile-picture')} alt={$_('profile-picture')}
class="inline-block h-20 w-20 rounded-full overflow-hidden bg-gray-100" class="inline-block h-20 w-20 rounded-full overflow-hidden bg-gray-100"
src={user.profilePic} /> src={editable_userdata.profilePic} />
<!-- <span <!-- <span
class="inline-block h-12 w-12 rounded-full overflow-hidden bg-gray-100"><svg class="inline-block h-12 w-12 rounded-full overflow-hidden bg-gray-100"><svg
class="h-full w-full text-gray-300" class="h-full w-full text-gray-300"