59 lines
1.8 KiB
JavaScript
59 lines
1.8 KiB
JavaScript
|
import {onSelect} from "../services/dom";
|
||
|
|
||
|
/**
|
||
|
* Class EntitySearch
|
||
|
* @extends {Component}
|
||
|
*/
|
||
|
class EntitySearch {
|
||
|
setup() {
|
||
|
this.entityId = this.$opts.entityId;
|
||
|
this.entityType = this.$opts.entityType;
|
||
|
|
||
|
this.contentView = this.$refs.contentView;
|
||
|
this.searchView = this.$refs.searchView;
|
||
|
this.searchResults = this.$refs.searchResults;
|
||
|
this.searchInput = this.$refs.searchInput;
|
||
|
this.searchForm = this.$refs.searchForm;
|
||
|
this.clearButton = this.$refs.clearButton;
|
||
|
this.loadingBlock = this.$refs.loadingBlock;
|
||
|
|
||
|
this.setupListeners();
|
||
|
}
|
||
|
|
||
|
setupListeners() {
|
||
|
this.searchInput.addEventListener('change', this.runSearch.bind(this));
|
||
|
this.searchForm.addEventListener('submit', e => {
|
||
|
e.preventDefault();
|
||
|
this.runSearch();
|
||
|
});
|
||
|
|
||
|
onSelect(this.clearButton, this.clearSearch.bind(this));
|
||
|
}
|
||
|
|
||
|
runSearch() {
|
||
|
const term = this.searchInput.value.trim();
|
||
|
if (term.length === 0) {
|
||
|
return this.clearSearch();
|
||
|
}
|
||
|
|
||
|
this.searchView.classList.remove('hidden');
|
||
|
this.contentView.classList.add('hidden');
|
||
|
this.loadingBlock.classList.remove('hidden');
|
||
|
|
||
|
const url = window.baseUrl(`/search/${this.entityType}/${this.entityId}`);
|
||
|
window.$http.get(url, {term}).then(resp => {
|
||
|
this.searchResults.innerHTML = resp.data;
|
||
|
}).catch(console.error).then(() => {
|
||
|
this.loadingBlock.classList.add('hidden');
|
||
|
});
|
||
|
}
|
||
|
|
||
|
clearSearch() {
|
||
|
this.searchView.classList.add('hidden');
|
||
|
this.contentView.classList.remove('hidden');
|
||
|
this.loadingBlock.classList.add('hidden');
|
||
|
this.searchInput.value = '';
|
||
|
}
|
||
|
}
|
||
|
|
||
|
export default EntitySearch;
|