diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 28f49635d2ff65b1603e81ce398bd992cc03c2d9..7e8c2ec265b9194a6c0c47902201d7c5005a9af9 100644
--- a/src/app/app-routing.module.ts
+++ b/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],
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 0cab4d5af7e70c731fe529d53bebd9511046f9ac..da1505c24a1e153e66a0b8aeda0e9b1e345d1ad5 100644
--- a/src/app/app.module.ts
+++ b/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
],
diff --git a/src/app/comment-list/comment-list.component.html b/src/app/comment-list/comment-list.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..ade8433123b1ab808eacdcff32adfba0523e107b
--- /dev/null
+++ b/src/app/comment-list/comment-list.component.html
@@ -0,0 +1,24 @@
+<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>
diff --git a/src/app/comment-list/comment-list.component.scss b/src/app/comment-list/comment-list.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..22a513126d8806e383c7f5dbae0c1c6f0d5d7b0c
--- /dev/null
+++ b/src/app/comment-list/comment-list.component.scss
@@ -0,0 +1,11 @@
+.trash-icon {
+ position: absolute;
+ top: 50%;
+ left: 98%;
+}
+
+.date {
+ text-align: right;
+ font-size: 80%;
+ margin-right: 10px;
+}
diff --git a/src/app/comment/comment.component.spec.ts b/src/app/comment-list/comment-list.component.spec.ts
similarity index 53%
rename from src/app/comment/comment.component.spec.ts
rename to src/app/comment-list/comment-list.component.spec.ts
index bcac3f25f13c3e3be6e4741ef17af9dcc8e4accf..6c21dc4854e72b2e06a04fb8e7217a5f73de7ae2 100644
--- a/src/app/comment/comment.component.spec.ts
+++ b/src/app/comment-list/comment-list.component.spec.ts
@@ -1,20 +1,20 @@
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();
});
diff --git a/src/app/comment-list/comment-list.component.ts b/src/app/comment-list/comment-list.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..1679082e5ecab285146db4cdd58235d219a36ccf
--- /dev/null
+++ b/src/app/comment-list/comment-list.component.ts
@@ -0,0 +1,52 @@
+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();
+ }
+}
diff --git a/src/app/comment.service.ts b/src/app/comment.service.ts
index c5743daf474a7fed7ea4536e805ffc48e09ca0f3..129c5da8d59a991ccbffd5c67522a0f43b7ad783 100644
--- a/src/app/comment.service.ts
+++ b/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', []))
+ );
}
}
diff --git a/src/app/comment/comment.component.html b/src/app/comment/comment.component.html
deleted file mode 100644
index 222b106fc70a1924d2b4ca26ad4fac61e4acab7c..0000000000000000000000000000000000000000
--- a/src/app/comment/comment.component.html
+++ /dev/null
@@ -1,18 +0,0 @@
-<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>
diff --git a/src/app/comment/comment.component.scss b/src/app/comment/comment.component.scss
deleted file mode 100644
index c0530fd646ba8970628024fdc7e24b3c58706b0d..0000000000000000000000000000000000000000
--- a/src/app/comment/comment.component.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-.date {
- text-align: left;
- font-size: 80%;
-}
-
-.ol {
- list-style: none;
-}
diff --git a/src/app/comment/comment.component.ts b/src/app/comment/comment.component.ts
deleted file mode 100644
index 0d47e825d4e55f6c6e68180b96b3b83a32b75270..0000000000000000000000000000000000000000
--- a/src/app/comment/comment.component.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-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() {
- }
-
-}
diff --git a/src/app/create-comment/create-comment.component.ts b/src/app/create-comment/create-comment.component.ts
index 6927486b799151f23e78ad27a76a349c628a70f1..b3d5c1afb4a224f3a18ad784f81ffc3aceedfb3f 100644
--- a/src/app/create-comment/create-comment.component.ts
+++ b/src/app/create-comment/create-comment.component.ts
@@ -1,4 +1,4 @@
-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.`);
});
}
diff --git a/src/app/room/room.component.html b/src/app/room/room.component.html
index 3b4c66037407a393fad34f0dd8e0267742b2c253..581e828d571ba5ae17e6fcd65018df714e08dfeb 100644
--- a/src/app/room/room.component.html
+++ b/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-->