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
-
... ... @@ -1,5 +1,77 @@ 1 1 {{html clean="false"}} 2 +<!-- 3 + !!! POC. Code would must be reviewed / optimized and packaged for use in production !!! 4 +--> 5 +<script type="module"> 6 + import {LitElement, html} from 'https://cdn.jsdelivr.net/gh/lit/dist@2/core/lit-core.min.js'; 7 + class UnifiedSearch extends LitElement { 8 + /* 9 + static properties = { 10 + searchText: { type: String }, 11 + favoritesFilter: { type: Boolean }, 12 + administratorFilter: { type: Boolean }, 13 + editorFilter: { type: Boolean }, 14 + viewerFilter: { type: Boolean }, 15 + publicFilter: { type: Boolean }, 16 + privateFilter: { type: Boolean }, 17 + } 18 + */ 19 + constructor() { 20 + super(); 21 + this.searchText = ""; 22 + this.favoritesFilter = false; 23 + this.administrator = false; 24 + this.editor = false; 25 + this.viewer = false; 26 + this.publicFilter = false; 27 + this.privateFilter = false; 28 + this.rolesFilter = []; 29 + this.filterUrl = new URL(document.location.origin); 30 + } 31 + toggleBooleanFilter(filterName) { 32 + this[filterName] = !this[filterName]; 33 + } 34 + toggleRoleFilter(roleName) { 35 + if(this.rolesFilter.indexOf(roleName) == -1) { 36 + this.rolesFilter.push(roleName); 37 + } else { 38 + this.rolesFilter.filter(role => role !== roleName); 39 + } 40 + this.toggleBooleanFilter(roleName); 41 + } 42 + setSearchText(e) { 43 + this.searchText = e.target.value; 44 + } 45 + handleSearch() { 46 + console.log(this.searchText); 47 + } 48 + buildFilter() { 49 + //https://wiki-dev.ebrains.eu/rest/v1/collabs?search=&offset=0&orderField=title&order=asc&favorite=true&roles= 50 + } 51 + render() { 52 + return html` 53 +<div> 54 + <div> 55 + <input @change="${this.setSearchText}" type="text" placeholder="Search..." /> 56 + <button @click="${this.handleSearch}">Search</button> 57 + </div> 58 + <div> 59 + <label><input type="checkbox" @change="${() => this.toggleBooleanFilter('favoritesFilter')}" .checked="${this.favoritesFilter}"/> Favorites</label> 60 + <label><input type="checkbox" @change="${() => this.toggleRoleFilter('administrator')}" .checked="${this.administratorFilter}"/> Administrator</label> 61 + <label><input type="checkbox" @change="${() => this.toggleRoleFilter('editor')}" .checked="${this.editorFilter}"/> Editor</label> 62 + <label><input type="checkbox" @change="${() => this.toggleRoleFilter('viewer')}" .checked="${this.viewerFilter}"/> Viewer</label> 63 + <label><input type="checkbox" @change="${() => this.toggleBooleanFilter('publicFilter')}" .checked="${this.publicFilter}"/> Public</label> 64 + <label><input type="checkbox" @change="${() => this.toggleBooleanFilter('privateFilter')}" .checked="${this.privateFilter}"/> Public</label> 65 + </div> 66 +</div> 67 +` 68 + } 69 + } 70 + customElements.define('clb-unified-search', UnifiedSearch); 71 +</script> 2 2 73 +<clb-unified-search></clb-unified-search> 74 +<!-- 3 3 <select id="context-search-type"> 4 4 <option value="all">All</option> 5 5 <option value="collabs">Collabs</option> ... ... @@ -40,9 +40,8 @@ 40 40 } 41 41 42 42 const filterInputs = document.querySelectorAll('input[data-role-filter]'); 43 - console.log(filterInputs);115 + 44 44 filterInputs.forEach(function(filterIpt) { 45 - console.log(filterIpt); 46 46 filterIpt.addEventListener('click', function() { 47 47 const role = this.getAttribute('data-role-filter'); 48 48 if(this.checked) { ... ... @@ -50,10 +50,19 @@ 50 50 } else { 51 51 removeRole(role); 52 52 } 53 - console.log(filters);124 + runFilteredRequest(); 54 54 }) 55 55 }); 56 56 128 + function runFilteredRequest() { 129 + const urlParams = new URLSearchParams(); 130 + const tmpFilters = filters; 131 + tmpFilters.roles = tmpFilters.roles.join("+"); 132 + for(filter in tmpFilters) { 133 + urlParams.set(filter, tmpFilters[filter]); 134 + } 135 + console.log(urlParams); 136 + } 57 57 // https://wiki-dev.ebrains.eu/rest/v1/collabs?search=&offset=0&orderField=title&order=asc&favorite=false&roles=administrator 58 58 const contextSearchType = document.getElementById("context-search-type"); 59 59 const contextSearchText = document.getElementById("context-search-text"); ... ... @@ -70,7 +70,7 @@ 70 70 handleXWikiSearch('bougaultx'); 71 71 break 72 72 default: 73 - handleXWikiSearch('' , applyAdministratorFilter)153 + handleXWikiSearch('') 74 74 } 75 75 76 76 }); ... ... @@ -115,7 +115,6 @@ 115 115 }) 116 116 } 117 117 }); 118 - 119 - 120 120 </script> 199 +--> 121 121 {{/html}}