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

initial import for Open Source 🎉

Browse source
This commit is contained in:
Jimmy Zelinskie 2019-11-12 11:09:47 -05:00
parent 1898c361f3
commit 9c0dd3b722
2048 changed files with 218743 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -0,0 +1,68 @@
<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"></markdown-view>
</div>
</div>
</span>
<span ng-switch-when="application">
<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"></markdown-view>
</div>
</div>
</span>
</span>
</div>
</script>
<input class="form-control" type="text" placeholder="search"
ng-model="$ctrl.enteredQuery"
typeahead="$ctrl.onTypeahead($event)"
ta-debounce="250"
ta-display-key="name"
ta-suggestion-tmpl="search-result-template"
ta-clear-on-select="$ctrl.clearOnSearch"
(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>

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

@ -0,0 +1,57 @@
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 = '';
@Input('@clearOnSearch') public clearOnSearch: string = 'true';
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'](this.clearOnSearch == 'true'); // Clear the value.
this.$location.url('/search');
this.$location.search('q', $event['value']);
}, 10);
}
}