Fixed U4-6876: Added sort order to properties

src/Umbraco.Web.UI.Client/src/common/directives/components/umbgroupsbuilder.directive.js

@@ -135,11 +135,24 @@
           items: ".umb-group-builder__property-sortable",
           start: function(e, ui) {
             ui.placeholder.height(ui.item.height());
+          },
+          stop: function(e, ui) {
+            updatePropertiesSortOrder();
           }
         };
 
       }
 
+      function updatePropertiesSortOrder() {
+
+        angular.forEach(scope.model.groups, function(group){
+          if( group.tabState !== "init" ) {
+            group.properties = contentTypeHelper.updatePropertiesSortOrder(group.properties);
+          }
+        });
+
+      }
+
       /* ---------- TOOLBAR ---------- */
 
       scope.toggleSortingMode = function() {
@@ -258,6 +271,26 @@
 
       /* ---------- PROPERTIES ---------- */
 
+      scope.addProperty = function(property, properties) {
+
+        // set property sort order
+        var index = properties.indexOf(property);
+        var prevProperty = properties[index - 1];
+
+        if( index > 0) {
+          // set index to 1 higher than the previous property sort order
+          property.sortOrder = prevProperty.sortOrder + 1;
+
+        } else {
+          // first property - sort order will be 0
+          property.sortOrder = 0;
+        }
+
+        // open property settings dialog
+        scope.editPropertyTypeSettings(property);
+
+      };
+
       scope.editPropertyTypeSettings = function(property) {
 
         if (!property.inherited) {

src/Umbraco.Web.UI.Client/src/common/services/contenttypehelper.service.js

@@ -31,6 +31,9 @@ function contentTypeHelper(contentTypeResource, dataTypeResource, $filter) {
 
                 angular.forEach(composition.groups, function(compositionGroup){
 
+                    // order composition groups based on sort order
+                    compositionGroup.properties = $filter('orderBy')(compositionGroup.properties, 'sortOrder');
+
                     // get data type details
                     angular.forEach(compositionGroup.properties, function(property){
                       dataTypeResource.getById(property.dataTypeId)
@@ -65,6 +68,9 @@ function contentTypeHelper(contentTypeResource, dataTypeResource, $filter) {
                             // add properties to the top of the array
                             contentTypeGroup.properties = compositionGroup.properties.concat(contentTypeGroup.properties);
 
+                            // update sort order on all properties in merged group
+                            contentTypeGroup.properties = contentTypeHelperService.updatePropertiesSortOrder(contentTypeGroup.properties);
+
                             // make parentTabContentTypeNames to an array so we can push values
                             if(contentTypeGroup.parentTabContentTypeNames === null || contentTypeGroup.parentTabContentTypeNames === undefined) {
                                 contentTypeGroup.parentTabContentTypeNames = [];
@@ -182,12 +188,30 @@ function contentTypeHelper(contentTypeResource, dataTypeResource, $filter) {
                   groups.push(contentTypeGroup);
                 }
 
+                // update sort order on properties
+                contentTypeGroup.properties = contentTypeHelperService.updatePropertiesSortOrder(contentTypeGroup.properties);
+
             });
 
             contentType.groups = groups;
 
         },
 
+        updatePropertiesSortOrder: function (properties) {
+
+          var sortOrder = 0;
+
+          angular.forEach(properties, function(property) {
+            if( !property.inherited && property.propertyState !== "init") {
+              property.sortOrder = sortOrder;
+            }
+            sortOrder++;
+          });
+
+          return properties;
+
+        },
+
         makeTemplateHolder: function(contentType) {
 
           var template = {

src/Umbraco.Web.UI.Client/src/views/components/umb-groups-builder.html

@@ -49,7 +49,7 @@
                     <li ng-class="{'umb-group-builder__property-sortable': sortingMode && !property.inherited}" ng-repeat="property in tab.properties">
 
                         <!-- Init property / Property placeholder / add new property -->
-                        <a href="" class="umb-group-builder__property -placeholder" ng-if="property.propertyState=='init' && !sortingMode" ng-class="{'-placeholder': property.propertyState=='init'}" hotkey="alt+shift+p" ng-click="editPropertyTypeSettings(property)">
+                        <a href="" class="umb-group-builder__property -placeholder" ng-if="property.propertyState=='init' && !sortingMode" ng-class="{'-placeholder': property.propertyState=='init'}" hotkey="alt+shift+p" ng-click="addProperty(property, tab.properties)">
 
                             <div class="umb-group-builder__property-meta">
                                 <div class="umb-group-builder__placeholder-box -input-small"></div>

src/Umbraco.Web.UI.Client/src/views/documenttype/edit.controller.js

@@ -9,7 +9,7 @@
 (function() {
 	"use strict";
 
-	function DocumentTypeEditController($scope, $routeParams, contentTypeResource, dataTypeResource, editorState, contentEditingHelper, formHelper, navigationService, iconHelper, contentTypeHelper, notificationsService) {
+	function DocumentTypeEditController($scope, $routeParams, contentTypeResource, dataTypeResource, editorState, contentEditingHelper, formHelper, navigationService, iconHelper, contentTypeHelper, notificationsService, $filter) {
 
 		var vm = this;
 
@@ -183,6 +183,11 @@
 
 			}
 
+			// sort properties after sort order
+			angular.forEach(contentType.groups, function(group){
+				group.properties = $filter('orderBy')(group.properties, 'sortOrder');
+			});
+
 			//set a shared state
 			editorState.set(contentType);