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,6 @@ 1 1 {{html clean="false"}} 2 2 <!-- 3 - !!! POC. Code must be reviewed / optimized and packaged for use in production !!! 4 - !!! Many optimisations can be done !!! 3 + !!! POC. Code would must be reviewed / optimized and packaged for use in production !!! 5 5 --> 6 6 <script type="module"> 7 7 import {LitElement, html, css} from 'https://cdn.jsdelivr.net/gh/lit/dist@2/core/lit-core.min.js'; ... ... @@ -8,15 +8,21 @@ 8 8 window.addEventListener('DOMContentLoaded', function() { 9 9 10 10 class UnifiedSearch extends LitElement { 10 + /* 11 11 static properties = { 12 - results: { type: Array }, 13 - resultsCache: { type: Array }, 14 - collabFiltersResults: { type: Array} 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 }, 15 15 } 20 + */ 21 + static properties = { 22 + results: { type: Array } 23 + } 16 16 static styles = css` 17 - :host > div { 18 - padding-bottom: 4em; 19 - } 20 20 .result { 21 21 margin-top: 1em; 22 22 } ... ... @@ -27,108 +27,48 @@ 27 27 a { 28 28 color: var(--color-brand-primary, blue); 29 29 } 30 - .rawResults { 31 - display: flex; 32 - font-size: 12px; 33 - margin-top: 2em; 34 - } 35 35 `; 36 36 constructor() { 37 37 super(); 38 38 this.searchText = ""; 39 - this.prevSearchText = ""; 40 40 this.administrator = false; 41 41 this.editor = false; 42 42 this.viewer = false; 43 43 this.rolesFilter = []; 44 - this.filterUrl = new URL(`${document.location.origin}/rest/v1/collabs?search=&offset=0&orderField=title&order=asc& limit=10000&favorite=false&roles=`);43 + this.filterUrl = new URL(`${document.location.origin}/rest/v1/collabs?search=&offset=0&orderField=title&order=asc&favorite=true&roles=`); 45 45 this.results = []; 46 - this.resultsCache = []; 47 47 } 48 - firstUpdated() { 49 - this.renderRoot.getElementById('searchInput').focus(); 50 - } 51 51 toggleRoleFilter(roleName) { 52 - if(this.rolesFilter.indexOf(roleName) == =-1) {47 + if(this.rolesFilter.indexOf(roleName) == -1) { 53 53 this.rolesFilter.push(roleName); 54 54 } else { 55 - this.rolesFilter = this.rolesFilter.filter(role => role !== roleName);50 + this.rolesFilter.filter(role => role !== roleName); 56 56 } 57 57 this[roleName] = !this[roleName]; 58 58 this.filterUrl.searchParams.set('roles', this.rolesFilter.join("+")); 59 - this.handleSearch(); 60 60 } 61 61 setSearchText(e) { 62 62 this.searchText = e.target.value; 63 63 } 64 - handleSearch(textSearch) { 65 - if(this.searchText !== "" || textSearch) { 66 - if(this.searchText !== this.prevSearchText) { 67 - this.clearResults(); 68 - this.prevSearchText = this.searchText; 69 - this.fetchWikiSearch().then(results => { 70 - this.resultsCache = results; 71 - if(this.hasActiveFilters()) { 72 - this.fetchFilterSearch().then(this.filterResults); 73 - } else { 74 - this.results = results; 75 - } 76 - }) 77 - } else if (this.searchText === this.prevSearchText && this.hasActiveFilters()) { 78 - this.fetchFilterSearch().then(this.filterResults) 79 - } else { 80 - this.results = this.resultsCache; 81 - } 82 - } else { 83 - this.clearResults(); 84 - console.log("no search text, should return filter search results if any"); 85 - this.fetchFilterSearch().then(collabs => { 86 - console.log("Format and display collabs", collabs); 87 - }) 58 + handleSearch() { 59 + console.log(this.searchText); 60 + if(this.searchText !== "") { 61 + this.fetchWikiSearch(); 88 88 } 89 89 } 90 - hasActiveFilters() { 91 - // we only look at role filters for POC. 92 - return this.rolesFilter.length > 0; 93 - } 94 94 fetchWikiSearch() { 95 95 // request should be built from component, not from "external" dependency. Leave it here like this for POC. 96 - returnhandleXWikiSearch(this.searchText);66 + handleXWikiSearch(this.searchText).then(results => this.results = results); 97 97 } 98 - fetchFilterSearch() { 99 - return new Promise((resolve) => { 100 - if(this.hasActiveFilters()) { 101 - fetch(this.filterUrl).then(res => res.json()).then((res) => { 102 - this.collabFiltersResults = res; 103 - resolve(res); 104 - }); 105 - } else { 106 - resolve([]); 107 - } 108 - }); 68 + buildFilter() { 69 + //https://wiki-dev.ebrains.eu/rest/v1/collabs?search=&offset=0&orderField=title&order=asc&favorite=true&roles= 109 109 } 110 - filterResults = (filteredCollabs) => { 111 - const collabSpaces = filteredCollabs.map(collab => `Collabs.${collab.name}`); 112 - this.results = this.resultsCache.filter(result => collabSpaces.some(space => result.space.startsWith(space))); 113 - } 114 - clearResults() { 115 - this.results = []; 116 - this.resultsCache = []; 117 - } 118 - getLink(xwikiDocSpace) { 119 - return `/bin/view/${xwikiDocSpace.replaceAll('.', '/')}`; 120 - } 121 - handleKeyPress(e) { 122 - if (e.keyCode === 13) { 123 - this.handleSearch(true); 124 - } 125 - } 126 126 render() { 127 127 return html` 128 128 <div> 129 129 <div> 130 - <input id="searchInput"@change="${this.setSearchText}" type="text" placeholder="Search..."@keypress="${this.handleKeyPress}"/>131 - <button @click="${ () =>this.handleSearch(true)}">Search</button>75 + <input @change="${this.setSearchText}" type="text" placeholder="Search..." /> 76 + <button @click="${this.handleSearch}">Search</button> 132 132 </div> 133 133 <div> 134 134 <label><input type="checkbox" @change="${() => this.toggleRoleFilter('administrator')}" .checked="${this.administratorFilter}"/> Administrator</label> ... ... @@ -138,22 +138,12 @@ 138 138 <div> 139 139 ${this.results.map(result => html` 140 140 <div class="result"> 141 - <a href="${this.getLink(result.space)}">${result.title_}</a> 86 + <a href="#">${result.title_}</a> 87 + <div class="light">${result.space}</div> 142 142 <div>${result.doccontent_.substring(0, 150)} 143 - <div class="light">${result.space.replaceAll('.', ' / ')}</div> 144 144 </div> 145 145 `)} 146 146 </div> 147 - <div class="rawResults"> 148 - <div> 149 - <strong>XWiki Search Results</strong> 150 - <pre>${JSON.stringify(this.resultsCache, null, 2)}</pre> 151 - </div> 152 - <div> 153 - <strong>Collab Search Results (Filters)</strong> 154 - <pre>${JSON.stringify(this.collabFiltersResults, null, 2)}</pre> 155 - </div> 156 - </div> 157 157 </div> 158 158 ` 159 159 } ... ... @@ -181,5 +181,132 @@ 181 181 } 182 182 }); 183 183 </script> 119 + 184 184 <clb-unified-search></clb-unified-search> 121 +<!-- 122 +<select id="context-search-type"> 123 + <option value="all">All</option> 124 + <option value="collabs">Collabs</option> 125 + <option value="current-collab">Current Collab</option> 126 +</select> 127 +<input type="text" id="context-search-text" /> 128 +<button id="context-search-button" class="btn btn-primary">Search</button> 129 +<div class="form-group"> 130 + <label> 131 + <input type="checkbox" data-role-filter="administrator"> Administrator 132 + </label> 133 + <label> 134 + <input type="checkbox" data-role-filter="editor"> Editor 135 + </label> 136 +</div> 137 + 138 + 139 +<pre id="context-search-response"></pre> 140 +<script> 141 + window.addEventListener('DOMContentLoaded', function() { 142 + const filters = { 143 + search: '', 144 + offset: 0, 145 + orderField: 'title', 146 + order: 'asc', 147 + favorite: false, 148 + roles: [] // to be joined as administrator+editor+viewer 149 + }; 150 + 151 + function addRole(role) { 152 + if(filters.roles.indexOf(role) == -1) { 153 + filters.roles.push(role); 154 + } 155 + } 156 + 157 + function removeRole(role) { 158 + filters.roles = filters.roles.filter(r => r !== role) 159 + } 160 + 161 + const filterInputs = document.querySelectorAll('input[data-role-filter]'); 162 + 163 + filterInputs.forEach(function(filterIpt) { 164 + filterIpt.addEventListener('click', function() { 165 + const role = this.getAttribute('data-role-filter'); 166 + if(this.checked) { 167 + addRole(role); 168 + } else { 169 + removeRole(role); 170 + } 171 + runFilteredRequest(); 172 + }) 173 + }); 174 + 175 + function runFilteredRequest() { 176 + const urlParams = new URLSearchParams(); 177 + const tmpFilters = filters; 178 + tmpFilters.roles = tmpFilters.roles.join("+"); 179 + for(filter in tmpFilters) { 180 + urlParams.set(filter, tmpFilters[filter]); 181 + } 182 + console.log(urlParams); 183 + } 184 + // https://wiki-dev.ebrains.eu/rest/v1/collabs?search=&offset=0&orderField=title&order=asc&favorite=false&roles=administrator 185 + const contextSearchType = document.getElementById("context-search-type"); 186 + const contextSearchText = document.getElementById("context-search-text"); 187 + const contextSearchResponse = document.getElementById("context-search-response"); 188 + const contextSearchButton = document.getElementById("context-search-button"); 189 + contextSearchButton.addEventListener('click', function() { 190 + const context = contextSearchType.options[contextSearchType.selectedIndex].value; 191 + const term = contextSearchText.value; 192 + switch(context) { 193 + case 'collabs': 194 + document.location.href = `/bin/view/Collabs/#search=${term}`; 195 + break; 196 + case 'current-collab': 197 + handleXWikiSearch('bougaultx'); 198 + break 199 + default: 200 + handleXWikiSearch('') 201 + } 202 + 203 + }); 204 + function handleXWikiSearch(space, callback) { 205 + require(['jquery'], function($) { 206 + var solrServiceURL = new XWiki.Document('SuggestSolrService', 'XWiki').getURL('get'); 207 + const contextSearchButton = document.getElementById("context-search-button"); 208 + const xwikiSpace = space ? `.${space}` : ''; 209 + contextSearchButton.addEventListener('click', function() { 210 + $.post(solrServiceURL, { 211 + outputSyntax: 'plain', 212 + media: 'json', 213 + query: [ 214 + 'q="__INPUT__"~100', 215 + 'fq=type:DOCUMENT', 216 + `fq=space:Collabs${xwikiSpace}.*` 217 + ].join('\n'), 218 + input: $('#context-search-text').val() 219 + }).then(res => { 220 + if(callback) { 221 + callback(res).then(results => { 222 + contextSearchResponse.innerText = JSON.stringify(results, null, 2); 223 + }) 224 + } else { 225 + contextSearchResponse.innerText = JSON.stringify(res, null, 2); 226 + } 227 + }); 228 + }); 229 + }); 230 + } 231 + function applyAdministratorFilter(results) { 232 + return new Promise((resolve, reject) => { 233 + //fetch("/rest/v1/collabs?roles=administrator") 234 + fetch("/rest/v1/collabs?search=&offset=0&orderField=title&order=asc&favorite=false&roles=administrator") 235 + .then(res => res.json()) 236 + .then(collabs => { 237 + const spaces = collabs.map(collab => `Collabs.${collab.name}`); 238 + const filtered = results.filter(result => spaces.some(space => result.space.startsWith(space))); 239 + resolve(filtered); 240 + }) 241 + 242 + }) 243 + } 244 +}); 245 +</script> 246 +--> 185 185 {{/html}}