Changes for page CLB Search Component

Summary

• Page properties (1 modified, 0 added, 0 removed)

Details

Page properties

Content

...	...	@@ -11,34 +11,17 @@
11	11
12	12	createTemplate(htmlString) {
13	13	const template = document.createElement('template');
14		- template.innerHTML = `
15		- <style>
16		- ${this.styles}
17		- </style>
18		- ${htmlString}
19		- `;
	14	+ template.innerHTML = htmlString;
20	20	return template;
21	21	}
22		-
23		- get styles() {
24		- return ``;
25		- }
26		- $(selector) {
27		- return this.shadowRoot.querySelector(selector);
28		- }
29		-
30		- $$(selector) {
31		- return this.shadowRoot.querySelectorAll(selector);
32		- }
33	33	}
34	34
35	35	customElements.define('clb-simplified-search',
36	36	class extends ClbComponent {
37		- 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=';
38	38	constructor() {
39	39	super();
40	40	this.results = [];
41		- this.offset = 0;
42	42	}
43	43
44	44	connectedCallback() {
...	...	@@ -45,41 +45,34 @@
45	45	// this.attachShadow({ mode: 'open' });
46	46	super.connectedCallback();
47	47	this.render();
48		- this.$('#search').addEventListener('click', () => this.handleSearch());
49		- this.$('#prev').addEventListener('click', () => {
50		- if(this.offset > 0) {
51		- this.offset--;
52		- this.handleSearch();
53		- }
54		- });
55		- this.$('#next').addEventListener('click', () => {
56		- this.offset++;
57		- this.handleSearch();
58		- });
	31	+ this.searchButton.addEventListener('click', () => this.handleSearch());
59	59	}
60	60
61	61
62		- handleSearch = () => {
63		- const value = this.$('input[type="text"]').value;
64		- fetch(`${this.searchBaseUrl}${encodeURIComponent(value)}&offset=${this.offset}`)
65		- .then(res => res.json())
66		- .then(this.renderResults);
	35	+ handleSearch() {
	36	+ fetch(`${this.searchBaseUrl}${encodeURIComponent(this.searchInput.value)}`)
	37	+ .then(res => res.json())
	38	+ .then(this.renderResults);
67	67	}
68	68
	41	+ get searchInput() {
	42	+ return this.shadowRoot.querySelector('input[type="text"]');
	43	+ }
69	69
	45	+ get searchButton() {
	46	+ return this.shadowRoot.querySelector('button');
	47	+ }
	48	+
70	70	get searchInputTemplate() {
71		- return this.createTemplate(`
72		- <div>
73		- <input type="text"><button id="search">Search</button>
74		- <div id="results"></div>
75		- <button id="prev">prev</button>
76		- <button id="next">next</button>
77		- </div>
78		- `);
	50	+ return this.createTemplate('<div><input type="text"><button>Search</button><div id="results"></div></div>');
79	79	}
80	80
81		- renderResults = (results) => {
82		- const resultsContainer = this.$('#results');
	53	+ resultsContainer = () => {
	54	+ return this.shadowRoot.querySelector('#results');
	55	+ }
	56	+
	57	+ renderResults(results) {
	58	+ const resultsContainer = this.shadowRoot.querySelector('#results');
83	83	resultsContainer.replaceChildren();
84	84	for(let i = 0, j = results.length; i < j; i++) {
85	85	const { title_, spaces, doccontent_en } = results[i];
...	...	@@ -128,5 +128,4 @@
128	128	}
129	129	);
130	130	</script>
131		-<clb-simplified-search></clb-simplified-search>
132	132	{{/html}}