Last tweaks.

src/Squidex/app/features/administration/pages/users/users-page.component.html

@@ -49,7 +49,7 @@
             <div sqxIgnoreScrollbar>
                 <table class="table table-items table-fixed">
                     <tbody>
-                        <ng-template ngFor let-user [ngForOf]="usersState.users | async">
+                        <ng-template ngFor let-user [ngForOf]="usersState.users | async" [ngForTrackBy]="trackByUser">
                             <tr [routerLink]="user.id" routerLinkActive="active">
                                 <td class="cell-user">
                                     <img class="user-picture" [attr.title]="user.name" [attr.src]="user | sqxUserDtoPicture" />
@@ -81,7 +81,9 @@
             </div>
         </div>
 
-        <sqx-pager [pager]="usersState.usersPager | async" (prev)="goPrev()" (next)="goNext()"></sqx-pager>
+        <div class="grid-footer">
+            <sqx-pager [pager]="usersState.usersPager | async" (prev)="goPrev()" (next)="goNext()"></sqx-pager>
+        </div>
     </ng-container>
 </sqx-panel>
 

src/Squidex/app/features/administration/pages/users/users-page.component.ts

@@ -55,5 +55,9 @@ export class UsersPageComponent implements OnInit {
     public goNext() {
         this.usersState.goNext().subscribe();
     }
+
+    public trackByUser(index: number, user: UserDto) {
+        return user.id;
+    }
 }
 

src/Squidex/app/features/content/pages/contents/contents-page.component.html

@@ -1,6 +1,6 @@
 <sqx-title message="{app} | {schema} | Contents" parameter1="app" parameter2="schema" [value1]="ctx.appName" [value2]="schema?.displayName"></sqx-title>
 
-<sqx-panel [desiredWidth]="isReadOnly ? '40rem' : '60rem'">
+<sqx-panel [desiredWidth]="isReadOnly ? '40rem' : '60rem'" contentClass="grid">
     <ng-container title>
         <ng-container *ngIf="!isReadOnly && !isArchive">
             Contents
@@ -58,93 +58,93 @@
     </ng-container>
 
     <ng-container content>
-        <div class="grid">
-            <div class="grid-header">
-                <table class="table table-items table-fixed" *ngIf="contentItems">
-                    <thead>
-                        <tr>
-                            <th class="cell-select" *ngIf="!isReadOnly">
-                                <input type="checkbox" class="form-control" [ngModel]="isAllSelected" (ngModelChange)="selectAll($event)" />
-                            </th>
-                            <th class="cell-auto" *ngFor="let field of contentFields">
-                                <span class="field">{{field.displayName}}</span>
-                            </th>
-                            <th class="cell-time">
-                                Updated
-                            </th>
-                            <th class="cell-user">
-                                By
-                            </th>
-                            <th class="cell-actions" *ngIf="!isReadOnly">
-                                Actions
-                            </th>
-                        </tr>
-                    </thead>
-                </table>
-            </div>
+        <div class="grid-header">
+            <table class="table table-items table-fixed" *ngIf="contentItems">
+                <thead>
+                    <tr>
+                        <th class="cell-select" *ngIf="!isReadOnly">
+                            <input type="checkbox" class="form-control" [ngModel]="isAllSelected" (ngModelChange)="selectAll($event)" />
+                        </th>
+                        <th class="cell-auto" *ngFor="let field of contentFields">
+                            <span class="field">{{field.displayName}}</span>
+                        </th>
+                        <th class="cell-time">
+                            Updated
+                        </th>
+                        <th class="cell-user">
+                            By
+                        </th>
+                        <th class="cell-actions" *ngIf="!isReadOnly">
+                            Actions
+                        </th>
+                    </tr>
+                </thead>
+            </table>
+        </div>
 
