From 7bc4d26ec8a19cd82c3bde528c06b517dbf59b2c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lukas=20Mau=C3=9F?= <lukas.mauss@mni.thm.de>
Date: Sat, 8 Jun 2019 19:31:37 +0200
Subject: [PATCH] Improve filtering/sorting
---
.../comment-list/comment-list.component.html | 12 +--
.../comment-list/comment-list.component.ts | 88 ++++++-------------
.../comment-page/comment-page.component.html | 8 +-
.../comment-page/comment-page.component.ts | 15 +---
.../shared/comment/comment.component.html | 6 +-
.../shared/comment/comment.component.ts | 1 -
6 files changed, 40 insertions(+), 90 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 f90ad45ee..fee50c394 100644
--- a/src/app/components/shared/comment-list/comment-list.component.html
+++ b/src/app/components/shared/comment-list/comment-list.component.html
@@ -1,4 +1,4 @@
-<div fxLayout="row" id="search-container" *ngIf="!isLoading">
+<div fxLayout="row" id="search-container">
<mat-label fxLayoutAlign="center center">
<mat-icon class="search-icon">search</mat-icon>
</mat-label>
@@ -29,15 +29,15 @@
</div>
<mat-menu #sortMenu="matMenu" xPosition="before">
- <button mat-icon-button (focus)="hideCommentsList=false" (click)="sort(votedesc)">
+ <button mat-icon-button (focus)="hideCommentsList=false" (click)="sortComments(votedesc)">
<mat-icon>arrow_upwards</mat-icon>
</button>
- <button mat-icon-button (focus)="hideCommentsList=false" (click)="sort(voteasc)">
+ <button mat-icon-button (focus)="hideCommentsList=false" (click)="sortComments(voteasc)">
<mat-icon>arrow_downwards</mat-icon>
</button>
- <button mat-icon-button (focus)="hideCommentsList=false" (click)="sort(currentSort === timedesc ? timeasc : timedesc)">
+ <button mat-icon-button (focus)="hideCommentsList=false" (click)="sortComments(currentSort === timedesc ? timeasc : timedesc)">
<mat-icon>access_time</mat-icon>
</button>
</mat-menu>
@@ -60,14 +60,16 @@
<mat-icon [ngClass]="{unread: 'unread-icon'}[currentFilter]">visibility_off</mat-icon>
</button>
- <button mat-icon-button (focus)="hideCommentsList=false" (click)="sort(currentSort)">
+ <button mat-icon-button (focus)="hideCommentsList=false" (click)="sortComments(currentSort)">
<mat-icon>close</mat-icon>
</button>
</div>
</mat-menu>
</div>
+<div *ngIf="!isLoading">
<app-comment *ngFor="let current of hideCommentsList ? filteredComments : comments" [comment]="current" [parseVote]="getVote(current)"></app-comment>
+</div>
<div *ngIf="comments.length < 1" fxLayout="row" fxLayoutAlign="center center" class="no-comments">
<h4>{{ 'comment-page.no-comments' | translate }}</h4>
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 fc6f5f3e5..e352c8327 100644
--- a/src/app/components/shared/comment-list/comment-list.component.ts
+++ b/src/app/components/shared/comment-list/comment-list.component.ts
@@ -10,7 +10,6 @@ import { WsCommentServiceService } from '../../../services/websockets/ws-comment
import { User } from '../../../models/user';
import { Vote } from '../../../models/vote';
import { UserRole } from '../../../models/user-roles.enum';
-import { AuthenticationService } from '../../../services/http/authentication.service';
import { Room } from '../../../models/room';
import { RoomService } from '../../../services/http/room.service';
import { VoteService } from '../../../services/http/vote.service';
@@ -23,7 +22,7 @@ import { VoteService } from '../../../services/http/vote.service';
export class CommentListComponent implements OnInit {
@Input() user: User;
@Input() roomId: string;
- @Input() comments: Comment[];
+ comments: Comment[];
room: Room;
hideCommentsList = false;
filteredComments: Comment[];
@@ -46,7 +45,6 @@ export class CommentListComponent implements OnInit {
private translateService: TranslateService,
public dialog: MatDialog,
protected langService: LanguageService,
- private authenticationService: AuthenticationService,
private wsCommentService: WsCommentServiceService,
protected roomService: RoomService,
protected voteService: VoteService
@@ -56,14 +54,14 @@ export class CommentListComponent implements OnInit {
ngOnInit() {
this.roomId = localStorage.getItem(`roomId`);
- const userId = this.authenticationService.getUser().id;
+ const userId = this.user.id;
+ this.userRole = this.user.role;
this.roomService.getRoom(this.roomId).subscribe( room => this.room = room);
this.hideCommentsList = false;
this.wsCommentService.getCommentStream(this.roomId).subscribe((message: Message) => {
this.parseIncomingMessage(message);
});
this.translateService.use(localStorage.getItem('currentLang'));
- this.userRole = this.authenticationService.getRole();
this.deviceType = localStorage.getItem('deviceType');
if (this.userRole === 0) {
this.voteService.getByRoomIdAndUserID(this.roomId, userId).subscribe(votes => {
@@ -72,7 +70,11 @@ export class CommentListComponent implements OnInit {
}
});
}
- this.getComments();
+ this.commentService.getComments(this.roomId)
+ .subscribe(comments => {
+ this.comments = comments;
+ this.getComments();
+ });
}
searchComments(term: string): void {
@@ -92,10 +94,10 @@ export class CommentListComponent implements OnInit {
if (this.hideCommentsList) {
this.filteredComments = this.filteredComments.filter( x => x.score >= commentThreshold );
} else {
- this.sort(this.currentSort);
this.comments = this.comments.filter( x => x.score >= commentThreshold );
}
}
+ this.sortComments(this.currentSort);
}
getVote(comment: Comment): Vote {
@@ -156,7 +158,7 @@ export class CommentListComponent implements OnInit {
break;
}
this.filterComments(this.currentFilter);
- this.sort(this.currentSort);
+ this.sortComments(this.currentSort);
}
openCreateDialog(): void {
@@ -179,64 +181,29 @@ export class CommentListComponent implements OnInit {
this.wsCommentService.add(comment);
}
- filterFavorite(): void {
- this.filteredComments = this.comments.filter(c => c.favorite);
- }
-
- filterRead(): void {
- this.filteredComments = this.comments.filter(c => c.read);
- }
-
- filterUnread(): void {
- this.filteredComments = this.comments.filter(c => !c.read);
- }
-
- filterCorrect(): void {
- this.filteredComments = this.comments.filter(c => c.correct);
- }
-
filterComments(type: string): void {
this.currentFilter = type;
- switch (type) {
- case this.correct:
- this.filterCorrect();
- break;
- case this.favorite:
- this.filterFavorite();
- break;
- case this.read:
- this.filterRead();
- break;
- case this.unread:
- this.filterUnread();
- }
- }
-
- sort(type: string): void {
- this.currentSort = type;
- if (type === this.voteasc) {
- this.sortVote();
- } else if (type === this.votedesc) {
- this.sortVoteDesc();
- } else {
- this.sortTime(type);
- }
- }
-
- sortVote(): void {
- this.comments.sort((a, b) => {
- return a.score - b.score;
- });
- }
-
- sortVoteDesc(): void {
- this.comments.sort((a, b) => {
- return b.score - a.score;
+ this.filteredComments = this.comments.filter(c => {
+ switch (type) {
+ case this.correct:
+ return c.correct;
+ case this.favorite:
+ return c.favorite;
+ case this.read:
+ return c.read;
+ case this.unread:
+ return !c.read;
+ }
});
}
- sortTime(type: string): void {
+ sortComments(type: string): void {
this.comments.sort((a, b) => {
+ if (type === this.voteasc) {
+ return a.score - b.score;
+ } else if (type === this.votedesc) {
+ return b.score - a.score;
+ }
const dateA = new Date(a.timestamp), dateB = new Date(b.timestamp);
if (type === this.timedesc) {
return +dateA - +dateB;
@@ -244,5 +211,6 @@ export class CommentListComponent implements OnInit {
return +dateB - +dateA;
}
});
+ this.currentSort = type;
}
}
diff --git a/src/app/components/shared/comment-page/comment-page.component.html b/src/app/components/shared/comment-page/comment-page.component.html
index 5a8df0ad5..6f6989296 100644
--- a/src/app/components/shared/comment-page/comment-page.component.html
+++ b/src/app/components/shared/comment-page/comment-page.component.html
@@ -1,12 +1,6 @@
-<div *ngIf="isLoading" fxLayout="column" fxLayoutAlign="center" fxFill>
- <div fxLayout="row" fxLayoutAlign="center">
- <mat-progress-spinner color="primary" mode="indeterminate"></mat-progress-spinner>
- </div>
-</div>
-
<div fxLayout="column" fxLayoutAlign="center" fxLayoutGap="20px">
<div fxLayout="row" fxLayoutAlign="center">
- <app-comment-list [user]="user" [roomId]="roomId" [comments]="comments"></app-comment-list>
+ <app-comment-list [user]="user" [roomId]="roomId" comments></app-comment-list>
</div>
</div>
diff --git a/src/app/components/shared/comment-page/comment-page.component.ts b/src/app/components/shared/comment-page/comment-page.component.ts
index 9c8f4a178..713c01d09 100644
--- a/src/app/components/shared/comment-page/comment-page.component.ts
+++ b/src/app/components/shared/comment-page/comment-page.component.ts
@@ -3,8 +3,6 @@ import { ActivatedRoute } from '@angular/router';
import { User } from '../../../models/user';
import { NotificationService } from '../../../services/util/notification.service';
import { AuthenticationService } from '../../../services/http/authentication.service';
-import { CommentService } from '../../../services/http/comment.service';
-import { Comment } from '../../../models/comment';
@Component({
selector: 'app-comment-page',
@@ -14,25 +12,14 @@ import { Comment } from '../../../models/comment';
export class CommentPageComponent implements OnInit {
roomId: string;
user: User;
- isLoading = true;
- comments: Comment[];
constructor(private route: ActivatedRoute,
private notification: NotificationService,
- private authenticationService: AuthenticationService,
- private commentService: CommentService) { }
+ private authenticationService: AuthenticationService) { }
ngOnInit(): void {
this.roomId = localStorage.getItem('roomId');
this.user = this.authenticationService.getUser();
- this.getComments();
}
- getComments(): void {
- this.commentService.getComments(this.roomId)
- .subscribe(comments => {
- this.comments = comments;
- this.isLoading = false;
- });
- }
}
diff --git a/src/app/components/shared/comment/comment.component.html b/src/app/components/shared/comment/comment.component.html
index e143fde22..786cbe393 100644
--- a/src/app/components/shared/comment/comment.component.html
+++ b/src/app/components/shared/comment/comment.component.html
@@ -13,15 +13,15 @@
</div>
<button mat-icon-button [disabled]="isStudent" (click)="setCorrect(comment)"
matTooltip="{{ 'comment-page.correct' | translate }}">
- <mat-icon [ngClass]="{true : 'correct-icon', false: 'not-marked'}[comment.correct]">check_circle</mat-icon>
+ <mat-icon [ngClass]="{'correct-icon' : comment.correct, 'not-marked' : !comment.correct}">check_circle</mat-icon>
</button>
<button mat-icon-button [disabled]="isStudent" (click)="setFavorite(comment)"
matTooltip="{{ 'comment-page.favorite' | translate }}">
- <mat-icon [ngClass]="{true: 'favorite-icon', false: 'not-marked'}[comment.favorite]">favorite</mat-icon>
+ <mat-icon [ngClass]="{'favorite-icon' : comment.favorite, 'not-marked' : !comment.favorite}">favorite</mat-icon>
</button>
<button mat-icon-button [disabled]="isStudent" (click)="setRead(comment)"
matTooltip="{{ 'comment-page.read' | translate }}">
- <mat-icon class="icon" [ngClass]="{'read-icon': comment.read, 'not-marked' : !comment.read}">visibility
+ <mat-icon [ngClass]="{'read-icon': comment.read, 'not-marked' : !comment.read}">visibility
</mat-icon>
</button>
</div>
diff --git a/src/app/components/shared/comment/comment.component.ts b/src/app/components/shared/comment/comment.component.ts
index d7f60c701..00f446075 100644
--- a/src/app/components/shared/comment/comment.component.ts
+++ b/src/app/components/shared/comment/comment.component.ts
@@ -41,7 +41,6 @@ export const rubberBand = [
export class CommentComponent implements OnInit {
@Input() comment: Comment;
isStudent = false;
- isLoading = true;
hasVoted = 0;
language: string;
animationState: string;
--
GitLab