From 55682818ff0f17145132b1ecd1c0b79933eaad40 Mon Sep 17 00:00:00 2001 From: Dani Palou Date: Tue, 24 Jul 2018 10:53:33 +0200 Subject: [PATCH 1/2] MOBILE-2479 siteplugins: Pass all inputs and outputs to components --- src/core/course/components/format/format.ts | 2 ++ .../formats/singleactivity/components/singleactivity.ts | 6 +++++- .../siteplugins/components/course-format/course-format.ts | 8 ++++++-- .../components/user-profile-field/user-profile-field.ts | 7 +++++-- .../components/user-profile-field/user-profile-field.ts | 1 + 5 files changed, 19 insertions(+), 5 deletions(-) diff --git a/src/core/course/components/format/format.ts b/src/core/course/components/format/format.ts index 9a2fd80b8..df18d3ef3 100644 --- a/src/core/course/components/format/format.ts +++ b/src/core/course/components/format/format.ts @@ -186,6 +186,8 @@ export class CoreCourseFormatComponent implements OnInit, OnChanges, OnDestroy { this.data.initialSectionId = this.initialSectionId; this.data.initialSectionNumber = this.initialSectionNumber; this.data.downloadEnabled = this.downloadEnabled; + this.data.moduleId = this.moduleId; + this.data.completionChanged = this.completionChanged; } /** diff --git a/src/core/course/formats/singleactivity/components/singleactivity.ts b/src/core/course/formats/singleactivity/components/singleactivity.ts index 7f1ac6dab..d00223548 100644 --- a/src/core/course/formats/singleactivity/components/singleactivity.ts +++ b/src/core/course/formats/singleactivity/components/singleactivity.ts @@ -12,7 +12,7 @@ // See the License for the specific language governing permissions and // limitations under the License. -import { Component, Input, OnChanges, SimpleChange, ViewChild, Injector } from '@angular/core'; +import { Component, Input, OnChanges, SimpleChange, ViewChild, Injector, Output, EventEmitter } from '@angular/core'; import { CoreCourseModuleDelegate } from '../../../providers/module-delegate'; import { CoreCourseUnsupportedModuleComponent } from '../../../components/unsupported-module/unsupported-module'; import { CoreDynamicComponent } from '../../../../../components/dynamic-component/dynamic-component'; @@ -30,6 +30,10 @@ export class CoreCourseFormatSingleActivityComponent 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). + @Input() moduleId?: number; // The module ID to scroll to. Must be inside the initial selected section. + @Output() completionChanged?: EventEmitter; // Will emit an event when any module completion changes. @ViewChild(CoreDynamicComponent) dynamicComponent: CoreDynamicComponent; diff --git a/src/core/siteplugins/components/course-format/course-format.ts b/src/core/siteplugins/components/course-format/course-format.ts index e1bf8de9e..941cdb279 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, OnChanges, Input, ViewChild } from '@angular/core'; +import { Component, OnChanges, Input, ViewChild, Output, EventEmitter } from '@angular/core'; import { CoreSitePluginsProvider } from '../../providers/siteplugins'; import { CoreSitePluginsPluginContentComponent } from '../plugin-content/plugin-content'; @@ -29,6 +29,8 @@ export class CoreSitePluginsCourseFormatComponent implements OnChanges { @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). + @Input() moduleId?: number; // The module ID to scroll to. Must be inside the initial selected section. + @Output() completionChanged?: EventEmitter; // Will emit an event when any module completion changes. @ViewChild(CoreSitePluginsPluginContentComponent) content: CoreSitePluginsPluginContentComponent; @@ -65,7 +67,9 @@ export class CoreSitePluginsCourseFormatComponent implements OnChanges { sections: this.sections, downloadEnabled: this.downloadEnabled, initialSectionId: this.initialSectionId, - initialSectionNumber: this.initialSectionNumber + initialSectionNumber: this.initialSectionNumber, + moduleId: this.moduleId, + completionChanged: this.completionChanged }; } } diff --git a/src/core/siteplugins/components/user-profile-field/user-profile-field.ts b/src/core/siteplugins/components/user-profile-field/user-profile-field.ts index 9308f7355..46e4ff7af 100644 --- a/src/core/siteplugins/components/user-profile-field/user-profile-field.ts +++ b/src/core/siteplugins/components/user-profile-field/user-profile-field.ts @@ -15,6 +15,7 @@ import { Component, OnInit, Input } from '@angular/core'; import { CoreSitePluginsProvider } from '../../providers/siteplugins'; import { CoreSitePluginsCompileInitComponent } from '../../classes/compile-init-component'; +import { FormGroup } from '@angular/forms'; /** * Component that displays a user profile field created using a site plugin. @@ -25,9 +26,10 @@ import { CoreSitePluginsCompileInitComponent } from '../../classes/compile-init- }) export class CoreSitePluginsUserProfileFieldComponent extends CoreSitePluginsCompileInitComponent implements OnInit { @Input() field: any; // The profile field to be rendered. - @Input() signup = false; // True if editing the field in signup. Defaults to false. @Input() edit = false; // True if editing the field. Defaults to false. - @Input() form?: any; // Form where to add the form control. Required if edit=true or signup=true. + @Input() disabled = false; // True if disabled. Defaults to false. + @Input() form?: FormGroup; // Form where to add the form control. + @Input() signup = false; // True if editing the field in signup. Defaults to false. @Input() registerAuth?: string; // Register auth method. E.g. 'email'. constructor(sitePluginsProvider: CoreSitePluginsProvider) { @@ -44,6 +46,7 @@ export class CoreSitePluginsUserProfileFieldComponent extends CoreSitePluginsCom field: this.field, signup: this.signup, edit: this.edit, + disabled: this.disabled, form: this.form, registerAuth: this.registerAuth }; diff --git a/src/core/user/components/user-profile-field/user-profile-field.ts b/src/core/user/components/user-profile-field/user-profile-field.ts index 7827192e5..30d54b753 100644 --- a/src/core/user/components/user-profile-field/user-profile-field.ts +++ b/src/core/user/components/user-profile-field/user-profile-field.ts @@ -50,6 +50,7 @@ export class CoreUserProfileFieldComponent implements OnInit { this.data.signup = this.utilsProvider.isTrueOrOne(this.signup); this.data.disabled = this.utilsProvider.isTrueOrOne(this.field.locked); this.data.form = this.form; + this.data.registerAuth = this.registerAuth; } } } From 6fdb5528ed076e22ea1a67b7a502a0bd363149a0 Mon Sep 17 00:00:00 2001 From: Dani Palou Date: Thu, 26 Jul 2018 10:42:31 +0200 Subject: [PATCH 2/2] MOBILE-2479 course: Pass course format instance to site plugins This will allow site plugins to create a view exactly like topics/weeks without having to use Javascript --- src/core/course/components/format/format.ts | 3 +++ .../components/course-format/course-format.ts | 9 ++++++++- 2 files changed, 11 insertions(+), 1 deletion(-) diff --git a/src/core/course/components/format/format.ts b/src/core/course/components/format/format.ts index df18d3ef3..9bbb939b8 100644 --- a/src/core/course/components/format/format.ts +++ b/src/core/course/components/format/format.ts @@ -77,6 +77,9 @@ export class CoreCourseFormatComponent implements OnInit, OnChanges, OnDestroy { this.selectOptions.title = translate.instant('core.course.sections'); this.completionChanged = new EventEmitter(); + // Pass this instance to all components so they can use its methods and properties. + this.data.coreCourseFormatComponent = this; + // Listen for section status changes. this.sectionStatusObserver = eventsProvider.on(CoreEventsProvider.SECTION_STATUS_CHANGED, (data) => { if (this.downloadEnabled && this.sections && this.sections.length && this.course && data.sectionId && diff --git a/src/core/siteplugins/components/course-format/course-format.ts b/src/core/siteplugins/components/course-format/course-format.ts index 941cdb279..93aaad071 100644 --- a/src/core/siteplugins/components/course-format/course-format.ts +++ b/src/core/siteplugins/components/course-format/course-format.ts @@ -15,6 +15,7 @@ import { Component, OnChanges, Input, ViewChild, Output, EventEmitter } from '@angular/core'; import { CoreSitePluginsProvider } from '../../providers/siteplugins'; import { CoreSitePluginsPluginContentComponent } from '../plugin-content/plugin-content'; +import { CoreCourseFormatComponent } from '@core/course/components/format/format'; /** * Component that displays the index of a course format site plugin. @@ -32,6 +33,11 @@ export class CoreSitePluginsCourseFormatComponent implements OnChanges { @Input() moduleId?: number; // The module ID to scroll to. Must be inside the initial selected section. @Output() completionChanged?: EventEmitter; // Will emit an event when any module completion changes. + // Special input, allows access to the parent instance properties and methods. + // Please notice that all the other inputs/outputs are also accessible through this instance, so they could be removed. + // However, we decided to keep them to support ngOnChanges and to make templates easier to read. + @Input() coreCourseFormatComponent: CoreCourseFormatComponent; + @ViewChild(CoreSitePluginsPluginContentComponent) content: CoreSitePluginsPluginContentComponent; component: string; @@ -69,7 +75,8 @@ export class CoreSitePluginsCourseFormatComponent implements OnChanges { initialSectionId: this.initialSectionId, initialSectionNumber: this.initialSectionNumber, moduleId: this.moduleId, - completionChanged: this.completionChanged + completionChanged: this.completionChanged, + coreCourseFormatComponent: this.coreCourseFormatComponent }; } }