Changes for page Context Search
Last modified by bougault on 2023/02/20 16:29
Summary
-
Page properties (1 modified, 0 added, 0 removed)
Details
- Page properties
-
- Content
-
... ... @@ -1,60 +1,21 @@ 1 1 {{html clean="false"}} 2 -<!-- 3 - !!! POC. Code would need to be reviewed / optimized and packaged if this is meant to be used in production !!! 4 ---> 5 5 <script type="module"> 6 6 import {LitElement, html} from 'https://cdn.jsdelivr.net/gh/lit/dist@2/core/lit-core.min.js'; 7 7 class UnifiedSearch extends LitElement { 8 8 static properties = { 9 - searchText: { type: String }, 10 - favoritesFilter: { type: Boolean }, 11 - administratorFilter: { type: Boolean }, 12 - editorFilter: { type: Boolean }, 13 - viewerFilter: { type: Boolean }, 14 - publicFilter: { type: Boolean }, 15 - privateFilter: { type: Boolean }, 6 + searchText: { type: String } 16 16 } 17 - constructor() { 18 - super(); 19 - this.searchText = ""; 20 - this.favoritesFilter = false; 21 - this.administratorFilter = false; 22 - this.editorFilter = false; 23 - this.viewerFilter = false; 24 - this.publicFilter = false; 25 - this.privateFilter = false; 26 - } 27 - toggleBooleanFilter(filterName) { 28 - this[filterName] = !this[filterName]; 29 - console.log(this.administratorFilter); 30 - } 31 31 setSearchText(e) { 32 32 this.searchText = e.target.value; 33 33 } 34 34 handleSearch() { 35 - // check if text changed 36 36 console.log(this.searchText); 37 37 } 38 - buildFilter() { 39 - //https://wiki-dev.ebrains.eu/rest/v1/collabs?search=&offset=0&orderField=title&order=asc&favorite=true&roles= 40 - } 41 41 render() { 42 - return html` 43 -<div> 44 - <div> 45 - <input @change="${this.setSearchText}" type="text" placeholder="Search..." /> 46 - <button @click="${this.handleSearch}">Search</button> 47 - </div> 48 - <div> 49 - <label><input type="checkbox" @change="${() => this.toggleBooleanFilter('favoritesFilter')}" .checked="${this.favoritesFilter}"/> Favorites</label> 50 - <label><input type="checkbox" @change="${() => this.toggleBooleanFilter('administratorFilter')}" .checked="${this.administratorFilter}"/> Administrator</label> 51 - <label><input type="checkbox" @change="${() => this.toggleBooleanFilter('editorFilter')}" .checked="${this.editorFilter}"/> Editor</label> 52 - <label><input type="checkbox" @change="${() => this.toggleBooleanFilter('viewerFilter')}" .checked="${this.viewerFilter}"/> Viewer</label> 53 - <label><input type="checkbox" @change="${() => this.toggleBooleanFilter('publicFilter')}" .checked="${this.publicFilter}"/> Public</label> 54 - <label><input type="checkbox" @change="${() => this.toggleBooleanFilter('privateFilter')}" .checked="${this.privateFilter}"/> Public</label> 55 - </div> 56 -</div> 57 -` 15 + return html`<div> 16 + <input @change="${this.setSearchText}" type="text" placeholder="Search..." /> 17 + <button @click="${this.handleSearch}">Search</button> 18 +</div>` 58 58 } 59 59 } 60 60 customElements.define('clb-unified-search', UnifiedSearch); ... ... @@ -61,7 +61,7 @@ 61 61 </script> 62 62 63 63 <clb-unified-search></clb-unified-search> 64 - <!--25 + 65 65 <select id="context-search-type"> 66 66 <option value="all">All</option> 67 67 <option value="collabs">Collabs</option> ... ... @@ -185,6 +185,7 @@ 185 185 }) 186 186 } 187 187 }); 149 + 150 + 188 188 </script> 189 ---> 190 190 {{/html}}