MOBILE-2376 siteplugins: Support question types

main
Dani Palou 2018-05-08 13:18:37 +02:00
parent 3c57fb364f
commit 02fd27d3d4
9 changed files with 211 additions and 20 deletions

View File

@ -12,7 +12,7 @@
// See the License for the specific language governing permissions and
// limitations under the License.
import { Component, Input, EventEmitter } from '@angular/core';
import { Component, Input, Output, EventEmitter } from '@angular/core';
/**
* Component to render the deferred CBM in a question.
@ -27,8 +27,8 @@ export class AddonQbehaviourDeferredCBMComponent {
@Input() componentId: number; // ID of the component the question belongs to.
@Input() attemptId: number; // Attempt ID.
@Input() offlineEnabled?: boolean | string; // Whether the question can be answered in offline.
@Input() buttonClicked: EventEmitter<any>; // Should emit an event when a behaviour button is clicked.
@Input() onAbort: EventEmitter<void>; // Should emit an event if the question should be aborted.
@Output() buttonClicked: EventEmitter<any>; // Should emit an event when a behaviour button is clicked.
@Output() onAbort: EventEmitter<void>; // Should emit an event if the question should be aborted.
constructor() {
// Nothing to do.

View File

@ -12,7 +12,7 @@
// See the License for the specific language governing permissions and
// limitations under the License.
import { Component, Input, EventEmitter } from '@angular/core';
import { Component, Input, Output, EventEmitter } from '@angular/core';
/**
* Component to render a "seen" hidden input for informationitem question behaviour.
@ -27,8 +27,8 @@ export class AddonQbehaviourInformationItemComponent {
@Input() componentId: number; // ID of the component the question belongs to.
@Input() attemptId: number; // Attempt ID.
@Input() offlineEnabled?: boolean | string; // Whether the question can be answered in offline.
@Input() buttonClicked: EventEmitter<any>; // Should emit an event when a behaviour button is clicked.
@Input() onAbort: EventEmitter<void>; // Should emit an event if the question should be aborted.
@Output() buttonClicked: EventEmitter<any>; // Should emit an event when a behaviour button is clicked.
@Output() onAbort: EventEmitter<void>; // Should emit an event if the question should be aborted.
constructor() {
// Nothing to do.

View File

@ -42,7 +42,7 @@ import { BehaviorSubject } from 'rxjs';
export class CoreCompileHtmlComponent implements OnChanges, OnDestroy {
@Input() text: string; // The HTML text to display.
@Input() javascript: string; // The Javascript to execute in the component.
@Input() jsData; // Data to pass to the fake component.
@Input() jsData: any; // Data to pass to the fake component.
// Get the container where to put the content.
@ViewChild('dynamicComponent', { read: ViewContainerRef }) container: ViewContainerRef;
@ -98,12 +98,12 @@ export class CoreCompileHtmlComponent implements OnChanges, OnDestroy {
// If there is some javascript to run, prepare the instance.
if (compileInstance.javascript) {
compileInstance.compileProvider.injectLibraries(this);
}
// Add some more components and classes.
// Always add these elements, they could be needed on component init (componentObservable).
this['ChangeDetectorRef'] = compileInstance.cdr;
this['NavController'] = compileInstance.navCtrl;
this['componentContainer'] = compileInstance.element;
}
// Add the data passed to the component.
for (const name in compileInstance.jsData) {

View File

@ -12,7 +12,7 @@
// See the License for the specific language governing permissions and
// limitations under the License.
import { Input, EventEmitter, Injector } from '@angular/core';
import { Input, Output, EventEmitter, Injector } from '@angular/core';
import { CoreLoggerProvider } from '@providers/logger';
import { CoreDomUtilsProvider } from '@providers/utils/dom';
import { CoreTextUtilsProvider } from '@providers/utils/text';
@ -27,8 +27,8 @@ export class CoreQuestionBaseComponent {
@Input() componentId: number; // ID of the component the question belongs to.
@Input() attemptId: number; // Attempt ID.
@Input() offlineEnabled?: boolean | string; // Whether the question can be answered in offline.
@Input() buttonClicked: EventEmitter<any>; // Should emit an event when a behaviour button is clicked.
@Input() onAbort: EventEmitter<void>; // Should emit an event if the question should be aborted.
@Output() buttonClicked: EventEmitter<any>; // Should emit an event when a behaviour button is clicked.
@Output() onAbort: EventEmitter<void>; // Should emit an event if the question should be aborted.
protected logger;
protected questionHelper: CoreQuestionHelperProvider;

View File

@ -0,0 +1,39 @@
// (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 { Injector } from '@angular/core';
import { CoreQuestionDefaultHandler } from '@core/question/providers/default-question-handler';
import { CoreSitePluginsQuestionComponent } from '../components/question/question';
/**
* Handler to display a question site plugin.
*/
export class CoreSitePluginsQuestionHandler extends CoreQuestionDefaultHandler {
constructor(public name: string, public type: string) {
super();
}
/**
* Return the Component to use to display the question.
* It's recommended to return the class of the component, but you can also return an instance of the component.
*
* @param {Injector} injector Injector.
* @param {any} question The question to render.
* @return {any|Promise<any>} The component (or promise resolved with component) to use, undefined if not found.
*/
getComponent(injector: Injector): any | Promise<any> {
return CoreSitePluginsQuestionComponent;
}
}

