Merge pull request #13 from NikRimington/issue/12-accidental-settings…

…-removal [FIX] UX Bug with UI when existing PNF present
NikRimington · May 24, 2022 · af780be · af780be
2 parents fbb2e9d + 0996ff1
commit af780be
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 28 deletions.
diff --git a/src/HC.PageNotFoundManager.Core/Backoffice/MenuRenderingNotificationHandler.cs b/src/HC.PageNotFoundManager.Core/Backoffice/MenuRenderingNotificationHandler.cs
@@ -37,7 +37,7 @@ public void Handle(MenuRenderingNotification notification)
 
             var menuItem = new MenuItem(Constants.MenuAlias, Constants.MenuLabel)
             {
-                Icon = "alert red",
+                Icon = "directions color-blue",
                 SeparatorBefore = true
             };
 

diff --git a/src/HC.PageNotFoundManager/App_Plugins/HC.PageNotFound/Backoffice/Dialogs/dialog.html b/src/HC.PageNotFoundManager/App_Plugins/HC.PageNotFound/Backoffice/Dialogs/dialog.html
@@ -1,12 +1,12 @@
 <div ng-controller="hc.pagenotfound.dialog.controller as vm">
     <div class="umb-dialog-body" ng-cloak>
-        <div class="umb-pane" ng-show="vm.busy || !vm.loaded">
+        <div class="umb-pane" ng-show="vm.status.busy || !vm.status.loaded">
             <p class="abstract">
                 Choose the 404 page for <strong>{{currentNode.name}}</strong> and child pages
             </p>
             <umb-load-indicator></umb-load-indicator>
         </div>
-        <div class="umb-pane" ng-hide="!vm.loaded">
+        <div class="umb-pane" ng-hide="!vm.status.loaded">
 
             <div ng-show="error">
                 <div class="alert alert-error">
@@ -17,22 +17,23 @@
 
             <div ng-show="success">
                 <div class="alert alert-success">
-                    <strong>{{target.name}}</strong> is set as the 404 page for
+                    <span ng-show="target == undefined">No page</span><strong ng-hide="target == undefined">{{target.name}}</strong> is set as the 404 page for
                     <strong>{{currentNode.name}}</strong> and it's child pages
                 </div>
                 <button class="btn btn-primary" ng-click="vm.close()">Ok</button>
             </div>
 
             <p class="abstract" ng-hide="success">
-                Choose the 404 page for <strong>{{currentNode.name}}</strong> and child pages
+               The current 404 page for <strong>{{currentNode.name}}</strong> and child pages is show below. <br/>
+               <em>Click the cross next to the page name to deselect the current node as the 404.</em>
             </p>
 
             <div ng-if="pageNotFoundNode">
                 <ul class="unstyled list-icons">
                     <li>
                         <em class="icon {{pageNotFoundNode.icon}} hover-hide"></em>
                         <a>{{pageNotFoundNode.name}}</a>
-                        <a ng-click="clear()"><em class="icon red icon-delete"></em></a>
+                        <a ng-click="clear()" title="Remove selected 404"><em class="icon red icon-delete"></em></a>
                     </li>
                 </ul>
             </div>
@@ -80,12 +81,20 @@
         </div>
     </div>
 
-    <div class="umb-dialog-footer btn-toolbar umb-btn-toolbar" ng-hide="success || busy">
-        <a class="btn btn-link" ng-click="vm.close()">
-            <localize key="general_cancel">Cancel</localize>
-        </a>
-        <button class="btn btn-primary" ng-click="setNotFoundPage()">
-            <localize key="general_ok">OK</localize>
-        </button>
+    <div class="umb-dialog-footer btn-toolbar umb-btn-toolbar">
+        <div ng-hide="vm.status.existing || success || busy">
+            <a class="btn btn-link" ng-click="vm.close()">
+                <localize key="general_cancel">Cancel</localize>
+            </a>
+            <button class="btn btn-primary" ng-click="setNotFoundPage()">
+                <localize key="general_ok">Save</localize>
+            </button>
+        </div>
+        <div ng-show="vm.status.existing">
+            <button class="btn btn-primary" ng-click="vm.close()">
+                <localize key="general_ok">OK</localize>
+            </button>
+        </div>
     </div>
+
 </div>
diff --git a/src/HC.PageNotFoundManager/App_Plugins/HC.PageNotFound/js/dialog.controller.js b/src/HC.PageNotFoundManager/App_Plugins/HC.PageNotFound/js/dialog.controller.js
@@ -3,6 +3,11 @@
     function PageNotFoundManagerDialog($scope, pageNotFoundManagerResource, navigationService, userService, entityResource, iconHelper) {
         var node = $scope.currentNode;
         var vm = this;
+        vm.status = {
+            loaded: true,
+            busy: true,
+            existing: false
+        };
         var initUserDetails;
         var initNotFound;
         $scope.nav = navigationService;
@@ -27,7 +32,7 @@
                 $scope.treeModel.hideHeader =
                     userData.startContentIds.length > 0 && userData.startContentIds.indexOf(-1) === -1;
                 initUserDetails = true;
-                vm.busy = !(initNotFound && initUserDetails);
+                vm.status.busy = !(initNotFound && initUserDetails);
             });
 
             pageNotFoundManagerResource.getNotFoundPage(node.id).then((resp) => {
@@ -37,11 +42,12 @@
                     entityResource.getById(val, "Document").then(function (item) {
                         item.icon = iconHelper.convertFromLegacyIcon(item.icon);
                         $scope.pageNotFoundNode = item;
+                        vm.status.existing = item != undefined;
                     });
                 }
-                vm.loaded = true;
+                vm.status.loaded = true;
                 initNotFound = true;
-                vm.busy = !(initNotFound && initUserDetails);
+                vm.status.busy = !(initNotFound && initUserDetails);
             });
 
             vm.close = close;
@@ -96,29 +102,36 @@
 
         $scope.setNotFoundPage = function () {
 
-            vm.busy = true;
+            vm.status.busy = true;
             $scope.error = false;
 
             var parentId = 0;
             if (node !== null)
                 parentId = node.id;
 
-            var notFoundPageId = 0;
+            var notFoundPageId = $scope.pageNotFoundId;
             if ($scope.target !== undefined && $scope.target !== null)
                 notFoundPageId = $scope.target.id;
 
-            pageNotFoundManagerResource.setNotFoundPage(parentId, notFoundPageId).then(function () {
-                $scope.error = false;
-                $scope.success = true;
-                vm.busy = false;
-            }, function (err) {
-                $scope.success = false;
-                $scope.error = err;
-                vm.busy = false;
-            });
+            if(notFoundPageId != $scope.pageNotFoundId || notFoundPageId == 0 )   
+                pageNotFoundManagerResource.setNotFoundPage(parentId, notFoundPageId).then(function () {
+                    $scope.error = false;
+                    $scope.success = true;
+                    vm.status.busy = false;
+                }, function (err) {
+                    $scope.success = false;
+                    $scope.error = err;
+                    vm.status.busy = false;
+                });
+            else
+                close();
         };
 
-        $scope.clear = () => $scope.pageNotFoundNode = null;
+        $scope.clear = function() {
+            $scope.pageNotFoundNode = null;
+            vm.status.existing = false;
+            $scope.pageNotFoundId = 0;
+        } 
 
         function treeLoadedHandler() {
             if ($scope.source && $scope.source.path) {