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

MOBILE-2335 book: Show download button in section page

Browse Source
This commit is contained in:
Dani Palou 2018-02-06 08:43:46 +01:00
parent 104beb7a1b
commit 00ef0fa0a9
6 changed files with 121 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/addon/mod/book/providers/module-handler.ts
View File

@ -50,6 +50,7 @@ export class AddonModBookModuleHandler implements CoreCourseModuleHandler {
icon: this.courseProvider.getModuleIconSrc('book'),
title: module.name,
class: 'addon-mod_book-handler',
showDownloadButton: true,
action(event: Event, navCtrl: NavController, module: any, courseId: number, options: NavOptions): void {
navCtrl.push('AddonModBookIndexPage', {module: module, courseId: courseId}, options);
}

4
src/addon/mod/book/providers/prefetch-handler.ts
View File

@ -45,7 +45,9 @@ export class AddonModBookPrefetchHandler extends CoreCourseModulePrefetchHandler
const promises = [];
promises.push(super.downloadOrPrefetch(module, courseId, prefetch));
promises.push(this.bookProvider.getBook(courseId, module.id));
promises.push(this.bookProvider.getBook(courseId, module.id).catch(() => {
// Ignore errors since this WS isn't available in some Moodle versions.
}));
return Promise.all(promises);
}

2
src/core/course/components/format/format.html
View File

@ -56,7 +56,7 @@
</ion-item>
<ng-container *ngFor="let module of section.modules">
<core-course-module *ngIf="module.visibleoncoursepage !== 0" [module]="module" [courseId]="course.id" (completionChanged)="completionChanged.emit()"></core-course-module>
<core-course-module *ngIf="module.visibleoncoursepage !== 0" [module]="module" [courseId]="course.id" [downloadEnabled]="downloadEnabled" (completionChanged)="completionChanged.emit()"></core-course-module>
</ng-container>
</section>
</ng-template>

20
src/core/course/components/module/module.html
View File

@ -4,14 +4,28 @@
<core-format-text [text]="module.handlerData.title"></core-format-text>
<div float-end *ngIf="module.uservisible !== false && ((module.handlerData.buttons && module.handlerData.buttons.length > 0) || spinner || module.completionstatus)" class="buttons core-module-buttons" [ngClass]="{'core-button-completion': module.completionstatus}">
<!-- Buttons. -->
<div float-end *ngIf="module.uservisible !== false" class="buttons core-module-buttons" [ngClass]="{'core-button-completion': module.completionstatus}">
<!-- Module completion. -->
<core-course-module-completion *ngIf="module.completionstatus" [completion]="module.completionstatus" [moduleName]="module.name" (completionChanged)="completionChanged.emit()"></core-course-module-completion>
<button ion-button icon-only clear *ngFor="let button of module.handlerData.buttons" [hidden]="button.hidden" (click)="buttonClicked($event, button)" color="dark" class="core-animate-show-hide" [attr.aria-label]="button.label | translate">
<!-- Download button. -->
<button *ngIf="downloadEnabled && showDownload" [hidden]="spinner || module.handlerData.spinner" ion-button icon-only clear (click)="download($event, false)" color="dark" class="core-animate-show-hide" [attr.aria-label]="'core.download' | translate">
<ion-icon name="cloud-download"></ion-icon>
</button>
<!-- Refresh button. -->
<button *ngIf="downloadEnabled && showRefresh" [hidden]="spinner || module.handlerData.spinner" ion-button icon-only clear (click)="download($event, true)" color="dark" class="core-animate-show-hide" [attr.aria-label]="'core.refresh' | translate">
<ion-icon name="refresh"></ion-icon>
</button>
<!-- Buttons defined by the module handler. -->
<button ion-button icon-only clear *ngFor="let button of module.handlerData.buttons" [hidden]="button.hidden || spinner || module.handlerData.spinner" (click)="buttonClicked($event, button)" color="dark" class="core-animate-show-hide" [attr.aria-label]="button.label | translate">
<ion-icon [name]="button.icon" [ios]="button.iosIcon || ''" [md]="button.mdIcon || ''"></ion-icon>
</button>
<ion-spinner *ngIf="module.handlerData.spinner" class="core-animate-show-hide"></ion-spinner>
<!-- Spinner. -->
<ion-spinner *ngIf="spinner || module.handlerData.spinner" class="core-animate-show-hide"></ion-spinner>
</div>
<div *ngIf="module.visible === 0 || module.availabilityinfo">

94
src/core/course/components/module/module.ts
View File

