Merge branch 'mark-as-favorite' into 'master'

Mark as favorite and mark as read

Closes #4 and #5

See merge request swtp-2019/arsnova-lite!15

src/app/components/shared/comment-list/comment-list.component.html

 <mat-toolbar >List of Questions</mat-toolbar>
-<mat-card class="outer-card">
+<mat-card>
     <app-comment *ngFor="let current of comments" [comment]="current"> </app-comment>
 </mat-card>

src/app/components/shared/comment-list/comment-list.component.scss

 mat-card {
   margin-bottom: 20px;
   background-color: #b2ebf2;
-}
-
-mat-card-content>:first-child {
-  margin-top: 20px;
+  border-radius: 8px;
 }
 
 mat-toolbar {
@@ -12,7 +9,3 @@ mat-toolbar {
   margin-bottom: 20px;
   background-color: #bbdefb;
 }
-
-.outer-card {
-  border-radius: 8px;
-}

src/app/components/shared/comment-list/comment-list.component.ts

 import { Component, OnInit } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
-import { Location } from '@angular/common';
 import { Comment } from '../../../models/comment';
 import { CommentService } from '../../../services/http/comment.service';
-import { RoomService } from '../../../services/http/room.service';
-import { NotificationService } from '../../../services/util/notification.service';
-import { AuthenticationService } from '../../../services/http/authentication.service';
-import { UserRole } from '../../../models/user-roles.enum';
-import { User } from '../../../models/user';
 import { TranslateService } from '@ngx-translate/core';
 import { LanguageService } from '../../../services/util/language.service';
 
@@ -17,28 +10,17 @@ import { LanguageService } from '../../../services/util/language.service';
   styleUrls: ['./comment-list.component.scss']
 })
 export class CommentListComponent implements OnInit {
-  userRole: UserRole;
-  user: User;
   comments: Comment[];
   isLoading = true;
   roomId: string;
-  roomShortId: string;
 
-  constructor(protected authenticationService: AuthenticationService,
-              private route: ActivatedRoute,
-              private roomService: RoomService,
-              private location: Location,
-              private commentService: CommentService,
-              private notification: NotificationService,
+  constructor(private commentService: CommentService,
               private translateService: TranslateService,
               protected langService: LanguageService) {
     langService.langEmitter.subscribe(lang => translateService.use(lang));
   }
 
   ngOnInit() {
-    this.userRole = this.authenticationService.getRole();
-    this.user = this.authenticationService.getUser();
-    this.roomShortId = this.route.snapshot.paramMap.get('roomId');
     this.roomId = localStorage.getItem(`roomId`);
     this.getComments();
     this.translateService.use(localStorage.getItem('currentLang'));

src/app/components/shared/comment/comment.component.html

@@ -2,9 +2,15 @@
   <div fxLayout="row" fxLayoutAlign="center center">
     <mat-card-title>{{comment.subject}}</mat-card-title>
     <span class="fill-remaining-space"></span>
-    <button mat-icon-button [disabled]="userRole === 0" (click)="setCorrect(comment)" [matTooltip]="comment.correct ? 'Anwort richtig' : null">
+    <button mat-icon-button [disabled]="isCreator" (click)="setCorrect(comment)" [matTooltip]="comment.correct ? 'Unmark as correct' : 'Mark as correct'">
       <mat-icon [ngClass]="{'correct-icon' : comment.correct === true}">check_circle</mat-icon>
     </button>
+    <button mat-icon-button [disabled]="isCreator" (click)="setFavorite(comment)" [matTooltip]="comment.favorite ? 'Mark as not favorite' : 'Mark as favorite'">
+      <mat-icon [ngClass]="{'favorite-icon' : comment.favorite === true}">star</mat-icon>
+    </button>
+    <button mat-icon-button [disabled]="isCreator" (click)="setRead(comment)" [matTooltip]="comment.read ? 'Mark  as unread' : 'Mark as read'">
+      <mat-icon [ngClass]="{'read-icon' : comment.read === true}">visibility</mat-icon>
+    </button>
   </div>
   <mat-divider></mat-divider>
   <mat-card-content>

src/app/components/shared/comment/comment.component.scss

 mat-card {
   margin-bottom: 20px;
-  background-color: #b2ebf2;
+  background-color: #4dd0e1;
+  cursor: pointer;
 }
 
 mat-card-content>:first-child {
@@ -13,28 +14,18 @@ mat-toolbar {
   background-color: #bbdefb;
 }
 
-.card-container {
-  background-color: #4dd0e1;
-  opacity: 0.7;
-  border-radius: 2px;
-}
-
-.outer-card {
-  border-radius: 8px;
-}
-
 mat-icon {
   color: white;
 }
 
-.incorrect-icon {
-  color: white;
-}
-
 .correct-icon {
   color: green;
 }
 
-mat-card-title {
-  margin: 0px;
+.read-icon {
+  color: blue;
+}
+
+.favorite-icon {
+  color: #fdd835;
 }

src/app/components/shared/comment/comment.component.ts

 import { Component, Input, OnInit } from '@angular/core';
 import { Comment } from '../../../models/comment';
-import { UserRole } from '../../../models/user-roles.enum';
-import { User } from '../../../models/user';
 import { AuthenticationService } from '../../../services/http/authentication.service';
 import { ActivatedRoute } from '@angular/router';
 import { Location } from '@angular/common';
@@ -17,8 +15,7 @@ import { LanguageService } from '../../../services/util/language.service';
 })
 export class CommentComponent implements OnInit {
   @Input() comment: Comment;
-  userRole: UserRole;
-  user: User;
+  isCreator = false;
   isLoading = true;
 
   constructor(protected authenticationService: AuthenticationService,
@@ -31,12 +28,14 @@ export class CommentComponent implements OnInit {
     langService.langEmitter.subscribe(lang => translateService.use(lang)); }
 
   ngOnInit() {
-    this.userRole = this.authenticationService.getRole();
-    this.user = this.authenticationService.getUser();
+    if (this.authenticationService.getRole() === 0) {
+      this.isCreator = true;
+    }
     this.translateService.use(localStorage.getItem('currentLang'));
   }
 
   setRead(comment: Comment): void {
+    comment.read = !comment.read;
     this.commentService.updateComment(comment).subscribe();
   }
 
@@ -45,6 +44,11 @@ export class CommentComponent implements OnInit {
     this.commentService.updateComment(comment).subscribe();
   }
 
+  setFavorite(comment: Comment): void {
+    comment.favorite = !comment.favorite;
+    this.commentService.updateComment(comment).subscribe();
+  }
+
   delete(comment: Comment): void {
     this.commentService.deleteComment(comment.id).subscribe(room => {
       this.notification.show(`Comment '${comment.subject}' successfully deleted.`);

src/app/models/comment.ts

@@ -7,5 +7,26 @@ export class Comment {
   body: string;
   read: boolean;
   correct: boolean;
+  favorite: boolean;
   creationTimestamp: number;
+
+  constructor(roomId: string,
+              userId: string,
+              subject: string,
+              body: string,
+              read: boolean,
+              correct: boolean,
+              favorite: boolean,
+              creationTimestamp: number) {
+    this.id = '';
+    this.roomId = roomId;
+    this.userId = userId;
+    this.revision = '';
+    this.subject = subject;
+    this.body = body;
+    this.read = read;
+    this.correct = correct;
+    this.favorite = favorite;
+    this.creationTimestamp = creationTimestamp;
+  }
 }