Skip to content
Snippets Groups Projects
Commit 144e79f2 authored by Thomas Groß's avatar Thomas Groß Committed by Lukas Mauß
Browse files

Add menu for filter comments

parent 8d7d2d3f
Branches
Tags
No related merge requests found
......@@ -4,20 +4,51 @@
</mat-label>
<input #searchBox placeholder="{{ 'comment-list-page.search-box-placeholder-text' | translate }}"
(input)="searchComments(searchBox.value)">
<button mat-button *ngIf="searchBox.value" (click)="hideCommentsList=false; searchBox.value=''">
<button mat-button *ngIf="searchBox.value || isIconHide" (click)="hideCommentsList=false; searchBox.value=''; isIconHide=false">
<mat-icon>close</mat-icon>
</button>
<button mat-button *ngIf="!searchBox.value && userRole == '1' && comments.length > 0"
[matTooltip]="'Export comments'" (click)="export(true)">
<mat-icon class="add-icon" id="export-icon">cloud_download</mat-icon>
</button>
<button mat-button *ngIf="!searchBox.value" color="accent" (click)="openSubmitDialog()">
<button mat-button *ngIf="!searchBox.value && !isIconHide" color="accent" (click)="openSubmitDialog()">
<mat-icon class="add-icon">add_circle</mat-icon>
</button>
<mat-icon *ngIf="!searchBox.value" class="add-filterIcon" color="accent" mat-button [mat-menu-trigger-for]="menu">filter_list</mat-icon>
<mat-menu #menu="matMenu" xPosition="before">
<div id="filterIcon">
<button mat-icon-button (focus)="hideCommentsList=true" (click)="filterMarkAsCorrect(); isIconHide=true" value="over">
<mat-icon>check_circle</mat-icon>
</button>
<button mat-icon-button (focus)="hideCommentsList=true" (click)="filterFavorite(); isIconHide=true" value="over">
<mat-icon>star</mat-icon>
</button>
<button mat-icon-button (focus)="hideCommentsList=true" (click)="filterMarkAsRead(); isIconHide=true" value="over">
<mat-icon>visibility</mat-icon>
</button>
<button mat-icon-button (focus)="hideCommentsList=false; isSortDesc=false" (click)="sortDesc()" value="over">
<mat-icon>keyboard_arrow_up</mat-icon>
</button>
<button mat-icon-button (focus)="hideCommentsList=false; isSortDesc=true" (click)="sort()" value="over">
<mat-icon>keyboard_arrow_down</mat-icon>
</button>
<button mat-icon-button (focus)="hideCommentsList=false; isSortByTime=false" (click)="sortTimeStamp()" value="over">
<mat-icon>remove</mat-icon>
</button>
</div>
</mat-menu>
</div>
<mat-card id="outer-card" *ngIf="hideCommentsList">
<app-comment *ngFor="let current of filteredComments" [comment]="current"> </app-comment>
</mat-card>
<mat-card *ngIf="!hideCommentsList">
<app-comment *ngFor="let current of comments | orderBy: 'score'" [comment]="current"> </app-comment>
<mat-card id="outer-card" *ngIf="!hideCommentsList">
<app-comment *ngFor="let current of comments | orderBy: 'timestamp'" [comment]="current"> </app-comment>
</mat-card>
......@@ -46,3 +46,17 @@ input {
#export-icon {
color: rgba(30,136,229,0.7)
}
.add-filterIcon {
font-size: 45px;
height: 50px;
width: 50px;
line-height: 100%!important;
padding-right: 15px;
padding-top: 8px;
}
.mat-form-field {
float: left;
padding-left: 10px;
}
......@@ -22,8 +22,11 @@ export class CommentListComponent implements OnInit {
comments: Comment[];
isLoading = true;
hideCommentsList: boolean;
isIconHide: boolean;
filteredComments: Comment[];
userRole: UserRole;
isSortDesc: boolean;
isSortByTime: boolean;
constructor(private commentService: CommentService,
private translateService: TranslateService,
......@@ -123,4 +126,40 @@ export class CommentListComponent implements OnInit {
export(clicked: boolean): void {
this.commentService.exportButtonClicked(clicked);
}
filterFavorite(): void {
this.filteredComments = this.comments.filter(c => c.favorite);
}
filterMarkAsRead(): void {
this.filteredComments = this.comments.filter(c => c.read);
}
filterMarkAsCorrect(): void {
this.filteredComments = this.comments.filter(c => c.correct);
}
sort(): void {
this.comments.sort((a, b) => {
if (a.score > b.score) {
return a.score - b.score;
}
});
}
sortDesc(): void {
this.comments.sort((a, b) => {
if (a.score < b.score) {
return b.score - a.score;
}
});
}
sortTimeStamp(): void {
this.comments.sort((a, b) => {
if (a.timestamp > b.timestamp) {
return 1;
}
});
}
}
......@@ -82,3 +82,9 @@ h2 {
opacity: 0.4;
position: absolute;
}
.date {
position: fixed;
bottom: 0;
left: 0;
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment