profile improvements, aliases feature

src/app/ui/profilefields/profilefield.dialog.html

@@ -4,35 +4,52 @@
     <mat-form-field>
       <input matInput type="text" min="3" [(ngModel)]="profileField.name" formControlName="name"
         placeholder="{{'profileField.name' | i18n}}">
+        <mat-error>
+          {{'profileField.error.name' | i18n}}
+        </mat-error>
     </mat-form-field>
 
-
     <mat-form-field>
       <mat-select [(ngModel)]="profileField.type" formControlName="type" placeholder="{{'profileField.type' | i18n}}">
         <mat-option *ngFor="let type of types" [value]="type">
           {{'profileField.type.' + type | i18n}}
         </mat-option>
       </mat-select>
+      <mat-error>
+        {{'profileField.error.type' | i18n}}
+      </mat-error>
     </mat-form-field>
 
     <div [ngSwitch]="profileField.type">
       <mat-form-field *ngSwitchCase="'TEXT'">
         <input matInput type="text" max="255" [(ngModel)]="profileField.value" formControlName="value"
           placeholder="{{'profileField.value' | i18n}}">
+        <mat-error>
+          {{'profileField.error.TEXT' | i18n}}
+        </mat-error>
       </mat-form-field>
       <mat-form-field *ngSwitchCase="'DATE'">
         <input matInput [matDatepicker]="picker" [(ngModel)]="profileField.value" formControlName="value"
           placeholder="{{'profileField.value' | i18n}}">
         <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
         <mat-datepicker #picker></mat-datepicker>
+        <mat-error>
+          {{'profileField.error.DATE' | i18n}}
+        </mat-error>
       </mat-form-field>
       <mat-form-field *ngSwitchCase="'URL'">
         <input matInput type="url" [(ngModel)]="profileField.value" formControlName="value"
           placeholder="{{'profileField.value' | i18n}}">
+          <mat-error>
+            {{'profileField.error.URL' | i18n}}
+          </mat-error>
       </mat-form-field>
       <mat-form-field *ngSwitchCase="'EMAIL'">
         <input matInput type="email" [(ngModel)]="profileField.value" formControlName="value"
           placeholder="{{'profileField.value' | i18n}}">
+          <mat-error>
+            {{'profileField.error.EMAIL' | i18n}}
+          </mat-error>
       </mat-form-field>
       <mat-slide-toggle *ngSwitchCase="'BOOL'" (change)="booleanChange(profileField)"
         [checked]="profileField.value == 'true'">
@@ -41,31 +58,49 @@
       <mat-form-field *ngSwitchCase="'NUMBER'">
         <input matInput type="number" [(ngModel)]="profileField.value" formControlName="value"
           placeholder="{{'profileField.value' | i18n}}">
+          <mat-error>
+            {{'profileField.error.NUMBER' | i18n}}
+          </mat-error>
       </mat-form-field>
       <mat-form-field *ngSwitchCase="'BLOB'">
         <textarea matInput [(ngModel)]="profileField.blob" formControlName="blob"
           placeholder="{{'profileField.value' | i18n}}"></textarea>
+          <mat-error>
+            {{'profileField.error.BLOB' | i18n}}
+          </mat-error>
       </mat-form-field>
     </div>
 
 
     <mat-form-field>
       <mat-select [(ngModel)]="profileField.visibility" formControlName="visibility"
-        placeholder="{{'profileField.visibility' | i18n}}">
+        placeholder="{{'visibility' | i18n}}">
         <mat-option *ngFor="let visibility of visibilities" [value]="visibility">
-          {{'profileField.visibility.' + visibility | i18n}}
+          <mat-icon inline="true">{{'visibility.' + visibility + '.icon' | i18n}}</mat-icon> {{'visibility.' +
+          visibility | i18n}}
         </mat-option>
+
+        <mat-select-trigger>
+          <mat-icon inline="true">{{'visibility.' + profileField.visibility + '.icon' | i18n}}</mat-icon> {{'visibility.' +
+          profileField.visibility | i18n}}
+        </mat-select-trigger>
       </mat-select>
+      <mat-error>
+        {{'profileField.error.visibility' | i18n}}
+      </mat-error>
     </mat-form-field>
 
     <mat-form-field>
       <input matInput type="number" min="0" [(ngModel)]="profileField.index" formControlName="index"
         placeholder="{{'profileField.index' | i18n}}">
+        <mat-error>
+          {{'profileField.error.index' | i18n}}
+        </mat-error>
     </mat-form-field>
   </form>
 </mat-dialog-content>
 <mat-dialog-actions>
   <button mat-button [mat-dialog-close]="false">{{'cancel' | i18n}}</button>
