From bdf898f6890372468726c055bff252a18d97c0c7 Mon Sep 17 00:00:00 2001
From: jojohoch <joachim.hoch@iqb.hu-berlin.de>
Date: Fri, 1 Oct 2021 09:11:09 +0200
Subject: [PATCH] [player] Refactor element and element overlay component
* After deleting validation component, element component is no
longer needed and is deleted
* Element overlay takes over the methods of element component
---
projects/player/src/app/app.module.ts | 4 +-
.../element-overlay.component.ts | 27 +++++++++----
.../components/element/element.component.css | 5 ---
.../components/element/element.component.html | 25 ------------
.../components/element/element.component.ts | 38 -------------------
.../components/section/section.component.html | 12 ++++--
6 files changed, 29 insertions(+), 82 deletions(-)
delete mode 100644 projects/player/src/app/components/element/element.component.css
delete mode 100644 projects/player/src/app/components/element/element.component.html
delete mode 100644 projects/player/src/app/components/element/element.component.ts
diff --git a/projects/player/src/app/app.module.ts b/projects/player/src/app/app.module.ts
index 56a6f89b8..4c311acb0 100644
--- a/projects/player/src/app/app.module.ts
+++ b/projects/player/src/app/app.module.ts
@@ -19,7 +19,6 @@ import { AlertDialogComponent } from './components/alert-dialog/alert-dialog.com
import { IntersectionDetectionDirective } from './directives/intersection-detection.directive';
import { KeyboardComponent } from './components/keyboard/keyboard.component';
import { KeyComponent } from './components/key/key.component';
-import { ElementComponent } from './components/element/element.component';
@NgModule({
declarations: [
@@ -35,8 +34,7 @@ import { ElementComponent } from './components/element/element.component';
ScrollIndexDirective,
IntersectionDetectionDirective,
KeyboardComponent,
- KeyComponent,
- ElementComponent
+ KeyComponent
],
imports: [
BrowserModule,
diff --git a/projects/player/src/app/components/element-overlay/element-overlay.component.ts b/projects/player/src/app/components/element-overlay/element-overlay.component.ts
index 99fbe8822..d8ac5d39b 100644
--- a/projects/player/src/app/components/element-overlay/element-overlay.component.ts
+++ b/projects/player/src/app/components/element-overlay/element-overlay.component.ts
@@ -2,7 +2,7 @@ import {
Component, OnInit, Input, ComponentFactoryResolver,
ViewChild, ViewContainerRef
} from '@angular/core';
-import { FormGroup } from '@angular/forms';
+import { FormBuilder, FormGroup } from '@angular/forms';
import { takeUntil } from 'rxjs/operators';
import { Subject, Subscription } from 'rxjs';
import { UnitUIElement } from '../../../../../common/unit';
@@ -10,6 +10,7 @@ import * as ComponentUtils from '../../../../../common/component-utils';
import { SpecialCharacterService } from '../../services/special-character.service';
import { TextFieldComponent } from '../../../../../common/element-components/text-field.component';
import { TextAreaComponent } from '../../../../../common/element-components/text-area.component';
+import { FormService } from '../../../../../common/form.service';
@Component({
selector: 'app-element-overlay',
@@ -20,16 +21,18 @@ export class ElementOverlayComponent implements OnInit {
@Input() elementModel!: UnitUIElement;
@Input() parentForm!: FormGroup;
@Input() parentArrayIndex!: number;
- @Input() isInputElement!: boolean;
- focussedInputSubscription!: Subscription;
+ private isInputElement!: boolean;
+ private focussedInputSubscription!: Subscription;
private ngUnsubscribe = new Subject<void>();
@ViewChild('elementComponentContainer',
{ read: ViewContainerRef, static: true }) private elementComponentContainer!: ViewContainerRef;
constructor(private specialCharacterService: SpecialCharacterService,
- private componentFactoryResolver: ComponentFactoryResolver) {
+ private componentFactoryResolver: ComponentFactoryResolver,
+ private formService: FormService,
+ private formBuilder: FormBuilder) {
}
ngOnInit(): void {
@@ -38,10 +41,11 @@ export class ElementOverlayComponent implements OnInit {
const elementComponent = this.elementComponentContainer.createComponent(elementComponentFactory).instance;
elementComponent.elementModel = this.elementModel;
-
+ this.isInputElement = Object.prototype.hasOwnProperty.call(this.elementModel, 'required');
if (this.isInputElement) {
- elementComponent.parentForm = this.parentForm;
-
+ const elementForm = this.formBuilder.group({});
+ elementComponent.parentForm = elementForm;
+ this.registerFormGroup(elementForm);
if (this.specialCharacterService.isActive &&
(this.elementModel.type === 'text-field' || this.elementModel.type === 'text-area')) {
this.initEventsForKeyboard(elementComponent);
@@ -49,6 +53,15 @@ export class ElementOverlayComponent implements OnInit {
}
}
+ private registerFormGroup(elementForm: FormGroup): void {
+ this.formService.registerFormGroup({
+ formGroup: elementForm,
+ parentForm: this.parentForm,
+ parentArray: 'elements',
+ parentArrayIndex: this.parentArrayIndex
+ });
+ }
+
private initEventsForKeyboard(elementComponent: TextFieldComponent | TextAreaComponent): void {
elementComponent.onFocus
.pipe(takeUntil(this.ngUnsubscribe))
diff --git a/projects/player/src/app/components/element/element.component.css b/projects/player/src/app/components/element/element.component.css
deleted file mode 100644
index 281781458..000000000
--- a/projects/player/src/app/components/element/element.component.css
+++ /dev/null
@@ -1,5 +0,0 @@
-.dynamic-validation-messages{
- position: relative;
- display: block;
- margin-top: -20px
-}
diff --git a/projects/player/src/app/components/element/element.component.html b/projects/player/src/app/components/element/element.component.html
deleted file mode 100644
index 56a216192..000000000
--- a/projects/player/src/app/components/element/element.component.html
+++ /dev/null
@@ -1,25 +0,0 @@
-<ng-container *ngTemplateOutlet="elementModel.dynamicPositioning ? dynamicElement : staticElement"></ng-container>
-
-<ng-template #staticElement>
- <app-element-overlay
- [style.display]="'block'"
- [style.overflow]="'auto'"
- [style.width.px]="elementModel.width"
- [style.height.px]="elementModel.height"
- [elementModel]="elementModel"
- [parentForm]="elementForm"
- [parentArrayIndex]="parentArrayIndex"
- [isInputElement]="isInputElement">
- </app-element-overlay>
-</ng-template>
-
-<ng-template #dynamicElement>
- <app-element-overlay
- [elementModel]="elementModel"
- [parentForm]="elementForm"
- [parentArrayIndex]="parentArrayIndex"
- [isInputElement]="isInputElement">
- </app-element-overlay>
-</ng-template>
-
-
diff --git a/projects/player/src/app/components/element/element.component.ts b/projects/player/src/app/components/element/element.component.ts
deleted file mode 100644
index 5640418cb..000000000
--- a/projects/player/src/app/components/element/element.component.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import { Component, Input, OnInit } from '@angular/core';
-import { FormBuilder, FormGroup } from '@angular/forms';
-import { UnitUIElement } from '../../../../../common/unit';
-import { FormService } from '../../../../../common/form.service';
-
-@Component({
- selector: 'app-element',
- templateUrl: './element.component.html',
- styleUrls: ['./element.component.css']
-})
-export class ElementComponent implements OnInit {
- @Input() elementModel!: UnitUIElement;
- @Input() parentForm!: FormGroup;
- @Input() parentArrayIndex!: number;
-
- isInputElement!: boolean;
- elementForm!: FormGroup;
-
- constructor(private formService: FormService,
- private formBuilder: FormBuilder) {}
-
- ngOnInit(): void {
- this.isInputElement = Object.prototype.hasOwnProperty.call(this.elementModel, 'required');
- if (this.isInputElement) {
- this.registerFormGroup();
- }
- }
-
- private registerFormGroup(): void {
- this.elementForm = this.formBuilder.group({});
- this.formService.registerFormGroup({
- formGroup: this.elementForm,
- parentForm: this.parentForm,
- parentArray: 'elements',
- parentArrayIndex: this.parentArrayIndex
- });
- }
-}
diff --git a/projects/player/src/app/components/section/section.component.html b/projects/player/src/app/components/section/section.component.html
index 77b796c1e..d0216cb87 100644
--- a/projects/player/src/app/components/section/section.component.html
+++ b/projects/player/src/app/components/section/section.component.html
@@ -2,14 +2,18 @@
<ng-template #staticElements>
<ng-container *ngFor="let element of section.elements; let i = index">
- <app-element
+ <app-element-overlay
+ [style.display]="'block'"
+ [style.overflow]="'auto'"
+ [style.width.px]="element.width"
+ [style.height.px]="element.height"
[style.position]="'absolute'"
[style.left.px]="element.xPosition"
[style.top.px]="element.yPosition"
[elementModel]="element"
[parentForm]="sectionForm"
[parentArrayIndex]="i">
- </app-element>
+ </app-element-overlay>
</ng-container>
</ng-template>
@@ -18,7 +22,7 @@
[style.grid-template-columns]="section.gridColumnSizes"
[style.grid-template-rows]="section.gridRowSizes">
<ng-container *ngFor="let element of section.elements; let i = index">
- <app-element
+ <app-element-overlay
[style.min-width.px]="element.width"
[style.min-height.px]="element.height"
[style.margin-left.px]="element.marginLeft"
@@ -32,7 +36,7 @@
[elementModel]="element"
[parentForm]="sectionForm"
[parentArrayIndex]="i">
- </app-element>
+ </app-element-overlay>
</ng-container>
</div>
</ng-template>
--
GitLab