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.33
edited by bougault
on 2023/01/17 09:41
Change comment: There is no comment for this version
To version 7.7
edited by bougault
on 2023/01/13 13:50
Change comment: There is no comment for this version

Summary

Details

Page properties
Content
... ... @@ -9,24 +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 - get styles() {
24 - return '';
25 - }
26 -
27 - get html() {
28 - return '';
29 - }
30 30   $(selector) {
31 31   return this.shadowRoot.querySelector(selector);
32 32   }
... ... @@ -38,80 +38,40 @@
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=';
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=';
42 42   constructor() {
43 43   super();
44 44   this.results = [];
45 - this.offset = 0;
46 46   }
47 47  
48 48   connectedCallback() {
36 + // 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();
39 + this.$('#search').addEventListener('click', () => this.handleSearch());
40 + this.$('#prev').addEventListener('click', () => {
41 + if(this.offset > 0) {
42 + this.offset--;
43 + this.handleSearch();
44 + }
45 + });
46 + this.$('#next').addEventListener('click', () => {
47 + this.offset++;
48 + this.handleSearch();
49 + });
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);
64 - }
65 65  
66 - get styles() {
67 - return `
68 - input[type="text"] {
69 - display: block;
70 - width: 100%;
71 - height: 36px;
72 - padding: 6px 12px;
73 - font-size: 16px;
74 - line-height: 1.428571429;
75 - color: #555555;
76 - background-color: #fff;
77 - background-image: none;
78 - border: 1px solid #ccc;
79 - border-radius: 4px;
80 - -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
81 - box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
82 - -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
83 - -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
84 - transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
85 - }
86 -
87 - `
88 - }
89 - handlePrevPage = () => {
90 - if(this.offset > 0) {
91 - this.offset--;
92 - this.handleSearch();
93 - }
94 - }
95 - handleNextPage = () => {
96 - this.offset++;
97 - this.handleSearch();
98 - }
99 -
100 100   handleSearch = () => {
101 101   const value = this.$('input[type="text"]').value;
102 - fetch(`${this.searchBaseUrl}${encodeURIComponent(value)}&offset=${this.offset}`)
55 + fetch(`${this.searchBaseUrl}${encodeURIComponent(value)}`)
103 103   .then(res => res.json())
104 104   .then(this.renderResults);
105 105   }
106 106  
107 - handleKeyPress = (e) => {
108 - if(e.code === 'Enter') {
109 - this.handleSearch();
110 - }
111 - }
112 112  
113 - get html() {
114 - return `
61 + get searchInputTemplate() {
62 + return this.createTemplate(`
115 115   <div>
116 116   <input type="text"><button id="search">Search</button>
117 117   <div id="results"></div>
... ... @@ -118,7 +118,7 @@
118 118   <button id="prev">prev</button>
119 119   <button id="next">next</button>
120 120   </div>
121 - `;
69 + `);
122 122   }
123 123  
124 124   renderResults = (results) => {
... ... @@ -135,7 +135,7 @@
135 135   }
136 136  
137 137   render() {
138 - this.shadowRoot.appendChild(this.template.content.cloneNode(true));
86 + this.shadowRoot.appendChild(this.searchInputTemplate.content.cloneNode(true));
139 139   }
140 140   }
141 141  );
... ... @@ -154,28 +154,20 @@
154 154   return this.getAttribute('data-href');
155 155   }
156 156  
157 - get styles() {
158 - return `
159 - a {
160 - color: var(--color-brand-primary);
161 - }
162 - `;
163 - }
164 - get html() {
165 - return `
105 + get resultTemplate() {
106 + return this.createTemplate(`
166 166   <div>
167 - <a href="/bin/view/${this.hrefAttr}">${this.titleAttr}</a>
108 + <a href=${this.hrefAttr}>${this.titleAttr}</a>
168 168   <div>
169 169   <slot></slot>
170 170   </div>
171 - </div> `
112 + </div>
113 + `);
172 172   }
173 -
174 174   connectedCallback() {
175 175   this.attachShadow({ mode: 'open' });
176 - this.shadowRoot.appendChild(this.template.content.cloneNode(true));
117 + this.shadowRoot.appendChild(this.resultTemplate.content.cloneNode(true));
177 177   }
178 -
179 179   }
180 180  );
181 181  </script>