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

Summary

Details

Page properties
Content
... ... @@ -9,21 +9,12 @@
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 22  
23 -
24 - get styles() {
25 - return ``;
26 - }
27 27   $(selector) {
28 28   return this.shadowRoot.querySelector(selector);
29 29   }
... ... @@ -35,7 +35,7 @@
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=';
29 + searchBaseUrl = '/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 = [];
... ... @@ -43,47 +43,33 @@
43 43   }
44 44  
45 45   connectedCallback() {
37 + // this.attachShadow({ mode: 'open' });
46 46   super.connectedCallback();
47 47   this.render();
48 - this.$('#search').addEventListener('click', this.handleSearch);
49 - this.$('#prev').addEventListener('click', this.handlePrevPage);
50 - this.$('#next').addEventListener('click', this.handleNextPage);
40 + this.$('#search').addEventListener('click', () => this.handleSearch());
41 + this.$('#prev').addEventListener('click', () => {
42 + if(this.offset > 0) {
43 + this.offset--;
44 + this.handleSearch();
45 + }
46 + });
47 + this.$('#next').addEventListener('click', () => {
48 + this.offset++;
49 + this.handleSearch();
50 + });
51 51   }
52 52  
53 - disconnectedCallback() {
54 - this.$('#search').removeEventListener('click', this.handleSearch);
55 - this.$('#prev').removeEventListener('click', this.handlePrevPage);
56 - this.$('#next').removeEventListener('click', this.handleNextPage);
57 - }
58 58  
59 - get styles() {
60 - return `
61 - input[type="text"] {
62 - border: 1px solid red;
63 - }
64 - `
65 - }
66 - handlePrevPage = () => {
67 - if(this.offset > 0) {
68 - this.offset--;
69 - this.handleSearch();
70 - }
71 - }
72 - handleNextPage = () => {
73 - this.offset++;
74 - this.handleSearch();
75 - }
76 -
77 77   handleSearch = () => {
78 78   const value = this.$('input[type="text"]').value;
79 - fetch(`${this.searchBaseUrl}${encodeURIComponent(value)}&offset=${this.offset}`)
56 + fetch(`${this.searchBaseUrl}${encodeURIComponent(value)}&offset=${this.offset}&nb=10`)
80 80   .then(res => res.json())
81 81   .then(this.renderResults);
82 82   }
83 83  
84 84  
85 - get html() {
86 - return `
62 + get searchInputTemplate() {
63 + return this.createTemplate(`
87 87   <div>
88 88   <input type="text"><button id="search">Search</button>
89 89   <div id="results"></div>
... ... @@ -90,7 +90,7 @@
90 90   <button id="prev">prev</button>
91 91   <button id="next">next</button>
92 92   </div>
93 - `;
70 + `);
94 94   }
95 95  
96 96   renderResults = (results) => {
... ... @@ -107,7 +107,7 @@
107 107   }
108 108  
109 109   render() {
110 - this.shadowRoot.appendChild(this.template.content.cloneNode(true));
87 + this.shadowRoot.appendChild(this.searchInputTemplate.content.cloneNode(true));
111 111   }
112 112   }
113 113  );
... ... @@ -126,26 +126,19 @@
126 126   return this.getAttribute('data-href');
127 127   }
128 128  
129 - get styles() {
130 - return `
131 - a {
132 - color: var(--color-brand-primary);
133 - }
134 - `;
135 - }
136 - get html() {
137 - return `
106 + get resultTemplate() {
107 + return this.createTemplate(`
138 138   <div>
139 139   <a href=${this.hrefAttr}>${this.titleAttr}</a>
140 140   <div>
141 141   <slot></slot>
142 142   </div>
143 - </div> `
113 + </div>
114 + `);
144 144   }
145 -
146 146   connectedCallback() {
147 147   this.attachShadow({ mode: 'open' });
148 - this.shadowRoot.appendChild(this.template.content.cloneNode(true));
118 + this.shadowRoot.appendChild(this.resultTemplate.content.cloneNode(true));
149 149   }
150 150   }
151 151  );