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 } ... ... @@ -44,7 +44,12 @@ 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 = []; 46 46 this.resultsCache = []; 42 + this.offset = 0; 43 + this.nb = 10; 47 47 } 45 + firstUpdated() { 46 + this.renderRoot.getElementById('searchInput').focus(); 47 + } 48 48 toggleRoleFilter(roleName) { 49 49 if(this.rolesFilter.indexOf(roleName) === -1) { 50 50 this.rolesFilter.push(roleName); ... ... @@ -58,24 +58,32 @@ 58 58 setSearchText(e) { 59 59 this.searchText = e.target.value; 60 60 } 61 - handleSearch() { 62 - 63 - if(this.searchText !== "") { 64 - if(this.searchText !== this.prevSearchText) { 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(); 65 65 this.prevSearchText = this.searchText; 66 - Promise.all([ 67 - this.fetchWikiSearch(), 68 - this.fetchFilterSearch() 69 - ]).then(([wikiSearchResults, collabSearchResults]) => { 70 - this.results = wikiSearchResults; 71 - this.resultsCache = wikiSearchResults; 72 - console.log(wikiSearchResults, collabSearchResults); 73 - }); 74 - } else if (this.searchText === this.prevSearchText && this.hasActiveFilters()) { 72 + this.fetchWikiSearch().then(results => { 73 + console.log('results', results); 74 + //this.resultsCache = results; 75 + if(this.hasActiveFilters()) { 76 + this.fetchFilterSearch().then(this.filterResults); 77 + } else { 78 + this.results = results ? results : []; 79 + } 80 + }) 81 + /*} else if (this.searchText === this.prevSearchText && this.hasActiveFilters()) { 75 75 this.fetchFilterSearch().then(this.filterResults) 76 76 } else { 77 77 this.results = this.resultsCache; 78 78 } 86 + */ 79 79 } else { 80 80 this.clearResults(); 81 81 console.log("no search text, should return filter search results if any"); ... ... @@ -90,12 +90,12 @@ 90 90 } 91 91 fetchWikiSearch() { 92 92 // request should be built from component, not from "external" dependency. Leave it here like this for POC. 93 - return handleXWikiSearch(this.searchText); 101 + return handleXWikiSearch(this.searchText, this.offset, this.nb); 94 94 } 95 95 fetchFilterSearch() { 96 96 return new Promise((resolve) => { 97 97 if(this.hasActiveFilters()) { 98 - fetch(this.filterUrl).then(res => res.json()).then(resolve); 106 + fetch(this.filterUrl).then(res => res.json()).then((res) => resolve(res)); 99 99 } else { 100 100 resolve([]); 101 101 } ... ... @@ -112,12 +112,19 @@ 112 112 getLink(xwikiDocSpace) { 113 113 return `/bin/view/${xwikiDocSpace.replaceAll('.', '/')}`; 114 114 } 123 + handleKeyPress(e) { 124 + if (e.keyCode === 13) { 125 + this.handleSearch(true); 126 + } 127 + } 115 115 render() { 116 116 return html` 117 117 <div> 118 118 <div> 119 - <input @change="${this.setSearchText}" type="text" placeholder="Search..." /> 120 - <button @click="${this.handleSearch}">Search</button> 132 + <input id="searchInput" @change="${this.setSearchText}" type="text" placeholder="Search..." @keypress="${this.handleKeyPress}" /> 133 + <input @change="${this.setNb}"" type="text" value="${this.nb}" /> 134 + <input @change="${this.setOffset}"" type="text" value="${this.offset}" /> 135 + <button @click="${() => this.handleSearch(true)}">Search</button> 121 121 </div> 122 122 <div> 123 123 <label><input type="checkbox" @change="${() => this.toggleRoleFilter('administrator')}" .checked="${this.administratorFilter}"/> Administrator</label> ... ... @@ -133,20 +133,21 @@ 133 133 </div> 134 134 `)} 135 135 </div> 136 -</div> 137 137 ` 138 138 } 139 139 } 140 140 customElements.define('clb-unified-search', UnifiedSearch); 141 141 142 - function handleXWikiSearch(searchString) { 156 + function handleXWikiSearch(searchString, offset, nb) { 143 143 return new Promise((resolve) => { 144 144 require(['jquery'], function($) { 145 145 const solrServiceURL = new XWiki.Document('SuggestSolrService', 'XWiki').getURL('get'); 146 146 //contextSearchButton.addEventListener('click', function() { 147 - $. post(solrServiceURL, {161 + $.get(solrServiceURL, { 148 148 outputSyntax: 'plain', 149 149 media: 'json', 164 + nb: nb, 165 + offset: offset, 150 150 query: [ 151 151 'q="__INPUT__"~100', 152 152 'fq=type:DOCUMENT', ... ... @@ -160,7 +160,4 @@ 160 160 } 161 161 }); 162 162 </script> 163 - 164 -<clb-unified-search></clb-unified-search> 165 - 166 -{{/html}} 179 +<clb-unified-search></clb-unified-search>{{/html}}