Add comment-list to create-comment

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

@@ -7,7 +7,7 @@
 
             {{comment.body}}
 
-            <div class="body-buttons" fxLayout="Column" fxLayoutGap="5px" fxLayoutAlign="end">
+            <div class="body-buttons" *ngIf="userRole === CREATOR">
               <button *ngIf="!comment.read" mat-fab color="warn" matTooltip="Is not read" (click)="setRead(comment)">
                 <mat-icon>clear</mat-icon>
               </button>
@@ -27,6 +27,6 @@
         </mat-card><br>
       </div>
 
-    <button class="back-button" mat-raised-button color="primary" (click)="goBack()">Back</button>
+    <button *ngIf="userRole === CREATOR" 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,8 @@ 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';
 
 @Component({
   selector: 'app-comment-list',
@@ -12,9 +14,11 @@ import { NotificationService } from '../notification.service';
   styleUrls: ['./comment-list.component.scss']
 })
 export class CommentListComponent implements OnInit {
+  userRole: UserRole;
   comments: Comment[];
 
   constructor(
+    protected authenticationService: AuthenticationService,
     private route: ActivatedRoute,
     private roomService: RoomService,
     private location: Location,
@@ -22,6 +26,7 @@ export class CommentListComponent implements OnInit {
     private notification: NotificationService) { }
 
   ngOnInit() {
+    this.userRole = this.authenticationService.getRole();
     this.route.params.subscribe(params => {
       this.getRoom(params['roomId']);
     });

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

@@ -4,9 +4,8 @@ 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';
 
 @Component({
   selector: 'app-create-comment',
@@ -17,7 +16,6 @@ export class CreateCommentComponent implements OnInit {
   @Input() room: Room;
 
   constructor(
-    private router: Router,
     private route: ActivatedRoute,
     private roomService: RoomService,
     private commentService: CommentService,
@@ -46,7 +44,6 @@ export class CreateCommentComponent implements OnInit {
       body: body,
       creationTimestamp: new Date(Date.now())
     } as Comment).subscribe(() => {
-      this.router.navigate([`/participant/room/${this.room.id}`]);
       this.notification.show(`Comment '${subject}' successfully created.`);
     });
   }