[Trunk | Library]: login/userMini.component.ts: Add dashboard view & name parsing to get first letters.

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@57864 d315682c-612b-4755-9ff5-7f18f6832af3

login/userMini.component.ts

@@ -10,6 +10,8 @@ import{EnvProperties} from '../utils/properties/env-properties';
 @Component({
     selector: 'user-mini',
     template: `
+      <ng-container *ngIf="!dashboard">
+        
         <ul *ngIf="!mobileView"  class="uk-navbar-nav">
           <li class="uk-parent">
 
@@ -39,8 +41,12 @@ import{EnvProperties} from '../utils/properties/env-properties';
                   </div>
                   <div id="logout1"></div>
                </div>
-  </div>   </li>
+            </div>   
+          </li>
         </ul>
+      </ng-container>
+
+      <ng-container *ngIf="!dashboard">
 
         <li *ngIf="mobileView" class="uk-nav-header uk-parent " >
 
@@ -66,15 +72,50 @@ import{EnvProperties} from '../utils/properties/env-properties';
             <li><a (click)="logOut()" id="logout" >Log out</a></li>
           </ul>
         </li>
+      </ng-container>
+
+      <ng-container *ngIf="dashboard">
+        <a  *ngIf="!loggedIn" class="loginLink uk-light" (click)="logIn()" >
+          Sign in  <span class=" uk-margin-small-left uk-margin-small-right uk-icon" ><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" ratio="1"><circle fill="none" stroke="#000" stroke-width="1.1" cx="9.9" cy="6.4" r="4.4"></circle><path fill="none" stroke="#000" stroke-width="1.1" d="M1.5,19 C2.3,14.5 5.8,11.2 10,11.2 C14.2,11.2 17.7,14.6 18.5,19.2"></path></svg> </span>
+        </a>
+        <a *ngIf="loggedIn" class="user_action_image">
+          <svg height="60" width="60">
+            <circle cx="30" cy="30" r="20" stroke="white" fill="white" stroke-width="3"></circle>
+            <text x="50%" y="50%" text-anchor="middle" fill="#313179" stroke="#313179"  dy=".4em" font-size="1.5em">
+              {{firstLetters}}
+            </text>
+          </svg>
+        </a>
+        <div *ngIf="loggedIn" uk-dropdown="mode: click; offset: -2; delay-hide: 0; flip: false" #userMenu
+             class="uk-padding-large uk-padding-remove-vertical uk-padding-remove-right uk-drop">
+          <div class="md-card uk-dark">
+            <div class="md-card-content uk-position-relative">
+              <ul class="uk-nav uk-navbar-dropdown-nav">
+                <ng-container *ngFor="let item of userMenuItems ">
+                  <li *ngIf="item.needsAuthorization && isAuthorized || !item.needsAuthorization">
+                    <a *ngIf="item.route.length > 0" routerLink="{{item.route}}" [queryParams]=item.params >{{item.title}}</a>
+                    <a *ngIf="item.route.length == 0 && item.url.length > 0" href="{{item.url}}" target="_blank"  >{{item.title}}</a>
+                  </li>
+                </ng-container>
+                <li *ngIf="userMenuItems.length > 0" class="uk-nav-divider"></li>
+                <li><a (click)="logOut()" id="logout" >Log out</a></li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </ng-container>
+      
       <div id="logout2"></div>
     `
 })
 
 export class UserMiniComponent implements OnInit, OnChanges{
     @Input() user: User;
+    public firstLetters: string = "";
     public loggedIn: boolean = false;
     public isAuthorized: boolean = false;
     @Input() public mobileView:boolean = false ;
+    @Input() public dashboard: boolean = false;
     public server: boolean = true;
     public routerHelper:RouterHelper = new RouterHelper();
     @Input() userMenuItems;
@@ -117,6 +158,7 @@ export class UserMiniComponent implements OnInit, OnChanges{
       }
       if(this.user){
           this.loggedIn = true;
+          this.parseName();
           this.isAuthorized = Session.isClaimsCurator(this.user) || Session.isPortalAdministrator(this.user);
 
       }else {
@@ -148,4 +190,16 @@ export class UserMiniComponent implements OnInit, OnChanges{
       el.classList.remove('uk-open');
     }
 
+    parseName() {
+      if(this.user && this.user.firstname) {
+        this.firstLetters += this.user.firstname.substr(0, 1);
+      }
+      if(this.user && this.user.lastname) {
+        this.firstLetters += this.user.lastname.substr(0, 1);
+      }
+      if(!this.firstLetters && this.user && this.user.fullname) {
+        let matches = this.user.fullname.match(/\b(\w)/g);
+        this.firstLetters += matches.join('');
+      }
+    }
 }