[Search] Rewrite search controller, tidy

Rewrite the search controller, making numerous changes and using prototypical
style.

First, the search controller immediately hides previous results when a new
search is started.  Secondly, the search controller ensures that search results
displayed match the currently entered query, preventing race conditions.  Finally,
the search controller uses a poor filtering option that means it may not display
all results.
This commit is contained in:
Pete Richards
2015-10-16 12:34:47 -07:00
parent 9cc0c0b06f
commit 9ad860babd
2 changed files with 162 additions and 159 deletions

View File

@@ -21,21 +21,16 @@
-->
<div class="search"
ng-controller="SearchController as controller">
<!-- Search bar -->
<div class="search-bar"
ng-controller="ClickAwayController as toggle">
<!-- Input field -->
<input class="search-input"
type="text"
ng-model="ngModel.input"
ng-keyup="controller.search()" />
<!--mct-control key="'textfield'"
class="search-input"
ng-model="ngModel.input"
ng-keyup="controller.search()">
</mct-control-->
<!-- Search icon -->
<!-- ui symbols for search are 'd' and 'M' -->
@@ -43,20 +38,20 @@
ng-class="{content: !(ngModel.input === '' || ngModel.input === undefined)}">
M
</div>
<!-- Clear icon/button 'x' -->
<a class="ui-symbol clear-icon"
ng-class="{content: !(ngModel.input === '' || ngModel.input === undefined)}"
ng-click="ngModel.input = ''; controller.search()">
&#xe607;
</a>
<!-- Menu icon/button 'v' -->
<a class="ui-symbol menu-icon"
ng-click="toggle.toggle()">
v
</a>
<!-- Menu -->
<mct-representation key="'search-menu'"
class="menu-element search-menu-holder"
@@ -65,27 +60,24 @@
ng-click="toggle.setState(true)">
</mct-representation>
</div>
<!-- Active filter display -->
<div class="active-filter-display"
ng-class="{off: ngModel.filtersString === '' || ngModel.filtersString === undefined || !ngModel.search}"
ng-controller="SearchMenuController as menuController">
<a class="ui-symbol clear-filters-icon"
ng-click="ngModel.checkAll = true; menuController.checkAll()">
&#xe607;
</a>
Filtered by: {{ ngModel.filtersString }}
<!--div class="filter-options">
Filtered by: {{ ngModel.filtersString }}
</div-->
</div>
<!-- This div exists to determine scroll bar location -->
<div class="search-scroll abs">
<!-- Results list -->
<div class="results">
<mct-representation key="'search-item'"
@@ -103,14 +95,14 @@
<span class="title-label">Loading...</span>
</div>
<!-- Load more button -->
<!-- Load more button -->
<div ng-if="controller.areMore()">
<a class="load-more-button s-btn vsm"
ng-click="controller.loadMore()">
ng-click="controller.loadMore()">
More Results
</a>
</div>
</div>
</div>
</div>