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'; ... ... @@ -23,9 +23,6 @@ 23 23 results: { type: Array } 24 24 } 25 25 static styles = css` 26 - :host > div { 27 - padding-bottom: 4em; 28 - } 29 29 .result { 30 30 margin-top: 1em; 31 31 } ... ... @@ -47,16 +47,12 @@ 47 47 this.rolesFilter = []; 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 - this.resultsCache = []; 51 51 } 52 - firstUpdated() { 53 - this.renderRoot.getElementById('searchInput').focus(); 54 - } 55 55 toggleRoleFilter(roleName) { 56 - if(this.rolesFilter.indexOf(roleName) == =-1) {48 + if(this.rolesFilter.indexOf(roleName) == -1) { 57 57 this.rolesFilter.push(roleName); 58 58 } else { 59 - this.rolesFilter = this.rolesFilter.filter(role => role !== roleName);51 + this.rolesFilter.filter(role => role !== roleName); 60 60 } 61 61 this[roleName] = !this[roleName]; 62 62 this.filterUrl.searchParams.set('roles', this.rolesFilter.join("+")); ... ... @@ -65,26 +65,24 @@ 65 65 setSearchText(e) { 66 66 this.searchText = e.target.value; 67 67 } 68 - handleSearch(textSearch) { 69 - if(this.searchText !== "" || textSearch) { 60 + handleSearch() { 61 + console.log(this.rolesFilter) 62 + if(this.searchText !== "") { 70 70 if(this.searchText !== this.prevSearchText) { 71 - this. clearResults();64 + console.log(this.searchText, this.prevSearchText); 72 72 this.prevSearchText = this.searchText; 73 - this.fetchWikiSearch().then(results => {74 - this. resultsCache=results;75 - if(this.hasActiveFilters()) {76 - this.fetchFilterSearch().then(this.filterResults);77 - }else{78 - this.results=results;79 - }80 - })81 - }elseif(this.searchText===this.prevSearchText && this.hasActiveFilters()) {66 + Promise.all([ 67 + this.fetchWikiSearch(), 68 + this.fetchFilterSearch() 69 + ]).then(([wikiSearchResults, collabSearchResults]) => { 70 + this.results = wikiSearchResults; 71 + console.log(wikiSearchResults, collabSearchResults); 72 + }); 73 + } else if (this.searchText === this.prevSearchText) { 74 + console.log("Only apply filter on results"); 82 82 this.fetchFilterSearch().then(this.filterResults) 83 - } else { 84 - this.results = this.resultsCache; 85 85 } 86 86 } else { 87 - this.clearResults(); 88 88 console.log("no search text, should return filter search results if any"); 89 89 this.fetchFilterSearch().then(collabs => { 90 90 console.log("Format and display collabs", collabs); ... ... @@ -93,6 +93,7 @@ 93 93 } 94 94 hasActiveFilters() { 95 95 // we only look at role filters for POC. 86 + console.log('rolesfilter', this.rolesFilter); 96 96 return this.rolesFilter.length > 0; 97 97 } 98 98 fetchWikiSearch() { ... ... @@ -104,32 +104,25 @@ 104 104 if(this.hasActiveFilters()) { 105 105 fetch(this.filterUrl).then(res => res.json()).then(resolve); 106 106 } else { 107 - resolve( []);98 + resolve(null); 108 108 } 109 109 }); 110 110 } 111 111 filterResults = (filteredCollabs) => { 103 + console.log("filteredCollabs:", filteredCollabs, "search results:", this.results); 112 112 const collabSpaces = filteredCollabs.map(collab => `Collabs.${collab.name}`); 113 - this.results = this.resultsCache.filter(result => collabSpaces.some(space => result.space.startsWith(space))); 105 + const filteredResults = this.results.filter(result => collabSpaces.some(space => result.space.startsWith(space))); 106 + console.log(filteredResults); 114 114 } 115 - clearResults() { 116 - this.results = []; 117 - this.resultsCache = []; 118 - } 119 119 getLink(xwikiDocSpace) { 120 120 return `/bin/view/${xwikiDocSpace.replaceAll('.', '/')}`; 121 121 } 122 - handleKeyPress(e) { 123 - if (e.keyCode === 13) { 124 - this.handleSearch(true); 125 - } 126 - } 127 127 render() { 128 128 return html` 129 129 <div> 130 130 <div> 131 - <input id="searchInput"@change="${this.setSearchText}" type="text" placeholder="Search..."@keypress="${this.handleKeyPress}"/>132 - <button @click="${ () =>this.handleSearch(true)}">Search</button>115 + <input @change="${this.setSearchText}" type="text" placeholder="Search..." /> 116 + <button @click="${this.handleSearch}">Search</button> 133 133 </div> 134 134 <div> 135 135 <label><input type="checkbox" @change="${() => this.toggleRoleFilter('administrator')}" .checked="${this.administratorFilter}"/> Administrator</label> ... ... @@ -172,5 +172,7 @@ 172 172 } 173 173 }); 174 174 </script> 159 + 175 175 <clb-unified-search></clb-unified-search> 161 + 176 176 {{/html}}