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,83 +1,141 @@ 1 1 {{html clean="false"}} 2 +<!-- 3 + !!! POC. Code must be reviewed / optimized and packaged for use in production !!! 4 +--> 5 +<script type="module"> 6 +import {LitElement, html, css} from 'https://cdn.jsdelivr.net/gh/lit/dist@2/core/lit-core.min.js'; 7 +window.addEventListener('DOMContentLoaded', function() { 2 2 3 -<select id="context-search-type"> 4 - <option value="all">All</option> 5 - <option value="collabs">Collabs</option> 6 - <option value="current-collab">Current Collab</option> 7 -</select> 8 -<input type="text" id="context-search-text" /> 9 -<button id="context-search-button" class="btn btn-primary">Search</button> 10 - 11 -<pre id="context-search-response"></pre> 12 -<script> 13 - window.addEventListener('DOMContentLoaded', function() { 14 - const contextSearchType = document.getElementById("context-search-type"); 15 - const contextSearchText = document.getElementById("context-search-text"); 16 - const contextSearchResponse = document.getElementById("context-search-response"); 17 - const contextSearchButton = document.getElementById("context-search-button"); 18 - contextSearchButton.addEventListener('click', function() { 19 - const context = contextSearchType.options[contextSearchType.selectedIndex].value; 20 - const term = contextSearchText.value; 21 - switch(context) { 22 - case 'collabs': 23 - document.location.href = `/bin/view/Collabs/#search=${term}`; 24 - break; 25 - case 'current-collab': 26 - handleXWikiSearch('bougaultx'); 27 - break 28 - default: 29 - handleXWikiSearch('', applyAdministratorFilter) 9 + class UnifiedSearch extends LitElement { 10 + /* 11 + static properties = { 12 + searchText: { type: String }, 13 + favoritesFilter: { type: Boolean }, 14 + administratorFilter: { type: Boolean }, 15 + editorFilter: { type: Boolean }, 16 + viewerFilter: { type: Boolean }, 17 + publicFilter: { type: Boolean }, 18 + privateFilter: { type: Boolean }, 19 + } 20 + */ 21 + static properties = { 22 + results: { type: Array } 23 + } 24 + static styles = css` 25 + .result { 26 + margin-top: 1em; 30 30 } 28 + .light { 29 + color: var(--color-gray-500, #CCC); 30 + font-size: 14px; 31 + } 32 + a { 33 + color: var(--color-brand-primary, blue); 34 + } 35 + `; 36 + constructor() { 37 + super(); 38 + this.searchText = ""; 39 + this.administrator = false; 40 + this.editor = false; 41 + this.viewer = false; 42 + this.rolesFilter = []; 43 + this.filterUrl = new URL(`${document.location.origin}/rest/v1/collabs?search=&offset=0&orderField=title&order=asc&favorite=&roles=`); 44 + this.results = []; 45 + } 46 + toggleRoleFilter(roleName) { 47 + if(this.rolesFilter.indexOf(roleName) == -1) { 48 + this.rolesFilter.push(roleName); 49 + } else { 50 + this.rolesFilter.filter(role => role !== roleName); 51 + } 52 + this[roleName] = !this[roleName]; 53 + this.filterUrl.searchParams.set('roles', this.rolesFilter.join("+")); 54 + // if search text then apply filter 55 + // else return filters result 56 + } 57 + setSearchText(e) { 58 + this.searchText = e.target.value; 59 + } 60 + handleSearch() { 61 + if(this.searchText !== "") { 62 + Promise.all([ 63 + this.fetchWikiSearch(), 64 + this.fetchFilterSearch() 65 + ]) 66 + } else { 67 + console.log("no search text, should return filter search results if any"); 68 + } 69 + } 70 + hasActiveFilters() { 71 + // we only look at role filters for POC. 72 + return this.roles.length > 0; 73 + } 74 + fetchWikiSearch() { 75 + // request should be built from component, not from "external" dependency. Leave it here like this for POC. 76 + return handleXWikiSearch(this.searchText); 77 + } 78 + fetchFilterSearch() { 79 + return new Promise((resolve) => { 80 + if(hasActiveFilters) { 81 + fetch(this.filterUrl).then(console.log); 82 + } else { 83 + resolve(null); 84 + } 85 + }); 86 + } 87 + getLink(xwikiDocSpace) { 88 + return `/bin/view/${xwikiDocSpace.replaceAll('.', '/')}`; 89 + } 90 + render() { 91 + return html` 92 +<div> 93 + <div> 94 + <input @change="${this.setSearchText}" type="text" placeholder="Search..." /> 95 + <button @click="${this.handleSearch}">Search</button> 96 + </div> 97 + <div> 98 + <label><input type="checkbox" @change="${() => this.toggleRoleFilter('administrator')}" .checked="${this.administratorFilter}"/> Administrator</label> 99 + <label><input type="checkbox" @change="${() => this.toggleRoleFilter('editor')}" .checked="${this.editorFilter}"/> Editor</label> 100 + <label><input type="checkbox" @change="${() => this.toggleRoleFilter('viewer')}" .checked="${this.viewerFilter}"/> Viewer</label> 101 + </div> 102 + <div> 103 + ${this.results.map(result => html` 104 + <div class="result"> 105 + <a href="${this.getLink(result.space)}">${result.title_}</a> 106 + <div>${result.doccontent_.substring(0, 150)} 107 + <div class="light">${result.space.replaceAll('.', ' / ')}</div> 108 + </div> 109 + `)} 110 + </div> 111 +</div> 112 +` 113 + } 114 + } 115 + customElements.define('clb-unified-search', UnifiedSearch); 31 31 32 - });33 - functionhandleXWikiSearch(space, callback) {117 + function handleXWikiSearch(searchString) { 118 + return new Promise((resolve) => { 34 34 require(['jquery'], function($) { 35 - var solrServiceURL = new XWiki.Document('SuggestSolrService', 'XWiki').getURL('get'); 36 - const contextSearchButton = document.getElementById("context-search-button"); 37 - const xwikiSpace = space ? `.${space}` : ''; 38 - contextSearchButton.addEventListener('click', function() { 120 + const solrServiceURL = new XWiki.Document('SuggestSolrService', 'XWiki').getURL('get'); 121 + //contextSearchButton.addEventListener('click', function() { 39 39 $.post(solrServiceURL, { 40 - outputSyntax: 'plain', 41 - media: 'json', 42 - query: [ 43 - 'q="__INPUT__"~100', 44 - 'fq=type:DOCUMENT', 45 - `fq=space:Collabs${xwikiSpace}.*` 46 - ].join('\n'), 47 - input: $('#context-search-text').val() 48 - }).then(res => { 49 - if(callback) { 50 - callback(res).then(results => { 51 - contextSearchResponse.innerText = JSON.stringify(results, null, 2); 52 - }) 53 - } else { 54 - contextSearchResponse.innerText = JSON.stringify(res, null, 2); 55 - } 56 - }); 57 - }); 123 + outputSyntax: 'plain', 124 + media: 'json', 125 + query: [ 126 + 'q="__INPUT__"~100', 127 + 'fq=type:DOCUMENT', 128 + `fq=space:Collabs.*` 129 + ].join('\n'), 130 + input: searchString 131 + }).then(resolve); 132 + //}); 133 + }); 58 58 }); 59 59 } 60 - function applyAdministratorFilter(results) { 61 - return new Promise((resolve, reject) => { 62 - fetch("/rest/v1/collabs?roles=administrator") 63 - .then(res => res.json()) 64 - .then(collabs => { 65 - const spaces = collabs.map(collab => `Collabs.${collab.name}`); 66 - const filtered = results.filter(result => { 67 - const r = spaces.some(space => { 68 - console.log(result.space.startsWith(space), result.space, space); 69 - return result.space.startsWith(space) 70 - }) 71 - console.log(r); 72 - return r 73 - }); 74 - resolve(filtered); 75 - }) 76 - 77 - }) 78 - } 79 79 }); 137 +</script> 80 80 139 +<clb-unified-search></clb-unified-search> 81 81 82 -</script> 83 83 {{/html}}