View File

@ -23,6 +23,7 @@ import { CoreSitePluginsModuleIndexComponent } from './module-index/module-index
import { CoreSitePluginsCourseOptionComponent } from './course-option/course-option';
import { CoreSitePluginsCourseFormatComponent } from './course-format/course-format';
import { CoreSitePluginsUserProfileFieldComponent } from './user-profile-field/user-profile-field';
import { CoreSitePluginsQuestionComponent } from './question/question';
@NgModule({
declarations: [
@ -30,7 +31,8 @@ import { CoreSitePluginsUserProfileFieldComponent } from './user-profile-field/u
CoreSitePluginsModuleIndexComponent,
CoreSitePluginsCourseOptionComponent,
CoreSitePluginsCourseFormatComponent,
CoreSitePluginsUserProfileFieldComponent
CoreSitePluginsUserProfileFieldComponent,
CoreSitePluginsQuestionComponent
],
imports: [
CommonModule,
@ -46,13 +48,15 @@ import { CoreSitePluginsUserProfileFieldComponent } from './user-profile-field/u
CoreSitePluginsModuleIndexComponent,
CoreSitePluginsCourseOptionComponent,
CoreSitePluginsCourseFormatComponent,
CoreSitePluginsUserProfileFieldComponent
CoreSitePluginsUserProfileFieldComponent,
CoreSitePluginsQuestionComponent
],
entryComponents: [
CoreSitePluginsModuleIndexComponent,
CoreSitePluginsCourseOptionComponent,
CoreSitePluginsCourseFormatComponent,
CoreSitePluginsUserProfileFieldComponent
CoreSitePluginsUserProfileFieldComponent,
CoreSitePluginsQuestionComponent
]
})
export class CoreSitePluginsComponentsModule {}

View File

@ -0,0 +1 @@
<core-compile-html [text]="content" [jsData]="jsData"></core-compile-html>

View File

@ -0,0 +1,90 @@
// (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, OnInit, Input, Output, EventEmitter, ViewChild, OnDestroy } from '@angular/core';
import { CoreSitePluginsProvider } from '../../providers/siteplugins';
import { CoreCompileHtmlComponent } from '@core/compile/components/compile-html/compile-html';
import { Subscription } from 'rxjs';
/**
* Component that displays a question created using a site plugin.
*/
@Component({
selector: 'core-site-plugins-question',
templateUrl: 'question.html',
})
export class CoreSitePluginsQuestionComponent implements OnInit, OnDestroy {
@Input() question: any; // The question to render.
@Input() component: string; // The component the question belongs to.
@Input() componentId: number; // ID of the component the question belongs to.
@Input() attemptId: number; // Attempt ID.
@Input() offlineEnabled?: boolean | string; // Whether the question can be answered in offline.
@Output() buttonClicked: EventEmitter<any>; // Should emit an event when a behaviour button is clicked.
@Output() onAbort: EventEmitter<void>; // Should emit an event if the question should be aborted.
@ViewChild(CoreCompileHtmlComponent) compileComponent: CoreCompileHtmlComponent;
content = ''; // Content.
jsData;
protected componentObserver: Subscription;
constructor(protected sitePluginsProvider: CoreSitePluginsProvider) { }
/**
* Component being initialized.
*/
ngOnInit(): void {
// Pass the input and output data to the component.
this.jsData = {
question: this.question,
component: this.component,
componentId: this.componentId,
attemptId: this.attemptId,
offlineEnabled: this.offlineEnabled,
buttonClicked: this.buttonClicked,
onAbort: this.onAbort
};
if (this.question) {
// Retrieve the handler data.
const handler = this.sitePluginsProvider.getSitePluginHandler('qtype_' + this.question.type),
handlerSchema = handler && handler.handlerSchema;
if (handlerSchema) {
// Load first template.
if (handlerSchema.methodTemplates && handlerSchema.methodTemplates.length) {
this.content = handler.handlerSchema.methodTemplates[0].html;
}
// Wait for the instance to be created.
if (this.compileComponent && this.compileComponent.componentObservable &&
handlerSchema.methodJSResult && handlerSchema.methodJSResult.componentInit) {
this.componentObserver = this.compileComponent.componentObservable.subscribe((instance) => {
if (instance) {
// Instance created, call component init.
handlerSchema.methodJSResult.componentInit.apply(instance);
}
});
}
}
}
}
/**
* Component destroyed.
*/
ngOnDestroy(): void {
this.componentObserver && this.componentObserver.unsubscribe();
}
}

