D-Net

import {Component, ElementRef, Input, OnChanges, OnInit, SimpleChanges} from '@angular/core';

import {ActivatedRoute, Router} from '@angular/router';

import {Location} from '@angular/common';

import {User, Session} from './utils/helper.class';

import {RouterHelper} from '../utils/routerHelper.class';

import {StringUtils} from '../utils/string-utils.class';

import {EnvProperties} from '../utils/properties/env-properties';

// declare var logoutClicked;

@Component({

    selector: 'user-mini',

    template: `

      <ng-container *ngIf="!dashboard">

        <ul *ngIf="!mobileView" class="uk-navbar-nav">

          <li class="uk-parent">

            <a *ngIf="loggedIn">

              <span>{{user.fullname + " "}} <span class="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></span>

            </a>

            <a *ngIf="!loggedIn" class="loginLink" (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>

            <div *ngIf="loggedIn" class="uk-navbar-dropdown uk-navbar-dropdown-bottom-left" id="userMenu"

                 (click)="onClick('userMenu')">

              <div class="uk-navbar-dropdown-grid uk-child-width-1-1 uk-grid uk-grid-stack" uk-grid="">

                <div class="uk-first-column uk-height-max-medium uk-overflow-auto">

                  <ul class="uk-nav uk-navbar-dropdown-nav">

                    <!--li><a href="" >My profile</a></li>

                    <li><a   routerLinkActive="uk-link" routerLink="/myclaims">My Claims</a></li>

                    <li *ngIf="isAuthorized"><a   routerLinkActive="uk-link" routerLink="/claims">Manage all Claims</a></li-->

                    <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 id="logout1"></div>

              </div>

            </div>

          </li>

        </ul>

      </ng-container>

      <ng-container *ngIf="!dashboard">

        <li *ngIf="mobileView" class="uk-nav-header uk-parent ">

          <span *ngIf="loggedIn">

            <span>{{user.fullname + " "}}<span class="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></span>

          </span>

          <span *ngIf="!loggedIn">

              <a class="loginLink" (click)="logIn()">Sign in <span class="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>

         </span>

          <ul *ngIf="loggedIn" class="uk-nav-sub">

            <!--li><a href="" >My profile</a></li>

            <li><a   routerLinkActive="uk-link" routerLink="/myclaims">My Claims</a></li>

            <li *ngIf="isAuthorized"><a   routerLinkActive="uk-link" routerLink="/claims">Manage all Claims</a></li-->

            <ng-container *ngFor="let item of userMenuItems ">

              <li *ngIf="item.needsAuthorization && isAuthorized || !item.needsAuthorization">

                <a *ngIf="item.route.length > 0" routerLink="{{item.route}}">{{item.title}}</a>

                <a *ngIf="item.route.length == 0 && item.url.length > 0" href="{{item.url}}">{{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>

        </li>

      </ng-container>

      <ng-container *ngIf="dashboard">

        <a *ngIf="!loggedIn" [class]="'loginLink '+colors" (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 [attr.class]="'loginLink userBox '+colors" cx="9.9" cy="6.4" r="4.4" stroke-width="1.1"></circle>

              <path [attr.class]="'loginLink userBox '+colors"

                    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" stroke-width="1.1"></path>

            </svg> </span>

        </a>

        <a *ngIf="loggedIn" class="user_action_image uk-icon">

          <svg height="60" width="60">

            <circle [attr.class]="'userBox '+colors" cx="30" cy="30" r="20" stroke-width="2"></circle>

            <text *ngIf="firstLetters" [attr.class]="'userBox '+colors" x="50%" y="50%" text-anchor="middle" dy=".4em"

                  font-size="1.5em">

              {{firstLetters}}

            </text>

            <svg *ngIf="!firstLetters" ratio="1" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" width="20"

                 x="20">

              <circle [attr.class]="'icon userBox '+colors" cx="9.9" cy="6.4" r="4.4" stroke-width="1.1"></circle>

              <path [attr.class]="'icon userBox '+colors"

                    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" stroke-width="1.1"></path>

            </svg>

          </svg>

          <i [class]="'material-icons md-'+colors">keyboard_arrow_down</i>

        </a>

        <div *ngIf="loggedIn" uk-dropdown="mode: click; offset: -2; delay-hide: 0; flip: false; pos: bottom-right"

             #userMenu

             class="uk-padding-remove-horizontal">

          <ul class="uk-nav uk-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>

      </ng-container>

      <div id="logout2"></div>

    `

})

export class UserMiniComponent implements OnInit, OnChanges {

    @Input() user: User;

    public loggedIn: boolean = false;

    public isAuthorized: boolean = false;

    @Input() public mobileView: boolean = false;

    public firstLetters: string = "";

    @Input() public dashboard: boolean = false;

    @Input() public colors: string = "light";  // 'dark' on light background - 'light' on dark background

    public server: boolean = true;

    public routerHelper: RouterHelper = new RouterHelper();

    @Input() userMenuItems;

    @Input() logInUrl;

    @Input() logOutUrl;

    @Input() cookieDomain;

    @Input() redirectUrl: string;

    sub: any;

    constructor(private router: Router, private  route: ActivatedRoute, private location: Location) {

    }

    ngOnInit() {

        if (typeof document !== 'undefined') {

            this.server = false;

        }

        this.initialize();

        this.sub = this.route.queryParams.subscribe(params => {

            this.initialize();

        });

    }

    ngOnChanges(changes: SimpleChanges): void {

        if (changes.user) {

            this.initialize();

        }

    }

    ngOnDestroy() {

        if (this.sub) {

            this.sub.unsubscribe();

        }

    }

    initialize() {

        if (!this.redirectUrl && typeof location !== 'undefined') {

            this.redirectUrl = location.pathname;

        }

        if (this.user) {

            this.loggedIn = true;

            this.parseName();

            this.isAuthorized = Session.isClaimsCurator(this.user) || Session.isPortalAdministrator(this.user);

        } else {

            this.loggedIn = false;

            this.isAuthorized = false;

            this.user = null;

        }

    }

    logOut() {

        if (this.user) {

            Session.removeUser();

            window.location.href = this.logOutUrl + StringUtils.URIEncode(location.href);

        }

        this.loggedIn = false;

        this.isAuthorized = false;

        this.user = new User();

    }

    logIn() {

        Session.setReloadUrl(location.protocol + "//" + location.host, this.redirectUrl, location.search);

        window.location.href = this.logInUrl;

    }

    onClick(id: string) {

        let el: HTMLElement = document.getElementById(id);

        el.classList.remove('uk-open');

    }

    parseName() {

        this.firstLetters = "";

        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('');

        }

    }

}