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.23
edited by bougault
on 2023/01/13 14:34
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,55 +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 - this.$('#search').addEventListener('click', this.handleSearch);
52 - this.$('#prev').addEventListener('click', this.handlePrevPage);
53 - this.$('#next').addEventListener('click', this.handleNextPage);
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 + });
54 54   }
55 55  
56 - disconnectedCallback() {
57 - this.$('#search').removeEventListener('click', this.handleSearch);
58 - this.$('#prev').removeEventListener('click', this.handlePrevPage);
59 - this.$('#next').removeEventListener('click', this.handleNextPage);
60 - }
61 61  
62 - get styles() {
63 - return `
64 - input[type="text"] {
65 - border: 1px solid red;
66 - }
67 - `
68 - }
69 - handlePrevPage = () => {
70 - if(this.offset > 0) {
71 - this.offset--;
72 - this.handleSearch();
73 - }
74 - }
75 - handleNextPage = () => {
76 - this.offset++;
77 - this.handleSearch();
78 - }
79 -
80 80   handleSearch = () => {
81 81   const value = this.$('input[type="text"]').value;
82 - fetch(`${this.searchBaseUrl}${encodeURIComponent(value)}&offset=${this.offset}`)
55 + fetch(`${this.searchBaseUrl}${encodeURIComponent(value)}`)
83 83   .then(res => res.json())
84 84   .then(this.renderResults);
85 85   }
86 86  
87 87  
88 - get html() {
89 - return `
61 + get searchInputTemplate() {
62 + return this.createTemplate(`
90 90   <div>
91 91   <input type="text"><button id="search">Search</button>
92 92   <div id="results"></div>
... ... @@ -93,7 +93,7 @@
93 93   <button id="prev">prev</button>
94 94   <button id="next">next</button>
95 95   </div>
96 - `;
69 + `);
97 97   }
98 98  
99 99   renderResults = (results) => {
... ... @@ -110,7 +110,7 @@
110 110   }
111 111  
112 112   render() {
113 - this.shadowRoot.appendChild(this.template.content.cloneNode(true));
86 + this.shadowRoot.appendChild(this.searchInputTemplate.content.cloneNode(true));
114 114   }
115 115   }
116 116  );
... ... @@ -129,26 +129,19 @@
129 129   return this.getAttribute('data-href');
130 130   }
131 131  
132 - get styles() {
133 - return `
134 - a {
135 - color: var(--color-brand-primary);
136 - }
137 - `;
138 - }
139 - get html() {
140 - return `
105 + get resultTemplate() {
106 + return this.createTemplate(`
141 141   <div>
142 142   <a href=${this.hrefAttr}>${this.titleAttr}</a>
143 143   <div>
144 144   <slot></slot>
145 145   </div>
146 - </div> `
112 + </div>
113 + `);
147 147   }
148 -
149 149   connectedCallback() {
150 150   this.attachShadow({ mode: 'open' });
151 - this.shadowRoot.appendChild(this.template.content.cloneNode(true));
117 + this.shadowRoot.appendChild(this.resultTemplate.content.cloneNode(true));
152 152   }
153 153   }
154 154  );