From 228943eb09d9f38a3350e27f7a3f5a7940902685 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Mon, 15 Apr 2019 13:20:03 +0200
Subject: [PATCH] MOBILE-2956 notifications: Improve notifications info

---
 src/addon/notifications/pages/list/list.html      | 15 ++++++++++-----
 src/addon/notifications/pages/list/list.scss      |  5 +++++
 .../notifications/providers/notifications.ts      | 10 +++++++---
 src/components/user-avatar/core-user-avatar.html  |  1 +
 src/components/user-avatar/user-avatar.scss       | 10 ++++++++++
 src/components/user-avatar/user-avatar.ts         |  1 +
 6 files changed, 34 insertions(+), 8 deletions(-)
 create mode 100644 src/addon/notifications/pages/list/list.scss

diff --git a/src/addon/notifications/pages/list/list.html b/src/addon/notifications/pages/list/list.html
index b931c6768..bd523d6ba 100644
--- a/src/addon/notifications/pages/list/list.html
+++ b/src/addon/notifications/pages/list/list.html
@@ -18,11 +18,16 @@
             </button>
         </div>
         <ion-card *ngFor="let notification of notifications">
-            <ion-item>
-                <ion-avatar core-user-avatar [user]="notification" item-start [profileUrl]="notification.profileimageurlfrom" [fullname]="notification.userfromfullname" [userId]="notification.useridfrom"></ion-avatar>
-                <h2>{{notification.userfromfullname}}</h2>
-                <div item-end *ngIf="!notification.timeread"><core-icon name="fa-circle" color="primary"></core-icon></div>
-                <p>{{notification.timecreated | coreDateDayOrTime}}</p>
+            <ion-item text-wrap>
+                <ion-avatar *ngIf="notification.useridfrom > 0" core-user-avatar [user]="notification" item-start [profileUrl]="notification.profileimageurlfrom" [fullname]="notification.userfromfullname" [userId]="notification.useridfrom" [extraIcon]="notification.iconurl"></ion-avatar>
+                <img *ngIf="notification.useridfrom <= 0 && notification.iconurl" [src]="notification.iconurl" alt="" role="presentation" class="core-notification-icon" item-start>
+                <h2><core-format-text [text]="notification.subject"></core-format-text></h2>
+                <p><ion-note float-end padding-left text-end>
+                        {{notification.timecreated | coreDateDayOrTime}}
+                        <span *ngIf="!notification.timeread"><core-icon name="fa-circle" color="primary"></core-icon></span>
+                    </ion-note>
+                </p>
+                <p *ngIf="notification.userfromfullname"><core-format-text [text]="notification.userfromfullname"></core-format-text></p>
             </ion-item>
             <ion-item text-wrap>
                 <p><core-format-text [text]="notification.mobiletext | coreCreateLinks"></core-format-text></p>
diff --git a/src/addon/notifications/pages/list/list.scss b/src/addon/notifications/pages/list/list.scss
new file mode 100644
index 000000000..122b8e4dc
--- /dev/null
+++ b/src/addon/notifications/pages/list/list.scss
@@ -0,0 +1,5 @@
+page-addon-notifications-list .core-notification-icon {
+    width: 34px;
+    height: 34px;
+    margin: 10px !important;
+}
\ No newline at end of file
diff --git a/src/addon/notifications/providers/notifications.ts b/src/addon/notifications/providers/notifications.ts
index 64a19c10f..1cd0f9806 100644
--- a/src/addon/notifications/providers/notifications.ts
+++ b/src/addon/notifications/providers/notifications.ts
@@ -52,9 +52,12 @@ export class AddonNotificationsProvider {
      */
     protected formatNotificationsData(notifications: any[], read?: boolean): Promise<any> {
         const promises = notifications.map((notification) => {
+
             // Set message to show.
-            if (notification.contexturl && notification.contexturl.indexOf('/mod/forum/') >= 0) {
+            if (notification.component && notification.component == 'mod_forum') {
                 notification.mobiletext = notification.smallmessage;
+            } else if (notification.component && notification.component == 'moodle' && notification.name == 'insights') {
+                notification.mobiletext = notification.fullmessagehtml;
             } else {
                 notification.mobiletext = notification.fullmessage;
             }
@@ -73,10 +76,10 @@ export class AddonNotificationsProvider {
             // Try to set courseid the notification belongs to.
             if (notification.customdata && notification.customdata.courseid) {
                 notification.courseid = notification.customdata.courseid;
-            } else {
+            } else if (!notification.courseid) {
                 const cid = notification.fullmessagehtml.match(/course\/view\.php\?id=([^"]*)/);
                 if (cid && cid[1]) {
-                    notification.courseid = cid[1];
+                    notification.courseid = parseInt(cid[1], 10);
                 }
             }
 
@@ -84,6 +87,7 @@ export class AddonNotificationsProvider {
                 // Try to get the profile picture of the user.
                 return this.userProvider.getProfile(notification.useridfrom, notification.courseid, true).then((user) => {
                     notification.profileimageurlfrom = user.profileimageurl;
+                    notification.userfromfullname = user.fullname;
 
                     return notification;
                 }).catch(() => {
diff --git a/src/components/user-avatar/core-user-avatar.html b/src/components/user-avatar/core-user-avatar.html
index 15b7a35f9..21783350d 100644
--- a/src/components/user-avatar/core-user-avatar.html
+++ b/src/components/user-avatar/core-user-avatar.html
@@ -1,4 +1,5 @@
 <img *ngIf="avatarUrl" [src]="avatarUrl" [alt]="'core.pictureof' | translate:{$a: fullname}" core-external-content onError="this.src='assets/img/user-avatar.png'" role="presentation" [siteId]="siteId || null" (click)="gotoProfile($event)">
 <img *ngIf="!avatarUrl" src="assets/img/user-avatar.png" [alt]="'core.pictureof' | translate:{$a: fullname}" role="presentation" (click)="gotoProfile($event)">
 <span *ngIf="checkOnline && isOnline()" class="contact-status online"></span>
+<img *ngIf="extraIcon" [src]="extraIcon" alt="" role="presentation" class="core-avatar-extra-icon">
 <ng-content></ng-content>
\ No newline at end of file
diff --git a/src/components/user-avatar/user-avatar.scss b/src/components/user-avatar/user-avatar.scss
index 5962d9658..c5296a850 100644
--- a/src/components/user-avatar/user-avatar.scss
+++ b/src/components/user-avatar/user-avatar.scss
@@ -12,6 +12,16 @@ ion-avatar[core-user-avatar] {
             background-color: $core-online-color;
         }
     }
+
+    .core-avatar-extra-icon {
+        margin: 0 !important;
+        border-radius: 0 !important;
+        background: none;
+        position: absolute;
+        @include position(null, -4px, -4px, null);
+        width: 24px;
+        height: 24px;
+    }
 }
 
 .toolbar ion-avatar[core-user-avatar] .contact-status {
diff --git a/src/components/user-avatar/user-avatar.ts b/src/components/user-avatar/user-avatar.ts
index a8e9d6bc7..298ace24a 100644
--- a/src/components/user-avatar/user-avatar.ts
+++ b/src/components/user-avatar/user-avatar.ts
@@ -38,6 +38,7 @@ export class CoreUserAvatarComponent implements OnInit, OnChanges, OnDestroy {
     @Input() protected userId?: number; // If provided or found it will be used to link the image to the profile.
     @Input() protected courseId?: number;
     @Input() checkOnline = false; // If want to check and show online status.
+    @Input() extraIcon?: string; // Extra icon to show near the avatar.
 
     avatarUrl?: string;