From 5fd452b0c90215e342b1f6e1d11009d20cc8f656 Mon Sep 17 00:00:00 2001 From: Phillip Kruger Date: Tue, 27 Jun 2023 14:25:53 +1000 Subject: [PATCH] Dev UI: Add favourite functionallity for extension cards Signed-off-by: Phillip Kruger --- .../resources/dev-ui/qwc/qwc-extension.js | 41 +++++++-- .../resources/dev-ui/qwc/qwc-extensions.js | 84 ++++++++++++++++--- 2 files changed, 107 insertions(+), 18 deletions(-) diff --git a/extensions/vertx-http/dev-ui-resources/src/main/resources/dev-ui/qwc/qwc-extension.js b/extensions/vertx-http/dev-ui-resources/src/main/resources/dev-ui/qwc/qwc-extension.js index d1fe10a11e701c..bb97a368653dfc 100644 --- a/extensions/vertx-http/dev-ui-resources/src/main/resources/dev-ui/qwc/qwc-extension.js +++ b/extensions/vertx-http/dev-ui-resources/src/main/resources/dev-ui/qwc/qwc-extension.js @@ -60,7 +60,7 @@ export class QwcExtension extends LitElement { color: var(--lumo-contrast-70pct); } - .active:hover .config, .active:hover .more, .active:hover .guide { + .active:hover .config, .active:hover .more, .active:hover .guide, .active:hover .fav { visibility:visible; } @@ -68,7 +68,7 @@ export class QwcExtension extends LitElement { visibility:visible; } - .guide, .more, .config { + .guide, .more, .config, .fav { visibility:hidden; } @@ -94,12 +94,14 @@ export class QwcExtension extends LitElement { unlisted: {type: String}, builtWith: {type: String}, providesCapabilities: {}, - extensionDependencies: {}, + extensionDependencies: {}, + favourite: {type: Boolean}, }; constructor() { super(); this._dialogOpened = false; + this.favourite = false; } render() { @@ -130,12 +132,29 @@ export class QwcExtension extends LitElement { _headerTemplate() { return html`
${this.name}
+ ${this._headerToolBar()} +
+ `; + } + + _headerToolBar(){ + let favouriteIcon = "font-awesome-regular:star"; + let favouriteTitle = "Favour this extension"; + if(this.favourite){ + favouriteIcon = "font-awesome-solid:star"; + favouriteTitle = "Unfavour this extension"; + } + + return html`
+ ${this.clazz == "active"? + html``: + html`` + } ${this.guide? html``: html`` } -
- `; + `; } _footerTemplate() { @@ -281,8 +300,16 @@ export class QwcExtension extends LitElement { window.open(this.guide, '_blank').focus(); } - _configuration(e) { - console.log("Show config with filter: " + this.configFilter); + _fav(e){ + const name = this.namespace; + if (name) { + const options = { + detail: {name}, + bubbles: true, + composed: true, + }; + this.dispatchEvent(new CustomEvent('favourite', options)); + } } } diff --git a/extensions/vertx-http/dev-ui-resources/src/main/resources/dev-ui/qwc/qwc-extensions.js b/extensions/vertx-http/dev-ui-resources/src/main/resources/dev-ui/qwc/qwc-extensions.js index 7c97fa002e8694..a8c847ea5dd613 100644 --- a/extensions/vertx-http/dev-ui-resources/src/main/resources/dev-ui/qwc/qwc-extensions.js +++ b/extensions/vertx-http/dev-ui-resources/src/main/resources/dev-ui/qwc/qwc-extensions.js @@ -5,13 +5,14 @@ import { devuiState } from 'devui-state'; import { observeState } from 'lit-element-state'; import 'qwc/qwc-extension.js'; import 'qwc/qwc-extension-link.js'; - +import { StorageController } from 'storage-controller'; /** * This component create cards of all the extensions */ export class QwcExtensions extends observeState(LitElement) { routerController = new RouterController(this); + storageControler = new StorageController(this); static styles = css` .grid { @@ -46,22 +47,52 @@ export class QwcExtensions extends observeState(LitElement) { } `; + static properties = { + _favourites: {state: true}, + } + + constructor() { + super(); + this._favourites = this._getStoredFavourites(); + } + render() { return html`
- ${devuiState.cards.active.map(extension => this._renderActive(extension))} + ${this._renderActives(devuiState.cards.active)} ${devuiState.cards.inactive.map(extension => this._renderInactive(extension))}
`; } - _renderActive(extension){ - extension.cardPages.forEach(page => { - if(page.embed){ // we need to register with the router - import(page.componentRef); - this.routerController.addRouteForExtension(page); - }else if(page.includeInSubMenu){ // we need to add the link to the submenu - this.routerController.addExternalLink(page); + _renderActives(extensions){ + let favouriteExtensions = []; + let unfavouriteExtensions = []; + + for (let i = 0; i < extensions.length; i++) { + let extension = extensions[i]; + // Make sure we import the components + extension.cardPages.forEach(page => { + if(page.embed){ // we need to register with the router + import(page.componentRef); + this.routerController.addRouteForExtension(page); + }else if(page.includeInSubMenu){ // we need to add the link to the submenu + this.routerController.addExternalLink(page); + } + }); + + if(this._favourites.includes(extension.namespace)){ + favouriteExtensions.push(extension); + } else { + unfavouriteExtensions.push(extension); } - }); + } + + return html` + ${favouriteExtensions.map(e => this._renderActive(e,true))} + ${unfavouriteExtensions.map(e => this._renderActive(e,false))} + `; + } + + _renderActive(extension, fav){ return html` + extensionDependencies="${extension.extensionDependencies}" + ?favourite=${fav} + @favourite=${this._favourite}> ${this._renderCardContent(extension)} @@ -88,6 +121,35 @@ export class QwcExtensions extends observeState(LitElement) { `; } + _favourite(e){ + let favourites = this._getStoredFavourites(); + let extName = e.detail.name; + if(favourites.includes(extName)){ + const index = favourites.indexOf(extName); + if (index > -1) { + favourites.splice(index, 1); + } + }else{ + favourites.push(extName); + } + this._setStoredFavourites(favourites); + + this._favourites = this._getStoredFavourites(); + } + + _getStoredFavourites(){ + let favourites = this.storageControler.get('favourites'); + if(favourites){ + return JSON.parse(favourites); + }else{ + return []; + } + } + + _setStoredFavourites(favourites){ + this.storageControler.set('favourites', JSON.stringify(favourites)); + } + _renderCardContent(extension){ if(extension.card){ return this._renderCustomCardContent(extension);