From c684ba937d1e3bc179f6151cb70489795f049036 Mon Sep 17 00:00:00 2001
From: Hagen <hagen.dressler@mni.thm.de>
Date: Thu, 8 Mar 2018 19:20:01 +0100
Subject: [PATCH] Add delete button to component comment
---
src/app/comment.service.ts | 5 +++++
src/app/comment/comment.component.html | 14 ++++++++++----
src/app/comment/comment.component.scss | 6 ++++++
src/app/comment/comment.component.ts | 10 ++++++++--
4 files changed, 29 insertions(+), 6 deletions(-)
diff --git a/src/app/comment.service.ts b/src/app/comment.service.ts
index 48f7d8e35..7acaa5a05 100644
--- a/src/app/comment.service.ts
+++ b/src/app/comment.service.ts
@@ -18,6 +18,11 @@ export class CommentService {
return this.http.post<Comment>(this.commentsUrl, comment, httpOptions);
}
+ deleteComment(comment: Comment): Observable<Comment> {
+ const url = `${this.commentsUrl}/${comment.id}`;
+ return this.http.delete<Comment>(url, httpOptions);
+ }
+
getComments(roomId: string): Observable<Comment[]> {
const url = `${this.commentsUrl}/?roomId=${roomId}`;
return this.http.get<Comment[]>(url);
diff --git a/src/app/comment/comment.component.html b/src/app/comment/comment.component.html
index 1e55f3fb4..10008393c 100644
--- a/src/app/comment/comment.component.html
+++ b/src/app/comment/comment.component.html
@@ -3,14 +3,20 @@
<li *ngFor="let comment of comments">
<mat-card>
<mat-card-content>
- <h3>{{comment.subject}}</h3><br>
+ <div class="comment-body">
+ <h3>{{comment.subject}}</h3><br>
- {{comment.body}}
+ {{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> {{comment.creationTimestamp | date:'dd-MM-yyyy HH:mm:ss' : format}} </i>
- </div>
+ <i> Submitted on {{comment.creationTimestamp | date:'dd-MM-yyyy HH:mm:ss' : format}} </i>
+ </div>
</mat-card-footer>
</mat-card><br>
</li>
diff --git a/src/app/comment/comment.component.scss b/src/app/comment/comment.component.scss
index 59e5556d1..f02c662df 100644
--- a/src/app/comment/comment.component.scss
+++ b/src/app/comment/comment.component.scss
@@ -1,3 +1,9 @@
+.trash-icon {
+ position: absolute;
+ top: 50%;
+ left: 98%;
+}
+
.date {
text-align: right;
font-size: 80%;
diff --git a/src/app/comment/comment.component.ts b/src/app/comment/comment.component.ts
index f8ab68b39..a68751c8f 100644
--- a/src/app/comment/comment.component.ts
+++ b/src/app/comment/comment.component.ts
@@ -31,8 +31,7 @@ export class CommentComponent implements OnInit {
this.roomService.getRoom(id).subscribe(
params => {
this.getComments(params['id'], params['name']);
- }
- );
+ });
}
getComments(roomId: string, roomName: string): void {
@@ -41,6 +40,13 @@ export class CommentComponent implements OnInit {
this.notification.show(`All comments of room "${roomName}" loaded!`);
}
+ 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();
}
--
GitLab