Added dictionary filter by name (#12765)

* Added dictionary filter by name

* Added en translation for no filter dictionaries

* Removed inital table sort of dicionary items

src/Umbraco.Core/EmbeddedResources/Lang/en.xml

@@ -578,6 +578,7 @@
     <key alias="parentDoesNotExists">Parent item does not exist.</key>
     <key alias="noItems">There are no dictionary items.</key>
     <key alias="noItemsInFile">There are no dictionary items in this file.</key>
+    <key alias="noItemsFound">There were no dictionary items found.</key>
     <key alias="createNew">Create dictionary item</key>
   </area>
   <area alias="dictionaryItem">

src/Umbraco.Core/EmbeddedResources/Lang/en_us.xml

@@ -588,6 +588,7 @@
     <key alias="parentDoesNotExists">Parent item does not exist.</key>
     <key alias="noItems">There are no dictionary items.</key>
     <key alias="noItemsInFile">There are no dictionary items in this file.</key>
+    <key alias="noItemsFound">There were no dictionary items found.</key>
     <key alias="createNew">Create dictionary item</key>
   </area>
   <area alias="dictionaryItem">

src/Umbraco.Web.UI.Client/src/views/dictionary/dictionary.list.controller.js

@@ -10,7 +10,10 @@ function DictionaryListController($scope, $location, dictionaryResource, localiz
     var vm = this;
     vm.title = "Dictionary overview";
     vm.loading = false;
-    vm.items = [];   
+    vm.items = [];
+    vm.filter = {
+      searchTerm: ""
+    };
 
     function loadList() {
 

src/Umbraco.Web.UI.Client/src/views/dictionary/list.html

@@ -23,6 +23,13 @@
               </umb-button>
             </umb-editor-sub-header-content-left>
 
+            <umb-editor-sub-header-content-right>
+              <umb-search-filter model="vm.filter.searchTerm"
+                                 label-key="placeholders_filter"
+                                 text="Type to filter...">
+              </umb-search-filter>
+            </umb-editor-sub-header-content-right>
+
           </umb-editor-sub-header>
 
           <umb-box ng-if="vm.items.length === 0">
@@ -44,7 +51,7 @@
               </tr>
             </thead>
             <tbody>
-              <tr ng-repeat="item in vm.items track by item.id" style="cursor: pointer;">
+              <tr ng-repeat="item in vm.filtered = (vm.items | filter: { 'name': vm.filter.searchTerm }) track by $id(item)" style="cursor: pointer;">
                 <th>
                   <button type="button" ng-style="item.style" class="btn-reset bold" ng-click="vm.clickItem(item.id)">{{item.name}}</button>
                 </th>
@@ -62,6 +69,11 @@
               </tr>
             </tbody>
           </table>
+     
+          <umb-empty-state ng-if="vm.filtered.length === 0"
+                           position="center">
+            <localize key="dictionary_noItemsFound">There were no dictionary items found.</localize>
+          </umb-empty-state>
 
         </umb-editor-container>
     </umb-editor-view>