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
-
... ... @@ -41,38 +41,55 @@ 41 41 this.editor = false; 42 42 this.viewer = false; 43 43 this.rolesFilter = []; 44 - this.filterUrl = new URL(`${document.location.origin}/rest/v1/collabs?search=&offset=0&orderField=title&order=asc&favorite=&roles=`); 44 + this.filterUrl = new URL(`${document.location.origin}/rest/v1/collabs?search=&offset=0&orderField=title&order=asc&limit=10000&favorite=false&roles=`); 45 45 this.results = []; 46 + this.resultsCache = []; 46 46 } 47 47 toggleRoleFilter(roleName) { 48 - if(this.rolesFilter.indexOf(roleName) == -1) { 49 + if(this.rolesFilter.indexOf(roleName) === -1) { 49 49 this.rolesFilter.push(roleName); 50 50 } else { 51 - this.rolesFilter.filter(role => role !== roleName); 52 + this.rolesFilter = this.rolesFilter.filter(role => role !== roleName); 52 52 } 53 53 this[roleName] = !this[roleName]; 54 54 this.filterUrl.searchParams.set('roles', this.rolesFilter.join("+")); 55 - // if search text then apply filter 56 - // else return filters result 56 + this.handleSearch(); 57 57 } 58 58 setSearchText(e) { 59 59 this.searchText = e.target.value; 60 60 } 61 - handleSearch() { 62 - if(this.searchText !== "" && this.searchText !== this.prevSearchText) { 63 - this.prevSearchText = this.searchText; 64 - Promise.all([ 65 - this.fetchWikiSearch(), 66 - this.fetchFilterSearch() 67 - ]).then(([wikiSearchResults, collabSearchResults]) => { 68 - console.log(wikiSearchResults, collabSearchResults); 69 - }); 70 - } else if (this.searchText === this.prevSearchText) { 71 - console.log("Only apply filter on results"); 72 - this.fetchFilterSearch().then(res => res.json()).then(this.filterResults) 61 + handleSearch(textSearch) { 62 + if(this.searchText !== "" || textSearch) { 63 + if(this.searchText !== this.prevSearchText) { 64 + this.clearResults(); 65 + this.prevSearchText = this.searchText; 66 + this.fetchWikiSearch().then(results => { 67 + this.resultsCache = results; 68 + if(this.hasActiveFilters()) { 69 + this.fetchFilterSearch().then(this.filterResults); 70 + } else { 71 + this.results = results; 72 + } 73 + }) 74 + /* 75 + Promise.all([ 76 + this.fetchWikiSearch(), 77 + this.fetchFilterSearch() 78 + ]).then(([wikiSearchResults, collabSearchResults]) => { 79 + this.results = wikiSearchResults; 80 + this.resultsCache = wikiSearchResults; 81 + console.log(wikiSearchResults, collabSearchResults); 82 + }); 83 + */ 84 + } else if (this.searchText === this.prevSearchText && this.hasActiveFilters()) { 85 + this.fetchFilterSearch().then(this.filterResults) 86 + } else { 87 + this.results = this.resultsCache; 88 + } 73 73 } else { 90 + this.clearResults(); 74 74 console.log("no search text, should return filter search results if any"); 75 - this.fetchFilterSearch().then( res => res.json()).then(collabs => {92 + this.fetchFilterSearch().then(collabs => { 76 76 console.log("Format and display collabs", collabs); 77 77 }) 78 78 } ... ... @@ -79,7 +79,7 @@ 79 79 } 80 80 hasActiveFilters() { 81 81 // we only look at role filters for POC. 82 - return this.roles.length > 0; 99 + return this.rolesFilter.length > 0; 83 83 } 84 84 fetchWikiSearch() { 85 85 // request should be built from component, not from "external" dependency. Leave it here like this for POC. ... ... @@ -87,16 +87,21 @@ 87 87 } 88 88 fetchFilterSearch() { 89 89 return new Promise((resolve) => { 90 - if(hasActiveFilters) { 91 - fetch(this.filterUrl).then( console.log);107 + if(this.hasActiveFilters()) { 108 + fetch(this.filterUrl).then(res => res.json()).then(resolve); 92 92 } else { 93 - resolve( null);110 + resolve([]); 94 94 } 95 95 }); 96 96 } 97 - filterResults(filteredCollabs) { 98 - console.log("filteredCollabs:", filteredCollabs, "search results:", this.results); 114 + filterResults = (filteredCollabs) => { 115 + const collabSpaces = filteredCollabs.map(collab => `Collabs.${collab.name}`); 116 + this.results = this.resultsCache.filter(result => collabSpaces.some(space => result.space.startsWith(space))); 99 99 } 118 + clearResults() { 119 + this.results = []; 120 + this.resultsCache = []; 121 + } 100 100 getLink(xwikiDocSpace) { 101 101 return `/bin/view/${xwikiDocSpace.replaceAll('.', '/')}`; 102 102 } ... ... @@ -105,7 +105,7 @@ 105 105 <div> 106 106 <div> 107 107 <input @change="${this.setSearchText}" type="text" placeholder="Search..." /> 108 - <button @click="${this.handleSearch}">Search</button> 130 + <button @click="${() => this.handleSearch(true)}">Search</button> 109 109 </div> 110 110 <div> 111 111 <label><input type="checkbox" @change="${() => this.toggleRoleFilter('administrator')}" .checked="${this.administratorFilter}"/> Administrator</label>