Filter block cards and show empty message (#11729)

src/Umbraco.Web.UI.Client/src/common/filters/umbCmsBlockCard.filter.js

@@ -0,0 +1,49 @@
+/**
+ * @ngdoc filter
+ * @name umbraco.filters.filter:umbCmsBlockCard
+ * @namespace umbCmsBlockCard
+ * 
+ * @description
+ * Filter block cards based on specific properties.
+ * 
+ */
+angular.module("umbraco.filters").filter('umbCmsBlockCard', function () {
+  return function (array, searchTerm) {
+    // If no array is given, exit.
+    if (!array) {
+      return;
+    }
+    // If no search term exists, return the array unfiltered.
+    else if (!searchTerm) {
+      return array;
+    }
+    // Otherwise, continue.
+    else {
+      // Convert filter text to lower case.
+      const term = searchTerm.toLowerCase();
+
+      // Return the filtered array
+      return array.filter((block, i) => {
+        const props = ['id', 'key', 'udi', 'alias', 'name', 'description'];
+
+        let found = false;
+
+        for (let i = 0; i < props.length; i++) {
+
+          if (!block.elementTypeModel.hasOwnProperty(props[i])) {
+            continue;
+          }
+
+          if (block.elementTypeModel[props[i]] != null &&
+             block.elementTypeModel[props[i]] !== '' &&
+             block.elementTypeModel[props[i]].toString().toLowerCase().includes(term)) {
+             found = true;
+          }
+        }
+
+        return found;
+
+      })
+    }
+  }
+});

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

@@ -27,17 +27,23 @@
                     </umb-search-filter>
                 </div>
 
-                <div class="umb-block-card-grid">
+                <div class="umb-block-card-grid" ng-show="filteredBlocks.length > 0">
 
                     <umb-block-card
                         class="umb-outline"
-                        ng-repeat="block in vm.model.availableItems | filter: vm.filter.searchTerm"
+                        ng-repeat="block in filteredBlocks = (vm.model.availableItems | umbCmsBlockCard: vm.filter.searchTerm)"
                         block-config-model="block.blockConfigModel"
                         element-type-model="block.elementTypeModel"
                         ng-click="vm.selectItem(block, $event)">
                     </umb-block-card>
 
                 </div>
+
+                <umb-empty-state ng-if="filteredBlocks.length === 0"
+                                 position="center">
+                  <localize key="general_searchNoResult">Sorry, we can not find what you are looking for.</localize>
+                </umb-empty-state>
+
             </div>
 
             <div ng-if="vm.activeTab.alias === 'clipboard'">