D-Net

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

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

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

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

import {Subscriber} from "rxjs";

import {MenuItem} from "../sharedComponents/menu";

import {UserManagementService} from "../services/user-management.service";

// declare var logoutClicked;

@Component({

  selector: 'user-mini',

  template: `

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

      <ul *ngIf="!mobileView" class="uk-navbar-nav" [class.uk-dark]="dark">

        <li class="uk-parent">

          <a *ngIf="loggedIn" class="login">

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

              <circle cx="30" cy="30" r="20" stroke-width="2"></circle>

              <text *ngIf="firstLetters" x="50%" y="50%" text-anchor="middle" dy=".4em"

                    font-size="16">

                {{firstLetters}}

              </text>

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

                   x="20">

                <circle cx="9.9" cy="6.4" r="4.4" stroke-width="1.1"></circle>

                <path 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>

          </a>

          <a *ngIf="!loggedIn" class="loginLink" id="userMenu-parent" (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" uk-toggle>

            <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" [class.uk-active]="isTheActiveSubMenu(item)">

                      <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" class="uk-flex uk-flex-middle">

            <span>{{user.fullname + " "}}</span>

            <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 *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="uk-flex" (click)="logIn()">

        <span>Sign in</span>

        <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 cx="9.9" cy="6.4" r="4.4" stroke-width="1.1"></circle>

              <path 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="login uk-icon">

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

          <circle cx="30" cy="30" r="20" stroke-width="2"></circle>

          <text *ngIf="firstLetters" x="50%" y="50%" text-anchor="middle" dy=".4em"

                font-size="16">

            {{firstLetters}}

          </text>

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

               x="20">

            <circle cx="9.9" cy="6.4" r="4.4" stroke-width="1.1"></circle>

            <path 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>

      </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;

  public server: boolean = true;

  public routerHelper: RouterHelper = new RouterHelper();

  @Input() userMenuItems;

  @Input() logInUrl;

  @Input() logOutUrl;

  @Input() cookieDomain;

  @Input() dark: boolean = false;

  subscriptions = [];

  constructor(private router: Router, private  route: ActivatedRoute, private userManagementService: UserManagementService) {

  }

  ngOnInit() {

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

      this.server = false;

    }

    this.initUser();

  }

  ngOnChanges(changes: SimpleChanges): void {

    if (changes.user) {

      this.initUser();

    }

  }

  ngOnDestroy() {

    this.subscriptions.forEach(subscription => {

      if (subscription instanceof Subscriber) {

        subscription.unsubscribe();

      }

    });

  }

  initUser() {

    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) {

      this.userManagementService.logout();

    }

    this.loggedIn = false;

    this.isAuthorized = false;

    this.user = new User();

  }

  logIn() {

    this.userManagementService.login();

  }

  isTheActiveSubMenu(menuItem: MenuItem): boolean {

    let currentRoute = this.router.url.split('?')[0];

    if (menuItem.route == currentRoute || menuItem.route == (currentRoute + "/") ) {

      return true;

    }

    return false;

  }

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

    }

  }

}