Confirm dialog for preview.

backend/i18n/frontend_en.json

@@ -400,6 +400,7 @@
   "contents.noReferencing": "This content is not referenced by another item.",
   "contents.pendingChangesTextToChange": "You have unsaved changes.\n\nWhen you change the status you will lose them.\n\n**Do you want to continue anyway?**",
   "contents.pendingChangesTextToClose": "You have unsaved changes.\n\nWhen you close the current content view you will lose them.\n\n**Do you want to continue anyway?**",
+  "contents.pendingChangesTextToPreview": "You have unsaved changes.\n\nYou will not see them on preview.\n\n**Do you want to continue anyway?**",
   "contents.pendingChangesTitle": "Unsaved changes",
   "contents.publishAll": "Publish All",
   "contents.referencesCreateNew": "Add New",

backend/i18n/frontend_it.json

@@ -400,6 +400,7 @@
   "contents.noReferencing": "This content is not referenced by another item.",
   "contents.pendingChangesTextToChange": "Non hai salvato le modifiche.\n\nSe cambi lo stato perderai le modifiche.\n\n**Sei sicuro di voler continuare?**",
   "contents.pendingChangesTextToClose": "Non hai salvato le modifiche.\n\nChiudendo il contenuto corrente perderai tutte le modifiche.\n\n**Sei sicuro di voler continuare?**",
+  "contents.pendingChangesTextToPreview": "You have unsaved changes.\n\nYou will not see them on preview.\n\n**Do you want to continue anyway?**",
   "contents.pendingChangesTitle": "Modifiche non salvate",
   "contents.publishAll": "Publish All",
   "contents.referencesCreateNew": "Aggiungi nuovo",

backend/i18n/frontend_nl.json

@@ -400,6 +400,7 @@
   "contents.noReferencing": "This content is not referenced by another item.",
   "contents.pendingChangesTextToChange": "Je hebt niet-opgeslagen wijzigingen. \n \n Wanneer je de status wijzigt, raak je ze kwijt. \n \n **Wil je toch doorgaan?**",
   "contents.pendingChangesTextToClose": "Je hebt niet-opgeslagen wijzigingen. \n \n Wanneer je de huidige inhoudsweergave sluit, raak je ze kwijt. \n  n **Wil je toch doorgaan?**",
+  "contents.pendingChangesTextToPreview": "You have unsaved changes.\n\nYou will not see them on preview.\n\n**Do you want to continue anyway?**",
   "contents.pendingChangesTitle": "Niet-opgeslagen wijzigingen",
   "contents.publishAll": "Publish All",
   "contents.referencesCreateNew": "Nieuwe toevoegen",

backend/i18n/source/frontend_en.json

@@ -400,6 +400,7 @@
   "contents.noReferencing": "This content is not referenced by another item.",
   "contents.pendingChangesTextToChange": "You have unsaved changes.\n\nWhen you change the status you will lose them.\n\n**Do you want to continue anyway?**",
   "contents.pendingChangesTextToClose": "You have unsaved changes.\n\nWhen you close the current content view you will lose them.\n\n**Do you want to continue anyway?**",
+  "contents.pendingChangesTextToPreview": "You have unsaved changes.\n\nYou will not see them on preview.\n\n**Do you want to continue anyway?**",
   "contents.pendingChangesTitle": "Unsaved changes",
   "contents.publishAll": "Publish All",
   "contents.referencesCreateNew": "Add New",

frontend/app/features/content/pages/content/content-page.component.html

@@ -54,10 +54,10 @@
                     </ng-container>
 
                     <ng-container *ngIf="tab === 'editor'">
-                        <sqx-preview-button [schema]="schema" [content]="content"></sqx-preview-button>
+                        <sqx-preview-button [schema]="schema" [content]="content" [confirm]="confirmPreview"></sqx-preview-button>
 
                         <ng-container *ngIf="content?.canDelete">
-                            <button type="button" class="btn btn-outline-secondary" (click)="dropdown.toggle()" [class.active]="dropdown.isOpenChanges | async" #buttonOptions>
+                            <button type="button" class="btn btn-outline-secondary ml-2" (click)="dropdown.toggle()" [class.active]="dropdown.isOpenChanges | async" #buttonOptions>
                                 <i class="icon-dots"></i>
                             </button>
 

frontend/app/features/content/pages/content/content-page.component.ts

@@ -44,6 +44,10 @@ export class ContentPageComponent extends ResourceOwner implements CanComponentD
     public language: AppLanguageDto;
     public languages: ReadonlyArray<AppLanguageDto>;
 
+    public confirmPreview = () => {
+        return this.checkPendingChangesBeforePreview();
+    }
+
     constructor(apiUrl: ApiUrlConfig, authService: AuthService, appsState: AppsState,
         public readonly contentsState: ContentsState,
         private readonly autoSaveService: AutoSaveService,
@@ -208,23 +212,25 @@ export class ContentPageComponent extends ResourceOwner implements CanComponentD
         }
     }
 
-    public checkPendingChangesBeforeClose() {
-        if (this.content && !this.content.canUpdate) {
-            return of(true);
-        }
+    public checkPendingChangesBeforePreview() {
+        return this.checkPendingChanges('i18n:contents.pendingChangesTextToPreview');
+    }
 
-        return this.contentForm.hasChanged() ?
-            this.dialogs.confirm('i18n:contents.pendingChangesTitle', 'i18n:contents.pendingChangesTextToClose') :
-            of(true);
+    public checkPendingChangesBeforeClose() {
+        return this.checkPendingChanges('i18n:contents.pendingChangesTextToClose');
     }
 
     public checkPendingChangesBeforeChangingStatus() {
+        return this.checkPendingChanges('i18n:contents.pendingChangesTextToChange');
+    }
+
+    private checkPendingChanges(text: string) {
         if (this.content && !this.content.canUpdate) {
             return of(true);
         }
 
         return this.contentForm.hasChanged() ?
-            this.dialogs.confirm('i18n:contents.pendingChangesTitle', 'i18n:contents.pendingChangesTextToChange') :
+            this.dialogs.confirm('i18n:contents.pendingChangesTitle', text) :
             of(true);
     }
 

frontend/app/features/content/shared/preview-button.component.ts

@@ -7,6 +7,8 @@
 
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnInit } from '@angular/core';
 import { ContentDto, fadeAnimation, interpolate, LocalStoreService, ModalModel, SchemaDetailsDto, Settings, StatefulComponent } from '@app/shared';
+import { Observable } from 'rxjs';
+import { take } from 'rxjs/operators';
 
 interface State {
     // The name of the selected preview config.
@@ -26,6 +28,9 @@ interface State {
     changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class PreviewButtonComponent extends StatefulComponent<State> implements OnInit {
+    @Input()
+    public confirm?: () => Observable<boolean>;
+
     @Input()
     public content: ContentDto;
 
@@ -56,7 +61,16 @@ export class PreviewButtonComponent extends StatefulComponent<State> implements
         if (name) {
             this.selectUrl(name);
 
-            this.navigateTo(name);
+            if (this.confirm) {
+                this.confirm().pipe(take(1))
+                    .subscribe(confirmed => {
+                        if (confirmed) {
+                            this.navigateTo(name);
+                        }
+                    });
+            } else {
+                this.navigateTo(name);
+            }
         }
 
         this.dropdown.hide();