U4-11369 - Add list of content types where a composition content type is used to compositions dialog (#2668)

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

@@ -348,9 +348,10 @@
 
             }
         };
-
+          //select which resource methods to use, eg document Type or Media Type versions
         var availableContentTypeResource = scope.contentType === "documentType" ? contentTypeResource.getAvailableCompositeContentTypes : mediaTypeResource.getAvailableCompositeContentTypes;
-        var countContentTypeResource = scope.contentType === "documentType" ? contentTypeResource.getCount : mediaTypeResource.getCount;
+          var whereUsedContentTypeResource = scope.contentType === "documentType" ? contentTypeResource.getWhereCompositionIsUsedInContentTypes : mediaTypeResource.getWhereCompositionIsUsedInContentTypes;
+          var countContentTypeResource = scope.contentType === "documentType" ? contentTypeResource.getCount : mediaTypeResource.getCount;
 
           //get the currently assigned property type aliases - ensure we pass these to the server side filer
           var propAliasesExisting = _.filter(_.flatten(_.map(scope.model.groups, function(g) {
@@ -363,7 +364,14 @@
           $q.all([
               //get available composite types
               availableContentTypeResource(scope.model.id, [], propAliasesExisting).then(function (result) {
-                  setupAvailableContentTypesModel(result);
+                  setupAvailableContentTypesModel(result); 
+              }),
+                  //get where used document types
+                  whereUsedContentTypeResource(scope.model.id).then(function (whereUsed) {
+                  //pass to the dialog model the content type eg documentType or mediaType 
+                  scope.compositionsDialogModel.section = scope.contentType;
+                  //pass the list of 'where used' document types
+                  scope.compositionsDialogModel.whereCompositionUsed = whereUsed;
               }),
               //get content type count
               countContentTypeResource().then(function(result) {

src/Umbraco.Web.UI.Client/src/common/resources/contenttype.resource.js

@@ -38,7 +38,37 @@ function contentTypeResource($q, $http, umbRequestHelper, umbDataFormatter) {
                        query),
                'Failed to retrieve data for content type id ' + contentTypeId);
         },
-
+         /**
+         * @ngdoc method
+         * @name umbraco.resources.contentTypeResource#getWhereCompositionIsUsedInContentTypes
+         * @methodOf umbraco.resources.contentTypeResource
+         *
+         * @description
+         * Returns a list of content types which use a specific composition with a given id
+         *
+         * ##usage
+         * <pre>
+         * contentTypeResource.getWhereCompositionIsUsedInContentTypes(1234)
+         *    .then(function(contentTypeList) {
+         *        console.log(contentTypeList);
+         *    });
+         * </pre>
+         * @param {Int} contentTypeId id of the composition content type to retrieve the list of the content types where it has been used
+         * @returns {Promise} resourcePromise object.
+         *
+         */
+        getWhereCompositionIsUsedInContentTypes: function (contentTypeId) {
+            var query = {
+                contentTypeId: contentTypeId
+            };
+            return umbRequestHelper.resourcePromise(
+                $http.post(
+                    umbRequestHelper.getApiUrl(
+                        "contentTypeApiBaseUrl",
+                        "GetWhereCompositionIsUsedInContentTypes"),
+                    query),
+                'Failed to retrieve data for content type id ' + contentTypeId);
+        },
 
         /**
          * @ngdoc method

src/Umbraco.Web.UI.Client/src/common/resources/mediatype.resource.js

@@ -38,7 +38,38 @@ function mediaTypeResource($q, $http, umbRequestHelper, umbDataFormatter) {
                        query),
                'Failed to retrieve data for content type id ' + contentTypeId);
         },
+               /**
+         * @ngdoc method
+         * @name umbraco.resources.mediaTypeResource#getWhereCompositionIsUsedInContentTypes
+         * @methodOf umbraco.resources.mediaTypeResource
+         *
+         * @description
+         * Returns a list of media types which use a specific composition with a given id
+         *
+         * ##usage
+         * <pre>
+         * mediaTypeResource.getWhereCompositionIsUsedInContentTypes(1234)
+         *    .then(function(mediaTypeList) {
+         *        console.log(mediaTypeList);
+         *    });
+         * </pre>
+         * @param {Int} contentTypeId id of the composition content type to retrieve the list of the media types where it has been used
+         * @returns {Promise} resourcePromise object.
+         *
+         */
+        getWhereCompositionIsUsedInContentTypes: function (contentTypeId) {
+            var query = {
+                contentTypeId: contentTypeId
+            };
 
+            return umbRequestHelper.resourcePromise(
+                $http.post(
+                    umbRequestHelper.getApiUrl(
+                        "mediaTypeApiBaseUrl",
+                        "GetWhereCompositionIsUsedInContentTypes"),
+                    query),
+                'Failed to retrieve data for content type id ' + contentTypeId);
+        },
         /**
          * @ngdoc method
          * @name umbraco.resources.mediaTypeResource#getAllowedTypes

src/Umbraco.Web.UI.Client/src/views/common/overlays/contenttypeeditor/compositions/compositions.controller.js

@@ -1,17 +1,23 @@
  (function() {
 	"use strict";
 
-	function CompositionsOverlay($scope) {
+	function CompositionsOverlay($scope,$location) {
 
         var vm = this;
 
         vm.isSelected = isSelected;
+        vm.openContentType = openContentType;
 
         function isSelected(alias) {
             if($scope.model.contentType.compositeContentTypes.indexOf(alias) !== -1) {
                 return true;
             }
         }
+        function openContentType(contentType, section) {
+            
+            var url = (section === "documentType" ? "/settings/documenttypes/edit/" : "/settings/mediaTypes/edit/") + contentType.id;
+            $location.path(url);
+        }
 	}
 
 	angular.module("umbraco").controller("Umbraco.Overlays.CompositionsOverlay", CompositionsOverlay);

src/Umbraco.Web.UI.Client/src/views/common/overlays/contenttypeeditor/compositions/compositions.html

@@ -22,11 +22,16 @@
                      position="center">
         <localize key="contentTypeEditor_noAvailableCompositions"></localize>
     </umb-empty-state>
-    <umb-empty-state ng-if="model.availableCompositeContentTypes.length === 0 && model.totalContentTypes > 1"
-                     position="center">
+    <umb-empty-state ng-if="model.availableCompositeContentTypes.length === 0 && model.totalContentTypes > 1">
         <localize key="contentTypeEditor_compositionInUse"></localize>
     </umb-empty-state>
-
+    <div ng-if="model.availableCompositeContentTypes.length === 0 && model.totalContentTypes > 1 && model.whereCompositionUsed.length > 0">
+        <h5><localize key="contentTypeEditor_compositionUsageHeading"></localize></h5>
+        <p><localize key="contentTypeEditor_compositionUsageSpecification"></localize></p>
+        <ul class="umb-checkbox-list">
+            <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"
@@ -50,4 +55,4 @@
 
         </li>
     </ul>
-</div>
+</div>