From 7eb980fc870db4907387701e840338019349d9aa Mon Sep 17 00:00:00 2001
From: Sebastian Stehle <sebastian@squidex.io>
Date: Fri, 22 Feb 2019 22:10:57 +0100
Subject: [PATCH] Async pipe improvements.

---
 .../pages/restore/restore-page.component.html |  64 +++++-----
 .../pages/users/user-page.component.html      |  12 +-
 .../pages/users/users-page.component.html     |  16 +--
 .../apps/pages/apps-page.component.html       |   8 +-
 .../pages/assets-filters-page.component.html  |   5 +-
 .../pages/content/content-page.component.html |   1 +
 .../contents-filters-page.component.html      |   1 +
 .../shared/assets-editor.component.html       |   4 +-
 .../shared/content-status.component.html      |  14 +--
 .../shared/content-status.component.ts        |  10 +-
 .../shared/contents-selector.component.html   |   4 +-
 .../shared/due-time-selector.component.html   |  50 ++++----
 .../pages/rules/rule-element.component.html   |   1 +
 .../pages/rules/rules-page.component.html     |   5 +-
 .../pages/schemas/schema-form.component.html  |   1 +
 .../pages/backups/backups-page.component.html | 116 +++++++++---------
 .../pages/clients/client.component.html       |   6 +-
 .../languages/languages-page.component.html   |  14 +--
 .../pages/plans/plans-page.component.html     | 100 ++++++++-------
 .../pages/roles/roles-page.component.html     |   4 +-
 .../angular/forms/autocomplete.component.html |   1 +
 .../angular/forms/stars.component.html        |  12 +-
 .../components/markdown-editor.component.html |   4 +-
 .../components/rich-editor.component.html     |   4 +-
 24 files changed, 238 insertions(+), 219 deletions(-)

diff --git a/src/Squidex/app/features/administration/pages/restore/restore-page.component.html b/src/Squidex/app/features/administration/pages/restore/restore-page.component.html
index f6d4adb6c..9097e9524 100644
--- a/src/Squidex/app/features/administration/pages/restore/restore-page.component.html
+++ b/src/Squidex/app/features/administration/pages/restore/restore-page.component.html
@@ -6,48 +6,46 @@
     </ng-container>
 
     <ng-container content>
-        <ng-container *ngIf="restoreJob; let job">
-            <div class="card section">
-                <div class="card-header">
-                    <div class="row no-gutters">
-                        <div class="col-auto pr-2">
-                            <div *ngIf="job.status === 'Started'" class="restore-status restore-status-pending spin">
-                                <i class="icon-hour-glass"></i>
-                            </div>
-                            <div *ngIf="job.status === 'Failed'" class="restore-status restore-status-failed">
-                                <i class="icon-exclamation"></i>
-                            </div>
-                            <div *ngIf="job.status === 'Completed'" class="restore-status restore-status-success">
-                                <i class="icon-checkmark"></i>
-                            </div>
+        <div class="card section" *ngIf="restoreJob; let job">
+            <div class="card-header">
+                <div class="row no-gutters">
+                    <div class="col-auto pr-2">
+                        <div *ngIf="job.status === 'Started'" class="restore-status restore-status-pending spin">
+                            <i class="icon-hour-glass"></i>
                         </div>
-                            
-                        <div class="col">
-                            <h3>Last Restore Operation</h3>
+                        <div *ngIf="job.status === 'Failed'" class="restore-status restore-status-failed">
+                            <i class="icon-exclamation"></i>
                         </div>
-
-                        <div class="col text-right restore-url">
-                            {{job.url}}
+                        <div *ngIf="job.status === 'Completed'" class="restore-status restore-status-success">
+                            <i class="icon-checkmark"></i>
                         </div>
                     </div>
-                </div>
-                <div class="card-body">
-                    <div *ngFor="let row of job.log">
-                        {{row}}
+                        
+                    <div class="col">
+                        <h3>Last Restore Operation</h3>
+                    </div>
+
+                    <div class="col text-right restore-url">
+                        {{job.url}}
                     </div>
                 </div>
-                <div class="card-footer text-muted">
-                    <div class="row">
-                        <div class="col">
-                            Started: {{job.started | sqxISODate}}
-                        </div>
-                        <div class="col text-right" *ngIf="job.stopped">
-                            Stopped: {{job.stopped | sqxISODate}}
-                        </div>
+            </div>
+            <div class="card-body">
+                <div *ngFor="let row of job.log">
+                    {{row}}
+                </div>
+            </div>
+            <div class="card-footer text-muted">
+                <div class="row">
+                    <div class="col">
+                        Started: {{job.started | sqxISODate}}
+                    </div>
+                    <div class="col text-right" *ngIf="job.stopped">
+                        Stopped: {{job.stopped | sqxISODate}}
                     </div>
                 </div>
             </div>
-        </ng-container>
+        </div>
         
         <div class="table-items-row">
             <form [formGroup]="restoreForm.form" (ngSubmit)="restore()">
