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 4d6ad8fc36bb05ea6063081bdf32b6bb882dd922..fee50c394401a7f82e5e3b2627aed6f4d74cc315 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,45 +29,47 @@
</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>
<mat-menu #filterMenu="matMenu" xPosition="before">
<div>
- <button mat-icon-button (focus)="hideCommentsList=true" (click)="filter(correct)">
+ <button mat-icon-button (focus)="hideCommentsList=true" (click)="filterComments(correct)">
<mat-icon [ngClass]="{correct: 'correct-icon'}[currentFilter]">check_circle</mat-icon>
</button>
- <button mat-icon-button (focus)="hideCommentsList=true" (click)="filter(favorite)">
+ <button mat-icon-button (focus)="hideCommentsList=true" (click)="filterComments(favorite)">
<mat-icon [ngClass]="{favorite: 'favorite-icon'}[currentFilter]">favorite</mat-icon>
</button>
- <button mat-icon-button (focus)="hideCommentsList=true" (click)="filter(read)">
+ <button mat-icon-button (focus)="hideCommentsList=true" (click)="filterComments(read)">
<mat-icon [ngClass]="{read: 'read-icon'}[currentFilter]">visibility</mat-icon>
</button>
- <button mat-icon-button (focus)="hideCommentsList=true" (click)="filter(unread)">
+ <button mat-icon-button (focus)="hideCommentsList=true" (click)="filterComments(unread)">
<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>
-<app-comment *ngFor="let current of showComments()" [comment]="current" [parseVote]="getVote(current)"></app-comment>
+<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 5d30aff4983393e5eabfa42b5fdef80a87777b95..e352c8327034704c66ea737f00c1102ed122d4d8 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,20 +54,27 @@ export class CommentListComponent implements OnInit {
ngOnInit() {
this.roomId = localStorage.getItem(`roomId`);
- const userId = this.authenticationService.getUser().id;
- this.voteService.getByRoomIdAndUserID(this.roomId, userId).subscribe(votes => {
- for (const v of votes) {
- this.commentVoteMap.set(v.commentId, v);
- }
- });
+ 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 => {
+ for (const v of votes) {
+ this.commentVoteMap.set(v.commentId, v);
+ }
+ });
+ }
+ this.commentService.getComments(this.roomId)
+ .subscribe(comments => {
+ this.comments = comments;
+ this.getComments();
+ });
}
searchComments(term: string): void {
@@ -81,29 +86,24 @@ export class CommentListComponent implements OnInit {
}
}
- showComments(): Comment[] {
+ getComments(): void {
this.isLoading = false;
let commentThreshold = -10;
if (this.room.extensions && this.room.extensions['comments']) {
commentThreshold = this.room.extensions['comments'].commentThreshold;
if (this.hideCommentsList) {
- return this.filteredComments.filter( x => x.score >= commentThreshold );
- } else {
- this.sort(this.currentSort);
- return this.comments.filter( x => x.score >= commentThreshold );
- }
- } else {
- if (this.hideCommentsList) {
- return this.filteredComments;
+ this.filteredComments = this.filteredComments.filter( x => x.score >= commentThreshold );
} else {
- this.sort(this.currentSort);
- return this.comments;
+ this.comments = this.comments.filter( x => x.score >= commentThreshold );
}
}
+ this.sortComments(this.currentSort);
}
getVote(comment: Comment): Vote {
- return this.commentVoteMap.get(comment.id);
+ if (this.userRole === 0) {
+ return this.commentVoteMap.get(comment.id);
+ }
}
parseIncomingMessage(message: Message) {
@@ -157,7 +157,8 @@ export class CommentListComponent implements OnInit {
}
break;
}
- this.filter(this.currentFilter);
+ this.filterComments(this.currentFilter);
+ this.sortComments(this.currentSort);
}
openCreateDialog(): void {
@@ -180,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);
- }
-
- filter(type: string): void {
+ 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;
@@ -245,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 5a8df0ad56470a12b90a4850b0a70d310f6b706b..6f6989296bcf0c49bb62287727c9d25143bd3c93 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 9c8f4a178733afa36456f248cf2eaa1905edc249..713c01d0931e5f6534a75ee45e432061173ce3e0 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 e143fde220b879959437498fb56431957b3ec851..786cbe393453b22b972da58071952d3297043a78 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 9590065316ab51fe13eed174bae56529d1352fa3..00f4460757bcf14f0b72e990e377851ca9cb7904 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;
@@ -77,7 +76,9 @@ export class CommentComponent implements OnInit {
@Input()
set parseVote(vote: Vote) {
- this.hasVoted = vote.vote;
+ if (this.isStudent) {
+ this.hasVoted = vote.vote;
+ }
}
resetAnimationState(): void {