vbatts/quay
Archived
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Implement new search UI

Browse source 
We now have both autocomplete-based searching for quick results, as well as a full search page for a full listing of results
This commit is contained in:
Joseph Schorr 2017-04-07 17:25:44 -04:00
parent 8b148bf1d4
commit e9ffe0e27b
23 changed files with 649 additions and 393 deletions
Download patch file Download diff file Expand all files Collapse all files

54
static/js/directives/ui/search-box/search-box.component.html Normal file
View file

@ -0,0 +1,54 @@
<span class="search-box-element">
<script type="text/ng-template" id="search-result-template">
<div class="search-box-result">
<span class="kind">{{ result.title || result.kind }}</span>
<span ng-switch on="result.kind">
<!-- Team -->
<span ng-switch-when="team">
<strong>
<span class="avatar" data="result.avatar" size="16"></span>
<span class="result-name">{{ result.name }}</span>
</strong>
<span class="clarification">
in
<span class="avatar" data="result.organization.avatar" size="16"></span>
<span class="result-name">{{ result.organization.name }}</span>
</span>
</span>
<span ng-switch-when="user">
<span class="avatar" data="result.avatar" size="16"></span>
<span class="result-name">{{ result.name }}</span>
</span>
<span ng-switch-when="organization">
<span class="avatar" data="result.avatar" size="16"></span>
<span class="result-name">{{ result.name }}</span>
</span>
<span ng-switch-when="robot">
<i class="fa ci-robot"></i>
<span class="result-name">{{ result.name }}</span>
</span>
<span ng-switch-when="repository">
<span class="avatar" data="result.namespace.avatar" size="16"></span>
<span class="result-name">{{ result.namespace.name }}/{{ result.name }}</span>
<div class="result-description" ng-if="result.description">
<div class="description markdown-view" content="result.description"
first-line-only="true" placeholder-needed="false"></div>
</div>
</span>
</span>
</div>
</script>
<input class="form-control" type="text" placeholder="search"
ng-model="$ctrl.enteredQuery"
typeahead="$ctrl.onTypeahead($event)"
ta-display-key="name"
ta-suggestion-tmpl="search-result-template"
ta-clear-on-select="true"
(ta-selected)="$ctrl.onSelected($event)"
(ta-entered)="$ctrl.onEntered($event)">
<span class="search-icon">
<span class="cor-loader-inline" ng-if="$ctrl.isSearching"></span>
<i class="fa fa-search" ng-if="!$ctrl.isSearching"></i>
</span>
</span>

56
static/js/directives/ui/search-box/search-box.component.ts Normal file
View file

@ -0,0 +1,56 @@
import { Input, Component, Inject } from 'ng-metadata/core';
/**
* A component that displays a search box with autocomplete.
*/
@Component({
selector: 'search-box',
templateUrl: '/static/js/directives/ui/search-box/search-box.component.html',
})
export class SearchBoxComponent {
@Input('<query') public enteredQuery: string = '';
private isSearching: boolean = false;
private currentQuery: string = '';
private autocompleteSelected: boolean = false;
constructor(@Inject('ApiService') private ApiService: any,
@Inject('$timeout') private $timeout: ng.ITimeoutService,
@Inject('$location') private $location: ng.ILocationService) {
}
private onTypeahead($event): void {
this.currentQuery = $event['query'];
if (this.currentQuery.length < 3) {
$event['callback']([]);
return;
}
var params = {
'query': this.currentQuery,
};
this.ApiService.conductSearch(null, params).then((resp) => {
if (this.currentQuery == $event['query']) {
$event['callback'](resp.results);
this.autocompleteSelected = false;
}
});
}
private onSelected($event): void {
this.autocompleteSelected = true;
this.$timeout(() => {
this.$location.url($event['result']['href'])
}, 100);
}
private onEntered($event): void {
this.$timeout(() => {
$event['callback'](true); // Clear the value.
this.$location.url('/search');
this.$location.search('q', $event['value']);
}, 10);
}
}