From 9b1845c5353997b160913f003985ca7d36803935 Mon Sep 17 00:00:00 2001
From: Heinrich Marks <heinrich.marks@mni.thm.de>
Date: Mon, 12 Mar 2018 20:16:24 +0100
Subject: [PATCH] Improve content creation html % logic
---
.../content-creation.component.html | 53 +++++++------------
.../content-creation.component.scss | 4 --
.../content-creation.component.ts | 41 +++++++++++++-
.../creator-room/creator-room.component.html | 2 +-
.../creator-room/creator-room.component.ts | 7 +++
5 files changed, 65 insertions(+), 42 deletions(-)
diff --git a/src/app/content-creation/content-creation.component.html b/src/app/content-creation/content-creation.component.html
index 44da99144..0b118d23f 100644
--- a/src/app/content-creation/content-creation.component.html
+++ b/src/app/content-creation/content-creation.component.html
@@ -1,37 +1,20 @@
-<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
diff --git a/src/app/content-creation/content-creation.component.scss b/src/app/content-creation/content-creation.component.scss
index ed6000348..e69de29bb 100644
--- a/src/app/content-creation/content-creation.component.scss
+++ b/src/app/content-creation/content-creation.component.scss
@@ -1,4 +0,0 @@
-.content-card {
- max-width: 400px;
- margin: 10px;
-}
diff --git a/src/app/content-creation/content-creation.component.ts b/src/app/content-creation/content-creation.component.ts
index e80156f5e..98aa071df 100644
--- a/src/app/content-creation/content-creation.component.ts
+++ b/src/app/content-creation/content-creation.component.ts
@@ -1,4 +1,10 @@
-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();
+ });
+ }
}
diff --git a/src/app/creator-room/creator-room.component.html b/src/app/creator-room/creator-room.component.html
index c58c5db41..7855ee177 100644
--- a/src/app/creator-room/creator-room.component.html
+++ b/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"
diff --git a/src/app/creator-room/creator-room.component.ts b/src/app/creator-room/creator-room.component.ts
index 6e566f04f..06990d855 100644
--- a/src/app/creator-room/creator-room.component.ts
+++ b/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);
--
GitLab