Skip to content
Extraits de code Groupes Projets
Valider f543d7ca rédigé par DavePk04's avatar DavePk04
Parcourir les fichiers

UI: created tutor profile page

parent 3bbdda10
Aucune branche associée trouvée
Aucune étiquette associée trouvée
1 requête de fusion!47Resolve "Allow Tutors to Reset Their Availabilities"
Ce commit fait partie de la requête de fusion !47. Les commentaires créés ici seront créés dans le contexte de cette requête de fusion.
......@@ -9,7 +9,11 @@
"studies": "Studies"
},
"tutor": {
"profile": "My profile"
"profile": "My profile",
"update": "Update",
"selectGender": "Select your gender",
"bio": "Biography",
"availabilities": "Availabilities"
},
"availability": "Availability",
"language": "Language",
......@@ -52,7 +56,8 @@
"noCurrentOrFutureSessions": "No session in progress or planned",
"pastSessions": "Completed sessions",
"plannedSessions": "Scheduled sessions",
"sessionAdded": "You have been added to a session with {users}"
"sessionAdded": "You have been added to a session with {users}",
"birthdate": "Birthdate"
},
"signup": {
"title": "Register",
......
......@@ -13,9 +13,13 @@
"users": "Utilisateurs",
"sessions": "Sessions",
"studies": "Études"
},
},
"tutor": {
"profile": "Mon profil"
"profile": "Mon profil",
"update": "Confirmer",
"selectGender": "Sélectionnez votre genre",
"bio": "Biographie",
"availabilities": "Disponibilités"
}
},
"chatbox": {
......@@ -52,7 +56,8 @@
"actions": "Actions",
"date": "Date",
"participants": "Participants",
"sessionAdded": "Vous avez été ajouté à une session avec {users}"
"sessionAdded": "Vous avez été ajouté à une session avec {users}",
"birthdate": "Date de naissance"
},
"login": {
"email": "E-mail",
......
......@@ -99,35 +99,35 @@
</li>
{/if}
{#if user?.type === 0}
<li>
<details>
<summary class="p-3">
<Icon src={Cog6Tooth} class="h-5 w-5" />
</summary>
<ul class="menu menu-sm dropdown-content absolute right-0 z-10">
<li>
<a data-sveltekit-reload href="/admin/users">
{$t('header.admin.users')}
</a>
</li>
<li>
<a data-sveltekit-reload href="/admin/sessions">
{$t('header.admin.sessions')}
</a>
</li>
<li>
<a data-sveltekit-reload href="/admin/studies">
{$t('header.admin.studies')}
</a>
</li>
<li>
<a data-sveltekit-reload href="/logout" class="whitespace-nowrap">
{$t('header.signout')}
</a>
</li>
</ul>
</details>
</li>
<li>
<details>
<summary class="p-3">
<Icon src={Cog6Tooth} class="h-5 w-5" />
</summary>
<ul class="menu menu-sm dropdown-content absolute right-0 z-10">
<li>
<a data-sveltekit-reload href="/admin/users">
{$t('header.admin.users')}
</a>
</li>
<li>
<a data-sveltekit-reload href="/admin/sessions">
{$t('header.admin.sessions')}
</a>
</li>
<li>
<a data-sveltekit-reload href="/admin/studies">
{$t('header.admin.studies')}
</a>
</li>
<li>
<a data-sveltekit-reload href="/logout" class="whitespace-nowrap">
{$t('header.signout')}
</a>
</li>
</ul>
</details>
</li>
{:else if !user}
<li>
<a
......
<script lang="ts">
import { t } from '$lib/services/i18n';
import type { PageData } from './$types';
let { data }: { data: PageData } = $props();
const formatBirthdate = (dateStr: string | undefined): string => {
if (!dateStr) return '';
const isoDate = dateStr.split('T')[0];
if (/^\d{4}-\d{2}-\d{2}$/.test(isoDate)) return isoDate;
const [day, month, year] = dateStr.split('/');
if (year?.length === 4) {
return `${year}-${month.padStart(2, '0')}-${day.padStart(2, '0')}`;
}
return '';
};
let email = data.user?.email || '';
let nickname = data.user?.nickname || '';
let birthdate = formatBirthdate(
data.user?.birthdate ? data.user.birthdate.toString() : undefined
);
let gender = data.user?.gender || '';
let bio = data.user?.bio || '';
let availabilities = data.user?.availabilities
? JSON.stringify(data.user.availabilities, null, 2)
: '';
function updateProfile() {
let parsedAvailabilities;
try {
parsedAvailabilities = availabilities ? JSON.parse(availabilities) : [];
} catch (error) {
alert($t('errors.invalidAvailabilities'));
return;
}
console.log({
email,
nickname,
birthdate,
gender,
bio,
availabilities: parsedAvailabilities
});
alert($t('profile.updatedSuccessfully'));
}
</script>
<h1 class="text-2xl font-bold text-center my-5">{$t('header.tutor.profile')}</h1>
<div class="max-w-lg mx-auto bg-white shadow-md rounded-lg p-6">
<form on:submit|preventDefault={updateProfile}>
<div class="mb-4">
<label for="email" class="block text-sm font-medium text-gray-700">{$t('home.email')}</label>
<input
type="email"
id="email"
bind:value={email}
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
required
/>
</div>
<div class="mb-4">
<label for="nickname" class="block text-sm font-medium text-gray-700"
>{$t('home.nickname')}</label
>
<input
type="text"
id="nickname"
bind:value={nickname}
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
required
/>
</div>
<div class="mb-4">
<label for="birthdate" class="block text-sm font-medium text-gray-700"
>{$t('home.birthdate')}</label
>
<input
type="date"
id="birthdate"
bind:value={birthdate}
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
required
/>
</div>
<div class="mb-4">
<label for="gender" class="block text-sm font-medium text-gray-700"
>{$t('users.gender')}</label
>
<select
id="gender"
bind:value={gender}
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
required
>
<option value="" disabled>{$t('header.tutor.selectGender')}</option>
<option value="male">{$t('users.genders.male')}</option>
<option value="female">{$t('users.genders.female')}</option>
<option value="other">{$t('users.genders.other')}</option>
</select>
</div>
<div class="mb-4">
<label for="bio" class="block text-sm font-medium text-gray-700">{$t('register.bio')}</label>
<textarea
id="bio"
rows="4"
bind:value={bio}
placeholder={$t('header.tutor.bio')}
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
required
></textarea>
</div>
<div class="mb-4">
<label for="availabilities" class="block text-sm font-medium text-gray-700"
>{$t('register.availabilities')}</label
>
<textarea
id="availabilities"
rows="4"
bind:value={availabilities}
placeholder={$t('header.tutor.availabilities')}
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
required
></textarea>
</div>
<button
type="submit"
class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded-md shadow-md focus:outline-none focus:ring focus:ring-indigo-200"
>
{$t('header.tutor.update')}
</button>
</form>
</div>
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