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,6 +1,7 @@ 1 -{{html clean="false"}} 2 -<!-- 3 - !!! POC. Code must be reviewed / optimized and packaged for use in production !!! 1 + 2 +{{html clean="false"}}<!-- 3 + !!! POC. Code must be reviewed / optimized and packaged for use in production !!! 4 + !!! Many optimisations can be done !!! 4 4 --> 5 5 <script type="module"> 6 6 import {LitElement, html, css} from 'https://cdn.jsdelivr.net/gh/lit/dist@2/core/lit-core.min.js'; ... ... @@ -7,21 +7,15 @@ 7 7 window.addEventListener('DOMContentLoaded', function() { 8 8 9 9 class UnifiedSearch extends LitElement { 10 - /* 11 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 }, 12 + results: { type: Array }, 13 + resultsCache: { type: Array }, 14 + collabFiltersResults: { type: Array} 19 19 } 20 - */ 21 - static properties = { 22 - results: { type: Array } 23 - } 24 24 static styles = css` 17 + :host > div { 18 + padding-bottom: 4em; 19 + } 25 25 .result { 26 26 margin-top: 1em; 27 27 } ... ... @@ -43,7 +43,11 @@ 43 43 this.rolesFilter = []; 44 44 this.filterUrl = new URL(`${document.location.origin}/rest/v1/collabs?search=&offset=0&orderField=title&order=asc&limit=10000&favorite=false&roles=`); 45 45 this.results = []; 41 + this.resultsCache = []; 46 46 } 43 + firstUpdated() { 44 + this.renderRoot.getElementById('searchInput').focus(); 45 + } 47 47 toggleRoleFilter(roleName) { 48 48 if(this.rolesFilter.indexOf(roleName) === -1) { 49 49 this.rolesFilter.push(roleName); ... ... @@ -50,7 +50,6 @@ 50 50 } else { 51 51 this.rolesFilter = this.rolesFilter.filter(role => role !== roleName); 52 52 } 53 - console.log(this.rolesFilter); 54 54 this[roleName] = !this[roleName]; 55 55 this.filterUrl.searchParams.set('roles', this.rolesFilter.join("+")); 56 56 this.handleSearch(); ... ... @@ -58,24 +58,26 @@ 58 58 setSearchText(e) { 59 59 this.searchText = e.target.value; 60 60 } 61 - handleSearch() { 62 - console.log(this.rolesFilter) 63 - if(this.searchText !== "") { 59 + handleSearch(textSearch) { 60 + if(this.searchText !== "" || textSearch) { 64 64 if(this.searchText !== this.prevSearchText) { 65 - console.log(this.searchText, this.prevSearchText);62 + this.clearResults(); 66 66 this.prevSearchText = this.searchText; 67 - Promise.all([68 - this. fetchWikiSearch(),69 - this. fetchFilterSearch()70 - ]).then(([wikiSearchResults, collabSearchResults])=> {71 - this.results= wikiSearchResults;72 - console.log(wikiSearchResults,collabSearchResults);73 - } );74 - }elseif (this.searchText === this.prevSearchText){75 - console.log("Onlyapply filteronresults");64 + this.fetchWikiSearch().then(results => { 65 + this.resultsCache = results; 66 + if(this.hasActiveFilters()) { 67 + this.fetchFilterSearch().then(this.filterResults); 68 + } else { 69 + this.results = results; 70 + } 71 + }) 72 + } else if (this.searchText === this.prevSearchText && this.hasActiveFilters()) { 76 76 this.fetchFilterSearch().then(this.filterResults) 74 + } else { 75 + this.results = this.resultsCache; 77 77 } 78 78 } else { 78 + this.clearResults(); 79 79 console.log("no search text, should return filter search results if any"); 80 80 this.fetchFilterSearch().then(collabs => { 81 81 console.log("Format and display collabs", collabs); ... ... @@ -93,7 +93,7 @@ 93 93 fetchFilterSearch() { 94 94 return new Promise((resolve) => { 95 95 if(this.hasActiveFilters()) { 96 - fetch(this.filterUrl).then(res => res.json()).then(resolve); 96 + fetch(this.filterUrl).then(res => res.json()).then((res) => resolve(res)); 97 97 } else { 98 98 resolve([]); 99 99 } ... ... @@ -100,20 +100,27 @@ 100 100 }); 101 101 } 102 102 filterResults = (filteredCollabs) => { 103 - console.log("filteredCollabs:", filteredCollabs, "search results:", this.results); 104 104 const collabSpaces = filteredCollabs.map(collab => `Collabs.${collab.name}`); 105 - const filteredResults = this.results.filter(result => collabSpaces.some(space => result.space.startsWith(space))); 106 - this.results = filteredResults; 104 + this.results = this.resultsCache.filter(result => collabSpaces.some(space => result.space.startsWith(space))); 107 107 } 106 + clearResults() { 107 + this.results = []; 108 + this.resultsCache = []; 109 + } 108 108 getLink(xwikiDocSpace) { 109 109 return `/bin/view/${xwikiDocSpace.replaceAll('.', '/')}`; 110 110 } 113 + handleKeyPress(e) { 114 + if (e.keyCode === 13) { 115 + this.handleSearch(true); 116 + } 117 + } 111 111 render() { 112 112 return html` 113 113 <div> 114 114 <div> 115 - <input @change="${this.setSearchText}" type="text" placeholder="Search..." /> 116 - <button @click="${this.handleSearch}">Search</button> 122 + <input id="searchInput" @change="${this.setSearchText}" type="text" placeholder="Search..." @keypress="${this.handleKeyPress}" /> 123 + <button @click="${() => this.handleSearch(true)}">Search</button> 117 117 </div> 118 118 <div> 119 119 <label><input type="checkbox" @change="${() => this.toggleRoleFilter('administrator')}" .checked="${this.administratorFilter}"/> Administrator</label> ... ... @@ -129,7 +129,6 @@ 129 129 </div> 130 130 `)} 131 131 </div> 132 -</div> 133 133 ` 134 134 } 135 135 } ... ... @@ -140,9 +140,10 @@ 140 140 require(['jquery'], function($) { 141 141 const solrServiceURL = new XWiki.Document('SuggestSolrService', 'XWiki').getURL('get'); 142 142 //contextSearchButton.addEventListener('click', function() { 143 - $. post(solrServiceURL, {149 + $.get(solrServiceURL, { 144 144 outputSyntax: 'plain', 145 145 media: 'json', 152 + nb:1000, 146 146 query: [ 147 147 'q="__INPUT__"~100', 148 148 'fq=type:DOCUMENT', ... ... @@ -156,7 +156,4 @@ 156 156 } 157 157 }); 158 158 </script> 159 - 160 -<clb-unified-search></clb-unified-search> 161 - 162 -{{/html}} 166 +<clb-unified-search></clb-unified-search>{{/html}}