From ece6096064315740e5f79d0cb7f318d53866731c Mon Sep 17 00:00:00 2001
From: Peter Bastiani <peter.bastiani@akkerweb.nl>
Date: Sat, 27 Feb 2021 10:16:07 +0100
Subject: [PATCH 1/6] AW-1881 Avatar

---
 .../src/fm/components/avatar/avatar.component.html     | 10 +++++++++-
 .../src/fm/components/avatar/avatar.component.ts       | 10 +++++++++-
 .../fm/components/user-menu/user-menu.component.html   |  2 +-
 3 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/projects/common/src/fm/components/avatar/avatar.component.html b/projects/common/src/fm/components/avatar/avatar.component.html
index 89b465e..a0ed7ea 100644
--- a/projects/common/src/fm/components/avatar/avatar.component.html
+++ b/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 [title]="user.name">
+    <ngx-avatar
+        [size]="size"
+        [round]="round"
+        [name]="getName()"
+        [src]="getAvatar()"
+        (clickOnAvatar)="onClick()">
+    </ngx-avatar>
+</span>
\ No newline at end of file
diff --git a/projects/common/src/fm/components/avatar/avatar.component.ts b/projects/common/src/fm/components/avatar/avatar.component.ts
index ab343e2..e6b6510 100644
--- a/projects/common/src/fm/components/avatar/avatar.component.ts
+++ b/projects/common/src/fm/components/avatar/avatar.component.ts
@@ -1,5 +1,6 @@
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { IUser } from '../../models/user';
+import { AppConfig } from '../../shared/app.config';
 
 @Component({
   selector: 'fm-avatar',
@@ -16,11 +17,18 @@ export class AvatarComponent implements OnInit {
 
   @Output() click = new EventEmitter();
   
-  constructor() { }
+  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`;
+  }
+
   getName():string {
     if (!this.user) return null;
     if (this.user.firstName && this.user.lastName)
diff --git a/projects/common/src/fm/components/user-menu/user-menu.component.html b/projects/common/src/fm/components/user-menu/user-menu.component.html
index c625332..86f59c3 100644
--- a/projects/common/src/fm/components/user-menu/user-menu.component.html
+++ b/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"></fm-avatar></span>
         <div class="menu hidden" [ngClass]="{'hidden':!showMenu}">           
                 <div  class="card" *ngIf="user">           
                     <div class="card-body">

From 3673e0b349731003bedc696ac63f84aec0549f91 Mon Sep 17 00:00:00 2001
From: Peter Bastiani <peter.bastiani@akkerweb.nl>
Date: Sat, 27 Feb 2021 10:27:49 +0100
Subject: [PATCH 2/6] Fixes

---
 projects/common/src/fm/components/avatar/avatar.component.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/projects/common/src/fm/components/avatar/avatar.component.ts b/projects/common/src/fm/components/avatar/avatar.component.ts
index e6b6510..4b323cb 100644
--- a/projects/common/src/fm/components/avatar/avatar.component.ts
+++ b/projects/common/src/fm/components/avatar/avatar.component.ts
@@ -13,7 +13,7 @@ export class AvatarComponent implements OnInit {
   @Input() bgColor: string;
   @Input() fgColor: string;
   @Input() size: number;
-  @Input() round: boolean;
+  @Input() round: boolean = true;
 
   @Output() click = new EventEmitter();
   
@@ -26,7 +26,7 @@ export class AvatarComponent implements OnInit {
   getAvatar():string {
     if (!this.user) return null;
     const apiEndpoint = this.appConfig.getConfig("apiEndPoint");
-    return `${apiEndpoint}/api/v1/users//${this.user.code}/avatar`;
+    return `${apiEndpoint}/api/v1/users/${this.user.code}/avatar`;
   }
 
   getName():string {

From 7c125f1771cf08b3e353b2f982e4eab94b64793a Mon Sep 17 00:00:00 2001
From: Peter Bastiani <peter.bastiani@akkerweb.nl>
Date: Sat, 27 Feb 2021 14:47:16 +0100
Subject: [PATCH 3/6] AW-1881

---
 projects/common/src/fm/components/avatar/avatar.component.html  | 2 +-
 .../common/src/fm/components/user-menu/user-menu.component.html | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/projects/common/src/fm/components/avatar/avatar.component.html b/projects/common/src/fm/components/avatar/avatar.component.html
index a0ed7ea..35c4bde 100644
--- a/projects/common/src/fm/components/avatar/avatar.component.html
+++ b/projects/common/src/fm/components/avatar/avatar.component.html
@@ -1,4 +1,4 @@
-<span [title]="user.name">
+<span [title]="getName()">
     <ngx-avatar
         [size]="size"
         [round]="round"
diff --git a/projects/common/src/fm/components/user-menu/user-menu.component.html b/projects/common/src/fm/components/user-menu/user-menu.component.html
index 86f59c3..50fc52d 100644
--- a/projects/common/src/fm/components/user-menu/user-menu.component.html
+++ b/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"><fm-avatar [user]="user"></fm-avatar></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">

From 0bb5406773855ab444ebdef825c6efba8302610b Mon Sep 17 00:00:00 2001
From: Peter Bastiani <peter.bastiani@akkerweb.nl>
Date: Mon, 1 Mar 2021 12:32:14 +0100
Subject: [PATCH 4/6] AW-1881

---
 .../fm/components/avatar/avatar.component.css | 13 +++++++
 .../components/avatar/avatar.component.html   | 16 ++++----
 .../fm/components/avatar/avatar.component.ts  | 38 +++++++++++--------
 3 files changed, 42 insertions(+), 25 deletions(-)

diff --git a/projects/common/src/fm/components/avatar/avatar.component.css b/projects/common/src/fm/components/avatar/avatar.component.css
index e69de29..43063a0 100644
--- a/projects/common/src/fm/components/avatar/avatar.component.css
+++ b/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;
+}
\ No newline at end of file
diff --git a/projects/common/src/fm/components/avatar/avatar.component.html b/projects/common/src/fm/components/avatar/avatar.component.html
index 35c4bde..4e03832 100644
--- a/projects/common/src/fm/components/avatar/avatar.component.html
+++ b/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>
\ No newline at end of file
+<div class="avatar-container" [title]="name" (click)="onClick($event)">
+	<ngx-avatar 
+		[src]="src" 
+		[name]="name" 
+		[size]="size">
+	</ngx-avatar>
+</div>
\ No newline at end of file
diff --git a/projects/common/src/fm/components/avatar/avatar.component.ts b/projects/common/src/fm/components/avatar/avatar.component.ts
index 4b323cb..a0d93d8 100644
--- a/projects/common/src/fm/components/avatar/avatar.component.ts
+++ b/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;
+  }
+}
\ No newline at end of file

