202 lines
8.4 KiB
TypeScript
202 lines
8.4 KiB
TypeScript
import {Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, ViewChild} 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";
|
|
import {
|
|
NotificationConfiguration,
|
|
NotificationsSidebarComponent
|
|
} from "../notifications/notifications-sidebar/notifications-sidebar.component";
|
|
|
|
declare var UIkit;
|
|
|
|
@Component({
|
|
selector: 'user-mini',
|
|
template: `
|
|
<ul class="uk-navbar-nav">
|
|
<li>
|
|
<a *ngIf="!loggedIn && !mobileView" (click)="logIn()">Sign in</a>
|
|
<ng-container *ngIf="loggedIn && !mobileView">
|
|
<a class="login uk-icon">
|
|
<svg height="60" width="60">
|
|
<circle cx="30" cy="30" r="20" stroke-width="2"></circle>
|
|
<text x="50%" y="50%" text-anchor="middle" dy=".4em" font-size="16">
|
|
{{firstLetters ? firstLetters : 'AN'}}
|
|
</text>
|
|
</svg>
|
|
</a>
|
|
<div class="uk-navbar-dropdown uk-dropdown" uk-dropdown="pos: bottom-right">
|
|
<ul class="uk-nav uk-navbar-dropdown-nav">
|
|
<ng-container *ngFor="let item of userMenuItems ">
|
|
<li *ngIf="item.needsAuthorization && isAuthorized || !item.needsAuthorization"
|
|
[ngClass]="item.customClass"
|
|
[class.uk-active]="isTheActiveSubMenu(item)">
|
|
<a *ngIf="item.route" [routerLink]="item.route"
|
|
[queryParams]="item.params">{{item.title}}</a>
|
|
<a *ngIf="!item.route && item.url" [href]="item.url" [class.custom-external]="item.target != '_self'"
|
|
[target]="item.target">{{item.title}}</a>
|
|
</li>
|
|
</ng-container>
|
|
<li *ngIf="userMenuItems.length > 0" class="uk-nav-divider"></li>
|
|
<li><a (click)="logOut()">Log out</a></li>
|
|
</ul>
|
|
</div>
|
|
</ng-container>
|
|
<a *ngIf="!loggedIn && mobileView" (click)="logIn()">
|
|
<icon name="login" ratio="1.5" [flex]="true"></icon>
|
|
</a>
|
|
<a *ngIf="loggedIn && mobileView" href="#account" class="login uk-icon" uk-toggle>
|
|
<span class="uk-position-relative">
|
|
<svg height="30" width="30">
|
|
<circle cx="15" cy="15" r="15" stroke-width="2"></circle>
|
|
<text x="50%" y="50%" text-anchor="middle" dy=".35em" font-size="14">
|
|
{{firstLetters ? firstLetters : 'AN'}}
|
|
</text>
|
|
</svg>
|
|
<span *ngIf="notificationsSidebar?.unreadCount > 0" class="uk-text-secondary notification">
|
|
<icon name="circle" ratio="0.8"></icon>
|
|
</span>
|
|
</span>
|
|
</a>
|
|
<div *ngIf="loggedIn" #account id="account" class="uk-offcanvas" uk-offcanvas="flip: true; overlay: true;">
|
|
<div class="uk-offcanvas-bar uk-padding-remove">
|
|
<nav class="uk-navbar uk-background-default" uk-sticky>
|
|
<div class="uk-navbar-right">
|
|
<button class="uk-navbar-toggle uk-icon uk-close" (click)="closeCanvas(account)">
|
|
<icon name="close" ratio="1.5" visuallyHidden="close account"></icon>
|
|
</button>
|
|
</div>
|
|
</nav>
|
|
<ng-container *ngIf="!showNotifications">
|
|
<div class="uk-padding uk-padding-remove-top uk-flex uk-flex-middle">
|
|
<div class="login">
|
|
<svg height="60" width="60" style="max-width: 60px; height: 60px;">
|
|
<circle cx="30" cy="30" r="20" stroke-width="2"></circle>
|
|
<text x="50%" y="50%" text-anchor="middle" dy=".4em" font-size="16">
|
|
{{firstLetters ? firstLetters : 'AN'}}
|
|
</text>
|
|
</svg>
|
|
</div>
|
|
<h5 class="uk-margin-small-left uk-margin-remove-bottom uk-margin-remove-top uk-text-truncate">
|
|
{{user.fullname}}
|
|
</h5>
|
|
</div>
|
|
<ul class="uk-nav uk-nav-primary uk-list uk-margin-top" uk-nav>
|
|
<ng-container *ngFor="let item of userMenuItems ">
|
|
<li *ngIf="item.needsAuthorization && isAuthorized || !item.needsAuthorization" [ngClass]="item.customClass">
|
|
<a *ngIf="item.route" [routerLink]="item.route" (click)="closeCanvas(account)">
|
|
{{item.title}}<span *ngIf="item.items.length > 0" class="uk-nav-parent-icon"></span></a>
|
|
<a *ngIf="!item.route && item.url" (click)="closeCanvas(account)" [href]="item.url" [class.custom-external]="item.target != '_self'"
|
|
[target]="item.target">{{item.title}}<span *ngIf="item.items.length > 0" class="uk-nav-parent-icon"></span></a>
|
|
</li>
|
|
</ng-container>
|
|
<ng-container *ngIf="notificationConfiguration">
|
|
<li *ngIf="userMenuItems.length > 0" class="uk-nav-divider"></li>
|
|
<li *ngIf="notificationConfiguration">
|
|
<a (click)="toggleNotifications()">
|
|
<div class="uk-flex uk-flex-middle uk-width-1-1">
|
|
<span class="uk-width-expand">Notifications</span>
|
|
<icon *ngIf="notificationsSidebar?.unreadCount > 0" class="uk-margin-small-left uk-text-secondary uk-margin-right" name="circle" [flex]="true" ratio="0.8"></icon>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
</ng-container>
|
|
<li *ngIf="userMenuItems.length > 0" class="uk-nav-divider"></li>
|
|
<li><a (click)="logOut()">Log out</a></li>
|
|
</ul>
|
|
</ng-container>
|
|
<notification-sidebar [class.uk-hidden]="!showNotifications" #notificationsSidebar *ngIf="notificationConfiguration" [mobile]="true"
|
|
(showNotificationsEmitter)="showNotifications = $event"
|
|
[configuration]="notificationConfiguration" [user]="user"></notification-sidebar>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
`
|
|
})
|
|
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 = "";
|
|
public routerHelper: RouterHelper = new RouterHelper();
|
|
@Input() userMenuItems;
|
|
@Input() notificationConfiguration: NotificationConfiguration;
|
|
@ViewChild('notificationsSidebar') notificationsSidebar: NotificationsSidebarComponent;
|
|
public showNotifications = false;
|
|
private subscriptions = [];
|
|
|
|
constructor(private router: Router, private route: ActivatedRoute, private userManagementService: UserManagementService) {
|
|
}
|
|
|
|
ngOnInit() {
|
|
this.initUser();
|
|
}
|
|
|
|
ngOnChanges(changes: SimpleChanges): void {
|
|
if (changes.user) {
|
|
this.initUser();
|
|
}
|
|
}
|
|
|
|
ngOnDestroy() {
|
|
this.subscriptions.forEach(subscription => {
|
|
if (subscription instanceof Subscriber) {
|
|
subscription.unsubscribe();
|
|
}
|
|
});
|
|
}
|
|
|
|
closeCanvas(canvas) {
|
|
UIkit.offcanvas(canvas).hide();
|
|
}
|
|
|
|
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();
|
|
}
|
|
}
|
|
|
|
logIn() {
|
|
this.userManagementService.login();
|
|
}
|
|
|
|
isTheActiveSubMenu(menuItem: MenuItem): boolean {
|
|
let currentRoute = this.router.url.split('?')[0];
|
|
return menuItem.route == currentRoute || menuItem.route == (currentRoute + "/");
|
|
}
|
|
|
|
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('');
|
|
}
|
|
}
|
|
|
|
toggleNotifications() {
|
|
this.showNotifications = !this.showNotifications;
|
|
}
|
|
}
|