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,14 +41,15 @@ 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("+")); ... ... @@ -57,20 +57,33 @@ 57 57 setSearchText(e) { 58 58 this.searchText = e.target.value; 59 59 } 60 - handleSearch() { 61 - if(this.searchText !== "" && this.searchText !== this.prevSearchText) { 62 - console.log(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(this.filterResults) 61 + handleSearch(textSearch) { 62 + if(this.searchText !== "" || textSearch) { 63 + if(this.searchText !== this.prevSearchText) { 64 + this.prevSearchText = this.searchText; 65 + this.fetchWikiSearch().then(results => { 66 + console.log(results); 67 + //this.results = results; 68 + this.resultsCache = results; 69 + this.fetchFilterSearch().then(this.filterResults); 70 + }) 71 + /* 72 + Promise.all([ 73 + this.fetchWikiSearch(), 74 + this.fetchFilterSearch() 75 + ]).then(([wikiSearchResults, collabSearchResults]) => { 76 + this.results = wikiSearchResults; 77 + this.resultsCache = wikiSearchResults; 78 + console.log(wikiSearchResults, collabSearchResults); 79 + }); 80 + */ 81 + } else if (this.searchText === this.prevSearchText && this.hasActiveFilters()) { 82 + this.fetchFilterSearch().then(this.filterResults) 83 + } else { 84 + this.results = this.resultsCache; 85 + } 73 73 } else { 87 + this.clearResults(); 74 74 console.log("no search text, should return filter search results if any"); 75 75 this.fetchFilterSearch().then(collabs => { 76 76 console.log("Format and display collabs", collabs); ... ... @@ -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; 96 + 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(this.hasActiveFilters) { 104 + if(this.hasActiveFilters()) { 91 91 fetch(this.filterUrl).then(res => res.json()).then(resolve); 92 92 } else { 93 - resolve( null);107 + resolve([]); 94 94 } 95 95 }); 96 96 } 97 97 filterResults = (filteredCollabs) => { 98 - console.log("filteredCollabs:", filteredCollabs, "search results:", this.results); 112 + const collabSpaces = filteredCollabs.map(collab => `Collabs.${collab.name}`); 113 + this.results = this.resultsCache.filter(result => collabSpaces.some(space => result.space.startsWith(space))); 99 99 } 115 + clearResults() { 116 + this.results = []; 117 + this.resultsCache = []; 118 + } 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> 127 + <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>