diff --git a/src/app/components/shared/_dialogs/submit-comment/submit-comment.component.ts b/src/app/components/shared/_dialogs/submit-comment/submit-comment.component.ts
index eaa0a5f2a15d2766deb6f0044ff512ed35987255..52aa288d8422f673d465051ff6defbfbf50edaff 100644
--- a/src/app/components/shared/_dialogs/submit-comment/submit-comment.component.ts
+++ b/src/app/components/shared/_dialogs/submit-comment/submit-comment.component.ts
@@ -3,9 +3,9 @@ import { Comment } from '../../../../models/comment';
import { NotificationService } from '../../../../services/util/notification.service';
import { MAT_DIALOG_DATA, MatDialog, MatDialogRef } from '@angular/material';
import { TranslateService } from '@ngx-translate/core';
-import { CommentPageComponent } from '../../comment-page/comment-page.component';
import { FormControl, Validators } from '@angular/forms';
import { User } from '../../../../models/user';
+import { CommentListComponent } from '../../comment-list/comment-list.component';
@Component({
@@ -20,17 +20,15 @@ export class SubmitCommentComponent implements OnInit {
user: User;
roomId: string;
- subjectForm = new FormControl('', [Validators.required]);
bodyForm = new FormControl('', [Validators.required]);
- private date = new Date(Date.now());
constructor(
- private notification: NotificationService,
- public dialogRef: MatDialogRef<CommentPageComponent>,
- private translateService: TranslateService,
- public dialog: MatDialog,
- private translationService: TranslateService,
- @Inject(MAT_DIALOG_DATA) public data: any) {
+ private notification: NotificationService,
+ public dialogRef: MatDialogRef<CommentListComponent>,
+ private translateService: TranslateService,
+ public dialog: MatDialog,
+ private translationService: TranslateService,
+ @Inject(MAT_DIALOG_DATA) public data: any) {
}
ngOnInit() {
diff --git a/src/app/components/shared/comment-list/comment-list.component.html b/src/app/components/shared/comment-list/comment-list.component.html
index 7c078d5841210f1ee52a763761917d61d4849c4d..47109303382975c80d8fb1af13dcd3a321f37282 100644
--- a/src/app/components/shared/comment-list/comment-list.component.html
+++ b/src/app/components/shared/comment-list/comment-list.component.html
@@ -14,3 +14,6 @@
<mat-card class="outer-card" *ngIf="!hideCommentsList">
<app-comment *ngFor="let current of comments" [comment]="current"> </app-comment>
</mat-card>
+<button mat-icon-button class="add-button" color="accent" (click)="openSubmitDialog()">
+ <mat-icon class="add-icon">add_circle</mat-icon>
+</button>
diff --git a/src/app/components/shared/comment-list/comment-list.component.scss b/src/app/components/shared/comment-list/comment-list.component.scss
index bedb367525baef0fa9d0c8a111a0f53cd359fb09..109ff4aaf2b5fec6f8c0a81546da5971cef86eb7 100644
--- a/src/app/components/shared/comment-list/comment-list.component.scss
+++ b/src/app/components/shared/comment-list/comment-list.component.scss
@@ -21,7 +21,7 @@ input {
}
button{
- min-height: 100% !important;
+ //min-height: 100% !important;
min-width: 100px;
}
@@ -34,3 +34,20 @@ mat-icon {
background-color: #80cbc4;
margin-bottom: 10px;
}
+
+
+.add-button {
+ width: 60px;
+ height: 60px;
+ position: fixed;
+ top: 80%;
+ right: 35%;
+}
+
+.add-icon {
+ font-size: 60px;
+ height: 60px;
+ width: 60px;
+ line-height: 100%!important;
+}
+
diff --git a/src/app/components/shared/comment-list/comment-list.component.ts b/src/app/components/shared/comment-list/comment-list.component.ts
index adad9c9015886d5073e2e46419774254f708250f..ab3d852c62be4810d6b19ad80bda96876b4d227c 100644
--- a/src/app/components/shared/comment-list/comment-list.component.ts
+++ b/src/app/components/shared/comment-list/comment-list.component.ts
@@ -1,10 +1,14 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
import { Comment } from '../../../models/comment';
import { CommentService } from '../../../services/http/comment.service';
import { TranslateService } from '@ngx-translate/core';
import { LanguageService } from '../../../services/util/language.service';
import { RxStompService } from '@stomp/ng2-stompjs';
import { Message } from '@stomp/stompjs';
+import { SubmitCommentComponent } from '../_dialogs/submit-comment/submit-comment.component';
+import { MatDialog } from '@angular/material';
+import { WsCommentServiceService } from '../../../services/websockets/ws-comment-service.service';
+import { User } from '../../../models/user';
@Component({
selector: 'app-comment-list',
@@ -12,16 +16,19 @@ import { Message } from '@stomp/stompjs';
styleUrls: ['./comment-list.component.scss']
})
export class CommentListComponent implements OnInit {
+ @Input() user: User;
+ @Input() roomId: string;
comments: Comment[];
isLoading = true;
- roomId: string;
hideCommentsList: boolean;
filteredComments: Comment[];
constructor(private commentService: CommentService,
private translateService: TranslateService,
+ public dialog: MatDialog,
protected langService: LanguageService,
- private rxStompService: RxStompService) {
+ private rxStompService: RxStompService,
+ private wsCommentService: WsCommentServiceService) {
langService.langEmitter.subscribe(lang => translateService.use(lang));
}
@@ -88,5 +95,25 @@ export class CommentListComponent implements OnInit {
}
}
}
+
+ openSubmitDialog(): void {
+ const dialogRef = this.dialog.open(SubmitCommentComponent, {
+ width: '400px'
+ });
+ dialogRef.componentInstance.user = this.user;
+ dialogRef.componentInstance.roomId = this.roomId;
+ dialogRef.afterClosed()
+ .subscribe(result => {
+ if (result) {
+ this.send(result);
+ } else {
+ return;
+ }
+ });
+ }
+
+ send(comment: Comment): void {
+ this.wsCommentService.add(comment);
+ }
}
diff --git a/src/app/components/shared/comment-page/comment-page.component.html b/src/app/components/shared/comment-page/comment-page.component.html
index a0d67ae5eaf0e03312cd2cc9770003e902c23c40..44f9d6b44659f93e633ed89748bd90770abf62ce 100644
--- a/src/app/components/shared/comment-page/comment-page.component.html
+++ b/src/app/components/shared/comment-page/comment-page.component.html
@@ -1,13 +1,6 @@
<div fxLayout="column" fxLayoutAlign="center" fxLayoutGap="20px">
<div fxLayout="row" fxLayoutAlign="center">
- <mat-toolbar>List of Questions
- <span class="fill-remaining-space"></span>
- <button mat-icon-button color="primary" (click)="openSubmitDialog()">
- <mat-icon>add_circle</mat-icon>
- </button></mat-toolbar>
- </div>
- <div fxLayout="row" fxLayoutAlign="center">
- <app-comment-list></app-comment-list>
+ <app-comment-list [user]="user" [roomId]="roomId"></app-comment-list>
</div>
</div>
diff --git a/src/app/components/shared/comment-page/comment-page.component.scss b/src/app/components/shared/comment-page/comment-page.component.scss
index 3eeff504832295d9e4654f7e2acf0a6193f9c196..501394eb496b8c96db882589073de268cfcb434a 100644
--- a/src/app/components/shared/comment-page/comment-page.component.scss
+++ b/src/app/components/shared/comment-page/comment-page.component.scss
@@ -2,23 +2,3 @@ app-comment-list {
width: 100%;
max-width: 800px;
}
-
-.mat-icon-button {
- width: 50px;
- height: 50px;
- margin-bottom: 20px;
- margin-top: 20px;
-}
-
-mat-icon {
- font-size: 50px;
- height: 50px;
- width: 50px;
- line-height: 100%!important;
-}
-
-mat-toolbar {
- border-radius: 10px;
- background-color: #bbdefb;
- max-width: 800px;
-}
diff --git a/src/app/components/shared/comment-page/comment-page.component.ts b/src/app/components/shared/comment-page/comment-page.component.ts
index 33fd31461df20c963d77b8cb3a6a994d90c8027b..725fc8800b5bee1039f167bd72cd7a67c7d2e52f 100644
--- a/src/app/components/shared/comment-page/comment-page.component.ts
+++ b/src/app/components/shared/comment-page/comment-page.component.ts
@@ -1,12 +1,8 @@
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
-import { Comment } from '../../../models/comment';
import { User } from '../../../models/user';
import { NotificationService } from '../../../services/util/notification.service';
import { AuthenticationService } from '../../../services/http/authentication.service';
-import { MatDialog } from '@angular/material';
-import { SubmitCommentComponent } from '../_dialogs/submit-comment/submit-comment.component';
-import { WsCommentServiceService } from '../../../services/websockets/ws-comment-service.service';
@Component({
selector: 'app-comment-page',
@@ -19,32 +15,10 @@ export class CommentPageComponent implements OnInit {
constructor(private route: ActivatedRoute,
private notification: NotificationService,
- public dialog: MatDialog,
- private authenticationService: AuthenticationService,
- private wsCommentService: WsCommentServiceService) { }
+ private authenticationService: AuthenticationService) { }
ngOnInit(): void {
this.roomId = localStorage.getItem('roomId');
this.user = this.authenticationService.getUser();
}
-
- openSubmitDialog(): void {
- const dialogRef = this.dialog.open(SubmitCommentComponent, {
- width: '400px'
- });
- dialogRef.componentInstance.user = this.user;
- dialogRef.componentInstance.roomId = this.roomId;
- dialogRef.afterClosed()
- .subscribe(result => {
- if (result) {
- this.send(result);
- } else {
- return;
- }
- });
- }
-
- send(comment: Comment): void {
- this.wsCommentService.add(comment);
- }
}