-  <button [disabled]="form.invalid" mat-raised-button [mat-dialog-close]="profileField" color="accent">{{'save' |
+  <button [disabled]="form.invalid" mat-raised-button (click)="save(profileField)" color="accent">{{'save' |
     i18n}}</button>
 </mat-dialog-actions>

src/app/ui/profilefields/profilefields.component.html

@@ -24,14 +24,14 @@
     </ng-container>
 
     <ng-container matColumnDef="visibility" *ngIf="edit">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header="visibility"> {{'profileField.visibility' | i18n}} </th>
-        <td mat-cell *matCellDef="let profileField"> {{'profileField.visibility.' + profileField.visibility | i18n}}
+        <th mat-header-cell *matHeaderCellDef mat-sort-header="visibility"> {{'visibility' | i18n}} </th>
+        <td mat-cell *matCellDef="let profileField"> <mat-icon inline="true">{{'visibility.' + profileField.visibility + '.icon' | i18n}}</mat-icon> {{'visibility.' + profileField.visibility | i18n}}
         </td>
     </ng-container>
 
     <ng-container matColumnDef="edit" *ngIf="edit">
-        <th mat-header-cell *matHeaderCellDef> {{'profileField.edit' | i18n}} </th>
-        <td mat-cell *matCellDef="let profileField">
+        <th mat-header-cell *matHeaderCellDef class="text-right"> {{'profileField.edit' | i18n}} </th>
+        <td mat-cell *matCellDef="let profileField" class="text-right">
             <a mat-icon-button>
                 <mat-icon (click)="openEdit(profileField)">edit</mat-icon>
             </a>
@@ -39,8 +39,8 @@
     </ng-container>
 
     <ng-container matColumnDef="delete" *ngIf="edit">
-        <th mat-header-cell *matHeaderCellDef> {{'profileField.delete' | i18n}} </th>
-        <td mat-cell *matCellDef="let profileField">
+        <th mat-header-cell *matHeaderCellDef class="align-right"> {{'profileField.delete' | i18n}} </th>
+        <td mat-cell *matCellDef="let profileField" class="text-right">
             <a mat-icon-button>
                 <mat-icon (click)="confirmDelete(profileField)">delete</mat-icon>
             </a>

src/app/ui/profilefields/profilefields.component.scss

@@ -1,3 +1,16 @@
 table {
-    width: 100%;
-}
+  width: 100%;
+}
+
+.mat-header-cell,
+.mat-cell {
+  &.text-right {
+    text-align: right;
+  }
+}
+
+.align-right {
+  display: flex;
+  padding: 21px 0;
+  justify-content: flex-end;
+}

src/app/ui/profilefields/profilefields.component.ts

@@ -2,9 +2,9 @@ import {Component, OnInit, Inject, Input} from '@angular/core';
 import {Sort} from '@angular/material/sort';
 import {FormBuilder, FormGroup, Validators} from '@angular/forms';
 import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog';
+import {ConfirmDialog} from '../confirm/confirm.component';
 import {I18nService} from '../../services/i18n.service';
 import {ProfileService} from '../../services/profile.service';
-import {ConfirmDialog} from '../confirm/confirm.component';
 
 @Component({
   selector: 'app-profilefields',
@@ -13,9 +13,10 @@ import {ConfirmDialog} from '../confirm/confirm.component';
 })
 export class ProfileFieldsComponent implements OnInit {
 
-  @Input() profileFields: Array<any>;
+  @Input() username;
   @Input() edit;
   profileFieldColumns = ["name", "value"];
+  profileFields: Array<any> = [];
 
   constructor(private i18n: I18nService, private profileService: ProfileService, public dialog: MatDialog) {}
 
@@ -25,6 +26,20 @@ export class ProfileFieldsComponent implements OnInit {
       this.profileFieldColumns.push("edit");
       this.profileFieldColumns.push("delete");
     }
+    this.update();
+  }
+
+
+  update() {
+    if(this.username) {
+      this.profileService.getAllForUser(this.username).subscribe((data: any) => {
+        this.profileFields = data.profileFields;
+      })
+    } else {
+      this.profileService.getAll().subscribe((data: any) => {
+        this.profileFields = data;
+      })
+    }
   }
 
   sortData(sort: Sort) {
@@ -40,6 +55,7 @@ export class ProfileFieldsComponent implements OnInit {
         case 'name': return this.compare(this.i18n.get('profileField.name.' + a.name, []), this.i18n.get('profileField.name.' + b.name, []), isAsc);
         case 'value': return this.compare(a.value, b.value, isAsc);
         case 'index': return this.compare(a.index, b.index, isAsc);
+        case 'visibility': return this.compare(this.i18n.get('visibility.' + a.visibility, []), this.i18n.get('visibility.' + b.visibility, []), isAsc);
         default: return 0;
       }
     });
@@ -85,8 +101,7 @@ export class ProfileFieldsComponent implements OnInit {
     dialogRef.afterClosed().subscribe(result => {
       if(result) {
         this.profileService.delete(profileField.name).subscribe((result: any) => {
-          this.profileFields.splice(this.profileFields.indexOf(profileField), 1);
-          this.profileFields = [...this.profileFields];
+          this.update();
         })
       }
     });
@@ -100,10 +115,7 @@ export class ProfileFieldsComponent implements OnInit {
 
     dialogRef.afterClosed().subscribe(result => {
       if(result) {
-        this.profileService.createOrUpdate(result).subscribe((result: any) => {
-          this.profileFields.push(result);
-          this.profileFields = [...this.profileFields];
-        });
+        this.update();
       }
     });
 
@@ -132,6 +144,7 @@ export class ProfileFieldDialog {
   visibilities = ["PRIVATE", "PROTECTED", "PUBLIC"];
 
   constructor(
+    private profileService: ProfileService,
     private formBuilder: FormBuilder,
     public dialogRef: MatDialogRef<ProfileFieldDialog>,
     @Inject(MAT_DIALOG_DATA) public data: any) {
@@ -157,6 +170,25 @@ export class ProfileFieldDialog {
     }
   }
 
+
+  save(profileField) {
+    this.profileService.createOrUpdate(profileField).subscribe((result: any) => {
+      this.dialogRef.close(profileField);
+    }, (error) => {
+      if(error.status == 409) {
+        let errors = {};
+        for(let code of error.error) {
+          errors[code.field] = errors[code.field] || {};
+          errors[code.field][code.code] = true;
+        }
+
+        for(let code in errors) {
+          this.form.get(code).setErrors(errors[code]);
+        }
+      }
+    });
+  }
+
 }