Changes for page CLB Search Component

Summary

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

Details

Page properties

Content

...	...	@@ -14,6 +14,14 @@
14	14	template.innerHTML = htmlString;
15	15	return template;
16	16	}
	17	+
	18	+ $(selector) {
	19	+ return this.shadowRoot.querySelector(selector);
	20	+ }
	21	+
	22	+ $$(selector) {
	23	+ return this.shadowRoot.querySelectorAll(selector);
	24	+ }
17	17	}
18	18
19	19	customElements.define('clb-simplified-search',
...	...	@@ -28,34 +28,41 @@
28	28	// this.attachShadow({ mode: 'open' });
29	29	super.connectedCallback();
30	30	this.render();
31		- this.searchButton.addEventListener('click', () => this.handleSearch());
	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	+ });
32	32	}
33	33
34	34
35		- handleSearch() {
36		- fetch(`${this.searchBaseUrl}${encodeURIComponent(this.searchInput.value)}`)
37		- .then(res => res.json())
38		- .then(this.renderResults);
	53	+ handleSearch = () => {
	54	+ const value = this.$('input[type="text"]').value;
	55	+ fetch(`${this.searchBaseUrl}${encodeURIComponent(value)}&offset=${this.offset}`)
	56	+ .then(res => res.json())
	57	+ .then(this.renderResults);
39	39	}
40	40
41		- get searchInput() {
42		- return this.shadowRoot.querySelector('input[type="text"]');
43		- }
44	44
45		- get searchButton() {
46		- return this.shadowRoot.querySelector('button');
47		- }
48		-
49	49	get searchInputTemplate() {
50		- return this.createTemplate('<div><input type="text"><button>Search</button><div id="results"></div></div>');
	62	+ return this.createTemplate(`
	63	+ <div>
	64	+ <input type="text"><button id="search">Search</button>
	65	+ <div id="results"></div>
	66	+ <button id="prev">prev</button>
	67	+ <button id="next">next</button>
	68	+ </div>
	69	+ `);
51	51	}
52	52
53		- resultsContainer = () => {
54		- return this.shadowRoot.querySelector('#results');
55		- }
56		-
57		- renderResults(results) {
58		- const resultsContainer = this.shadowRoot.querySelector('#results');
	72	+ renderResults = (results) => {
	73	+ const resultsContainer = this.$('#results');
59	59	resultsContainer.replaceChildren();
60	60	for(let i = 0, j = results.length; i < j; i++) {
61	61	const { title_, spaces, doccontent_en } = results[i];
...	...	@@ -104,4 +104,5 @@
104	104	}
105	105	);
106	106	</script>
	122	+<clb-simplified-search></clb-simplified-search>
107	107	{{/html}}