BookStack/resources/js/components/entity-search.js
2020-06-28 21:15:00 +01:00

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;