Finished form to edit user infos
This commit is contained in:
@@ -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();
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user