MOBILE-2324 user: Fix user profile navigation

main
Dani Palou 2018-01-30 14:43:05 +01:00 committed by Pau Ferrer Ocaña
parent 9843da3fb0
commit 2ee117f935
5 changed files with 97 additions and 22 deletions

View File

@ -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 {

View File

@ -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>

View File

@ -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.
*/

View File

@ -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.

View File

@ -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');
}
};