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 - 2 -{{html clean="false"}}<!-- 3 - !!! POC. Code must be reviewed / optimized and packaged for use in production !!! 4 - !!! Many optimisations can be done !!! 1 +{{html clean="false"}} 2 +<!-- 3 + !!! POC. Code 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 } ... ... @@ -38,11 +38,7 @@ 38 38 this.rolesFilter = []; 39 39 this.filterUrl = new URL(`${document.location.origin}/rest/v1/collabs?search=&offset=0&orderField=title&order=asc&limit=10000&favorite=false&roles=`); 40 40 this.results = []; 41 - this.resultsCache = []; 42 42 } 43 - firstUpdated() { 44 - this.renderRoot.getElementById('searchInput').focus(); 45 - } 46 46 toggleRoleFilter(roleName) { 47 47 if(this.rolesFilter.indexOf(roleName) === -1) { 48 48 this.rolesFilter.push(roleName); ... ... @@ -56,26 +56,25 @@ 56 56 setSearchText(e) { 57 57 this.searchText = e.target.value; 58 58 } 59 - handleSearch(textSearch) { 60 - if(this.searchText !== "" || textSearch) { 60 + handleSearch() { 61 + 62 + if(this.searchText !== "") { 61 61 if(this.searchText !== this.prevSearchText) { 62 - this.clearResults(); 64 + console.log("1st") 65 + console.log(this.searchText, this.prevSearchText); 63 63 this.prevSearchText = this.searchText; 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 - }elseif(this.searchText===this.prevSearchText && this.hasActiveFilters()) {67 + Promise.all([ 68 + this.fetchWikiSearch(), 69 + this.fetchFilterSearch() 70 + ]).then(([wikiSearchResults, collabSearchResults]) => { 71 + this.results = wikiSearchResults; 72 + console.log(wikiSearchResults, collabSearchResults); 73 + }); 74 + } else if (this.searchText === this.prevSearchText) { 75 + console.log("Only apply filter on results"); 73 73 this.fetchFilterSearch().then(this.filterResults) 74 - } else { 75 - this.results = this.resultsCache; 76 76 } 77 77 } 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( (res) => resolve(res));96 + fetch(this.filterUrl).then(res => res.json()).then(resolve); 97 97 } else { 98 98 resolve([]); 99 99 } ... ... @@ -100,27 +100,20 @@ 100 100 }); 101 101 } 102 102 filterResults = (filteredCollabs) => { 103 + console.log("filteredCollabs:", filteredCollabs, "search results:", this.results); 103 103 const collabSpaces = filteredCollabs.map(collab => `Collabs.${collab.name}`); 104 - this.results = this.resultsCache.filter(result => collabSpaces.some(space => result.space.startsWith(space))); 105 + const filteredResults = this.results.filter(result => collabSpaces.some(space => result.space.startsWith(space))); 106 + this.results = filteredResults; 105 105 } 106 - clearResults() { 107 - this.results = []; 108 - this.resultsCache = []; 109 - } 110 110 getLink(xwikiDocSpace) { 111 111 return `/bin/view/${xwikiDocSpace.replaceAll('.', '/')}`; 112 112 } 113 - handleKeyPress(e) { 114 - if (e.keyCode === 13) { 115 - this.handleSearch(true); 116 - } 117 - } 118 118 render() { 119 119 return html` 120 120 <div> 121 121 <div> 122 - <input id="searchInput"@change="${this.setSearchText}" type="text" placeholder="Search..."@keypress="${this.handleKeyPress}"/>123 - <button @click="${ () =>this.handleSearch(true)}">Search</button>115 + <input @change="${this.setSearchText}" type="text" placeholder="Search..." /> 116 + <button @click="${this.handleSearch}">Search</button> 124 124 </div> 125 125 <div> 126 126 <label><input type="checkbox" @change="${() => this.toggleRoleFilter('administrator')}" .checked="${this.administratorFilter}"/> Administrator</label> ... ... @@ -136,6 +136,7 @@ 136 136 </div> 137 137 `)} 138 138 </div> 132 +</div> 139 139 ` 140 140 } 141 141 } ... ... @@ -146,10 +146,9 @@ 146 146 require(['jquery'], function($) { 147 147 const solrServiceURL = new XWiki.Document('SuggestSolrService', 'XWiki').getURL('get'); 148 148 //contextSearchButton.addEventListener('click', function() { 149 - $. get(solrServiceURL, {143 + $.post(solrServiceURL, { 150 150 outputSyntax: 'plain', 151 151 media: 'json', 152 - nb:1000, 153 153 query: [ 154 154 'q="__INPUT__"~100', 155 155 'fq=type:DOCUMENT', ... ... @@ -163,4 +163,7 @@ 163 163 } 164 164 }); 165 165 </script> 166 -<clb-unified-search></clb-unified-search>{{/html}} 159 + 160 +<clb-unified-search></clb-unified-search> 161 + 162 +{{/html}}