Now prompting before navigating away from an article page if the form…

app/src/app/admin/abstractEntitiesController.ts

@@ -10,14 +10,39 @@ namespace app.admin {
 
         public showPreview:boolean = false;
 
+        public entityForm:ng.IFormController;
+
         constructor(
             public entity:M,
             public service:S,
             protected $stateParams:ICommonStateParams,
             protected notificationService:common.services.notification.NotificationService,
             protected $mdDialog:ng.material.IDialogService,
-            protected $state:ng.ui.IStateService
+            protected $state:ng.ui.IStateService,
+            protected $scope:ng.IScope
         ) {
+            // If the user has unsaved changes on the form, ask if they would like to stay on the page.
+
+            let stateChangeOverride:boolean = false;
+
+            $scope.$on('$stateChangeStart', (event, toState, toParams, fromState, fromParams) => {
+                if(!_.isEmpty(this.entityForm) && !stateChangeOverride && this.entityForm.$dirty) {
+                    event.preventDefault();
+
+                    let confirm = this.$mdDialog.confirm()
+                        .title("Are you sure you want to navigate away from this page?")
+                        .htmlContent("You have unsaved changes on this form.")
+                        .ariaLabel("Confirm navigate away")
+                        .ok("Leave")
+                        .cancel("Stay");
+
+                    this.$mdDialog.show(confirm)
+                        .then(() => {
+                            stateChangeOverride = true;
+                            $state.go(toState.name, toParams);
+                        })
+                }
+            });
         }
 
         protected abstract getListingState():string;
@@ -67,4 +92,4 @@ namespace app.admin {
 
     }
 
-}
+}

app/src/app/admin/articles/article/article.spec.ts

@@ -57,14 +57,17 @@ namespace app.admin.articles.article {
 
                 tagService.getTagCategories = sinon.stub().returns(common.models.TagMock.collection(5));
 
+                $state.go = sinon.stub();
+
                 ArticleController = $controller(app.admin.articles.article.namespace + '.controller', {
                     $stateParams: $stateParams,
                     notificationService: notificationService,
                     article: article,
                     articleService: articleService,
                     groupTags: groupTags,
                     $mdDialog: $mdDialog,
-                    $state: $state
+                    $state: $state,
+                    $scope: $scope
                 });
             });
 
@@ -159,7 +162,6 @@ namespace app.admin.articles.article {
             $mdDialog.show = sinon.stub().returns($q.when(true));
             $mdDialog.hide = sinon.stub();
             articleService.removeModel = sinon.stub().returns($q.when(true));
-            $state.go = sinon.stub();
 
             ArticleController.remove();
 
@@ -177,6 +179,64 @@ namespace app.admin.articles.article {
             expect($state.go).to.be.calledWith((<any>ArticleController).getListingState());
         });
 
+        describe('Dirty form navigation prompt', () => {
+
+            let toState = {
+                name:'foobar'
+            };
+
+            let toParams = {
+                option:'foobar'
+            };
+
+            it('should prompt when attempting to navigate away with a dirty form and navigate on confirm', () => {
+
+                ArticleController.entityForm = global.FormControllerMock.getMock(); // $dirty is true
+
+                $mdDialog.show = sinon.stub().returns($q.when(true));
+
+                $scope.$broadcast('$stateChangeStart', toState, toParams);
+
+                expect($mdDialog.show).to.be.called;
+
+                $scope.$apply();
+
+                expect($state.go).to.be.calledWith(toState.name, toParams);
+
+            });
+
+            it('should not navigate away with cancel', () => {
+
+                ArticleController.entityForm = global.FormControllerMock.getMock();
+
+                $mdDialog.show = sinon.stub().returns($q.reject());
+
+                $scope.$broadcast('$stateChangeStart', toState, toParams);
+
+                expect($mdDialog.show).to.be.called;
+
+                $scope.$apply();
+
+                expect($state.go).to.not.be.called;
+
+            });
+
+            it('should not show the prompt if the form is not dirty', () => {
+
+                ArticleController.entityForm = global.FormControllerMock.getMock({
+                    $dirty:false
+                });
+
+                $mdDialog.show = sinon.stub().returns($q.when(true));
+
+                $scope.$broadcast('$stateChangeStart', toState, toParams);
+
+                expect($mdDialog.show).to.not.be.called;
+
+            });
+
+        });
+
     });
 
 }

app/src/app/admin/articles/article/article.tpl.html

@@ -1,6 +1,6 @@
 <section layout="row" id="post-section" layout-align="space-around start">
 
-    <md-card ng-form flex novalidate name="articleForm" id="article-form" class="md-whiteframe-z2">
+    <md-card ng-form="ArticleController.entityForm" flex novalidate id="article-form" class="md-whiteframe-z2">
         <div id="scheduling">
             <h1>{{ArticleController.entity.status | uppercase}}</h1>
             <md-toolbar>
@@ -54,7 +54,7 @@ <h1>{{ArticleController.entity.status | uppercase}}</h1>
                         <md-tooltip md-direction="top">Delete</md-tooltip>
                     </md-button>
 
-                    <md-button class="md-accent md-raised md-fab" ng-disabled="articleForm.$invalid" ng-click="ArticleController.save()">
+                    <md-button class="md-accent md-raised md-fab" ng-disabled="ArticleController.entityForm.$invalid" ng-click="ArticleController.save()">
                         <md-icon>check</md-icon>
                         <md-tooltip md-direction="top">Save</md-tooltip>
                     </md-button>

app/src/app/admin/articles/article/article.ts

@@ -105,7 +105,7 @@ namespace app.admin.articles.article {
 
     export class ArticleController extends app.admin.AbstractEntitiesController<common.models.Article, common.services.article.ArticleService> {
 
-        static $inject = ['article', 'articleService', '$stateParams', 'notificationService', '$mdDialog', '$state', 'groupTags'];
+        static $inject = ['article', 'articleService', '$stateParams', 'notificationService', '$mdDialog', '$state', '$scope', 'groupTags'];
 
         protected getListingState():string {
             return app.admin.articles.listing.namespace;

app/src/app/admin/articles/article/content/content.tpl.html

@@ -14,7 +14,7 @@ <h2 class="md-toolbar-tools">
                    type="text"
                    localizable-input="ContentController.article._localizations"
                    required>
-            <ng-messages for="articleForm.title.$error">
+            <ng-messages for="ArticleController.entityForm.title.$error">
                 <ng-message when="required">This is required.</ng-message>
             </ng-messages>
 
@@ -45,7 +45,6 @@ <h2 class="md-toolbar-tools">
     <md-card-content>
 
         <content-sections-input-set
-            id="articleFormContent"
             ng-model="ContentController.article._sections"
             ng-required="true"
             on-section-update="ContentController.sectionUpdated(event, section)"
@@ -72,7 +71,7 @@ <h2 class="md-toolbar-tools">
                 md-maxlength="140"
                 localizable-input="ContentController.article._localizations"
             ></textarea>
-            <ng-messages for="articleForm.excerpt.$error">
+            <ng-messages for="ArticleController.entityForm.excerpt.$error">
                 <ng-message when="maxlength">Maximum length is 140 chars (Like a tweet!)</ng-message>
             </ng-messages>
         </md-input-container>
@@ -103,7 +102,7 @@ <h2 class="md-toolbar-tools">
                 name="tags"
                 >
         </grouped-tags>
-        <ng-messages for="articleForm.tags.$error">
+        <ng-messages for="ArticleController.entityForm.tags.$error">
             <ng-message when="groupedtags">One or more tag groups is invalid</ng-message>
         </ng-messages>