Skip to content

Commit e226769

Browse files
Frieda-HentschelDanielHabenichtpaule96
authored
feat(dashboard): Toggles recent people list (#512)
* Recent people können mit Button getoggelt werden. Co-authored-by: DanielHabenicht <daniel-habenicht@outlook.de> Co-authored-by: paule96 <paul-jeschke@outlook.com>
1 parent c6296ba commit e226769

File tree

7 files changed

+243
-147
lines changed

7 files changed

+243
-147
lines changed

‎Phonebook.Frontend/src/app/pages/dashboard/dashboard.component.html‎

Lines changed: 122 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -1,101 +1,133 @@
1-
<div class="dashboard">
2-
<div class="pb-bookmarked">
3-
<div class="pb-bookmarked-title">
4-
<h1 i18n="DashboardComponent|Title of the Bookmarked people section@@DashboardComponentTitleBookmark">
5-
Bookmarked People
1+
<mat-drawer-container hasBackdrop="false" class="container" position="end">
2+
<mat-drawer #drawer [mode]="drawerMode" [opened]="drawerOpen" position="end" class="pb-recent-people-drawer">
3+
<div class="pb-recent-people">
4+
<h1>
5+
<ng-container i18n="DashboardComponent|Title of the recent people section@@DashboardComponentTitleRecent">
6+
Recent People
7+
</ng-container>
8+
<button
9+
mat-button
10+
*ngIf="removedLastPersons == null && (lastPersons$ | async)?.length != 0"
11+
(click)="resetLastPersons()"
12+
i18n="@@GeneralResetButton"
13+
>
14+
Reset
15+
</button>
16+
<button mat-button *ngIf="removedLastPersons != null" (click)="undoLastPersons()">
17+
<mat-icon>undo</mat-icon>
18+
<span i18n="GeneralUndoButton|Button for undoing something@@GeneralUndoButton"> Undo </span>
19+
</button>
620
</h1>
7-
<mat-form-field>
8-
<mat-select [(value)]="favoriteSort" (valueChange)="changeOrder()">
9-
<mat-option
10-
value=""
11-
i18n="DashboardComponent|The standard (customizable) order of the favorite cards@@DashboardComponentOrderNone"
21+
<cdk-virtual-scroll-viewport itemSize="148" class="pb-recent-people-list">
22+
<div class="pb-flex-row">
23+
<ng-container *cdkVirtualFor="let person of lastPersons$ | async">
24+
<app-user-tiny-card
25+
[person]="person"
26+
[actionButtonIcon]="'close'"
27+
(actionButtonClicked)="removeFromLastPersons(person)"
28+
class="pb-card"
29+
></app-user-tiny-card>
30+
</ng-container>
31+
<div
32+
*ngIf="(lastPersons$ | async)?.length === 0"
33+
i18n="
34+
DashboardComponent|Message displayed if no people have been visited
35+
recently@@DashboardComponentDescriptionRecent
36+
"
1237
>
13-
Custom Order</mat-option
14-
>
15-
<mat-option
16-
value="asc"
17-
i18n="DashboardComponent|The alphabetical asc order of the favorite cards@@DashboardComponentOrderAsc"
18-
>
19-
Alphabetical asc</mat-option
20-
>
21-
<mat-option
22-
value="desc"
23-
i18n="DashboardComponent|The alphabetical desc order of the favorite cards@@DashboardComponentOrderDesc"
24-
>
25-
Alphabetical desc</mat-option
26-
>
27-
</mat-select>
28-
</mat-form-field>
38+
Looks like you haven't searched for any colleagues yet. Search for somebody to see how it works! The most
39+
recent ones will be displayed here.
40+
</div>
41+
</div>
42+
</cdk-virtual-scroll-viewport>
2943
</div>
30-
<!-- This is a workaround for https://github.com/angular/material2/issues/13372 -->
31-
<div cdkDropListGroup class="pb-flex-row">
44+
</mat-drawer>
45+
<mat-drawer-content class="content">
46+
<div class="pb-bookmarked">
47+
<div class="pb-bookmarked-title">
48+
<h1 i18n="DashboardComponent|Title of the Bookmarked people section@@DashboardComponentTitleBookmark">
49+
Bookmarked People
50+
</h1>
51+
<mat-form-field>
52+
<mat-select [(value)]="favoriteSort" (valueChange)="changeOrder()">
53+
<mat-option
54+
value=""
55+
i18n="
56+
DashboardComponent|The standard (customizable) order of the favorite cards@@DashboardComponentOrderNone
57+
58+
"
59+
>
60+
Custom Order</mat-option
61+
>
62+
<mat-option
63+
value="asc"
64+
i18n="DashboardComponent|The alphabetical asc order of the favorite cards@@DashboardComponentOrderAsc"
65+
>
66+
Alphabetical asc</mat-option
67+
>
68+
<mat-option
69+
value="desc"
70+
i18n="DashboardComponent|The alphabetical desc order of the favorite cards@@DashboardComponentOrderDesc"
71+
>
72+
Alphabetical desc</mat-option
73+
>
74+
</mat-select>
75+
</mat-form-field>
76+
</div>
77+
<!-- This is a workaround for https://github.com/angular/material2/issues/13372 -->
78+
<div cdkDropListGroup class="pb-bookmarks-list pb-flex-row">
79+
<div
80+
*ngFor="let person of bookmarkedPersons; index as i"
81+
cdkDropList
82+
[cdkDropListData]="i"
83+
cdkDropListOrientation="horizontal"
84+
class="card-container"
85+
>
86+
<app-user-small-card
87+
[person]="person"
88+
[actionButtonIcon]="'close'"
89+
[actionButtonClasses]="'white'"
90+
(actionButtonClicked)="removeFromBookmarkedPersons(person)"
91+
class="pb-small-card pb-card"
92+
cdkDrag
93+
(cdkDragEntered)="entered($event)"
94+
(cdkDragEnded)="ended($event)"
95+
[cdkDragData]="i"
96+
[cdkDragDisabled]="favoriteSort != ''"
97+
></app-user-small-card>
98+
</div>
99+
</div>
32100
<div
33-
*ngFor="let person of bookmarkedPersons; index as i"
34-
cdkDropList
35-
[cdkDropListData]="i"
36-
cdkDropListOrientation="horizontal"
37-
class="card-container"
101+
*ngIf="bookmarkedPersons.length === 0"
102+
i18n="DashboardComponent|Message displayed if no people are bookmarked@@DashboardComponentDescriptionBookmark"
38103
>
39-
<app-user-small-card
40-
[person]="person"
41-
[actionButtonIcon]="'close'"
42-
[actionButtonClasses]="'white'"
43-
(actionButtonClicked)="removeFromBookmarkedPersons(person)"
44-
class="pb-small-card pb-card"
45-
cdkDrag
46-
(cdkDragEntered)="entered($event)"
47-
(cdkDragEnded)="ended($event)"
48-
[cdkDragData]="i"
49-
[cdkDragDisabled]="favoriteSort != ''"
50-
></app-user-small-card>
104+
You haven't bookmarked anybody yet, look for the button
105+
<button mat-icon-button>
106+
<mat-icon>bookmark_border</mat-icon>
107+
</button>
108+
on a workmates page.
51109
</div>
52110
</div>
53-
<div
54-
*ngIf="bookmarkedPersons.length === 0"
55-
i18n="DashboardComponent|Message displayed if no people are bookmarked@@DashboardComponentDescriptionBookmark"
56-
>
57-
You haven't bookmarked anybody yet, look for the button
58-
<button mat-icon-button>
59-
<mat-icon>bookmark_border</mat-icon>
60-
</button>
61-
on a workmates page.
62-
</div>
63-
</div>
64-
<mat-divider [vertical]="true"></mat-divider>
65-
<cdk-virtual-scroll-viewport itemSize="148" class="pb-last">
66-
<h1>
67-
<ng-container i18n="DashboardComponent|Title of the recent people section@@DashboardComponentTitleRecent">
68-
Recent People
69-
</ng-container>
111+
<div class="toggle-drawer">
70112
<button
71-
mat-button
72-
*ngIf="removedLastPersons == null && (lastPersons$ | async)?.length != 0"
73-
(click)="resetLastPersons()"
74-
i18n="@@GeneralResetButton"
113+
mat-icon-button
114+
(click)="drawer.toggle()"
115+
i18n-matTooltip="
116+
DashboardComponent|Tooltip for expanding recently viewed people@@DashboardComponentButtonExpandTooltip
117+
"
118+
i18n-aria-label="
119+
DashboardComponent|Aria Label for expanding recently viewed people@@DashboardComponentButtonExpandArialLabel
120+
"
121+
matTooltip="Expand or Collapse recently viewed people"
122+
aria-label="Button expanding or collapsing the recently viewed people section"
75123
>
76-
Reset
77-
</button>
78-
<button mat-button *ngIf="removedLastPersons != null" (click)="undoLastPersons()">
79-
<mat-icon>undo</mat-icon>
80-
<span i18n="GeneralUndoButton|Button for undoing something@@GeneralUndoButton"> Undo </span>
124+
<span>
125+
<mat-icon>{{ drawer.opened ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }} </mat-icon>
126+
<span i18n="DashboardComponent|Title of the recent people section@@DashboardComponentTitleRecent"
127+
>Recent People</span
128+
>
129+
</span>
81130
</button>
82-
</h1>
83-
<div class="pb-flex-row">
84-
<ng-container *cdkVirtualFor="let person of lastPersons$ | async">
85-
<app-user-tiny-card
86-
[person]="person"
87-
[actionButtonIcon]="'close'"
88-
(actionButtonClicked)="removeFromLastPersons(person)"
89-
class="pb-card"
90-
></app-user-tiny-card>
91-
</ng-container>
92-
<div
93-
*ngIf="(lastPersons$ | async)?.length === 0"
94-
i18n="DashboardComponent|Message displayed if no people have been visited recently@@DashboardComponentDescriptionRecent"
95-
>
96-
Looks like you haven't searched for any colleagues yet. Search for somebody to see how it works! The most recent
97-
ones will be displayed here.
98-
</div>
99131
</div>
100-
</cdk-virtual-scroll-viewport>
101-
</div>
132+
</mat-drawer-content>
133+
</mat-drawer-container>

‎Phonebook.Frontend/src/app/pages/dashboard/dashboard.component.scss‎

Lines changed: 55 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,67 @@
1-
.dashboard {
2-
display: flex;
3-
flex-flow: row wrap;
1+
mat-drawer-container {
42
margin-top: 20px;
53
width: 100%;
6-
@media (max-width: 1037px) {
7-
display: block;
4+
5+
mat-drawer-content,
6+
mat-drawer {
7+
padding-left: 10px;
8+
overflow: hidden;
89
}
10+
}
911

10-
.pb-bookmarked {
11-
margin-left: 10px;
12-
display: flex;
13-
flex-direction: column;
14-
flex: 1;
12+
.pb-bookmarked {
13+
height: 100%;
14+
display: flex;
15+
flex-direction: column;
16+
flex: 1;
1517

16-
.pb-bookmarked-title {
17-
display: flex;
18-
flex-direction: row;
19-
margin: 0 0 16px 0;
20-
h1 {
21-
margin: 0;
22-
}
23-
mat-form-field {
24-
margin-left: 16px;
25-
}
26-
::ng-deep .mat-form-field-infix {
27-
border: none;
28-
}
18+
.pb-bookmarked-title {
19+
display: flex;
20+
flex-direction: row;
21+
h1 {
22+
margin: 0;
2923
}
30-
}
31-
mat-divider {
32-
margin: 15px 0 15px 0;
33-
@media (max-width: 1037px) {
34-
display: none;
24+
mat-form-field {
25+
margin-left: 16px;
26+
}
27+
::ng-deep .mat-form-field-infix {
28+
border: none;
3529
}
3630
}
37-
.pb-last {
38-
flex: 1;
39-
max-width: 360px;
40-
margin-left: 10px;
31+
32+
.pb-bookmarks-list {
4133
overflow-y: auto;
42-
@media (max-width: 1037px) {
43-
max-width: unset;
44-
height: 100vh;
34+
}
35+
}
36+
37+
.pb-recent-people-drawer {
38+
width: 370px;
39+
background-color: unset;
40+
}
41+
42+
.pb-recent-people {
43+
height: 100%;
44+
width: 100%;
45+
display: flex;
46+
flex-direction: column;
47+
48+
.pb-recent-people-list {
49+
flex: 1;
50+
}
51+
}
52+
53+
.toggle-drawer {
54+
display: flex;
55+
position: absolute;
56+
z-index: 1;
57+
right: 0;
58+
top: 46%;
59+
padding-right: 10px;
60+
61+
button {
62+
align-self: center;
63+
span {
64+
writing-mode: tb-rl;
4565
}
4666
}
4767
}

‎Phonebook.Frontend/src/app/pages/dashboard/dashboard.component.ts‎

Lines changed: 22 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,26 @@
1+
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
12
import { CdkDragEnd, CdkDragEnter, moveItemInArray } from '@angular/cdk/drag-drop';
2-
import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
3+
import { ChangeDetectorRef, Component, OnInit, OnDestroy } from '@angular/core';
34
import { Select, Store } from '@ngxs/store';
45
import { Observable, Subscription } from 'rxjs';
56
import { map } from 'rxjs/operators';
67
import { Person, PhonebookSortDirection } from 'src/app/shared/models';
78
import { BookmarksState, ToggleBookmark, UpdateBookmarkOrder } from 'src/app/shared/states';
8-
import { LastPersonsState, RemoveFromLastPersons, ResetLastPersons, SetLastPersons } from 'src/app/shared/states/LastPersons.state';
9-
9+
import {
10+
LastPersonsState,
11+
RemoveFromLastPersons,
12+
ResetLastPersons,
13+
SetLastPersons
14+
} from 'src/app/shared/states/LastPersons.state';
15+
import { untilComponentDestroyed } from 'ng2-rx-componentdestroyed';
16+
import { MatDrawerMode } from '@angular/material/sidenav';
1017
@Component({
1118
selector: 'app-dashboard',
1219
templateUrl: './dashboard.component.html',
1320
styleUrls: ['./dashboard.component.scss'],
1421
host: { class: 'pb-expand' }
1522
})
16-
export class DashboardComponent implements OnInit {
23+
export class DashboardComponent implements OnInit, OnDestroy {
1724
@Select(LastPersonsState)
1825
public lastPersons$: Observable<Person[]>;
1926
public bookmarkedPersons: Person[];
@@ -24,10 +31,19 @@ export class DashboardComponent implements OnInit {
2431
@Select(BookmarksState)
2532
public bookmarkedPersons$: Observable<Person[]>;
2633
public removedLastPersons: Person[] | null = null;
27-
constructor(private store: Store, private cd: ChangeDetectorRef) {}
34+
public drawerOpen: boolean = !this.breakpointObserver.isMatched('(max-width: 768px)');
35+
public drawerMode: MatDrawerMode = 'side';
36+
public smallerScreen: boolean = false;
37+
constructor(private store: Store, private cd: ChangeDetectorRef, private breakpointObserver: BreakpointObserver) {}
2838

2939
public ngOnInit() {
3040
this.changeOrder();
41+
this.breakpointObserver
42+
.observe('(max-width: 768px)')
43+
.pipe(untilComponentDestroyed(this))
44+
.subscribe(result => {
45+
this.drawerMode = !result.matches ? 'side' : 'push';
46+
});
3147
}
3248

3349
public changeOrder() {
@@ -82,4 +98,5 @@ export class DashboardComponent implements OnInit {
8298
public removeFromBookmarkedPersons(person: Person) {
8399
this.store.dispatch(new ToggleBookmark(person));
84100
}
101+
ngOnDestroy(): void {}
85102
}

0 commit comments

Comments
 (0)