Implement user edition in admin pane #55

frontend/src/lib/components/users/userItem.svelte

+<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
+>

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);
 	}

frontend/src/routes/admin/+page.svelte

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