Skip to content
Extraits de code Groupes Projets
Valider 975208c0 rédigé par Brieuc Dubois's avatar Brieuc Dubois
Parcourir les fichiers

Merge branch 'fix/147-edit-button' into 'dev'

Enhance edit button UX and align actions/creation section on /Admin route

Closes #147

See merge request !23
parents a96f4d45 6fe0cd0b
Aucune branche associée trouvée
Aucune étiquette associée trouvée
4 requêtes de fusion!43Merge dev into main,!37Dev,!36Dev,!23Enhance edit button UX and align actions/creation section on /Admin route
<script lang="ts"> <script lang="ts">
import User from '$lib/types/user'; import User from '$lib/types/user';
import { t } from '$lib/services/i18n'; import { t } from '$lib/services/i18n';
import UserItem from '$lib/components/users/userItem.svelte'; import UserItem from './userItem.svelte';
import type { PageData } from './$types'; import type { PageData } from './$types';
let { data }: { data: PageData } = $props(); let { data }: { data: PageData } = $props();
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
import { t } from '$lib/services/i18n'; import { t } from '$lib/services/i18n';
import type User from '$lib/types/user'; import type User from '$lib/types/user';
import { toastAlert, toastSuccess } from '$lib/utils/toasts'; import { toastAlert, toastSuccess } from '$lib/utils/toasts';
import { Icon, PencilSquare, Trash } from 'svelte-hero-icons'; import { Icon, PencilSquare, Trash, CheckCircle, XCircle } from 'svelte-hero-icons';
export let user: User; export let user: User;
...@@ -12,23 +12,26 @@ ...@@ -12,23 +12,26 @@
let is_active = user.is_active; let is_active = user.is_active;
let inEdit = false; let inEdit = false;
let isChanged = false;
async function onEdit() { function startEditing() {
if (!inEdit) { inEdit = true;
nickname = user.nickname; isChanged = false;
email = user.email; }
type = user.type.toString();
is_active = user.is_active; function cancelEdit() {
inEdit = true; nickname = user.nickname;
return; email = user.email;
} type = user.type.toString();
is_active = user.is_active;
inEdit = false;
isChanged = false;
}
if ( async function validateChanges() {
nickname === user.nickname && if (!isChanged) {
email === user.email && toastAlert('No changes detected.');
type === user.type.toString() &&
is_active === user.is_active
) {
inEdit = false; inEdit = false;
return; return;
} }
...@@ -41,8 +44,9 @@ ...@@ -41,8 +44,9 @@
}); });
if (res) { if (res) {
toastSuccess('User successfully updated');
inEdit = false; inEdit = false;
toastSuccess('Successfully updated user'); isChanged = false;
return; return;
} }
...@@ -54,21 +58,25 @@ ...@@ -54,21 +58,25 @@
<td>{user.id}</td> <td>{user.id}</td>
<td> <td>
{#if inEdit} {#if inEdit}
<input type="text" class="input" bind:value={nickname} /> <input type="text" class="input" bind:value={nickname} on:input={() => (isChanged = true)} />
{:else} {:else}
{user.nickname} {user.nickname}
{/if} {/if}
</td> </td>
<td> <td>
{#if inEdit} {#if inEdit}
<input type="email" class="input" bind:value={email} /> <input type="email" class="input" bind:value={email} on:input={() => (isChanged = true)} />
{:else} {:else}
{user.email} {user.email}
{/if} {/if}
</td> </td>
<td> <td>
{#if inEdit} {#if inEdit}
<select class="select select-sm select-bordered" bind:value={type}> <select
class="select select-sm select-bordered"
bind:value={type}
on:change={() => (isChanged = true)}
>
<option value="2">{$t('users.type.student')}</option> <option value="2">{$t('users.type.student')}</option>
<option value="1">{$t('users.type.tutor')}</option> <option value="1">{$t('users.type.tutor')}</option>
<option value="0">{$t('users.type.admin')}</option> <option value="0">{$t('users.type.admin')}</option>
...@@ -83,20 +91,50 @@ ...@@ -83,20 +91,50 @@
</td> </td>
<td> <td>
{#if inEdit} {#if inEdit}
<input type="checkbox" class="checkbox" bind:checked={is_active} /> <input
type="checkbox"
class="checkbox"
bind:checked={is_active}
on:change={() => (isChanged = true)}
/>
{:else if user.is_active} {:else if user.is_active}
<span>{$t('utils.bool.true')}</span> <span>{$t('utils.bool.true')}</span>
{:else} {:else}
<span>{$t('utils.bool.false')}</span> <span>{$t('utils.bool.false')}</span>
{/if} {/if}
</td> </td>
<td class="py-3 px-6 flex justify-center"> <td class="py-3 px-6 flex justify-center space-x-4 items-center">
<button on:click={onEdit}> {#if inEdit}
<Icon src={PencilSquare} class="w-5" /> <button
on:click={validateChanges}
class="btn btn-icon bg-green-500 text-white hover:bg-green-600 rounded-full p-2 transition-all"
aria-label="Validate"
>
<Icon src={CheckCircle} class="w-5 h-5" />
</button>
<button
on:click={cancelEdit}
class="btn btn-icon bg-red-500 text-white hover:bg-red-600 rounded-full p-2 transition-all"
aria-label="Cancel"
>
<Icon src={XCircle} class="w-5 h-5" />
</button>
{:else}
<button
on:click={startEditing}
class="btn btn-icon bg-gray-200 text-gray-600 hover:bg-gray-300 rounded-full p-2 transition-all"
aria-label="Edit"
>
<Icon src={PencilSquare} class="w-5 h-5" />
</button>
{/if}
<button
class="btn btn-icon bg-gray-200 text-gray-400 hover:bg-gray-300 hover:text-red-500 rounded-full p-2 transition-all"
aria-label="Delete"
>
<Icon src={Trash} class="w-5 h-5" />
</button> </button>
<Icon </td>
src={Trash} </tr>
class="w-5 hover:cursor-not-allowed stroke-gray-400 hover:text-secondaryHover"
/>
</td></tr
>
0% Chargement en cours ou .
You are about to add 0 people to the discussion. Proceed with caution.
Terminez d'abord l'édition de ce message.
Veuillez vous inscrire ou vous pour commenter