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