diff --git a/src/Squidex/app/features/administration/pages/users/user-page.component.html b/src/Squidex/app/features/administration/pages/users/user-page.component.html
index 0c19b2998..3f8918635 100644
--- a/src/Squidex/app/features/administration/pages/users/user-page.component.html
+++ b/src/Squidex/app/features/administration/pages/users/user-page.component.html
@@ -16,13 +16,11 @@
 
         <ng-container menu>
             <ng-container *ngIf="usersState.selectedUser | async; else noUserMenu">
-                <ng-container>
-                    <button type="submit" class="btn btn-primary" title="CTRL + S">
-                        Save
-                    </button>
-                    
-                    <sqx-shortcut keys="ctrl+s" (trigger)="save()"></sqx-shortcut>
-                </ng-container>
+                <button type="submit" class="btn btn-primary" title="CTRL + S">
+                    Save
+                </button>
+                
+                <sqx-shortcut keys="ctrl+s" (trigger)="save()"></sqx-shortcut>
             </ng-container>
 
             <ng-template #noUserMenu>
diff --git a/src/Squidex/app/features/administration/pages/users/users-page.component.html b/src/Squidex/app/features/administration/pages/users/users-page.component.html
index dde3ab83c..a65cdab0e 100644
--- a/src/Squidex/app/features/administration/pages/users/users-page.component.html
+++ b/src/Squidex/app/features/administration/pages/users/users-page.component.html
@@ -47,8 +47,8 @@
         
         <div class="grid-content">
             <div sqxIgnoreScrollbar>
-                <table class="table table-items table-fixed">
-                    <tbody *ngFor="let userInfo of usersState.users | async; trackBy: trackByUser">
+                <table class="table table-items table-fixed" *ngIf="usersState.users | async; let users">
+                    <tbody *ngFor="let userInfo of users; trackBy: trackByUser">
                         <tr [routerLink]="userInfo.user.id" routerLinkActive="active">
                             <td class="cell-user">
                                 <img class="user-picture" title="{{userInfo.user.name}}" [attr.src]="userInfo.user | sqxUserDtoPicture" />
@@ -60,7 +60,7 @@
                                 <span class="user-email table-cell">{{userInfo.user.email}}</span>
                             </td>
                             <td class="cell-actions">
-                                <ng-container *ngIf="!userInfo.isCurrentUser">
+                                <ng-container *ngIf="!userInfo.isCurrentUser; else self">
                                     <button type="button" class="btn btn-text" (click)="lock(userInfo.user)" *ngIf="!userInfo.user.isLocked" title="Lock User">
                                         <i class="icon icon-unlocked"></i>
                                     </button>
@@ -68,10 +68,12 @@
                                         <i class="icon icon-lock"></i>
                                     </button>
                                 </ng-container>
-
-                                <button *ngIf="userInfo.isCurrentUser" class="btn btn-text invisible">
-                                    &nbsp;
-                                </button>
+                                
+                                <ng-template #self>
+                                    <button class="btn btn-text invisible">
+                                        &nbsp;
+                                    </button>
+                                </ng-template>
                             </td>
                         </tr>
                         <tr class="spacer"></tr>
diff --git a/src/Squidex/app/features/apps/pages/apps-page.component.html b/src/Squidex/app/features/apps/pages/apps-page.component.html
index 6bfb9fa97..3a9d658e9 100644
--- a/src/Squidex/app/features/apps/pages/apps-page.component.html
+++ b/src/Squidex/app/features/apps/pages/apps-page.component.html
@@ -100,9 +100,13 @@
 </ng-container>
 
 <ng-container *sqxModalView="onboardingDialog;onRoot:true;closeAuto:false">
-    <sqx-onboarding-dialog (closed)="onboardingDialog.hide()"></sqx-onboarding-dialog>
+    <sqx-onboarding-dialog
+        (closed)="onboardingDialog.hide()">
+    </sqx-onboarding-dialog>
 </ng-container>
 
 <ng-container *sqxModalView="newsDialog;onRoot:true;closeAuto:false">
-    <sqx-news-dialog [features]="newsFeatures" (closed)="newsDialog.hide()"></sqx-news-dialog>
+    <sqx-news-dialog [features]="newsFeatures"
+        (closed)="newsDialog.hide()">
+    </sqx-news-dialog>
 </ng-container>
\ No newline at end of file
diff --git a/src/Squidex/app/features/assets/pages/assets-filters-page.component.html b/src/Squidex/app/features/assets/pages/assets-filters-page.component.html
index 0a32d5244..f6c48e822 100644
--- a/src/Squidex/app/features/assets/pages/assets-filters-page.component.html
+++ b/src/Squidex/app/features/assets/pages/assets-filters-page.component.html
@@ -31,7 +31,10 @@
         <h3>Saved queries</h3>
 
         <a class="sidebar-item" *ngFor="let query of queries.queries | async; trackBy: trackByQuery" (click)="search(query.filter)"
-            [class.active]="isSelectedQuery(query.filter)">                
+            [class.active]="isSelectedQuery(query.filter)">
+            
+            {{query.name}}
+
             <a class="sidebar-item-remove float-right" (click)="queries.remove(query.name)">
                 <i class="icon-close"></i>
             </a>
