| ... |
... |
@@ -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.resultsCache = 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); |
| ... |
... |
@@ -99,19 +99,28 @@ |
| 99 |
99 |
}); |
| 100 |
100 |
} |
| 101 |
101 |
filterResults = (filteredCollabs) => { |
| 102 |
|
- console.log("filteredCollabs:", filteredCollabs, "search results:", this.results); |
| 103 |
103 |
const collabSpaces = filteredCollabs.map(collab => `Collabs.${collab.name}`); |
| 104 |
104 |
this.results = this.resultsCache.filter(result => collabSpaces.some(space => result.space.startsWith(space))); |
| 105 |
105 |
} |
|
112 |
+ clearResults() { |
|
113 |
+ this.results = []; |
|
114 |
+ this.resultsCache = []; |
|
115 |
+ } |
| 106 |
106 |
getLink(xwikiDocSpace) { |
| 107 |
107 |
return `/bin/view/${xwikiDocSpace.replaceAll('.', '/')}`; |
| 108 |
108 |
} |
|
119 |
+ handleKeyPress(e) { |
|
120 |
+ if (e.keyCode === 13) { |
|
121 |
+ e.preventDefault(); |
|
122 |
+ this.handleSearch(true); |
|
123 |
+ } |
|
124 |
+ } |
| 109 |
109 |
render() { |
| 110 |
110 |
return html` |
| 111 |
111 |
<div> |
| 112 |
112 |
<div> |
| 113 |
|
- <input @change="${this.setSearchText}" type="text" placeholder="Search..." /> |
| 114 |
|
- <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> |
| 115 |
115 |
</div> |
| 116 |
116 |
<div> |
| 117 |
117 |
<label><input type="checkbox" @change="${() => this.toggleRoleFilter('administrator')}" .checked="${this.administratorFilter}"/> Administrator</label> |