AW-1881

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,9 +1,7 @@
-<span [title]="getName()">
-    <ngx-avatar
-        [size]="size"
-        [round]="round"
-        [name]="getName()"
-        [src]="getAvatar()"
-        (clickOnAvatar)="onClick()">
-    </ngx-avatar>
-</span>
+<div class="avatar-container" [title]="name" (click)="onClick($event)">
+	<ngx-avatar 
+		[src]="src" 
+		[name]="name" 
+		[size]="size">
+	</ngx-avatar>
+</div>

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

@@ -1,4 +1,4 @@
-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';
 
@@ -7,36 +7,42 @@ import { AppConfig } from '../../shared/app.config';
   templateUrl: './avatar.component.html',
   styleUrls: ['./avatar.component.css']
 })
-export class AvatarComponent implements OnInit {
+export class TestAvatarComponent implements OnInit {
 
   @Input() user: IUser;
   @Input() bgColor: string;
   @Input() fgColor: string;
-  @Input() size: number;
+  @Input() size: number = 75;
   @Input() round: boolean = true;
 
   @Output() click = new EventEmitter();
   
+  src : string = null;
+  name : string = null;
+
   constructor(private appConfig: AppConfig) {
   }
 
   ngOnInit(): void {
   }
 
-  getAvatar():string {
-    if (!this.user) return null;
-    const apiEndpoint = this.appConfig.getConfig("apiEndPoint");
-    return `${apiEndpoint}/api/v1/users/${this.user.code}/avatar`;
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['user']) {
+      const user: IUser = changes['user'].currentValue;
+      this.refresh(user);
+    }
   }
 
-  getName():string {
-    if (!this.user) return null;
-    if (this.user.firstName && this.user.lastName)
-      return this.user.firstName + ' ' + this.user.lastName;
-    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;
+  }
 }