outsorce comment

src/app/components/shared/_dialogs/submit-comment/submit-comment.component.html

-
-<h4>{{comment.subject}}</h4>
-<p>{{comment.body}}</p>
-
-<button mat-raised-button color="warn" (click)="closeDialog('abort')">
-  {{ 'comment-page.back' | translate }}
-</button>
-
-<button mat-raised-button color="primary" (click)="closeDialog('send')">
-    {{ 'comment-page.send' | translate}}
-</button>
+<div fxLayout="column" fxLayoutAlign="center" fxLayoutGap="20px">
+  <div fxLayout="row" fxLayoutAlign="center">
+    <form>
+      <mat-form-field class="input-block">
+        <input matInput #commentSubject type="text" maxlength="25"
+               placeholder="{{ 'comment-page.enter-title' | translate}}" onkeypress="return event.keyCode !=13;"
+               [formControl]="subjectForm">
+        <mat-hint align="end">{{commentSubject.value.length}} / 25</mat-hint>
+      </mat-form-field>
+      <mat-form-field class="input-block">
+        <textarea matInput #commentBody placeholder="{{ 'comment-page.enter-comment' | translate}}"
+                  matAutosizeMinRows=2 matAutosizeMaxRows=5  maxlength="255" [formControl]="bodyForm"></textarea>
+        <mat-hint align="end">{{commentBody.value.length}} / 255</mat-hint>
+      </mat-form-field>
+      <button mat-raised-button color="accent"
+              (click)="closeDialog('send')">{{ 'comment-page.send' | translate}}</button>
+    </form>
+  </div>
+</div>

src/app/components/shared/_dialogs/submit-comment/submit-comment.component.scss

@@ -2,3 +2,14 @@ button {
   margin-right: 20px;
   min-width: 80px;
 }
+
+form {
+  display: block;
+  width: 100%;
+  max-width: 800px;
+  margin-bottom: 50px;
+}
+
+textarea {
+  line-height: 120%;
+}

src/app/components/shared/_dialogs/submit-comment/submit-comment.component.ts

@@ -6,6 +6,7 @@ import { MAT_DIALOG_DATA, MatDialog, MatDialogRef } from '@angular/material';
 import { TranslateService } from '@ngx-translate/core';
 import { CommentPageComponent } from '../../comment-page/comment-page.component';
 import { AuthenticationService } from '../../../../services/http/authentication.service';
