From 850f0d11c594077fe475185e9d76b4b6d89f922a Mon Sep 17 00:00:00 2001
From: rhenck <richard.henck@iqb.hu-berlin.de>
Date: Tue, 20 Jul 2021 16:31:12 +0200
Subject: [PATCH] Make textfield and textarea different Elements
---
projects/common/app.module.ts | 12 ++++---
projects/common/component-utils.ts | 3 ++
.../element-components/text-area.component.ts | 27 ++++++++++++++++
.../text-field.component.ts | 31 ++++++++-----------
projects/common/unit.ts | 10 ++++--
.../ui-element-toolbox.component.html | 6 +++-
projects/editor/src/app/id.service.ts | 1 +
projects/editor/src/app/model/UnitFactory.ts | 14 +++++++--
projects/editor/src/app/unit.service.ts | 3 ++
9 files changed, 79 insertions(+), 28 deletions(-)
create mode 100644 projects/common/element-components/text-area.component.ts
diff --git a/projects/common/app.module.ts b/projects/common/app.module.ts
index f7121802c..7cb261088 100644
--- a/projects/common/app.module.ts
+++ b/projects/common/app.module.ts
@@ -19,16 +19,17 @@ import { MatFormFieldModule } from '@angular/material/form-field';
import { MatSnackBarModule } from '@angular/material/snack-bar';
import { MatTooltipModule } from '@angular/material/tooltip';
+import { TextComponent } from './element-components/text.component';
import { ButtonComponent } from './element-components/button.component';
-import { CorrectionComponent } from './element-components/compound-components/correction.component';
-import { RadioButtonGroupComponent } from './element-components/radio-button-group.component';
-import { CheckboxComponent } from './element-components/checkbox.component';
import { TextFieldComponent } from './element-components/text-field.component';
+import { TextAreaComponent } from './element-components/text-area.component';
+import { CheckboxComponent } from './element-components/checkbox.component';
+import { DropdownComponent } from './element-components/dropdown.component';
+import { RadioButtonGroupComponent } from './element-components/radio-button-group.component';
import { ImageComponent } from './element-components/image.component';
import { VideoComponent } from './element-components/video.component';
import { AudioComponent } from './element-components/audio.component';
-import { TextComponent } from './element-components/text.component';
-import { DropdownComponent } from './element-components/dropdown.component';
+import { CorrectionComponent } from './element-components/compound-components/correction.component';
@NgModule({
imports: [
@@ -47,6 +48,7 @@ import { DropdownComponent } from './element-components/dropdown.component';
ButtonComponent,
TextComponent,
TextFieldComponent,
+ TextAreaComponent,
ImageComponent,
AudioComponent,
VideoComponent,
diff --git a/projects/common/component-utils.ts b/projects/common/component-utils.ts
index 535f412b0..c257cdc6c 100644
--- a/projects/common/component-utils.ts
+++ b/projects/common/component-utils.ts
@@ -2,6 +2,7 @@ import { ComponentFactory, ComponentFactoryResolver } from '@angular/core';
import { TextComponent } from './element-components/text.component';
import { ButtonComponent } from './element-components/button.component';
import { TextFieldComponent } from './element-components/text-field.component';
+import { TextAreaComponent } from './element-components/text-area.component';
import { CheckboxComponent } from './element-components/checkbox.component';
import { DropdownComponent } from './element-components/dropdown.component';
import { RadioButtonGroupComponent } from './element-components/radio-button-group.component';
@@ -21,6 +22,8 @@ export function getComponentFactory(
return componentFactoryResolver.resolveComponentFactory(ButtonComponent);
case 'text-field':
return componentFactoryResolver.resolveComponentFactory(TextFieldComponent);
+ case 'text-area':
+ return componentFactoryResolver.resolveComponentFactory(TextAreaComponent);
case 'checkbox':
return componentFactoryResolver.resolveComponentFactory(CheckboxComponent);
case 'dropdown':
diff --git a/projects/common/element-components/text-area.component.ts b/projects/common/element-components/text-area.component.ts
new file mode 100644
index 000000000..99c030b62
--- /dev/null
+++ b/projects/common/element-components/text-area.component.ts
@@ -0,0 +1,27 @@
+import { Component } from '@angular/core';
+import { TextAreaElement } from '../unit';
+import { FormElementComponent } from '../form-element-component.directive';
+
+@Component({
+ selector: 'app-text-area',
+ template: `
+ <mat-form-field [style.width.px]="elementModel.width"
+ [style.height.px]="elementModel.height"
+ [style.background-color]="elementModel.backgroundColor"
+ [style.color]="elementModel.fontColor"
+ [style.font-family]="elementModel.font"
+ [style.font-size.px]="elementModel.fontSize"
+ [style.font-weight]="elementModel.bold ? 'bold' : ''"
+ [style.font-style]="elementModel.italic ? 'italic' : ''"
+ [style.text-decoration]="elementModel.underline ? 'underline' : ''">
+ <textarea matInput [formControl]="formElementControl"
+ placeholder="{{elementModel.label}}"
+ [(ngModel)]="elementModel.text"
+ [style.resize]="elementModel.resizeEnabled ? 'both' : 'none'">
+ </textarea>
+ </mat-form-field>
+ `
+})
+export class TextAreaComponent extends FormElementComponent {
+ elementModel!: TextAreaElement;
+}
diff --git a/projects/common/element-components/text-field.component.ts b/projects/common/element-components/text-field.component.ts
index 1ea51cd9d..dafcb4456 100644
--- a/projects/common/element-components/text-field.component.ts
+++ b/projects/common/element-components/text-field.component.ts
@@ -5,24 +5,19 @@ import { FormElementComponent } from '../form-element-component.directive';
@Component({
selector: 'app-text-field',
template: `
- <mat-form-field>
- <input *ngIf="elementModel.multiline === false" matInput
- placeholder="{{elementModel.placeholder}}"
- [formControl]="formElementControl">
- <textarea *ngIf="elementModel.multiline === true" matInput
- placeholder="{{elementModel.placeholder}}"
- [formControl]="formElementControl"
- [style.width.px]="elementModel.width"
- [style.height.px]="elementModel.height"
- [style.background-color]="elementModel.backgroundColor"
- [style.color]="elementModel.fontColor"
- [style.font-family]="elementModel.font"
- [style.font-size.px]="elementModel.fontSize"
- [style.font-weight]="elementModel.bold ? 'bold' : ''"
- [style.font-style]="elementModel.italic ? 'italic' : ''"
- [style.text-decoration]="elementModel.underline ? 'underline' : ''">
- </textarea>
- </mat-form-field>
+ <mat-form-field [style.width.px]="elementModel.width"
+ [style.height.px]="elementModel.height"
+ [style.background-color]="elementModel.backgroundColor"
+ [style.color]="elementModel.fontColor"
+ [style.font-family]="elementModel.font"
+ [style.font-size.px]="elementModel.fontSize"
+ [style.font-weight]="elementModel.bold ? 'bold' : ''"
+ [style.font-style]="elementModel.italic ? 'italic' : ''"
+ [style.text-decoration]="elementModel.underline ? 'underline' : ''">
+ <input matInput [formControl]="formElementControl"
+ placeholder="{{elementModel.label}}"
+ [(ngModel)]="elementModel.text">
+ </mat-form-field>
`
})
export class TextFieldComponent extends FormElementComponent {
diff --git a/projects/common/unit.ts b/projects/common/unit.ts
index 09e532081..8795ee351 100644
--- a/projects/common/unit.ts
+++ b/projects/common/unit.ts
@@ -55,8 +55,14 @@ export interface ButtonElement extends TextUIElement, SurfaceUIElement {
}
export interface TextFieldElement extends TextUIElement, SurfaceUIElement {
- placeholder: string;
- multiline: boolean;
+ label: string;
+ text: string;
+}
+
+export interface TextAreaElement extends TextUIElement, SurfaceUIElement {
+ label: string;
+ text: string;
+ resizeEnabled: boolean;
}
export interface CheckboxElement extends TextUIElement, SurfaceUIElement {
diff --git a/projects/editor/src/app/components/unit-view/page-view/ui-element-toolbox/ui-element-toolbox.component.html b/projects/editor/src/app/components/unit-view/page-view/ui-element-toolbox/ui-element-toolbox.component.html
index 79f516893..646d1bc48 100644
--- a/projects/editor/src/app/components/unit-view/page-view/ui-element-toolbox/ui-element-toolbox.component.html
+++ b/projects/editor/src/app/components/unit-view/page-view/ui-element-toolbox/ui-element-toolbox.component.html
@@ -13,8 +13,12 @@
Button
</button>
<button mat-raised-button (click)="addUIElement('text-field')">
+ <mat-icon>text_fields</mat-icon>
+ Eingabefeld
+ </button>
+ <button mat-raised-button (click)="addUIElement('text-area')">
<mat-icon>notes</mat-icon>
- Textfeld
+ Eingabefeld (mehrzeilig)
</button>
<button mat-raised-button (click)="addUIElement('checkbox')">
<mat-icon>check_box</mat-icon>
diff --git a/projects/editor/src/app/id.service.ts b/projects/editor/src/app/id.service.ts
index 58c63e365..b04ac6f60 100644
--- a/projects/editor/src/app/id.service.ts
+++ b/projects/editor/src/app/id.service.ts
@@ -12,6 +12,7 @@ export class IdService {
text: 0,
button: 0,
'text-field': 0,
+ 'text-area': 0,
checkbox: 0,
dropdown: 0,
radio: 0,
diff --git a/projects/editor/src/app/model/UnitFactory.ts b/projects/editor/src/app/model/UnitFactory.ts
index 0643051ec..b01723915 100644
--- a/projects/editor/src/app/model/UnitFactory.ts
+++ b/projects/editor/src/app/model/UnitFactory.ts
@@ -80,13 +80,23 @@ export function createButtonElement(): ButtonElement {
export function createTextfieldElement(): TextFieldElement {
return {
- placeholder: 'DUMMY',
- multiline: true,
+ label: 'Example Label',
+ text: '',
...createTextUIElement('text-field'),
...createSurfaceUIElement('text-field')
};
}
+export function createTextareaElement(): TextFieldElement {
+ return {
+ label: 'Example Label',
+ text: '',
+ ...createTextUIElement('text-area'),
+ ...createSurfaceUIElement('text-area'),
+ height: 100
+ };
+}
+
export function createCheckboxElement(): CheckboxElement {
return {
label: 'Label Checkbox',
diff --git a/projects/editor/src/app/unit.service.ts b/projects/editor/src/app/unit.service.ts
index 0431bce5c..76697ed92 100644
--- a/projects/editor/src/app/unit.service.ts
+++ b/projects/editor/src/app/unit.service.ts
@@ -134,6 +134,9 @@ export class UnitService {
case 'text-field':
newElement = UnitFactory.createTextfieldElement();
break;
+ case 'text-area':
+ newElement = UnitFactory.createTextareaElement();
+ break;
case 'checkbox':
newElement = UnitFactory.createCheckboxElement();
break;
--
GitLab