ContentVariantDisplay: add DisplayName property and use in Umbr… (#7677)

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

@@ -1,7 +1,7 @@
 (function () {
     'use strict';
 
-    function EditorContentHeader(serverValidationManager, localizationService, editorState, contentVariantUtilities) {
+    function EditorContentHeader(serverValidationManager, localizationService, editorState) {
 
         function link(scope) {
 
@@ -122,8 +122,6 @@
                 
             }
 
-            scope.getVariantDisplayName = contentVariantUtilities.getDisplayName;
-
             scope.goBack = function () {
                 if (scope.onBack) {
                     scope.onBack();

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

@@ -1,39 +0,0 @@
-/**
-* @ngdoc service
-* @name umbraco.services.contentVariantUtilities
-* @description A utility service for dealing with variants
-**/
-function contentVariantUtilities() {
-    /**
-     * Returns the id for this variant
-     * @param {any} variant
-     */
-    function getDisplayName(variant) {
-        if (variant == null) {
-            return "";
-        }
-
-        var parts = [];
-
-        if (variant.language && variant.language.name) {
-            parts.push(variant.language.name);
-        }
-
-        if (variant.segment) {
-            var capitalized = variant.segment.split(" ").map(p => p[0].toUpperCase() + p.substring(1)).join(" ");
-            parts.push(capitalized);
-        }
-
-        if (parts.length === 0) {
-            // Invariant
-            parts.push("Default");
-        }
-
-        return parts.join(" - ");
-    }
-
-    return {
-        getDisplayName
-    }
-}
-angular.module('umbraco.services').factory('contentVariantUtilities', contentVariantUtilities);

src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-content-header.html

@@ -41,12 +41,12 @@
                     </ng-form>
 
                     <button type="button" ng-if="vm.hasVariants === true && hideChangeVariant !== true" class="umb-variant-switcher__toggle umb-outline" ng-click="vm.dropdownOpen = !vm.dropdownOpen" ng-class="{'--error': vm.errorsOnOtherVariants}">
-                        <span ng-bind="getVariantDisplayName(editor.content)"></span>
+                        <span ng-bind="editor.content.displayName"></span>
                         <ins class="umb-variant-switcher__expand" ng-class="{'icon-navigation-down': !vm.dropdownOpen, 'icon-navigation-up': vm.dropdownOpen}">&nbsp;</ins>
                     </button>
 
                     <span ng-if="vm.hasVariants === true && hideChangeVariant" class="umb-variant-switcher__toggle">
-                        <span ng-bind="getVariantDisplayName(editor.content)"></span>
+                        <span ng-bind="editor.content.displayName"></span>
                     </span>
 
                     <umb-dropdown ng-if="vm.dropdownOpen" class="umb-variant-switcher" ng-class="{'--has-sub-variants': vm.hasSegment === true}" on-close="vm.dropdownOpen = false" umb-keyboard-list>
@@ -60,7 +60,7 @@
                                 <i class="icon icon-navigation-right" ng-if="!entry.open"></i>
                             </button>
                             <button type="button" class="umb-variant-switcher__name-wrapper umb-outline" ng-click="selectVariant($event, entry.variant)" prevent-default>
-                                <span class="umb-variant-switcher__name" ng-bind="getVariantDisplayName(entry.variant)"></span>
+                                <span class="umb-variant-switcher__name" ng-bind="entry.variant.displayName"></span>
                                 <umb-variant-state variant="entry.variant" class="umb-variant-switcher__state"></umb-variant-state>
                             </button>
                             <div ng-if="splitViewOpen !== true && !entry.variant.active" class="umb-variant-switcher__split-view umb-outline" ng-click="openInSplitView($event, entry.variant)">Open in split view</div>

src/Umbraco.Web.UI.Client/src/views/content/overlays/publish.controller.js

@@ -1,7 +1,7 @@
 (function () {
     "use strict";
 
-    function PublishController($scope, localizationService, contentEditingHelper, contentVariantUtilities) {
+    function PublishController($scope, localizationService, contentEditingHelper) {
 
         var vm = this;
         vm.loading = true;
@@ -12,8 +12,6 @@
         vm.dirtyVariantFilter = dirtyVariantFilter;
         vm.pristineVariantFilter = pristineVariantFilter;
 
-        $scope.getVariantDisplayName = contentVariantUtilities.getDisplayName;
-
         /** Returns true if publishing is possible based on if there are un-published mandatory languages */
         function canPublish() {
             

src/Umbraco.Web.UI.Client/src/views/content/overlays/publish.html

@@ -21,7 +21,7 @@
                                   on-change="vm.changeSelection(variant)"
                                   disabled="(variant.canPublish === false)"
                                   server-validation-field="{{variant.htmlId}}"
-                                  text="{{getVariantDisplayName(variant)}}"
+                                  text="{{variant.displayName}}"
                     />
                     <div>
                             <span class="db umb-list-item__description umb-list-item__description--checkbox" ng-if="!publishVariantSelectorForm.publishVariantSelector.$invalid && !(variant.notifications && variant.notifications.length > 0)">
@@ -51,7 +51,7 @@
         <div class="umb-list-item" ng-repeat="variant in vm.variants | filter:vm.pristineVariantFilter">
             <div>
                 <div style="margin-bottom: 2px;">
-                    <span ng-bind="getVariantDisplayName(variant)"></span>
+                    <span ng-bind="variant.displayName"></span>
                     <strong ng-if="variant.language.isMandatory" class="umb-control-required">*</strong>
                 </div>