From a60ada62cf3833e238e2ca4a4fc709f3357ee83a Mon Sep 17 00:00:00 2001
From: Brieuc Dubois <git@bhasher.com>
Date: Sun, 8 Sep 2024 17:45:53 +0300
Subject: [PATCH] Implement user edition in admin pane #55
---
.../src/lib/components/users/userItem.svelte | 102 ++++++++++++++++++
frontend/src/lib/types/user.ts | 18 ++++
frontend/src/routes/admin/+page.svelte | 24 +----
3 files changed, 122 insertions(+), 22 deletions(-)
create mode 100644 frontend/src/lib/components/users/userItem.svelte
diff --git a/frontend/src/lib/components/users/userItem.svelte b/frontend/src/lib/components/users/userItem.svelte
new file mode 100644
index 00000000..6d03ae14
--- /dev/null
+++ b/frontend/src/lib/components/users/userItem.svelte
@@ -0,0 +1,102 @@
+<script lang="ts">
+ import { t } from '$lib/services/i18n';
+ import type User from '$lib/types/user';
+ import { toastAlert, toastSuccess } from '$lib/utils/toasts';
+ import { Icon, PencilSquare, Trash } from 'svelte-hero-icons';
+
+ export let user: User;
+
+ let nickname = user.nickname;
+ let email = user.email;
+ let type = user.type.toString();
+ let is_active = user.is_active;
+
+ let inEdit = false;
+
+ async function onEdit() {
+ if (!inEdit) {
+ nickname = user.nickname;
+ email = user.email;
+ type = user.type.toString();
+ is_active = user.is_active;
+ inEdit = true;
+ return;
+ }
+
+ if (
+ nickname === user.nickname &&
+ email === user.email &&
+ type === user.type.toString() &&
+ is_active === user.is_active
+ ) {
+ inEdit = false;
+ return;
+ }
+
+ const res = await user.patch({
+ nickname,
+ email,
+ type: parseInt(type),
+ is_active
+ });
+
+ if (res) {
+ inEdit = false;
+ toastSuccess('Successfully updated user');
+ return;
+ }
+
+ toastAlert('Failed to update user');
+ }
+</script>
+
+<tr>
+ <td>{user.id}</td>
+ <td>
+ {#if inEdit}
+ <input type="text" class="input" bind:value={nickname} />
+ {:else}
+ {user.nickname}
+ {/if}
+ </td>
+ <td>
+ {#if inEdit}
+ <input type="email" class="input" bind:value={email} />
+ {:else}
+ {user.email}
+ {/if}
+ </td>
+ <td>
+ {#if inEdit}
+ <select class="select select-sm select-bordered" bind:value={type}>
+ <option value="2">{$t('users.type.student')}</option>
+ <option value="1">{$t('users.type.tutor')}</option>
+ <option value="0">{$t('users.type.admin')}</option>
+ </select>
+ {:else if user.type === 0}
+ {$t('users.type.admin')}
+ {:else if user.type === 1}
+ {$t('users.type.tutor')}
+ {:else}
+ {$t('users.type.student')}
+ {/if}
+ </td>
+ <td>
+ {#if inEdit}
+ <input type="checkbox" class="checkbox" bind:checked={is_active} />
+ {:else if user.is_active}
+ <span>{$t('utils.bool.true')}</span>
+ {:else}
+ <span>{$t('utils.bool.false')}</span>
+ {/if}
+ </td>
+ <td class="py-3 px-6 flex justify-center">
+ <button on:click={onEdit}>
+ <Icon src={PencilSquare} class="w-5" />
+ </button>
+ <Icon
+ src={Trash}
+ class="w-5 hover:cursor-not-allowed stroke-gray-400 hover:text-secondaryHover"
+ />
+ </td></tr
+>
diff --git a/frontend/src/lib/types/user.ts b/frontend/src/lib/types/user.ts
index 55259c15..692f92bf 100644
--- a/frontend/src/lib/types/user.ts
+++ b/frontend/src/lib/types/user.ts
@@ -151,6 +151,24 @@ export default class User {
});
}
+ async patch(data: any): Promise<boolean> {
+ const res = await patchUserAPI(this.id, data);
+ if (res) {
+ if (data.email) this._email = data.email;
+ if (data.nickname) this._nickname = data.nickname;
+ if (data.type) this._type = data.type;
+ if (data.availability) this._availability = BigInt(data.availability);
+ if (data.is_active) this._is_active = data.is_active;
+ if (data.ui_language) this._ui_language = data.ui_language;
+ if (data.home_language) this._home_language = data.home_language;
+ if (data.target_language) this._target_language = data.target_language;
+ if (data.birthdate) this._birthdate = data.birthdate;
+ if (data.gender) this._gender = data.gender;
+ if (data.calcum_link) this._calcom_link = data.calcom_link;
+ }
+ return res;
+ }
+
static find(user_id: number): User | undefined {
return get(users).find((user) => user.id === user_id);
}
diff --git a/frontend/src/routes/admin/+page.svelte b/frontend/src/routes/admin/+page.svelte
index fd239366..841c103e 100644
--- a/frontend/src/routes/admin/+page.svelte
+++ b/frontend/src/routes/admin/+page.svelte
@@ -1,10 +1,10 @@
<script lang="ts">
import { onMount } from 'svelte';
- import Header from '$lib/components/header.svelte';
import User, { users } from '$lib/types/user';
import { getUsersAPI } from '$lib/api/users';
import { t } from '$lib/services/i18n';
import { Icon, Trash } from 'svelte-hero-icons';
+ import UserItem from '$lib/components/users/userItem.svelte';
let ready = false;
@@ -57,27 +57,7 @@
</thead>
<tbody>
{#each $users as user (user.id)}
- <tr>
- <td>{user.id}</td>
- <td>{user.nickname}</td>
- <td>{user.email}</td>
- <td>
- {#if user.type === 0}
- {$t('users.type.admin')}
- {:else if user.type === 1}
- {$t('users.type.tutor')}
- {:else}
- {$t('users.type.student')}
- {/if}
- </td>
- <td>{$t('utils.bool.' + user.is_active)}</td>
- <td class="py-3 px-6 flex justify-center">
- <Icon
- src={Trash}
- class="w-5 hover:cursor-not-allowed stroke-gray-400 hover:text-secondaryHover"
- />
- </td></tr
- >
+ <UserItem {user} />
{/each}
</tbody>
<tfoot class="">
--
GitLab