From 7cc300f59c4e6bf0b3715e4bde65d142c2b93f94 Mon Sep 17 00:00:00 2001
From: Shannon <sdeminick@gmail.com>
Date: Mon, 16 Jul 2018 18:40:47 +1000
Subject: [PATCH] Gets all of the content for both variant and invariant
 content loading in the editor and for split views too

---
 src/Umbraco.Web.UI.Client/bower.json          |  2 +-
 .../components/content/edit.controller.js     | 58 +++++++++++++-
 .../editor/umbeditorheader.directive.js       | 11 ++-
 .../validation/valformmanager.directive.js    | 40 ++++++----
 .../src/common/services/navigation.service.js | 77 +++++++++++++++++++
 src/Umbraco.Web.UI.Client/src/init.js         | 30 +-------
 .../src/views/components/content/edit.html    |  5 +-
 .../apps/content/content.controller.js        | 26 ++++---
 8 files changed, 183 insertions(+), 66 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/bower.json b/src/Umbraco.Web.UI.Client/bower.json
index 71b393ae9c..1734172820 100644
--- a/src/Umbraco.Web.UI.Client/bower.json
+++ b/src/Umbraco.Web.UI.Client/bower.json
@@ -25,7 +25,7 @@
     "angular-i18n": "~1.7.2",
     "signalr": "^2.2.1",
     "typeahead.js": "~0.10.5",
-    "underscore": "~1.7.0",
+    "underscore": "~1.9.1",
     "rgrove-lazyload": "*",
     "bootstrap-social": "~4.8.0",
     "jquery": "2.2.4",
diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/content/edit.controller.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/content/edit.controller.js
index 2900d22540..76274a4901 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/content/edit.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/content/edit.controller.js
@@ -69,7 +69,7 @@
             // set the active variant
             var activeVariant = null;
             _.each($scope.content.variants, function (v) {
-                if (v.language.culture === $scope.culture) {
+                if (v.language && v.language.culture === $scope.culture) {
                     v.active = true;
                     activeVariant = v;
                 }
@@ -102,17 +102,36 @@
         function initVariant(variant) {
             //The model that is assigned to the editor contains the current content variant along
             //with a copy of the contentApps. This is required because each editor renders it's own
-            //content apps section and the content apps contains the view for editing content itself
+            //header and content apps section and the content apps contains the view for editing content itself
             //and we need to assign a view model to the subView so that it is scoped to the current
             //editor so that split views work. This is a bit hacky but it's required because the content
             //app stuff isn't built to have a scoped model to an editor, it's built to have a single global
             //model but that doesn't work for having split view.
 
+            //copy the apps from the main model if not assigned yet to the variant
             if (!variant.apps) {
-                //copy from the main model
                 variant.apps = angular.copy($scope.content.apps);
             }
 
+            //if this is a variant has a culture/language than we need to assign the language drop down info 
+            if (variant.language) {
+                //if the variant list that defines the header drop down isn't assigned to the variant then assign it now
+                if (!variant.variants) {
+                    variant.variants = _.map($scope.content.variants, function (v) {
+                        return _.pick(v, "active", "language", "validationError", "isEdited", "state");
+                    });
+                }
+                //ensure the current culture is set as the active one
+                for (var i = 0; i < variant.variants.length; i++) {
+                    if (variant.variants[i].language.culture === variant.language.culture) {
+                        variant.variants[i].active = true;
+                    }
+                    else {
+                        variant.variants[i].active = false;
+                    }
+                }
+            }
+            
             //the assign the variant to a view model to the content app
             var contentApp = _.find(variant.apps, function (a) {
                 return a.alias === "content";
@@ -508,6 +527,30 @@
             });
         };
 
+        $scope.selectVariant = function (editorIndex, variantDropDownItem) {
+
+            //if the editor index is zero, then update the query string to track the lang selection, otherwise if it's part
+            //of a 2nd split view editor then update the model directly.
+            if (editorIndex === 0) {
+                //if we've made it this far, then update the query string
+                $location.search("cculture", variantDropDownItem.language.culture);
+            }
+            else {
+                //set all variant drop down items as inactive for this editor and then set the selected on as active
+                var editor = $scope.editors[editorIndex];
+                for (var i = 0; i < editor.content.variants.length; i++) {
+                    editor.content.variants[i].active = false;
+                }
+                variantDropDownItem.active = true;
+
+                //get the variant content model and initialize the editor with that
+                var variant = _.find($scope.content.variants, function (v) {
+                    return v.language.culture === variantDropDownItem.language.culture;
+                });
+                editor.content = initVariant(variant);
+            }
+        };
+
         $scope.closeSplitView = function (index, editor) {
             //TODO: hacking animation states - these should hopefully be easier to do when we upgrade angular
             editor.loading = true;
@@ -519,6 +562,8 @@
 
         $scope.openInSplitView = function (selectedVariant) {
 
+            var selectedCulture = selectedVariant.language.culture;
+
             //only the content app can be selected since no other apps are shown, and because we copy all of these apps
             //to the "editors" we need to update this across all editors
             for (var e = 0; e < $scope.editors.length; e++) {
@@ -534,8 +579,13 @@
                 }
             }
 
+            //Find the whole variant model based on the culture that was chosen
+            var variant = _.find($scope.content.variants, function (v) {
+                return v.language.culture === selectedCulture;
+            });
+
             var editor = {
-                content: initVariant(selectedVariant)
+                content: initVariant(variant)
             };
             $scope.editors.push(editor);
 
diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditorheader.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditorheader.directive.js
index 3e318982f1..9275917578 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditorheader.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditorheader.directive.js
@@ -204,7 +204,7 @@ Use this directive to construct a header inside the main editor window.
 (function () {
     'use strict';
 
-    function EditorHeaderDirective(iconHelper, $location, editorService) {
+    function EditorHeaderDirective(iconHelper, editorService) {
 
         function link(scope, el, attr, ctrl) {
 
@@ -231,8 +231,10 @@ Use this directive to construct a header inside the main editor window.
             };
 
             scope.selectVariant = function (event, variant) {
-                scope.vm.dropdownOpen = false;
-                $location.search("cculture", variant.language.culture);
+                if (scope.onSelectVariant) {
+                    scope.vm.dropdownOpen = false;
+                    scope.onSelectVariant({ "variant": variant });
+                }
             };
 
             scope.openIconPicker = function () {
@@ -318,7 +320,8 @@ Use this directive to construct a header inside the main editor window.
                 showBackButton: "<?",
                 splitViewOpen: "=?",
                 onOpenInSplitView: "&?",
-                onCloseSplitView: "&?"
+                onCloseSplitView: "&?",
+                onSelectVariant: "&?"
             },
             link: link
         };
diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/validation/valformmanager.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/validation/valformmanager.directive.js
index 194565476d..e319d55d09 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/validation/valformmanager.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/validation/valformmanager.directive.js
@@ -12,7 +12,7 @@
 * Another thing this directive does is to ensure that any .control-group that contains form elements that are invalid will
 * be marked with the 'error' css class. This ensures that labels included in that control group are styled correctly.
 **/
-function valFormManager(serverValidationManager, $rootScope, $log, $timeout, notificationsService, eventsService, $routeParams) {
+function valFormManager(serverValidationManager, $rootScope, $log, $timeout, notificationsService, eventsService, $routeParams, navigationService) {
 
     var SHOW_VALIDATION_CLASS_NAME = "show-validation";
     var SAVING_EVENT_NAME = "formSubmitting";
@@ -111,22 +111,30 @@ function valFormManager(serverValidationManager, $rootScope, $log, $timeout, not
                     return;
                 }
 
-                var path = nextLocation.split("#")[1];
-                if (path) {
-                    if (path.indexOf("%253") || path.indexOf("%252")) {
-                        path = decodeURIComponent(path);
+                var nextPath = nextLocation.split("#")[1];
+
+                //TODO: We need to check for the query strings that cause the route, if they are just the
+                //nonRoutingQueryStrings when we shouldn't show the confirm route change
+
+                if (nextPath) {
+
+                    if (navigationService.isRouteChangingNavigation(currentLocation, nextLocation)) {
+                        if (!notificationsService.hasView()) {
+
+                            if (nextPath.indexOf("%253") || nextPath.indexOf("%252")) {
+                                nextPath = decodeURIComponent(nextPath);
+                            }
+
+                            var msg = { view: "confirmroutechange", args: { path: nextPath, listener: locationEvent } };
+                            notificationsService.add(msg);
+                        }
+
+                        //prevent the route!
+                        event.preventDefault();
+
+                        //raise an event
+                        eventsService.emit("valFormManager.pendingChanges", true);
                     }
-
-                    if (!notificationsService.hasView()) {
-                        var msg = { view: "confirmroutechange", args: { path: path, listener: locationEvent } };
-                        notificationsService.add(msg);
-                    }
-
-                    //prevent the route!
-                    event.preventDefault();
-
-                    //raise an event
-                    eventsService.emit("valFormManager.pendingChanges", true);
                 }
 
             });
diff --git a/src/Umbraco.Web.UI.Client/src/common/services/navigation.service.js b/src/Umbraco.Web.UI.Client/src/common/services/navigation.service.js
index 5cc0b9bb1e..275c9ca242 100644
--- a/src/Umbraco.Web.UI.Client/src/common/services/navigation.service.js
+++ b/src/Umbraco.Web.UI.Client/src/common/services/navigation.service.js
@@ -28,6 +28,8 @@ function navigationService($rootScope, $route, $routeParams, $log, $location, $q
         navReadyPromise.resolve(mainTreeApi);
     });
 
+    //A list of query strings defined that when changed will not cause a reload of the route
+    var nonRoutingQueryStrings = ["mculture", "cculture"];
 
     //used to track the current dialog object
     var currentDialog = null;
@@ -91,8 +93,83 @@ function navigationService($rootScope, $route, $routeParams, $log, $location, $q
         }
     }
 
+    /**
+     * Converts a string request path to a dictionary of route params
+     * @param {any} requestPath
+     */
+    function pathToRouteParts(requestPath) {
+        if (!angular.isString(requestPath)) {
+            throw "The value for requestPath is not a string";
+        }
+        var pathAndQuery = requestPath.split("#")[1];
+        if (pathAndQuery) {
+            if (pathAndQuery.indexOf("%253") || pathAndQuery.indexOf("%252")) {
+                pathAndQuery = decodeURIComponent(pathAndQuery);
+            }
+            var pathParts = pathAndQuery.split("?");
+            var path = pathParts[0];
+            var qry = pathParts.length === 1 ? "" : pathParts[1];
+            var qryParts = qry.split("&");
+            var result = {
+                path: path
+            };
+            for (var i = 0; i < qryParts.length; i++) {
+                var keyVal = qryParts[i].split("=");
+                if (keyVal.length == 2) {
+                    result[keyVal[0]] = keyVal[1];
+                }
+            }
+            return result;
+        }
+    }
+
     var service = {
 
+        /**
+         * @ngdoc method
+         * @name umbraco.services.navigationService#isRouteChangingNavigation
+         * @methodOf umbraco.services.navigationService
+         *
+         * @description
+         * Detects if the route param differences will cause a navigation change or if the route param differences are
+         * only tracking state changes.
+         * This is used for routing operations where reloadOnSearch is false and when detecting form dirty changes when navigating to a different page.
+         * @param {object} currUrlParams Either a string path or a dictionary of route parameters
+         * @param {object} nextUrlParams Either a string path or a dictionary of route parameters
+         */
+        isRouteChangingNavigation: function (currUrlParams, nextUrlParams) {
+
+            if (angular.isString(currUrlParams)) {
+                currUrlParams = pathToRouteParts(currUrlParams);
+            }
+
+            if (angular.isString(nextUrlParams)) {
+                nextUrlParams = pathToRouteParts(nextUrlParams);
+            }
+
+            var allowRoute = true;
+
+            //The only time that we want to not route is if only any of the nonRoutingQueryStrings have changed/added.
+            //If any of the other parts have changed we do not cancel
+            var currRoutingKeys = _.difference(_.keys(currUrlParams), nonRoutingQueryStrings);
+            var nextRoutingKeys = _.difference(_.keys(nextUrlParams), nonRoutingQueryStrings);
+            var diff = _.difference(currRoutingKeys, nextRoutingKeys);
+            //if the routing parameter keys are the same, we'll compare their values to see if any have changed and if so then the routing will be allowed.
+            if (diff.length == 0) {
+                var partsChanged = 0;
+                _.each(currRoutingKeys, function (k) {
+                    if (currUrlParams[k] != nextUrlParams[k]) {
+                        partsChanged++;
+                    }
+                });
+                if (partsChanged === 0) {
+                    allowRoute = false; //nothing except our query strings changed, so don't continue routing
+                }
+            }
+
+            return allowRoute;
+        },
+
         /**
          * @ngdoc method
          * @name umbraco.services.navigationService#waitForNavReady
diff --git a/src/Umbraco.Web.UI.Client/src/init.js b/src/Umbraco.Web.UI.Client/src/init.js
index fb6fadb444..50e5c21203 100644
--- a/src/Umbraco.Web.UI.Client/src/init.js
+++ b/src/Umbraco.Web.UI.Client/src/init.js
@@ -43,10 +43,7 @@ app.run(['userService', '$q', '$log', '$rootScope', '$route', '$location', 'urlH
         }
 
         var currentRouteParams = null;
-
-        //A list of query strings defined that when changed will not cause a reload of the route
-        var nonRoutingQueryStrings = ["mculture", "cculture"];
-
+        
         /** execute code on each successful route */
         $rootScope.$on('$routeChangeSuccess', function (event, current, previous) {
 
@@ -128,30 +125,7 @@ app.run(['userService', '$q', '$log', '$rootScope', '$route', '$location', 'urlH
                 //check if the location being changed is only the mculture query string, if so, cancel the routing since this is just
                 //used as a global persistent query string that does not change routes.
 
-                var currUrlParts = currentRouteParams;
-                var nextUrlParts = next.params;
-
-                var allowRoute = true;
-
-                //The only time that we want to cancel is if only any of the nonRoutingQueryStrings have changed/added.
-                //If any of the other parts have changed we do not cancel
-                var currRoutingKeys = _.difference(_.keys(currUrlParts), nonRoutingQueryStrings);
-                var nextRoutingKeys = _.difference(_.keys(nextUrlParts), nonRoutingQueryStrings);
-                var diff = _.difference(currRoutingKeys, nextRoutingKeys);
-                //if the routing parameter keys are the same, we'll compare their values to see if any have changed and if so then the routing will be allowed.
-                if (diff.length == 0) {
-                    var partsChanged = 0;
-                    _.each(currRoutingKeys, function (k) {
-                        if (currUrlParts[k] != nextUrlParts[k]) {
-                            partsChanged++;
-                        }
-                    });
-                    if (partsChanged === 0) {
-                        allowRoute = false; //nothing except our query strings chagned, so don't continue routing
-                    }
-                }
-
-                if (allowRoute) {
+                if (navigationService.isRouteChangingNavigation(currentRouteParams, next.params)) {
                     //continue the route
                     $route.reload();
                 }
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/content/edit.html b/src/Umbraco.Web.UI.Client/src/views/components/content/edit.html
index a437f3b6a7..f8ce725f18 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/content/edit.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/content/edit.html
@@ -22,13 +22,14 @@
                             hide-description="true" 
                             hide-alias="true"
                             navigation="editor.content.apps"
-                            variants="content.variants"
+                            variants="editor.content.variants"
                             hide-change-variant="page.hideChangeVariant"
                             on-back="backToListView()"
                             show-back-button="page.listViewPath !== null"
                             split-view-open="editors.length > 1"
                             on-open-in-split-view="openInSplitView(variant)"
-                            on-close-split-view="closeSplitView($index, editor)">
+                            on-close-split-view="closeSplitView($index, editor)"
+                            on-select-variant="selectVariant($index, variant)">
                         </umb-editor-header>
 
                         <umb-editor-container>
diff --git a/src/Umbraco.Web.UI.Client/src/views/content/apps/content/content.controller.js b/src/Umbraco.Web.UI.Client/src/views/content/apps/content/content.controller.js
index e50af0bfb4..7c4ed5aaa4 100644
--- a/src/Umbraco.Web.UI.Client/src/views/content/apps/content/content.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/content/apps/content/content.controller.js
@@ -27,18 +27,22 @@
 
         onInit();
 
-        $scope.$watch(function () {
-            return $scope.subView.viewModel.language.culture;
-        }, function (newVal, oldVal) {
-            if (newVal !== oldVal) {
-                vm.loading = true;
+        //if this variant has a culture/language assigned, then we need to watch it since it will change
+        //if the language drop down changes and we need to re-init
+        if ($scope.subView.viewModel.language) {
+            $scope.$watch(function () {
+                return $scope.subView.viewModel.language.culture;
+            }, function (newVal, oldVal) {
+                if (newVal !== oldVal) {
+                    vm.loading = true;
 
-                //TODO: Can we minimize the flicker?
-                $timeout(function () {
-                    onInit();
-                }, 100);
-            }
-        });
+                    //TODO: Can we minimize the flicker?
+                    $timeout(function () {
+                        onInit();
+                    }, 100);
+                }
+            });
+        }
     }
 
     angular.module("umbraco").controller("Umbraco.Editors.Content.Apps.ContentController", ContentAppContentController);