MOBILE-3079 core: Handle split view in user profile directives

src/addon/competency/pages/competency/competency.html

@@ -76,7 +76,7 @@ <h3 margin-horizontal>{{ 'addon.competency.evidence' | translate }}</h3>
                 {{ 'addon.competency.noevidence' | translate }}
             </p>
             <ion-card *ngFor="let evidence of competency.evidence">
-                <a ion-item text-wrap *ngIf="evidence.actionuser" (click)="openUserProfile(evidence.actionuser.id)">
+                <a ion-item text-wrap *ngIf="evidence.actionuser" core-user-link [userId]="evidence.actionuser.id" [courseId]="courseId">
                     <ion-avatar core-user-avatar [user]="evidence.actionuser" item-start></ion-avatar>
                     <h2>{{ evidence.actionuser.fullname }}</h2>
                     <p>{{ evidence.timemodified * 1000 | coreFormatDate }}</p>

src/addon/competency/pages/competency/competency.ts

@@ -151,15 +151,4 @@ export class AddonCompetencyCompetencyPage {
         const navCtrl = this.svComponent ? this.svComponent.getMasterNav() : this.navCtrl;
         navCtrl.push('AddonCompetencyCompetencySummaryPage', {competencyId});
     }
-
-    /**
-     * Opens the profile of a user.
-     *
-     * @param {number} userId
-     */
-    openUserProfile(userId: number): void {
-        // Decide which navCtrl to use. If this page is inside a split view, use the split view's master nav.
-        const navCtrl = this.svComponent ? this.svComponent.getMasterNav() : this.navCtrl;
-        navCtrl.push('CoreUserProfilePage', {userId, courseId: this.courseId});
-    }
 }

src/addon/mod/assign/components/submission/addon-mod-assign-submission.html

@@ -1,7 +1,7 @@
 <core-loading [hideUntil]="loaded">
 
     <!-- User and status of the submission. -->
-    <a ion-item text-wrap *ngIf="!blindMarking && user" (click)="openUserProfile(submitId)" [title]="user.fullname">
+    <a ion-item text-wrap *ngIf="!blindMarking && user" core-user-link [userId]="submitId" [courseId]="courseId" [title]="user.fullname">
         <ion-avatar core-user-avatar [user]="user" item-start></ion-avatar>
         <h2>{{ user.fullname }}</h2>
         <ng-container *ngTemplateOutlet="submissionStatus"></ng-container>
@@ -110,7 +110,7 @@ <h2>{{ 'addon.mod_assign.attemptnumber' | translate }}</h2>
                 <ion-item text-wrap *ngIf="membersToSubmit && membersToSubmit.length > 0">
                     <h2>{{ 'addon.mod_assign.userswhoneedtosubmit' | translate: {$a: ''} }}</h2>
                     <div *ngFor="let user of membersToSubmit">
-                        <a ion-item text-wrap *ngIf="user.fullname" (click)="openUserProfile(user.id)" [title]="user.fullname">
+                        <a ion-item text-wrap *ngIf="user.fullname" core-user-link [userId]="user.id" [courseId]="courseId" [title]="user.fullname">
                             <ion-avatar core-user-avatar [user]="user" item-start></ion-avatar>
                             <h2>{{ user.fullname }}</h2>
                         </a>
@@ -208,7 +208,7 @@ <h2>{{ 'addon.mod_assign.attemptsettings' | translate }}</h2>
                 </ng-container>
 
                 <!-- Data about the grader (teacher who graded). -->
-                <a ion-item text-wrap *ngIf="grader" (click)="openUserProfile(grader.id)" [title]="grader.fullname" detail-push>
+                <a ion-item text-wrap *ngIf="grader" core-user-link [userId]="grader.id" [courseId]="courseId" [title]="grader.fullname" detail-push>
                     <ion-avatar core-user-avatar [user]="grader" item-start></ion-avatar>
                     <h2>{{ 'addon.mod_assign.gradedby' | translate }}</h2>
                     <h2>{{ grader.fullname }}</h2>

src/addon/mod/assign/components/submission/submission.ts

@@ -620,17 +620,6 @@ export class AddonModAssignSubmissionComponent implements OnInit, OnDestroy {
         });
     }
 
