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,7 +1,13 @@ 1 1 {{html clean="false"}} 2 +<!-- 3 + !!! POC. Code would must be reviewed / optimized and packaged for use in production !!! 4 +--> 2 2 <script type="module"> 3 - import {LitElement, html} from 'https://cdn.jsdelivr.net/gh/lit/dist@2/core/lit-core.min.js'; 6 +import {LitElement, html} from 'https://cdn.jsdelivr.net/gh/lit/dist@2/core/lit-core.min.js'; 7 +window.addEventListener('DOMContentLoaded', function() { 8 + 4 4 class UnifiedSearch extends LitElement { 10 + /* 5 5 static properties = { 6 6 searchText: { type: String }, 7 7 favoritesFilter: { type: Boolean }, ... ... @@ -11,19 +11,24 @@ 11 11 publicFilter: { type: Boolean }, 12 12 privateFilter: { type: Boolean }, 13 13 } 20 + */ 14 14 constructor() { 15 15 super(); 16 16 this.searchText = ""; 17 - this.favoritesFilter = false; 18 - this.administratorFilter = true; 19 - this.editorFilter = false; 20 - this.viewerFilter = false; 21 - this.publicFilter = false; 22 - this.privateFilter = false; 24 + this.administrator = false; 25 + this.editor = false; 26 + this.viewer = false; 27 + this.rolesFilter = []; 28 + this.filterUrl = new URL(`${document.location.origin}/rest/v1/collabs?search=&offset=0&orderField=title&order=asc&favorite=true&roles=`); 23 23 } 24 - toggleFilter(filter) { 25 - filter = !filter; 26 - console.log(this.administratorFilter); 30 + toggleRoleFilter(roleName) { 31 + if(this.rolesFilter.indexOf(roleName) == -1) { 32 + this.rolesFilter.push(roleName); 33 + } else { 34 + this.rolesFilter.filter(role => role !== roleName); 35 + } 36 + this[roleName] = !this[roleName]; 37 + this.filterUrl.searchParams.set('roles', this.rolesFilter.join("+")); 27 27 } 28 28 setSearchText(e) { 29 29 this.searchText = e.target.value; ... ... @@ -30,7 +30,17 @@ 30 30 } 31 31 handleSearch() { 32 32 console.log(this.searchText); 44 + if(this.searchText !== "") { 45 + this.fetchWikiSearch(); 46 + } 33 33 } 48 + fetchWikiSearch() { 49 + // request should be built from component, not from "external" dependency. Leave it here like this for POC. 50 + handleXWikiSearch(this.searchText).then(results => console.log(results)); 51 + } 52 + buildFilter() { 53 + //https://wiki-dev.ebrains.eu/rest/v1/collabs?search=&offset=0&orderField=title&order=asc&favorite=true&roles= 54 + } 34 34 render() { 35 35 return html` 36 36 <div> ... ... @@ -38,16 +38,41 @@ 38 38 <input @change="${this.setSearchText}" type="text" placeholder="Search..." /> 39 39 <button @click="${this.handleSearch}">Search</button> 40 40 </div> 41 - <label><input type="checkbox" @change="${() => this.toggleFilter(this.administratorFilter)}" .checked="${this.administratorFilter}"/> Administrator</label> 62 + <div> 63 + <label><input type="checkbox" @change="${() => this.toggleRoleFilter('administrator')}" .checked="${this.administratorFilter}"/> Administrator</label> 64 + <label><input type="checkbox" @change="${() => this.toggleRoleFilter('editor')}" .checked="${this.editorFilter}"/> Editor</label> 65 + <label><input type="checkbox" @change="${() => this.toggleRoleFilter('viewer')}" .checked="${this.viewerFilter}"/> Viewer</label> 66 + </div> 42 42 </div> 43 43 ` 44 44 } 45 45 } 46 46 customElements.define('clb-unified-search', UnifiedSearch); 72 + 73 + function handleXWikiSearch(searchString) { 74 + return new Promise((resolve) => { 75 + require(['jquery'], function($) { 76 + var solrServiceURL = new XWiki.Document('SuggestSolrService', 'XWiki').getURL('get'); 77 + contextSearchButton.addEventListener('click', function() { 78 + $.post(solrServiceURL, { 79 + outputSyntax: 'plain', 80 + media: 'json', 81 + query: [ 82 + 'q="__INPUT__"~100', 83 + 'fq=type:DOCUMENT', 84 + `fq=space:Collabs.*` 85 + ].join('\n'), 86 + input: searchString 87 + }).then(resolve); 88 + }); 89 + }); 90 + }); 91 + } 92 +}); 47 47 </script> 48 48 49 49 <clb-unified-search></clb-unified-search> 50 - 96 +<!-- 51 51 <select id="context-search-type"> 52 52 <option value="all">All</option> 53 53 <option value="collabs">Collabs</option> ... ... @@ -171,7 +171,6 @@ 171 171 }) 172 172 } 173 173 }); 174 - 175 - 176 176 </script> 221 +--> 177 177 {{/html}}