From ca8b732a640cd222bc6a3a2792a98214dcd8e305 Mon Sep 17 00:00:00 2001
From: "konstantina.galouni" <kgalouni@di.uoa.gr>
Date: Fri, 15 Mar 2024 15:43:58 +0200
Subject: [PATCH] [develop | DONE | ADDED]: menu.ts: In MenuItem class added
 field "badge?: string", which is used only in FAIRCORE4EOSC |
 navigationBar.component.html: Added <span> in menu item (only in no-link
 parent), to show a badge in FAIRCORE4EOSC.

---
 sharedComponents/menu.ts                      | 4 +++-
 sharedComponents/navigationBar.component.html | 8 ++++++--
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/sharedComponents/menu.ts b/sharedComponents/menu.ts
index e3b38e60..b4328834 100644
--- a/sharedComponents/menu.ts
+++ b/sharedComponents/menu.ts
@@ -23,10 +23,11 @@ export class MenuItem {
   isFeatured: boolean;
   isActive: boolean;
   target: string = "_blank";
+  badge?: string = ""; // used only for RDGraph portal (FAIRCORE4EOSC)
 
   constructor(id: string, title: string, url: string, route: string, needsAuthorization: boolean, entitiesRequired: string[],
               routeRequired: string[], params, icon: Icon = null, fragment = null, customClass = null, routeActive = null,
-              target: string = "_blank", type: string = "internal", isFeatured: boolean = false, items: MenuItem[] = []) {
+              target: string = "_blank", type: string = "internal", isFeatured: boolean = false, items: MenuItem[] = [], badge: string = "") {
     this._id = id;
     this.title = title;
     this.url = url;
@@ -43,6 +44,7 @@ export class MenuItem {
     this.target = target;
     this.type = type;
     this.isFeatured = isFeatured;
+    this.badge = badge;
   }
 
   public static isTheActiveMenu(menu: MenuItem, currentRoute: any, activeMenuItem: string = ""): boolean {
diff --git a/sharedComponents/navigationBar.component.html b/sharedComponents/navigationBar.component.html
index 7f502eab..a0147369 100644
--- a/sharedComponents/navigationBar.component.html
+++ b/sharedComponents/navigationBar.component.html
@@ -41,7 +41,9 @@
                   <a *ngIf="!menu.url" [routerLink]="menu.route && (isEnabled([menu.route], showPage) || !menu.routeRequired) && menu.items.length === 0?menu.route:null"
                      (click)="menu.items.length === 0?closeCanvas(canvas):null"
                      [queryParams]="menu.params"
-                     [fragment]="menu.fragment">{{menu.title}}<span *ngIf="menu.items.length > 0" class="uk-nav-parent-icon"></span></a>
+                     [fragment]="menu.fragment">
+                    <span *ngIf="menu.badge" style="position: relative"><span class="badge-mobile">{{menu.badge}}</span></span>
+                    {{menu.title}}<span *ngIf="menu.items.length > 0" class="uk-nav-parent-icon"></span></a>
                   <a *ngIf="menu.url"
                      (click)="menu.items.length === 0?closeCanvas(canvas):null"
                      [href]="menu.items.length === 0?menu.url:null"
@@ -215,7 +217,9 @@
                       <a *ngIf="menu.route.length == 0 && menu.url.length > 0"
                          href="{{menu.url}}" target="{{menu.target}}"
                          [class.custom-external]="menu.target != '_self'">{{menu.title}}</a>
-                      <a *ngIf="(menu.route.length == 0 && menu.url.length == 0) || ( menu.route.length >0 && menu.routeRequired && !isEnabled([menu.route], showPage) && isAtleastOneEnabled(menu.routeRequired, showPage))">{{menu.title}}</a>
+                      <a *ngIf="(menu.route.length == 0 && menu.url.length == 0) || ( menu.route.length >0 && menu.routeRequired && !isEnabled([menu.route], showPage) && isAtleastOneEnabled(menu.routeRequired, showPage))">
+                        <span *ngIf="menu.badge" class="badge">{{menu.badge}}</span>
+                        {{menu.title}}</a>
                       <div *ngIf="menu.items.length > 0" class="uk-navbar-dropdown uk-navbar-dropdown-bottom-left uk-height-max-medium uk-overflow-auto">
                         <!-- Do not delete this div, because it will remove the margin bottom of navbar -->
                         <div>