Merge branch 'master' of github.com:Avd6977/squidex

* Style fixings
* Code styling fixes.

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

@@ -1,4 +1,3 @@
-<form [formGroup]="addFieldForm.form" (ngSubmit)="addField(false)">
 <sqx-modal-dialog (closed)="complete()" large="true">
     <ng-container title>
         <ng-container *ngIf="parent; else noParent">
@@ -6,11 +5,13 @@
         </ng-container>
 
         <ng-template #noParent>
-                Add Field
+            {{isEditing ? 'Edit' : 'Add'}} Field
         </ng-template>
     </ng-container>
 
     <ng-container content>
+        <ng-container *ngIf="!isEditing; else notEditing">
+            <form [formGroup]="addFieldForm.form" (ngSubmit)="addField(false)">
                 <sqx-form-error [error]="addFieldForm.error | async"></sqx-form-error>
 
                 <div class="form-group">
@@ -39,7 +40,8 @@
                 <div class="form-group">
                     <sqx-control-errors for="name" submitOnly="true" [submitted]="addFieldForm.submitted | async"></sqx-control-errors>
 
-                <input type="text" class="form-control" formControlName="name" maxlength="40" #nameInput placeholder="Enter field name" sqxFocusOnInit />
+                    <input type="text" class="form-control" formControlName="name" maxlength="40" #nameInput
+                        placeholder="Enter field name" sqxFocusOnInit />
                 </div>
 
                 <div class="form-group" *ngIf="!parent">
@@ -54,15 +56,52 @@
                         You can the field as localizable. It means that is dependent on the language, for example a city name.
                     </small>
                 </div>
+            </form>
+        </ng-container>
+
+        <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>
+            </form>
+        </ng-template>
     </ng-container>
 
     <ng-container footer>
         <button type="reset" class="float-left btn btn-secondary" (click)="complete()">Cancel</button>
 
-            <div class="float-right">
-                <button class="btn btn-success mr-1" (click)="addField(false)">Create and close</button>
-                <button class="btn btn-success" (click)="addField(true)">Create and new field</button>
+        <div class="float-right" *ngIf="!isEditing">
+            <button class="btn btn-outline-success mr-1" (click)="addField(false, false)">Create and close</button>
+            <button class="btn btn-success mr-1" (click)="addField(true, false)">Create and add field</button>
+            <button class="btn btn-success" (click)="addField(false, true)">Create and edit field</button>
+        </div>
+
+        <div class="float-right" *ngIf="isEditing">
+            <button class="btn btn-success mr-1" (click)="save(true)">Save and add field</button>
+            <button class="btn btn-primary" (click)="save()">Save and close</button>
         </div>
     </ng-container>
 </sqx-modal-dialog>
-</form>

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

@@ -15,6 +15,11 @@ $icon-size: 4.5rem;
     margin-bottom: 1rem;
 }
 
+.edit-form {
+    margin: -1rem;
+    margin-bottom: 0;
+}
+
 .type {
     & {
         margin-bottom: .5rem;

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

@@ -10,11 +10,16 @@ import { FormBuilder } from '@angular/forms';
 
 import {
     AddFieldForm,
+    createProperties,
+    EditFieldForm,
+    FieldDto,
     fieldTypes,
+    PatternsState,
     RootFieldDto,
     SchemaDetailsDto,
     SchemasState,
-    Types
+    Types,
+    UpdateFieldDto
 } from '@app/shared';
 
 @Component({
@@ -36,14 +41,20 @@ export class FieldWizardComponent implements OnInit {
     public completed = new EventEmitter();
 
     public fieldTypes = fieldTypes;
+    public field: FieldDto;
 
     public addFieldForm = new AddFieldForm(this.formBuilder);
 
+    public editForm = new EditFieldForm(this.formBuilder);
+
+    public isEditing = false;
+    public selectedTab = 0;
+
     constructor(
         private readonly formBuilder: FormBuilder,
-        private readonly schemasState: SchemasState
-    ) {
-    }
+        private readonly schemasState: SchemasState,
+        public readonly patternsState: PatternsState
+    ) {}
 
     public ngOnInit() {
         if (this.parent) {
@@ -55,18 +66,24 @@ export class FieldWizardComponent implements OnInit {
         this.completed.emit();
     }
 
-    public addField(next: boolean) {
+    public addField(addNew: boolean, edit: boolean) {
         const value = this.addFieldForm.submit();
 
         if (value) {
             this.schemasState.addField(this.schema, value, this.parent)
-                .subscribe(() => {
+                .subscribe(dto => {
+                    this.field = dto;
+
                     this.addFieldForm.submitCompleted({ type: fieldTypes[0].type });
 
-                    if (next) {
+                    if (addNew) {
                         if (Types.isFunction(this.nameInput.nativeElement.focus)) {
                             this.nameInput.nativeElement.focus();
                         }
+                    } else if (edit) {
+                        this.selectTab(0);
+
+                        this.isEditing = true;
                     } else {
                         this.complete();
                     }
@@ -75,5 +92,29 @@ export class FieldWizardComponent implements OnInit {
                 });
         }
     }
+
+    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);
+                });
+        }
+    }
+}

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

@@ -68,11 +68,13 @@ export class FieldComponent implements OnChanges {
                 this.editForm.form.disable();
             }
         }
+    }
 
-        if (changes['schema']) {
-            this.isEditing = false;
+    public toggleEditing() {
+        this.isEditing = !this.isEditing;
 
-            this.selectedTab = 0;
+        if (this.isEditing) {
+            this.editForm.load(this.field.properties);
         }
     }
 
@@ -80,10 +82,6 @@ export class FieldComponent implements OnChanges {
         this.selectedTab = tab;
     }
 
-    public toggleEditing() {
-        this.isEditing = !this.isEditing;
-    }
-
     public cancel() {
         this.isEditing = false;
 

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

@@ -5,8 +5,8 @@
  * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
  */
 
-import { Component, Input } from '@angular/core';
-import { FormGroup } from '@angular/forms';
+import { Component, Input, OnChanges } from '@angular/core';
+import { FormControl, FormGroup } from '@angular/forms';
 
 import { FieldDto } from '@app/shared';
 
@@ -15,7 +15,7 @@ import { FieldDto } from '@app/shared';
     styleUrls: ['field-form-common.component.scss'],
     templateUrl: 'field-form-common.component.html'
 })
-export class FieldFormCommonComponent {
+export class FieldFormCommonComponent implements OnChanges {
     @Input()
     public editForm: FormGroup;
 
@@ -27,4 +27,24 @@ export class FieldFormCommonComponent {
 
     @Input()
     public field: FieldDto;
+
+    public ngOnChanges() {
+        this.editForm.setControl('isRequired',
+            new FormControl(this.field.properties.isRequired));
+
+        this.editForm.setControl('isListField',
+            new FormControl(this.field.properties.isListField));
+
+        this.editForm.setControl('editorUrl',
+            new FormControl(this.field.properties.editorUrl));
+
+        this.editForm.setControl('hints',
+            new FormControl(this.field.properties.hints));
+
+        this.editForm.setControl('placeholder',
+            new FormControl(this.field.properties.placeholder));
+
+        this.editForm.setControl('label',
+            new FormControl(this.field.properties.label));
+    }
 }