Merge branch '130-see-reed-comments-participant' into 'master'

Resolve "See reed comments (participant)"

Closes #130

See merge request swtp-block-ws17/arsnova-angular-frontend!77

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

@@ -7,14 +7,14 @@
 
             {{comment.body}}
 
-            <div class="body-buttons" fxLayout="Column" fxLayoutGap="5px" fxLayoutAlign="end">
-              <button *ngIf="!comment.read" mat-fab color="warn" matTooltip="Is not read" (click)="setRead(comment)">
+            <div class="body-buttons">
+              <button *ngIf="!comment.read" mat-fab color="warn" matTooltip="Is not read" (click)="userRole === userRoleTemp && setRead(comment)">
                 <mat-icon>clear</mat-icon>
               </button>
-              <button *ngIf="comment.read" mat-fab color="primary" matTooltip="Is read" (click)="setRead(comment)">
+              <button *ngIf="comment.read" mat-fab color="primary" matTooltip="Is read" (click)="userRole === userRoleTemp && setRead(comment)">
                 <mat-icon>check</mat-icon>
               </button>
-              <button class="trash-icon" mat-fab color="primary" matTooltip="Delete" (click)="delete(comment)">
+              <button *ngIf="userRole === userRoleTemp" class="trash-icon" mat-fab color="primary" matTooltip="Delete" (click)="delete(comment)">
                 <mat-icon>delete</mat-icon>
               </button>
             </div>
@@ -27,6 +27,6 @@
         </mat-card><br>
       </div>
 
-    <button class="back-button" mat-raised-button color="primary" (click)="goBack()">Back</button>
+    <button *ngIf="userRole === userRoleTemp" mat-raised-button color="primary" (click)="goBack()">Back</button>
   </div>
 </div>

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

@@ -16,10 +16,6 @@ mat-card:hover {
   background: #F44336;
 }
 
