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 1 {{html clean="false"}} 2 2 <!-- 3 - !!! POC. Code must be reviewed / optimized and packaged for use in production !!! 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'; ... ... @@ -22,6 +22,9 @@ 22 22 results: { type: Array } 23 23 } 24 24 static styles = css` 26 + :host > div { 27 + padding-bottom: 4em; 28 + } 25 25 .result { 26 26 margin-top: 1em; 27 27 } ... ... @@ -58,23 +58,26 @@ 58 58 setSearchText(e) { 59 59 this.searchText = e.target.value; 60 60 } 61 - handleSearch() { 62 - 63 - if(this.searchText !== "") { 65 + handleSearch(textSearch) { 66 + if(this.searchText !== "" || textSearch) { 64 64 if(this.searchText !== this.prevSearchText) { 68 + 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.results Cache=wikiSearchResults;72 - console.log(wikiSearchResults, collabSearchResults);73 - }) ;70 + this.fetchWikiSearch().then(results => { 71 + this.resultsCache = results; 72 + if(this.hasActiveFilters()) { 73 + this.fetchFilterSearch().then(this.filterResults); 74 + } else { 75 + this.results = results; 76 + } 77 + }) 74 74 } else if (this.searchText === this.prevSearchText && this.hasActiveFilters()) { 75 75 this.fetchFilterSearch().then(this.filterResults) 80 + } else { 81 + this.results = this.resultsCache; 76 76 } 77 77 } else { 84 + this.clearResults(); 78 78 console.log("no search text, should return filter search results if any"); 79 79 this.fetchFilterSearch().then(collabs => { 80 80 console.log("Format and display collabs", collabs); ... ... @@ -102,15 +102,25 @@ 102 102 const collabSpaces = filteredCollabs.map(collab => `Collabs.${collab.name}`); 103 103 this.results = this.resultsCache.filter(result => collabSpaces.some(space => result.space.startsWith(space))); 104 104 } 112 + clearResults() { 113 + this.results = []; 114 + this.resultsCache = []; 115 + } 105 105 getLink(xwikiDocSpace) { 106 106 return `/bin/view/${xwikiDocSpace.replaceAll('.', '/')}`; 107 107 } 119 + handleKeyPress(e) { 120 + if(e.keyCode === 13) { 121 + e.preventDefault() 122 + this.handleSearch(true); 123 + } 124 + } 108 108 render() { 109 109 return html` 110 110 <div> 111 111 <div> 112 - <input @change="${this.setSearchText}" type="text" placeholder="Search..." /> 113 - <button @click="${this.handleSearch}">Search</button> 129 + <input @change="${this.setSearchText}" type="text" placeholder="Search..." @keypress="${this.handleKeyPress}" /> 130 + <button @click="${() => this.handleSearch(true)}">Search</button> 114 114 </div> 115 115 <div> 116 116 <label><input type="checkbox" @change="${() => this.toggleRoleFilter('administrator')}" .checked="${this.administratorFilter}"/> Administrator</label>