IAM21 instance, do not create collab nor modify a team, your changes will be lost


Changes for page CLB Search Component

Last modified by bougault on 2023/01/17 11:42
From version 7.12
edited by bougault
on 2023/01/13 14:07
Change comment: There is no comment for this version
To version 7.1
edited by bougault
on 2023/01/13 13:26
Change comment: There is no comment for this version

Summary

Details

Page properties
Content
... ... @@ -14,23 +14,14 @@
14 14   template.innerHTML = htmlString;
15 15   return template;
16 16   }
17 -
18 - $(selector) {
19 - return this.shadowRoot.querySelector(selector);
20 - }
21 -
22 - $$(selector) {
23 - return this.shadowRoot.querySelectorAll(selector);
24 - }
25 25  }
26 26  
27 27  customElements.define('clb-simplified-search',
28 28   class extends ClbComponent {
29 - searchBaseUrl = '/bin/get/XWiki/SuggestSolrService?outputSyntax=plain&media=json&nb=10&query=q%3D%22__INPUT__%22~100%0Afq%3Dtype%3ADOCUMENT%0Afq%3Dspace%3ACollabs.*&input=';
21 + searchBaseUrl = 'https://wiki-dev.ebrains.eu/bin/get/XWiki/SuggestSolrService?outputSyntax=plain&media=json&nb=10&offset=0&query=q%3D%22__INPUT__%22~100%0Afq%3Dtype%3ADOCUMENT%0Afq%3Dspace%3ACollabs.*&input=';
30 30   constructor() {
31 31   super();
32 32   this.results = [];
33 - this.offset = 0;
34 34   }
35 35  
36 36   connectedCallback() {
... ... @@ -37,41 +37,34 @@
37 37   // this.attachShadow({ mode: 'open' });
38 38   super.connectedCallback();
39 39   this.render();
40 - this.$('#search').addEventListener('click', () => this.handleSearch());
41 - this.$('#prev').addEventListener('click', () => {
42 - if(this.offset > 0) {
43 - this.offset--;
44 - this.handleSearch();
45 - }
46 - });
47 - this.$('#next').addEventListener('click', () => {
48 - this.offset++;
49 - this.handleSearch();
50 - });
31 + this.searchButton.addEventListener('click', () => this.handleSearch());
51 51   }
52 52  
53 53  
54 - handleSearch = () => {
55 - const value = this.$('input[type="text"]').value;
56 - fetch(`${this.searchBaseUrl}${encodeURIComponent(value)}&offset=${this.offset}`)
57 - .then(res => res.json())
58 - .then(this.renderResults);
35 + handleSearch() {
36 + fetch(`${this.searchBaseUrl}${encodeURIComponent(this.searchInput.value)}`)
37 + .then(res => res.json())
38 + .then(this.renderResults);
59 59   }
60 60  
41 + get searchInput() {
42 + return this.shadowRoot.querySelector('input[type="text"]');
43 + }
61 61  
45 + get searchButton() {
46 + return this.shadowRoot.querySelector('button');
47 + }
48 +
62 62   get searchInputTemplate() {
63 - return this.createTemplate(`
64 - <div>
65 - <input type="text"><button id="search">Search</button>
66 - <div id="results"></div>
67 - <button id="prev">prev</button>
68 - <button id="next">next</button>
69 - </div>
70 - `);
50 + return this.createTemplate('<div><input type="text"><button>Search</button><div id="results"></div></div>');
71 71   }
72 72  
73 - renderResults = (results) => {
74 - const resultsContainer = this.$('#results');
53 + resultsContainer = () => {
54 + return this.shadowRoot.querySelector('#results');
55 + }
56 +
57 + renderResults(results) {
58 + const resultsContainer = this.shadowRoot.querySelector('#results');
75 75   resultsContainer.replaceChildren();
76 76   for(let i = 0, j = results.length; i < j; i++) {
77 77   const { title_, spaces, doccontent_en } = results[i];
... ... @@ -120,5 +120,4 @@
120 120   }
121 121  );
122 122  </script>
123 -<clb-simplified-search></clb-simplified-search>
124 124  {{/html}}