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,10 +1,11 @@ 1 1 {{html clean="false"}} 2 2 <!-- 3 - !!! POC. Code would needtobe reviewed / optimized and packagedifthis is meant tobeusedin production !!!3 + !!! POC. Code would must be reviewed / optimized and packaged for use in production !!! 4 4 --> 5 5 <script type="module"> 6 6 import {LitElement, html} from 'https://cdn.jsdelivr.net/gh/lit/dist@2/core/lit-core.min.js'; 7 7 class UnifiedSearch extends LitElement { 8 + /* 8 8 static properties = { 9 9 searchText: { type: String }, 10 10 favoritesFilter: { type: Boolean }, ... ... @@ -14,25 +14,29 @@ 14 14 publicFilter: { type: Boolean }, 15 15 privateFilter: { type: Boolean }, 16 16 } 18 + */ 17 17 constructor() { 18 18 super(); 19 19 this.searchText = ""; 20 - this.favoritesFilter = false; 21 - this.administratorFilter = false; 22 - this.editorFilter = false; 23 - this.viewerFilter = false; 24 - this.publicFilter = false; 25 - this.privateFilter = false; 22 + this.administrator = false; 23 + this.editor = false; 24 + this.viewer = false; 25 + this.rolesFilter = []; 26 + this.filterUrl = new URL(`${document.location.origin}/rest/v1/collabs?search=&offset=0&orderField=title&order=asc&favorite=true&roles=`); 26 26 } 27 - toggleBooleanFilter(filterName) { 28 - this[filterName] = !this[filterName]; 29 - console.log(this.administratorFilter); 28 + toggleRoleFilter(roleName) { 29 + if(this.rolesFilter.indexOf(roleName) == -1) { 30 + this.rolesFilter.push(roleName); 31 + } else { 32 + this.rolesFilter.filter(role => role !== roleName); 33 + } 34 + this[roleName] = !this[roleName]; 35 + this.filterUrl.searchParams.set('roles', this.rolesFilter.join("+")); 30 30 } 31 31 setSearchText(e) { 32 32 this.searchText = e.target.value; 33 33 } 34 34 handleSearch() { 35 - // check if text changed 36 36 console.log(this.searchText); 37 37 } 38 38 buildFilter() { ... ... @@ -46,12 +46,9 @@ 46 46 <button @click="${this.handleSearch}">Search</button> 47 47 </div> 48 48 <div> 49 - <label><input type="checkbox" @change="${() => this.toggleBooleanFilter('favoritesFilter')}" .checked="${this.favoritesFilter}"/> Favorites</label> 50 - <label><input type="checkbox" @change="${() => this.toggleBooleanFilter('administratorFilter')}" .checked="${this.administratorFilter}"/> Administrator</label> 51 - <label><input type="checkbox" @change="${() => this.toggleBooleanFilter('editorFilter')}" .checked="${this.editorFilter}"/> Editor</label> 52 - <label><input type="checkbox" @change="${() => this.toggleBooleanFilter('viewerFilter')}" .checked="${this.viewerFilter}"/> Viewer</label> 53 - <label><input type="checkbox" @change="${() => this.toggleBooleanFilter('publicFilter')}" .checked="${this.publicFilter}"/> Public</label> 54 - <label><input type="checkbox" @change="${() => this.toggleBooleanFilter('privateFilter')}" .checked="${this.privateFilter}"/> Public</label> 54 + <label><input type="checkbox" @change="${() => this.toggleRoleFilter('administrator')}" .checked="${this.administratorFilter}"/> Administrator</label> 55 + <label><input type="checkbox" @change="${() => this.toggleRoleFilter('editor')}" .checked="${this.editorFilter}"/> Editor</label> 56 + <label><input type="checkbox" @change="${() => this.toggleRoleFilter('viewer')}" .checked="${this.viewerFilter}"/> Viewer</label> 55 55 </div> 56 56 </div> 57 57 `