Share component.

src/Squidex/app/features/schemas/declarations.ts

@@ -26,6 +26,7 @@ export * from './pages/schema/types/tags-validation.component';
 export * from './pages/schema/forms/field-form-common.component';
 export * from './pages/schema/forms/field-form-ui.component';
 export * from './pages/schema/forms/field-form-validation.component';
+export * from './pages/schema/forms/field-form.component';
 
 export * from './pages/schema/field.component';
 export * from './pages/schema/field-wizard.component';

src/Squidex/app/features/schemas/module.ts

@@ -24,6 +24,7 @@ import {
     DateTimeValidationComponent,
     FieldComponent,
     FieldFormCommonComponent,
+    FieldFormComponent,
     FieldFormUIComponent,
     FieldFormValidationComponent,
     FieldWizardComponent,
@@ -86,6 +87,7 @@ const routes: Routes = [
         DateTimeUIComponent,
         DateTimeValidationComponent,
         FieldComponent,
+        FieldFormComponent,
         FieldFormCommonComponent,
         FieldFormUIComponent,
         FieldFormValidationComponent,

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

@@ -5,12 +5,12 @@
         </ng-container>
 
         <ng-template #noParent>
-            {{isEditing ? 'Edit' : 'Add'}} Field
+            {{editing ? 'Edit' : 'Add'}} Field
         </ng-template>
     </ng-container>
 
     <ng-container content>
-        <ng-container *ngIf="!isEditing; else notEditing">
+        <ng-container *ngIf="!editing; else notEditing">
             <form [formGroup]="addFieldForm.form" (ngSubmit)="addField(false)">
                 <sqx-form-error [error]="addFieldForm.error | async"></sqx-form-error>
 
@@ -31,7 +31,6 @@
                                         <div class="type-text text-muted">{{fieldType.description}}</div>
                                     </div>
                                 </div>
-
                             </label>
                         </div>
                     </div>
@@ -65,31 +64,12 @@
 
         <ng-template #notEditing>
             <form [formGroup]="editForm.form" class="edit-form" (ngSubmit)="save()">
-                <div class="table-items-row-details-tabs clearfix">
-                    <ul class="nav nav-tabs2">
-                        <li class="nav-item">
-                            <a class="nav-link" (click)="selectTab(0)" [class.active]="selectedTab === 0">Common</a>
-                        </li>
-                        <li class="nav-item">
-                            <a class="nav-link" (click)="selectTab(1)" [class.active]="selectedTab === 1">Validation</a>
-                        </li>
-                        <li class="nav-item">
-                            <a class="nav-link" (click)="selectTab(2)" [class.active]="selectedTab === 2">Editing</a>
-                        </li>
-                    </ul>
-                </div>
-
-                <div class="table-items-row-details-tab" [class.hidden]="selectedTab !== 0">
-                    <sqx-field-form-common [editForm]="editForm.form" [editFormSubmitted]="editForm.submitted | async" [field]="field"></sqx-field-form-common>
-                </div>
-
-                <div class="table-items-row-details-tab" [class.hidden]="selectedTab !== 1">
-                    <sqx-field-form-validation [patterns]="patternsState.patterns | async" [editForm]="editForm.form" [field]="field"></sqx-field-form-validation>
-                </div>
-
-                <div class="table-items-row-details-tab" [class.hidden]="selectedTab !== 2">
-                    <sqx-field-form-ui [editForm]="editForm.form" [field]="field"></sqx-field-form-ui>
-                </div>
+                <sqx-field-form
+                    [patterns]="patternsState.patterns | async"
+                    [editForm]="editForm.form"
+                    [editFormSubmitted]="editForm.submitted | async"
+                    [field]="field">
+                </sqx-field-form>
             </form>
         </ng-template>
     </ng-container>
@@ -97,13 +77,13 @@
     <ng-container footer>
         <button type="reset" class="float-left btn btn-secondary" (click)="emitComplete()">Cancel</button>
 
-        <div class="float-right" *ngIf="!isEditing">
+        <div class="float-right" *ngIf="!editing">
             <button type="button" class="btn btn-outline-success mr-1" (click)="addField(false)">Create and close</button>
             <button type="button" class="btn btn-success mr-1" (click)="addField(true)">Create and add field</button>
             <button type="button" class="btn btn-success" (click)="addField(false, true)">Create and edit field</button>
         </div>
 
-        <div class="float-right" *ngIf="isEditing">
+        <div class="float-right" *ngIf="editing">
             <button type="button" class="btn btn-success mr-1" (click)="save(true)">Save and add field</button>
             <button type="button" class="btn btn-primary" (click)="save()">Save and close</button>
         </div>

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

@@ -3,25 +3,12 @@
 
 $icon-size: 4.5rem;
 
-.form-group {
-    margin-bottom: 1.5rem;
-}
-
-.nav-link {
-    cursor: default;
-}
-
-.nav-tabs {
-    margin-bottom: 1rem;
-}
-
-.table-items-row-details-tab {
+:host /deep/ .table-items-row-details-tab {
     padding: 1.5rem 1.75rem;
 }
 
-.edit-form {
-    margin: -1.5rem -1.75rem;
-    margin-bottom: 0;
+.form-group {
+    margin-bottom: 1.5rem;
 }
 
 .type {
@@ -78,4 +65,9 @@ $icon-size: 4.5rem;
     .radio-input {
         display: none;
     }
+}
+
+.edit-form {
+    margin: -1.5rem -1.75rem;
+    margin-bottom: 0;
 }

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

@@ -46,11 +46,9 @@ export class FieldWizardComponent implements OnInit {
 
     public addFieldForm = new AddFieldForm(this.formBuilder);
 
+    public editing = false;
     public editForm = new EditFieldForm(this.formBuilder);
 
-    public isEditing = false;
-    public selectedTab = 0;
-
     constructor(
         private readonly formBuilder: FormBuilder,
         private readonly schemasState: SchemasState,
@@ -82,9 +80,7 @@ export class FieldWizardComponent implements OnInit {
                             this.nameInput.nativeElement.focus();
                         }
                     } else if (edit) {
-                        this.selectTab(0);
-
-                        this.isEditing = true;
+                        this.editing = true;
                     } else {
                         this.emitComplete();
                     }
@@ -94,10 +90,6 @@ export class FieldWizardComponent implements OnInit {
         }
     }
 
-    public selectTab(tab: number) {
-        this.selectedTab = tab;
-    }
-
     public save(addNew = false) {
         const value = this.editForm.submit();
 
@@ -109,7 +101,7 @@ export class FieldWizardComponent implements OnInit {
                     this.editForm.submitCompleted();
 
                     if (addNew) {
-                        this.isEditing = false;
+                        this.editing = false;
                     } else {
                         this.emitComplete();
                     }

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

@@ -20,7 +20,7 @@
             </div>
             <div class="col col-options">
                 <div class="float-right">
-                    <button type="button" class="btn btn-secondary table-items-edit-button" [class.active]="isEditing" (click)="toggleEditing()">
+                    <button type="button" class="btn btn-secondary table-items-edit-button" [class.active]="editing" (click)="toggleEditing()">
                         <i class="icon-settings"></i>
                     </button>
 
@@ -70,38 +70,16 @@
         </div>
     </div>
 
-    <div class="table-items-row-details" *ngIf="isEditing">
+    <div class="table-items-row-details" *ngIf="editing">
         <form [formGroup]="editForm.form" (ngSubmit)="save()">
-            <div class="table-items-row-details-tabs clearfix">
-                <ul class="nav nav-tabs2">
-                    <li class="nav-item">
-                        <a class="nav-link" (click)="selectTab(0)" [class.active]="selectedTab === 0">Common</a>
-                    </li>
-                    <li class="nav-item" [class.hidden]="!field.properties.isContentField">
-                        <a class="nav-link" (click)="selectTab(1)" [class.active]="selectedTab === 1">Validation</a>
-                    </li>
-                    <li class="nav-item" [class.hidden]="!field.properties.isContentField || field.properties.fieldType === 'Assets'">
-                        <a class="nav-link" (click)="selectTab(2)" [class.active]="selectedTab === 2">Editing</a>
-                    </li>
-                </ul>
-
-                <div class="float-right">
-                    <button [disabled]="field.isLocked" type="reset" class="btn btn-secondary" (click)="toggleEditing()">Cancel</button>
-                    <button [disabled]="field.isLocked" type="submit" class="btn btn-primary ml-1">Save</button>
-                </div>
-            </div>
-
-            <div class="table-items-row-details-tab" [class.hidden]="selectedTab !== 0">
-                <sqx-field-form-common [editForm]="editForm.form" [editFormSubmitted]="editForm.submitted | async" [field]="field"></sqx-field-form-common>
-            </div>
-
-            <div class="table-items-row-details-tab" [class.hidden]="selectedTab !== 1">
-                <sqx-field-form-validation [patterns]="patterns" [editForm]="editForm.form" [field]="field"></sqx-field-form-validation>
-            </div>
-
-            <div class="table-items-row-details-tab" [class.hidden]="selectedTab !== 2">
-                <sqx-field-form-ui [editForm]="editForm.form" [field]="field"></sqx-field-form-ui>
-            </div>
+            <sqx-field-form
+                (cancel)="toggleEditing()"
+                [showButtons]="true"
+                [patterns]="patterns"
+                [editForm]="editForm.form"
+                [editFormSubmitted]="editForm.submitted | async"
+                [field]="field">
+            </sqx-field-form>
         </form> 
     </div>
 

src/Squidex/app/features/schemas/pages/schema/field.component.scss

@@ -18,6 +18,7 @@ $padding: 1rem;
 
 .table-items-row-summary {
     position: relative;
+    padding-right: 1.25rem;
     padding-left: 3rem;
 }
 

src/Squidex/app/features/schemas/pages/schema/field.component.ts

@@ -45,9 +45,7 @@ export class FieldComponent implements OnChanges {
 
     public dropdown = new ModalModel();
 
-    public isEditing = false;
-    public selectedTab = 0;
-
+    public editing = false;
     public editForm = new EditFieldForm(this.formBuilder);
 
     public addFieldDialog = new DialogModel();
@@ -69,17 +67,13 @@ export class FieldComponent implements OnChanges {
     }
 
     public toggleEditing() {
-        this.isEditing = !this.isEditing;
+        this.editing = !this.editing;
 
-        if (this.isEditing) {
+        if (this.editing) {
             this.editForm.load(this.field.properties);
         }
     }
 
-    public selectTab(tab: number) {
-        this.selectedTab = tab;
-    }
-
     public deleteField() {
         this.schemasState.deleteField(this.schema, this.field);
     }

src/Squidex/app/features/schemas/pages/schema/forms/field-form.component.ts

@@ -0,0 +1,72 @@
+/*
+ * Squidex Headless CMS
+ *
+ * @license
+ * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
+ */
+
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+
+import { FieldDto, ImmutableArray, PatternDto } from '@app/shared';
+
+@Component({
+    selector: 'sqx-field-form',
+    template: `
+        <div class="table-items-row-details-tabs clearfix">
+            <ul class="nav nav-tabs2">
+                <li class="nav-item">
+                    <a class="nav-link" (click)="selectTab(0)" [class.active]="selectedTab === 0">Common</a>
+                </li>
+                <li class="nav-item" [class.hidden]="!field.properties.isContentField">
+                    <a class="nav-link" (click)="selectTab(1)" [class.active]="selectedTab === 1">Validation</a>
+                </li>
+                <li class="nav-item" [class.hidden]="!field.properties.isContentField || field.properties.fieldType === 'Assets'">
+                    <a class="nav-link" (click)="selectTab(2)" [class.active]="selectedTab === 2">Editing</a>
+                </li>
+            </ul>
+
+            <div class="float-right" *ngIf="showButtons">
+                <button [disabled]="field.isLocked" type="reset" class="btn btn-secondary" (click)="cancel.emit()">Cancel</button>
+                <button [disabled]="field.isLocked" type="submit" class="btn btn-primary ml-1">Save</button>
+            </div>
+        </div>
+
+        <div class="table-items-row-details-tab" [class.hidden]="selectedTab !== 0">
+            <sqx-field-form-common [editForm]="editForm" [editFormSubmitted]="editFormSubmitted " [field]="field"></sqx-field-form-common>
+        </div>
+
+        <div class="table-items-row-details-tab" [class.hidden]="selectedTab !== 1">
+            <sqx-field-form-validation [patterns]="patterns" [editForm]="editForm" [field]="field"></sqx-field-form-validation>
+        </div>
+
+        <div class="table-items-row-details-tab" [class.hidden]="selectedTab !== 2">
+            <sqx-field-form-ui [editForm]="editForm" [field]="field"></sqx-field-form-ui>
+        </div>
+    `
+})
+export class FieldFormComponent {
+    @Input()
+    public showButtons: boolean;
+
+    @Input()
+    public editForm: FormGroup;
+
+    @Input()
+    public editFormSubmitted: boolean;
+
+    @Input()
+    public patterns: ImmutableArray<PatternDto>;
+
+    @Input()
+    public field: FieldDto;
+
+    @Output()
+    public cancel = new EventEmitter();
+
+    public selectedTab = 0;
+
+    public selectTab(tab: number) {
+        this.selectedTab = tab;
+    }
+}