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 1 {{html clean="false"}} 2 2 <!-- 3 - !!! POC. Code must be reviewed / optimized and packaged for use in production !!! 4 - !!! Many optimisations can be done !!! 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 } ... ... @@ -27,15 +27,6 @@ 27 27 a { 28 28 color: var(--color-brand-primary, blue); 29 29 } 30 - .rawResults { 31 - width: 100%; 32 - display: flex; 33 - font-size: 12px; 34 - margin-top: 2em; 35 - } 36 - .rawResults pre { 37 - overflow: scroll; 38 - } 39 39 `; 40 40 constructor() { 41 41 super(); ... ... @@ -48,11 +48,7 @@ 48 48 this.filterUrl = new URL(`${document.location.origin}/rest/v1/collabs?search=&offset=0&orderField=title&order=asc&limit=10000&favorite=false&roles=`); 49 49 this.results = []; 50 50 this.resultsCache = []; 51 - this.collabFiltersResults = []; 52 52 } 53 - firstUpdated() { 54 - this.renderRoot.getElementById('searchInput').focus(); 55 - } 56 56 toggleRoleFilter(roleName) { 57 57 if(this.rolesFilter.indexOf(roleName) === -1) { 58 58 this.rolesFilter.push(roleName); ... ... @@ -66,19 +66,19 @@ 66 66 setSearchText(e) { 67 67 this.searchText = e.target.value; 68 68 } 69 - handleSearch(textSearch) { 70 - if(this.searchText !== "" || textSearch) { 61 + handleSearch() { 62 + 63 + if(this.searchText !== "") { 71 71 if(this.searchText !== this.prevSearchText) { 72 - this.clearResults(); 73 73 this.prevSearchText = this.searchText; 74 - this.fetchWikiSearch().then(results => {75 - this. resultsCache=results;76 - if(this.hasActiveFilters()) {77 - this.fetchFilterSearch().then(this.filterResults);78 - }else{79 - this.results = results;80 - }81 - }) 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 + }); 82 82 } else if (this.searchText === this.prevSearchText && this.hasActiveFilters()) { 83 83 this.fetchFilterSearch().then(this.filterResults) 84 84 } else { ... ... @@ -103,10 +103,7 @@ 103 103 fetchFilterSearch() { 104 104 return new Promise((resolve) => { 105 105 if(this.hasActiveFilters()) { 106 - fetch(this.filterUrl).then(res => res.json()).then((res) => { 107 - this.collabFiltersResults = res; 108 - resolve(res); 109 - }); 98 + fetch(this.filterUrl).then(res => res.json()).then(resolve); 110 110 } else { 111 111 resolve([]); 112 112 } ... ... @@ -123,17 +123,12 @@ 123 123 getLink(xwikiDocSpace) { 124 124 return `/bin/view/${xwikiDocSpace.replaceAll('.', '/')}`; 125 125 } 126 - handleKeyPress(e) { 127 - if (e.keyCode === 13) { 128 - this.handleSearch(true); 129 - } 130 - } 131 131 render() { 132 132 return html` 133 133 <div> 134 134 <div> 135 - <input id="searchInput"@change="${this.setSearchText}" type="text" placeholder="Search..."@keypress="${this.handleKeyPress}"/>136 - <button @click="${ () =>this.handleSearch(true)}">Search</button>119 + <input @change="${this.setSearchText}" type="text" placeholder="Search..." /> 120 + <button @click="${this.handleSearch}">Search</button> 137 137 </div> 138 138 <div> 139 139 <label><input type="checkbox" @change="${() => this.toggleRoleFilter('administrator')}" .checked="${this.administratorFilter}"/> Administrator</label> ... ... @@ -149,16 +149,6 @@ 149 149 </div> 150 150 `)} 151 151 </div> 152 - <div class="rawResults"> 153 - <div> 154 - <strong>XWiki Search Results</strong> 155 - <ul>${this.resultsCache.map((res) => html`<li>${res.space}</li>`)}</ul> 156 - </div> 157 - <div> 158 - <strong>Collab Search Results (Filters)</strong> 159 - <pre>${this.collabFiltersResults.map((res) => html`<li>${res.name}</li>`)}</pre> 160 - </div> 161 - </div> 162 162 </div> 163 163 ` 164 164 } ... ... @@ -186,5 +186,7 @@ 186 186 } 187 187 }); 188 188 </script> 163 + 189 189 <clb-unified-search></clb-unified-search> 165 + 190 190 {{/html}}