Merge pull request #1092 from umbraco/temp-U4-7744

Fixes: U4-7744 Better validation message when Reordering tabs

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

@@ -1,10 +1,13 @@
 (function() {
   'use strict';
 
-  function GroupsBuilderDirective(contentTypeHelper, contentTypeResource, mediaTypeResource, dataTypeHelper, dataTypeResource, $filter, iconHelper, $q, $timeout) {
+  function GroupsBuilderDirective(contentTypeHelper, contentTypeResource, mediaTypeResource, dataTypeHelper, dataTypeResource, $filter, iconHelper, $q, $timeout, notificationsService, localizationService) {
 
     function link(scope, el, attr, ctrl) {
 
+        var validationTranslated = "";
+        var tabNoSortOrderTranslated = "";
+
       scope.sortingMode = false;
       scope.toolbar = [];
       scope.sortableOptionsGroup = {};
@@ -25,6 +28,14 @@
           // add init tab
           addInitGroup(scope.model.groups);
 
+          // localize texts
+          localizationService.localize("validation_validation").then(function(value) {
+              validationTranslated = value;
+          });
+
+          localizationService.localize("contentTypeEditor_tabHasNoSortOrder").then(function(value) {
+              tabNoSortOrderTranslated = value;
+          });
       }
 
       function setSortingOptions() {
@@ -202,13 +213,30 @@
 
       scope.toggleSortingMode = function(tool) {
 
-         scope.sortingMode = !scope.sortingMode;
+          if (scope.sortingMode === true) {
 
-         if(scope.sortingMode === true) {
-            scope.sortingButtonKey = "general_reorderDone";
-         } else {
-            scope.sortingButtonKey = "general_reorder";
-         }
+              var sortOrderMissing = false;
+
+              for (var i = 0; i < scope.model.groups.length; i++) {
+                  var group = scope.model.groups[i];
+                  if (group.tabState !== "init" && group.sortOrder === undefined) {
+                      sortOrderMissing = true;
+                      group.showSortOrderMissing = true;
+                      notificationsService.error(validationTranslated + ": " + group.name + " " + tabNoSortOrderTranslated);
+                  }
+              }
+
+              if (!sortOrderMissing) {
+                  scope.sortingMode = false;
+                  scope.sortingButtonKey = "general_reorder";
+              }
+
+          } else {
+
+              scope.sortingMode = true;
+              scope.sortingButtonKey = "general_reorderDone";
+
+          }
 
       };
 
@@ -394,8 +422,12 @@
         }
       };
 
-      scope.changeSortOrderValue = function() {
-        scope.model.groups = $filter('orderBy')(scope.model.groups, 'sortOrder');
+      scope.changeSortOrderValue = function(group) {
+
+          if (group.sortOrder !== undefined) {
+              group.showSortOrderMissing = false;
+          }
+          scope.model.groups = $filter('orderBy')(scope.model.groups, 'sortOrder');
       };
 
       function addInitGroup(groups) {

src/Umbraco.Web.UI.Client/src/less/components/umb-group-builder.less

@@ -89,7 +89,6 @@
   font-weight: bold;
   display: flex;
   align-items: center;
-  margin-right: 10px;
 }
 
 .umb-group-builder__group-title-icon {
@@ -132,6 +131,15 @@ input.umb-group-builder__group-title-input {
   display: inline-block;
   position: relative;
   top: 2px;
+  margin-left: 10px;
+}
+
+.umb-group-builder__group-sort-order {
+    display: flex;
+    align-items: center;
+    margin-left: 10px;
+    position: relative;
+    top: 2px;
 }
 
 input.umb-group-builder__group-sort-value {
@@ -139,10 +147,7 @@ input.umb-group-builder__group-sort-value {
   padding: 0px 0 0px 5px;
   width: 40px;
   margin-bottom: 0;
-  margin-right: 10px;
   border-color: #d9d9d9;
-  position: relative;
-  top: 2px;
 }
 
 /* ---------- PROPERTIES ---------- */

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

@@ -84,7 +84,13 @@
                         </div>
                     </ng-form>
 
-                    <input type="number" class="umb-group-builder__group-sort-value" ng-if="sortingMode" ng-model="tab.sortOrder" ng-disabled="tab.inherited" on-blur="changeSortOrderValue()" />
+                    <ng-form name="groupSortOrderForm">
+                        <div class="umb-group-builder__group-sort-order" ng-if="sortingMode">
+                            <input name="groupSortOrder" type="number" class="umb-group-builder__group-sort-value" ng-model="tab.sortOrder" ng-disabled="tab.inherited" on-blur="changeSortOrderValue(tab)" required />
+                            <div class="umb-validation-label -arrow-left" ng-if="groupSortOrderForm.groupSortOrder.$error.required && tab.showSortOrderMissing"><localize key="required"></localize></div>
+                            <div class="umb-validation-label -arrow-left" ng-if="!tab.showSortOrderMissing" val-msg-for="groupSortOrder" val-toggle-msg="required"><localize key="required"></localize></div>
+                        </div>
+                    </ng-form>
 
                     <div class="umb-group-builder__group-inherited-label" ng-if="tab.inherited">
                         <i class="icon icon-merge"></i>

src/Umbraco.Web.UI/umbraco/config/lang/en_us.xml

@@ -1037,37 +1037,38 @@ To manage your website, simply open the Umbraco back office and start adding con
     <key alias="compositionsDescription">Inherit tabs and properties from an existing document type. New tabs will be added to the current document type or merged if a tab with an identical name exists.</key>
     <key alias="compositionInUse">This content type is used in a composition, and therefore cannot be composed itself.</key>
     <key alias="noAvailableCompositions">There are no content types available to use as a composition.</key>
-    
+
     <key alias="availableEditors">Available editors</key>
     <key alias="reuse">Reuse</key>
     <key alias="editorSettings">Editor settings</key>
-    
+
     <key alias="configuration">Configuration</key>
-    
+
     <key alias="yesDelete">Yes, delete</key>
-    
+
     <key alias="movedUnderneath">was moved underneath</key>
     <key alias="folderToMove">Select the folder to move</key>
     <key alias="structureBelow">to in the tree structure below</key>
-    
+
     <key alias="allDocumentTypes">All Document types</key>
     <key alias="allDocuments">All Documents</key>
     <key alias="allMediaItems">All media items</key>
-    
+
     <key alias="usingThisDocument">using this document type will be deleted permanently, please confirm you want to delete these as well.</key>
     <key alias="usingThisMedia">using this media type will be deleted permanently, please confirm you want to delete these as well.</key>
     <key alias="usingThisMember">using this member type will be deleted permanently, please confirm you want to delete these as well</key>
-    
+
     <key alias="andAllDocuments">and all documents using this type</key>
     <key alias="andAllMediaItems">and all media items using this type</key>
     <key alias="andAllMembers">and all members using this type</key>
-    
+
     <key alias="thisEditorUpdateSettings">using this editor will get updated with the new settings</key>
 
     <key alias="memberCanEdit">Member can edit</key>
     <key alias="showOnMemberProfile">Show on member profile</key>
+    <key alias="tabHasNoSortOrder">tab has no sort order</key>
   </area>
-  
+
   <area alias="templateEditor">
     <key alias="alternativeField">Alternative field</key>
     <key alias="alternativeText">Alternative Text</key>