From 6979f1834380103b4a2005d8c6c8555fe3098108 Mon Sep 17 00:00:00 2001 From: Dani Palou Date: Fri, 15 Jun 2018 08:22:13 +0200 Subject: [PATCH] MOBILE-2428 siteplugins: Pass inputs to course format views --- .../core-siteplugins-course-format.html | 2 +- .../components/course-format/course-format.ts | 41 +++++++++++++------ .../plugin-content/plugin-content.ts | 29 +++++++++++-- 3 files changed, 54 insertions(+), 18 deletions(-) diff --git a/src/core/siteplugins/components/course-format/core-siteplugins-course-format.html b/src/core/siteplugins/components/course-format/core-siteplugins-course-format.html index cd6008506..db841ebb6 100644 --- a/src/core/siteplugins/components/course-format/core-siteplugins-course-format.html +++ b/src/core/siteplugins/components/course-format/core-siteplugins-course-format.html @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/core/siteplugins/components/course-format/course-format.ts b/src/core/siteplugins/components/course-format/course-format.ts index 87b37a4f0..e1bf8de9e 100644 --- a/src/core/siteplugins/components/course-format/course-format.ts +++ b/src/core/siteplugins/components/course-format/course-format.ts @@ -12,7 +12,7 @@ // See the License for the specific language governing permissions and // limitations under the License. -import { Component, OnInit, Input, ViewChild } from '@angular/core'; +import { Component, OnChanges, Input, ViewChild } from '@angular/core'; import { CoreSitePluginsProvider } from '../../providers/siteplugins'; import { CoreSitePluginsPluginContentComponent } from '../plugin-content/plugin-content'; @@ -23,10 +23,12 @@ import { CoreSitePluginsPluginContentComponent } from '../plugin-content/plugin- selector: 'core-site-plugins-course-format', templateUrl: 'core-siteplugins-course-format.html', }) -export class CoreSitePluginsCourseFormatComponent implements OnInit { +export class CoreSitePluginsCourseFormatComponent implements OnChanges { @Input() course: any; // The course to render. @Input() sections: any[]; // List of course sections. @Input() downloadEnabled?: boolean; // Whether the download of sections and modules is enabled. + @Input() initialSectionId?: number; // The section to load first (by ID). + @Input() initialSectionNumber?: number; // The section to load first (by number). @ViewChild(CoreSitePluginsPluginContentComponent) content: CoreSitePluginsPluginContentComponent; @@ -34,24 +36,37 @@ export class CoreSitePluginsCourseFormatComponent implements OnInit { method: string; args: any; initResult: any; + data: any; constructor(protected sitePluginsProvider: CoreSitePluginsProvider) { } /** - * Component being initialized. + * Detect changes on input properties. */ - ngOnInit(): void { + ngOnChanges(): void { if (this.course && this.course.format) { - const handler = this.sitePluginsProvider.getSitePluginHandler(this.course.format); - if (handler) { - this.component = handler.plugin.component; - this.method = handler.handlerSchema.method; - this.args = { - courseid: this.course.id, - downloadenabled: this.downloadEnabled - }; - this.initResult = handler.initResult; + if (!this.component) { + // Initialize the data. + const handler = this.sitePluginsProvider.getSitePluginHandler(this.course.format); + if (handler) { + this.component = handler.plugin.component; + this.method = handler.handlerSchema.method; + this.args = { + courseid: this.course.id, + downloadenabled: this.downloadEnabled + }; + this.initResult = handler.initResult; + } } + + // Pass input data to the component. + this.data = { + course: this.course, + sections: this.sections, + downloadEnabled: this.downloadEnabled, + initialSectionId: this.initialSectionId, + initialSectionNumber: this.initialSectionNumber + }; } } diff --git a/src/core/siteplugins/components/plugin-content/plugin-content.ts b/src/core/siteplugins/components/plugin-content/plugin-content.ts index 21b9f8c2f..60f8eca1e 100644 --- a/src/core/siteplugins/components/plugin-content/plugin-content.ts +++ b/src/core/siteplugins/components/plugin-content/plugin-content.ts @@ -12,7 +12,7 @@ // See the License for the specific language governing permissions and // limitations under the License. -import { Component, OnInit, Input, Output, EventEmitter, Optional } from '@angular/core'; +import { Component, OnInit, Input, Output, EventEmitter, Optional, DoCheck, KeyValueDiffers } from '@angular/core'; import { NavController } from 'ionic-angular'; import { CoreDomUtilsProvider } from '@providers/utils/dom'; import { CoreSitePluginsProvider } from '../../providers/siteplugins'; @@ -25,11 +25,12 @@ import { Subject } from 'rxjs'; selector: 'core-site-plugins-plugin-content', templateUrl: 'core-siteplugins-plugin-content.html', }) -export class CoreSitePluginsPluginContentComponent implements OnInit { +export class CoreSitePluginsPluginContentComponent implements OnInit, DoCheck { @Input() component: string; @Input() method: string; @Input() args: any; @Input() initResult: any; // Result of the init WS call of the handler. + @Input() data: any; // Data to pass to the component. @Output() onContentLoaded?: EventEmitter; // Emits an event when the content is loaded. @Output() onLoadingContent?: EventEmitter; // Emits an event when starts to load the content. @@ -40,11 +41,14 @@ export class CoreSitePluginsPluginContentComponent implements OnInit { invalidateObservable: Subject; // An observable to notify observers when to invalidate data. jsData: any; // Data to pass to the component. + protected differ: any; // To detect changes in the data input. + constructor(protected domUtils: CoreDomUtilsProvider, protected sitePluginsProvider: CoreSitePluginsProvider, - @Optional() protected navCtrl: NavController) { + @Optional() protected navCtrl: NavController, differs: KeyValueDiffers) { this.onContentLoaded = new EventEmitter(); this.onLoadingContent = new EventEmitter(); this.invalidateObservable = new Subject(); + this.differ = differs.find([]).create(); } /** @@ -54,6 +58,21 @@ export class CoreSitePluginsPluginContentComponent implements OnInit { this.fetchContent(); } + /** + * Detect and act upon changes that Angular can’t or won’t detect on its own (objects and arrays). + */ + ngDoCheck(): void { + if (!this.data || !this.jsData) { + return; + } + + // Check if there's any change in the data object. + const changes = this.differ.diff(this.data); + if (changes) { + this.jsData = Object.assign(this.jsData, this.data); + } + } + /** * Fetches the content to render. * @@ -67,7 +86,9 @@ export class CoreSitePluginsPluginContentComponent implements OnInit { this.content = result.templates.length ? result.templates[0].html : ''; // Load first template. this.javascript = result.javascript; this.otherData = result.otherdata; - this.jsData = this.sitePluginsProvider.createDataForJS(this.initResult, result); + this.data = this.data || {}; + + this.jsData = Object.assign(this.data, this.sitePluginsProvider.createDataForJS(this.initResult, result)); // Pass some methods as jsData so they can be called from the template too. this.jsData.openContent = this.openContent.bind(this);