From 898f01632d77aba4689512e29715f1351efb81b8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Tue, 2 Nov 2021 11:42:28 +0100
Subject: [PATCH] MOBILE-3807 usermenu: Add badges coming from more menu

---
 .../components/user-menu/user-menu.html       |  8 ++++++++
 .../features/user/pages/profile/profile.html  | 19 ++++++++++++++----
 .../features/user/services/user-delegate.ts   | 20 +++++++++++++++++++
 3 files changed, 43 insertions(+), 4 deletions(-)

diff --git a/src/core/features/mainmenu/components/user-menu/user-menu.html b/src/core/features/mainmenu/components/user-menu/user-menu.html
index c36894446..34a9184f7 100644
--- a/src/core/features/mainmenu/components/user-menu/user-menu.html
+++ b/src/core/features/mainmenu/components/user-menu/user-menu.html
@@ -45,6 +45,14 @@
             <ion-label>
                 <p class="item-heading">{{ handler.title | translate }}</p>
             </ion-label>
+            <ion-badge slot="end" *ngIf="handler.showBadge" [hidden]="handler.loading || !handler.badge" aria-hidden="true">
+                {{handler.badge}}
+            </ion-badge>
+            <span *ngIf="handler.showBadge && handler.badge && handler.badgeA11yText" class="sr-only">
+                {{ handler.badgeA11yText | translate: {$a : handler.badge } }}
+            </span>
+            <ion-spinner slot="end" *ngIf="handler.showBadge && handler.loading" [attr.aria-label]="'core.loading' | translate">
+            </ion-spinner>
         </ion-item>
 
         <ion-item button (click)="openPreferences($event)" [attr.aria-label]="'core.settings.preferences' | translate" detail="true"
diff --git a/src/core/features/user/pages/profile/profile.html b/src/core/features/user/pages/profile/profile.html
index a5c7112e8..ce58f5ae1 100644
--- a/src/core/features/user/pages/profile/profile.html
+++ b/src/core/features/user/pages/profile/profile.html
@@ -17,7 +17,9 @@
                 </core-user-avatar>
                 <ion-label>
                     <h2>{{ user.fullname }}</h2>
-                    <p *ngIf="user.address"><ion-icon name="fas-map-marker-alt" [attr.aria-hidden]="true"></ion-icon> {{ user.address }}</p>
+                    <p *ngIf="user.address">
+                        <ion-icon name="fas-map-marker-alt" [attr.aria-hidden]="true"></ion-icon> {{ user.address }}
+                    </p>
                     <p *ngIf="rolesFormatted" class="ion-text-wrap">
                         <strong>{{ 'core.user.roles' | translate}}</strong>{{'core.labelsep' | translate}}
                         {{ rolesFormatted }}
@@ -51,7 +53,9 @@
                 </ion-label>
             </ion-item>
             <ion-item class="ion-text-center core-loading-handlers" *ngIf="isLoadingHandlers">
-                <ion-label><ion-spinner [attr.aria-label]="'core.loading' | translate"></ion-spinner></ion-label>
+                <ion-label>
+                    <ion-spinner [attr.aria-label]="'core.loading' | translate"></ion-spinner>
+                </ion-label>
             </ion-item>
 
             <ion-item button *ngFor="let handler of newPageHandlers" class="ion-text-wrap" (click)="handlerClicked($event, handler)"
@@ -61,6 +65,14 @@
                 <ion-label>
                     <p class="item-heading">{{ handler.title | translate }}</p>
                 </ion-label>
+                <ion-badge slot="end" *ngIf="handler.showBadge" [hidden]="handler.loading || !handler.badge" aria-hidden="true">
+                    {{handler.badge}}
+                </ion-badge>
+                <span *ngIf="handler.showBadge && handler.badge && handler.badgeA11yText" class="sr-only">
+                    {{ handler.badgeA11yText | translate: {$a : handler.badge } }}
+                </span>
+                <ion-spinner slot="end" *ngIf="handler.showBadge && handler.loading" [attr.aria-label]="'core.loading' | translate">
+                </ion-spinner>
             </ion-item>
 
             <ion-item *ngIf="actionHandlers && actionHandlers.length">
@@ -76,8 +88,7 @@
             </ion-item>
         </ion-list>
 
-        <core-empty-box *ngIf="!user && !isDeleted && isEnrolled" icon="far-user"
-            [message]=" 'core.user.detailsnotavailable' | translate">
+        <core-empty-box *ngIf="!user && !isDeleted && isEnrolled" icon="far-user" [message]=" 'core.user.detailsnotavailable' | translate">
         </core-empty-box>
         <core-empty-box *ngIf="isDeleted" icon="far-user" [message]="'core.userdeleted' | translate"></core-empty-box>
         <core-empty-box *ngIf="!isEnrolled" icon="far-user" [message]="'core.notenrolledprofile' | translate"></core-empty-box>
diff --git a/src/core/features/user/services/user-delegate.ts b/src/core/features/user/services/user-delegate.ts
index 5901fa17d..b16a36787 100644
--- a/src/core/features/user/services/user-delegate.ts
+++ b/src/core/features/user/services/user-delegate.ts
@@ -111,6 +111,26 @@ export interface CoreUserProfileHandlerData {
      */
     spinner?: boolean;
 
+    /**
+     * If the handler has badge to show or not. Only for TYPE_NEW_PAGE.
+     */
+    showBadge?: boolean;
+
+    /**
+     * Text to display on the badge. Only used if showBadge is true and only for TYPE_NEW_PAGE.
+     */
+    badge?: string;
+
+    /**
+     * Accessibility text to add on the badge. Only used if showBadge is true and only for TYPE_NEW_PAGE.
+     */
+    badgeA11yText?: string;
+
+    /**
+     * If true, the badge number is being loaded. Only used if showBadge is true and only for TYPE_NEW_PAGE.
+     */
+    loading?: boolean;
+
     /**
      * Action to do when clicked.
      *