diff --git a/src/Squidex/app/features/schemas/pages/schema/field-wizard.component.html b/src/Squidex/app/features/schemas/pages/schema/field-wizard.component.html index 10770b9c6..065fc8b56 100644 --- a/src/Squidex/app/features/schemas/pages/schema/field-wizard.component.html +++ b/src/Squidex/app/features/schemas/pages/schema/field-wizard.component.html @@ -5,12 +5,12 @@ - {{step === 1 ? 'Add' : 'Edit'}} Field + {{isEditing ? 'Edit' : 'Add'}} Field - +
@@ -60,7 +60,7 @@
-
+
-
+
-
+
-
+
diff --git a/src/Squidex/app/features/schemas/pages/schema/field-wizard.component.ts b/src/Squidex/app/features/schemas/pages/schema/field-wizard.component.ts index 02d0cffa2..060020bae 100644 --- a/src/Squidex/app/features/schemas/pages/schema/field-wizard.component.ts +++ b/src/Squidex/app/features/schemas/pages/schema/field-wizard.component.ts @@ -5,142 +5,132 @@ * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. */ +import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core'; +import { FormBuilder } from '@angular/forms'; +import { onErrorResumeNext } from 'rxjs/operators'; + import { - Component, - ElementRef, - EventEmitter, - Input, - OnInit, - Output, - ViewChild -} from "@angular/core"; -import { FormBuilder } from "@angular/forms"; -import { - AddFieldForm, - AppPatternDto, - createProperties, - EditFieldForm, - FieldDto, - fieldTypes, - ImmutableArray, - PatternsState, - RootFieldDto, - SchemaDetailsDto, - SchemasState, - Types, - UpdateFieldDto -} from "@app/shared"; -import { onErrorResumeNext } from "rxjs/operators"; + AddFieldForm, + AppPatternDto, + createProperties, + EditFieldForm, + FieldDto, + fieldTypes, + ImmutableArray, + PatternsState, + RootFieldDto, + SchemaDetailsDto, + SchemasState, + Types, + UpdateFieldDto +} from '@app/shared'; @Component({ - selector: "sqx-field-wizard", - styleUrls: ["./field-wizard.component.scss"], - templateUrl: "./field-wizard.component.html" + selector: 'sqx-field-wizard', + styleUrls: ['./field-wizard.component.scss'], + templateUrl: './field-wizard.component.html' }) export class FieldWizardComponent implements OnInit { - @ViewChild("nameInput") - public nameInput: ElementRef; + @ViewChild('nameInput') + public nameInput: ElementRef; - @Input() - public schema: SchemaDetailsDto; + @Input() + public schema: SchemaDetailsDto; - @Input() - public parent: RootFieldDto; + @Input() + public parent: RootFieldDto; - @Output() - public completed = new EventEmitter(); + @Output() + public completed = new EventEmitter(); - public fieldTypes = fieldTypes; + public fieldTypes = fieldTypes; - public addFieldForm = new AddFieldForm(this.formBuilder); - public editForm = new EditFieldForm(this.formBuilder); - public field: FieldDto; - public isEditing = false; - public selectedTab = 0; - public patterns: ImmutableArray; + public addFieldForm = new AddFieldForm(this.formBuilder); + public editForm = new EditFieldForm(this.formBuilder); + public field: FieldDto; + public isEditing = false; + public selectedTab = 0; + public patterns: ImmutableArray; - public step = 1; + constructor( + private readonly formBuilder: FormBuilder, + private readonly schemasState: SchemasState, + public readonly patternsState: PatternsState + ) {} - constructor( - private readonly formBuilder: FormBuilder, - private readonly schemasState: SchemasState, - public readonly patternsState: PatternsState - ) {} + public ngOnInit() { + if (this.parent) { + this.fieldTypes = this.fieldTypes.filter(x => x.type !== 'Array'); + } + this.patternsState + .load() + .pipe(onErrorResumeNext()) + .subscribe(); + } - public ngOnInit() { - if (this.parent) { - this.fieldTypes = this.fieldTypes.filter(x => x.type !== "Array"); + public complete() { + this.completed.emit(); } - this.patternsState - .load() - .pipe(onErrorResumeNext()) - .subscribe(); - } - - public complete() { - this.completed.emit(); - } - - public addField(next: boolean, edit: boolean) { - const value = this.addFieldForm.submit(); - - if (value) { - this.schemasState.addField(this.schema, value, this.parent).subscribe( - dto => { - this.field = dto; - this.addFieldForm.submitCompleted({ type: fieldTypes[0].type }); - - if (next) { - if (Types.isFunction(this.nameInput.nativeElement.focus)) { - this.nameInput.nativeElement.focus(); - } - } else if (edit) { - this.selectTab(0); - this.step++; - } else { - this.complete(); - } - }, - error => { - this.addFieldForm.submitFailed(error); + + public addField(next: boolean, edit: boolean) { + const value = this.addFieldForm.submit(); + + if (value) { + this.schemasState.addField(this.schema, value, this.parent).subscribe( + dto => { + this.field = dto; + this.addFieldForm.submitCompleted({ type: fieldTypes[0].type }); + + if (next) { + if (Types.isFunction(this.nameInput.nativeElement.focus)) { + this.nameInput.nativeElement.focus(); + } + } else if (edit) { + this.selectTab(0); + this.isEditing = true; + } else { + this.complete(); + } + }, + error => { + this.addFieldForm.submitFailed(error); + } + ); } - ); } - } - - public selectTab(tab: number) { - this.selectedTab = tab; - } - - public save(addNew: boolean) { - const value = this.editForm.submit(); - - if (value) { - const properties = createProperties( - this.field.properties["fieldType"], - value - ); - - this.schemasState - .updateField( - this.schema, - this.field as RootFieldDto, - new UpdateFieldDto(properties) - ) - .subscribe( - () => { - this.isEditing = false; - this.editForm.submitCompleted(); - if (addNew) { - this.step--; - } else { - this.complete(); - } - }, - error => { - this.editForm.submitFailed(error); - } - ); + + public selectTab(tab: number) { + this.selectedTab = tab; + } + + public save(addNew: boolean) { + const value = this.editForm.submit(); + + if (value) { + const properties = createProperties( + this.field.properties['fieldType'], + value + ); + + this.schemasState + .updateField( + this.schema, + this.field as RootFieldDto, + new UpdateFieldDto(properties) + ) + .subscribe( + () => { + this.editForm.submitCompleted(); + if (addNew) { + this.isEditing = false; + } else { + this.complete(); + } + }, + error => { + this.editForm.submitFailed(error); + } + ); + } } - } }