-            <div class="selection" *ngIf="selectionCount > 0">
-                {{selectionCount}} items selected:&nbsp;&nbsp;
-
-                <button class="btn btn-secondary" (click)="publishSelected()" *ngIf="canPublish">
-                    Publish
-                </button>
-                
-                <button class="btn btn-secondary" (click)="unpublishSelected()" *ngIf="canUnpublish">
-                    Unpublish
-                </button>
-                
-                <button class="btn btn-secondary" (click)="archiveSelected()" *ngIf="!isArchive">
-                    Archive
-                </button>
-                
-                <button class="btn btn-secondary" (click)="restoreSelected()" *ngIf="isArchive">
-                    Restore
-                </button>
-                
-                <button class="btn btn-danger"
-                    (sqxConfirmClick)="deleteSelected()"
-                    confirmTitle="Delete content" 
-                    confirmText="Do you really want to delete the selected content items?">
-                    Delete
-                </button>
-            </div>
+        <div class="selection" *ngIf="selectionCount > 0">
+            {{selectionCount}} items selected:&nbsp;&nbsp;
+
+            <button class="btn btn-secondary" (click)="publishSelected()" *ngIf="canPublish">
+                Publish
+            </button>
+            
+            <button class="btn btn-secondary" (click)="unpublishSelected()" *ngIf="canUnpublish">
+                Unpublish
+            </button>
+            
+            <button class="btn btn-secondary" (click)="archiveSelected()" *ngIf="!isArchive">
+                Archive
+            </button>
+            
+            <button class="btn btn-secondary" (click)="restoreSelected()" *ngIf="isArchive">
+                Restore
+            </button>
+            
+            <button class="btn btn-danger"
+                (sqxConfirmClick)="deleteSelected()"
+                confirmTitle="Delete content" 
+                confirmText="Do you really want to delete the selected content items?">
+                Delete
+            </button>
+        </div>
 
-            <div class="grid-content">
-                <div sqxIgnoreScrollbar>
-                    <table class="table table-items table-fixed" *ngIf="contentItems" >
-                        <tbody *ngIf="!isReadOnly">
-                            <ng-template ngFor let-content [ngForOf]="contentItems" [ngForTrackBy]="trackBy">
-                                <tr [sqxContent]="content" [routerLink]="[content.id]" routerLinkActive="active"
-                                    [language]="languageSelected"
-                                    [schemaFields]="contentFields"
-                                    [schema]="schema"
-                                    [selected]="isItemSelected(content)"
-                                    (selectedChange)="selectItem(content, $event)"
-                                    (unpublishing)="unpublishContent(content)"
-                                    (publishing)="publishContent(content)"
-                                    (archiving)="archiveContent(content)"
-                                    (restoring)="restoreContent(content)"
-                                    (deleting)="deleteContent(content)"
-                                    (saved)="onContentSaved(content, $event)"></tr>
-                                <tr class="spacer"></tr>
-                            </ng-template>
-                        </tbody>
-
-                        <tbody *ngIf="isReadOnly">
-                            <ng-template ngFor let-content [ngForOf]="contentItems">
-                                <tr [sqxContent]="content" dnd-draggable [dragData]="dropData(content)"
-                                    [language]="languageSelected"
-                                    [schemaFields]="contentFields"
-                                    [schema]="schema" 
-                                    isReadOnly="true"></tr>
-                                <tr class="spacer"></tr>
-                            </ng-template>
-                        </tbody>
-                    </table>
-                </div>
+        <div class="grid-content">
+            <div sqxIgnoreScrollbar>
+                <table class="table table-items table-fixed" *ngIf="contentItems" >
+                    <tbody *ngIf="!isReadOnly">
+                        <ng-template ngFor let-content [ngForOf]="contentItems" [ngForTrackBy]="trackByContent">
+                            <tr [sqxContent]="content" [routerLink]="[content.id]" routerLinkActive="active"
+                                [language]="languageSelected"
+                                [schemaFields]="contentFields"
+                                [schema]="schema"
+                                [selected]="isItemSelected(content)"
+                                (selectedChange)="selectItem(content, $event)"
+                                (unpublishing)="unpublishContent(content)"
+                                (publishing)="publishContent(content)"
+                                (archiving)="archiveContent(content)"
+                                (restoring)="restoreContent(content)"
+                                (deleting)="deleteContent(content)"
+                                (saved)="onContentSaved(content, $event)"></tr>
+                            <tr class="spacer"></tr>
+                        </ng-template>
+                    </tbody>
+
+                    <tbody *ngIf="isReadOnly">
+                        <ng-template ngFor let-content [ngForOf]="contentItems">
+                            <tr [sqxContent]="content" dnd-draggable [dragData]="dropData(content)"
+                                [language]="languageSelected"
+                                [schemaFields]="contentFields"
+                                [schema]="schema" 
+                                isReadOnly="true"></tr>
+                            <tr class="spacer"></tr>
+                        </ng-template>
+                    </tbody>
+                </table>
             </div>