@ -12,9 +12,15 @@
// See the License for the specific language governing permissions and
// limitations under the License.
import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core';
import { Component, Input, Output, EventEmitter, OnInit, OnDestroy } from '@angular/core';
import { NavController } from 'ionic-angular';
import { CoreEventsProvider } from '../../../../providers/events';
import { CoreSitesProvider } from '../../../../providers/sites';
import { CoreDomUtilsProvider } from '../../../../providers/utils/dom';
import { CoreCourseHelperProvider } from '../../providers/helper';
import { CoreCourseModuleHandlerButton } from '../../providers/module-delegate';
import { CoreCourseModulePrefetchDelegate, CoreCourseModulePrefetchHandler } from '../../providers/module-prefetch-delegate';
import { CoreConstants } from '../../../constants';
/**
* Component to display a module entry in a list of modules.
@ -27,12 +33,43 @@ import { CoreCourseModuleHandlerButton } from '../../providers/module-delegate';
selector: 'core-course-module',
templateUrl: 'module.html'
})
export class CoreCourseModuleComponent implements OnInit {
export class CoreCourseModuleComponent implements OnInit, OnDestroy {
@Input() module: any; // The module to render.
@Input() courseId: number; // The course the module belongs to.
@Input('downloadEnabled') set enabled(value: boolean) {
this.downloadEnabled = value;
if (this.module.handlerData.showDownloadButton && this.downloadEnabled && !this.statusObserver) {
// First time that the download is enabled. Initialize the data.
this.spinner = true; // Show spinner while calculating the status.
this.prefetchHandler = this.prefetchDelegate.getPrefetchHandlerFor(this.module);
// Get current status to decide which icon should be shown.
this.prefetchDelegate.getModuleStatus(this.module, this.courseId).then(this.showStatus.bind(this));
// Listen for changes on this module status.
this.statusObserver = this.eventsProvider.on(CoreEventsProvider.PACKAGE_STATUS_CHANGED, (data) => {
if (data.componentId === this.module.id && this.prefetchHandler &&
data.component === this.prefetchHandler.component) {
this.showStatus(data.status);
}
}, this.sitesProvider.getCurrentSiteId());
}
}
@Output() completionChanged?: EventEmitter<void>; // Will emit an event when the module completion changes.
constructor(private navCtrl: NavController) {
showDownload: boolean; // Whether to display the download button.
showRefresh: boolean; // Whether to display the refresh button.
spinner: boolean; // Whether to display a spinner.
downloadEnabled: boolean; // Whether the download of sections and modules is enabled.
protected prefetchHandler: CoreCourseModulePrefetchHandler;
protected statusObserver;
constructor(protected navCtrl: NavController, protected prefetchDelegate: CoreCourseModulePrefetchDelegate,
protected domUtils: CoreDomUtilsProvider, protected courseHelper: CoreCourseHelperProvider,
protected eventsProvider: CoreEventsProvider, protected sitesProvider: CoreSitesProvider) {
this.completionChanged = new EventEmitter();
}
@ -68,4 +105,55 @@ export class CoreCourseModuleComponent implements OnInit {
button.action(event, this.navCtrl, this.module, this.courseId);
}
}
/**
* Download the module.
*
* @param {Event} event Click event.
* @param {boolean} refresh Whether it's refreshing.
*/
download(event: Event, refresh: boolean): void {
event.preventDefault();
event.stopPropagation();
if (!this.prefetchHandler) {
return;
}
// Show spinner since this operation might take a while.
this.spinner = true;
// Get download size to ask for confirm if it's high.
this.prefetchHandler.getDownloadSize(module, this.courseId).then((size) => {
this.courseHelper.prefetchModule(this.prefetchHandler, this.module, size, this.courseId, refresh).catch((error) => {
// Error or cancelled.
this.spinner = false;
});
}).catch((error) => {
// Error getting download size, hide spinner.
this.spinner = false;
this.domUtils.showErrorModalDefault(error, 'core.errordownloading', true);
});
}
/**
* Show download buttons according to module status.
*
* @param {string} status Module status.
*/
protected showStatus(status: string): void {
if (status) {
this.spinner = status === CoreConstants.DOWNLOADING;
this.showDownload = status === CoreConstants.NOT_DOWNLOADED;
this.showRefresh = status === CoreConstants.OUTDATED ||
(!this.prefetchDelegate.canCheckUpdates() && status === CoreConstants.DOWNLOADED);
}
}
/**
* Component destroyed.
*/
ngOnDestroy(): void {
this.statusObserver && this.statusObserver.off();
}
}

8
src/core/course/providers/module-delegate.ts
View File

@ -68,6 +68,14 @@ export interface CoreCourseModuleHandlerData {
*/
class?: string;
/**
* Whether to display a button to download/refresh the module if it's downloadable.
* If it's set to true, the app will show a download/refresh button when needed and will handle the download of the
* module using CoreCourseModulePrefetchDelegate.
* @type {boolean}
*/
showDownloadButton?: boolean;
/**
* The buttons to display in the module item.
* @type {CoreCourseModuleHandlerButton[]}