EVOgeek
/
Vmeda.Online
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

MOBILE-2324 course: Use core-tabs in section and render addon components

main
Dani Palou 2018-01-30 13:16:28 +01:00 committed by Pau Ferrer Ocaña
parent a856b5c90e
commit 9843da3fb0
14 changed files with 187 additions and 139 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/split-view/split-view.html
View File

@ -1,6 +1,5 @@
<ion-split-pane (ionChange)="onSplitPaneChanged($event._visible);" [when]="when">
<ion-menu [content]="detailNav" type="push">
<ion-header><ion-toolbar><ion-title></ion-title></ion-toolbar></ion-header>
<ng-content></ng-content>
</ion-menu>
<ion-nav [root]="detailPage" #detailNav main></ion-nav>

10
src/components/tabs/tabs.scss
View File

@ -36,10 +36,20 @@ core-tabs {
core-tab {
display: none;
height: 100%;
position: relative;
&.selected {
display: block;
}
ion-header {
display: none;
}
.fixed-content, .scroll-content {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
}
}

4
src/components/tabs/tabs.ts
View File

@ -43,7 +43,7 @@ import { Content } from 'ionic-angular';
})
export class CoreTabsComponent implements OnInit, AfterViewInit, OnChanges {
@Input() selectedIndex = 0; // Index of the tab to select.
@Input() hideUntil: boolean; // Determine when should the contents be shown.
@Input() hideUntil = true; // Determine when should the contents be shown.
@Output() ionChange: EventEmitter<CoreTabComponent> = new EventEmitter<CoreTabComponent>(); // Emitted when the tab changes.
@ViewChild('originalTabs') originalTabsRef: ElementRef;
@ViewChild('topTabs') topTabs: ElementRef;
@ -148,7 +148,7 @@ export class CoreTabsComponent implements OnInit, AfterViewInit, OnChanges {
let selectedIndex = this.selectedIndex || 0,
selectedTab = this.tabs[selectedIndex];
if (!selectedTab.enabled || !selectedTab.show) {
if (!selectedTab || !selectedTab.enabled || !selectedTab.show) {
// The tab is not enabled or not shown. Get the first tab that is enabled.
selectedTab = this.tabs.find((tab, index) => {
if (tab.enabled && tab.show) {

32
src/core/course/pages/section/section.html
View File

@ -11,16 +11,26 @@
</ion-navbar>
</ion-header>
<ion-content>
<ion-refresher [enabled]="dataLoaded" (ionRefresh)="doRefresh($event)">
<ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
</ion-refresher>
<core-tabs>
<!-- Course contents tab. -->
<core-tab [title]="'core.course.contents' | translate">
<ng-template>
<ion-content>
<ion-refresher [enabled]="dataLoaded" (ionRefresh)="doRefresh($event)">
<ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
</ion-refresher>
<core-loading [hideUntil]="dataLoaded">
<!-- @todo: Use core-tabs or a new component. core-tabs might initialize all tabs at start, so we might require a new component. -->
<div class="core-tabs-bar">
<a aria-selected="true" [title]="'core.course.contents' | translate">{{ 'core.course.contents' | translate }}</a>
<a *ngFor="let handler of courseHandlers" (click)="handler.data.action(course)" [title]="handler.data.title | translate">{{ handler.data.title | translate }}</a>
</div>
<core-course-format [course]="course" [sections]="sections" [initialSectionId]="sectionId" [initialSectionNumber]="sectionNumber" [downloadEnabled]="downloadEnabled" (completionChanged)="onCompletionChange()"></core-course-format>
</core-loading>
<core-loading [hideUntil]="dataLoaded">
<core-course-format [course]="course" [sections]="sections" [initialSectionId]="sectionId" [initialSectionNumber]="sectionNumber" [downloadEnabled]="downloadEnabled" (completionChanged)="onCompletionChange()"></core-course-format>
</core-loading>
</ion-content>
</ng-template>
</core-tab>
<!-- One tab per handler. -->
<core-tab *ngFor="let handler of courseHandlers" [title]="handler.data.title | translate" class="{{handler.data.class}}">
<ng-template>
<core-dynamic-component [component]="handler.data.component" [data]="handlerData"></core-dynamic-component>
</ng-template>
</core-tab>
</core-tabs>
</ion-content>

2
src/core/course/pages/section/section.ts
View File

@ -43,6 +43,7 @@ export class CoreCourseSectionPage implements OnDestroy {
sectionId: number;
sectionNumber: number;
courseHandlers: CoreCourseOptionsHandlerToDisplay[];
handlerData: any = {}; // Data to send to the handlers components.
dataLoaded: boolean;
downloadEnabled: boolean;
downloadEnabledIcon = 'square-outline'; // Disabled by default.
@ -63,6 +64,7 @@ export class CoreCourseSectionPage implements OnDestroy {
this.course = navParams.get('course');
this.sectionId = navParams.get('sectionId');
this.sectionNumber = navParams.get('sectionNumber');
this.handlerData.courseId = this.course.id;
// Get the title to display. We dont't have sections yet.
this.title = courseFormatDelegate.getCourseTitle(this.course);

13
src/core/course/providers/options-delegate.ts
View File

@ -91,12 +91,6 @@ export interface CoreCourseOptionsHandlerData {
*/
title: string;
/**
* Name of the icon to display for the handler.
* @type {string}
*/
icon: string;
/**
* Class to add to the displayed handler.
* @type {string}
@ -104,11 +98,10 @@ export interface CoreCourseOptionsHandlerData {
class?: string;
/**
* Action to perform when the handler is clicked.
*
* @param {any} course The course.
* The component to render the handler. It must be the component class, not the name or an instance.
* When the component is created, it will receive the courseId as input.
*/
action(course: any): void;
component: any;
}
/**

12
src/core/user/components/components.module.ts
View File

@ -16,23 +16,33 @@ import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from 'ionic-angular';
import { TranslateModule } from '@ngx-translate/core';
import { CoreUserParticipantsComponent } from './participants/participants';
import { CoreUserProfileFieldComponent } from './user-profile-field/user-profile-field';
import { CoreComponentsModule } from '../../../components/components.module';
import { CoreDirectivesModule } from '../../../directives/directives.module';
import { CorePipesModule } from '../../../pipes/pipes.module';
@NgModule({
declarations: [
CoreUserParticipantsComponent,
CoreUserProfileFieldComponent
],
imports: [
CommonModule,
IonicModule,
TranslateModule.forChild(),
CoreComponentsModule
CoreComponentsModule,
CoreDirectivesModule,
CorePipesModule
],
providers: [
],
exports: [
CoreUserParticipantsComponent,
CoreUserProfileFieldComponent
],
entryComponents: [
CoreUserParticipantsComponent
]
})
export class CoreUserComponentsModule {}

25
src/core/user/components/participants/participants.html 100644
View File

@ -0,0 +1,25 @@
<core-split-view>
<ion-content>
<ion-refresher [enabled]="participantsLoaded" (ionRefresh)="refreshParticipants($event)">
<ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
</ion-refresher>
<core-loading [hideUntil]="participantsLoaded">
<core-empty-box *ngIf="participants && participants.length == 0" icon="person" [message]="'core.user.noparticipants' | translate">
</core-empty-box>
<ion-list *ngIf="participants && participants.length > 0">
<a ion-item text-wrap *ngFor="let participant of participants" [title]="participant.fullname" (click)="gotoParticipant(participant.id)" [class.core-split-item-selected]="participant.id == participantId">
<ion-avatar item-start>
<img src="{{participant.profileimageurl}}" [alt]="'core.pictureof' | translate:{$a: participant.fullname}" core-external-content>
</ion-avatar>
<h2><core-format-text [text]="participant.fullname"></core-format-text></h2>
<p *ngIf="participant.lastaccess"><strong>{{ 'core.lastaccess' | translate }}: </strong>{{ participant.lastaccess * 1000 | coreFormatDate:"dfmediumdate"}}</p>
</a>
</ion-list>
<ion-infinite-scroll [enabled]="canLoadMore" (ionInfinite)="$event.waitFor(fetchData())">
<ion-infinite-scroll-content></ion-infinite-scroll-content>
</ion-infinite-scroll>
</core-loading>
</ion-content>
</core-split-view>

103
src/core/user/components/participants/participants.ts 100644
View File

@ -0,0 +1,103 @@
// (C) Copyright 2015 Martin Dougiamas
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
import { Component, ViewChild, Input, OnInit } from '@angular/core';
import { Content, NavParams } from 'ionic-angular';
import { CoreUserProvider } from '../../providers/user';
import { CoreDomUtilsProvider } from '../../../../providers/utils/dom';
import { CoreSplitViewComponent } from '../../../../components/split-view/split-view';
/**
* Component that displays the list of course participants.
*/
@Component({
selector: 'core-user-participants',
templateUrl: 'participants.html',
})
export class CoreUserParticipantsComponent implements OnInit {
@ViewChild(Content) content: Content;
@ViewChild(CoreSplitViewComponent) splitviewCtrl: CoreSplitViewComponent;
@Input() courseId: number;
participantId: number;
participants = [];
canLoadMore = false;
participantsLoaded = false;
constructor(private userProvider: CoreUserProvider, private domUtils: CoreDomUtilsProvider) { }
/**
* View loaded.
*/
ngOnInit(): void {
// Get first participants.
this.fetchData(true).then(() => {
if (!this.participantId && this.splitviewCtrl.isOn() && this.participants.length > 0) {
// Take first and load it.
this.gotoParticipant(this.participants[0].id);
}
// Add log in Moodle.
this.userProvider.logView(this.courseId).catch(() => {
// Ignore errors.
});
}).finally(() => {
this.participantsLoaded = true;
});
}
/**
* Fetch all the data required for the view.
*
* @param {boolean} [refresh] Empty events array first.
* @return {Promise<any>} Resolved when done.
*/
fetchData(refresh: boolean = false): Promise<any> {
const firstToGet = refresh ? 0 : this.participants.length;
return this.userProvider.getParticipants(this.courseId, firstToGet).then((data) => {
if (refresh) {
this.participants = data.participants;
} else {
this.participants = this.participants.concat(data.participants);
}
this.canLoadMore = data.canLoadMore;
}).catch((error) => {
this.domUtils.showErrorModalDefault(error, 'Error loading participants');
this.canLoadMore = false; // Set to false to prevent infinite calls with infinite-loading.
});
}
/**
* Refresh data.
*
* @param {any} refresher Refresher.
*/
refreshParticipants(refresher: any): void {
this.userProvider.invalidateParticipantsList(this.courseId).finally(() => {
this.fetchData(true).finally(() => {
refresher.complete();
});
});
}
/**
* Navigate to a particular user profile.
* @param {number} userId User Id where to navigate.
*/
gotoParticipant(userId: number): void {
this.participantId = userId;
this.splitviewCtrl.push('CoreUserProfilePage', {userId: userId, courseId: this.courseId});
}
}

26
src/core/user/pages/participants/participants.html
View File

@ -3,28 +3,4 @@
<ion-title>{{ 'core.user.participants' | translate }}</ion-title>
</ion-navbar>
</ion-header>
<core-split-view>
<ion-content>
<ion-refresher [enabled]="participantsLoaded" (ionRefresh)="refreshParticipants($event)">
<ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
</ion-refresher>
<core-loading [hideUntil]="participantsLoaded">
<core-empty-box *ngIf="participants && participants.length == 0" icon="person" [message]="'core.user.noparticipants' | translate">
</core-empty-box>
<ion-list *ngIf="participants && participants.length > 0">
<a ion-item text-wrap *ngFor="let participant of participants" [title]="participant.fullname" (click)="gotoParticipant(participant.id)" [class.core-split-item-selected]="participant.id == participantId">
<ion-avatar item-start>
<img src="{{participant.profileimageurl}}" [alt]="'core.pictureof' | translate:{$a: participant.fullname}" core-external-content>
</ion-avatar>
<h2><core-format-text [text]="participant.fullname"></core-format-text></h2>
<p *ngIf="participant.lastaccess"><strong>{{ 'core.lastaccess' | translate }}: </strong>{{ participant.lastaccess * 1000 | coreFormatDate:"dfmediumdate"}}</p>
</a>
</ion-list>
<ion-infinite-scroll [enabled]="canLoadMore" (ionInfinite)="$event.waitFor(fetchData())">
<ion-infinite-scroll-content></ion-infinite-scroll-content>
</ion-infinite-scroll>
</core-loading>
</ion-content>
</core-split-view>
<core-user-participants [courseId]="courseId"></core-user-participants>

8
src/core/user/pages/participants/participants.module.ts
View File

@ -15,9 +15,7 @@
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { TranslateModule } from '@ngx-translate/core';
import { CoreComponentsModule } from '../../../../components/components.module';
import { CoreDirectivesModule } from '../../../../directives/directives.module';
import { CorePipesModule } from '../../../../pipes/pipes.module';
import { CoreUserComponentsModule } from '../../components/components.module';
import { CoreUserParticipantsPage } from './participants';
@NgModule({
@ -25,9 +23,7 @@ import { CoreUserParticipantsPage } from './participants';
CoreUserParticipantsPage,
],
imports: [
CoreComponentsModule,
CoreDirectivesModule,
CorePipesModule,
CoreUserComponentsModule,
IonicPageModule.forChild(CoreUserParticipantsPage),
TranslateModule.forChild()
],

78
src/core/user/pages/participants/participants.ts
View File

@ -12,11 +12,8 @@
// See the License for the specific language governing permissions and
// limitations under the License.
import { Component, ViewChild } from '@angular/core';
import { IonicPage, Content, NavParams } from 'ionic-angular';
import { CoreUserProvider } from '../../providers/user';
import { CoreDomUtilsProvider } from '../../../../providers/utils/dom';
import { CoreSplitViewComponent } from '../../../../components/split-view/split-view';
import { Component } from '@angular/core';
import { IonicPage, NavParams } from 'ionic-angular';
/**
* Page that displays the list of course participants.
@ -27,78 +24,9 @@ import { CoreSplitViewComponent } from '../../../../components/split-view/split-
templateUrl: 'participants.html',
})
export class CoreUserParticipantsPage {
@ViewChild(Content) content: Content;
@ViewChild(CoreSplitViewComponent) splitviewCtrl: CoreSplitViewComponent;
courseId: number;
participantId: number;
participants = [];
canLoadMore = false;
participantsLoaded = false;
constructor(private userProvider: CoreUserProvider, private domUtils: CoreDomUtilsProvider,
navParams: NavParams) {
constructor(navParams: NavParams) {
this.courseId = navParams.get('courseId');
}
/**
* View loaded.
*/
ionViewDidLoad(): void {
// Get first participants.
this.fetchData(true).then(() => {
if (!this.participantId && this.splitviewCtrl.isOn() && this.participants.length > 0) {
// Take first and load it.
this.gotoParticipant(this.participants[0].id);
}
// Add log in Moodle.
this.userProvider.logView(this.courseId);
}).finally(() => {
this.participantsLoaded = true;
});
}
/**
* Fetch all the data required for the view.
*
* @param {boolean} [refresh] Empty events array first.
* @return {Promise<any>} Resolved when done.
*/
fetchData(refresh: boolean = false): Promise<any> {
const firstToGet = refresh ? 0 : this.participants.length;
return this.userProvider.getParticipants(this.courseId, firstToGet).then((data) => {
if (refresh) {
this.participants = data.participants;
} else {
this.participants = this.participants.concat(data.participants);
}
this.canLoadMore = data.canLoadMore;
}).catch((error) => {
this.domUtils.showErrorModalDefault(error, 'Error loading participants');
this.canLoadMore = false; // Set to false to prevent infinite calls with infinite-loading.
});
}
/**
* Refresh data.
*
* @param {any} refresher Refresher.
*/
refreshParticipants(refresher: any): void {
this.userProvider.invalidateParticipantsList(this.courseId).finally(() => {
this.fetchData(true).finally(() => {
refresher.complete();
});
});
}
/**
* Navigate to a particular user profile.
* @param {number} userId User Id where to navigate.
*/
gotoParticipant(userId: number): void {
this.participantId = userId;
this.splitviewCtrl.push('CoreUserProfilePage', {userId: userId, courseId: this.courseId});
}
}

10
src/core/user/providers/course-option-handler.ts
View File

@ -18,6 +18,7 @@ import { CoreCourseOptionsHandler, CoreCourseOptionsHandlerData } from '../../co
import { CoreCourseProvider } from '../../course/providers/course';
import { CoreUserProvider } from './user';
import { CoreLoginHelperProvider } from '../../login/providers/helper';
import { CoreUserParticipantsComponent } from '../components/participants/participants';
/**
* Course nav handler.
@ -102,16 +103,9 @@ export class CoreUserParticipantsCourseOptionHandler implements CoreCourseOption
*/
getDisplayData(): CoreCourseOptionsHandlerData {
return {
icon: 'person',
title: 'core.user.participants',
class: 'core-user-participants-handler',
action: (course: any): void => {
const pageParams = {
courseId: course.id
};
// Always use redirect to make it the new history root (to avoid "loops" in history).
this.loginHelper.redirect('CoreUserParticipantsPage', pageParams);
}
component: CoreUserParticipantsComponent
};
}
}

2
src/core/user/user.module.ts
View File

@ -25,11 +25,13 @@ import { CoreUserProfileLinkHandler } from './providers/user-link-handler';
import { CoreUserParticipantsCourseOptionHandler } from './providers/course-option-handler';
import { CoreUserParticipantsLinkHandler } from './providers/participants-link-handler';
import { CoreCourseOptionsDelegate } from '../course/providers/options-delegate';
import { CoreUserComponentsModule } from './components/components.module';
@NgModule({
declarations: [
],
imports: [
CoreUserComponentsModule
],
providers: [
CoreUserDelegate,