Merge branch 'develop' into feature/thumbnail_upload

projects/common/src/fm/components/avatar/avatar.component.css

@@ -0,0 +1,13 @@
+.avatar-container {
+    position: relative;
+}
+.avatar-text {
+    position: absolute;
+    top: 25px;
+    left: 10px;
+    bottom: 20px;
+    right: 20px;
+    color: white;
+    padding-left: 20px;
+    padding-right: 20px;
+}

projects/common/src/fm/components/avatar/avatar.component.html

@@ -1 +1,9 @@
-<ngx-avatar [size]="size" [round]="round" name="getName()" (clickOnAvatar)="onClick()"></ngx-avatar>
+<span class="avatar-container" [title]="name">
+	<ngx-avatar 
+		[src]="src" 
+		[name]="name" 
+		[size]="size"
+		[round]='true'
+		>
+	</ngx-avatar>
+</span>

projects/common/src/fm/components/avatar/avatar.component.ts

@@ -1,5 +1,6 @@
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output, SimpleChanges } from '@angular/core';
 import { IUser } from '../../models/user';
+import { AppConfig } from '../../shared/app.config';
 
 @Component({
   selector: 'fm-avatar',
@@ -11,24 +12,37 @@ export class AvatarComponent implements OnInit {
   @Input() user: IUser;
   @Input() bgColor: string;
   @Input() fgColor: string;
-  @Input() size: number;
+  @Input() size: number = 75;
-  @Input() round: boolean;
+  @Input() round: boolean = true;
 
   @Output() click = new EventEmitter();
   
-  constructor() { }
+  src : string = null;
+  name : string = null;
+
+  constructor(private appConfig: AppConfig) {
+  }
 
   ngOnInit(): void {
   }
 
-  getName():string {
+  ngOnChanges(changes: SimpleChanges): void {
-    if (!this.user) return null;
+    if (changes['user']) {
-    if (this.user.firstName && this.user.lastName)
+      const user: IUser = changes['user'].currentValue;
-      return this.user.firstName + ' ' + this.user.lastName;
+      this.refresh(user);
-    return this.user.name;
+    }
   }
 
-  onClick() {
+  onClick(event: MouseEvent) {
+    event.stopPropagation();
     this.click.emit();
   }
+
+  refresh(user: IUser) {
+    if (!user) return null;
+    const apiEndpoint = this.appConfig.getConfig("apiEndPoint");
+    this.src = `${apiEndpoint}/api/v1/users/${user.code}/avatar`;
+    this.name = user.firstName && user.lastName ? 
+      user.firstName + ' ' + user.lastName : user.name;
+  }
 }

projects/common/src/fm/components/user-menu/user-menu.component.html

@@ -1,6 +1,6 @@
 <div>
     <div (click)="toggle($event)" class="rounded-circle menu-button hidden" [ngClass]="{'hidden':!user}">
-        <span *ngIf="user"><span  [title]="user.name">{{getLetter()}}</span></span>
+        <span *ngIf="user"><fm-avatar [user]="user" size="40"></fm-avatar></span>
         <div class="menu hidden" [ngClass]="{'hidden':!showMenu}">           
                 <div  class="card" *ngIf="user">           
                     <div class="card-body">