From 2ada47500bc8a4f98fc465c42258a57a50f4a36b Mon Sep 17 00:00:00 2001
From: Ruben Bimberg <ruben.bimberg@mni.thm.de>
Date: Wed, 3 Nov 2021 11:47:33 +0100
Subject: [PATCH] Partial commit
---
.../topic-cloud-filter.component.html | 66 ++++++++++++++-----
.../topic-cloud-filter.component.scss | 15 +++--
.../topic-cloud-filter.component.ts | 11 ++++
src/assets/i18n/home/de.json | 5 ++
4 files changed, 75 insertions(+), 22 deletions(-)
diff --git a/src/app/components/shared/_dialogs/topic-cloud-filter/topic-cloud-filter.component.html b/src/app/components/shared/_dialogs/topic-cloud-filter/topic-cloud-filter.component.html
index 1235cb454..d9bb41a3c 100644
--- a/src/app/components/shared/_dialogs/topic-cloud-filter/topic-cloud-filter.component.html
+++ b/src/app/components/shared/_dialogs/topic-cloud-filter/topic-cloud-filter.component.html
@@ -60,23 +60,55 @@
<span *ngIf="isMobile()">{{'content.tag-cloud-questions-brainstorming-short' | translate}}</span>
<span *ngIf="!isMobile()">{{'content.tag-cloud-questions-brainstorming' | translate}}</span>
</mat-radio-button>
- <mat-form-field *ngIf="userRole > 0 && radioButton.checked"
- appearance="fill">
- <mat-label>{{'content.brainstorming-question' | translate}}</mat-label>
- <input matInput
- autofocus
- autocomplete="off"
- type="text"
- (keyup)="checkForEnter($event)"
- [(ngModel)]="question">
- <button *ngIf="question"
- matSuffix
- mat-icon-button
- aria-label="Clear"
- (click)="question=''">
- <mat-icon>close</mat-icon>
- </button>
- </mat-form-field>
+ <mat-card class="brainstorm-container" *ngIf="userRole > 0 && radioButton.checked">
+ <mat-form-field appearance="fill">
+ <mat-label>{{'content.brainstorming-question' | translate}}</mat-label>
+ <input matInput
+ autofocus
+ autocomplete="off"
+ type="text"
+ appAccessibilityEscapedInput
+ (keyup)="checkForEnter($event)"
+ [(ngModel)]="question">
+ <button *ngIf="question"
+ matSuffix
+ mat-icon-button
+ aria-label="Clear"
+ (click)="question=''">
+ <mat-icon>close</mat-icon>
+ </button>
+ </mat-form-field>
+ <mat-form-field appearance="fill">
+ <mat-label>{{'content.brainstorming-word-count' | translate}}</mat-label>
+ <input matInput
+ autocomplete="off"
+ type="number"
+ appAccessibilityEscapedInput
+ [formControl]="maxWordCount">
+ <mat-hint>
+ {{'content.field-hint-number' | translate: { min: maxWordCountMin, max: maxWordCountMax } }}
+ </mat-hint>
+ <mat-error *ngIf="maxWordCount.hasError('required')">
+ {{'content.field-required' | translate}}
+ </mat-error>
+ <mat-error *ngIf="maxWordCount.hasError('min')">
+ {{'content.field-too-low' | translate: { min: maxWordCountMin } }}
+ </mat-error>
+ <mat-error *ngIf="maxWordCount.hasError('max')">
+ {{'content.field-too-high' | translate: { max: maxWordCountMax } }}
+ </mat-error>
+ </mat-form-field>
+ <mat-form-field appearance="fill">
+ <mat-label>Maximale Wortlänge</mat-label>
+ <input matInput6
+ autocomplete="off"
+ type="number"
+ appAccessibilityEscapedInput
+ min="3"
+ max="30"
+ value="15">
+ </mat-form-field>
+ </mat-card>
</mat-radio-group>
<mat-card *ngIf="hasNoKeywords"
diff --git a/src/app/components/shared/_dialogs/topic-cloud-filter/topic-cloud-filter.component.scss b/src/app/components/shared/_dialogs/topic-cloud-filter/topic-cloud-filter.component.scss
index 37a168110..fec523b46 100644
--- a/src/app/components/shared/_dialogs/topic-cloud-filter/topic-cloud-filter.component.scss
+++ b/src/app/components/shared/_dialogs/topic-cloud-filter/topic-cloud-filter.component.scss
@@ -1,5 +1,5 @@
mat-radio-button {
- margin: 5px;
+ margin: 5px;
}
mat-radio-group {
@@ -11,10 +11,6 @@ mat-radio-group {
width: 100%;
}
-::ng-deep mat-form-field > .mat-form-field-wrapper {
- margin-bottom: -1.34375em;
-}
-
.elementRow {
display: flex;
flex-direction: row;
@@ -50,6 +46,15 @@ mat-radio-group {
color: var(--on-secondary);
}
+.brainstorm-container {
+ background-color: var(--surface);
+ margin-top: 10px;
+
+ > mat-form-field {
+ width: 100%;
+ }
+}
+
.help-button {
background-color: var(--secondary);
color: var(--on-secondary);
diff --git a/src/app/components/shared/_dialogs/topic-cloud-filter/topic-cloud-filter.component.ts b/src/app/components/shared/_dialogs/topic-cloud-filter/topic-cloud-filter.component.ts
index d68f54e01..183a77a4b 100644
--- a/src/app/components/shared/_dialogs/topic-cloud-filter/topic-cloud-filter.component.ts
+++ b/src/app/components/shared/_dialogs/topic-cloud-filter/topic-cloud-filter.component.ts
@@ -22,6 +22,7 @@ import { UserRole } from '../../../../models/user-roles.enum';
import { RoomDataService } from '../../../../services/util/room-data.service';
import { Subscription } from 'rxjs';
import { CommentListFilter, Period } from '../../comment-list/comment-list.filter';
+import { FormControl, Validators } from '@angular/forms';
class CommentsCount {
comments: number;
@@ -44,6 +45,16 @@ export class TopicCloudFilterComponent implements OnInit, OnDestroy {
@Input() target: string;
@Input() userRole: UserRole;
+ maxWordCountMin = 1;
+ maxWordCountMax = 5;
+ maxWordCount = new FormControl(1, [
+ Validators.required, Validators.min(this.maxWordCountMin), Validators.max(this.maxWordCountMax),
+ ]);
+ maxWordLengthMin = 3;
+ maxWordLengthMax = 30;
+ maxWordLength = new FormControl(12, [
+ Validators.required, Validators.min(this.maxWordLengthMin), Validators.max(this.maxWordLengthMax)
+ ]);
question = '';
continueFilter = 'continueWithAll';
comments: Comment[];
diff --git a/src/assets/i18n/home/de.json b/src/assets/i18n/home/de.json
index d083dd4fa..f75e3b04e 100644
--- a/src/assets/i18n/home/de.json
+++ b/src/assets/i18n/home/de.json
@@ -50,6 +50,11 @@
"continue": "Weiter",
"reset": "Zurücksetzen",
"brainstorming-question": "Ãœberschrift des Brainstorming-Boards",
+ "brainstorming-word-count": "Maximale Anzahl Wörter",
+ "field-required": "Dieses Feld wird benötigt",
+ "field-hint-number": "Eingabe zwischen {{min}} und {{max}}",
+ "field-too-low": "Deine Eingabe ist zu niedrig. Sie muss mindestens {{min}} sein.",
+ "field-too-high": "Deine Eingabe ist zu hoch. Sie darf maximal {{max}} sein.",
"tag-cloud-info": "Je größer die Schrift, desto häufiger wurde das Wort in den Fragen verwendet oder als Stichwort vergeben. Auch die Bewertungen der Fragen beeinflussen die Schriftgröße.",
"tag-cloud-questions-title": "Welche Fragen soll die Themenwolke umfassen?",
"tag-cloud-questions-all": "Alle Fragen",
--
GitLab