1 |
61381
|
k.triantaf
|
import {Component, Input, OnChanges, OnInit, SimpleChanges} from '@angular/core';
|
2 |
|
|
import {ActivatedRoute, Router} from '@angular/router';
|
3 |
|
|
import {Session, User} from './utils/helper.class';
|
4 |
|
|
import {RouterHelper} from '../utils/routerHelper.class';
|
5 |
|
|
import {Subscriber} from "rxjs";
|
6 |
|
|
import {MenuItem} from "../sharedComponents/menu";
|
7 |
|
|
import {UserManagementService} from "../services/user-management.service";
|
8 |
|
|
|
9 |
|
|
// declare var logoutClicked;
|
10 |
|
|
@Component({
|
11 |
|
|
selector: 'user-mini',
|
12 |
|
|
template: `
|
13 |
|
|
<ng-container *ngIf="!dashboard">
|
14 |
|
|
|
15 |
|
|
<ul *ngIf="!mobileView" class="uk-navbar-nav" [class.uk-dark]="dark">
|
16 |
|
|
<li class="uk-parent">
|
17 |
|
|
<a *ngIf="loggedIn" class="login">
|
18 |
|
|
<svg height="60" width="60">
|
19 |
|
|
<circle cx="30" cy="30" r="20" stroke-width="2"></circle>
|
20 |
|
|
<text *ngIf="firstLetters" x="50%" y="50%" text-anchor="middle" dy=".4em"
|
21 |
|
|
font-size="16">
|
22 |
|
|
{{firstLetters}}
|
23 |
|
|
</text>
|
24 |
|
|
<svg *ngIf="!firstLetters" ratio="1" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" width="20"
|
25 |
|
|
x="20">
|
26 |
|
|
<circle cx="9.9" cy="6.4" r="4.4" stroke-width="1.1"></circle>
|
27 |
|
|
<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>
|
28 |
|
|
</svg>
|
29 |
|
|
</svg>
|
30 |
|
|
</a>
|
31 |
|
|
<a *ngIf="!loggedIn" class="loginLink" id="userMenu-parent" (click)="logIn()">Sign in <span
|
32 |
|
|
class=" uk-margin-small-left uk-margin-small-right uk-icon"><svg width="20" height="20"
|
33 |
|
|
viewBox="0 0 20 20"
|
34 |
|
|
xmlns="http://www.w3.org/2000/svg"
|
35 |
|
|
ratio="1"><circle fill="none"
|
36 |
|
|
stroke="#000"
|
37 |
|
|
stroke-width="1.1"
|
38 |
|
|
cx="9.9" cy="6.4"
|
39 |
|
|
r="4.4"></circle><path
|
40 |
|
|
fill="none" stroke="#000" stroke-width="1.1"
|
41 |
|
|
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>
|
42 |
|
|
</a>
|
43 |
|
|
|
44 |
|
|
|
45 |
|
|
<div *ngIf="loggedIn" class="uk-navbar-dropdown uk-navbar-dropdown-bottom-left" id="userMenu" uk-toggle>
|
46 |
|
|
<div class="uk-navbar-dropdown-grid uk-child-width-1-1 uk-grid uk-grid-stack" uk-grid="">
|
47 |
|
|
<div class="uk-first-column uk-height-max-medium uk-overflow-auto">
|
48 |
|
|
<ul class="uk-nav uk-navbar-dropdown-nav">
|
49 |
|
|
<!--li><a href="" >My profile</a></li>
|
50 |
|
|
<li><a routerLinkActive="uk-link" routerLink="/myclaims">My Claims</a></li>
|
51 |
|
|
<li *ngIf="isAuthorized"><a routerLinkActive="uk-link" routerLink="/claims">Manage all Claims</a></li-->
|
52 |
|
|
<ng-container *ngFor="let item of userMenuItems ">
|
53 |
|
|
<li *ngIf="item.needsAuthorization && isAuthorized || !item.needsAuthorization" [class.uk-active]="isTheActiveSubMenu(item)">
|
54 |
|
|
<a *ngIf="item.route.length > 0" routerLink="{{item.route}}"
|
55 |
|
|
[queryParams]=item.params>{{item.title}}</a>
|
56 |
|
|
<a *ngIf="item.route.length == 0 && item.url.length > 0" href="{{item.url}}"
|
57 |
|
|
target="_blank">{{item.title}}</a>
|
58 |
|
|
</li>
|
59 |
|
|
</ng-container>
|
60 |
|
|
<li *ngIf="userMenuItems.length > 0" class="uk-nav-divider"></li>
|
61 |
|
|
<li><a (click)="logOut()" id="logout">Log out</a></li>
|
62 |
|
|
</ul>
|
63 |
|
|
</div>
|
64 |
|
|
<div id="logout1"></div>
|
65 |
|
|
</div>
|
66 |
|
|
</div>
|
67 |
|
|
</li>
|
68 |
|
|
</ul>
|
69 |
|
|
</ng-container>
|
70 |
|
|
|
71 |
|
|
<ng-container *ngIf="!dashboard">
|
72 |
|
|
|
73 |
|
|
<li *ngIf="mobileView" class="uk-nav-header uk-parent ">
|
74 |
|
|
|
75 |
|
|
<span *ngIf="loggedIn" class="uk-flex uk-flex-middle">
|
76 |
|
|
<span>{{user.fullname + " "}}</span>
|
77 |
|
|
<span class="uk-margin-small-right uk-icon"><svg width="20" height="20"
|
78 |
|
|
viewBox="0 0 20 20"
|
79 |
|
|
xmlns="http://www.w3.org/2000/svg"
|
80 |
|
|
ratio="1"><circle fill="none"
|
81 |
|
|
stroke="#000"
|
82 |
|
|
stroke-width="1.1"
|
83 |
|
|
cx="9.9"
|
84 |
|
|
cy="6.4"
|
85 |
|
|
r="4.4"></circle><path
|
86 |
|
|
fill="none" stroke="#000" stroke-width="1.1"
|
87 |
|
|
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>
|
88 |
|
|
</span>
|
89 |
|
|
</span>
|
90 |
|
|
<span *ngIf="!loggedIn">
|
91 |
|
|
<a class="loginLink" (click)="logIn()">Sign in <span class="uk-margin-small-right uk-icon"><svg width="20"
|
92 |
|
|
height="20"
|
93 |
|
|
viewBox="0 0 20 20"
|
94 |
|
|
xmlns="http://www.w3.org/2000/svg"
|
95 |
|
|
ratio="1"><circle
|
96 |
|
|
fill="none" stroke="#000" stroke-width="1.1" cx="9.9" cy="6.4" r="4.4"></circle><path fill="none"
|
97 |
|
|
stroke="#000"
|
98 |
|
|
stroke-width="1.1"
|
99 |
|
|
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>
|
100 |
|
|
</a>
|
101 |
|
|
</span>
|
102 |
|
|
|
103 |
|
|
<ul *ngIf="loggedIn" class="uk-nav-sub">
|
104 |
|
|
<!--li><a href="" >My profile</a></li>
|
105 |
|
|
<li><a routerLinkActive="uk-link" routerLink="/myclaims">My Claims</a></li>
|
106 |
|
|
<li *ngIf="isAuthorized"><a routerLinkActive="uk-link" routerLink="/claims">Manage all Claims</a></li-->
|
107 |
|
|
<ng-container *ngFor="let item of userMenuItems ">
|
108 |
|
|
<li *ngIf="item.needsAuthorization && isAuthorized || !item.needsAuthorization">
|
109 |
|
|
<a *ngIf="item.route.length > 0" routerLink="{{item.route}}">{{item.title}}</a>
|
110 |
|
|
<a *ngIf="item.route.length == 0 && item.url.length > 0" href="{{item.url}}">{{item.title}}</a>
|
111 |
|
|
</li>
|
112 |
|
|
</ng-container>
|
113 |
|
|
<li *ngIf="userMenuItems.length > 0" class="uk-nav-divider"></li>
|
114 |
|
|
<li><a (click)="logOut()" id="logout">Log out</a></li>
|
115 |
|
|
</ul>
|
116 |
|
|
</li>
|
117 |
|
|
</ng-container>
|
118 |
|
|
<ng-container *ngIf="dashboard">
|
119 |
|
|
<a *ngIf="!loggedIn" class="uk-flex" (click)="logIn()">
|
120 |
|
|
<span>Sign in</span>
|
121 |
|
|
<span class="uk-margin-small-left uk-margin-small-right uk-icon">
|
122 |
|
|
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" ratio="1">
|
123 |
|
|
<circle cx="9.9" cy="6.4" r="4.4" stroke-width="1.1"></circle>
|
124 |
|
|
<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>
|
125 |
|
|
</svg>
|
126 |
|
|
</span>
|
127 |
|
|
</a>
|
128 |
|
|
<a *ngIf="loggedIn" class="login uk-icon">
|
129 |
|
|
<svg height="60" width="60">
|
130 |
|
|
<circle cx="30" cy="30" r="20" stroke-width="2"></circle>
|
131 |
|
|
<text *ngIf="firstLetters" x="50%" y="50%" text-anchor="middle" dy=".4em"
|
132 |
|
|
font-size="16">
|
133 |
|
|
{{firstLetters}}
|
134 |
|
|
</text>
|
135 |
|
|
<svg *ngIf="!firstLetters" ratio="1" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" width="20"
|
136 |
|
|
x="20">
|
137 |
|
|
<circle cx="9.9" cy="6.4" r="4.4" stroke-width="1.1"></circle>
|
138 |
|
|
<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>
|
139 |
|
|
</svg>
|
140 |
|
|
</svg>
|
141 |
|
|
</a>
|
142 |
|
|
<div *ngIf="loggedIn" uk-dropdown="mode: click; offset: -2; delay-hide: 0; flip: false; pos: bottom-right"
|
143 |
|
|
#userMenu
|
144 |
|
|
class="uk-padding-remove-horizontal">
|
145 |
|
|
<ul class="uk-nav uk-dropdown-nav">
|
146 |
|
|
<ng-container *ngFor="let item of userMenuItems ">
|
147 |
|
|
<li *ngIf="item.needsAuthorization && isAuthorized || !item.needsAuthorization">
|
148 |
|
|
<a *ngIf="item.route.length > 0" routerLink="{{item.route}}"
|
149 |
|
|
[queryParams]=item.params>{{item.title}}</a>
|
150 |
|
|
<a *ngIf="item.route.length == 0 && item.url.length > 0" href="{{item.url}}"
|
151 |
|
|
target="_blank">{{item.title}}</a>
|
152 |
|
|
</li>
|
153 |
|
|
</ng-container>
|
154 |
|
|
<li *ngIf="userMenuItems.length > 0" class="uk-nav-divider"></li>
|
155 |
|
|
<li><a (click)="logOut()" id="logout">Log out</a></li>
|
156 |
|
|
</ul>
|
157 |
|
|
</div>
|
158 |
|
|
</ng-container>
|
159 |
|
|
|
160 |
|
|
<div id="logout2"></div>
|
161 |
|
|
`
|
162 |
|
|
})
|
163 |
|
|
export class UserMiniComponent implements OnInit, OnChanges {
|
164 |
|
|
@Input() user: User;
|
165 |
|
|
public loggedIn: boolean = false;
|
166 |
|
|
public isAuthorized: boolean = false;
|
167 |
|
|
@Input() public mobileView: boolean = false;
|
168 |
|
|
public firstLetters: string = "";
|
169 |
|
|
@Input() public dashboard: boolean = false;
|
170 |
|
|
public server: boolean = true;
|
171 |
|
|
public routerHelper: RouterHelper = new RouterHelper();
|
172 |
|
|
@Input() userMenuItems;
|
173 |
|
|
@Input() logInUrl;
|
174 |
|
|
@Input() logOutUrl;
|
175 |
|
|
@Input() cookieDomain;
|
176 |
|
|
@Input() dark: boolean = false;
|
177 |
|
|
subscriptions = [];
|
178 |
|
|
|
179 |
|
|
constructor(private router: Router, private route: ActivatedRoute, private userManagementService: UserManagementService) {
|
180 |
|
|
}
|
181 |
|
|
|
182 |
|
|
ngOnInit() {
|
183 |
|
|
if (typeof document !== 'undefined') {
|
184 |
|
|
this.server = false;
|
185 |
|
|
}
|
186 |
|
|
this.initUser();
|
187 |
|
|
}
|
188 |
|
|
|
189 |
|
|
ngOnChanges(changes: SimpleChanges): void {
|
190 |
|
|
if (changes.user) {
|
191 |
|
|
this.initUser();
|
192 |
|
|
}
|
193 |
|
|
}
|
194 |
|
|
|
195 |
|
|
ngOnDestroy() {
|
196 |
|
|
this.subscriptions.forEach(subscription => {
|
197 |
|
|
if (subscription instanceof Subscriber) {
|
198 |
|
|
subscription.unsubscribe();
|
199 |
|
|
}
|
200 |
|
|
});
|
201 |
|
|
}
|
202 |
|
|
|
203 |
|
|
initUser() {
|
204 |
|
|
if (this.user) {
|
205 |
|
|
this.loggedIn = true;
|
206 |
|
|
this.parseName();
|
207 |
|
|
this.isAuthorized = Session.isClaimsCurator(this.user) || Session.isPortalAdministrator(this.user);
|
208 |
|
|
} else {
|
209 |
|
|
this.loggedIn = false;
|
210 |
|
|
this.isAuthorized = false;
|
211 |
|
|
this.user = null;
|
212 |
|
|
}
|
213 |
|
|
}
|
214 |
|
|
|
215 |
|
|
logOut() {
|
216 |
|
|
if (this.user) {
|
217 |
|
|
this.userManagementService.logout();
|
218 |
|
|
}
|
219 |
|
|
this.loggedIn = false;
|
220 |
|
|
this.isAuthorized = false;
|
221 |
|
|
this.user = new User();
|
222 |
|
|
}
|
223 |
|
|
|
224 |
|
|
logIn() {
|
225 |
|
|
this.userManagementService.login();
|
226 |
|
|
}
|
227 |
|
|
|
228 |
|
|
isTheActiveSubMenu(menuItem: MenuItem): boolean {
|
229 |
|
|
let currentRoute = this.router.url.split('?')[0];
|
230 |
|
|
if (menuItem.route == currentRoute || menuItem.route == (currentRoute + "/") ) {
|
231 |
|
|
return true;
|
232 |
|
|
}
|
233 |
|
|
return false;
|
234 |
|
|
}
|
235 |
|
|
parseName() {
|
236 |
|
|
this.firstLetters = "";
|
237 |
|
|
if (this.user && this.user.firstname) {
|
238 |
|
|
this.firstLetters += this.user.firstname.substr(0, 1);
|
239 |
|
|
}
|
240 |
|
|
if (this.user && this.user.lastname) {
|
241 |
|
|
this.firstLetters += this.user.lastname.substr(0, 1);
|
242 |
|
|
}
|
243 |
|
|
if (!this.firstLetters && this.user && this.user.fullname) {
|
244 |
|
|
let matches = this.user.fullname.match(/\b(\w)/g);
|
245 |
|
|
this.firstLetters += matches.join('');
|
246 |
|
|
}
|
247 |
|
|
}
|
248 |
|
|
}
|