From 2ee117f935057c9ee130ba3a9c76f565a2b647b3 Mon Sep 17 00:00:00 2001
From: Dani Palou <dani@moodle.com>
Date: Tue, 30 Jan 2018 14:43:05 +0100
Subject: [PATCH] MOBILE-2324 user: Fix user profile navigation

---
 src/components/split-view/split-view.ts  | 24 +++++++++++-
 src/core/user/pages/profile/profile.html |  8 ++--
 src/core/user/pages/profile/profile.ts   | 34 ++++++++++++++---
 src/core/user/providers/user-delegate.ts | 47 ++++++++++++++++++++----
 src/core/user/providers/user-handler.ts  |  6 +--
 5 files changed, 97 insertions(+), 22 deletions(-)

diff --git a/src/components/split-view/split-view.ts b/src/components/split-view/split-view.ts
index 51056847b..5d4709d20 100644
--- a/src/components/split-view/split-view.ts
+++ b/src/components/split-view/split-view.ts
@@ -66,6 +66,28 @@ export class CoreSplitViewComponent implements OnInit {
         this.emptyDetails();
     }
 
+    /**
+     * Get the details NavController. If split view is not enabled, it will return the master nav.
+     *
+     * @return {NavController} Details NavController.
+     */
+    getDetailsNav(): NavController {
+        if (this.isEnabled) {
+            return this.detailNav;
+        } else {
+            return this.masterNav;
+        }
+    }
+
+    /**
+     * Get the master NavController.
+     *
+     * @return {NavController} Master NavController.
+     */
+    getMasterNav(): NavController {
+        return this.masterNav;
+    }
+
     /**
      * Check if both panels are shown. It depends on screen width.
      *
@@ -81,7 +103,7 @@ export class CoreSplitViewComponent implements OnInit {
      * @param {any} page   The component class or deeplink name you want to push onto the navigation stack.
      * @param {any} params Any NavParams you want to pass along to the next view.
      */
