Changes for page CLB Search Component

Summary

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

Details

Page properties

Content

...	...	@@ -11,18 +11,10 @@
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	22
23		- get styles() {
24		- return ``;
25		- }
26	26	$(selector) {
27	27	return this.shadowRoot.querySelector(selector);
28	28	}
...	...	@@ -34,11 +34,10 @@
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=';
	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	38	constructor() {
39	39	super();
40	40	this.results = [];
41		- this.offset = 0;
42	42	}
43	43
44	44	connectedCallback() {
...	...	@@ -45,28 +45,26 @@
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		- });
	39	+ this.searchButton.addEventListener('click', () => this.handleSearch());
59	59	}
60	60
61	61
62	62	handleSearch = () => {
63		- const value = this.$('input[type="text"]').value;
64		- fetch(`${this.searchBaseUrl}${encodeURIComponent(value)}&offset=${this.offset}`)
	44	+ fetch(`${this.searchBaseUrl}${encodeURIComponent(this.searchInput.value)}`)
65	65	.then(res => res.json())
66	66	.then(this.renderResults);
	47	+
67	67	}
68	68
	50	+ get searchInput() {
	51	+ return this.$('input[type="text"]');
	52	+ }
69	69
	54	+ get searchButton() {
	55	+ return this.$('#search');
	56	+ }
	57	+
	58	+
70	70	get searchInputTemplate() {
71	71	return this.createTemplate(`
72	72	<div>