View File

@ -35,6 +35,7 @@ import { CoreCourseFormatDelegate } from '@core/course/providers/format-delegate
import { CoreUserDelegate } from '@core/user/providers/user-delegate';
import { CoreUserProfileFieldDelegate } from '@core/user/providers/user-profile-field-delegate';
import { CoreSettingsDelegate } from '@core/settings/providers/delegate';
import { CoreQuestionDelegate } from '@core/question/providers/delegate';
import { AddonMessageOutputDelegate } from '@addon/messageoutput/providers/delegate';
// Handler classes.
@ -46,6 +47,7 @@ import { CoreSitePluginsMainMenuHandler } from '../classes/main-menu-handler';
import { CoreSitePluginsUserProfileHandler } from '../classes/user-handler';
import { CoreSitePluginsUserProfileFieldHandler } from '../classes/user-profile-field-handler';
import { CoreSitePluginsSettingsHandler } from '../classes/settings-handler';
import { CoreSitePluginsQuestionHandler } from '../classes/question-handler';
import { CoreSitePluginsMessageOutputHandler } from '../classes/message-output-handler';
/**
@ -69,7 +71,9 @@ export class CoreSitePluginsHelperProvider {
private courseOptionsDelegate: CoreCourseOptionsDelegate, eventsProvider: CoreEventsProvider,
private courseFormatDelegate: CoreCourseFormatDelegate, private profileFieldDelegate: CoreUserProfileFieldDelegate,
private textUtils: CoreTextUtilsProvider, private filepoolProvider: CoreFilepoolProvider,
private settingsDelegate: CoreSettingsDelegate, private messageOutputDelegate: AddonMessageOutputDelegate) {
private settingsDelegate: CoreSettingsDelegate, private questionDelegate: CoreQuestionDelegate,
private messageOutputDelegate: AddonMessageOutputDelegate) {
this.logger = logger.getInstance('CoreSitePluginsHelperProvider');
// Fetch the plugins on login.
@ -442,6 +446,10 @@ export class CoreSitePluginsHelperProvider {
promise = Promise.resolve(this.registerSettingsHandler(plugin, handlerName, handlerSchema, result));
break;
case 'CoreQuestionDelegate':
promise = Promise.resolve(this.registerQuestionHandler(plugin, handlerName, handlerSchema, result));
break;
case 'AddonMessageOutputDelegate':
promise = Promise.resolve(this.registerMessageOutputHandler(plugin, handlerName, handlerSchema, result));
break;
@ -609,6 +617,55 @@ export class CoreSitePluginsHelperProvider {
return modName;
}
/**
* Given a handler in an plugin, register it in the question delegate.
*
* @param {any} plugin Data of the plugin.
* @param {string} handlerName Name of the handler in the plugin.
* @param {any} handlerSchema Data about the handler.
* @param {any} initResult Result of the init WS call.
* @return {string|Promise<string>} A string (or a promise resolved with a string) to identify the handler.
*/
protected registerQuestionHandler(plugin: any, handlerName: string, handlerSchema: any, initResult: any)
: string | Promise<string> {
if (!handlerSchema.method) {
// Required data not provided, stop.
this.logger.warn('Ignore site plugin because it doesn\'t provide method', plugin, handlerSchema);
return;
}
this.logger.debug('Register site plugin in question delegate:', plugin, handlerSchema, initResult);
// Execute the main method and its JS. The template returned will be used in the question component.
return this.executeMethodAndJS(plugin, handlerSchema.method).then((result) => {
// Create and register the handler.
const uniqueName = this.sitePluginsProvider.getHandlerUniqueName(plugin, handlerName),
questionType = plugin.component,
questionHandler = new CoreSitePluginsQuestionHandler(uniqueName, questionType);
// Store in handlerSchema some data required by the component.
handlerSchema.methodTemplates = result.templates;
handlerSchema.methodJSResult = result.jsResult;
if (result && result.jsResult) {
// Override default handler functions with the result of the method JS.
for (const property in questionHandler) {
if (property != 'constructor' && typeof questionHandler[property] == 'function' &&
typeof result.jsResult[property] == 'function') {
questionHandler[property] = result.jsResult[property].bind(questionHandler);
}
}
}
this.questionDelegate.registerHandler(questionHandler);
return questionType;
}).catch((err) => {
this.logger.error('Error executing main method for question', handlerSchema.method, err);
});
}
/**
* Given a handler in an plugin, register it in the settings delegate.
*
@ -712,7 +769,7 @@ export class CoreSitePluginsHelperProvider {
return fieldType;
}).catch((err) => {
this.logger.error('Error executing main method', handlerSchema.method, err);
this.logger.error('Error executing main method for user profile field', handlerSchema.method, err);
});
}
}