Improve content creation html % logic

src/app/content-creation/content-creation.component.html

-<div>
-  <mat-card class="content-card">
-    <mat-card-title>
-      <mat-form-field>
-        <input matInput placeholder="Topic">
-      </mat-form-field>
-    </mat-card-title>
-
+<form (ngSubmit)="addContent(subjectTitle.value, bodyText.value)">
+  <div fxLayout="column" fxLayoutAlign="center" fxLayoutGap="10px">
     <mat-form-field>
-      <textarea matInput placeholder="Place your text here" matTextareaAutosize matAutosizeMinRows="3" matAutosizeMaxRows="8"></textarea>
+      <input class="input-block" #subjectTitle matInput (keypress)="resetEmptyInputs()" placeholder="Subject" [(ngModel)]="subject">
     </mat-form-field>
-  </mat-card>
-</div>
-
-<mat-card class="content-card">
-  <mat-selection-list>
-    <mat-list-option>Answer 32</mat-list-option>
-    <mat-list-option>Answer 33</mat-list-option>
-    <mat-list-option>Answer 34</mat-list-option>
-
-    <mat-list>
-      <mat-form-field>
-        <input matInput placeholder="Add Answer">
-      </mat-form-field>
-      <button mat-mini-fab>+</button>
-    </mat-list>
-  </mat-selection-list>
-</mat-card>
-
-<button mat-raised-button="Preview">Preview</button>
- <!-- TODO: Save answers to array in a class. Show answers in a matlist -->
-
-<div>
-  <mat-slide-toggle>Allow absention</mat-slide-toggle>
-  <mat-slide-toggle>Show hints</mat-slide-toggle>
-</div>
- <!-- Let this view open in a mat dialog -->
+    <mat-form-field>
+      <input class="input-block" #bodyText matInput matTextareaAutosize matAutosizeMinRows="3" matAutosizeMaxRows="8" (keypress)="resetEmptyInputs()"
+        placeholder="Body" [(ngModel)]="body">
+      <button mat-button matSuffix mat-icon-button aria-label="Clear" (click)="subject=''; body=''">
+        <mat-icon>close</mat-icon>
+      </button>
+    </mat-form-field>
+    <div fxLayout="row" fxLayoutGap="10px">
+      <mat-slide-toggle>Allow absention</mat-slide-toggle>
+      <mat-slide-toggle>Show hints</mat-slide-toggle>
+    </div>
+    <button mat-raised-button color="primary" type="submit">Create content
+    </button>
+  </div>
+</form>
\ No newline at end of file

src/app/content-creation/content-creation.component.scss

-.content-card {
-    max-width: 400px;
-    margin: 10px;
-}

src/app/content-creation/content-creation.component.ts

-import { Component, OnInit } from '@angular/core';
+import { Component, Inject, OnInit } from '@angular/core';
+import { ContentService } from '../content.service';
+import { Router } from '@angular/router';
+import { NotificationService } from '../notification.service';
+import { Content } from '../content';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
+import { RoomComponent } from '../room/room.component';
 
 @Component({
   selector: 'app-content-creation',
@@ -6,10 +12,41 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./content-creation.component.scss']
 })
 export class ContentCreationComponent implements OnInit {
+  subject: string;
+  body: string;
+  emptyInputs = false;
+  
+  constructor(
+    private contentService: ContentService,
+    private router: Router,
+    private notification: NotificationService,
+    public dialogRef: MatDialogRef<RoomComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: any
+  ) { }
 
-  constructor() { }
+  onNoClick(): void {
+    this.dialogRef.close();
+  }
 
   ngOnInit() {
   }
 
+  resetEmptyInputs(): void {
+    this.emptyInputs = false;
+  }
+
+  addContent(subject: string, body: string) {
+    subject = subject.trim();
+    body = body.trim();
+    if (!subject || !body) {
+      this.emptyInputs = true;
+      return;
+    }
+    this.contentService.addContent({ subject: subject, body: body } as Content)
+      .subscribe(content => {
+        this.notification.show(`Content '${content.subject}' successfully created.`);
+        this.router.navigate([`/creator/room/${content.roomId}/${content.id}`]);
+        this.dialogRef.close();
+      });
+  }
 }

src/app/creator-room/creator-room.component.html

@@ -23,7 +23,7 @@
 
       <mat-divider></mat-divider>
       <mat-card-actions>
-        <button mat-button color="primary" matTooltip="Create new content" routerLink="/creator/room/{{room.id}}/content-creation">
+        <button mat-button color="primary" matTooltip="Create new content" (click)="createContentDialog()"> <!-- routerLink="/creator/room/{{room.id}}/content-creation"> -->
           Create content
         </button>
         <button mat-button color="primary" matTooltip="See room comments"

src/app/creator-room/creator-room.component.ts

@@ -6,6 +6,7 @@ import { Room } from '../room';
 import { Location } from '@angular/common';
 import { NotificationService } from '../notification.service';
 import { MatDialog } from '@angular/material';
+import { ContentCreationComponent } from '../content-creation/content-creation.component';
 import { RoomDeletionComponent } from '../room-deletion/room-deletion.component';
 import { RoomModificationComponent } from '../room-modification/room-modification.component';
 
@@ -59,6 +60,12 @@ export class CreatorRoomComponent extends RoomComponent implements OnInit {
     this.delete(room);
   }
 
+  createContentDialog(): void {
+    this.dialog.open(ContentCreationComponent, {
+      width: '350px'
+    });
+  }
+
   confirmDeletion(dialogAnswer: string): void {
     if (dialogAnswer === 'delete') {
       this.deleteRoom(this.room);