From 144e79f27c13176fdfd6361355fde9110139c7e9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Thomas=20Gro=C3=9F?= <thomas.gross@mni.thm.de>
Date: Wed, 3 Apr 2019 19:01:39 +0200
Subject: [PATCH] Add menu for filter comments
---
.../comment-list/comment-list.component.html | 39 +++++++++++++++++--
.../comment-list/comment-list.component.scss | 14 +++++++
.../comment-list/comment-list.component.ts | 39 +++++++++++++++++++
.../shared/comment/comment.component.scss | 6 +++
4 files changed, 94 insertions(+), 4 deletions(-)
diff --git a/src/app/components/shared/comment-list/comment-list.component.html b/src/app/components/shared/comment-list/comment-list.component.html
index 4b4074948..15a8b680e 100644
--- a/src/app/components/shared/comment-list/comment-list.component.html
+++ b/src/app/components/shared/comment-list/comment-list.component.html
@@ -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>
diff --git a/src/app/components/shared/comment-list/comment-list.component.scss b/src/app/components/shared/comment-list/comment-list.component.scss
index 96b859924..15c6d7234 100644
--- a/src/app/components/shared/comment-list/comment-list.component.scss
+++ b/src/app/components/shared/comment-list/comment-list.component.scss
@@ -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;
+}
diff --git a/src/app/components/shared/comment-list/comment-list.component.ts b/src/app/components/shared/comment-list/comment-list.component.ts
index 1f3c0a293..5b8fa0186 100644
--- a/src/app/components/shared/comment-list/comment-list.component.ts
+++ b/src/app/components/shared/comment-list/comment-list.component.ts
@@ -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;
+ }
+ });
+ }
}
diff --git a/src/app/components/shared/comment/comment.component.scss b/src/app/components/shared/comment/comment.component.scss
index 25c56569b..36fe8df74 100644
--- a/src/app/components/shared/comment/comment.component.scss
+++ b/src/app/components/shared/comment/comment.component.scss
@@ -82,3 +82,9 @@ h2 {
opacity: 0.4;
position: absolute;
}
+
+.date {
+ position: fixed;
+ bottom: 0;
+ left: 0;
+}
--
GitLab