-    /**
-     * Open a user profile.
-     *
-     * @param {number} userId User to open.
-     */
-    openUserProfile(userId: number): void {
-        // Open a user profile. If this component is inside a split view, use the master nav to open it.
-        const navCtrl = this.splitviewCtrl ? this.splitviewCtrl.getMasterNav() : this.navCtrl;
-        navCtrl.push('CoreUserProfilePage', { userId: userId, courseId: this.courseId });
-    }
-
     /**
      * Set the submission status name and class.
      *

src/addon/mod/forum/components/post/addon-mod-forum-post.html

@@ -1,6 +1,6 @@
 <ion-card-header text-wrap no-padding id="addon-mod_forum-post-{{post.id}}">
     <ion-item text-wrap>
-        <ion-avatar core-user-avatar [user]="post" item-start (click)="openUserProfile(post.userid)"></ion-avatar>
+        <ion-avatar core-user-avatar [user]="post" item-start></ion-avatar>
         <h2>
             <core-icon name="fa-map-pin" *ngIf="post.parent == 0 && post.pinned"></core-icon>
             <core-icon name="fa-star" class="addon-forum-star" *ngIf="post.parent == 0 && !post.pinned && post.starred"></core-icon>

src/addon/mod/forum/components/post/post.ts

@@ -14,10 +14,9 @@
 
 import { Component, Input, Output, Optional, EventEmitter, OnInit, OnDestroy } from '@angular/core';
 import { FormControl } from '@angular/forms';
-import { NavController, Content } from 'ionic-angular';
+import { Content } from 'ionic-angular';
 import { TranslateService } from '@ngx-translate/core';
 import { CoreFileUploaderProvider } from '@core/fileuploader/providers/fileuploader';
-import { CoreSplitViewComponent } from '@components/split-view/split-view';
 import { CoreSyncProvider } from '@providers/sync';
 import { CoreDomUtilsProvider } from '@providers/utils/dom';
 import { CoreTextUtilsProvider } from '@providers/utils/text';
@@ -57,7 +56,6 @@ export class AddonModForumPostComponent implements OnInit, OnDestroy {
     protected syncId: string;
 
     constructor(
-            private navCtrl: NavController,
             private uploaderProvider: CoreFileUploaderProvider,
             private syncProvider: CoreSyncProvider,
             private domUtils: CoreDomUtilsProvider,
@@ -67,7 +65,6 @@ export class AddonModForumPostComponent implements OnInit, OnDestroy {
             private forumHelper: AddonModForumHelperProvider,
             private forumOffline: AddonModForumOfflineProvider,
             private forumSync: AddonModForumSyncProvider,
-            @Optional() private svComponent: CoreSplitViewComponent,
             @Optional() private content: Content) {
         this.onPostChange = new EventEmitter<void>();
     }
@@ -79,17 +76,6 @@ export class AddonModForumPostComponent implements OnInit, OnDestroy {
         this.uniqueId = this.post.id ? 'reply' + this.post.id : 'edit' + this.post.parent;
     }
 
-    /**
-     * Opens the profile of a user.
-     *
-     * @param {number} userId
-     */
-    openUserProfile(userId: number): void {
-        // Decide which navCtrl to use. If this page is inside a split view, use the split view's master nav.
-        const navCtrl = this.svComponent ? this.svComponent.getMasterNav() : this.navCtrl;
-        navCtrl.push('CoreUserProfilePage', {userId, courseId: this.courseId});
-    }
-
     /**
      * Set data to new post, clearing temporary files and updating original data.
      *

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

@@ -12,13 +12,14 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { Component, Input, OnInit, OnChanges, OnDestroy, SimpleChange } from '@angular/core';
+import { Component, Input, OnInit, OnChanges, OnDestroy, SimpleChange, Optional } from '@angular/core';
 import { NavController } from 'ionic-angular';
 import { CoreSitesProvider } from '@providers/sites';
 import { CoreAppProvider } from '@providers/app';
 import { CoreUtilsProvider } from '@providers/utils/utils';
 import { CoreEventsProvider } from '@providers/events';
 import { CoreUserProvider } from '@core/user/providers/user';
+import { CoreSplitViewComponent } from '@components/split-view/split-view';
 
 /**
  * Component to display a "user avatar".
@@ -48,8 +49,13 @@ export class CoreUserAvatarComponent implements OnInit, OnChanges, OnDestroy {
     protected currentUserId: number;
     protected pictureObs;
 
-    constructor(private navCtrl: NavController, private sitesProvider: CoreSitesProvider, private utils: CoreUtilsProvider,
-            private appProvider: CoreAppProvider, eventsProvider: CoreEventsProvider) {
+    constructor(private navCtrl: NavController,
+            private sitesProvider: CoreSitesProvider,
+            private utils: CoreUtilsProvider,
+            private appProvider: CoreAppProvider,
+            eventsProvider: CoreEventsProvider,
+            @Optional() private svComponent: CoreSplitViewComponent) {
+
         this.currentUserId = this.sitesProvider.getCurrentSiteUserId();
 
         this.pictureObs = eventsProvider.on(CoreUserProvider.PROFILE_PICTURE_UPDATED, (data) => {
@@ -121,7 +127,10 @@ export class CoreUserAvatarComponent implements OnInit, OnChanges, OnDestroy {
         if (this.linkProfile && this.userId) {
             event.preventDefault();
             event.stopPropagation();
-            this.navCtrl.push('CoreUserProfilePage', { userId: this.userId, courseId: this.courseId });
+
+            // Decide which navCtrl to use. If this component is inside a split view, use the split view's master nav.
+            const navCtrl = this.svComponent ? this.svComponent.getMasterNav() : this.navCtrl;
+            navCtrl.push('CoreUserProfilePage', { userId: this.userId, courseId: this.courseId });
         }
     }
 

src/directives/user-link.ts

@@ -14,6 +14,7 @@
 
 import { Directive, Input, OnInit, ElementRef, Optional } from '@angular/core';
 import { NavController } from 'ionic-angular';
+import { CoreSplitViewComponent } from '@components/split-view/split-view';
 
 /**
  * Directive to go to user profile on click.
@@ -27,7 +28,10 @@ export class CoreUserLinkDirective implements OnInit {
 
     protected element: HTMLElement;
 
-    constructor(element: ElementRef, @Optional() private navCtrl: NavController) {
+    constructor(element: ElementRef,
+            @Optional() private navCtrl: NavController,
+            @Optional() private svComponent: CoreSplitViewComponent) {
+
         // This directive can be added dynamically. In that case, the first param is the anchor HTMLElement.
         this.element = element.nativeElement || element;
     }
@@ -41,7 +45,10 @@ export class CoreUserLinkDirective implements OnInit {
             if (!event.defaultPrevented) {
                 event.preventDefault();
                 event.stopPropagation();
-                this.navCtrl.push('CoreUserProfilePage', { userId: this.userId, courseId: this.courseId });
+
+                // Decide which navCtrl to use. If this directive is inside a split view, use the split view's master nav.
+                const navCtrl = this.svComponent ? this.svComponent.getMasterNav() : this.navCtrl;
+                navCtrl.push('CoreUserProfilePage', { userId: this.userId, courseId: this.courseId });
             }
         });
     }