+import { FormControl, Validators } from '@angular/forms';
 
 
 @Component({
@@ -16,6 +17,8 @@ import { AuthenticationService } from '../../../../services/http/authentication.
 export class SubmitCommentComponent implements OnInit {
 
   comment: Comment;
+  subjectForm = new FormControl('', [Validators.required]);
+  bodyForm = new FormControl('', [Validators.required]);
 
   constructor(private router: Router,
               private notification: NotificationService,
@@ -23,6 +26,7 @@ export class SubmitCommentComponent implements OnInit {
               private translateService: TranslateService,
               protected authenticationService: AuthenticationService,
               public dialog: MatDialog,
+              private translationService: TranslateService,
               @Inject(MAT_DIALOG_DATA) public data: any) {
   }
 
@@ -34,7 +38,33 @@ export class SubmitCommentComponent implements OnInit {
     this.dialogRef.close('abort');
   }
 
-  closeDialog(action: string) {
-    this.dialogRef.close(action);
+  checkInputData(subject: string, body: string): boolean {
+    subject = subject.trim();
+    body = body.trim();
+    if (!subject && !body) {
+      this.translationService.get('comment-page.error-both-fields').subscribe(message => {
+        this.notification.show(message);
+      });
+      return false;
+    }
+    if (!subject) {
+      this.translationService.get('comment-page.error-title').subscribe(message => {
+        this.notification.show(message);
+      });
+      return false;
+    }
+    if (!body) {
+      this.translationService.get('comment-page.error-comment').subscribe(message => {
+        this.notification.show(message);
+      });
+      return false;
+    }
+    return true;
+  }
+
+  closeDialog(subject: string, body: string) {
+    const comment = new Comment();
+    this.checkInputData(comment.b)
+    this.dialogRef.close(comment);
   }
 }

src/app/components/shared/comment-page/comment-page.component.html

 <div fxLayout="column" fxLayoutAlign="center" fxLayoutGap="20px">
   <div fxLayout="row" fxLayoutAlign="center">
-    <form>
-      <mat-form-field class="input-block">
-        <input matInput #commentSubject type="text" maxlength="25"
-          placeholder="{{ 'comment-page.enter-title' | translate}}" onkeypress="return event.keyCode !=13;"
-          [formControl]="subjectForm">
-        <mat-hint align="end">{{commentSubject.value.length}} / 25</mat-hint>
-      </mat-form-field>
-      <mat-form-field class="input-block">
-        <textarea matInput #commentBody placeholder="{{ 'comment-page.enter-comment' | translate}}"
-         matAutosizeMinRows=2 matAutosizeMaxRows=5  maxlength="255" [formControl]="bodyForm"></textarea>
-          <mat-hint align="end">{{commentBody.value.length}} / 255</mat-hint>
-      </mat-form-field>
-      <button mat-raised-button color="accent"
-        (click)="pressSend(commentSubject.value, commentBody.value)">{{ 'comment-page.send' | translate}}</button>
-    </form>
+    <button mat-raised-button color="accent"
+            (click)="pressSend(commentSubject.value, commentBody.value)">{{ 'comment-page.send' | translate}}</button>
   </div>
   <div fxLayout="row" fxLayoutAlign="center">
     <app-comment-list></app-comment-list>

src/app/components/shared/comment-page/comment-page.component.scss

-form {
-  display: block;
-  width: 100%;
-  max-width: 800px;
-  margin-bottom: 50px;
-}
-
 app-comment-list {
   width: 100%;
   max-width: 800px;
 }
-
-button {
-  margin-right: 20px;
-  min-width: 80px;
-}
-
-textarea {
-  line-height: 120%;
-}

src/app/components/shared/comment-page/comment-page.component.ts

@@ -22,8 +22,7 @@ export class CommentPageComponent implements OnInit {
   roomShortId: string;
   user: User;
   private date = new Date(Date.now());
-  subjectForm = new FormControl('', [Validators.required]);
-  bodyForm = new FormControl('', [Validators.required]);
+
 
 
   constructor(
@@ -31,8 +30,7 @@ export class CommentPageComponent implements OnInit {
     private route: ActivatedRoute,
     private commentService: CommentService,
     private notification: NotificationService,
-    public dialog: MatDialog,
-    private translationService: TranslateService) { }
+    public dialog: MatDialog) { }
 
   ngOnInit(): void {
     this.user = this.authenticationService.getUser();
@@ -40,55 +38,21 @@ export class CommentPageComponent implements OnInit {
     this.roomId = localStorage.getItem(`roomId`);
   }
 
-  pressSend(subject: string, body: string): void {
-    if (this.checkInputData(subject, body)) {
-      this.openSubmitDialog(subject, body);
-    }
-  }
-
-
-  openSubmitDialog(subject: string, body: string): void {
+  openSubmitDialog(): void {
 
         const dialogRef = this.dialog.open(SubmitCommentComponent, {
           width: '400px'
         });
-        dialogRef.componentInstance.comment = new Comment();
-        dialogRef.componentInstance.comment.subject = subject;
-        dialogRef.componentInstance.comment.body = body;
         dialogRef.afterClosed()
           .subscribe(result => {
-            if (result === 'send') {
-              this.send(subject, body);
+            if (result !== null) {
+              this.send(result);
             } else {
               return;
             }
           });
     }
 
-  checkInputData(subject: string, body: string): boolean {
-    subject = subject.trim();
-    body = body.trim();
-    if (!subject && !body) {
-      this.translationService.get('comment-page.error-both-fields').subscribe(message => {
-        this.notification.show(message);
-      });
-      return false;
-    }
-    if (!subject) {
-      this.translationService.get('comment-page.error-title').subscribe(message => {
-        this.notification.show(message);
-      });
-      return false;
-    }
-    if (!body) {
-      this.translationService.get('comment-page.error-comment').subscribe(message => {
-        this.notification.show(message);
-      });
-      return false;
-    }
-    return true;
-  }
-
   send(subject: string, body: string): void {
     this.commentService.addComment({
       id: '',