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'; ... ... @@ -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 } ... ... @@ -32,6 +32,15 @@ 32 32 a { 33 33 color: var(--color-brand-primary, blue); 34 34 } 30 + .rawResults { 31 + width: 100%; 32 + display: flex; 33 + font-size: 12px; 34 + margin-top: 2em; 35 + } 36 + .rawResults pre { 37 + overflow: scroll; 38 + } 35 35 `; 36 36 constructor() { 37 37 super(); ... ... @@ -45,6 +45,9 @@ 45 45 this.results = []; 46 46 this.resultsCache = []; 47 47 } 52 + firstUpdated() { 53 + this.renderRoot.getElementById('searchInput').focus(); 54 + } 48 48 toggleRoleFilter(roleName) { 49 49 if(this.rolesFilter.indexOf(roleName) === -1) { 50 50 this.rolesFilter.push(roleName); ... ... @@ -64,7 +64,6 @@ 64 64 this.clearResults(); 65 65 this.prevSearchText = this.searchText; 66 66 this.fetchWikiSearch().then(results => { 67 - console.log(results); 68 68 this.resultsCache = results; 69 69 if(this.hasActiveFilters()) { 70 70 this.fetchFilterSearch().then(this.filterResults); ... ... @@ -72,16 +72,6 @@ 72 72 this.results = results; 73 73 } 74 74 }) 75 - /* 76 - Promise.all([ 77 - this.fetchWikiSearch(), 78 - this.fetchFilterSearch() 79 - ]).then(([wikiSearchResults, collabSearchResults]) => { 80 - this.results = wikiSearchResults; 81 - this.resultsCache = wikiSearchResults; 82 - console.log(wikiSearchResults, collabSearchResults); 83 - }); 84 - */ 85 85 } else if (this.searchText === this.prevSearchText && this.hasActiveFilters()) { 86 86 this.fetchFilterSearch().then(this.filterResults) 87 87 } else { ... ... @@ -106,7 +106,10 @@ 106 106 fetchFilterSearch() { 107 107 return new Promise((resolve) => { 108 108 if(this.hasActiveFilters()) { 109 - fetch(this.filterUrl).then(res => res.json()).then(resolve); 105 + fetch(this.filterUrl).then(res => res.json()).then((res) => { 106 + this.collabFiltersResults = res; 107 + resolve(res); 108 + }); 110 110 } else { 111 111 resolve([]); 112 112 } ... ... @@ -123,11 +123,16 @@ 123 123 getLink(xwikiDocSpace) { 124 124 return `/bin/view/${xwikiDocSpace.replaceAll('.', '/')}`; 125 125 } 125 + handleKeyPress(e) { 126 + if (e.keyCode === 13) { 127 + this.handleSearch(true); 128 + } 129 + } 126 126 render() { 127 127 return html` 128 128 <div> 129 129 <div> 130 - <input @change="${this.setSearchText}" type="text" placeholder="Search..." /> 134 + <input id="searchInput" @change="${this.setSearchText}" type="text" placeholder="Search..." @keypress="${this.handleKeyPress}" /> 131 131 <button @click="${() => this.handleSearch(true)}">Search</button> 132 132 </div> 133 133 <div> ... ... @@ -144,6 +144,16 @@ 144 144 </div> 145 145 `)} 146 146 </div> 151 + <div class="rawResults"> 152 + <div> 153 + <strong>XWiki Search Results</strong> 154 + <ul>${this.resultsCache.map((res) => html`<li>${res.space}</li>`)}</ul> 155 + </div> 156 + <div> 157 + <strong>Collab Search Results (Filters)</strong> 158 + <pre>${this.collabFiltersResults.map((res) => html`<li>${res.name}</li>`)}</pre> 159 + </div> 160 + </div> 147 147 </div> 148 148 ` 149 149 } ... ... @@ -171,7 +171,5 @@ 171 171 } 172 172 }); 173 173 </script> 174 - 175 175 <clb-unified-search></clb-unified-search> 176 - 177 177 {{/html}}