Improve comment creation dialog

src/app/components/participant/comment-create-page/comment-create-page.component.html

@@ -2,18 +2,20 @@
   <div fxLayout="row" fxLayoutAlign="center">
     <form>
       <mat-form-field class="input-block">
-        <input matInput #commentSubject type="text" maxlength="24" placeholder="{{ 'comment-page.enter-title' | translate}}">
+        <input matInput #commentSubject type="text" maxlength="25"
+          placeholder="{{ 'comment-page.enter-title' | translate}}" onkeypress="return event.keyCode !=13;"
+          [formControl]="emptySubject">
+        <mat-hint align="end" *ngIf="!emptyInputs">{{commentSubject.value.length}} / 25</mat-hint>
       </mat-form-field>
       <mat-form-field class="input-block">
-        <input matInput #commentBody>
-        <textarea matInput></textarea>
+        <textarea matInput #commentBody placeholder="{{ 'comment-page.enter-comment' | translate}}" matTextareaAutosize
+          matAutosizeMinRows=1 matAutosizeMaxRows=5 [formControl]="emptyBody"></textarea>
       </mat-form-field>
-      <button mat-raised-button color="primary" (click)="goBack()">{{ 'comment-page.back' | translate}}</button>
-      <button mat-raised-button color="accent" (click)="send(commentSubject.value, commentBody.value)">{{ 'comment-page.send' | translate}}</button>
+      <button mat-raised-button color="accent"
+        (click)="send(commentSubject.value, commentBody.value)">{{ 'comment-page.send' | translate}}</button>
     </form>
   </div>
   <div fxLayout="row" fxLayoutAlign="center">
     <app-comment-list></app-comment-list>
   </div>
-</div>
-
+</div>
\ No newline at end of file

src/app/components/participant/comment-create-page/comment-create-page.component.ts

 import { Component, OnInit, ViewChild } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { Location } from '@angular/common';
+import { FormControl, Validators } from '@angular/forms';
+import { TranslateService } from '@ngx-translate/core';
 import { Comment } from '../../../models/comment';
 import { RoomService } from '../../../services/http/room.service';
 import { CommentService } from '../../../services/http/comment.service';
@@ -20,6 +22,8 @@ export class CommentCreatePageComponent implements OnInit {
   roomShortId: string;
   user: User;
   private date = new Date(Date.now());
+  private emptySubject = new FormControl('', [Validators.required]);
+  private emptyBody = new FormControl('', [Validators.required]);
 
   constructor(
     protected authenticationService: AuthenticationService,
@@ -27,7 +31,8 @@ export class CommentCreatePageComponent implements OnInit {
     private roomService: RoomService,
     private commentService: CommentService,
     private location: Location,
-    private notification: NotificationService) { }
+    private notification: NotificationService,
+    private translationService: TranslateService) { }
 
   ngOnInit(): void {
     this.user = this.authenticationService.getUser();
@@ -40,7 +45,22 @@ export class CommentCreatePageComponent implements OnInit {
   send(subject: string, body: string): void {
     subject = subject.trim();
     body = body.trim();
-    if (!subject || !body) {
+    if (!subject && !body) {
+      this.translationService.get('comment-page.error-both-fields').subscribe(message => {
+        this.notification.show(message);
+      });
+      return;
+    }
+    if (!subject) {
+      this.translationService.get('comment-page.error-title').subscribe(message => {
+        this.notification.show(message);
+      });
+      return;
+    }
+    if (!body) {
+      this.translationService.get('comment-page.error-comment').subscribe(message => {
+        this.notification.show(message);
+      });
       return;
     }
     this.commentService.addComment({

src/assets/i18n/participant/de.json

@@ -15,9 +15,12 @@
     "description": "Beschreibung"
   },
   "comment-page": {
-    "enter-title": "Geben Sie einen Titel ein",
-    "back": "Zurück",
-    "send": "Senden"
+    "enter-title": "Titel",
+    "enter-comment": "Kommentar",
+    "send": "Senden",
+    "error-comment": "Bitte geben Sie ein Kommentar ein!",
+    "error-title": "Bitte geben Sie einen Titel ein!",
+    "error-both-fields": "Bitte füllen Sie alle Felder aus!"
   },
   "answer": {
     "submit": "Absenden",
@@ -40,4 +43,4 @@
     "improvable": "Luft nach oben",
     "no-answers": "Keine Antworten"
   }
-}
+}
\ No newline at end of file

src/assets/i18n/participant/en.json

@@ -15,9 +15,12 @@
     "description": "Description"
   },
   "comment-page": {
-    "enter-title": "Enter a title",
-    "back": "Back",
-    "send": "Send"
+    "enter-title": "Title",
+    "enter-comment": "Comment",
+    "send": "Send",
+    "error-title": "Please enter a title!",
+    "error-comment": "Please enter a comment!",
+    "error-both-fields": "Please fill in all fields!"
   },
   "answer": {
     "submit": "Submit",