From 070fa11f8cb4e8c8f3149d37a4b37cb873d0924e Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <mads@umbraco.com>
Date: Mon, 8 Jan 2018 14:11:53 +0100
Subject: [PATCH] fixes: U4-10707 Config to order tour groups

---
 .../src/common/services/tour.service.js       | 29 ++++++++++++++++++-
 .../common/drawers/help/help.controller.js    |  6 ++--
 .../src/views/common/drawers/help/help.html   | 18 ++++++------
 3 files changed, 40 insertions(+), 13 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/common/services/tour.service.js b/src/Umbraco.Web.UI.Client/src/common/services/tour.service.js
index 1955cf7219..5ad997ce76 100644
--- a/src/Umbraco.Web.UI.Client/src/common/services/tour.service.js
+++ b/src/Umbraco.Web.UI.Client/src/common/services/tour.service.js
@@ -218,7 +218,34 @@
             var deferred = $q.defer();
             var tours = getTours();
             setTourStatuses(tours).then(function() {
-                var groupedTours = _.groupBy(tours, "group");
+                var groupedTours = [];
+                var sortedTours = _.sortBy(tours, 'groupOrder');
+
+                sortedTours.forEach(function (item) {
+                    
+                    var groupExists = false;
+                    var newGroup = {
+                        "group": "",
+                        "tours": []
+                    };
+
+                    groupedTours.forEach(function(group){
+                        // extend existing group if it is already added
+                        if(group.group === item.group) {
+                            groupExists = true;
+                            group.tours.push(item)
+                        }
+                    });
+
+                    // push new group to array if it doesn't exist
+                    if(!groupExists) {
+                        newGroup.group = item.group;
+                        newGroup.tours.push(item);
+                        groupedTours.push(newGroup);
+                    }
+
+                });
+
                 deferred.resolve(groupedTours);
             });
             return deferred.promise;
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/drawers/help/help.controller.js b/src/Umbraco.Web.UI.Client/src/views/common/drawers/help/help.controller.js
index 34a3d8a811..4d2b43c078 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/drawers/help/help.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/common/drawers/help/help.controller.js
@@ -124,7 +124,7 @@
 
         function showTourButton(index, tourGroup) {
             if(index !== 0) {
-                var prevTour = tourGroup[index - 1];
+                var prevTour = tourGroup.tours[index - 1];
                 if(prevTour.completed) {
                     return true;
                 }
@@ -147,12 +147,12 @@
             // Finding out, how many tours are completed for the progress circle
             angular.forEach(vm.tours, function(group){
                 var completedTours = 0;
-                angular.forEach(group, function(tour){
+                angular.forEach(group.tours, function(tour){
                     if(tour.completed) {
                         completedTours++;
                     }
                 });
-                group.completedPercentage = Math.round((completedTours/group.length)*100);
+                group.completedPercentage = Math.round((completedTours/group.tours.length)*100);
             });
         }
 
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/drawers/help/help.html b/src/Umbraco.Web.UI.Client/src/views/common/drawers/help/help.html
index 5e1d5d271e..e755512b02 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/drawers/help/help.html
+++ b/src/Umbraco.Web.UI.Client/src/views/common/drawers/help/help.html
@@ -12,23 +12,23 @@
 
             <h5 style="margin-bottom: 10px; margin-top: 0;">Tours</h5>
             
-            <div ng-repeat="(key,value) in vm.tours" style="margin-bottom: 5px;">
+            <div ng-repeat="tourGroup in vm.tours" style="margin-bottom: 5px;">
 
                 <div class="umb-help-list">
 
-                    <a href="" class="umb-help-list-item umb-help-list-item__content flex items-center justify-between" style="text-decoration: none;" ng-click="value.open = !value.open">
-                        <h5 class="umb-help-list-item__group-title"><i style="margin-right: 2px;text-decoration: none;" ng-class="{'icon-navigation-right': !value.open, 'icon-navigation-down': value.open}"></i>
-                            <span ng-if="key !== 'undefined'">{{key}}</span>
-                            <span ng-if="key === 'undefined'">Other</span>
+                    <a href="" class="umb-help-list-item umb-help-list-item__content flex items-center justify-between" style="text-decoration: none;" ng-click="tourGroup.open = !tourGroup.open">
+                        <h5 class="umb-help-list-item__group-title"><i style="margin-right: 2px;text-decoration: none;" ng-class="{'icon-navigation-right': !tourGroup.open, 'icon-navigation-down': tourGroup.open}"></i>
+                            <span ng-if="tourGroup.group !== 'undefined'">{{tourGroup.group}}</span>
+                            <span ng-if="tourGroup.group === 'undefined'">Other</span>
                         </h5>
                         <umb-progress-circle
-                            percentage="{{value.completedPercentage}}"
+                            percentage="{{tourGroup.completedPercentage}}"
                             size="40">
                         </umb-progress-circle>
                     </a>
 
-                    <div ng-if="value.open">
-                        <div data-element="tour-{{tour.alias}}" class="umb-help-list-item" ng-repeat="tour in value">
+                    <div ng-if="tourGroup.open">
+                        <div data-element="tour-{{tour.alias}}" class="umb-help-list-item" ng-repeat="tour in tourGroup.tours">
                             <div class="umb-help-list-item__content justify-between">
                                 <div class="flex items-center">
                                     <div ng-if="!tour.completed" class="umb-number-badge umb-number-badge--xs umb-help-list-item__icon">{{ $index + 1 }}</div>
@@ -36,7 +36,7 @@
                                     <span ng-class="{'strike': tour.completed}" class="umb-help-list-item__title">{{ tour.name }}</span>
                                 </div>
                                 <div>
-                                    <umb-button ng-if="!tour.completed && vm.showTourButton($index, value)" button-style="primary" size="xxs" type="button" label="Start" action="vm.startTour(tour)"></umb-button>                                
+                                    <umb-button ng-if="!tour.completed && vm.showTourButton($index, tourGroup)" button-style="primary" size="xxs" type="button" label="Start" action="vm.startTour(tour)"></umb-button>       
                                     <umb-button ng-if="tour.completed" size="xxs" type="button" label="Rerun" action="vm.startTour(tour)"></umb-button>
                                 </div>
                             </div>