-    push(page: any, params?: any, element?: HTMLElement): void {
+    push(page: any, params?: any): void {
         if (this.isEnabled) {
             this.detailNav.setRoot(page, params);
         } else {
diff --git a/src/core/user/pages/profile/profile.html b/src/core/user/pages/profile/profile.html
index fda94e955..ae17d5f1d 100644
--- a/src/core/user/pages/profile/profile.html
+++ b/src/core/user/pages/profile/profile.html
@@ -26,7 +26,7 @@
             <ion-grid ion-item class="core-user-communication-handlers" *ngIf="(communicationHandlers && communicationHandlers.length) || isLoadingHandlers">
                 <ion-row no-padding align-items-center text-center>
                     <ion-col align-self-center *ngIf="communicationHandlers && communicationHandlers.length">
-                        <a *ngFor="let comHandler of communicationHandlers" (click)="comHandler.action($event, user, courseId)" [ngClass]="['core-user-profile-handler', comHandler.class]" title="{{comHandler.title | translate}}">
+                        <a *ngFor="let comHandler of communicationHandlers" (click)="handlerClicked($event, comHandler)" [ngClass]="['core-user-profile-handler', comHandler.class]" title="{{comHandler.title | translate}}">
                             <ion-icon [name]="comHandler.icon"></ion-icon>
                             <p>{{comHandler.title | translate}}</p>
                         </a>
@@ -37,7 +37,7 @@
                 </ion-row>
             </ion-grid>
 
-            <a ion-item text-wrap class="core-user-profile-handler" navPush="CoreUserAboutPage" [navParams]="{courseId: courseId, userId: userId}" title="{{ 'core.user.details' | translate }}">
+            <a ion-item text-wrap class="core-user-profile-handler" (click)="openUserDetails()" title="{{ 'core.user.details' | translate }}">
                 <ion-icon name="person" item-start></ion-icon>
                 <h2>{{ 'core.user.details' | translate }}</h2>
             </a>
@@ -45,13 +45,13 @@
                 <ion-spinner></ion-spinner>
             </ion-item>
 
-            <a *ngFor="let npHandler of newPageHandlers" ion-item text-wrap [ngClass]="['core-user-profile-handler', npHandler.class]" (click)="npHandler.action($event, user, courseId)" [hidden]="npHandler.hidden" title="{{ npHandler.title | translate }}">
+            <a *ngFor="let npHandler of newPageHandlers" ion-item text-wrap [ngClass]="['core-user-profile-handler', npHandler.class]" (click)="handlerClicked($event, npHandler)" [hidden]="npHandler.hidden" title="{{ npHandler.title | translate }}">
                 <ion-icon *ngIf="npHandler.icon" [name]="npHandler.icon" item-start></ion-icon>
                 <h2>{{ npHandler.title | translate }}</h2>
             </a>
 
             <ion-item *ngIf="actionHandlers && actionHandlers.length">
-                <button *ngFor="let actHandler of actionHandlers" ion-button block outline [ngClass]="['core-user-profile-handler', actHandler.class]" (click)="actHandler.action($event, user, courseId)" [hidden]="actHandler.hidden" title="{{ actHandler.title | translate }}">
+                <button *ngFor="let actHandler of actionHandlers" ion-button block outline [ngClass]="['core-user-profile-handler', actHandler.class]" (click)="handlerClicked($event, actHandler)" [hidden]="actHandler.hidden" title="{{ actHandler.title | translate }}">
                     <ion-icon *ngIf="actHandler.icon" [name]="actHandler.icon" item-start></ion-icon>
                     {{ actHandler.title | translate }}
                     <ion-spinner *ngIf="actHandler.spinner" item-end></ion-spinner>
diff --git a/src/core/user/pages/profile/profile.ts b/src/core/user/pages/profile/profile.ts
index 63b88ba5a..7feb85a75 100644
--- a/src/core/user/pages/profile/profile.ts
+++ b/src/core/user/pages/profile/profile.ts
@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import { Component } from '@angular/core';
-import { IonicPage, NavParams } from 'ionic-angular';
+import { IonicPage, NavParams, NavController } from 'ionic-angular';
 import { CoreUserProvider } from '../../providers/user';
 import { CoreUserHelperProvider } from '../../providers/helper';
 import { CoreDomUtilsProvider } from '../../../../providers/utils/dom';
@@ -23,7 +23,8 @@ import { CoreEventsProvider } from '../../../../providers/events';
 import { CoreSitesProvider } from '../../../../providers/sites';
 import { CoreMimetypeUtilsProvider } from '../../../../providers/utils/mimetype';
 import { CoreFileUploaderHelperProvider } from '../../../fileuploader/providers/helper';
-import { CoreUserDelegate } from '../../providers/user-delegate';
+import { CoreUserDelegate, CoreUserProfileHandlerData } from '../../providers/user-delegate';
+import { CoreSplitViewComponent } from '../../../../components/split-view/split-view';
 
 /**
  * Page that displays an user profile page.
@@ -45,15 +46,15 @@ export class CoreUserProfilePage {
     title: string;
     isDeleted = false;
     canChangeProfilePicture = false;
-    actionHandlers = [];
-    newPageHandlers = [];
-    communicationHandlers = [];
+    actionHandlers: CoreUserProfileHandlerData[] = [];
+    newPageHandlers: CoreUserProfileHandlerData[] = [];
+    communicationHandlers: CoreUserProfileHandlerData[] = [];
 
     constructor(navParams: NavParams, private userProvider: CoreUserProvider, private userHelper: CoreUserHelperProvider,
             private domUtils: CoreDomUtilsProvider, private translate: TranslateService, private eventsProvider: CoreEventsProvider,
             private coursesProvider: CoreCoursesProvider, private sitesProvider: CoreSitesProvider,
             private mimetypeUtils: CoreMimetypeUtilsProvider, private fileUploaderHelper: CoreFileUploaderHelperProvider,
-            private userDelegate: CoreUserDelegate) {
+            private userDelegate: CoreUserDelegate, private svComponent: CoreSplitViewComponent, private navCtrl: NavController) {
         this.userId = navParams.get('userId');
         this.courseId = navParams.get('courseId');
 
@@ -181,6 +182,27 @@ export class CoreUserProfilePage {
         });
     }
 
+    /**
+     * Open the page with the user details.
+     */
+    openUserDetails(): 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('CoreUserAboutPage', {courseId: this.courseId, userId: this.userId});
+    }
+
+    /**
+     * A handler was clicked.
+     *
+     * @param {Event} event Click event.
+     * @param {CoreUserProfileHandlerData} handler Handler that was clicked.
+     */
+    handlerClicked(event: Event, handler: CoreUserProfileHandlerData): 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;
+        handler.action(event, navCtrl, this.user, this.courseId);
+    }
+
     /**
      * Page destroyed.
      */
diff --git a/src/core/user/providers/user-delegate.ts b/src/core/user/providers/user-delegate.ts
index 0787ff32b..62452c596 100644
--- a/src/core/user/providers/user-delegate.ts
+++ b/src/core/user/providers/user-delegate.ts
@@ -13,12 +13,16 @@
 // limitations under the License.
 
 import { Injectable } from '@angular/core';
+import { NavController } from 'ionic-angular';
 import { CoreDelegate, CoreDelegateHandler } from '../../../classes/delegate';
 import { CoreCoursesProvider } from '../../../core/courses/providers/courses';
 import { CoreLoggerProvider } from '../../../providers/logger';
 import { CoreSitesProvider } from '../../../providers/sites';
 import { CoreEventsProvider } from '../../../providers/events';
 
+/**
+ * Interface that all user profile handlers must implement.
+ */
 export interface CoreUserProfileHandler extends CoreDelegateHandler {
     /**
      * The highest priority is displayed first.
@@ -55,6 +59,9 @@ export interface CoreUserProfileHandler extends CoreDelegateHandler {
     getDisplayData(user: any, courseId: number): CoreUserProfileHandlerData;
 }
 
+/**
+ * Data needed to render a user profile handler. It's returned by the handler.
+ */
 export interface CoreUserProfileHandlerData {
     /**
      * Title to display.
@@ -88,12 +95,36 @@ export interface CoreUserProfileHandlerData {
 
     /**
      * Action to do when clicked.
-     * @param  {any}    $event
-     * @param  {any}     user       User object.
-     * @param  {number}  courseId   Course ID where to show.
-     * @return {any}        Action to be done.
+     *
+     * @param {Event} event Click event.
+     * @param {NavController} Nav controller to use to navigate.
+     * @param {any} user User object.
+     * @param {number} [courseId] Course ID being viewed. If not defined, site context.
      */
-    action?($event: any, user: any, courseId: number): any;
+    action?(event: Event, navCtrl: NavController, user: any, courseId?: number): void;
+}
+
+/**
+ * Data returned by the delegate for each handler.
+ */
+export interface CoreUserProfileHandlerToDisplay {
+    /**
+     * Data to display.
+     * @type {CoreUserProfileHandlerData}
+     */
+    data: CoreUserProfileHandlerData;
+
+    /**
+     * The highest priority is displayed first.
+     * @type {number}
+     */
+    priority?: number;
+
+    /**
+     * The type of the handler. See CoreUserProfileHandler.
+     * @type {string}
+     */
+    type: string;
 }
 
 /**
@@ -133,10 +164,10 @@ export class CoreUserDelegate extends CoreDelegate {
      *
      * @param {any} user The user object.
      * @param {number} courseId The course ID.
-     * @return {Promise<any>} Resolved with an array of objects containing 'priority', 'data' and 'type'.
+     * @return {Promise<CoreUserProfileHandlerToDisplay[]>} Resolved with the handlers.
      */
-    getProfileHandlersFor(user: any, courseId: number): Promise<any> {
-        const handlers = [],
+    getProfileHandlersFor(user: any, courseId: number): Promise<CoreUserProfileHandlerToDisplay[]> {
+        const handlers: CoreUserProfileHandlerToDisplay[] = [],
             promises = [];
 
         // Retrieve course options forcing cache.
diff --git a/src/core/user/providers/user-handler.ts b/src/core/user/providers/user-handler.ts
index 0c50827a1..e8127290f 100644
--- a/src/core/user/providers/user-handler.ts
+++ b/src/core/user/providers/user-handler.ts
@@ -60,9 +60,9 @@ export class CoreUserProfileMailHandler implements CoreUserProfileHandler {
             icon: 'mail',
             title: 'core.user.sendemail',
             class: 'core-user-profile-mail',
-            action: ($event, user, courseId): void => {
-                $event.preventDefault();
-                $event.stopPropagation();
+            action: (event, navCtrl, user, courseId): void => {
+                event.preventDefault();
+                event.stopPropagation();
                 window.open('mailto:' + user.email, '_blank');
             }
         };