From 0352176ef47a376dda22f7d2c281a542e98a3a95 Mon Sep 17 00:00:00 2001
From: rhenck <richard.henck@iqb.hu-berlin.de>
Date: Fri, 23 Jul 2021 18:11:05 +0200
Subject: [PATCH] Add number field component
---
projects/common/app.module.ts | 2 ++
projects/common/component-utils.ts | 3 +++
.../number-field.component.ts | 24 +++++++++++++++++++
.../text-field.component.ts | 3 ++-
projects/common/unit.ts | 4 ++++
.../ui-element-toolbox.component.html | 4 ++++
projects/editor/src/app/model/UnitFactory.ts | 10 +++++++-
projects/editor/src/app/unit.service.ts | 3 +++
8 files changed, 51 insertions(+), 2 deletions(-)
create mode 100644 projects/common/element-components/number-field.component.ts
diff --git a/projects/common/app.module.ts b/projects/common/app.module.ts
index 7cb261088..f1c4d88af 100644
--- a/projects/common/app.module.ts
+++ b/projects/common/app.module.ts
@@ -30,6 +30,7 @@ import { ImageComponent } from './element-components/image.component';
import { VideoComponent } from './element-components/video.component';
import { AudioComponent } from './element-components/audio.component';
import { CorrectionComponent } from './element-components/compound-components/correction.component';
+import { NumberFieldComponent } from './element-components/number-field.component';
@NgModule({
imports: [
@@ -48,6 +49,7 @@ import { CorrectionComponent } from './element-components/compound-components/co
ButtonComponent,
TextComponent,
TextFieldComponent,
+ NumberFieldComponent,
TextAreaComponent,
ImageComponent,
AudioComponent,
diff --git a/projects/common/component-utils.ts b/projects/common/component-utils.ts
index c257cdc6c..ff2733284 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 { NumberFieldComponent } from './element-components/number-field.component';
import { TextAreaComponent } from './element-components/text-area.component';
import { CheckboxComponent } from './element-components/checkbox.component';
import { DropdownComponent } from './element-components/dropdown.component';
@@ -22,6 +23,8 @@ export function getComponentFactory(
return componentFactoryResolver.resolveComponentFactory(ButtonComponent);
case 'text-field':
return componentFactoryResolver.resolveComponentFactory(TextFieldComponent);
+ case 'number-field':
+ return componentFactoryResolver.resolveComponentFactory(NumberFieldComponent);
case 'text-area':
return componentFactoryResolver.resolveComponentFactory(TextAreaComponent);
case 'checkbox':
diff --git a/projects/common/element-components/number-field.component.ts b/projects/common/element-components/number-field.component.ts
new file mode 100644
index 000000000..57f55d745
--- /dev/null
+++ b/projects/common/element-components/number-field.component.ts
@@ -0,0 +1,24 @@
+import { Component } from '@angular/core';
+import { NumberFieldElement } from '../unit';
+import { FormElementComponent } from '../form-element-component.directive';
+
+@Component({
+ selector: 'app-number-field',
+ 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' : ''">
+ <input matInput [formControl]="elementFormControl" type="number"
+ placeholder="{{elementModel.label}}">
+ </mat-form-field>
+ `
+})
+export class NumberFieldComponent extends FormElementComponent {
+ elementModel!: NumberFieldElement;
+}
diff --git a/projects/common/element-components/text-field.component.ts b/projects/common/element-components/text-field.component.ts
index 3d7e1116f..5fc6eee6b 100644
--- a/projects/common/element-components/text-field.component.ts
+++ b/projects/common/element-components/text-field.component.ts
@@ -14,7 +14,8 @@ import { FormElementComponent } from '../form-element-component.directive';
[style.font-weight]="elementModel.bold ? 'bold' : ''"
[style.font-style]="elementModel.italic ? 'italic' : ''"
[style.text-decoration]="elementModel.underline ? 'underline' : ''">
- <input matInput [formControl]="elementFormControl"
+ <input matInput type="text"
+ [formControl]="elementFormControl"
placeholder="{{elementModel.label}}">
</mat-form-field>
`
diff --git a/projects/common/unit.ts b/projects/common/unit.ts
index 6ef04adeb..abc86e3eb 100644
--- a/projects/common/unit.ts
+++ b/projects/common/unit.ts
@@ -65,6 +65,10 @@ export interface TextFieldElement extends InputUIElement, TextUIElement, Surface
value: string;
}
+export interface NumberFieldElement extends InputUIElement, TextUIElement, SurfaceUIElement {
+ value: number;
+}
+
export interface TextAreaElement extends InputUIElement, TextUIElement, SurfaceUIElement {
value: string;
resizeEnabled: boolean;
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 646d1bc48..b91c56a6c 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
@@ -16,6 +16,10 @@
<mat-icon>text_fields</mat-icon>
Eingabefeld
</button>
+ <button mat-raised-button (click)="addUIElement('number-field')">
+ <mat-icon>pin</mat-icon>
+ Eingabefeld (Zahlen)
+ </button>
<button mat-raised-button (click)="addUIElement('text-area')">
<mat-icon>notes</mat-icon>
Eingabefeld (mehrzeilig)
diff --git a/projects/editor/src/app/model/UnitFactory.ts b/projects/editor/src/app/model/UnitFactory.ts
index b0417927e..3ff2861ad 100644
--- a/projects/editor/src/app/model/UnitFactory.ts
+++ b/projects/editor/src/app/model/UnitFactory.ts
@@ -3,7 +3,7 @@ import {
CheckboxElement, CompoundElementCorrection, DropdownElement,
ImageElement, TextElement, RadioButtonGroupElement, SurfaceUIElement,
TextFieldElement, TextUIElement, Unit, UnitPage, UnitPageSection, UnitUIElement,
- VideoElement, InputUIElement, TextAreaElement
+ VideoElement, InputUIElement, TextAreaElement, NumberFieldElement
} from '../../../../common/unit';
export function createUnit(): Unit {
@@ -94,6 +94,14 @@ export function createTextfieldElement(): TextFieldElement {
};
}
+export function createNumberfieldElement(): NumberFieldElement {
+ return <NumberFieldElement>{
+ ...createTextUIElement('number-field'),
+ ...createSurfaceUIElement(),
+ ...createInputUIElement('Example Label', undefined)
+ };
+}
+
export function createTextareaElement(): TextAreaElement {
return <TextAreaElement>{
resizeEnabled: false,
diff --git a/projects/editor/src/app/unit.service.ts b/projects/editor/src/app/unit.service.ts
index 40c120742..6381b18dd 100644
--- a/projects/editor/src/app/unit.service.ts
+++ b/projects/editor/src/app/unit.service.ts
@@ -133,6 +133,9 @@ export class UnitService {
case 'text-field':
newElement = UnitFactory.createTextfieldElement();
break;
+ case 'number-field':
+ newElement = UnitFactory.createNumberfieldElement();
+ break;
case 'text-area':
newElement = UnitFactory.createTextareaElement();
break;
--
GitLab