-.back-button {
-  min-width: 800px;
-}
-
 .body-buttons {
   position: absolute;
   top: 10%;

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

@@ -5,6 +5,9 @@ import { Comment } from '../comment';
 import { CommentService } from '../comment.service';
 import { RoomService } from '../room.service';
 import { NotificationService } from '../notification.service';
+import { AuthenticationService } from '../authentication.service';
+import { UserRole } from '../user-roles.enum';
+import { User } from '../user';
 
 @Component({
   selector: 'app-comment-list',
@@ -12,9 +15,13 @@ import { NotificationService } from '../notification.service';
   styleUrls: ['./comment-list.component.scss']
 })
 export class CommentListComponent implements OnInit {
+  userRoleTemp: any = UserRole.CREATOR;
+  userRole: UserRole;
+  user: User;
   comments: Comment[];
 
   constructor(
+    protected authenticationService: AuthenticationService,
     private route: ActivatedRoute,
     private roomService: RoomService,
     private location: Location,
@@ -22,6 +29,8 @@ export class CommentListComponent implements OnInit {
     private notification: NotificationService) { }
 
   ngOnInit() {
+    this.userRole = this.authenticationService.getRole();
+    this.user = this.authenticationService.getUser();
     this.route.params.subscribe(params => {
       this.getRoom(params['roomId']);
     });
@@ -35,8 +44,13 @@ export class CommentListComponent implements OnInit {
   }
 
   getComments(roomId: string): void {
-    this.commentService.getComments(roomId)
-      .subscribe(comments => this.comments = comments);
+    if (this.userRole === UserRole.CREATOR) {
+      this.commentService.getComments(roomId)
+        .subscribe(comments => this.comments = comments);
+    } else if (this.userRole === UserRole.PARTICIPANT) {
+      this.commentService.searchComments(roomId, this.user.id)
+        .subscribe(comments => this.comments = comments);
+    }
   }
 
   setRead(comment: Comment): void {

src/app/comment.service.ts

@@ -40,6 +40,14 @@ export class CommentService extends ErrorHandlingService {
     );
   }
 
+  searchComments(roomId: string, userId: number): Observable<Comment[]> {
+    const url = `${this.commentsUrl}/?roomId=${roomId}&userId=${userId}`;
+    return this.http.get<Comment[]>(url).pipe(
+      tap (_ => ''),
+      catchError(this.handleError<Comment[]>('getComments', []))
+    );
+  }
+
   updateComment(comment: Comment): Observable<any> {
     return this.http.put(this.commentsUrl, comment, httpOptions).pipe(
       tap(_ => ''),

src/app/comment.ts

 export class Comment {
   id: string;
   roomId: string;
+  userId: number;
   revision: string;
   subject: string;
   body: string;

src/app/create-comment/create-comment.component.html

-<div fxLayout="column" fxLayoutAlign="center" fxLayoutGap="10">
-  <form>
-    <mat-form-field class="input-block">
-      <input matInput #commentSubject type="text" maxlength="24" placeholder="Choose a title">
-    </mat-form-field>
-    <mat-form-field class="input-block">
-      <input matInput #commentBody>
-      <textarea matInput placeholder="Add your comment"></textarea>
-    </mat-form-field>
+<div fxLayout="row" fxLayoutAlign="center">
+  <div fxLayout="column" fxLayoutGap="20">
+    <form>
+      <mat-form-field class="input-block">
+        <input matInput #commentSubject type="text" maxlength="24" placeholder="Choose a title">
+      </mat-form-field>
+      <mat-form-field class="input-block">
+        <input matInput #commentBody>
+        <textarea matInput placeholder="Add your comment"></textarea>
+      </mat-form-field>
 
-    <button mat-raised-button color="primary" (click)="goBack()">Back</button>
-    <button mat-raised-button color="primary" (click)="send(commentSubject.value, commentBody.value)">Send</button>
-  </form>
+      <button mat-raised-button color="primary" (click)="goBack()">Back</button>
+      <button mat-raised-button color="primary" (click)="send(commentSubject.value, commentBody.value)">Send</button>
+    </form>
+  </div>
 </div>
+
+<app-comment-list></app-comment-list>

src/app/create-comment/create-comment.component.scss

+form {
+  min-width: 800px;
+  justify-content: center;
+  margin-bottom: 50px;
+}

src/app/create-comment/create-comment.component.ts

-import { Component, OnInit, Input } from '@angular/core';
+import { Component, OnInit, Input, ViewChild } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { Location } from '@angular/common';
 import { Room } from '../room';
 import { Comment } from '../comment';
 import { RoomService } from '../room.service';
-import { CommentService} from '../comment.service';
+import { CommentService } from '../comment.service';
 import { NotificationService } from '../notification.service';
-import { Router } from '@angular/router';
+import { AuthenticationService } from '../authentication.service';
+import { User } from '../user';
+import { CommentListComponent } from '../comment-list/comment-list.component';
 
 @Component({
   selector: 'app-create-comment',
@@ -14,10 +16,12 @@ import { Router } from '@angular/router';
   styleUrls: ['./create-comment.component.scss']
 })
 export class CreateCommentComponent implements OnInit {
+  @ViewChild(CommentListComponent) child: CommentListComponent;
   @Input() room: Room;
+  user: User;
 
   constructor(
-    private router: Router,
+    protected authenticationService: AuthenticationService,
     private route: ActivatedRoute,
     private roomService: RoomService,
     private commentService: CommentService,
@@ -25,6 +29,7 @@ export class CreateCommentComponent implements OnInit {
     private notification: NotificationService) { }
 
   ngOnInit(): void {
+    this.user = this.authenticationService.getUser();
     this.route.params.subscribe(params => {
       this.getRoom(params['roomId']);
     });
@@ -42,11 +47,12 @@ export class CreateCommentComponent implements OnInit {
     }
     this.commentService.addComment({
       roomId: this.room.id,
+      userId: this.user.id,
       subject: subject,
       body: body,
       creationTimestamp: new Date(Date.now())
     } as Comment).subscribe(() => {
-      this.router.navigate([`/participant/room/${this.room.id}`]);
+      this.child.getComments(this.room.id);
       this.notification.show(`Comment '${subject}' successfully created.`);
     });
   }

src/app/in-memory-data.service.ts

@@ -56,6 +56,7 @@ export class InMemoryDataService implements InMemoryDbService {
       {
         id: '1',
         roomId: '1',
+        userId: '1',
         revision: '',
         subject: 'testcomment',
         body: 'adsasdasdasdasdas',
@@ -65,6 +66,7 @@ export class InMemoryDataService implements InMemoryDbService {
       {
         id: '2',
         roomId: '1',
+        userId: '2',
         revision: '',
         subject: 'asdaskldmaskld',
         body: 'knkdiasslkladskmdaskld',
@@ -74,6 +76,7 @@ export class InMemoryDataService implements InMemoryDbService {
       {
         id: '3',
         roomId: '2',
+        userId: '1',
         revision: '',
         subject: 'testcomment',
         body: 'adsasdasdasdasdas',

src/app/participant-room/participant-room.component.html

@@ -23,9 +23,6 @@
         <button mat-button color="primary" matTooltip="Join question round">
           Questions
         </button>
-        <button mat-button color="primary" matTooltip="See room comments">
-          Comments
-        </button>
         <button mat-button color="primary" matTooltip="Start personal question round">
           Learn
         </button>