BookStack Code Mirror - bookstack/blob - resources/js/components/entity-search.js

   1 import {onSelect} from '../services/dom';
   2 import {Component} from './component';
   3
   4 export class EntitySearch extends Component {
   5
   6     setup() {
   7         this.entityId = this.$opts.entityId;
   8         this.entityType = this.$opts.entityType;
   9
  10         this.contentView = this.$refs.contentView;
  11         this.searchView = this.$refs.searchView;
  12         this.searchResults = this.$refs.searchResults;
  13         this.searchInput = this.$refs.searchInput;
  14         this.searchForm = this.$refs.searchForm;
  15         this.clearButton = this.$refs.clearButton;
  16         this.loadingBlock = this.$refs.loadingBlock;
  17
  18         this.setupListeners();
  19     }
  20
  21     setupListeners() {
  22         this.searchInput.addEventListener('change', this.runSearch.bind(this));
  23         this.searchForm.addEventListener('submit', e => {
  24             e.preventDefault();
  25             this.runSearch();
  26         });
  27
  28         onSelect(this.clearButton, this.clearSearch.bind(this));
  29     }
  30
  31     runSearch() {
  32         const term = this.searchInput.value.trim();
  33         if (term.length === 0) {
  34             return this.clearSearch();
  35         }
  36
  37         this.searchView.classList.remove('hidden');
  38         this.contentView.classList.add('hidden');
  39         this.loadingBlock.classList.remove('hidden');
  40
  41         const url = window.baseUrl(`/search/${this.entityType}/${this.entityId}`);
  42         window.$http.get(url, {term}).then(resp => {
  43             this.searchResults.innerHTML = resp.data;
  44         }).catch(console.error).then(() => {
  45             this.loadingBlock.classList.add('hidden');
  46         });
  47     }
  48
  49     clearSearch() {
  50         this.searchView.classList.add('hidden');
  51         this.contentView.classList.remove('hidden');
  52         this.loadingBlock.classList.add('hidden');
  53         this.searchInput.value = '';
  54     }
  55
  56 }