Fix tabs, fix imports, changed step to isEditing, and removed the class that was causing the weird styling

src/Squidex/app/features/schemas/pages/schema/field-wizard.component.html

@@ -5,12 +5,12 @@
         </ng-container>
 
         <ng-template #noParent>
-            {{step === 1 ? 'Add' : 'Edit'}} Field
+            {{isEditing ? 'Edit' : 'Add'}} Field
         </ng-template>
     </ng-container>
 
     <ng-container content>
-        <ng-container *ngIf="step === 1">
+        <ng-container *ngIf="!isEditing; else notEditing">
             <form [formGroup]="addFieldForm.form" (ngSubmit)="addField(false)">
                 <sqx-form-error [error]="addFieldForm.error | async"></sqx-form-error>
 
@@ -60,7 +60,7 @@
             </form>
         </ng-container>
 
-        <div class="table-items-row-details" *ngIf="step === 2">
+        <ng-template #notEditing>
             <form [formGroup]="editForm.form" (ngSubmit)="save()">
                 <div class="table-items-row-details-tabs clearfix">
                     <ul class="nav nav-tabs2">
@@ -91,19 +91,19 @@
                     </div>
                 </ng-container>
             </form>
-        </div>
+        </ng-template>
     </ng-container>
 
     <ng-container footer>
         <button type="reset" class="float-left btn btn-secondary" (click)="complete()">Cancel</button>
 
-        <div class="float-right" *ngIf="step === 1">
+        <div class="float-right" *ngIf="!isEditing">
             <button class="btn btn-success mr-1" (click)="addField(false, false)">Create and close</button>
             <button class="btn btn-success mr-1" (click)="addField(true, false)">Create and new field</button>
             <button class="btn btn-success" (click)="addField(false, true)">Create and edit field</button>
         </div>
 
-        <div class="float-right" *ngIf="step === 2">
+        <div class="float-right" *ngIf="isEditing">
             <button class="btn btn-success mr-1" (click)="save(true)">Save and add field</button>
             <button (click)="save()" class="btn btn-primary ml-1">Save and close</button>
         </div>

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<AppPatternDto>;
+    public addFieldForm = new AddFieldForm(this.formBuilder);
+    public editForm = new EditFieldForm(this.formBuilder);
+    public field: FieldDto;
+    public isEditing = false;
+    public selectedTab = 0;
+    public patterns: ImmutableArray<AppPatternDto>;
 
-  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);
+                    }
+                );
+        }
     }
-  }
 }