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 } ... ... @@ -36,20 +36,14 @@ 36 36 this.editor = false; 37 37 this.viewer = false; 38 38 this.rolesFilter = []; 39 - this.filterUrl = new URL(`${document.location.origin}/rest/v1/collabs?search=&offset=0&orderField=title&order=asc& limit=10000&favorite=false&roles=`);44 + this.filterUrl = new URL(`${document.location.origin}/rest/v1/collabs?search=&offset=0&orderField=title&order=asc&favorite=&roles=`); 40 40 this.results = []; 41 - this.resultsCache = []; 42 - this.offset = 0; 43 - this.nb = 10; 44 44 } 45 - firstUpdated() { 46 - this.renderRoot.getElementById('searchInput').focus(); 47 - } 48 48 toggleRoleFilter(roleName) { 49 - if(this.rolesFilter.indexOf(roleName) == =-1) {48 + if(this.rolesFilter.indexOf(roleName) == -1) { 50 50 this.rolesFilter.push(roleName); 51 51 } else { 52 - this.rolesFilter = this.rolesFilter.filter(role => role !== roleName);51 + this.rolesFilter.filter(role => role !== roleName); 53 53 } 54 54 this[roleName] = !this[roleName]; 55 55 this.filterUrl.searchParams.set('roles', this.rolesFilter.join("+")); ... ... @@ -58,32 +58,22 @@ 58 58 setSearchText(e) { 59 59 this.searchText = e.target.value; 60 60 } 61 - setOffset(e) { 62 - this.offset = e.target.value; 63 - } 64 - setNb(e) { 65 - this.nb = e.target.value; 66 - } 67 - handleSearch(textSearch) { 68 - if(this.searchText !== "" || textSearch) { 69 - if(this.searchText !== this.prevSearchText) { 70 - this.clearResults(); 71 - this.prevSearchText = this.searchText; 72 - this.fetchWikiSearch().then(results => { 73 - this.resultsCache = results; 74 - if(this.hasActiveFilters()) { 75 - this.fetchFilterSearch().then(this.filterResults); 76 - } else { 77 - this.results = results; 78 - } 79 - }) 80 - } else if (this.searchText === this.prevSearchText && this.hasActiveFilters()) { 81 - this.fetchFilterSearch().then(this.filterResults) 82 - } else { 83 - this.results = this.resultsCache; 84 - } 60 + handleSearch() { 61 + if(this.searchText !== "") { 62 + if(this.searchText !== this.prevSearchText) { 63 + console.log(this.searchText, this.prevSearchText); 64 + this.prevSearchText = this.searchText; 65 + Promise.all([ 66 + this.fetchWikiSearch(), 67 + this.fetchFilterSearch() 68 + ]).then(([wikiSearchResults, collabSearchResults]) => { 69 + console.log(wikiSearchResults, collabSearchResults); 70 + }); 71 + } else if (this.searchText === this.prevSearchText) { 72 + console.log("Only apply filter on results"); 73 + this.fetchFilterSearch().then(this.filterResults) 74 + } 85 85 } else { 86 - this.clearResults(); 87 87 console.log("no search text, should return filter search results if any"); 88 88 this.fetchFilterSearch().then(collabs => { 89 89 console.log("Format and display collabs", collabs); ... ... @@ -92,45 +92,33 @@ 92 92 } 93 93 hasActiveFilters() { 94 94 // we only look at role filters for POC. 95 - return this.roles Filter.length > 0;84 + return this.roles.length > 0; 96 96 } 97 97 fetchWikiSearch() { 98 98 // request should be built from component, not from "external" dependency. Leave it here like this for POC. 99 - return handleXWikiSearch(this.searchText , this.offset, this.nb);88 + return handleXWikiSearch(this.searchText); 100 100 } 101 101 fetchFilterSearch() { 102 102 return new Promise((resolve) => { 103 - if(this.hasActiveFilters ()){104 - fetch(this.filterUrl).then(res => res.json()).then( (res) => resolve(res));92 + if(this.hasActiveFilters) { 93 + fetch(this.filterUrl).then(res => res.json()).then(resolve); 105 105 } else { 106 - resolve( []);95 + resolve(null); 107 107 } 108 108 }); 109 109 } 110 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))); 100 + console.log("filteredCollabs:", filteredCollabs, "search results:", this.results); 113 113 } 114 - clearResults() { 115 - this.results = []; 116 - this.resultsCache = []; 117 - } 118 118 getLink(xwikiDocSpace) { 119 119 return `/bin/view/${xwikiDocSpace.replaceAll('.', '/')}`; 120 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 - <input @change="${this.setNb}"" type="text" value="${this.nb}" /> 132 - <input @change="${this.setOffset}"" type="text" value="${this.offset}" /> 133 - <button @click="${() => this.handleSearch(true)}">Search</button> 109 + <input @change="${this.setSearchText}" type="text" placeholder="Search..." /> 110 + <button @click="${this.handleSearch}">Search</button> 134 134 </div> 135 135 <div> 136 136 <label><input type="checkbox" @change="${() => this.toggleRoleFilter('administrator')}" .checked="${this.administratorFilter}"/> Administrator</label> ... ... @@ -146,6 +146,7 @@ 146 146 </div> 147 147 `)} 148 148 </div> 126 +</div> 149 149 ` 150 150 } 151 151 } ... ... @@ -156,11 +156,9 @@ 156 156 require(['jquery'], function($) { 157 157 const solrServiceURL = new XWiki.Document('SuggestSolrService', 'XWiki').getURL('get'); 158 158 //contextSearchButton.addEventListener('click', function() { 159 - $. get(solrServiceURL, {137 + $.post(solrServiceURL, { 160 160 outputSyntax: 'plain', 161 161 media: 'json', 162 - nb:100, 163 - offset:10, 164 164 query: [ 165 165 'q="__INPUT__"~100', 166 166 'fq=type:DOCUMENT', ... ... @@ -174,4 +174,7 @@ 174 174 } 175 175 }); 176 176 </script> 177 -<clb-unified-search></clb-unified-search>{{/html}} 153 + 154 +<clb-unified-search></clb-unified-search> 155 + 156 +{{/html}}