From 38e64a071369a6eda542e802abf3fb71d1258eee Mon Sep 17 00:00:00 2001
From: Peter Bastiani <peter.bastiani@akkerweb.nl>
Date: Mon, 1 Mar 2021 12:38:16 +0100
Subject: [PATCH 5/6] Fix

---
 projects/common/src/fm/components/avatar/avatar.component.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/projects/common/src/fm/components/avatar/avatar.component.ts b/projects/common/src/fm/components/avatar/avatar.component.ts
index a0d93d8..5672e66 100644
--- a/projects/common/src/fm/components/avatar/avatar.component.ts
+++ b/projects/common/src/fm/components/avatar/avatar.component.ts
@@ -7,7 +7,7 @@ import { AppConfig } from '../../shared/app.config';
   templateUrl: './avatar.component.html',
   styleUrls: ['./avatar.component.css']
 })
-export class TestAvatarComponent implements OnInit {
+export class AvatarComponent implements OnInit {
 
   @Input() user: IUser;
   @Input() bgColor: string;

From 3c0f220ee3d66a02191615234740c29a0c2af30b Mon Sep 17 00:00:00 2001
From: Peter Bastiani <peter.bastiani@akkerweb.nl>
Date: Mon, 1 Mar 2021 12:49:12 +0100
Subject: [PATCH 6/6] Span required instead of div

---
 .../common/src/fm/components/avatar/avatar.component.html | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/projects/common/src/fm/components/avatar/avatar.component.html b/projects/common/src/fm/components/avatar/avatar.component.html
index 4e03832..013152f 100644
--- a/projects/common/src/fm/components/avatar/avatar.component.html
+++ b/projects/common/src/fm/components/avatar/avatar.component.html
@@ -1,7 +1,9 @@
-<div class="avatar-container" [title]="name" (click)="onClick($event)">
+<span class="avatar-container" [title]="name">
 	<ngx-avatar 
 		[src]="src" 
 		[name]="name" 
-		[size]="size">
+		[size]="size"
+		[round]='true'
+		>
 	</ngx-avatar>
-</div>
\ No newline at end of file
+</span>
\ No newline at end of file