From 47ccc8f584ee84445f22365113c34faad62399bc Mon Sep 17 00:00:00 2001
From: Kenn Jacobsen <post@kennjacobsen.dk>
Date: Wed, 19 Dec 2018 17:59:31 +0100
Subject: [PATCH] Group content and media types by folder when setting up
 compositions (#3900)

---
 .../compositions/compositions.controller.js   | 17 ++++++-
 .../compositions/compositions.html            | 47 ++++++++++---------
 .../Editors/ContentTypeControllerBase.cs      | 30 ++++++++++--
 3 files changed, 69 insertions(+), 25 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/views/common/overlays/contenttypeeditor/compositions/compositions.controller.js b/src/Umbraco.Web.UI.Client/src/views/common/overlays/contenttypeeditor/compositions/compositions.controller.js
index 7e768336a6..f8da6da986 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/overlays/contenttypeeditor/compositions/compositions.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/common/overlays/contenttypeeditor/compositions/compositions.controller.js
@@ -1,13 +1,28 @@
  (function() {
 	"use strict";
 
-	function CompositionsOverlay($scope,$location) {
+	function CompositionsOverlay($scope,$location,$filter) {
 
         var vm = this;
 
         vm.isSelected = isSelected;
         vm.openContentType = openContentType;
 
+        // group the content types by their container paths
+        vm.availableGroups = $filter("orderBy")(
+            _.map(
+                _.groupBy($scope.model.availableCompositeContentTypes, function (compositeContentType) {
+                    return compositeContentType.contentType.metaData.containerPath;
+                }), function(group) {
+                    return {
+                        containerPath: group[0].contentType.metaData.containerPath,
+                        compositeContentTypes: group
+                    };
+                }
+            ), function (group) {
+                return group.containerPath.replace(/\//g, " ");
+            });
+
         function isSelected(alias) {
             if($scope.model.contentType.compositeContentTypes.indexOf(alias) !== -1) {
                 return true;
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/overlays/contenttypeeditor/compositions/compositions.html b/src/Umbraco.Web.UI.Client/src/views/common/overlays/contenttypeeditor/compositions/compositions.html
index f2d8902f9d..0c026fc9c5 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/overlays/contenttypeeditor/compositions/compositions.html
+++ b/src/Umbraco.Web.UI.Client/src/views/common/overlays/contenttypeeditor/compositions/compositions.html
@@ -32,27 +32,32 @@
             <li class="umb-checkbox-list__item" ng-repeat="contentTypeEntity in model.whereCompositionUsed"><a ng-click="vm.openContentType(contentTypeEntity.contentType, model.section)"><i class="{{contentTypeEntity.contentType.icon}}"></i>&nbsp;{{contentTypeEntity.contentType.name}}</a></li>
         </ul>
     </div>
-    <ul class="umb-checkbox-list">
-        <li class="umb-checkbox-list__item"
-            ng-repeat="compositeContentType in model.availableCompositeContentTypes | filter:searchTerm"
-            ng-class="{'-disabled': compositeContentType.allowed===false || compositeContentType.inherited, '-selected': vm.isSelected(compositeContentType.contentType.alias)}">
+    <div ng-if="vm.availableGroups.length > 0">
+        <ul class="umb-checkbox-list" ng-repeat="group in vm.availableGroups | filter:searchTerm">
+            <li style="font-weight: bold" ng-show="vm.availableGroups.length > 1">
+                <i class="icon-folder umb-checkbox-list__item-icon"></i>
+                {{group.containerPath}}
+            </li>
+            <li class="umb-checkbox-list__item"
+                ng-repeat="compositeContentType in group.compositeContentTypes | orderBy:'contentType.name' | filter:searchTerm"
+                ng-class="{'-disabled': compositeContentType.allowed===false || compositeContentType.inherited, '-selected': vm.isSelected(compositeContentType.contentType.alias)}">
 
-            <div class="umb-checkbox-list__item-checkbox"
-                 ng-class="{ '-selected': model.compositeContentTypes.indexOf(compositeContentType.contentType.alias)+1 }">
-                <input type="checkbox"
-                       id="umb-overlay-comp-{{compositeContentType.contentType.key}}"
-                       checklist-model="model.compositeContentTypes"
-                       checklist-value="compositeContentType.contentType.alias"
-                       ng-change="model.selectCompositeContentType(compositeContentType.contentType)"
-                       ng-disabled="compositeContentType.allowed===false || compositeContentType.inherited" />
-            </div>
+                <div class="umb-checkbox-list__item-checkbox"
+                     ng-class="{ '-selected': model.compositeContentTypes.indexOf(compositeContentType.contentType.alias)+1 }">
+                    <input type="checkbox"
+                           id="umb-overlay-comp-{{compositeContentType.contentType.key}}"
+                           checklist-model="model.compositeContentTypes"
+                           checklist-value="compositeContentType.contentType.alias"
+                           ng-change="model.selectCompositeContentType(compositeContentType.contentType)"
+                           ng-disabled="compositeContentType.allowed===false || compositeContentType.inherited" />
+                </div>
 
-            <label for="umb-overlay-comp-{{compositeContentType.contentType.key}}" class="umb-checkbox-list__item-text" ng-class="{'-faded': compositeContentType.allowed===false}">
-                <i class="{{ compositeContentType.contentType.icon }} umb-checkbox-list__item-icon"></i>
-                {{ compositeContentType.contentType.name }}
-                <span class="umb-checkbox-list__item-caption" ng-if="compositeContentType.inherited">(inherited)</span>
-            </label>
-
-        </li>
-    </ul>
+                <label for="umb-overlay-comp-{{compositeContentType.contentType.key}}" class="umb-checkbox-list__item-text" ng-class="{'-faded': compositeContentType.allowed===false}">
+                    <i class="{{ compositeContentType.contentType.icon }} umb-checkbox-list__item-icon"></i>
+                    {{ compositeContentType.contentType.name }}
+                    <span class="umb-checkbox-list__item-caption" ng-if="compositeContentType.inherited">(inherited)</span>
+                </label>
+            </li>
+        </ul>
+    </div>
 </div>
diff --git a/src/Umbraco.Web/Editors/ContentTypeControllerBase.cs b/src/Umbraco.Web/Editors/ContentTypeControllerBase.cs
index 1d728c63a5..5c75bc07f7 100644
--- a/src/Umbraco.Web/Editors/ContentTypeControllerBase.cs
+++ b/src/Umbraco.Web/Editors/ContentTypeControllerBase.cs
@@ -109,6 +109,25 @@ namespace Umbraco.Web.Editors
 
             var availableCompositions = Services.ContentTypeService.GetAvailableCompositeContentTypes(source, allContentTypes, filterContentTypes, filterPropertyTypes);
 
+            Func<IContentTypeComposition, IEnumerable<EntityContainer>> getEntityContainers = contentType =>
+            {
+                if (contentType == null)
+                {
+                    return null;
+                }
+                switch (type)
+                {
+                    case UmbracoObjectTypes.DocumentType:
+                        return Services.ContentTypeService.GetContentTypeContainers(contentType as IContentType);
+                    case UmbracoObjectTypes.MediaType:
+                        return Services.ContentTypeService.GetMediaTypeContainers(contentType as IMediaType);
+                    case UmbracoObjectTypes.MemberType:
+                        return new EntityContainer[0];
+                    default:
+                        throw new ArgumentOutOfRangeException("The entity type was not a content type");
+                }
+            };
+
             var currCompositions = source == null ? new IContentTypeComposition[] { } : source.ContentTypeComposition.ToArray();
             var compAliases = currCompositions.Select(x => x.Alias).ToArray();
             var ancestors = availableCompositions.Ancestors.Select(x => x.Alias);
@@ -117,9 +136,6 @@ namespace Umbraco.Web.Editors
                 .Select(x => new Tuple<EntityBasic, bool>(Mapper.Map<IContentTypeComposition, EntityBasic>(x.Composition), x.Allowed))
                 .Select(x =>
                 {
-                    //translate the name
-                    x.Item1.Name = TranslateItem(x.Item1.Name);
-
                     //we need to ensure that the item is enabled if it is already selected
                     // but do not allow it if it is any of the ancestors
                     if (compAliases.Contains(x.Item1.Alias) && ancestors.Contains(x.Item1.Alias) == false)
@@ -128,6 +144,14 @@ namespace Umbraco.Web.Editors
                         x = new Tuple<EntityBasic, bool>(x.Item1, true);
                     }
 
+                    //translate the name
+                    x.Item1.Name = TranslateItem(x.Item1.Name);
+
+                    var contentType = allContentTypes.FirstOrDefault(c => c.Key == x.Item1.Key);
+                    var containers = getEntityContainers(contentType)?.ToArray();
+                    var containerPath = $"/{(containers != null && containers.Any() ? $"{string.Join("/", containers.Select(c => c.Name))}/" : null)}";
+                    x.Item1.AdditionalData["containerPath"] = containerPath;
+
                     return x;
                 })
                 .ToList();