+        </div>
 
+        <div class="grid-footer">
             <sqx-pager [pager]="contentsPager"></sqx-pager>
         </div>
     </ng-container>

src/Squidex/app/features/content/pages/contents/contents-page.component.ts

@@ -361,7 +361,7 @@ export class ContentsPageComponent implements OnDestroy, OnInit {
         this.ctx.bus.emit(new ContentRemoved(content));
     }
 
-    public trackBy(content: ContentDto): string {
+    public trackByContent(content: ContentDto): string {
         return content.id;
     }
 

src/Squidex/app/features/content/pages/contents/search-form.component.ts

@@ -5,13 +5,14 @@
  * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
  */
 
-import { Component, EventEmitter, Input, OnChanges, Output } from '@angular/core';
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, Output } from '@angular/core';
 import { FormBuilder } from '@angular/forms';
 
 @Component({
     selector: 'sqx-search-form',
     styleUrls: ['./search-form.component.scss'],
-    templateUrl: './search-form.component.html'
+    templateUrl: './search-form.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class SearchFormComponent implements OnChanges {
     private queryValue = '';

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

@@ -51,8 +51,16 @@
     </ng-container>
 
     <ng-container content>
+        <div class="table-items-row table-items-row-empty" *ngIf="schema && schema.fields.length === 0">
+            No field created yet.
+            
+            <button class="btn btn-success ml-2" (click)="addFieldDialog.show()">
+                <i class="icon icon-plus"></i> Add Field
+            </button>
+        </div>
+
         <div dnd-sortable-container [sortableData]="schema.fields">
-            <div *ngFor="let field of schema.fields; let i = index;" dnd-sortable [sortableIndex]="i" (sqxSorted)="sortFields($event)">
+            <div *ngFor="let field of schema.fields; let i = index; trackBy: trackByField" dnd-sortable [sortableIndex]="i" (sqxSorted)="sortFields($event)">
                 <sqx-field [field]="field" [schema]="schema" [patterns]="patterns"></sqx-field>
             </div>
     

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

@@ -136,6 +136,10 @@ export class SchemaPageComponent implements OnDestroy, OnInit {
         this.schemaExport = result;
     }
 
+    public trackByField(index: number, field: FieldDto) {
+        return field.fieldId;
+    }
+
     private back() {
         this.router.navigate(['../'], { relativeTo: this.route });
     }

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

@@ -1,5 +1,5 @@
 <form [formGroup]="createForm.form" (ngSubmit)="createSchema()">     
-    <sqx-modal-dialog (close)="complete()" [large]="false">
+    <sqx-modal-dialog (close)="cancel()" [large]="false">
         <ng-container title>
             <ng-container *ngIf="import; else noImport">
                 Clone Schema
@@ -27,12 +27,7 @@
                 </small>
             </div>
 
-            <div class="form-group clearfix">
-                <button type="reset" class="float-left btn btn-secondary" (click)="complete()">Cancel</button>
-                <button type="submit" class="float-right btn btn-success">Create</button>
-            </div>
-        
-            <div>
+            <div class="form-group">
                 <button class="btn btn-sm btn-link" (click)="toggleImport()" [class.hidden]="showImport">
                     Import schema
                 </button>
@@ -43,5 +38,10 @@
                 <sqx-json-editor *ngIf="showImport" formControlName="import"></sqx-json-editor>
             </div>
         </ng-container>
+
+        <ng-container footer>
+            <button type="reset" class="float-left btn btn-secondary" (click)="cancel()">Cancel</button>
+            <button type="submit" class="float-right btn btn-success">Create</button>
+        </ng-container>
     </sqx-modal-dialog>
 </form>

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

@@ -12,7 +12,8 @@ import {
     ApiUrlConfig,
     AppsState,
     CreateSchemaForm,
-    SchemasState
+    SchemasState,
+    SchemaDto
 } from '@app/shared';
 
 @Component({
@@ -22,7 +23,10 @@ import {
 })
 export class SchemaFormComponent implements OnInit {
     @Output()
-    public completed = new EventEmitter();
+    public created = new EventEmitter<SchemaDto>();
+
+    @Output()
+    public cancelled = new EventEmitter();
 
     @Input()
     public import: any;
@@ -51,8 +55,12 @@ export class SchemaFormComponent implements OnInit {
         return false;
     }
 
-    public complete() {
-        this.completed.emit();
+    public complete(schema: SchemaDto) {
+        this.created.emit(schema);
+    }
+
+    public cancel() {
+        this.cancelled.emit();
     }
 
     public createSchema() {
@@ -64,7 +72,7 @@ export class SchemaFormComponent implements OnInit {
 
             this.schemasState.create(schemaDto)
                 .subscribe(dto => {
-                    this.complete();
+                    this.complete(dto);
                 }, error => {
                     this.createForm.submitFailed(error);
                 });

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

@@ -9,7 +9,7 @@
         <sqx-shortcut keys="ctrl+shift+g" (trigger)="addSchemaDialog.show()"></sqx-shortcut>
         <sqx-shortcut keys="ctrl+shift+f" (trigger)="inputFind.focus()"></sqx-shortcut>
 
-        <button class="btn btn-success subheader-button" (click)="createSchema(null)" title="New Schema (CTRL + SHIFT + G)">
+        <button class="btn btn-success subheader-button" (click)="createSchema()" title="New Schema (CTRL + SHIFT + G)">
             <i class="icon-plus"></i>          
         </button>
         
@@ -46,8 +46,9 @@
 </sqx-panel>
 
 <ng-container *sqxModalView="addSchemaDialog;onRoot:true">
-    <sqx-schema-form [import]="import" 
-        (completed)="addSchemaDialog.hide()">
+    <sqx-schema-form [import]="import"
+        (cancelled)="addSchemaDialog.hide()"
+        (created)="onSchemaCreated($event)">
     </sqx-schema-form>
 </ng-container>
 

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

@@ -7,7 +7,7 @@
 
 import { Component, OnDestroy, OnInit } from '@angular/core';
 import { FormControl } from '@angular/forms';
-import { ActivatedRoute } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
 import { Subscription } from 'rxjs';
 
 import {
@@ -48,6 +48,7 @@ export class SchemasPageComponent implements OnDestroy, OnInit {
         public readonly appsState: AppsState,
         private readonly messageBus: MessageBus,
         private readonly route: ActivatedRoute,
+        private readonly router: Router,
         private readonly schemasState: SchemasState
     ) {
     }
@@ -75,7 +76,13 @@ export class SchemasPageComponent implements OnDestroy, OnInit {
         this.schemasState.loadSchemas().subscribe();
     }
 
-    public createSchema(importing: any) {
+    public onSchemaCreated(schema: SchemaDto) {
+        this.router.navigate([schema.name], { relativeTo: this.route });
+
+        this.addSchemaDialog.hide();
+    }
+
+    public createSchema(importing: any = null) {
         this.import = importing;
 
         this.addSchemaDialog.show();

src/Squidex/app/framework/angular/pager.component.html

@@ -1,4 +1,4 @@
-<div class="grid-footer clearfix" *ngIf="pager && pager.numberOfItems > 0 && (!hideWhenButtonsDisabled || pager.canGoPrev || pager.canGoNext)">
+<div class="clearfix" *ngIf="pager && pager.numberOfItems > 0 && (!hideWhenButtonsDisabled || pager.canGoPrev || pager.canGoNext)">
     <div class="float-right pagination">
         <span class="pagination-text">{{pager.itemFirst}}-{{pager.itemLast}} of {{pager.numberOfItems}}</span>
 

src/Squidex/app/shared/components/assets-list.component.html

@@ -21,7 +21,7 @@
     </sqx-asset>
 
     <ng-container *ngIf="state.assets | async; let assets">
-        <sqx-asset class="{{assetClass}}" *ngFor="let asset of assets" [asset]="asset" 
+        <sqx-asset class="{{assetClass}}" *ngFor="let asset of assets; trackBy: trackByAsset" [asset]="asset" 
             [isDisabled]="isDisabled"
             [isSelectable]="selectedIds"
             [isSelected]="isSelected(asset)"

src/Squidex/app/shared/components/assets-list.component.ts

@@ -68,6 +68,10 @@ export class AssetsListComponent {
         this.state.goPrev().subscribe();
     }
 
+    public trackByAsset(index: number, asset: AssetDto) {
+        return asset.id;
+    }
+
     public isSelected(asset: AssetDto) {
         return this.selectedIds && this.selectedIds[asset.id];
     }