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.36
edited by bougault
on 2023/01/17 10:02
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
... ... @@ -9,103 +9,53 @@
9 9   this.attachShadow({ mode: 'open'});
10 10   }
11 11  
12 - get template() {
12 + createTemplate(htmlString) {
13 13   const template = document.createElement('template');
14 - template.innerHTML = `
15 - <style>
16 - ${this.styles}
17 - </style>
18 - ${this.html}
19 - `;
14 + template.innerHTML = htmlString;
20 20   return template;
21 21   }
22 -
23 - get styles() {
24 - return '';
25 - }
26 -
27 - get html() {
28 - return '';
29 - }
30 - $(selector) {
31 - return this.shadowRoot.querySelector(selector);
32 - }
33 -
34 - $$(selector) {
35 - return this.shadowRoot.querySelectorAll(selector);
36 - }
37 37  }
38 38  
39 39  customElements.define('clb-simplified-search',
40 40   class extends ClbComponent {
41 - 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=';
42 42   constructor() {
43 43   super();
44 44   this.results = [];
45 - this.offset = 0;
46 46   }
47 47  
48 48   connectedCallback() {
28 + // this.attachShadow({ mode: 'open' });
49 49   super.connectedCallback();
50 50   this.render();
51 - const searchInput = this.$('input[type="text"]');
52 - this.$('#search').addEventListener('click', this.handleSearch);
53 - this.$('#prev').addEventListener('click', this.handlePrevPage);
54 - this.$('#next').addEventListener('click', this.handleNextPage);
55 - searchInput.addEventListener('keypress', this.handleKeyPress);
56 - searchInput.focus();
31 + this.searchButton.addEventListener('click', () => this.handleSearch());
57 57   }
58 58  
59 - disconnectedCallback() {
60 - this.$('#search').removeEventListener('click', this.handleSearch);
61 - this.$('#prev').removeEventListener('click', this.handlePrevPage);
62 - this.$('#next').removeEventListener('click', this.handleNextPage);
63 - this.$('input[type="text"]').addEventListener('keypress', this.handleKeyPress);
34 +
35 + handleSearch() {
36 + fetch(`${this.searchBaseUrl}${encodeURIComponent(this.searchInput.value)}`)
37 + .then(res => res.json())
38 + .then(this.renderResults);
64 64   }
65 65  
66 - get styles() {
67 - return `
68 - input[type="text"] {
69 - }
70 - `
41 + get searchInput() {
42 + return this.shadowRoot.querySelector('input[type="text"]');
71 71   }
72 - handlePrevPage = () => {
73 - if(this.offset > 0) {
74 - this.offset--;
75 - this.handleSearch();
76 - }
77 - }
78 - handleNextPage = () => {
79 - this.offset++;
80 - this.handleSearch();
81 - }
82 82  
83 - handleSearch = () => {
84 - const value = this.$('input[type="text"]').value;
85 - fetch(`${this.searchBaseUrl}${encodeURIComponent(value)}&offset=${this.offset}`)
86 - .then(res => res.json())
87 - .then(this.renderResults);
45 + get searchButton() {
46 + return this.shadowRoot.querySelector('button');
88 88   }
89 89  
90 - handleKeyPress = (e) => {
91 - if(e.code === 'Enter') {
92 - this.handleSearch();
93 - }
49 + get searchInputTemplate() {
50 + return this.createTemplate('<div><input type="text"><button>Search</button><div id="results"></div></div>');
94 94   }
95 95  
96 - get html() {
97 - return `
98 - <div>
99 - <input type="text"><button id="search">Search</button>
100 - <div id="results"></div>
101 - <button id="prev">prev</button>
102 - <button id="next">next</button>
103 - </div>
104 - `;
53 + resultsContainer = () => {
54 + return this.shadowRoot.querySelector('#results');
105 105   }
106 106  
107 - renderResults = (results) => {
108 - const resultsContainer = this.$('#results');
57 + renderResults(results) {
58 + const resultsContainer = this.shadowRoot.querySelector('#results');
109 109   resultsContainer.replaceChildren();
110 110   for(let i = 0, j = results.length; i < j; i++) {
111 111   const { title_, spaces, doccontent_en } = results[i];
... ... @@ -118,7 +118,7 @@
118 118   }
119 119  
120 120   render() {
121 - this.shadowRoot.appendChild(this.template.content.cloneNode(true));
71 + this.shadowRoot.appendChild(this.searchInputTemplate.content.cloneNode(true));
122 122   }
123 123   }
124 124  );
... ... @@ -137,28 +137,20 @@
137 137   return this.getAttribute('data-href');
138 138   }
139 139  
140 - get styles() {
141 - return `
142 - a {
143 - color: var(--color-brand-primary);
144 - }
145 - `;
146 - }
147 - get html() {
148 - return `
90 + get resultTemplate() {
91 + return this.createTemplate(`
149 149   <div>
150 - <a href="/bin/view/${this.hrefAttr}">${this.titleAttr}</a>
93 + <a href=${this.hrefAttr}>${this.titleAttr}</a>
151 151   <div>
152 152   <slot></slot>
153 153   </div>
154 - </div> `
97 + </div>
98 + `);
155 155   }
156 -
157 157   connectedCallback() {
158 158   this.attachShadow({ mode: 'open' });
159 - this.shadowRoot.appendChild(this.template.content.cloneNode(true));
102 + this.shadowRoot.appendChild(this.resultTemplate.content.cloneNode(true));
160 160   }
161 -
162 162   }
163 163  );
164 164  </script>