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

Summary

Details

Page properties
Content
... ... @@ -11,12 +11,7 @@
11 11  
12 12   createTemplate(htmlString) {
13 13   const template = document.createElement('template');
14 - template.innerHTML = `
15 - <style>
16 - ${this.styles}
17 - </style>
18 - ${htmlString}
19 - `;
14 + template.innerHTML = htmlString;
20 20   return template;
21 21   }
22 22  
... ... @@ -31,11 +31,10 @@
31 31  
32 32  customElements.define('clb-simplified-search',
33 33   class extends ClbComponent {
34 - 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=';
29 + 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=';
35 35   constructor() {
36 36   super();
37 37   this.results = [];
38 - this.offset = 0;
39 39   }
40 40  
41 41   connectedCallback() {
... ... @@ -42,28 +42,26 @@
42 42   // this.attachShadow({ mode: 'open' });
43 43   super.connectedCallback();
44 44   this.render();
45 - this.$('#search').addEventListener('click', () => this.handleSearch());
46 - this.$('#prev').addEventListener('click', () => {
47 - if(this.offset > 0) {
48 - this.offset--;
49 - this.handleSearch();
50 - }
51 - });
52 - this.$('#next').addEventListener('click', () => {
53 - this.offset++;
54 - this.handleSearch();
55 - });
39 + this.searchButton.addEventListener('click', () => this.handleSearch());
56 56   }
57 57  
58 58  
59 59   handleSearch = () => {
60 - const value = this.$('input[type="text"]').value;
61 - fetch(`${this.searchBaseUrl}${encodeURIComponent(value)}&offset=${this.offset}`)
44 + fetch(`${this.searchBaseUrl}${encodeURIComponent(this.searchInput.value)}`)
62 62   .then(res => res.json())
63 63   .then(this.renderResults);
47 +
64 64   }
65 65  
50 + get searchInput() {
51 + return this.$('input[type="text"]');
52 + }
66 66  
54 + get searchButton() {
55 + return this.$('#button');
56 + }
57 +
58 +
67 67   get searchInputTemplate() {
68 68   return this.createTemplate(`
69 69   <div>
... ... @@ -75,7 +75,7 @@
75 75   `);
76 76   }
77 77  
78 - renderResults = (results) => {
70 + renderResults(results) {
79 79   const resultsContainer = this.$('#results');
80 80   resultsContainer.replaceChildren();
81 81   for(let i = 0, j = results.length; i < j; i++) {