Pick macro parameters in an infinite editor like content type properties

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

@@ -105,6 +105,20 @@ function macroResource($q, $http, umbRequestHelper) {
             );
         },
 
+        getGroupedParameterEditors: function () {
+            return umbRequestHelper.resourcePromise(
+                $http.get(umbRequestHelper.getApiUrl("macroApiBaseUrl", "GetGroupedParameterEditors"),
+                    "Failed to get parameter editors")
+            );
+        },
+
+        getParameterEditorByAlias: function(alias) {
+            return umbRequestHelper.resourcePromise(
+                $http.get(umbRequestHelper.getApiUrl("macroApiBaseUrl", "GetParameterEditorByAlias", { "alias": alias }),
+                    "Failed to get parameter editor")
+            );
+        },
+
         getById: function(id) {
             return umbRequestHelper.resourcePromise(
                 $http.get(umbRequestHelper.getApiUrl("macroApiBaseUrl", "GetById", { "id": id }), "Failed to get macro")

src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/datatypepicker/datatypepicker.controller.js

@@ -10,7 +10,7 @@
 (function() {
     "use strict";
 
-    function DataTypePicker($scope, $filter, dataTypeResource, dataTypeHelper, contentTypeResource, localizationService, editorService) {
+    function DataTypePicker($scope, $filter, dataTypeResource, contentTypeResource, localizationService, editorService) {
 
         var vm = this;
 
@@ -122,10 +122,18 @@
                 vm.showTabs = false;
 
                 var regex = new RegExp(vm.searchTerm, "i");
+
+                var userConfigured = filterCollection(vm.userConfigured, regex),
+                    typesAndEditors = filterCollection(vm.typesAndEditors, regex);
+
+                var totalResults = _.reduce(_.pluck(_.union(userConfigured, typesAndEditors), 'count'), (m, n) => m + n, 0);
+
                 vm.filterResult = {
-                    userConfigured: filterCollection(vm.userConfigured, regex),
-                    typesAndEditors: filterCollection(vm.typesAndEditors, regex)
+                    userConfigured: userConfigured,
+                    typesAndEditors: typesAndEditors,
+                    totalResults: totalResults
                 };
+
             } else {
                 vm.filterResult = null;
                 vm.showTabs = true;
@@ -134,11 +142,15 @@
 
         function filterCollection(collection, regex) {
             return _.map(_.keys(collection), function (key) {
+
+                var filteredDataTypes = $filter('filter')(collection[key], function (dataType) {
+                    return regex.test(dataType.name) || regex.test(dataType.alias);
+                });
+
                 return {
                     group: key,
-                    dataTypes: $filter('filter')(collection[key], function (dataType) {
-                        return regex.test(dataType.name) || regex.test(dataType.alias);
-                    })
+                    count: filteredDataTypes.length,
+                    dataTypes: filteredDataTypes
                 }
             });
         }
@@ -150,7 +162,6 @@
             propertyDetails.title = property.name;
 
             $scope.model.itemDetails = propertyDetails;
-
         }
 
         function hideDetailsOverlay() {
@@ -177,7 +188,6 @@
             };
 
             editorService.open(dataTypeSettings);
-
         }
 
         function pickDataType(selectedDataType) {
@@ -205,7 +215,7 @@
         }
 
         function close() {
-            if($scope.model.close) {
+            if ($scope.model.close) {
                 $scope.model.close();
             }
         }

src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/datatypepicker/datatypepicker.html

@@ -20,17 +20,19 @@
                         <div class="form-search">
                             <i class="icon-search"></i>
                             <input type="text"
-                                    style="width: 100%"
-                                    ng-change="vm.filterItems()"
-                                    ng-model="vm.searchTerm"
-                                    class="umb-search-field search-query search-input input-block-level"
-                                    localize="placeholder"
-                                    placeholder="@placeholders_filter"
-                                    umb-auto-focus
-                                    no-dirty-check />
+                                   style="width: 100%"
+                                   ng-change="vm.filterItems()"
+                                   ng-model="vm.searchTerm"
+                                   class="umb-search-field search-query search-input input-block-level"
+                                   localize="placeholder"
+                                   placeholder="@placeholders_filter"
+                                   umb-auto-focus
+                                   no-dirty-check />
                         </div>
                     </div>
+
                     <umb-load-indicator ng-if="vm.loading"></umb-load-indicator>
+
                     <!-- TABS -->
                     <div ng-if="vm.showTabs">
                         <umb-tabs-nav
@@ -80,47 +82,56 @@ <h5>{{key}}</h5>
                             </div>
                         </umb-tab-content>
                     </div>
+
                     <!-- FILTER RESULTS -->
                     <div ng-if="vm.filterResult">
-                        <h5 class="-border-bottom -black"><localize key="contentTypeEditor_reuse"></localize></h5>
-                        <div ng-repeat="result in vm.filterResult.userConfigured">
-                            <div ng-if="result.dataTypes.length > 0">
-                                <h5>{{result.group}}</h5>
-                                <ul class="umb-card-grid -four-in-row" ng-mouseleave="vm.hideDetailsOverlay()">
-                                    <li ng-repeat="dataType in result.dataTypes | orderBy:'name'"
-                                        ng-mouseover="vm.showDetailsOverlay(dataType)"
-                                        ng-click="vm.pickDataType(dataType)">
-                                        <div ng-if="dataType.loading" class="umb-card-grid-item__loading">
-                                            <div class="umb-button__progress"></div>
-                                        </div>
-                                        <a class="umb-card-grid-item" href="" title="{{ dataType.name }}">
-                                            <span>
-                                                <i class="{{ dataType.icon }}" ng-class="{'icon-autofill': dataType.icon == null}"></i>
-                                                {{ dataType.name }}
-                                            </span>
-                                        </a>
-                                    </li>
-                                </ul>
+                        <div ng-if="vm.filterResult.totalResults > 0">
+                            <h5 class="-border-bottom -black"><localize key="contentTypeEditor_reuse"></localize></h5>
+                            <div ng-repeat="result in vm.filterResult.userConfigured">
+                                <div ng-if="result.dataTypes.length > 0">
+                                    <h5>{{result.group}}</h5>
+                                    <ul class="umb-card-grid -four-in-row" ng-mouseleave="vm.hideDetailsOverlay()">
+                                        <li ng-repeat="dataType in result.dataTypes | orderBy:'name'"
+                                            ng-mouseover="vm.showDetailsOverlay(dataType)"
+                                            ng-click="vm.pickDataType(dataType)">
+                                            <div ng-if="dataType.loading" class="umb-card-grid-item__loading">
+                                                <div class="umb-button__progress"></div>
+                                            </div>
+                                            <a class="umb-card-grid-item" href="" title="{{dataType.name}}">
+                                                <span>
+                                                    <i class="{{dataType.icon}}" ng-class="{'icon-autofill': dataType.icon == null}"></i>
+                                                    {{dataType.name}}
+                                                </span>
+                                            </a>
+                                        </li>
+                                    </ul>
+                                </div>
                             </div>
                         </div>
-                        <h5 class="-border-bottom -black"><localize key="contentTypeEditor_availableEditors"></localize></h5>
-                        <div ng-repeat="result in vm.filterResult.typesAndEditors">
-                            <div ng-if="result.dataTypes.length > 0">
-                                <h5>{{result.group}}</h5>
-                                <ul class="umb-card-grid -four-in-row" ng-mouseleave="vm.hideDetailsOverlay()">
-                                    <li ng-repeat="systemDataType in result.dataTypes | orderBy:'name'"
-                                        ng-mouseover="vm.showDetailsOverlay(systemDataType)"
-                                        ng-click="vm.pickEditor(systemDataType)">
-                                        <a class="umb-card-grid-item" href="" title="{{ systemDataType.name }}">
-                                            <span>
-                                                <i class="{{ systemDataType.icon }}" ng-class="{'icon-autofill': systemDataType.icon == null}"></i>
-                                                {{ systemDataType.name }}
-                                            </span>
-                                        </a>
-                                    </li>
-                                </ul>
+                        <div ng-if="vm.filterResult.totalResults > 0">
+                            <h5 class="-border-bottom -black"><localize key="contentTypeEditor_availableEditors"></localize></h5>
+                            <div ng-repeat="result in vm.filterResult.typesAndEditors">
+                                <div ng-if="result.dataTypes.length > 0">
+                                    <h5>{{result.group}}</h5>
+                                    <ul class="umb-card-grid -four-in-row" ng-mouseleave="vm.hideDetailsOverlay()">
+                                        <li ng-repeat="systemDataType in result.dataTypes | orderBy:'name'"
+                                            ng-mouseover="vm.showDetailsOverlay(systemDataType)"
+                                            ng-click="vm.pickEditor(systemDataType)">
+                                            <a class="umb-card-grid-item" href="" title="{{systemDataType.name}}">
+                                                <span>
+                                                    <i class="{{systemDataType.icon}}" ng-class="{'icon-autofill': systemDataType.icon == null}"></i>
+                                                    {{systemDataType.name}}
+                                                </span>
+                                            </a>
+                                        </li>
+                                    </ul>
+                                </div>
                             </div>
                         </div>
+
+                        <umb-empty-state position="center" ng-if="vm.filterResult.totalResults === 0">
+                            <localize key="general_searchNoResult"></localize>
+                        </umb-empty-state>
                     </div>
 
                 </umb-box-content>

src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/macroparameterpicker/macroparameterpicker.controller.js

@@ -0,0 +1,127 @@
+/**
+ * @ngdoc controller
+ * @name Umbraco.Editors.MacroParameterPickerController 
+ * @function
+ *
+ * @description
+ * The controller for the content type editor macro parameter dialog
+ */
+
+(function() {
+    "use strict";
+
+    function MacroParameterController($scope, $filter, macroResource, localizationService, editorService) {
+
+        var vm = this;
+
+        vm.searchTerm = "";
+        vm.parameterEditors = [];
+        vm.loading = false;
+        vm.labels = {};
+
+        vm.filterItems = filterItems;
+        vm.showDetailsOverlay = showDetailsOverlay;
+        vm.hideDetailsOverlay = hideDetailsOverlay;
+        vm.pickParameterEditor = pickParameterEditor;
+        vm.close = close;
+
+        function init() {
+            setTitle();
+            getGroupedParameterEditors();
+        }
+
+        function setTitle() {
+            if (!$scope.model.title) {
+                localizationService.localize("defaultdialogs_selectEditor")
+                    .then(function(data){
+                        $scope.model.title = data;
+                    });
+            }
+        }
+
+        function getGroupedParameterEditors() {
+
+            vm.loading = true;
+
+            macroResource.getGroupedParameterEditors().then(function (data) {
+                vm.parameterEditors = data;
+                vm.loading = false;
+            }, function () {
+                vm.loading = false;
+            });
+
+        }
+
+        function filterItems() {
+            // clear item details
+            $scope.model.itemDetails = null;
+
+            if (vm.searchTerm) {
+
+                var regex = new RegExp(vm.searchTerm, "i");
+
+                var parameterEditors = filterCollection(vm.parameterEditors, regex);
+
+                var totalResults = _.reduce(_.pluck(parameterEditors, 'count'), (m, n) => m + n, 0);
+
+                vm.filterResult = {
+                    parameterEditors: parameterEditors,
+                    totalResults: totalResults
+                };
+            } else {
+                vm.filterResult = null;
+            }
+        }
+
+        function filterCollection(collection, regex) {
+            return _.map(_.keys(collection), function (key) {
+
+                var filteredEditors = $filter('filter')(collection[key], function (editor) {
+                    return regex.test(editor.name) || regex.test(editor.alias);
+                });
+
+                return {
+                    group: key,
+                    count: filteredEditors.length,
+                    parameterEditors: filteredEditors
+                }
+            });
+        }
+
+        function showDetailsOverlay(property) {
+
+            var propertyDetails = {};
+            propertyDetails.icon = property.icon;
+            propertyDetails.title = property.name;
+
+            $scope.model.itemDetails = propertyDetails;
+        }
+
+        function hideDetailsOverlay() {
+            $scope.model.itemDetails = null;
+        }
+
+        function pickParameterEditor(selectedParameterEditor) {
+
+            console.log("pickParameterEditor", selectedParameterEditor);
+            console.log("$scope.model", $scope.model);
+
+            $scope.model.parameter.editor = selectedParameterEditor.alias;
+            $scope.model.parameter.dataTypeName = selectedParameterEditor.name;
+            $scope.model.parameter.dataTypeIcon = selectedParameterEditor.icon;
+
+            $scope.model.submit($scope.model);
+        }
+
+        function close() {
+            if ($scope.model.close) {
+                $scope.model.close();
+            }
+        }
+
+        init();
+    }
+
+    angular.module("umbraco").controller("Umbraco.Editors.MacroParameterPickerController", MacroParameterController);
+
+})();