Dev UI: Add favourite functionallity for extension cards

Signed-off-by: Phillip Kruger <[email protected]>

extensions/vertx-http/dev-ui-resources/src/main/resources/dev-ui/qwc/qwc-extension.js

@@ -60,15 +60,15 @@ 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;
         }
 
         .inactive:hover .config, .inactive:hover .more, .inactive:hover .guide {
             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`<div class="card-header">
                         <div>${this.name}</div>
+                        ${this._headerToolBar()}
+                    </div>
+          `;
+    }
+
+    _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`<div class="headerTools">
+                        ${this.clazz == "active"?
+                            html`<vaadin-icon class="icon fav" icon="${favouriteIcon}" @click="${this._fav}" title="${favouriteTitle}"></vaadin-icon>`:
+                            html``
+                        }
                         ${this.guide?
                             html`<vaadin-icon class="icon guide" icon="font-awesome-solid:book" @click="${this._guide}" title="Go to the ${this.name} guide"></vaadin-icon>`:
                             html``
                         }
-                    </div>
-          `;
+                    </div>`;
     }
 
     _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));
+        }
     }
 }
 

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);
+    storageController = 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`<div class="grid">
-            ${devuiState.cards.active.map(extension => this._renderActive(extension))}            
+            ${this._renderActives(devuiState.cards.active)}
             ${devuiState.cards.inactive.map(extension => this._renderInactive(extension))}
           </div>`;
     }
 
-    _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`
                 <qwc-extension 
@@ -79,7 +110,9 @@ export class QwcExtensions extends observeState(LitElement) {
                     unlisted="${extension.unlisted}"
                     builtWith="${extension.builtWith}"
                     providesCapabilities="${extension.providesCapabilities}"
-                    extensionDependencies="${extension.extensionDependencies}">
+                    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.storageController.get('favourites');
+        if(favourites){
+            return JSON.parse(favourites);
+        }else{
+            return [];
+        }
+    }
+
+    _setStoredFavourites(favourites){
+        this.storageController.set('favourites', JSON.stringify(favourites));
+    }
+
     _renderCardContent(extension){
         if(extension.card){
             return this._renderCustomCardContent(extension);