Updated packages.

src/Squidex/app-config/webpack.run.prod.js

@@ -68,7 +68,7 @@ module.exports = webpackMerge(runConfig, {
             use: [
                 plugins.MiniCssExtractPlugin.loader,
             {
-                loader: 'css-loader', options: { minimize: true },
+                loader: 'css-loader'
             }, {
                 loader: 'sass-loader'
             }],

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

@@ -84,7 +84,7 @@
                 </ul>
 
                 <div class="float-right">
-                    <button [disabled]="field.isLocked" type="reset" class="btn btn-secondary" (click)="cancel()">Cancel</button>
+                    <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>
@@ -108,7 +108,7 @@
             <span class="nested-field-line-v"></span>
 
             <div [sqxSortModel]="nested" (sqxSorted)="sortFields($event)">
-                <div class="nested-field" *ngFor="let nested of nested; trackBy: trackByField">
+                <div class="nested-field" *ngFor="let nested of nested; trackBy: trackByField.bind(this)">
                     <span class="nested-field-line-h"></span>
     
                     <sqx-field [field]="nested" [schema]="schema" [parent]="field" [patterns]="patterns"></sqx-field>

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

@@ -82,12 +82,6 @@ export class FieldComponent implements OnChanges {
         this.selectedTab = tab;
     }
 
-    public cancel() {
-        this.isEditing = false;
-
-        this.editForm.load(this.field);
-    }
-
     public deleteField() {
         this.schemasState.deleteField(this.schema, this.field).pipe(onErrorResumeNext()).subscribe();
     }
@@ -117,7 +111,7 @@ export class FieldComponent implements OnChanges {
     }
 
     public trackByField(index: number, field: NestedFieldDto) {
-        return field.fieldId;
+        return field.fieldId + this.schema.id;
     }
 
     public save() {

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

@@ -1,5 +1,5 @@
 <div [formGroup]="editForm">
-    <div class="form-group row" *ngIf="showName">
+    <div class="form-group row">
         <label class="col-3 col-form-label" for="{{field.fieldId}}_fieldName">Name</label>
 
         <div class="col-6">

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

@@ -5,7 +5,7 @@
  * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
  */
 
-import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 import { FormControl, FormGroup } from '@angular/forms';
 
 import { FieldDto } from '@app/shared';
@@ -15,16 +15,13 @@ import { FieldDto } from '@app/shared';
     styleUrls: ['field-form-common.component.scss'],
     templateUrl: 'field-form-common.component.html'
 })
-export class FieldFormCommonComponent implements OnChanges, OnInit {
+export class FieldFormCommonComponent implements OnInit {
     @Input()
     public editForm: FormGroup;
 
     @Input()
     public editFormSubmitted = false;
 
-    @Input()
-    public showName = true;
-
     @Input()
     public field: FieldDto;
 
@@ -47,10 +44,4 @@ export class FieldFormCommonComponent implements OnChanges, OnInit {
         this.editForm.setControl('label',
             new FormControl(this.field.properties.label));
     }
-
-    public ngOnChanges(changes: SimpleChanges) {
-        if (changes['field']) {
-            this.editForm.reset(this.field.properties);
-        }
-    }
 }

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

@@ -70,7 +70,7 @@
             <div class="schemas"
                 [sqxSortModel]="schema.fields"
                 (sqxSorted)="sortFields($event)">
-                <div *ngFor="let field of schema.fields; trackBy: trackByField">
+                <div *ngFor="let field of schema.fields; trackBy: trackByField.bind(this)">
                     <sqx-field [field]="field" [schema]="schema" [patterns]="patterns"></sqx-field>
                 </div>
             </div>

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

@@ -95,7 +95,8 @@ export class SchemaPageComponent implements OnDestroy, OnInit {
     }
 
     public trackByField(index: number, field: FieldDto) {
-        return field.fieldId;
+        const a = this;
+        return field.fieldId + a.schema.id;
     }
 
     public deleteSchema() {

src/Squidex/app/framework/angular/modals/modal-target.directive.ts

@@ -106,88 +106,80 @@ export class ModalTargetDirective implements AfterViewInit, OnDestroy, OnInit {
 
         switch (this.position) {
             case POSITION_LEFTTOP:
-            case POSITION_RIGHTTOP:
-                {
-                    t = targetRect.top;
-                    break;
-                }
+            case POSITION_RIGHTTOP: {
+                t = targetRect.top;
+                break;
+            }
             case POSITION_LEFTBOTTOM:
-            case POSITION_RIGHTBOTTOM:
-                {
-                    t = targetRect.bottom - modalRect.height;
-                    break;
-                }
+            case POSITION_RIGHTBOTTOM: {
+                t = targetRect.bottom - modalRect.height;
+                break;
+            }
             case POSITION_BOTTOMLEFT:
-            case POSITION_BOTTOMRIGHT:
-                {
-                    t = targetRect.bottom + this.offset;
+            case POSITION_BOTTOMRIGHT: {
+                t = targetRect.bottom + this.offset;
 
-                    if (fix && t + modalRect.height > viewportHeight) {
-                        const candidate = targetRect.top - modalRect.height - this.offset;
+                if (fix && t + modalRect.height > viewportHeight) {
+                    const candidate = targetRect.top - modalRect.height - this.offset;
 
-                        if (candidate > 0) {
-                            t = candidate;
-                        }
+                    if (candidate > 0) {
+                        t = candidate;
                     }
-                    break;
                 }
+                break;
+            }
             case POSITION_TOPLEFT:
-            case POSITION_TOPRIGHT:
-                {
-                    t = targetRect.top - modalRect.height - this.offset;
+            case POSITION_TOPRIGHT: {
+                t = targetRect.top - modalRect.height - this.offset;
 
-                    if (fix && t < 0) {
-                        const candidate = targetRect.bottom + this.offset;
+                if (fix && t < 0) {
+                    const candidate = targetRect.bottom + this.offset;
 
-                        if (candidate + modalRect.height > viewportHeight) {
-                            t = candidate;
-                        }
+                    if (candidate + modalRect.height > viewportHeight) {
+                        t = candidate;
                     }
-                    break;
                 }
+                break;
+            }
         }
 
         switch (this.position) {
             case POSITION_TOPLEFT:
-            case POSITION_BOTTOMLEFT:
-                {
-                    l = targetRect.left;
-                    break;
-                }
+            case POSITION_BOTTOMLEFT: {
+                l = targetRect.left;
+                break;
+            }
             case POSITION_TOPRIGHT:
-            case POSITION_BOTTOMRIGHT:
-                {
-                    l = targetRect.right - modalRect.width;
-                    break;
-                }
+            case POSITION_BOTTOMRIGHT: {
+                l = targetRect.right - modalRect.width;
+                break;
+            }
             case POSITION_RIGHTTOP:
-            case POSITION_RIGHTBOTTOM:
-                {
-                    l = targetRect.right + this.offset;
+            case POSITION_RIGHTBOTTOM: {
+                l = targetRect.right + this.offset;
 
-                    if (fix && l + modalRect.width > viewportWidth) {
-                        const candidate = targetRect.right - modalRect.width - this.offset;
+                if (fix && l + modalRect.width > viewportWidth) {
+                    const candidate = targetRect.right - modalRect.width - this.offset;
 
-                        if (candidate > 0) {
-                            l = candidate;
-                        }
+                    if (candidate > 0) {
+                        l = candidate;
                     }
-                    break;
                 }
+                break;
+            }
             case POSITION_LEFTTOP:
-            case POSITION_LEFTBOTTOM:
-                {
-                    l = targetRect.left - modalRect.width - this.offset;
+            case POSITION_LEFTBOTTOM: {
+                l = targetRect.left - modalRect.width - this.offset;
 
-                    if (this.autoPosition && l < 0) {
-                        const candidate = targetRect.right + this.offset;
+                if (this.autoPosition && l < 0) {
+                    const candidate = targetRect.right + this.offset;
 
-                        if (candidate + modalRect.width > viewportWidth) {
-                            l = candidate;
-                        }
+                    if (candidate + modalRect.width > viewportWidth) {
+                        l = candidate;
                     }
-                    break;
                 }
+                break;
+            }
         }
 
         if (this.position === POSITION_FULL) {

src/Squidex/package.json

@@ -51,7 +51,7 @@
     "@angular/compiler-cli": "6.1.7",
     "@ngtools/webpack": "6.2.1",
     "@types/core-js": "2.5.0",
-    "@types/jasmine": "2.8.8",
+    "@types/jasmine": "3.3.4",
     "@types/mousetrap": "1.6",
     "@types/node": "10.9.4",
     "@types/react": "16.4.13",
@@ -63,42 +63,42 @@
     "babel-core": "6.26.3",
     "codelyzer": "4.5.0",
     "cpx": "1.5.0",
-    "css-loader": "1.0.0",
-    "file-loader": "2.0.0",
+    "css-loader": "2.0.1",
+    "file-loader": "3.0.1",
     "html-loader": "0.5.5",
     "html-webpack-plugin": "3.2.0",
     "ignore-loader": "0.1.2",
     "istanbul-instrumenter-loader": "0.2.0",
-    "jasmine-core": "3.2.1",
-    "karma": "3.1.1",
+    "jasmine-core": "3.3.0",
+    "karma": "3.1.4",
     "karma-chrome-launcher": "2.2.0",
-    "karma-cli": "1.0.1",
+    "karma-cli": "2.0.0",
     "karma-coverage": "1.1.2",
     "karma-htmlfile-reporter": "0.3.7",
-    "karma-jasmine": "1.1.2",
-    "karma-jasmine-html-reporter": "1.3.1",
+    "karma-jasmine": "2.0.1",
+    "karma-jasmine-html-reporter": "1.4.0",
     "karma-mocha-reporter": "2.2.5",
     "karma-sourcemap-loader": "0.3.7",
     "karma-webpack": "3.0.5",
-    "mini-css-extract-plugin": "0.4.4",
-    "node-sass": "4.9.4",
+    "mini-css-extract-plugin": "0.5.0",
+    "node-sass": "4.11.0",
     "optimize-css-assets-webpack-plugin": "5.0.1",
-    "raw-loader": "0.5.1",
+    "raw-loader": "1.0.0",
     "rimraf": "2.6.2",
-    "rxjs-tslint": "0.1.5",
+    "rxjs-tslint": "0.1.6",
     "sass-lint": "1.12.1",
     "sass-loader": "7.1.0",
     "style-loader": "0.23.1",
     "tsconfig-paths-webpack-plugin": "3.2.0",
-    "tslint": "5.11.0",
+    "tslint": "5.12.0",
     "tslint-webpack-plugin": "1.3.0",
     "typemoq": "2.1.0",
     "typescript": "2.9.1",
     "uglifyjs-webpack-plugin": "2.0.1",
     "underscore": "1.9.1",
-    "webpack": "4.23.1",
+    "webpack": "4.28.1",
     "webpack-cli": "3.1.2",
     "webpack-dev-server": "3.1.10",
-    "webpack-merge": "4.1.4"
+    "webpack-merge": "4.1.5"
   }
 }