diff --git a/src/Squidex/app/features/content/pages/content/content-page.component.html b/src/Squidex/app/features/content/pages/content/content-page.component.html
index fd527a854..d27447adc 100644
--- a/src/Squidex/app/features/content/pages/content/content-page.component.html
+++ b/src/Squidex/app/features/content/pages/content/content-page.component.html
@@ -30,6 +30,7 @@
 
                 <sqx-shortcut keys="ctrl+s" (trigger)="saveAndPublish()"></sqx-shortcut>
             </ng-container>
+
             <ng-template #notNew>
                 <div class="dropdown dropdown-options ml-1" *ngIf="content">
                     <sqx-preview-button [schema]="schema" [content]="content"></sqx-preview-button>
diff --git a/src/Squidex/app/features/content/pages/contents/contents-filters-page.component.html b/src/Squidex/app/features/content/pages/contents/contents-filters-page.component.html
index cba1e9f8f..d25caf88e 100644
--- a/src/Squidex/app/features/content/pages/contents/contents-filters-page.component.html
+++ b/src/Squidex/app/features/content/pages/contents/contents-filters-page.component.html
@@ -16,6 +16,7 @@
 
             <a class="sidebar-item" *ngFor="let query of schemaQueries.queries | async; trackByQuery" (click)="search(query.filter)"
                 [class.active]="isSelectedQuery(query.filter)">
+                
                 {{query.name}}
                 
                 <a class="sidebar-item-remove float-right" (click)="schemaQueries.remove(query.name)">
diff --git a/src/Squidex/app/features/content/shared/assets-editor.component.html b/src/Squidex/app/features/content/shared/assets-editor.component.html
index c6b7f33a1..030114620 100644
--- a/src/Squidex/app/features/content/shared/assets-editor.component.html
+++ b/src/Squidex/app/features/content/shared/assets-editor.component.html
@@ -55,5 +55,7 @@
 </div>
 
 <ng-container *sqxModalView="assetsDialog;onRoot:true;closeAuto:false">
-    <sqx-assets-selector (selected)="selectAssets($event)"></sqx-assets-selector>
+    <sqx-assets-selector
+        (selected)="selectAssets($event)">
+    </sqx-assets-selector>
 </ng-container>
\ No newline at end of file
diff --git a/src/Squidex/app/features/content/shared/content-status.component.html b/src/Squidex/app/features/content/shared/content-status.component.html
index 22de0d0b8..b03f43a5b 100644
--- a/src/Squidex/app/features/content/shared/content-status.component.html
+++ b/src/Squidex/app/features/content/shared/content-status.component.html
@@ -1,13 +1,13 @@
-<ng-container *ngIf="!scheduledTo">
-    <span class="content-status content-status-{{displayStatus | lowercase}} mr-1" [class.middle]="alignMiddle" title="{{displayStatus}}" titlePosition="top">
-        <i class="icon-circle"></i>
+<ng-container *ngIf="scheduledTo; else noSchedule">
+    <span class="content-status content-status-{{scheduledTo | lowercase}} mr-1" [class.middle]="alignMiddle" title="{{tooltipText}}" titlePosition="top">
+        <i class="icon-clock"></i>
     </span>
 </ng-container>
 
-<ng-container *ngIf="scheduledTo">
-    <span class="content-status content-status-{{scheduledTo | lowercase}} mr-1" [class.middle]="alignMiddle" title="{{displayStatus}}" titlePosition="top">
-        <i class="icon-clock"></i>
+<ng-template #noSchedule>
+    <span class="content-status content-status-{{displayStatus | lowercase}} mr-1" [class.middle]="alignMiddle" title="{{tooltipText}}" titlePosition="top">
+        <i class="icon-circle"></i>
     </span>
-</ng-container>
+</ng-template>
 
 <span class="content-status-label" *ngIf="showLabel">{{displayStatus}}</span>
