CLB Search Component

class ClbComponent extends HTMLElement {
    constructor() {
        super();
    }

    connectedCallback() {
        this.attachShadow({ mode: 'open'});
    }

    createTemplate(htmlString) {
        const template = document.createElement('template');
        template.innerHTML = htmlString;
        return template;
    }

    $(selector) {
        return this.shadowRoot.querySelector(selector);
    }

    $$(selector) {
        return this.shadowRoot.querySelectorAll(selector);
    }
}

customElements.define('clb-simplified-search',
    class extends ClbComponent {
        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=';
        constructor() {
            super();
            this.results = [];
        }

        connectedCallback() {
            // this.attachShadow({ mode: 'open' });
            super.connectedCallback();
            this.render();
            this.searchButton.addEventListener('click', () => this.handleSearch());
        }


        handleSearch = () => {
            fetch(`${this.searchBaseUrl}${encodeURIComponent(this.searchInput.value)}`)
            .then(res => res.json())
            .then(this.renderResults);

        }

        get searchInput() {
            return this.$('input[type="text"]');
        }

        get searchButton() {
            return this.$('#button');
        }


        get searchInputTemplate() {
            return this.createTemplate(`
                

                    
                    

                    
                    
                
            `);
        }

        renderResults(results) {
            const resultsContainer = this.$('#results');
            resultsContainer.replaceChildren();
            for(let i = 0, j = results.length; i < j; i++) {
                const { title_, spaces, doccontent_en } = results[i];
                const elt = document.createElement('clb-search-result');
                elt.setAttribute('data-title', title_);
                elt.setAttribute('data-href', spaces.join('/'));
                elt.innerHTML = doccontent_en;
                resultsContainer.appendChild(elt);
            }
        }

        render() {
            this.shadowRoot.appendChild(this.searchInputTemplate.content.cloneNode(true));
        }
    }
);

customElements.define('clb-search-result',
    class extends ClbComponent {
        constructor() {
            super();
        }

        get titleAttr() {
            return this.getAttribute('data-title');
        }

        get hrefAttr() {
            return this.getAttribute('data-href');
        }

        get resultTemplate() {
            return this.createTemplate(`
                

                    ${this.titleAttr}
                    

                        
                    
                
                `);
        }
        connectedCallback() {
            this.attachShadow({ mode: 'open' });
            this.shadowRoot.appendChild(this.resultTemplate.content.cloneNode(true));
        }
    }
);