Merge pull request #1031 from umbraco/temp-U4-7683

Fixes: U4-7683 Search on Property Editors/Data Types in new Content Type Editor should display two results - resuse / available

src/Umbraco.Web.UI.Client/src/less/main.less

@@ -34,6 +34,15 @@ h5{
   margin-top: 15px;
 }
 
+h5.-border-bottom {
+	border-bottom: 1px solid #ECECEC;
+	padding-bottom: 5px;
+}
+
+h5.-black {
+	color: @black;
+}
+
 /* MISC FORM ELEMENTS */
 .umb-form-actions {
     background: none;

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

@@ -7,191 +7,207 @@
  * The controller for the content type editor property dialog
  */
 
- (function() {
-	"use strict";
+(function() {
+    "use strict";
 
-	function EditorPickerOverlay($scope, dataTypeResource, dataTypeHelper, contentTypeResource, localizationService) {
+    function EditorPickerOverlay($scope, dataTypeResource, dataTypeHelper, contentTypeResource, localizationService) {
 
-		var vm = this;
+        var vm = this;
 
-        if(!$scope.model.title) {
+        if (!$scope.model.title) {
             $scope.model.title = localizationService.localize("defaultdialogs_selectEditor");
         }
 
-		vm.searchTerm = "";
-		vm.showTabs = false;
-		vm.tabsLoaded = 0;
-		vm.tabs = [
-			{
-				active: true,
-				id: 1,
-                label: localizationService.localize("contentTypeEditor_availableEditors"),
-				alias: "Default",
-				typesAndEditors: []
-			},
-			{
-				active: false,
-				id: 2,
-                label: localizationService.localize("contentTypeEditor_reuse"),
-				alias: "Reuse",
-				userConfigured: []
-			}
-		];
+        vm.searchTerm = "";
+        vm.showTabs = false;
+        vm.tabsLoaded = 0;
+        vm.typesAndEditors = [];
+        vm.userConfigured = [];
+        vm.loading = false;
+        vm.tabs = [{
+            active: true,
+            id: 1,
+            label: localizationService.localize("contentTypeEditor_availableEditors"),
+            alias: "Default",
+            typesAndEditors: []
+        }, {
+            active: false,
+            id: 2,
+            label: localizationService.localize("contentTypeEditor_reuse"),
+            alias: "Reuse",
+            userConfigured: []
+        }];
 
-      vm.filterItems = filterItems;
-		vm.showDetailsOverlay = showDetailsOverlay;
-		vm.hideDetailsOverlay = hideDetailsOverlay;
-      vm.pickEditor = pickEditor;
-      vm.pickDataType = pickDataType;
+        vm.filterItems = filterItems;
+        vm.showDetailsOverlay = showDetailsOverlay;
+        vm.hideDetailsOverlay = hideDetailsOverlay;
+        vm.pickEditor = pickEditor;
+        vm.pickDataType = pickDataType;
 
-		function activate() {
+        function activate() {
 
-			getGroupedDataTypes();
-			getGroupedPropertyEditors();
+            getGroupedDataTypes();
+            getGroupedPropertyEditors();
 
-		}
+        }
 
-		function getGroupedPropertyEditors() {
+        function getGroupedPropertyEditors() {
 
-			dataTypeResource.getGroupedPropertyEditors().then(function(data){
-				vm.tabs[0].typesAndEditors = data;
-				vm.tabsLoaded = vm.tabsLoaded + 1;
-				checkIfTabContentIsLoaded();
-			});
+            vm.loading = true;
 
-		}
+            dataTypeResource.getGroupedPropertyEditors().then(function(data) {
+                vm.tabs[0].typesAndEditors = data;
+                vm.typesAndEditors = data;
+                vm.tabsLoaded = vm.tabsLoaded + 1;
+                checkIfTabContentIsLoaded();
+            });
 
-		function getGroupedDataTypes() {
+        }
 
-		    dataTypeResource.getGroupedDataTypes().then(function (data) {
-				vm.tabs[1].userConfigured = data;
-				vm.tabsLoaded = vm.tabsLoaded + 1;
-				checkIfTabContentIsLoaded();
-			});
+        function getGroupedDataTypes() {
 
-		}
+            vm.loading = true;
 
-		function checkIfTabContentIsLoaded() {
-			if(vm.tabsLoaded === 2) {
-				vm.showTabs = true;
-			}
-		}
+            dataTypeResource.getGroupedDataTypes().then(function(data) {
+                vm.tabs[1].userConfigured = data;
+                vm.userConfigured = data;
+                vm.tabsLoaded = vm.tabsLoaded + 1;
+                checkIfTabContentIsLoaded();
+            });
 
-      function filterItems() {
-         // clear item details
-         $scope.model.itemDetails = null;
-      }
+        }
 
-		function showDetailsOverlay(property) {
+        function checkIfTabContentIsLoaded() {
+            if (vm.tabsLoaded === 2) {
+                vm.loading = false;
+                vm.showTabs = true;
+            }
+        }
 
-			var propertyDetails = {};
-			propertyDetails.icon = property.icon;
-			propertyDetails.title = property.name;
+        function filterItems() {
+            // clear item details
+            $scope.model.itemDetails = null;
 
-			$scope.model.itemDetails = propertyDetails;
-
-		}
-
-		function hideDetailsOverlay() {
-			$scope.model.itemDetails = null;
-		}
-
-      function pickEditor(editor) {
-
-          var parentId = -1;
-
-          dataTypeResource.getScaffold(parentId).then(function(dataType) {
-
-            // set alias
-            dataType.selectedEditor = editor.alias;
-
-            // set name
-            var nameArray = [];
-
-            if($scope.model.contentTypeName) {
-              nameArray.push($scope.model.contentTypeName);
+            if (vm.searchTerm) {
+                vm.showFilterResult = true;
+                vm.showTabs = false;
+            } else {
+                vm.showFilterResult = false;
+                vm.showTabs = true;
             }
 
-            if($scope.model.property.label) {
-              nameArray.push($scope.model.property.label);
-            }
+        }
 
-            if(editor.name) {
-              nameArray.push(editor.name);
-            }
+        function showDetailsOverlay(property) {
 
-            // make name
-            dataType.name = nameArray.join(" - ");
+            var propertyDetails = {};
+            propertyDetails.icon = property.icon;
+            propertyDetails.title = property.name;
 
-            // get pre values
-            dataTypeResource.getPreValues(dataType.selectedEditor).then(function(preValues) {
+            $scope.model.itemDetails = propertyDetails;
 
-              dataType.preValues = preValues;
+        }
 
-              openEditorSettingsOverlay(dataType, true);
+        function hideDetailsOverlay() {
+            $scope.model.itemDetails = null;
+        }
+
+        function pickEditor(editor) {
+
+            var parentId = -1;
+
+            dataTypeResource.getScaffold(parentId).then(function(dataType) {
+
+                // set alias
+                dataType.selectedEditor = editor.alias;
+
+                // set name
+                var nameArray = [];
+
+                if ($scope.model.contentTypeName) {
+                    nameArray.push($scope.model.contentTypeName);
+                }
+
+                if ($scope.model.property.label) {
+                    nameArray.push($scope.model.property.label);
+                }
+
+                if (editor.name) {
+                    nameArray.push(editor.name);
+                }
+
+                // make name
+                dataType.name = nameArray.join(" - ");
+
+                // get pre values
+                dataTypeResource.getPreValues(dataType.selectedEditor).then(function(preValues) {
+
+                    dataType.preValues = preValues;
+
+                    openEditorSettingsOverlay(dataType, true);
+
+                });
 
             });
 
-          });
+        }
 
-      }
+        function pickDataType(selectedDataType) {
 
-      function pickDataType(selectedDataType) {
+            dataTypeResource.getById(selectedDataType.id).then(function(dataType) {
+                contentTypeResource.getPropertyTypeScaffold(dataType.id).then(function(propertyType) {
+                    submitOverlay(dataType, propertyType, false);
+                });
+            });
 
-          dataTypeResource.getById(selectedDataType.id).then(function(dataType) {
-             contentTypeResource.getPropertyTypeScaffold(dataType.id).then(function(propertyType) {
-                submitOverlay(dataType, propertyType, false);
-             });
-          });
+        }
 
-      }
+        function openEditorSettingsOverlay(dataType, isNew) {
+            vm.editorSettingsOverlay = {
+                title: localizationService.localize("contentTypeEditor_editorSettings"),
+                dataType: dataType,
+                view: "views/common/overlays/contenttypeeditor/editorsettings/editorsettings.html",
+                show: true,
+                submit: function(model) {
+                    var preValues = dataTypeHelper.createPreValueProps(model.dataType.preValues);
 
-      function openEditorSettingsOverlay(dataType, isNew) {
-         vm.editorSettingsOverlay = {
-             title: localizationService.localize("contentTypeEditor_editorSettings"),
-             dataType: dataType,
-             view: "views/common/overlays/contenttypeeditor/editorsettings/editorsettings.html",
-             show: true,
-             submit: function(model) {
-                 var preValues = dataTypeHelper.createPreValueProps(model.dataType.preValues);
+                    dataTypeResource.save(model.dataType, preValues, isNew).then(function(newDataType) {
 
-                 dataTypeResource.save(model.dataType, preValues, isNew).then(function(newDataType) {
+                        contentTypeResource.getPropertyTypeScaffold(newDataType.id).then(function(propertyType) {
 
-                    contentTypeResource.getPropertyTypeScaffold(newDataType.id).then(function(propertyType) {
+                            submitOverlay(newDataType, propertyType, true);
 
-                       submitOverlay(newDataType, propertyType, true);
+                            vm.editorSettingsOverlay.show = false;
+                            vm.editorSettingsOverlay = null;
 
-                       vm.editorSettingsOverlay.show = false;
-                       vm.editorSettingsOverlay = null;
+                        });
 
                     });
+                }
+            };
 
-                 });
-             }
-         };
+        }
 
-      }
+        function submitOverlay(dataType, propertyType, isNew) {
 
-      function submitOverlay(dataType, propertyType, isNew) {
+            // update property
+            $scope.model.property.config = propertyType.config;
+            $scope.model.property.editor = propertyType.editor;
+            $scope.model.property.view = propertyType.view;
+            $scope.model.property.dataTypeId = dataType.id;
+            $scope.model.property.dataTypeIcon = dataType.icon;
+            $scope.model.property.dataTypeName = dataType.name;
 
-         // update property
-         $scope.model.property.config = propertyType.config;
-         $scope.model.property.editor = propertyType.editor;
-         $scope.model.property.view = propertyType.view;
-         $scope.model.property.dataTypeId = dataType.id;
-         $scope.model.property.dataTypeIcon = dataType.icon;
-         $scope.model.property.dataTypeName = dataType.name;
+            $scope.model.updateSameDataTypes = isNew;
 
-         $scope.model.updateSameDataTypes = isNew;
+            $scope.model.submit($scope.model);
 
-         $scope.model.submit($scope.model);
+        }
 
-      }
+        activate();
 
-		activate();
+    }
 
-	}
-
-	angular.module("umbraco").controller("Umbraco.Overlays.EditorPickerOverlay", EditorPickerOverlay);
+    angular.module("umbraco").controller("Umbraco.Overlays.EditorPickerOverlay", EditorPickerOverlay);
 
 })();

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

@@ -1,5 +1,6 @@
 <div class="umb-overlay-body" ng-controller="Umbraco.Overlays.EditorPickerOverlay as vm">
 
+	<!-- FILTER -->
 	<div class="umb-control-group -no-border">
 		<div class="form-search">
 			<i class="icon-search"></i>
@@ -7,13 +8,16 @@
 				style="width: 100%"
 				ng-change="vm.filterItems()"
 				ng-model="vm.searchTerm"
-				class="umb-search-field search-query input-block-level"
+				class="umb-search-field search-query search-input input-block-level"
 				localize="placeholder"
 	            placeholder="@placeholders_filter"
 				umb-auto-focus>
 		</div>
 	</div>
 
+	<umb-load-indicator ng-if="vm.loading"></umb-load-indicator>
+
+	<!-- TABS -->
 	<div ng-if="vm.showTabs">
 
 		<umb-tabs-nav model="vm.tabs"></umb-tabs-nav>
@@ -21,53 +25,39 @@
 		<umb-tabs-content>
 
 			<umb-tab id="tab{{tab.id}}" ng-repeat="tab in vm.tabs" rel="{{tab.id}}">
+
 				<div ng-if="tab.alias==='Default'">
-
 					<div ng-repeat="(key,value) in tab.typesAndEditors">
-
-						<div ng-if="(value | filter:vm.searchTerm).length > 0">
-							<h5>{{key}}</h5>
-
-							<ul class="umb-card-grid" ng-mouseleave="vm.hideDetailsOverlay()">
-								<li	ng-repeat="systemDataType in value | orderBy:'name' | filter: vm.searchTerm"
-								 	ng-mouseover="vm.showDetailsOverlay(systemDataType)"
-									ng-click="vm.pickEditor(systemDataType)"
-									class="-four-in-row">
-									<a href="" title="{{ systemDataType.name }}">
-										<i class="{{ systemDataType.icon }}" ng-class="{'icon-autofill': systemDataType.icon == null}"></i>
-										{{ systemDataType.name }}
-									</a>
-								</li>
-							</ul>
-
-						</div>
-
+						<h5>{{key}}</h5>
+						<ul class="umb-card-grid" ng-mouseleave="vm.hideDetailsOverlay()">
+							<li	ng-repeat="systemDataType in value | orderBy:'name'"
+								ng-mouseover="vm.showDetailsOverlay(systemDataType)"
+								ng-click="vm.pickEditor(systemDataType)"
+								class="-four-in-row">
+								<a href="" title="{{ systemDataType.name }}">
+									<i class="{{ systemDataType.icon }}" ng-class="{'icon-autofill': systemDataType.icon == null}"></i>
+									{{ systemDataType.name }}
+								</a>
+							</li>
+						</ul>
 					</div>
 				</div>
 
 				<div ng-if="tab.alias==='Reuse'">
-
 					<div ng-repeat="(key,value) in tab.userConfigured">
-
-						<div ng-if="(value | filter:vm.searchTerm).length > 0">
-							<h5>{{key}}</h5>
-
-							<ul class="umb-card-grid" ng-mouseleave="vm.hideDetailsOverlay()">
-								<li ng-repeat="dataType in value | orderBy:'name' | filter: vm.searchTerm"
-									ng-mouseover="vm.showDetailsOverlay(dataType)"
-									ng-click="vm.pickDataType(dataType)"
-									class="-four-in-row">
-									<a href="" title="{{ dataType.name }}">
-										<i class="{{ dataType.icon }}" ng-class="{'icon-autofill': dataType.icon == null}"></i>
-										{{ dataType.name }}
-									</a>
-								</li>
-							</ul>
-
-						</div>
-
+						<h5>{{key}}</h5>
+						<ul class="umb-card-grid" ng-mouseleave="vm.hideDetailsOverlay()">
+							<li ng-repeat="dataType in value | orderBy:'name'"
+								ng-mouseover="vm.showDetailsOverlay(dataType)"
+								ng-click="vm.pickDataType(dataType)"
+								class="-four-in-row">
+								<a href="" title="{{ dataType.name }}">
+									<i class="{{ dataType.icon }}" ng-class="{'icon-autofill': dataType.icon == null}"></i>
+									{{ dataType.name }}
+								</a>
+							</li>
+						</ul>
 					</div>
-
 				</div>
 
 			</umb-tab>
@@ -76,6 +66,47 @@
 
 	</div>
 
+	<!-- FILTER RESULTS -->
+	<div ng-if="vm.showFilterResult">
+
+		<h5 class="-border-bottom -black">Reuse</h5>
+		<div ng-repeat="(key,value) in vm.userConfigured">
+			<div ng-if="(value | filter:vm.searchTerm).length > 0">
+				<h5>{{key}}</h5>
+				<ul class="umb-card-grid" ng-mouseleave="vm.hideDetailsOverlay()">
+					<li ng-repeat="dataType in value | orderBy:'name' | filter: vm.searchTerm"
+						ng-mouseover="vm.showDetailsOverlay(dataType)"
+						ng-click="vm.pickDataType(dataType)"
+						class="-four-in-row">
+						<a href="" title="{{ dataType.name }}">
+							<i class="{{ dataType.icon }}" ng-class="{'icon-autofill': dataType.icon == null}"></i>
+							{{ dataType.name }}
+						</a>
+					</li>
+				</ul>
+			</div>
+		</div>
+
+		<h5 class="-border-bottom -black">Available editors</h5>
+		<div ng-repeat="(key,value) in vm.typesAndEditors">
+			<div ng-if="(value | filter:vm.searchTerm).length > 0">
+				<h5>{{key}}</h5>
+				<ul class="umb-card-grid" ng-mouseleave="vm.hideDetailsOverlay()">
+					<li	ng-repeat="systemDataType in value | orderBy:'name' | filter: vm.searchTerm"
+						ng-mouseover="vm.showDetailsOverlay(systemDataType)"
+						ng-click="vm.pickEditor(systemDataType)"
+						class="-four-in-row">
+						<a href="" title="{{ systemDataType.name }}">
+							<i class="{{ systemDataType.icon }}" ng-class="{'icon-autofill': systemDataType.icon == null}"></i>
+							{{ systemDataType.name }}
+						</a>
+					</li>
+				</ul>
+			</div>
+		</div>
+
+	</div>
+
 	<umb-overlay
 		ng-if="vm.editorSettingsOverlay.show"
 		model="vm.editorSettingsOverlay"