\ No newline at end of file
diff --git a/src/Squidex/app/features/content/shared/content-status.component.ts b/src/Squidex/app/features/content/shared/content-status.component.ts
index 527002671..85011a079 100644
--- a/src/Squidex/app/features/content/shared/content-status.component.ts
+++ b/src/Squidex/app/features/content/shared/content-status.component.ts
@@ -34,10 +34,16 @@ export class ContentStatusComponent {
     @Input()
     public alignMiddle = true;
 
-    public get displayStatus() {
+    public get tooltipText() {
         if (this.scheduledAt) {
             return `Will be set to '${this.scheduledTo}' at ${this.scheduledAt.toStringFormat('LLLL')}`;
-        } else if (this.isPending) {
+        } else {
+            return this.status;
+        }
+    }
+
+    public get displayStatus() {
+        if (this.isPending) {
             return 'Pending';
         } else {
             return this.status;
diff --git a/src/Squidex/app/features/content/shared/contents-selector.component.html b/src/Squidex/app/features/content/shared/contents-selector.component.html
index a174dd63f..6b57c596f 100644
--- a/src/Squidex/app/features/content/shared/contents-selector.component.html
+++ b/src/Squidex/app/features/content/shared/contents-selector.component.html
@@ -48,8 +48,8 @@
 
         <div class="grid-content">
             <div sqxIgnoreScrollbar>
-                <table class="table table-items table-fixed">
-                    <tbody *ngFor="let content of contentsState.contents | async; trackBy: trackByContent">
+                <table class="table table-items table-fixed" *ngIf="contentsState.contents | async; let contents">
+                    <tbody *ngFor="let content of contents; trackBy: trackByContent">
                         <tr [sqxContent]="content"
                             [selected]="isItemSelected(content)"
                             (selectedChange)="selectContent(content)"
diff --git a/src/Squidex/app/features/content/shared/due-time-selector.component.html b/src/Squidex/app/features/content/shared/due-time-selector.component.html
index abc199f37..bbcfb622f 100644
--- a/src/Squidex/app/features/content/shared/due-time-selector.component.html
+++ b/src/Squidex/app/features/content/shared/due-time-selector.component.html
@@ -1,30 +1,28 @@
-<ng-container *sqxModalView="dueTimeDialog;onRoot:true">
-    <sqx-modal-dialog (closed)="cancelStatusChange()">
-        <ng-container title>
-            {{dueTimeAction}} content item(s)
-        </ng-container>
+<sqx-modal-dialog *sqxModalView="dueTimeDialog;onRoot:true" (closed)="cancelStatusChange()">
+    <ng-container title>
+        {{dueTimeAction}} content item(s)
+    </ng-container>
 
-        <ng-container content>
-            <div class="form-check">
-                <input class="form-check-input" type="radio" [(ngModel)]="dueTimeMode" value="Immediately" id="immediately">
-                <label class="form-check-label" for="immediately">
-                    {{dueTimeAction}} content item(s) immediately.
-                </label>
-            </div>
+    <ng-container content>
+        <div class="form-check">
+            <input class="form-check-input" type="radio" [(ngModel)]="dueTimeMode" value="Immediately" id="immediately">
+            <label class="form-check-label" for="immediately">
+                {{dueTimeAction}} content item(s) immediately.
+            </label>
+        </div>
 
-            <div class="form-check">
-                <input class="form-check-input" type="radio" [(ngModel)]="dueTimeMode" value="Scheduled" id="scheduled">
-                <label class="form-check-label" for="scheduled">
-                    {{dueTimeAction}} content item(s) at a later point date and time.
-                </label>
-            </div>
+        <div class="form-check">
+            <input class="form-check-input" type="radio" [(ngModel)]="dueTimeMode" value="Scheduled" id="scheduled">
+            <label class="form-check-label" for="scheduled">
+                {{dueTimeAction}} content item(s) at a later point date and time.
+            </label>
+        </div>
 
-            <sqx-date-time-editor [disabled]="dueTimeMode === 'Immediately'" mode="DateTime" hideClear="true" [(ngModel)]="dueTime"></sqx-date-time-editor>
-        </ng-container>
+        <sqx-date-time-editor [disabled]="dueTimeMode === 'Immediately'" mode="DateTime" hideClear="true" [(ngModel)]="dueTime"></sqx-date-time-editor>
+    </ng-container>
 
-        <ng-container footer>
-            <button type="button" class="float-left btn btn-secondary" (click)="cancelStatusChange()">Cancel</button>
-            <button type="button" class="float-right btn btn-primary" [disabled]="dueTimeMode === 'Scheduled' && !dueTime" (click)="confirmStatusChange()" sqxFocusOnInit>Confirm</button>
-        </ng-container>
-    </sqx-modal-dialog>
-</ng-container>
+    <ng-container footer>
+        <button type="button" class="float-left btn btn-secondary" (click)="cancelStatusChange()">Cancel</button>
+        <button type="button" class="float-right btn btn-primary" [disabled]="dueTimeMode === 'Scheduled' && !dueTime" (click)="confirmStatusChange()" sqxFocusOnInit>Confirm</button>
+    </ng-container>
+</sqx-modal-dialog>
diff --git a/src/Squidex/app/features/rules/pages/rules/rule-element.component.html b/src/Squidex/app/features/rules/pages/rules/rule-element.component.html
index 695bdea88..efcc0fb23 100644
--- a/src/Squidex/app/features/rules/pages/rules/rule-element.component.html
+++ b/src/Squidex/app/features/rules/pages/rules/rule-element.component.html
@@ -12,6 +12,7 @@
         </div>
     </div>
 </ng-container>
+
 <ng-template #large>
     <div class="row no-gutters large">
         <div class="col-auto">
diff --git a/src/Squidex/app/features/rules/pages/rules/rules-page.component.html b/src/Squidex/app/features/rules/pages/rules/rules-page.component.html
index 3161d203c..ba7e7a540 100644
--- a/src/Squidex/app/features/rules/pages/rules/rules-page.component.html
+++ b/src/Squidex/app/features/rules/pages/rules/rules-page.component.html
@@ -64,9 +64,12 @@
             </table>
 
             <ng-container *sqxModalView="addRuleDialog;onRoot:true;closeAuto:false">
-                <sqx-rule-wizard [schemas]="schemasState.schemas | async" [rule]="wizardRule" [mode]="wizardMode"
+                <sqx-rule-wizard 
+                    [schemas]="schemasState.schemas | async"
+                    [rule]="wizardRule"
                     [ruleActions]="ruleActions"
                     [ruleTriggers]="ruleTriggers"
+                    [mode]="wizardMode"
                     (completed)="addRuleDialog.hide()">
                 </sqx-rule-wizard>
             </ng-container>
diff --git a/src/Squidex/app/features/schemas/pages/schemas/schema-form.component.html b/src/Squidex/app/features/schemas/pages/schemas/schema-form.component.html
index 509579d6e..13c866d67 100644
--- a/src/Squidex/app/features/schemas/pages/schemas/schema-form.component.html
+++ b/src/Squidex/app/features/schemas/pages/schemas/schema-form.component.html
@@ -4,6 +4,7 @@
             <ng-container *ngIf="import; else noImport">
                 Clone Schema
             </ng-container>
+
             <ng-template #noImport>
                 Create Schema
             </ng-template>
diff --git a/src/Squidex/app/features/settings/pages/backups/backups-page.component.html b/src/Squidex/app/features/settings/pages/backups/backups-page.component.html
index 8a04729f8..2254f8730 100644
--- a/src/Squidex/app/features/settings/pages/backups/backups-page.component.html
+++ b/src/Squidex/app/features/settings/pages/backups/backups-page.component.html
@@ -18,77 +18,75 @@
     </ng-container>
 
     <ng-container content>
-        <ng-container *ngIf="backupsState.isLoaded | async">
+        <ng-container *ngIf="(backupsState.isLoaded | async) && (backupsState.backups | async); let backups">
             <div class="panel-alert panel-alert-danger" *ngIf="backupsState.maxBackupsReached | async">
                 Your have reached the maximum number of backups: 10.
             </div>
 
-            <ng-container *ngIf="backupsState.backups | async; let backups">
-                <div class="table-items-row table-items-row-empty" *ngIf="backups.length === 0">
-                    No backups created yet.
+            <div class="table-items-row table-items-row-empty" *ngIf="backups.length === 0">
+                No backups created yet.
 
-                    <button type="button" class="btn btn-success btn-sm ml-2" (click)="start()">
-                        Start Backup
-                    </button>
-                </div>
-                
-                <div class="table-items-row" *ngFor="let backup of backups; trackBy: trackByBackup">
-                    <div class="row">
-                        <div class="col-auto">
-                            <div *ngIf="backup.status === 'Started'" class="backup-status backup-status-pending spin">
-                                <i class="icon-hour-glass"></i>
-                            </div>
-                            <div *ngIf="backup.status === 'Failed'" class="backup-status backup-status-failed">
-                                <i class="icon-exclamation"></i>
-                            </div>
-                            <div *ngIf="backup.status === 'Completed'" class="backup-status backup-status-success">
-                                <i class="icon-checkmark"></i>
-                            </div>
+                <button type="button" class="btn btn-success btn-sm ml-2" (click)="start()">
+                    Start Backup
+                </button>
+            </div>
+            
+            <div class="table-items-row" *ngFor="let backup of backups; trackBy: trackByBackup">
+                <div class="row">
+                    <div class="col-auto">
+                        <div *ngIf="backup.status === 'Started'" class="backup-status backup-status-pending spin">
+                            <i class="icon-hour-glass"></i>
                         </div>
-                        <div class="col-auto">
-                            <div>
-                                Started:
-                            </div>
-                            <div>
-                                Duration:
-                            </div>
+                        <div *ngIf="backup.status === 'Failed'" class="backup-status backup-status-failed">
+                            <i class="icon-exclamation"></i>
                         </div>
-                        <div class="col-auto">
-                            <div>
-                                {{backup.started | sqxFromNow}}
-                            </div>
-                            <div *ngIf="backup.stopped">
-                                {{backup | sqxBackupDuration}}
-                            </div>
+                        <div *ngIf="backup.status === 'Completed'" class="backup-status backup-status-success">
+                            <i class="icon-checkmark"></i>
                         </div>
-                        <div class="col">
-                            <div>
-                                <span title="Archived events">
-                                    Events: <strong class="backup-progress">{{backup.handledEvents | sqxKNumber}}</strong>
-                                </span>, 
-                                <span title="Archived assets">
-                                    Assets: <strong class="backup-progress">{{backup.handledAssets | sqxKNumber}}</strong> 
-                                </span>
-                            </div>
-                            <div *ngIf="backup.stopped && !backup.isFailed">
-                                Download:
-
-                                <a href="{{backup | sqxBackupDownloadUrl}}" sqxExternalLink="noicon">
-                                    Ready <i class="icon-external-link"></i>
-                                </a>
-                            </div>
+                    </div>
+                    <div class="col-auto">
+                        <div>
+                            Started:
+                        </div>
+                        <div>
+                            Duration:
+                        </div>
+                    </div>
+                    <div class="col-auto">
+                        <div>
+                            {{backup.started | sqxFromNow}}
                         </div>
-                        <div class="col-auto">
-                            <button type="button" class="btn btn-text-danger" 
-                                (sqxConfirmClick)="delete(backup)" 
-                                confirmTitle="Delete backup"
-                                confirmText="Do you really want to delete the backup?">
-                                <i class="icon-bin2"></i>
-                            </button>
+                        <div *ngIf="backup.stopped">
+                            {{backup | sqxBackupDuration}}
                         </div>
                     </div>
+                    <div class="col">
+                        <div>
+                            <span title="Archived events">
+                                Events: <strong class="backup-progress">{{backup.handledEvents | sqxKNumber}}</strong>
+                            </span>, 
+                            <span title="Archived assets">
+                                Assets: <strong class="backup-progress">{{backup.handledAssets | sqxKNumber}}</strong> 
+                            </span>
+                        </div>
+                        <div *ngIf="backup.stopped && !backup.isFailed">
+                            Download:
+
+                            <a href="{{backup | sqxBackupDownloadUrl}}" sqxExternalLink="noicon">
+                                Ready <i class="icon-external-link"></i>
+                            </a>
+                        </div>
+                    </div>
+                    <div class="col-auto">
+                        <button type="button" class="btn btn-text-danger" 
+                            (sqxConfirmClick)="delete(backup)" 
+                            confirmTitle="Delete backup"
+                            confirmText="Do you really want to delete the backup?">
+                            <i class="icon-bin2"></i>
+                        </button>
+                    </div>
                 </div>
-            </ng-container>
+            </div>
         </ng-container>
     </ng-container>
 
diff --git a/src/Squidex/app/features/settings/pages/clients/client.component.html b/src/Squidex/app/features/settings/pages/clients/client.component.html
index 654781be9..476038fd9 100644
--- a/src/Squidex/app/features/settings/pages/clients/client.component.html
+++ b/src/Squidex/app/features/settings/pages/clients/client.component.html
@@ -2,7 +2,7 @@
     <div class="card-header">
         <div class="row no-gutters">
             <div class="col col-name">
-                <form *ngIf="isRenaming" class="form-inline" [formGroup]="renameForm.form" (ngSubmit)="rename()">
+                <form *ngIf="isRenaming; else noRenaming" class="form-inline" [formGroup]="renameForm.form" (ngSubmit)="rename()">
                     <div class="form-group mr-1">
                         <sqx-control-errors for="name"></sqx-control-errors>
                         
@@ -16,13 +16,13 @@
                     </button>
                 </form>
 
-                <ng-container *ngIf="!isRenaming">
+                <ng-template #noRenaming>
                     <h3 class="client-name" (dblclick)="toggleRename()">
                         {{client.name}}
                     </h3>
 
                     <i class="client-edit icon-pencil" (click)="toggleRename()"></i>
-                </ng-container>
+                </ng-template>
             </div>
             <div class="col-auto">
                 <button type="button" class="btn btn-primary" (click)="connect()">Connect</button>
diff --git a/src/Squidex/app/features/settings/pages/languages/languages-page.component.html b/src/Squidex/app/features/settings/pages/languages/languages-page.component.html
index ae44142e4..989801c71 100644
--- a/src/Squidex/app/features/settings/pages/languages/languages-page.component.html
+++ b/src/Squidex/app/features/settings/pages/languages/languages-page.component.html
@@ -14,14 +14,12 @@
     </ng-container>
 
     <ng-container content>
-        <ng-container *ngIf="languagesState.isLoaded | async">
-            <ng-container *ngIf="languagesState.languages | async; let languages">
-                <sqx-language *ngFor="let languageInfo of languages; trackBy: trackByLanguage"
-                    [language]="languageInfo.language" 
-                    [fallbackLanguages]="languageInfo.fallbackLanguages"
-                    [fallbackLanguagesNew]="languageInfo.fallbackLanguagesNew">
-                </sqx-language>
-            </ng-container>
+        <ng-container *ngIf="(languagesState.isLoaded | async) && (languagesState.languages | async); let languages">
+            <sqx-language *ngFor="let languageInfo of languages; trackBy: trackByLanguage"
+                [language]="languageInfo.language" 
+                [fallbackLanguages]="languageInfo.fallbackLanguages"
+                [fallbackLanguagesNew]="languageInfo.fallbackLanguagesNew">
+            </sqx-language>
 
             <ng-container *ngIf="languagesState.newLanguages | async; let newLanguages">
                 <div class="table-items-footer">
diff --git a/src/Squidex/app/features/settings/pages/plans/plans-page.component.html b/src/Squidex/app/features/settings/pages/plans/plans-page.component.html
index c1118dc6c..f8f9720cd 100644
--- a/src/Squidex/app/features/settings/pages/plans/plans-page.component.html
+++ b/src/Squidex/app/features/settings/pages/plans/plans-page.component.html
@@ -14,67 +14,65 @@
     </ng-container>
 
     <ng-container content>
-        <ng-container *ngIf="plansState.isLoaded | async">
-            <ng-container *ngIf="plansState.plans | async; let plans">
-                <div class="panel-alert panel-alert-danger" *ngIf="(plansState.isOwner | async) === false">
-                    You have not created the subscription. Therefore you cannot change the plan.
-                </div>
+        <ng-container *ngIf="(plansState.isLoaded | async) && (plansState.plans | async); let plans">
+            <div class="panel-alert panel-alert-danger" *ngIf="(plansState.isOwner | async) === false">
+                You have not created the subscription. Therefore you cannot change the plan.
+            </div>
 
-                <div class="text-muted text-center empty" *ngIf="plans.length === 0">
-                    No plan configured, this app has unlimited usage.
-                </div>
+            <div class="text-muted text-center empty" *ngIf="plans.length === 0">
+                No plan configured, this app has unlimited usage.
+            </div>
 
-                <div class="clearfix">
-                    <div class="card plan float-left" *ngFor="let planInfo of plans; trackBy: trackByPlan">
-                        <div class="card-header text-center">
-                            <h4 class="card-title">{{planInfo.plan.name}}</h4>
-                            <h5 class="plan-price">{{planInfo.plan.costs}}</h5>
+            <div class="clearfix">
+                <div class="card plan float-left" *ngFor="let planInfo of plans; trackBy: trackByPlan">
+                    <div class="card-header text-center">
+                        <h4 class="card-title">{{planInfo.plan.name}}</h4>
+                        <h5 class="plan-price">{{planInfo.plan.costs}}</h5>
 
-                            <small class="text-muted">Per Month</small>
-                        </div>
-                        <div class="card-body">
-                            <div class="plan-fact text-center">
-                                <div>
-                                    <strong>{{planInfo.plan.maxApiCalls | sqxKNumber}}</strong> API Calls
-                                </div>
-                                <div>
-                                    {{planInfo.plan.maxAssetSize | sqxFileSize}} Storage
-                                </div>
-                                <div>
-                                    {{planInfo.plan.maxContributors}} Contributors
-                                </div>
+                        <small class="text-muted">Per Month</small>
+                    </div>
+                    <div class="card-body">
+                        <div class="plan-fact text-center">
+                            <div>
+                                <strong>{{planInfo.plan.maxApiCalls | sqxKNumber}}</strong> API Calls
                             </div>
-                        
-                            <button *ngIf="planInfo.isSelected" class="btn btn-block btn-text-success plan-selected">
-                                &#10003; Selected
-                            </button>
-                            
-                            <button *ngIf="!planInfo.isSelected" class="btn btn-block btn-success" [disabled]="plansState.isDisabled | async" (click)="change(planInfo.plan.id)">
-                                Change
-                            </button>
-                        </div>
-                        <div class="card-footer" *ngIf="planInfo.plan.yearlyId">
-                            <div class="text-center">
-                                <h5 class="plan-price">{{planInfo.plan.yearlyCosts}}</h5>
-
-                                <small class="text-muted">Per Year</small>
+                            <div>
+                                {{planInfo.plan.maxAssetSize | sqxFileSize}} Storage
                             </div>
+                            <div>
+                                {{planInfo.plan.maxContributors}} Contributors
+                            </div>
+                        </div>
+                    
+                        <button *ngIf="planInfo.isSelected" class="btn btn-block btn-text-success plan-selected">
+                            &#10003; Selected
+                        </button>
+                        
+                        <button *ngIf="!planInfo.isSelected" class="btn btn-block btn-success" [disabled]="plansState.isDisabled | async" (click)="change(planInfo.plan.id)">
+                            Change
+                        </button>
+                    </div>
+                    <div class="card-footer" *ngIf="planInfo.plan.yearlyId">
+                        <div class="text-center">
+                            <h5 class="plan-price">{{planInfo.plan.yearlyCosts}}</h5>
 
-                            <button *ngIf="planInfo.isYearlySelected" class="btn btn-block btn-text-success plan-selected">
-                                &#10003; Selected
-                            </button>
-                            
-                            <button *ngIf="!planInfo.isYearlySelected" class="btn btn-block btn-success" [disabled]="plansState.isDisabled | async" (click)="change(planInfo.plan.yearlyId)">
-                                Change
-                            </button>
+                            <small class="text-muted">Per Year</small>
                         </div>
+
+                        <button *ngIf="planInfo.isYearlySelected" class="btn btn-block btn-text-success plan-selected">
+                            &#10003; Selected
+                        </button>
+                        
+                        <button *ngIf="!planInfo.isYearlySelected" class="btn btn-block btn-success" [disabled]="plansState.isDisabled | async" (click)="change(planInfo.plan.yearlyId)">
+                            Change
+                        </button>
                     </div>
                 </div>
+            </div>
 
-                <div *ngIf="plansState.hasPortal | async" class="billing-portal-link">
-                    Go to <a [href]="portalUrl" sqxExternalLink>Billing Portal</a> for payment history and subscription overview.
-                </div>
-            </ng-container>
+            <div *ngIf="plansState.hasPortal | async" class="billing-portal-link">
+                Go to <a [href]="portalUrl" sqxExternalLink>Billing Portal</a> for payment history and subscription overview.
+            </div>
         </ng-container>
     </ng-container>
 
diff --git a/src/Squidex/app/features/settings/pages/roles/roles-page.component.html b/src/Squidex/app/features/settings/pages/roles/roles-page.component.html
index 4d756d031..a6fab661b 100644
--- a/src/Squidex/app/features/settings/pages/roles/roles-page.component.html
+++ b/src/Squidex/app/features/settings/pages/roles/roles-page.component.html
@@ -14,8 +14,8 @@
     </ng-container>
 
     <ng-container content>
-        <ng-container *ngIf="rolesState.isLoaded | async">
-            <sqx-role *ngFor="let role of rolesState.roles | async; trackBy: trackByRole" [role]="role" [allPermissions]="allPermissions"></sqx-role>
+        <ng-container *ngIf="(rolesState.isLoaded | async) && (rolesState.roles | async); let roles">
+            <sqx-role *ngFor="let role of roles" [role]="role" [allPermissions]="allPermissions"></sqx-role>
 
             <div class="table-items-footer">
                 <form [formGroup]="addRoleForm.form" (ngSubmit)="addRole()">
diff --git a/src/Squidex/app/framework/angular/forms/autocomplete.component.html b/src/Squidex/app/framework/angular/forms/autocomplete.component.html
index 326206e1d..a861ccfdd 100644
--- a/src/Squidex/app/framework/angular/forms/autocomplete.component.html
+++ b/src/Squidex/app/framework/angular/forms/autocomplete.component.html
@@ -12,6 +12,7 @@
             (mousedown)="selectItem(item)"
             (mouseover)="selectIndex(i)"
             [sqxScrollActive]="i === snapshot.suggestedIndex">
+
             <ng-container *ngIf="!itemTemplate">{{item}}</ng-container>
 
             <ng-template *ngIf="itemTemplate" [sqxTemplateWrapper]="itemTemplate" [item]="item" [index]="i"></ng-template>
diff --git a/src/Squidex/app/framework/angular/forms/stars.component.html b/src/Squidex/app/framework/angular/forms/stars.component.html
index af4d6d7c9..de372853f 100644
--- a/src/Squidex/app/framework/angular/forms/stars.component.html
+++ b/src/Squidex/app/framework/angular/forms/stars.component.html
@@ -1,13 +1,15 @@
 <div class="stars-container">
-    <div *ngIf="maximumStars === 0 || maximumStars > 15" class="many-stars">
-        Must not have more more than 15 stars
-    </div>
-
-    <ng-container *ngIf="maximumStars > 0 && maximumStars <= 15">
+    <ng-container *ngIf="maximumStars > 0 && maximumStars <= 15; else noStars">
         <span class="stars" (mouseleave)="stopPreview()" [class.disabled]="snapshot.isDisabled">
             <span class="star" *ngFor="let star of snapshot.starsArray" (mouseenter)="setPreview(star)" (click)="setValue(star)" [class.selected]="star <= snapshot.stars"></span>
         </span>
 
         <button type="button" class="btn btn-text" [class.hidden]="!value" (click)="reset()">Clear</button>
     </ng-container>
+
+    <ng-template #noStars>
+        <div class="many-stars">
+            Must not have more more than 15 stars
+        </div>
+    </ng-template>
 </div>
\ No newline at end of file
diff --git a/src/Squidex/app/shared/components/markdown-editor.component.html b/src/Squidex/app/shared/components/markdown-editor.component.html
index fee67d1f6..9fe76c972 100644
--- a/src/Squidex/app/shared/components/markdown-editor.component.html
+++ b/src/Squidex/app/shared/components/markdown-editor.component.html
@@ -5,5 +5,7 @@
 </div>
 
 <ng-container *sqxModalView="assetsDialog;onRoot:true;closeAuto:false">
-    <sqx-assets-selector (selected)="insertAssets($event)"></sqx-assets-selector>
+    <sqx-assets-selector
+        (selected)="insertAssets($event)">
+    </sqx-assets-selector>
 </ng-container>
\ No newline at end of file
diff --git a/src/Squidex/app/shared/components/rich-editor.component.html b/src/Squidex/app/shared/components/rich-editor.component.html
index 8e4c1e999..1fe5b907e 100644
--- a/src/Squidex/app/shared/components/rich-editor.component.html
+++ b/src/Squidex/app/shared/components/rich-editor.component.html
@@ -3,5 +3,7 @@
 </div>
 
 <ng-container *sqxModalView="assetsDialog;onRoot:true;closeAuto:false">
-    <sqx-assets-selector (selected)="insertAssets($event)"></sqx-assets-selector>
+    <sqx-assets-selector
+        (selected)="insertAssets($event)">
+    </sqx-assets-selector>
 </ng-container>
\ No newline at end of file