modification popup-update-user

src/app/user/myProfil/input-interests-profil/input-interests-profil.component.html

@@ -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"

src/app/user/myProfil/input-interests-profil/input-interests-profil.component.scss

@@ -3,6 +3,10 @@ mat-form-field {
   font-size: small;
 }
 
+mat-chip-list {
+  font-size: small;
+}
+
 mat-chip {
   font-size: small;
 }

src/app/user/myProfil/page-profil-user/page-profil-user.component.ts

@@ -33,7 +33,7 @@ export class PageProfilUserComponent implements OnInit
     onModifier()
     {
         const config = {
-            width: '35%',
+            width: '70%',
             data: { user: this.user }
         };
         this.dialog

src/app/user/myProfil/popup-update-user/popup-update-user.component.html

@@ -1,88 +1,125 @@
 <div class="myContainer">
-    <div class="boite">
 
-        <!-- photo de profil -->
+    <!-- Photo de profil -->
-        <div style="text-align: center">
+    <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>&nbsp; &nbsp;
-            <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>&nbsp; &nbsp;
+                <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>

src/app/user/myProfil/popup-update-user/popup-update-user.component.scss

@@ -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

src/app/user/myProfil/popup-update-user/popup-update-user.component.ts

@@ -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;
             }
         }