From e9ae881851c9ecde8c2a8e06865060e39dea98fd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lukas=20Mau=C3=9F?= <lukas.mauss@mni.thm.de>
Date: Mon, 22 Oct 2018 12:38:19 +0200
Subject: [PATCH] Fix content-creation and add collection-selection for all
content-types
---
.../content-choice-creator.component.html | 2 +-
.../content-choice-creator.component.ts | 2 +-
.../content-likert-creator.component.html | 11 ++-
.../content-likert-creator.component.ts | 43 +++++++++---
.../content-text-creator.component.ts | 1 -
.../content-yes-no-creator.component.html | 36 +++++-----
.../content-yes-no-creator.component.ts | 70 +++++++++++--------
7 files changed, 106 insertions(+), 59 deletions(-)
diff --git a/src/app/components/fragments/content-choice-creator/content-choice-creator.component.html b/src/app/components/fragments/content-choice-creator/content-choice-creator.component.html
index a42e1e7a7..05225b443 100644
--- a/src/app/components/fragments/content-choice-creator/content-choice-creator.component.html
+++ b/src/app/components/fragments/content-choice-creator/content-choice-creator.component.html
@@ -1,4 +1,4 @@
-<form (ngSubmit)="submitContent(subject.value, body.value)" fxLayout="column" fxLayoutGap="20px">
+<form (ngSubmit)="submitContent(subject.value, body.value, group.value)" fxLayout="column" fxLayoutGap="20px">
<mat-form-field class="input-block">
<input matInput #subject [(ngModel)]="content.subject" placeholder="{{ 'content.subject' | translate }}" name="subject">
</mat-form-field>
diff --git a/src/app/components/fragments/content-choice-creator/content-choice-creator.component.ts b/src/app/components/fragments/content-choice-creator/content-choice-creator.component.ts
index 22767ac8f..23b295742 100644
--- a/src/app/components/fragments/content-choice-creator/content-choice-creator.component.ts
+++ b/src/app/components/fragments/content-choice-creator/content-choice-creator.component.ts
@@ -275,7 +275,7 @@ export class ContentChoiceCreatorComponent implements OnInit {
this.changesAllowed = true;
return;
}
- this.contentService.addContentChoice(new ContentChoice(
+ this.contentService.addContent(new ContentChoice(
'',
'',
this.roomId,
diff --git a/src/app/components/fragments/content-likert-creator/content-likert-creator.component.html b/src/app/components/fragments/content-likert-creator/content-likert-creator.component.html
index 6b87d4da4..e9389be41 100644
--- a/src/app/components/fragments/content-likert-creator/content-likert-creator.component.html
+++ b/src/app/components/fragments/content-likert-creator/content-likert-creator.component.html
@@ -1,4 +1,4 @@
-<form (ngSubmit)="submitContent()">
+<form (ngSubmit)="submitContent(submitContent(subject.value, body.value, group.value))">
<mat-form-field class="input-block">
<input matInput #subject [(ngModel)]="content.subject" placeholder="{{ 'content.subject' | translate }}" name="subject">
</mat-form-field>
@@ -20,6 +20,15 @@
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>
+ <mat-form-field>
+ <input matInput #group matInput [formControl]="myControl" [matAutocomplete]="auto"
+ value={{lastCollection}} placeholder="{{'content.collection' | translate}}"/>
+ <mat-autocomplete #auto="matAutocomplete">
+ <mat-option *ngFor="let collection of filteredOptions | async" [value]="collection">
+ {{collection}}
+ </mat-option>
+ </mat-autocomplete>
+ </mat-form-field>
<div *ngIf="!editDialogMode">
<button mat-raised-button type="submit" color="accent">{{ 'content.create' | translate }}</button>
</div>
diff --git a/src/app/components/fragments/content-likert-creator/content-likert-creator.component.ts b/src/app/components/fragments/content-likert-creator/content-likert-creator.component.ts
index 394b3f994..7415f2c89 100644
--- a/src/app/components/fragments/content-likert-creator/content-likert-creator.component.ts
+++ b/src/app/components/fragments/content-likert-creator/content-likert-creator.component.ts
@@ -9,6 +9,9 @@ import { ActivatedRoute } from '@angular/router';
import { MAT_DIALOG_DATA, MatDialog, MatDialogRef } from '@angular/material';
import { ContentListComponent } from '../content-list/content-list.component';
import { ContentDeleteComponent } from '../../dialogs/content-delete/content-delete.component';
+import { FormControl } from '@angular/forms';
+import { Observable } from 'rxjs';
+import { map, startWith } from 'rxjs/operators';
@Component({
selector: 'app-content-likert-creator',
@@ -39,9 +42,14 @@ export class ContentLikertCreatorComponent implements OnInit {
);
displayedColumns = ['label'];
+ roomId: string;
displayAnswers: DisplayAnswer[] = [];
newAnswerOptionPoints = '0';
+ collections: string[] = ['ARSnova', 'Angular', 'HTML', 'TypeScript' ];
+ myControl = new FormControl();
+ filteredOptions: Observable<string[]>;
+ lastCollection: string;
editDialogMode = false;
@@ -62,13 +70,22 @@ export class ContentLikertCreatorComponent implements OnInit {
}
ngOnInit() {
- this.route.params.subscribe(params => {
- this.content.roomId = params['roomId'];
- });
+ this.roomId = localStorage.getItem(`roomId`);
for (let i = 0; i < this.likertScale.length; i++) {
this.content.options.push(new AnswerOption(this.likertScale[i], this.newAnswerOptionPoints));
}
this.fillCorrectAnswers();
+ this.lastCollection = sessionStorage.getItem('collection');
+ this.filteredOptions = this.myControl.valueChanges
+ .pipe(
+ startWith(''),
+ map(value => this._filter(value))
+ );
+ }
+
+ private _filter(value: string): string[] {
+ const filterValue = value.toLowerCase();
+ return this.collections.filter(collection => collection.toLowerCase().includes(filterValue));
}
resetAfterSubmit() {
@@ -79,16 +96,26 @@ export class ContentLikertCreatorComponent implements OnInit {
this.notificationService.show('Content submitted. Ready for creation of new content.');
}
- submitContent(): void {
- if (this.content.body.valueOf() === '' || this.content.body.valueOf() === '') {
+ submitContent(subject: string, body: string, group: string): void {
+ if (subject.valueOf() === '' || body.valueOf() === '') {
this.notificationService.show('No empty fields allowed. Please check subject and body.');
return;
}
this.notificationService.show('Content sumbitted.');
// ToDo: Check api call
- // this.contentService.addContent(this.content);
- // For Testing:
- // console.log(this.content);
+ this.contentService.addContent(new ContentChoice(
+ '',
+ '',
+ this.roomId,
+ subject,
+ body,
+ 1,
+ [group],
+ this.content.options,
+ this.content.correctOptionIndexes,
+ this.content.multiple,
+ ContentType.SCALE
+ )).subscribe();
this.resetAfterSubmit();
}
diff --git a/src/app/components/fragments/content-text-creator/content-text-creator.component.ts b/src/app/components/fragments/content-text-creator/content-text-creator.component.ts
index b50006cfc..8a68792a3 100644
--- a/src/app/components/fragments/content-text-creator/content-text-creator.component.ts
+++ b/src/app/components/fragments/content-text-creator/content-text-creator.component.ts
@@ -60,7 +60,6 @@ export class ContentTextCreatorComponent implements OnInit {
private _filter(value: string): string[] {
const filterValue = value.toLowerCase();
-
return this.collections.filter(collection => collection.toLowerCase().includes(filterValue));
}
diff --git a/src/app/components/fragments/content-yes-no-creator/content-yes-no-creator.component.html b/src/app/components/fragments/content-yes-no-creator/content-yes-no-creator.component.html
index ce09023a3..8326760f1 100644
--- a/src/app/components/fragments/content-yes-no-creator/content-yes-no-creator.component.html
+++ b/src/app/components/fragments/content-yes-no-creator/content-yes-no-creator.component.html
@@ -1,28 +1,28 @@
-<form (ngSubmit)="submitContent()">
+<form (ngSubmit)="submitContent(submitContent(subject.value, body.value, group.value))">
<mat-form-field class="input-block">
<input matInput #subject [(ngModel)]="content.subject" placeholder="{{ 'content.subject' | translate }}" name="subject">
</mat-form-field>
<mat-form-field class="input-block">
<textarea matInput #body [(ngModel)]="content.body" placeholder="{{ 'content.body' | translate }}" name="body"></textarea>
</mat-form-field>
- <mat-divider></mat-divider>
- <mat-table #table [dataSource]="displayAnswers">
-
- <ng-container matColumnDef="label">
- <mat-header-cell *matHeaderCellDef>{{ 'content.answer' | translate }}</mat-header-cell>
- <mat-cell *matCellDef="let answer">
- <!-- ToDo: Check ngModel -->
- <mat-checkbox (click)="setCorrect($event ,answer.answerOption.label)" color="primary" [(ngModel)]="answer.correct" [checked]="answer.correct"
- name="{{ answer.answerOption.label }}">{{ answer.answerOption.label }}
- </mat-checkbox>
- </mat-cell>
- </ng-container>
-
- <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
- <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
- </mat-table>
- <mat-divider></mat-divider>
+ <mat-radio-group [(ngModel)]="yesno" [ngModelOptions]="{standalone: true}" fxLayout="row" fxLayoutAlign="center" fxLayoutGap="20px">
+ <mat-radio-button [value]=true [checked]=true>
+ Ja
+ </mat-radio-button>
+ <mat-radio-button [value]=false [checked]=false>
+ Nein
+ </mat-radio-button>
+ </mat-radio-group>
+ <mat-form-field>
+ <input matInput #group matInput [formControl]="myControl" [matAutocomplete]="auto"
+ value={{lastCollection}} placeholder="{{'content.collection' | translate}}"/>
+ <mat-autocomplete #auto="matAutocomplete">
+ <mat-option *ngFor="let collection of filteredOptions | async" [value]="collection">
+ {{collection}}
+ </mat-option>
+ </mat-autocomplete>
+ </mat-form-field>
<div *ngIf="!editDialogMode">
<button mat-raised-button type="submit" color="accent">{{ 'content.create' | translate }}</button>
</div>
diff --git a/src/app/components/fragments/content-yes-no-creator/content-yes-no-creator.component.ts b/src/app/components/fragments/content-yes-no-creator/content-yes-no-creator.component.ts
index 00c4e9dba..8ea51ee12 100644
--- a/src/app/components/fragments/content-yes-no-creator/content-yes-no-creator.component.ts
+++ b/src/app/components/fragments/content-yes-no-creator/content-yes-no-creator.component.ts
@@ -9,6 +9,9 @@ import { ActivatedRoute } from '@angular/router';
import { MAT_DIALOG_DATA, MatDialog, MatDialogRef } from '@angular/material';
import { ContentListComponent } from '../content-list/content-list.component';
import { ContentDeleteComponent } from '../../dialogs/content-delete/content-delete.component';
+import { FormControl } from '@angular/forms';
+import { Observable } from 'rxjs';
+import { map, startWith } from 'rxjs/operators';
@Component({
selector: 'app-content-yes-no-creator',
@@ -16,6 +19,7 @@ import { ContentDeleteComponent } from '../../dialogs/content-delete/content-del
styleUrls: ['./content-yes-no-creator.component.scss']
})
export class ContentYesNoCreatorComponent implements OnInit {
+ yesno = true;
answerLabels = [
'Ja',
'Nein'
@@ -34,10 +38,14 @@ export class ContentYesNoCreatorComponent implements OnInit {
ContentType.BINARY
);
- displayedColumns = ['label'];
+ roomId: string;
displayAnswers: DisplayAnswer[] = [];
newAnswerOptionPoints = '';
+ collections: string[] = ['ARSnova', 'Angular', 'HTML', 'TypeScript' ];
+ myControl = new FormControl();
+ filteredOptions: Observable<string[]>;
+ lastCollection: string;
editDialogMode = false;
@@ -50,13 +58,22 @@ export class ContentYesNoCreatorComponent implements OnInit {
}
ngOnInit() {
- this.route.params.subscribe(params => {
- this.content.roomId = params['roomId'];
- });
+ this.roomId = localStorage.getItem(`roomId`);
for (let i = 0; i < this.answerLabels.length; i++) {
this.content.options.push(new AnswerOption(this.answerLabels[i], this.newAnswerOptionPoints));
}
this.fillCorrectAnswers();
+ this.lastCollection = sessionStorage.getItem('collection');
+ this.filteredOptions = this.myControl.valueChanges
+ .pipe(
+ startWith(''),
+ map(value => this._filter(value))
+ );
+ }
+
+ private _filter(value: string): string[] {
+ const filterValue = value.toLowerCase();
+ return this.collections.filter(collection => collection.toLowerCase().includes(filterValue));
}
fillCorrectAnswers() {
@@ -66,21 +83,6 @@ export class ContentYesNoCreatorComponent implements OnInit {
}
}
- setCorrect($event, label: string) {
- $event.preventDefault();
- if (label === 'yes') {
- this.content.correctOptionIndexes = [0];
- }
- if (label === 'no') {
- this.content.correctOptionIndexes = [1];
- }
- this.fillCorrectAnswers();
- }
-
- checkAllowedContent(): boolean {
- return (this.content.correctOptionIndexes.length === 1);
- }
-
resetAfterSubmit() {
this.content.subject = '';
this.content.body = '';
@@ -89,20 +91,30 @@ export class ContentYesNoCreatorComponent implements OnInit {
this.notificationService.show('Content submitted. Ready for creation of new content.');
}
- submitContent(): void {
- if (this.content.body.valueOf() === '' || this.content.body.valueOf() === '') {
+ submitContent(subject: string, body: string, group: string): void {
+ if (subject.valueOf() === '' || body.valueOf() === '') {
this.notificationService.show('No empty fields allowed. Please check subject and body.');
return;
}
- if (!this.checkAllowedContent()) {
- this.notificationService.show('Select 1 true answer.');
- return;
- }
this.notificationService.show('Content sumbitted.');
- // ToDo: Check api call
- // this.contentService.addContent(this.content);
- // For Testing:
- // console.log(this.content);
+ if (this.yesno) {
+ this.content.correctOptionIndexes = [0];
+ } else {
+ this.content.correctOptionIndexes = [1];
+ }
+ this.contentService.addContent(new ContentChoice(
+ '',
+ '',
+ this.roomId,
+ subject,
+ body,
+ 1,
+ [group],
+ this.content.options,
+ this.content.correctOptionIndexes,
+ this.content.multiple,
+ ContentType.BINARY
+ )).subscribe();
this.resetAfterSubmit();
}
--
GitLab