Finished form to edit user infos

This commit is contained in:
2026-04-16 11:43:39 +01:00
parent 92b85377c2
commit c66eb37326
51 changed files with 761 additions and 1642 deletions
@@ -1,25 +1,60 @@
<div class="bg-white rounded-2xl p-2">
<form [formGroup]="profileForm">
<ion-item lines="none">
<ion-label position="stacked">Prénom <ion-text color="danger">*</ion-text></ion-label>
<ion-input placeholder="Prénom" [clearInput]="true" formControlName="firstName"></ion-input>
<div class="bg-white rounded-xl p-5 shadow-sm border border-gray-200">
<form [formGroup]="profileForm" class="space-y-5">
<ion-label class="text-xs text-gray-500 mb-1 block">
Prénom
<ion-text color="danger">*</ion-text>
</ion-label>
<ion-item lines="none" class="rounded-xl border border-gray-200 px-3">
<ion-input placeholder="Prénom"
[clearInput]="true"
formControlName="firstName"
class="text-gray-800">
</ion-input>
</ion-item>
<ion-item lines="none">
<ion-label position="stacked">Nom <ion-text color="danger">*</ion-text></ion-label>
<ion-input placeholder="Nom de famille" [clearInput]="true" formControlName="name"></ion-input>
<ion-label class="text-xs text-gray-500 mb-1 block">
Nom
<ion-text color="danger">*</ion-text>
</ion-label>
<ion-item lines="none" class="rounded-xl border border-gray-200 px-3">
<ion-input placeholder="Nom de famille"
[clearInput]="true"
formControlName="name"
class="text-gray-800">
</ion-input>
</ion-item>
<ion-item lines="none">
<ion-label position="stacked">Pseudo <ion-text color="danger">*</ion-text></ion-label>
<ion-input placeholder="Nom d'utilisateur" [clearInput]="true" formControlName="username"></ion-input>
<ion-label class="text-xs text-gray-500 mb-1 block">
Pseudo
<ion-text color="danger">*</ion-text>
</ion-label>
<ion-item lines="none" class="rounded-xl border border-gray-200 px-3">
<ion-input placeholder="Nom d'utilisateur"
[clearInput]="true"
formControlName="username"
class="text-gray-800">
</ion-input>
</ion-item>
<ion-item lines="none">
<ion-label position="stacked">Adresse email <ion-text color="danger">*</ion-text></ion-label>
<ion-input placeholder="Email" type="email" [clearInput]="true" email formControlName="email"></ion-input>
<ion-label class="text-xs text-gray-500 mb-1 block">
Email
<ion-text color="danger">*</ion-text>
</ion-label>
<ion-item lines="none" class="rounded-xl border border-gray-200 px-3">
<ion-input placeholder="Email"
type="email"
[clearInput]="true"
formControlName="email"
class="text-gray-800">
</ion-input>
</ion-item>
<ion-button class="mt-4" expand="block" (click)="updateUser()">Modifier</ion-button>
<ion-button expand="block"
class="mt-6 rounded-xl font-medium"
style="--background: #1f2937;"
(click)="updateUser()">
Modifier
</ion-button>
</form>
</div>
@@ -1,7 +1,7 @@
import {Component, inject, input, OnInit} from '@angular/core';
import {Component, inject, input, OnInit, output} from '@angular/core';
import {FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators} from "@angular/forms";
import {IonicModule, LoadingController, ToastController} from "@ionic/angular";
import {GetUserDetailsDto, GetUserDto, UsersService} from "../../services/api";
import {GetUserDetailsDto, GetUserStatsDto, UsersService} from "../../services/api";
import {firstValueFrom} from "rxjs";
@Component({
@@ -27,6 +27,7 @@ export class ProfilFormComponent implements OnInit {
})
user = input.required<GetUserDetailsDto>();
userEdited = output<GetUserDetailsDto>();
ngOnInit() {
this.profileForm.patchValue({
@@ -64,12 +65,28 @@ export class ProfilFormComponent implements OnInit {
await loading2.present();
try {
await firstValueFrom(this.usersServices.updateUserEndpoint(this.profileForm.getRawValue()));
const form = this.profileForm.getRawValue();
await firstValueFrom(this.usersServices.updateUserEndpoint(form));
const userEdited = {
id: this.user().id,
firstName: form.firstName,
name: form.name,
username: form.username,
email: form.email,
designationName: this.user().designationName,
creationDate: this.user().creationDate,
getUserStatsDto: this.user().getUserStatsDto
}
this.userEdited.emit(userEdited);
const toast = await this.toastCtrl.create({
message: 'Modification réussie',
duration: 2000,
color: 'success'
});
await loading2.dismiss();
await toast.present();
} catch {
@@ -78,6 +95,7 @@ export class ProfilFormComponent implements OnInit {
duration: 2000,
color: 'danger'
});
await loading2.dismiss();
await toast.present();
}
}