Merge branch '51-comment-creation-participant-component-logic' into 'master'

Resolve "comment creation - participant component logic"

Closes #51 and #45

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

src/app/app-routing.module.ts

@@ -9,6 +9,8 @@ import { ParticipantHomeScreenComponent } from './participant-home-screen/partic
 import { AuthenticationGuard } from './authentication.guard';
 import { UserRole } from './user-roles.enum';
 import { ParticipantRoomComponent } from './participant-room/participant-room.component';
+import { CommentComponent } from './comment/comment.component';
+import { CommentListComponent } from './comment-list/comment-list.component';
 
 const routes: Routes = [
   { path: '', redirectTo: '/home', pathMatch: 'full' },
@@ -30,6 +32,12 @@ const routes: Routes = [
     component: RoomComponent,
     canActivate: [AuthenticationGuard]
   },
+  {
+    path: 'room/:roomId/comments',
+    component: CommentListComponent,
+    canActivate: [AuthenticationGuard],
+    data: { roles: [UserRole.CREATOR] }
+  },
   { path: 'room/:roomId/create-comment',
     component: CreateCommentComponent,
     canActivate: [AuthenticationGuard],

src/app/app.module.ts

@@ -8,7 +8,7 @@ import { JoinRoomComponent } from './join-room/join-room.component';
 import { LoginComponent } from './login/login.component';
 import { RegisterComponent } from './register/register.component';
 import { PasswordResetComponent } from './password-reset/password-reset.component';
-import { CommentComponent } from './comment/comment.component';
+import { CommentListComponent } from './comment-list/comment-list.component';
 
 import { AppRoutingModule } from './app-routing.module';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@@ -85,7 +85,7 @@ import { DataStoreService } from './data-store.service';
     CreatorHomeScreenComponent,
     CreateCommentComponent,
     ParticipantHomeScreenComponent,
-    CommentComponent,
+    CommentListComponent,
     ContentAnswersComponent,
     ParticipantRoomComponent
   ],

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

+<div fxLayout="column" fxLayoutAlign="center" fxLayoutGap="10">
+  <div *ngFor="let comment of comments">
+    <mat-card>
+      <mat-card-content>
+        <div class="comment-body">
+          <h3>{{comment.subject}}</h3><br>
+
+          {{comment.body}}
+
+          <div class="trash-icon">
+            <i class="material-icons" (click)="delete(comment)">delete</i>
+          </div>
+        </div>
+      </mat-card-content>
+      <mat-card-footer>
+        <div class="date">
+          <i> Submitted on {{comment.creationTimestamp | date:'dd-MM-yyyy HH:mm:ss' : format}} </i>
+        </div>
+      </mat-card-footer>
+    </mat-card><br>
+  </div>
+</div>
+
+<button mat-raised-button color="primary" (click)="goBack()">Back</button>

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

+.trash-icon {
+  position: absolute;
+  top: 50%;
+  left: 98%;
+}
+
+.date {
+  text-align: right;
+  font-size: 80%;
+  margin-right: 10px;
+}

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

 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { CommentComponent } from './comment.component';
+import { CommentListComponent } from './comment-list.component';
 
-describe('CommentComponent', () => {
-  let component: CommentComponent;
-  let fixture: ComponentFixture<CommentComponent>;
+describe('CommentListComponent', () => {
+  let component: CommentListComponent;
+  let fixture: ComponentFixture<CommentListComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ CommentComponent ]
+      declarations: [ CommentListComponent ]
     })
     .compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(CommentComponent);
+    fixture = TestBed.createComponent(CommentListComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

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

+import { Component, Input, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { Location } from '@angular/common';
+import { Comment } from '../comment';
+import { CommentService} from '../comment.service';
+import { RoomService } from '../room.service';
+import { NotificationService } from '../notification.service';
+
+@Component({
+  selector: 'app-comment-list',
+  templateUrl: './comment-list.component.html',
+  styleUrls: ['./comment-list.component.scss']
+})
+export class CommentListComponent implements OnInit {
+  comments: Comment[];
+
+  constructor(
+    private route: ActivatedRoute,
+    private roomService: RoomService,
+    private location: Location,
+    private commentService: CommentService,
+    private notification: NotificationService) { }
+
+  ngOnInit() {
+    this.route.params.subscribe(params => {
+      this.getRoom(params['roomId']);
+    });
+  }
+
+  getRoom(id: string): void {
+    this.roomService.getRoom(id).subscribe(
+      params => {
+        this.getComments(params['id'], params['name']);
+      });
+  }
+
+  getComments(roomId: string, roomName: string): void {
+    this.commentService.getComments(roomId)
+      .subscribe(comments => this.comments = comments);
+  }
+
+  delete(comment: Comment): void {
+    this.comments = this.comments.filter(c => c !== comment);
+    this.commentService.deleteComment(comment).subscribe(room => {
+      this.notification.show(`Comment '${comment.subject}' successfully deleted.`);
+    });
+  }
+
+  goBack(): void {
+    this.location.back();
+  }
+}

src/app/comment.service.ts

@@ -2,19 +2,41 @@ import { Injectable } from '@angular/core';
 import { HttpClient, HttpHeaders } from '@angular/common/http';
 import { Observable } from 'rxjs/Observable';
 import { Comment } from './comment';
+import { catchError, tap } from 'rxjs/operators';
+import { ErrorHandlingService } from './error-handling.service';
 
 const httpOptions = {
   headers: new HttpHeaders({ 'Content-Type': 'application/json' })
 };
 
 @Injectable()
-export class CommentService {
+export class CommentService extends ErrorHandlingService {
   private commentsUrl = 'api/comments';
 
   constructor( private http: HttpClient ) {
+    super();
   }
 
   addComment(comment: Comment): Observable<Comment> {
-    return this.http.post<Comment>(this.commentsUrl, comment, httpOptions);
+    return this.http.post<Comment>(this.commentsUrl, comment, httpOptions).pipe(
+      tap (_ => ''),
+      catchError(this.handleError<Comment>('addComment'))
+    );
+  }
+
+  deleteComment(comment: Comment): Observable<Comment> {
+    const url = `${this.commentsUrl}/${comment.id}`;
+    return this.http.delete<Comment>(url, httpOptions).pipe(
+      tap (_ => ''),
+      catchError(this.handleError<Comment>('deleteComment'))
+    );
+  }
+
+  getComments(roomId: string): Observable<Comment[]> {
+    const url = `${this.commentsUrl}/?roomId=${roomId}`;
+    return this.http.get<Comment[]>(url).pipe(
+      tap (_ => ''),
+      catchError(this.handleError<Comment[]>('getComments', []))
+    );
   }
 }

src/app/comment/comment.component.html

-<ol class ="ol">
-  <li>
-    <mat-card>
-      <mat-card-content>
-        <b> <!-- insert subject of comment --> </b><br>
-
-       <!-- insert comment -->
-      </mat-card-content>
-      <mat-card-footer>
-        <div class="date">
-         <i> <!-- insert date of comment --> </i>
-       </div>
-       </mat-card-footer>
-    </mat-card><br>
-  </li>
-</ol>
-
-<button mat-raised-button color="primary">back</button>

src/app/comment/comment.component.scss

-.date {
-  text-align: left;
-  font-size: 80%;
-}
-
-.ol {
-  list-style: none;
-}

src/app/comment/comment.component.ts

-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'app-comment',
-  templateUrl: './comment.component.html',
-  styleUrls: ['./comment.component.scss']
-})
-export class CommentComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit() {
-  }
-
-}

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

-import {Component, OnInit, Input, Inject} from '@angular/core';
+import { Component, OnInit, Input } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { Location } from '@angular/common';
 import { Room } from '../room';
@@ -6,7 +6,7 @@ import { Comment } from '../comment';
 import { RoomService } from '../room.service';
 import { CommentService} from '../comment.service';
 import { NotificationService } from '../notification.service';
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-create-comment',
@@ -17,6 +17,7 @@ export class CreateCommentComponent implements OnInit {
   @Input() room: Room;
 
   constructor(
+    private router: Router,
     private route: ActivatedRoute,
     private roomService: RoomService,
     private commentService: CommentService,
@@ -45,6 +46,7 @@ export class CreateCommentComponent implements OnInit {
       body: body,
       creationTimestamp: new Date(Date.now())
     } as Comment).subscribe(room => {
+      this.router.navigate([`room/${this.room.id}`]);
       this.notification.show(`Comment '${subject}' successfully created.`);
     });
   }

src/app/room/room.component.html

@@ -11,6 +11,10 @@
   <button mat-button routerLink="/room/{{room.id}}/create-comment">
     Create comment <!-- Only for participant -->
   </button>
+
+  <button mat-button routerLink="/room/{{room.id}}/comments">
+    Visit comments <!-- Only for creator -->
+  </button>
 </mat-list>
 
 <!-- content-type of room-->