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

Summary

Details

Page properties
Content
... ... @@ -11,34 +11,17 @@
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 -
23 - get styles() {
24 - return ``;
25 - }
26 - $(selector) {
27 - return this.shadowRoot.querySelector(selector);
28 - }
29 -
30 - $$(selector) {
31 - return this.shadowRoot.querySelectorAll(selector);
32 - }
33 33  }
34 34  
35 35  customElements.define('clb-simplified-search',
36 36   class extends ClbComponent {
37 - 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=';
38 38   constructor() {
39 39   super();
40 40   this.results = [];
41 - this.offset = 0;
42 42   }
43 43  
44 44   connectedCallback() {
... ... @@ -45,48 +45,34 @@
45 45   // this.attachShadow({ mode: 'open' });
46 46   super.connectedCallback();
47 47   this.render();
48 - this.$('#search').addEventListener('click', () => this.handleSearch());
49 - this.$('#prev').addEventListener('click', () => {
50 - if(this.offset > 0) {
51 - this.offset--;
52 - this.handleSearch();
53 - }
54 - });
55 - this.$('#next').addEventListener('click', () => {
56 - this.offset++;
57 - this.handleSearch();
58 - });
31 + this.searchButton.addEventListener('click', () => this.handleSearch());
59 59   }
60 60  
61 - get styles() {
62 - return `
63 - input[type="text"] {
64 - border: 1px solid red;
65 - }
66 - `
34 +
35 + handleSearch() {
36 + fetch(`${this.searchBaseUrl}${encodeURIComponent(this.searchInput.value)}`)
37 + .then(res => res.json())
38 + .then(this.renderResults);
67 67   }
68 68  
69 - handleSearch = () => {
70 - const value = this.$('input[type="text"]').value;
71 - fetch(`${this.searchBaseUrl}${encodeURIComponent(value)}&offset=${this.offset}`)
72 - .then(res => res.json())
73 - .then(this.renderResults);
41 + get searchInput() {
42 + return this.shadowRoot.querySelector('input[type="text"]');
74 74   }
75 75  
45 + get searchButton() {
46 + return this.shadowRoot.querySelector('button');
47 + }
76 76  
77 77   get searchInputTemplate() {
78 - return this.createTemplate(`
79 - <div>
80 - <input type="text"><button id="search">Search</button>
81 - <div id="results"></div>
82 - <button id="prev">prev</button>
83 - <button id="next">next</button>
84 - </div>
85 - `);
50 + return this.createTemplate('<div><input type="text"><button>Search</button><div id="results"></div></div>');
86 86   }
87 87  
88 - renderResults = (results) => {
89 - const resultsContainer = this.$('#results');
53 + resultsContainer = () => {
54 + return this.shadowRoot.querySelector('#results');
55 + }
56 +
57 + renderResults(results) {
58 + const resultsContainer = this.shadowRoot.querySelector('#results');
90 90   resultsContainer.replaceChildren();
91 91   for(let i = 0, j = results.length; i < j; i++) {
92 92   const { title_, spaces, doccontent_en } = results[i];
... ... @@ -118,14 +118,6 @@
118 118   return this.getAttribute('data-href');
119 119   }
120 120  
121 - get styles() {
122 - return `
123 - a {
124 - color: var(--color-brand-primary);
125 - }
126 - `;
127 - }
128 -
129 129   get resultTemplate() {
130 130   return this.createTemplate(`
131 131   <div>