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,89 @@ 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= true&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 = []; 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 + } 89 + } else { 90 + this.clearResults(); 91 + console.log("no search text, should return filter search results if any"); 92 + this.fetchFilterSearch().then(collabs => { 93 + console.log("Format and display collabs", collabs); 94 + }) 63 63 } 64 64 } 97 + hasActiveFilters() { 98 + // we only look at role filters for POC. 99 + return this.rolesFilter.length > 0; 100 + } 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);103 + return handleXWikiSearch(this.searchText); 68 68 } 69 - 70 - 105 + fetchFilterSearch() { 106 + return new Promise((resolve) => { 107 + if(this.hasActiveFilters()) { 108 + fetch(this.filterUrl).then(res => res.json()).then(resolve); 109 + } else { 110 + resolve([]); 111 + } 112 + }); 113 + } 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))); 117 + } 118 + clearResults() { 119 + this.results = []; 120 + this.resultsCache = []; 121 + } 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> 130 + <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>