| ... |
... |
@@ -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'; |
| ... |
... |
@@ -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 |
} |
| ... |
... |
@@ -45,6 +45,9 @@ |
| 45 |
45 |
this.results = []; |
| 46 |
46 |
this.resultsCache = []; |
| 47 |
47 |
} |
|
43 |
+ firstUpdated() { |
|
44 |
+ this.renderRoot.getElementById('searchInput').focus(); |
|
45 |
+ } |
| 48 |
48 |
toggleRoleFilter(roleName) { |
| 49 |
49 |
if(this.rolesFilter.indexOf(roleName) === -1) { |
| 50 |
50 |
this.rolesFilter.push(roleName); |
| ... |
... |
@@ -61,22 +61,16 @@ |
| 61 |
61 |
handleSearch(textSearch) { |
| 62 |
62 |
if(this.searchText !== "" || textSearch) { |
| 63 |
63 |
if(this.searchText !== this.prevSearchText) { |
|
62 |
+ this.clearResults(); |
| 64 |
64 |
this.prevSearchText = this.searchText; |
| 65 |
65 |
this.fetchWikiSearch().then(results => { |
| 66 |
|
- //this.results = results; |
| 67 |
67 |
this.resultsCache = results; |
| 68 |
|
- this.fetchFilterSearch().then(this.filterResults); |
|
66 |
+ if(this.hasActiveFilters()) { |
|
67 |
+ this.fetchFilterSearch().then(this.filterResults); |
|
68 |
+ } else { |
|
69 |
+ this.results = results; |
|
70 |
+ } |
| 69 |
69 |
}) |
| 70 |
|
- /* |
| 71 |
|
- Promise.all([ |
| 72 |
|
- this.fetchWikiSearch(), |
| 73 |
|
- this.fetchFilterSearch() |
| 74 |
|
- ]).then(([wikiSearchResults, collabSearchResults]) => { |
| 75 |
|
- this.results = wikiSearchResults; |
| 76 |
|
- this.resultsCache = wikiSearchResults; |
| 77 |
|
- console.log(wikiSearchResults, collabSearchResults); |
| 78 |
|
- }); |
| 79 |
|
- */ |
| 80 |
80 |
} else if (this.searchText === this.prevSearchText && this.hasActiveFilters()) { |
| 81 |
81 |
this.fetchFilterSearch().then(this.filterResults) |
| 82 |
82 |
} else { |
| ... |
... |
@@ -101,7 +101,10 @@ |
| 101 |
101 |
fetchFilterSearch() { |
| 102 |
102 |
return new Promise((resolve) => { |
| 103 |
103 |
if(this.hasActiveFilters()) { |
| 104 |
|
- fetch(this.filterUrl).then(res => res.json()).then(resolve); |
|
96 |
+ fetch(this.filterUrl).then(res => res.json()).then((res) => { |
|
97 |
+ this.collabFiltersResults = res; |
|
98 |
+ resolve(res); |
|
99 |
+ }); |
| 105 |
105 |
} else { |
| 106 |
106 |
resolve([]); |
| 107 |
107 |
} |
| ... |
... |
@@ -118,11 +118,16 @@ |
| 118 |
118 |
getLink(xwikiDocSpace) { |
| 119 |
119 |
return `/bin/view/${xwikiDocSpace.replaceAll('.', '/')}`; |
| 120 |
120 |
} |
|
116 |
+ handleKeyPress(e) { |
|
117 |
+ if (e.keyCode === 13) { |
|
118 |
+ this.handleSearch(true); |
|
119 |
+ } |
|
120 |
+ } |
| 121 |
121 |
render() { |
| 122 |
122 |
return html` |
| 123 |
123 |
<div> |
| 124 |
124 |
<div> |
| 125 |
|
- <input @change="${this.setSearchText}" type="text" placeholder="Search..." /> |
|
125 |
+ <input id="searchInput" @change="${this.setSearchText}" type="text" placeholder="Search..." @keypress="${this.handleKeyPress}" /> |
| 126 |
126 |
<button @click="${() => this.handleSearch(true)}">Search</button> |
| 127 |
127 |
</div> |
| 128 |
128 |
<div> |
| ... |
... |
@@ -139,6 +139,16 @@ |
| 139 |
139 |
</div> |
| 140 |
140 |
`)} |
| 141 |
141 |
</div> |
|
142 |
+ <div class="rawResults"> |
|
143 |
+ <div> |
|
144 |
+ <strong>XWiki Search Results</strong> |
|
145 |
+ <pre>${JSON.stringify(this.resultsCache, null, 2)}</pre> |
|
146 |
+ </div> |
|
147 |
+ <div> |
|
148 |
+ <strong>Collab Search Results (Filters)</strong> |
|
149 |
+ <pre>${JSON.stringify(this.collabFiltersResults, null, 2)}</pre> |
|
150 |
+ </div> |
|
151 |
+ </div> |
| 142 |
142 |
</div> |
| 143 |
143 |
` |
| 144 |
144 |
} |
| ... |
... |
@@ -166,7 +166,5 @@ |
| 166 |
166 |
} |
| 167 |
167 |
}); |
| 168 |
168 |
</script> |
| 169 |
|
- |
| 170 |
170 |
<clb-unified-search></clb-unified-search> |
| 171 |
|
- |
| 172 |
172 |
{{/html}} |