From 6e2c143d0060b1f56dc13e674c8075762a1512c1 Mon Sep 17 00:00:00 2001
From: Kenn Jacobsen <kja@vertica.dk>
Date: Mon, 18 Mar 2019 12:16:20 +0100
Subject: [PATCH] Improve the filtering in the datatype picker

---
 .../datatypepicker.controller.js              | 23 +++++++++++++++----
 .../datatypepicker/datatypepicker.html        | 18 +++++++--------
 2 files changed, 28 insertions(+), 13 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/datatypepicker/datatypepicker.controller.js b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/datatypepicker/datatypepicker.controller.js
index 9836b72468..c86f55b255 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/datatypepicker/datatypepicker.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/datatypepicker/datatypepicker.controller.js
@@ -10,7 +10,7 @@
 (function() {
     "use strict";
 
-    function DataTypePicker($scope, dataTypeResource, dataTypeHelper, contentTypeResource, localizationService, editorService) {
+    function DataTypePicker($scope, $filter, dataTypeResource, dataTypeHelper, contentTypeResource, localizationService, editorService) {
 
         var vm = this;
 
@@ -119,13 +119,28 @@
             $scope.model.itemDetails = null;
 
             if (vm.searchTerm) {
-                vm.showFilterResult = true;
                 vm.showTabs = false;
+
+                var regex = new RegExp(vm.searchTerm, "i");
+                vm.filterResult = {
+                    userConfigured: filterCollection(vm.userConfigured, regex),
+                    typesAndEditors: filterCollection(vm.typesAndEditors, regex)
+                };
             } else {
-                vm.showFilterResult = false;
+                vm.filterResult = null;
                 vm.showTabs = true;
             }
+        }
 
+        function filterCollection(collection, regex) {
+            return _.map(_.keys(collection), function (key) {
+                return {
+                    group: key,
+                    dataTypes: $filter('filter')(collection[key], function (dataType) {
+                        return regex.test(dataType.name) || regex.test(dataType.alias);
+                    })
+                }
+            });
         }
 
         function showDetailsOverlay(property) {
@@ -201,4 +216,4 @@
 
     angular.module("umbraco").controller("Umbraco.Editors.DataTypePickerController", DataTypePicker);
 
-})();
\ No newline at end of file
+})();
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/datatypepicker/datatypepicker.html b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/datatypepicker/datatypepicker.html
index f3f991c63e..43933f8051 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/datatypepicker/datatypepicker.html
+++ b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/datatypepicker/datatypepicker.html
@@ -79,13 +79,13 @@
                         </umb-tab-content>
                     </div>
                     <!-- FILTER RESULTS -->
-                    <div ng-if="vm.showFilterResult">
+                    <div ng-if="vm.filterResult">
                         <h5 class="-border-bottom -black"><localize key="contentTypeEditor_reuse"></localize></h5>
-                        <div ng-repeat="(key,value) in vm.userConfigured">
-                            <div ng-if="(value | filter:vm.searchTerm).length > 0">
-                                <h5>{{key}}</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" ng-mouseleave="vm.hideDetailsOverlay()">
-                                    <li ng-repeat="dataType in value | orderBy:'name' | filter: vm.searchTerm"
+                                    <li ng-repeat="dataType in result.dataTypes | orderBy:'name'"
                                         ng-mouseover="vm.showDetailsOverlay(dataType)"
                                         ng-click="vm.pickDataType(dataType)"
                                         class="-four-in-row">
@@ -101,11 +101,11 @@
                             </div>
                         </div>
                         <h5 class="-border-bottom -black"><localize key="contentTypeEditor_availableEditors"></localize></h5>
-                        <div ng-repeat="(key,value) in vm.typesAndEditors">
-                            <div ng-if="(value | filter:vm.searchTerm).length > 0">
-                                <h5>{{key}}</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" ng-mouseleave="vm.hideDetailsOverlay()">
-                                    <li ng-repeat="systemDataType in value | orderBy:'name' | filter: vm.searchTerm"
+                                    <li ng-repeat="systemDataType in result.dataTypes | orderBy:'name'"
                                         ng-mouseover="vm.showDetailsOverlay(systemDataType)"
                                         ng-click="vm.pickEditor(systemDataType)"
                                         class="-four-in-row">