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.3
edited by bougault
on 2023/01/13 13:28
Change comment: There is no comment for this version
To version 7.10
edited by bougault
on 2023/01/13 14:05
Change comment: There is no comment for this version

Summary

Details

Page properties
Content
... ... @@ -14,14 +14,23 @@
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 + }
17 17  }
18 18  
19 19  customElements.define('clb-simplified-search',
20 20   class extends ClbComponent {
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=';
29 + searchBaseUrl = '/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=';
22 22   constructor() {
23 23   super();
24 24   this.results = [];
33 + this.offset = 0;
25 25   }
26 26  
27 27   connectedCallback() {
... ... @@ -28,34 +28,41 @@
28 28   // this.attachShadow({ mode: 'open' });
29 29   super.connectedCallback();
30 30   this.render();
31 - this.searchButton.addEventListener('click', () => this.handleSearch());
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 + });
32 32   }
33 33  
34 34  
35 - handleSearch() {
36 - fetch(`${this.searchBaseUrl}${encodeURIComponent(this.searchInput.value)}`)
37 - .then(res => res.json())
38 - .then(this.renderResults);
54 + handleSearch = () => {
55 + const value = this.$('input[type="text"]').value;
56 + fetch(`${this.searchBaseUrl}${encodeURIComponent(value)}&offset=${this.offset}&nb=10`)
57 + .then(res => res.json())
58 + .then(this.renderResults);
39 39   }
40 40  
41 - get searchInput() {
42 - return this.shadowRoot.querySelector('input[type="text"]');
43 - }
44 44  
45 - get searchButton() {
46 - return this.shadowRoot.querySelector('button');
47 - }
48 -
49 49   get searchInputTemplate() {
50 - return this.createTemplate('<div><input type="text"><button>Search</button><div id="results"></div></div>');
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 + `);
51 51   }
52 52  
53 - resultsContainer = () => {
54 - return this.shadowRoot.querySelector('#results');
55 - }
56 -
57 57   renderResults = (results) => {
58 - const resultsContainer = this.shadowRoot.querySelector('#results');
74 + const resultsContainer = this.$('#results');
59 59   resultsContainer.replaceChildren();
60 60   for(let i = 0, j = results.length; i < j; i++) {
61 61   const { title_, spaces, doccontent_en } = results[i];