Skip to content

Commit 106180f

Browse files
mschwrdtnrmschwrdtnr
authored
feat(frontend): missing user image info in navbar (#126)
* enh(user): missing user image info in navbar If the user hasn't an image uploaded yet he will be informed in the navbar. Co-Authored-By: danielhabenicht <daniel-habenicht@outlook.de> * format documents * fix: remove environmentService * fix: remove environmentService * Update Phonebook.Frontend/src/app/services/api/current-user.service.ts Co-Authored-By: DanielHabenicht <daniel-habenicht@outlook.de> * Revert "Update Phonebook.Frontend/src/app/services/api/current-user.service.ts" This reverts commit 92ad898. * change Button text, position and styling add tooltip and translations * update url for tests * update getCurrentUserId-test and add test for hasPicture Co-Authored-By: danielhabenicht <daniel-habenicht@outlook.de> * move ngIf into div * rename MissingUserImageMessage * rename MissingUserImageMessage to NavigationCompon * move ngIf into parent div
1 parent c05cf8f commit 106180f

File tree

9 files changed

+155
-21
lines changed

9 files changed

+155
-21
lines changed

‎Phonebook.Frontend/src/app/services/api/current-user.service.spec.ts‎

Lines changed: 20 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import { getTestBed, inject, TestBed } from '@angular/core/testing';
33
import { PersonService } from 'src/app/services/api/person.service';
44
import { CurrentUserService } from './current-user.service';
55

6-
76
describe('CurrentUserService', () => {
87
let injector: TestBed;
98
let httpMock: HttpTestingController;
@@ -22,13 +21,31 @@ describe('CurrentUserService', () => {
2221
}));
2322

2423
it('should return Username', inject([CurrentUserService], (service: CurrentUserService) => {
25-
const response = 'domain\\username';
24+
const response = {
25+
user: 'DOMAIN\\username',
26+
hasPicture: true
27+
};
2628

2729
service.getCurrentUserId().subscribe(user => {
2830
expect(user).toBe('username');
2931
});
3032

31-
const req = httpMock.expectOne(`https://employee-pictures.example.com/user/whoami`);
33+
const req = httpMock.expectOne(`https://employee-pictures.example.com/user/whoami?version=2`);
34+
expect(req.request.method).toBe('GET');
35+
req.flush(response);
36+
}));
37+
38+
it('should return hasPicture', inject([CurrentUserService], (service: CurrentUserService) => {
39+
const response = {
40+
user: 'DOMAIN\\username',
41+
hasPicture: true
42+
};
43+
44+
service.doesUserHasImage().subscribe(hasImage => {
45+
expect(hasImage).toBe(true);
46+
});
47+
48+
const req = httpMock.expectOne(`https://employee-pictures.example.com/user/whoami?version=2`);
3249
expect(req.request.method).toBe('GET');
3350
req.flush(response);
3451
}));

‎Phonebook.Frontend/src/app/services/api/current-user.service.ts‎

Lines changed: 36 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -10,34 +10,41 @@ import { runtimeEnvironment } from 'src/environments/runtime-environment';
1010
providedIn: 'root'
1111
})
1212
export class CurrentUserService {
13-
private readonly currentUserApiUrl = runtimeEnvironment.employeePicturesEndpoint + '/user/whoami';
13+
private readonly currentUserApiUrl = runtimeEnvironment.employeePicturesEndpoint + '/user/whoami?version=2';
14+
15+
private currentUserObjectObservable: Observable<WhoAmIResponse> | null = null;
1416

15-
private currentUserNameObservable: Observable<string> | null = null;
1617
private currentUserObservable: Observable<Person | null> | null = null;
1718

1819
constructor(private httpClient: HttpClient, private personService: PersonService) {}
1920

20-
public getCurrentUserId(): Observable<string> {
21-
if (this.currentUserNameObservable != null) {
22-
return this.currentUserNameObservable;
21+
private getCurrentUserObject(): Observable<WhoAmIResponse> {
22+
if (this.currentUserObjectObservable != null) {
23+
return this.currentUserObjectObservable;
2324
}
2425

2526
const observable = this.httpClient
26-
.get<string>(this.currentUserApiUrl, {
27+
.get<WhoAmIResponse>(this.currentUserApiUrl, {
2728
withCredentials: true
2829
})
29-
.pipe(
30-
map(str => {
31-
// Userstring Layout is "Domain\\user"
32-
// This returns just the "user"
33-
return str.toLowerCase().split('\\')[1];
34-
}),
35-
publishReplay()
36-
) as ConnectableObservable<string>; // this is a workaround for this github issue: https://github.com/ReactiveX/rxjs/issues/2972. The good solution is to upgrade to typescript >2.8 but angular only supports < 2.8.
30+
// this is a workaround for this github issue: https://github.com/ReactiveX/rxjs/issues/2972.
31+
// The good solution is to upgrade to typescript >2.8 but angular only supports < 2.8.
32+
.pipe(publishReplay()) as ConnectableObservable<WhoAmIResponse>;
3733
observable.connect();
38-
this.currentUserNameObservable = observable;
39-
return this.currentUserNameObservable;
34+
this.currentUserObjectObservable = observable;
35+
return this.currentUserObjectObservable;
36+
}
37+
38+
public getCurrentUserId(): Observable<string> {
39+
return this.getCurrentUserObject().pipe(
40+
map(str => {
41+
// Userstring Layout is "Domain\\user"
42+
// This returns just the "user"
43+
return str.user.toLowerCase().split('\\')[1];
44+
})
45+
);
4046
}
47+
4148
public getCurrentUser(): Observable<Person | null> {
4249
if (this.currentUserObservable != null) {
4350
return this.currentUserObservable;
@@ -53,4 +60,17 @@ export class CurrentUserService {
5360
this.currentUserObservable = observable;
5461
return this.currentUserObservable;
5562
}
63+
64+
public doesUserHasImage(): Observable<boolean> {
65+
return this.getCurrentUserObject().pipe(
66+
map(whoAmIResponse => {
67+
return whoAmIResponse.hasPicture;
68+
})
69+
);
70+
}
71+
}
72+
73+
class WhoAmIResponse {
74+
public user: string;
75+
public hasPicture: boolean;
5676
}

‎Phonebook.Frontend/src/app/shared/components/navigation/navigation.component.html‎

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -105,8 +105,25 @@
105105
>
106106
</button>
107107
</div>
108-
<div id="pb-greetings" class="pb-hide-below-big" *ngIf="currentUser != null">
109-
{{ (getGreetingMessage() | async) + ' ' + currentUser.Firstname }}!
108+
<div id="pb-greetings" class="pb-hide-below-big" *ngIf="currentUser != null && hasImage">
109+
{{ (getGreetingMessage() | async) + ' ' + currentUser.Firstname }}
110+
</div>
111+
<div class="pb-missing-userimage-info pb-hide-below-big" *ngIf="currentUser != null && !hasImage">
112+
<button
113+
mat-stroked-button
114+
class="pb-opacity-background mat-body-2"
115+
(click)="navigateToOwnProfile()"
116+
i18n-matTooltip="NavigationComponent|Tooltip for MissingUserImage@@MissingUserImageTooltip"
117+
i18n-aria-label="NavigationComponent|Aria label for MissingUserImage@@MissingUserImageAriaLabel"
118+
matTooltip="If you upload a picture it will be easier for your colleagues to find and contact you!"
119+
aria-label="Button which greets and asks for picture uploading."
120+
>
121+
<ng-container i18n="NavigationComponent|Greeting@@MissingUserImageGreeting">Hey</ng-container>
122+
{{ currentUser.Firstname }},
123+
<ng-container i18n="NavigationComponent|Message@@MissingUserImageMessage"
124+
>you haven't uploaded a picture yet. Want to upload one?</ng-container
125+
>
126+
</button>
110127
</div>
111128
<div class="pb-spacer"></div>
112129
<div class="menu pb-hide-below-med">

‎Phonebook.Frontend/src/app/shared/components/navigation/navigation.component.scss‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,15 @@ mat-sidenav-container {
5353
height: 3rem;
5454
}
5555

56+
.pb-missing-userimage-info {
57+
flex: 2;
58+
margin: 0 auto;
59+
}
60+
61+
.pb-opacity-background {
62+
background: rgba(0, 0, 0, 0.15);
63+
}
64+
5665
@media (max-width: 599px) {
5766
#search {
5867
height: 2.5rem;

‎Phonebook.Frontend/src/app/shared/components/navigation/navigation.component.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ export class NavigationComponent implements OnInit, OnDestroy {
3535
@Select(TableState.resultCount)
3636
public tableResultCount$: Observable<number>;
3737
public displayTableSettings: boolean = false;
38+
public hasImage: boolean = false;
3839

3940
public currentUser: Person | null = null;
4041
constructor(
@@ -61,6 +62,12 @@ export class NavigationComponent implements OnInit, OnDestroy {
6162
this.currentUser = null;
6263
}
6364
);
65+
this.currentUserService
66+
.doesUserHasImage()
67+
.pipe(untilComponentDestroyed(this))
68+
.subscribe(hasImage => {
69+
this.hasImage = hasImage;
70+
});
6471
this.router.events.pipe(filter(event => event instanceof NavigationEnd)).subscribe(route => {
6572
this.displayTableSettings = this.router.url.includes('search');
6673
});

‎Phonebook.Frontend/src/i18n/messages.de.xlf‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -258,6 +258,22 @@
258258
<target state="translated">Phonebook</target>
259259
<note priority="1" from="description">Application Name</note>
260260
<note priority="1" from="meaning">NavigationBar</note>
261+
</trans-unit><trans-unit id="MissingUserImageGreeting" datatype="html">
262+
<source>Hey</source><target state="translated">Hallo</target>
263+
<note priority="1" from="description">Greeting</note>
264+
<note priority="1" from="meaning">NavigationComponent</note>
265+
</trans-unit><trans-unit id="MissingUserImageMessage" datatype="html">
266+
<source>you haven't uploaded a picture yet. Want to upload one?</source><target state="translated">du hast noch kein Bild. Möchtest du eins hochladen?</target>
267+
<note priority="1" from="description">Message</note>
268+
<note priority="1" from="meaning">MissingUserImageMessage</note>
269+
</trans-unit><trans-unit id="MissingUserImageTooltip" datatype="html">
270+
<source>If you upload a picture it will be easier for your colleagues to find and contact you!</source><target state="translated">Wenn du ein Bild hochlädst wird es für deine Kollegen einfacher sein dich zu finden und zu kontaktieren.</target>
271+
<note priority="1" from="description">Tooltip for MissingUserImage</note>
272+
<note priority="1" from="meaning">NavigationComponent</note>
273+
</trans-unit><trans-unit id="MissingUserImageAriaLabel" datatype="html">
274+
<source>Button which greets and asks for picture uploading.</source><target state="translated">Button der grüßt und nach einem Bildupload fragt.</target>
275+
<note priority="1" from="description">Aria label for MissingUserImage</note>
276+
<note priority="1" from="meaning">NavigationComponent</note>
261277
</trans-unit><trans-unit id="NavigationComponentReleaseNotes" datatype="html">
262278
<source>Release Notes</source><target state="translated">Release Notes</target>
263279
<note priority="1" from="description">Release Notes Menu Item</note>

‎Phonebook.Frontend/src/i18n/messages.en.xlf‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -279,6 +279,22 @@
279279
<target state="final">Phonebook</target>
280280
<note priority="1" from="description">Application Name</note>
281281
<note priority="1" from="meaning">NavigationBar</note>
282+
</trans-unit><trans-unit id="MissingUserImageGreeting" datatype="html">
283+
<source>Hey</source><target state="final">Hey</target>
284+
<note priority="1" from="description">Greeting</note>
285+
<note priority="1" from="meaning">NavigationComponent</note>
286+
</trans-unit><trans-unit id="MissingUserImageMessage" datatype="html">
287+
<source>you haven't uploaded a picture yet. Want to upload one?</source><target state="final">you haven't uploaded a picture yet. Want to upload one?</target>
288+
<note priority="1" from="description">Message</note>
289+
<note priority="1" from="meaning">NavigationComponent</note>
290+
</trans-unit><trans-unit id="MissingUserImageTooltip" datatype="html">
291+
<source>If you upload a picture it will be easier for your colleagues to find and contact you!</source><target state="final">If you upload a picture it will be easier for your colleagues to find and contact you!</target>
292+
<note priority="1" from="description">Tooltip for MissingUserImage</note>
293+
<note priority="1" from="meaning">NavigationComponent</note>
294+
</trans-unit><trans-unit id="MissingUserImageAriaLabel" datatype="html">
295+
<source>Button which greets and asks for picture uploading.</source><target state="final">Button which greets and asks for picture uploading.</target>
296+
<note priority="1" from="description">Aria label for MissingUserImage</note>
297+
<note priority="1" from="meaning">NavigationComponent</note>
282298
</trans-unit><trans-unit id="NavigationComponentReleaseNotes" datatype="html">
283299
<source>Release Notes</source><target state="final">Release Notes</target>
284300
<note priority="1" from="description">Release Notes Menu Item</note>

‎Phonebook.Frontend/src/i18n/messages.test.xlf‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,22 @@
3939
<target state="final">TEST</target>
4040
<note priority="1" from="description">Application Name</note>
4141
<note priority="1" from="meaning">NavigationBar</note>
42+
</trans-unit><trans-unit id="MissingUserImageGreeting" datatype="html">
43+
<source>Hey</source><target state="final">TEST</target>
44+
<note priority="1" from="description">Greeting</note>
45+
<note priority="1" from="meaning">NavigationComponent</note>
46+
</trans-unit><trans-unit id="MissingUserImageMessage" datatype="html">
47+
<source>you haven't uploaded a picture yet. Want to upload one?</source><target state="final">TEST</target>
48+
<note priority="1" from="description">Message</note>
49+
<note priority="1" from="meaning">NavigationComponent</note>
50+
</trans-unit><trans-unit id="MissingUserImageTooltip" datatype="html">
51+
<source>If you upload a picture it will be easier for your colleagues to find and contact you!</source><target state="final">TEST</target>
52+
<note priority="1" from="description">Tooltip for MissingUserImage</note>
53+
<note priority="1" from="meaning">NavigationComponent</note>
54+
</trans-unit><trans-unit id="MissingUserImageAriaLabel" datatype="html">
55+
<source>Button which greets and asks for picture uploading.</source><target state="final">TEST</target>
56+
<note priority="1" from="description">Aria label for MissingUserImage</note>
57+
<note priority="1" from="meaning">NavigationComponent</note>
4258
</trans-unit><trans-unit id="NavigationComponentReleaseNotes" datatype="html">
4359
<source>Release Notes</source><target state="final">TEST</target>
4460
<note priority="1" from="description">Release Notes Menu Item</note>

‎Phonebook.Frontend/src/i18n/messages.xlf‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -434,6 +434,22 @@
434434
<source>Phonebook</source>
435435
<note priority="1" from="description">Application Name</note>
436436
<note priority="1" from="meaning">NavigationBar</note>
437+
</trans-unit><trans-unit id="MissingUserImageGreeting" datatype="html">
438+
<source>Hey</source>
439+
<note priority="1" from="description">Greeting</note>
440+
<note priority="1" from="meaning">NavigationComponent</note>
441+
</trans-unit><trans-unit id="MissingUserImageMessage" datatype="html">
442+
<source>you haven&apos;t uploaded a picture yet. Want to upload one?</source>
443+
<note priority="1" from="description">Message</note>
444+
<note priority="1" from="meaning">NavigationComponent</note>
445+
</trans-unit><trans-unit id="MissingUserImageTooltip" datatype="html">
446+
<source>If you upload a picture it will be easier for your colleagues to find and contact you!</source>
447+
<note priority="1" from="description">Tooltip for MissingUserImage</note>
448+
<note priority="1" from="meaning">NavigationComponent</note>
449+
</trans-unit><trans-unit id="MissingUserImageAriaLabel" datatype="html">
450+
<source>Button which greets and asks for picture uploading.</source>
451+
<note priority="1" from="description">Aria label for MissingUserImage</note>
452+
<note priority="1" from="meaning">NavigationComponent</note>
437453
</trans-unit><trans-unit id="NavigationComponentReleaseNotes" datatype="html">
438454
<source>Release Notes</source>
439455
<note priority="1" from="description">Release Notes Menu Item</note>

0 commit comments

Comments
 (0)