MOBILE-2632 message: Apply online status to new views

src/addon/messages/pages/conversation-info/conversation-info.html

@@ -24,11 +24,7 @@
         </ion-item>
 
         <a ion-item text-wrap *ngFor="let member of members" (click)="closeModal(member.id)">
-            <ion-avatar item-start>
-                <img [src]="member.profileimageurl" [alt]="member.fullname" core-external-content onError="this.src='assets/img/user-avatar.png'">
-                <!-- @todo: Display connection status.
-                    <span *ngIf="member.showonlinestatus" class="core-primary-circle" [ngClass]='{"addon-message-contact-online": member.isonline}'></span> -->
-            </ion-avatar>
+            <ion-avatar core-user-avatar [user]="member" [linkProfile]="false" [checkOnline]="member.showonlinestatus" item-start></ion-avatar>
             <h2>
                 <p>
                     <core-format-text [text]="member.fullname"></core-format-text>

src/addon/messages/pages/group-conversations/group-conversations.html

@@ -31,9 +31,7 @@
                 </ion-item-divider>
 
                 <a ion-item text-wrap *ngFor="let result of search.results" [title]="result.fullname" (click)="gotoConversation(result.conversationid, result.userid, result.messageid)" [class.core-split-item-selected]="(result.conversationid && result.conversationid == selectedConversationId) || (result.userid && result.userid == selectedUserId)" detail-none>
-                    <ion-avatar item-start>
-                        <img src="{{result.profileimageurl}}" [alt]="'core.pictureof' | translate:{$a: result.fullname}" core-external-content onError="this.src='assets/img/user-avatar.png'">
-                    </ion-avatar>
+                    <ion-avatar core-user-avatar [user]="result" [linkProfile]="false" item-start></ion-avatar>
                     <h2>
                         <p>
                             <core-format-text [text]="result.fullname"></core-format-text>
@@ -73,7 +71,7 @@
                     <!-- @todo: Unread total of group conversations (MDL-63913). -->
                 </ion-item-divider>
                 <div *ngIf="group.conversations && group.expanded">
-                    <ng-container *ngTemplateOutlet="conversationsTemplate; context: {conversations: group.conversations, avatarOptional: true}"></ng-container>
+                    <ng-container *ngTemplateOutlet="conversationsTemplate; context: {conversations: group.conversations}"></ng-container>
                     <!-- The infinite loading cannot be inside the ng-template, it fails because it doesn't find ion-content. -->
                     <core-infinite-loading [enabled]="group.canLoadMore" (action)="loadMoreConversations(group, $event)" [error]="group.loadMoreError"></core-infinite-loading>
                     <ion-item text-wrap *ngIf="group.conversations.length == 0">
@@ -104,13 +102,16 @@
 </core-split-view>
 
 <!-- Template to render a list of conversations. -->
-<ng-template #conversationsTemplate let-conversations="conversations" let-avatarOptional="avatarOptional">
+<ng-template #conversationsTemplate let-conversations="conversations">
     <a ion-item text-wrap *ngFor="let conversation of conversations" [title]="conversation.name" detail-none (click)="gotoConversation(conversation.id, conversation.userid)" [class.core-split-item-selected]="(conversation.id && conversation.id == selectedConversationId) || (conversation.userid && conversation.userid == selectedUserId)" id="addon-message-conversation-{{ conversation.id ? conversation.id : 'user-' + conversation.userid }}">
-        <ion-avatar item-start *ngIf="conversation.imageurl || !avatarOptional">
-            <img src="{{conversation.imageurl}}" [alt]="conversation.name" core-external-content onError="this.src='assets/img/user-avatar.png'">
-            <!-- @todo: Display connection status.
-                <span *ngIf="conversation.showonlinestatus" class="core-primary-circle" [ngClass]='{"addon-message-contact-online": conversation.isonline}'></span> -->
+        <!-- Group conversation image. -->
+        <ion-avatar item-start *ngIf="conversation.type != typeIndividual && conversation.imageurl">
+            <img [src]="conversation.imageurl" [alt]="conversation.name" core-external-content>
         </ion-avatar>
+
+        <!-- Avatar for individual conversations. -->
+        <ion-avatar *ngIf="conversation.type == typeIndividual" core-user-avatar [user]="conversation.otherUser" [linkProfile]="false" [checkOnline]="conversation.showonlinestatus" item-start></ion-avatar>
+
         <h2>
             <p>
                 <core-format-text [text]="conversation.name"></core-format-text>

src/addon/messages/pages/group-conversations/group-conversations.ts

@@ -61,6 +61,7 @@ export class AddonMessagesGroupConversationsPage implements OnInit, OnDestroy {
         type: AddonMessagesProvider.MESSAGE_CONVERSATION_TYPE_INDIVIDUAL,
         favourites: false
     };
+    typeIndividual = AddonMessagesProvider.MESSAGE_CONVERSATION_TYPE_INDIVIDUAL;
 
     protected loadingString: string;
     protected siteId: string;

src/addon/messages/providers/messages.ts

@@ -176,6 +176,7 @@ export class AddonMessagesProvider {
             conversation.showonlinestatus = otherUser.showonlinestatus;
             conversation.isonline = otherUser.isonline;
             conversation.isblocked = otherUser.isblocked;
+            conversation.otherUser = otherUser;
         }
 
         return conversation;

src/components/user-avatar/user-avatar.ts

@@ -15,6 +15,7 @@
 import { Component, Input, OnInit, OnChanges, SimpleChange } from '@angular/core';
 import { NavController } from 'ionic-angular';
 import { CoreSitesProvider } from '@providers/sites';
+import { CoreUtilsProvider } from '@providers/utils/utils';
 
 /**
  * Component to display a "user avatar".
@@ -41,7 +42,7 @@ export class CoreUserAvatarComponent implements OnInit, OnChanges {
     protected myUser = false;
     protected currentUserId: number;
 
-    constructor(private navCtrl: NavController, private sitesProvider: CoreSitesProvider) {
+    constructor(private navCtrl: NavController, private sitesProvider: CoreSitesProvider, private utils: CoreUtilsProvider) {
         this.currentUserId = this.sitesProvider.getCurrentSiteUserId();
     }
 
@@ -75,7 +76,7 @@ export class CoreUserAvatarComponent implements OnInit, OnChanges {
 
         this.fullname = this.fullname || (this.user && (this.user.fullname || this.user.userfullname));
 
-        this.userId = this.userId || (this.user && this.user.userid);
+        this.userId = this.userId || (this.user && (this.user.userid || this.user.id));
         this.courseId = this.courseId || (this.user && this.user.courseid);
 
         // If not available we cannot ensure the avatar is from the current user.
@@ -89,9 +90,18 @@ export class CoreUserAvatarComponent implements OnInit, OnChanges {
      * @return boolean
      */
     isOnline(): boolean {
-        const time = new Date().getTime() - this.timetoshowusers;
+        if (this.myUser || this.utils.isFalseOrZero(this.user.isonline)) {
+            return false;
+        }
 
-        return !this.myUser && ((this.user.lastaccess && this.user.lastaccess * 1000 >= time) || this.user.isonline);
+        if (this.user.lastaccess) {
+            // If the time has passed, don't show the online status.
+            const time = new Date().getTime() - this.timetoshowusers;
+
+            return this.user.lastaccess * 1000 >= time;
+        } else {
+            return this.user.isonline;
+        }
     }
 
     /**