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

Summary

Details

Page properties
Content
... ... @@ -9,37 +9,19 @@
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 -
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 - }
34 34  }
35 35  
36 36  customElements.define('clb-simplified-search',
37 37   class extends ClbComponent {
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=';
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=';
39 39   constructor() {
40 40   super();
41 41   this.results = [];
42 - this.offset = 0;
43 43   }
44 44  
45 45   connectedCallback() {
... ... @@ -46,56 +46,34 @@
46 46   // this.attachShadow({ mode: 'open' });
47 47   super.connectedCallback();
48 48   this.render();
49 - this.$('#search').addEventListener('click', this.handleSearch);
50 - this.$('#prev').addEventListener('click', this.handlePrevPage);
51 - this.$('#next').addEventListener('click', this.handleNextPage;
31 + this.searchButton.addEventListener('click', () => this.handleSearch());
52 52   }
53 53  
54 - disconnectedCallback() {
55 - this.$('#search').removeEventListener('click', this.handleSearch;
56 - this.$('#prev').removeEventListener('click', this.handlePrevPage);
57 - this.$('#next').removeEventListener('click', this.handleNextPage);
34 +
35 + handleSearch() {
36 + fetch(`${this.searchBaseUrl}${encodeURIComponent(this.searchInput.value)}`)
37 + .then(res => res.json())
38 + .then(this.renderResults);
58 58   }
59 59  
60 - get styles() {
61 - return `
62 - input[type="text"] {
63 - border: 1px solid red;
64 - }
65 - `
41 + get searchInput() {
42 + return this.shadowRoot.querySelector('input[type="text"]');
66 66   }
67 - handlePrevPage = () => {
68 - if(this.offset > 0) {
69 - this.offset--;
70 - this.handleSearch();
71 - }
44 +
45 + get searchButton() {
46 + return this.shadowRoot.querySelector('button');
72 72   }
73 - handleNextPage = () => {
74 - this.offset++;
75 - this.handleSearch();
76 - }
77 77  
78 - handleSearch = () => {
79 - const value = this.$('input[type="text"]').value;
80 - fetch(`${this.searchBaseUrl}${encodeURIComponent(value)}&offset=${this.offset}`)
81 - .then(res => res.json())
82 - .then(this.renderResults);
49 + get searchInputTemplate() {
50 + return this.createTemplate('<div><input type="text"><button>Search</button><div id="results"></div></div>');
83 83   }
84 84  
85 -
86 - get html() {
87 - return `
88 - <div>
89 - <input type="text"><button id="search">Search</button>
90 - <div id="results"></div>
91 - <button id="prev">prev</button>
92 - <button id="next">next</button>
93 - </div>
94 - `;
53 + resultsContainer = () => {
54 + return this.shadowRoot.querySelector('#results');
95 95   }
96 96  
97 - renderResults = (results) => {
98 - const resultsContainer = this.$('#results');
57 + renderResults(results) {
58 + const resultsContainer = this.shadowRoot.querySelector('#results');
99 99   resultsContainer.replaceChildren();
100 100   for(let i = 0, j = results.length; i < j; i++) {
101 101   const { title_, spaces, doccontent_en } = results[i];
... ... @@ -108,7 +108,7 @@
108 108   }
109 109  
110 110   render() {
111 - this.shadowRoot.appendChild(this.template.content.cloneNode(true));
71 + this.shadowRoot.appendChild(this.searchInputTemplate.content.cloneNode(true));
112 112   }
113 113   }
114 114  );
... ... @@ -127,29 +127,21 @@
127 127   return this.getAttribute('data-href');
128 128   }
129 129  
130 - get styles() {
131 - return `
132 - a {
133 - color: var(--color-brand-primary);
134 - }
135 - `;
136 - }
137 - get html() {
138 - return `
90 + get resultTemplate() {
91 + return this.createTemplate(`
139 139   <div>
140 140   <a href=${this.hrefAttr}>${this.titleAttr}</a>
141 141   <div>
142 142   <slot></slot>
143 143   </div>
144 - </div> `
97 + </div>
98 + `);
145 145   }
146 -
147 147   connectedCallback() {
148 148   this.attachShadow({ mode: 'open' });
149 - this.shadowRoot.appendChild(this.template.content.cloneNode(true));
102 + this.shadowRoot.appendChild(this.resultTemplate.content.cloneNode(true));
150 150   }
151 151   }
152 152  );
153 153  </script>
154 -<clb-simplified-search></clb-simplified-search>
155 155  {{/html}}