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

Summary

Details

Page properties
Content
... ... @@ -9,12 +9,21 @@
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   }
17 17  
23 +
24 + get styles() {
25 + return ``;
26 + }
18 18   $(selector) {
19 19   return this.shadowRoot.querySelector(selector);
20 20   }
... ... @@ -26,10 +26,11 @@
26 26  
27 27  customElements.define('clb-simplified-search',
28 28   class extends ClbComponent {
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=';
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=';
30 30   constructor() {
31 31   super();
32 32   this.results = [];
42 + this.offset = 0;
33 33   }
34 34  
35 35   connectedCallback() {
... ... @@ -36,28 +36,45 @@
36 36   // this.attachShadow({ mode: 'open' });
37 37   super.connectedCallback();
38 38   this.render();
39 - this.searchButton.addEventListener('click', () => this.handleSearch());
49 + this.$('#search').addEventListener('click', this.handleSearch);
50 + this.$('#prev').addEventListener('click', this.handlePrevPage);
51 + this.$('#next').addEventListener('click', this.handleNextPage;
40 40   }
41 41  
54 + disconnectedCallback() {
55 + this.$('#search').removeEventListener('click', this.handleSearch;
56 + this.$('#prev').removeEventListener('click', this.handlePrevPage);
57 + this.$('#next').removeEventListener('click', this.handleNextPage);
58 + }
42 42  
60 + get styles() {
61 + return `
62 + input[type="text"] {
63 + border: 1px solid red;
64 + }
65 + `
66 + }
67 + handlePrevPage = () => {
68 + if(this.offset > 0) {
69 + this.offset--;
70 + this.handleSearch();
71 + }
72 + }
73 + handleNextPage = () => {
74 + this.offset++;
75 + this.handleSearch();
76 + }
77 +
43 43   handleSearch = () => {
44 - fetch(`${this.searchBaseUrl}${encodeURIComponent(this.searchInput.value)}`)
79 + const value = this.$('input[type="text"]').value;
80 + fetch(`${this.searchBaseUrl}${encodeURIComponent(value)}&offset=${this.offset}`)
45 45   .then(res => res.json())
46 46   .then(this.renderResults);
47 -
48 48   }
49 49  
50 - get searchInput() {
51 - return this.$('input[type="text"]');
52 - }
53 53  
54 - get searchButton() {
55 - return this.$('#button');
56 - }
57 -
58 -
59 - get searchInputTemplate() {
60 - return this.createTemplate(`
86 + get html() {
87 + return `
61 61   <div>
62 62   <input type="text"><button id="search">Search</button>
63 63   <div id="results"></div>
... ... @@ -64,10 +64,10 @@
64 64   <button id="prev">prev</button>
65 65   <button id="next">next</button>
66 66   </div>
67 - `);
94 + `;
68 68   }
69 69  
70 - renderResults(results) {
97 + renderResults = (results) => {
71 71   const resultsContainer = this.$('#results');
72 72   resultsContainer.replaceChildren();
73 73   for(let i = 0, j = results.length; i < j; i++) {
... ... @@ -81,7 +81,7 @@
81 81   }
82 82  
83 83   render() {
84 - this.shadowRoot.appendChild(this.searchInputTemplate.content.cloneNode(true));
111 + this.shadowRoot.appendChild(this.template.content.cloneNode(true));
85 85   }
86 86   }
87 87  );
... ... @@ -100,19 +100,26 @@
100 100   return this.getAttribute('data-href');
101 101   }
102 102  
103 - get resultTemplate() {
104 - return this.createTemplate(`
130 + get styles() {
131 + return `
132 + a {
133 + color: var(--color-brand-primary);
134 + }
135 + `;
136 + }
137 + get html() {
138 + return `
105 105   <div>
106 106   <a href=${this.hrefAttr}>${this.titleAttr}</a>
107 107   <div>
108 108   <slot></slot>
109 109   </div>
110 - </div>
111 - `);
144 + </div> `
112 112   }
146 +
113 113   connectedCallback() {
114 114   this.attachShadow({ mode: 'open' });
115 - this.shadowRoot.appendChild(this.resultTemplate.content.cloneNode(true));
149 + this.shadowRoot.appendChild(this.template.content.cloneNode(true));
116 116   }
117 117   }
118 118  );