modification popup-update-user
This commit is contained in:
MiharyR
parent
080a50e2fe
commit
500b32626e
6 changed files with 156 additions and 83 deletions
|
|
@ -2,10 +2,6 @@
|
|||
|
||||
<!-- ------------------------------------------------------------------------------------ -->
|
||||
|
||||
<mat-label>Tags</mat-label>
|
||||
|
||||
<!-- ------------------------------------------------------------------------------------ -->
|
||||
|
||||
<mat-chip-list #chipList aria-label="Fruit selection">
|
||||
|
||||
<mat-chip
|
||||
|
|
@ -20,7 +16,7 @@
|
|||
</mat-chip>
|
||||
|
||||
<input
|
||||
placeholder="Tapez un tag et pressez 'Entré' pour l'inserer"
|
||||
placeholder="Tapez un centre d'intérêt"
|
||||
#tagInput
|
||||
[formControl]="formControl"
|
||||
[matAutocomplete]="auto"
|
||||
|
|
|
|||
|
|
@ -3,6 +3,10 @@ mat-form-field {
|
|||
font-size: small;
|
||||
}
|
||||
|
||||
mat-chip-list {
|
||||
font-size: small;
|
||||
}
|
||||
|
||||
mat-chip {
|
||||
font-size: small;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ export class PageProfilUserComponent implements OnInit
|
|||
onModifier()
|
||||
{
|
||||
const config = {
|
||||
width: '35%',
|
||||
width: '70%',
|
||||
data: { user: this.user }
|
||||
};
|
||||
this.dialog
|
||||
|
|
|
|||
|
|
@ -1,88 +1,125 @@
|
|||
<div class="myContainer">
|
||||
<div class="boite">
|
||||
|
||||
<!-- photo de profil -->
|
||||
<div style="text-align: center">
|
||||
<!-- Photo de profil -->
|
||||
<div style="text-align: center; font-size: small">
|
||||
<img [src]="userCopy.profilePictureUrl" onerror="this.onerror=null; this.src='assets/profil.png'"><br>
|
||||
<input title="lien vers image" type="text" [(ngModel)]="userCopy.profilePictureUrl" style="width: 90%">
|
||||
<input title="lien vers image"
|
||||
type="text"
|
||||
class="form-control inputUrlImage"
|
||||
style="font-size: small"
|
||||
[(ngModel)]="userCopy.profilePictureUrl">
|
||||
</div><br>
|
||||
|
||||
<!-- Col gauche & droite -->
|
||||
<div class="row">
|
||||
<ng-template *ngIf="true; then leftCol"></ng-template>
|
||||
<ng-template *ngIf="true; then rightCol"></ng-template>
|
||||
</div>
|
||||
|
||||
<!-- divider -->
|
||||
<br><mat-divider></mat-divider><br>
|
||||
|
||||
<!-- login -->
|
||||
<mat-form-field appearance="fill">
|
||||
<mat-label>Pseudo</mat-label>
|
||||
<input matInput type="text" [(ngModel)]="userCopy.login">
|
||||
</mat-form-field>
|
||||
<br>
|
||||
|
||||
<!-- email -->
|
||||
<mat-form-field appearance="fill">
|
||||
<mat-label>Email</mat-label>
|
||||
<input matInput type="text" [(ngModel)]="userCopy.mail">
|
||||
</mat-form-field>
|
||||
<br>
|
||||
|
||||
<!-- dateOfBirth -->
|
||||
<mat-form-field appearance="fill">
|
||||
<mat-label>Date de naissance</mat-label>
|
||||
<input matInput type="date"
|
||||
[ngModel] ="userCopy.dateOfBirth | date:'yyyy-MM-dd'"
|
||||
(ngModelChange)="userCopy.dateOfBirth = $event">
|
||||
</mat-form-field>
|
||||
<br>
|
||||
|
||||
<!-- gender -->
|
||||
<mat-radio-group [(ngModel)]="userCopy.gender">
|
||||
<mat-radio-button value="man"> Homme </mat-radio-button>
|
||||
<mat-radio-button value="woman"> Femme </mat-radio-button>
|
||||
</mat-radio-group>
|
||||
<br><br>
|
||||
|
||||
<!-- interets -->
|
||||
<app-input-interests-profil
|
||||
[myInterests]="userCopy.interests"
|
||||
(eventEmitter)="onEventInputInterests($event)"></app-input-interests-profil>
|
||||
|
||||
<!-- divider -->
|
||||
<br><mat-divider></mat-divider><br>
|
||||
|
||||
<!-- Modifier mot de passe -->
|
||||
<div style="margin-bottom: 10px">
|
||||
Modifier mot de passe:
|
||||
<mat-checkbox [(ngModel)]="changePassword"></mat-checkbox>
|
||||
</div>
|
||||
|
||||
<!-- nouveau mot de passe -->
|
||||
<div *ngIf="changePassword">
|
||||
<!-- Nouveau mot de passe -->
|
||||
<mat-form-field appearance="fill">
|
||||
<mat-label>Nouveau mot de passe</mat-label>
|
||||
<input matInput type="password" [(ngModel)]="newPassword">
|
||||
</mat-form-field>
|
||||
<br>
|
||||
<!-- Confirmation npuveau mot de passe -->
|
||||
<mat-form-field appearance="fill">
|
||||
<mat-label>Confirmation nouveau mot de passe</mat-label>
|
||||
<input matInput type="password" [(ngModel)]="confirmNewPassword">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div *ngIf="!changePassword"><br></div>
|
||||
|
||||
<!-- divider -->
|
||||
<mat-divider></mat-divider><br>
|
||||
|
||||
<!-- message d'erreur -->
|
||||
<div *ngIf="hasError" style="text-align: center; margin-bottom: 20px;">
|
||||
<span class="mat-error">{{errorMessage}}</span>
|
||||
<span class="mat-error"><br>{{errorMessage}}</span>
|
||||
</div>
|
||||
|
||||
<!-- boutons -->
|
||||
<!-- Boutons -->
|
||||
<div style="width: 100%; text-align: right">
|
||||
<button mat-button (click)="this.dialogRef.close(null)"> Annuler </button>
|
||||
<button mat-button (click)="onValider()"> Enregistrer </button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- ----------------------------------------------------------------------------------------------------------------------------- -->
|
||||
|
||||
|
||||
<!-- Colonne gauche -->
|
||||
<ng-template #leftCol>
|
||||
<div class="col-6">
|
||||
|
||||
<!-- login -->
|
||||
<div class="form-group row myRow">
|
||||
<label for="login" class="col-sm-6 col-form-label myLeftLabel">Login:</label>
|
||||
<div class="col-sm-6">
|
||||
<input type="text" class="form-control myValue" id="login" [(ngModel)]="userCopy.login">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- dateOfBirth -->
|
||||
<div class="form-group row myRow">
|
||||
<label for="dateOfBirth" class="col-sm-6 col-form-label myLeftLabel">Date de naissance:</label>
|
||||
<div class="col-sm-6">
|
||||
<input type="date"
|
||||
class="form-control myValue"
|
||||
id="dateOfBirth"
|
||||
[ngModel] ="userCopy.dateOfBirth | date:'yyyy-MM-dd'"
|
||||
(ngModelChange)="userCopy.dateOfBirth = $event">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- sexe -->
|
||||
<div class="myRow" style="text-align: right; margin-right: 15px">
|
||||
<mat-radio-group [(ngModel)]="userCopy.gender">
|
||||
<mat-radio-button value="man"> Homme </mat-radio-button>
|
||||
<mat-radio-button value="woman"> Femme </mat-radio-button>
|
||||
</mat-radio-group>
|
||||
</div>
|
||||
|
||||
<!-- Modifier mot de passe -->
|
||||
<div class="form-group row" style="margin: 10px 0px 10px 0px">
|
||||
<label for="changePassword" class="col-sm-6 col-form-label myLeftLabel">Modifier mot de passe:</label>
|
||||
<div class="col-sm-6">
|
||||
<mat-checkbox id="changePassword" [(ngModel)]="changePassword"></mat-checkbox>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Nouveau mot de passe -->
|
||||
<div class="form-group row" style="margin: 10px 0px 10px 0px">
|
||||
<label for="newPassword" class="col-sm-6 col-form-label myLeftLabel"></label>
|
||||
<div class="col-sm-6">
|
||||
<input type="password"
|
||||
class="form-control myValue"
|
||||
id="newPassword"
|
||||
placeholder=" Nouveau mot de passe"
|
||||
[(ngModel)]="newPassword"
|
||||
[disabled]="!changePassword">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Confirmation nouveau mot de passe -->
|
||||
<div class="form-group row" style="margin: 10px 0px 10px 0px">
|
||||
<label for="confimNewPassword" class="col-sm-6 col-form-label myLeftLabel"></label>
|
||||
<div class="col-sm-6">
|
||||
<input type="password"
|
||||
class="form-control myValue"
|
||||
id="confimNewPassword"
|
||||
placeholder=" Confirmation nouveau mot de passe"
|
||||
[(ngModel)]="confirmNewPassword"
|
||||
[disabled]="!changePassword">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</ng-template>
|
||||
|
||||
|
||||
<!-- ----------------------------------------------------------------------------------------------------------------------------- -->
|
||||
|
||||
|
||||
<!-- Colonne droite -->
|
||||
<ng-template #rightCol>
|
||||
<div class="col-6" style="border-left: solid 1px #e6e6e6">
|
||||
|
||||
<!-- interests -->
|
||||
<div class="form-group row myRow">
|
||||
<label for="interests" class="col-sm-3 col-form-label myLeftLabel">Centres d'intérêt:</label>
|
||||
<div class="col-sm-9">
|
||||
<app-input-interests-profil
|
||||
id="interests"
|
||||
[myInterests]="userCopy.interests"
|
||||
(eventEmitter)="onEventInputInterests($event)"></app-input-interests-profil>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</ng-template>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
.boite {
|
||||
.myContainer {
|
||||
font-size: small;
|
||||
}
|
||||
|
||||
|
|
@ -15,6 +15,42 @@ img {
|
|||
font-size: xxx-large;
|
||||
}
|
||||
|
||||
.inputUrlImage {
|
||||
width: 80%;
|
||||
text-align: center;
|
||||
margin-left: 10%;
|
||||
margin-right: 10%;
|
||||
font-size: small;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
input {
|
||||
font-size: small;
|
||||
}
|
||||
|
||||
// -------------------------------------------------------------------------
|
||||
|
||||
.myRow {
|
||||
margin: 15px 0px 15px 0px;
|
||||
}
|
||||
.myLeftLabel {
|
||||
text-align: right;
|
||||
padding: 0px 0px 0px 0px;
|
||||
margin: 0px 0px 0px 0px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.myRightLabel {
|
||||
text-align: left;
|
||||
padding: 0px 0px 0px 0px;
|
||||
margin: 0px 0px 0px 0px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.myValue {
|
||||
text-align: left;
|
||||
padding: 0px 0px 0px 0px;
|
||||
margin: 0px 0px 0px 0px;
|
||||
}
|
||||
|
||||
// -------------------------------------------------------------------------
|
||||
|
||||
// aura
|
||||
|
|
|
|||
|
|
@ -67,15 +67,15 @@ export class PopupUpdateUserComponent implements OnInit
|
|||
checkField()
|
||||
{
|
||||
if(this.userCopy.login.length === 0) {
|
||||
this.errorMessage = "Veuillez remplir le champ 'login'" ;
|
||||
this.errorMessage = "Veuillez remplir le champ 'login'." ;
|
||||
this.hasError = true;
|
||||
}
|
||||
else if(this.userCopy.mail.length === 0) {
|
||||
this.errorMessage = "Veuillez remplir le champ 'email'" ;
|
||||
this.errorMessage = "Veuillez remplir le champ 'email'." ;
|
||||
this.hasError = true;
|
||||
}
|
||||
else if(!this.isValidEmail(this.userCopy.mail)) {
|
||||
this.errorMessage = "Email invalide" ;
|
||||
this.errorMessage = "Email invalide." ;
|
||||
this.hasError = true;
|
||||
}
|
||||
else if((this.userCopy.dateOfBirth === undefined) || (this.userCopy.dateOfBirth === null)) {
|
||||
|
|
@ -84,10 +84,10 @@ export class PopupUpdateUserComponent implements OnInit
|
|||
}
|
||||
else if(this.changePassword) {
|
||||
if (this.newPassword.length === 0) {
|
||||
this.errorMessage = "Veuillez remplir le champ 'mot de passe'" ;
|
||||
this.errorMessage = "Veuillez remplir le champ 'mot de passe'." ;
|
||||
this.hasError = true;
|
||||
} else if (this.newPassword !== this.confirmNewPassword) {
|
||||
this.errorMessage = "Le mot de passe est différent de sa confirmation" ;
|
||||
this.errorMessage = "Le mot de passe est différent de sa confirmation." ;
|
||||
this.hasError = true;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Reference in a new issue