Failed to execute template. Cause: [Access denied when checking [script] access to [xwiki:Collaboratory.UX.HbpSkin.WebHome] for user [xwiki:XWiki.Admin]]. Click on this message for details.

CLB Search Component - HBP Wiki

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

Summary

Details

Page properties
Content
... ... @@ -9,53 +9,92 @@
9 9   this.attachShadow({ mode: 'open'});
10 10   }
11 11  
12 - createTemplate(htmlString) {
12 + get template() {
13 13   const template = document.createElement('template');
14 - template.innerHTML = htmlString;
14 + template.innerHTML = `
15 + <style>
16 + ${this.styles}
17 + </style>
18 + ${this.html}
19 + `;
15 15   return template;
16 16   }
22 +
23 +
24 + get styles() {
25 + return ``;
26 + }
27 + $(selector) {
28 + return this.shadowRoot.querySelector(selector);
29 + }
30 +
31 + $$(selector) {
32 + return this.shadowRoot.querySelectorAll(selector);
33 + }
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=';
38 + 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=';
22 22   constructor() {
23 23   super();
24 24   this.results = [];
42 + this.offset = 0;
25 25   }
26 26  
27 27   connectedCallback() {
28 - // this.attachShadow({ mode: 'open' });
29 29   super.connectedCallback();
30 30   this.render();
31 - this.searchButton.addEventListener('click', () => this.handleSearch());
48 + this.$('#search').addEventListener('click', this.handleSearch);
49 + this.$('#prev').addEventListener('click', this.handlePrevPage);
50 + this.$('#next').addEventListener('click', this.handleNextPage;
32 32   }
33 33  
34 -
35 - handleSearch() {
36 - fetch(`${this.searchBaseUrl}${encodeURIComponent(this.searchInput.value)}`)
37 - .then(res => res.json())
38 - .then(this.renderResults);
53 + disconnectedCallback() {
54 + this.$('#search').removeEventListener('click', this.handleSearch;
55 + this.$('#prev').removeEventListener('click', this.handlePrevPage);
56 + this.$('#next').removeEventListener('click', this.handleNextPage);
39 39   }
40 40  
41 - get searchInput() {
42 - return this.shadowRoot.querySelector('input[type="text"]');
59 + get styles() {
60 + return `
61 + input[type="text"] {
62 + border: 1px solid red;
63 + }
64 + `
43 43   }
44 -
45 - get searchButton() {
46 - return this.shadowRoot.querySelector('button');
66 + handlePrevPage = () => {
67 + if(this.offset > 0) {
68 + this.offset--;
69 + this.handleSearch();
70 + }
47 47   }
72 + handleNextPage = () => {
73 + this.offset++;
74 + this.handleSearch();
75 + }
48 48  
49 - get searchInputTemplate() {
50 - return this.createTemplate('<div><input type="text"><button>Search</button><div id="results"></div></div>');
77 + handleSearch = () => {
78 + const value = this.$('input[type="text"]').value;
79 + fetch(`${this.searchBaseUrl}${encodeURIComponent(value)}&offset=${this.offset}`)
80 + .then(res => res.json())
81 + .then(this.renderResults);
51 51   }
52 52  
53 - resultsContainer = () => {
54 - return this.shadowRoot.querySelector('#results');
84 +
85 + get html() {
86 + return `
87 + <div>
88 + <input type="text"><button id="search">Search</button>
89 + <div id="results"></div>
90 + <button id="prev">prev</button>
91 + <button id="next">next</button>
92 + </div>
93 + `;
55 55   }
56 56  
57 57   renderResults = (results) => {
58 - const resultsContainer = this.shadowRoot.querySelector('#results');
97 + 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];
... ... @@ -68,7 +68,7 @@
68 68   }
69 69  
70 70   render() {
71 - this.shadowRoot.appendChild(this.searchInputTemplate.content.cloneNode(true));
110 + this.shadowRoot.appendChild(this.template.content.cloneNode(true));
72 72   }
73 73   }
74 74  );
... ... @@ -87,19 +87,26 @@
87 87   return this.getAttribute('data-href');
88 88   }
89 89  
90 - get resultTemplate() {
91 - return this.createTemplate(`
129 + get styles() {
130 + return `
131 + a {
132 + color: var(--color-brand-primary);
133 + }
134 + `;
135 + }
136 + get html() {
137 + return `
92 92   <div>
93 93   <a href=${this.hrefAttr}>${this.titleAttr}</a>
94 94   <div>
95 95   <slot></slot>
96 96   </div>
97 - </div>
98 - `);
143 + </div> `
99 99   }
145 +
100 100   connectedCallback() {
101 101   this.attachShadow({ mode: 'open' });
102 - this.shadowRoot.appendChild(this.resultTemplate.content.cloneNode(true));
148 + this.shadowRoot.appendChild(this.template.content.cloneNode(true));
103 103   }
104 104   }
105 105  );