add styling for search results + basic wire up of search service

src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbsearch.directive.js

@@ -13,17 +13,19 @@
         }
     };
     
-    function umbSearchController($scope, backdropService) {
+    function umbSearchController($scope, backdropService, searchService) {
 
         var vm = this;
 
-        vm.searchResults = [];
-
         vm.$onInit = onInit;
         vm.search = search;
         vm.closeSearch = closeSearch;
 
         function onInit() {
+
+            vm.searchResults = [];
+            vm.hasResults = false;
+
             console.log("init search thingy");
             backdropService.open();
         }
@@ -43,6 +45,29 @@
          */
         function search(searchQuery) {
             console.log(searchQuery);
+            if(searchQuery.length > 0) {
+                var search = {"term": searchQuery};
+                searchService.searchAll(search).then(function(result){
+                
+                    //result is a dictionary of group Title and it's results
+                    var filtered = {};
+                    _.each(result, function (value, key) {
+                        if (value.results.length > 0) {
+                            filtered[key] = value;
+                        }
+                    });
+
+                    vm.searchResults = filtered;
+                    // check if search has results
+                    vm.hasResults = Object.keys(vm.searchResults).length > 0;
+                    console.log("results", vm.searchResults);
+                    console.log("has results", vm.hasResults);
+                });
+
+            } else {
+                vm.searchResults = [];
+                vm.hasResults = false;
+            }
         }
 
     }

src/Umbraco.Web.UI.Client/src/less/components/application/umb-search.less

@@ -1,12 +1,14 @@
 
+/*
+    Search wrapper
+*/
 .umb-search {
     position: fixed;
     z-index: @zindexUmbOverlay;
     width: 660px;
     max-width: 90%;
-    height: 70px;
     // transition: opacity 60ms ease-in-out;
-    transform: translate(-50%, -50%);
+    transform: translate(-50%, 0);
     left: 50%;
     top: 20%;
     border-radius: @baseBorderRadius;
@@ -15,6 +17,9 @@
     box-shadow: 0 10px 20px rgba(0,0,0,.12),0 6px 6px rgba(0,0,0,.14);
 }
 
+/*
+    Search field
+*/
 .umb-search-input.umb-search-input {
     width: 100%;
     height: 70px;
@@ -22,4 +27,53 @@
     padding: 20px;
     border-radius: @baseBorderRadius;
     font-size: 22px;
+    margin-bottom: 0;
+}
+
+/*
+    Search results
+*/
+.umb-search-results {
+    max-height: 50vh;
+    overflow-y: auto;
+}
+
+.umb-search-group__title {
+    background: @gray-10;
+    padding: 3px 20px;
+}
+
+.umb-search-items {
+    list-style: none;
+    margin: 0;
+    padding-top: 4px;
+    padding-bottom: 4px;
+}
+
+.umb-search-item > a {
+    padding: 6px 20px;
+    display: flex;
+}
+
+.umb-search-item > a:hover,
+.umb-search-item > a:focus {
+    background-color: @gray-10;
+    text-decoration: none;
+    outline: none;
+}
+
+.umb-search-result__icon {
+    font-size: 18px;
+    margin-right: 8px;
+    color: @gray-1;
+}
+
+.umb-search-result__meta {
+    display: flex;
+    flex-direction: column;
+}
+
+.umb-search-result__description {
+    color: @gray-5;
+    font-size: 13px;
 }

src/Umbraco.Web.UI.Client/src/views/components/application/umb-search.html

@@ -4,24 +4,30 @@
     <input 
         class="umb-search-input" 
         type="text" 
-        ng-model="vm.searchQuery" 
+        ng-model="vm.searchQuery"
+        ng-model-options="{ debounce: 200 }"
         ng-change="vm.search(vm.searchQuery)" 
         placeholder="Search..." 
         autofocus />
-    
-    <ul class="umb-search-results" ng-if="vm.searchResults.length > 0">
-        <li class="umb-search-results_item">
-            <strong>Result 1</strong>
-            <small class="umb-search-results_item-description">/result-1/</small>
-        </li>
-        <li class="umb-search-results_item">
-            <strong>Result 2</strong>
-            <small class="umb-search-results_item-description">/result-2/</small>
-        </li>
-        <li class="umb-search-results_item">
-            <strong>Result 3</strong>
-            <small class="umb-search-results_item-description">/result-3/</small>
-        </li>
-    </ul>
+
+    <div class="umb-search-results">
+        <div class="umb-search-group" ng-repeat="(key, group) in vm.searchResults">
+            <div class="umb-search-group__title">{{key}}</div>
+            <ul class="umb-search-items">
+                <li class="umb-search-item" ng-repeat="result in group.results">
+                    <a class="umb-search-result__link" ng-href="" href="">
+                        <i class="umb-search-result__icon {{result.icon}}"></i>
+                        <span class="umb-search-result__meta">
+                            <span class="umb-search-result__name">{{result.name}}</span>
+                            <span class="umb-search-result__description">/path/to/something/here</span>
+                            <!--
+                            <span class="umb-search-result__description" ng-show="result.subTitle">{{result.subTitle}}</span>
+                            -->
+                        </span>
+                    </a>
+                </li>
+            </ul>
+        </div>
+    </div>
 
 </div>