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,86 @@ 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("+")); 56 + this.handleSearch(); 54 54 } 55 55 setSearchText(e) { 56 56 this.searchText = e.target.value; 57 57 } 58 - handleSearch() { 59 - console.log(this.searchText); 60 - if(this.searchText !== "") { 61 - 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 + 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 + } 86 + } else { 87 + this.clearResults(); 88 + console.log("no search text, should return filter search results if any"); 89 + this.fetchFilterSearch().then(collabs => { 90 + console.log("Format and display collabs", collabs); 91 + }) 62 62 } 63 63 } 94 + hasActiveFilters() { 95 + // we only look at role filters for POC. 96 + return this.rolesFilter.length > 0; 97 + } 64 64 fetchWikiSearch() { 65 65 // request should be built from component, not from "external" dependency. Leave it here like this for POC. 66 - handleXWikiSearch(this.searchText) .then(results => this.results = results);100 + return handleXWikiSearch(this.searchText); 67 67 } 68 - buildFilter() { 69 - //https://wiki-dev.ebrains.eu/rest/v1/collabs?search=&offset=0&orderField=title&order=asc&favorite=true&roles= 102 + fetchFilterSearch() { 103 + return new Promise((resolve) => { 104 + if(this.hasActiveFilters()) { 105 + fetch(this.filterUrl).then(res => res.json()).then(resolve); 106 + } else { 107 + resolve([]); 108 + } 109 + }); 70 70 } 111 + filterResults = (filteredCollabs) => { 112 + const collabSpaces = filteredCollabs.map(collab => `Collabs.${collab.name}`); 113 + this.results = this.resultsCache.filter(result => collabSpaces.some(space => result.space.startsWith(space))); 114 + } 115 + clearResults() { 116 + this.results = []; 117 + this.resultsCache = []; 118 + } 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> 127 + <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> ... ... @@ -121,4 +121,5 @@ 121 121 </script> 122 122 123 123 <clb-unified-search></clb-unified-search> 172 + 124 124 {{/html}}