MOBILE-4690 quiz: Wait the questions to load before validating

crazyserver · crazyserver · commit cc2ee88fc78b · 2025-01-22T15:21:39.000+01:00
diff --git a/src/addons/qtype/ddimageortext/component/ddimageortext.ts b/src/addons/qtype/ddimageortext/component/ddimageortext.ts
@@ -45,18 +45,23 @@ export class AddonQtypeDdImageOrTextComponent
      */
     init(): void {
         if (!this.question) {
+            this.onReadyPromise.resolve();
+
             return;
         }
 
         const questionElement = this.initComponent();
         if (!questionElement) {
+            this.onReadyPromise.resolve();
+
             return;
         }
 
         // Get D&D area and question text.
         const ddArea = questionElement.querySelector('.ddarea');
         if (!ddArea) {
             this.logger.warn('Aborting because of an error parsing question.', this.question.slot);
+            this.onReadyPromise.resolve();
 
             return CoreQuestionHelper.showComponentError(this.onAbort);
         }
@@ -84,6 +89,7 @@ export class AddonQtypeDdImageOrTextComponent
         }
 
         this.question.loaded = false;
+        this.onReadyPromise.resolve();
     }
 
     /**
diff --git a/src/addons/qtype/ddmarker/component/ddmarker.ts b/src/addons/qtype/ddmarker/component/ddmarker.ts
@@ -51,11 +51,15 @@ export class AddonQtypeDdMarkerComponent
      */
     init(): void {
         if (!this.question) {
+            this.onReadyPromise.resolve();
+
             return;
         }
 
         const questionElement = this.initComponent();
         if (!questionElement) {
+            this.onReadyPromise.resolve();
+
             return;
         }
 
@@ -65,6 +69,7 @@ export class AddonQtypeDdMarkerComponent
 
         if (!ddArea || !ddForm) {
             this.logger.warn('Aborting because of an error parsing question.', this.question.slot);
+            this.onReadyPromise.resolve();
 
             return CoreQuestionHelper.showComponentError(this.onAbort);
         }
@@ -107,6 +112,7 @@ export class AddonQtypeDdMarkerComponent
         }
 
         this.question.loaded = false;
+        this.onReadyPromise.resolve();
     }
 
     /**
diff --git a/src/addons/qtype/ddwtos/component/ddwtos.ts b/src/addons/qtype/ddwtos/component/ddwtos.ts
@@ -47,11 +47,15 @@ export class AddonQtypeDdwtosComponent extends CoreQuestionBaseComponent<AddonMo
      */
     init(): void {
         if (!this.question) {
+            this.onReadyPromise.resolve();
+
             return;
         }
 
         const questionElement = this.initComponent();
         if (!questionElement) {
+            this.onReadyPromise.resolve();
+
             return;
         }
 
@@ -65,6 +69,7 @@ export class AddonQtypeDdwtosComponent extends CoreQuestionBaseComponent<AddonMo
         const answerContainer = questionElement.querySelector('.answercontainer');
         if (!answerContainer) {
             this.logger.warn('Aborting because of an error parsing question.', this.question.slot);
+            this.onReadyPromise.resolve();
 
             return CoreQuestionHelper.showComponentError(this.onAbort);
         }
@@ -98,6 +103,7 @@ export class AddonQtypeDdwtosComponent extends CoreQuestionBaseComponent<AddonMo
         this.question.text = questionText;
 
         this.question.loaded = false;
+        this.onReadyPromise.resolve();
     }
 
     /**
diff --git a/src/addons/qtype/description/component/description.ts b/src/addons/qtype/description/component/description.ts
@@ -36,12 +36,16 @@ export class AddonQtypeDescriptionComponent extends CoreQuestionBaseComponent {
     init(): void {
         const questionEl = this.initComponent();
         if (!questionEl) {
+            this.onReadyPromise.resolve();
+
             return;
         }
 
         // Get the "seen" hidden input.
         const input = questionEl.querySelector<HTMLInputElement>('input[type="hidden"][name*=seen]');
         if (!input) {
+            this.onReadyPromise.resolve();
+
             return;
         }
 
diff --git a/src/addons/qtype/essay/component/essay.ts b/src/addons/qtype/essay/component/essay.ts
@@ -45,6 +45,8 @@ export class AddonQtypeEssayComponent extends CoreQuestionBaseComponent<AddonMod
      */
     init(): void {
         if (!this.question) {
+            this.onReadyPromise.resolve();
+
             return;
         }
 
@@ -57,6 +59,7 @@ export class AddonQtypeEssayComponent extends CoreQuestionBaseComponent<AddonMod
         if (this.question?.allowsAttachments && this.uploadFilesSupported && !this.review) {
             this.loadAttachments();
         }
+        this.onReadyPromise.resolve();
     }
 
     /**
diff --git a/src/addons/qtype/gapselect/component/gapselect.ts b/src/addons/qtype/gapselect/component/gapselect.ts
@@ -36,6 +36,7 @@ export class AddonQtypeGapSelectComponent extends CoreQuestionBaseComponent {
      */
     init(): void {
         this.initOriginalTextComponent('.qtext');
+        this.onReadyPromise.resolve();
     }
 
     /**
diff --git a/src/addons/qtype/match/component/match.ts b/src/addons/qtype/match/component/match.ts
@@ -35,6 +35,7 @@ export class AddonQtypeMatchComponent extends CoreQuestionBaseComponent<AddonMod
      */
     init(): void {
         this.initMatchComponent();
+        this.onReadyPromise.resolve();
     }
 
 }
diff --git a/src/addons/qtype/multianswer/component/multianswer.ts b/src/addons/qtype/multianswer/component/multianswer.ts
@@ -35,6 +35,7 @@ export class AddonQtypeMultiAnswerComponent extends CoreQuestionBaseComponent {
      */
     init(): void {
         this.initOriginalTextComponent('.formulation');
+        this.onReadyPromise.resolve();
     }
 
     /**
diff --git a/src/addons/qtype/multichoice/component/multichoice.ts b/src/addons/qtype/multichoice/component/multichoice.ts
@@ -35,6 +35,7 @@ export class AddonQtypeMultichoiceComponent extends CoreQuestionBaseComponent<Ad
      */
     init(): void {
         this.initMultichoiceComponent();
+        this.onReadyPromise.resolve();
     }
 
     /**
diff --git a/src/addons/qtype/numerical/component/numerical.ts b/src/addons/qtype/numerical/component/numerical.ts
@@ -35,6 +35,7 @@ export class AddonQtypeNumericalComponent extends CoreQuestionBaseComponent<Addo
      */
     init(): void {
         this.initCalculatedComponent();
+        this.onReadyPromise.resolve();
     }
 
 }
diff --git a/src/addons/qtype/ordering/component/ordering.ts b/src/addons/qtype/ordering/component/ordering.ts
@@ -48,11 +48,15 @@ export class AddonQtypeOrderingComponent extends CoreQuestionBaseComponent<Addon
      */
     init(): void {
         if (!this.question) {
+            this.onReadyPromise.resolve();
+
             return;
         }
 
         const questionElement = this.initComponent();
         if (!questionElement) {
+            this.onReadyPromise.resolve();
+
             return;
         }
 
@@ -63,6 +67,7 @@ export class AddonQtypeOrderingComponent extends CoreQuestionBaseComponent<Addon
         const listContainer = questionElement.querySelector('.sortablelist');
         if (!listContainer) {
             this.logger.warn('Aborting because of an error parsing question.', this.question.slot);
+            this.onReadyPromise.resolve();
 
             return CoreQuestionHelper.showComponentError(this.onAbort);
         }
@@ -99,6 +104,7 @@ export class AddonQtypeOrderingComponent extends CoreQuestionBaseComponent<Addon
         questionElement.querySelector('.ablock')?.remove();
         inputEl?.remove();
         this.question.text = CoreDomUtils.getContentsOfElement(questionElement, '.qtext');
+        this.onReadyPromise.resolve();
     }
 
     /**
diff --git a/src/addons/qtype/shortanswer/component/shortanswer.ts b/src/addons/qtype/shortanswer/component/shortanswer.ts
@@ -35,6 +35,7 @@ export class AddonQtypeShortAnswerComponent extends CoreQuestionBaseComponent<Ad
      */
     init(): void {
         this.initInputTextComponent();
+        this.onReadyPromise.resolve();
     }
 
 }
diff --git a/src/core/classes/promised-value.ts b/src/core/classes/promised-value.ts
@@ -122,6 +122,10 @@ export class CorePromisedValue<T = unknown> extends CorePromise<T> {
      * Reset status and value.
      */
     reset(): void {
+        if (!this.isSettled()) {
+            return;
+        }
+
         delete this.resolvedValue;
         delete this.rejectedReason;
 
diff --git a/src/core/components/dynamic-component/dynamic-component.ts b/src/core/components/dynamic-component/dynamic-component.ts
@@ -28,6 +28,8 @@ import {
     KeyValueDiffer,
     Type,
 } from '@angular/core';
+import { AsyncDirective } from '@classes/async-directive';
+import { CorePromisedValue } from '@classes/promised-value';
 
 import { CoreDomUtils } from '@services/utils/dom';
 import { CoreLogger } from '@singletons/logger';
@@ -63,7 +65,7 @@ import { CoreLogger } from '@singletons/logger';
     templateUrl: 'core-dynamic-component.html',
     styles: [':host { display: contents; }'],
 })
-export class CoreDynamicComponent<ComponentClass> implements OnChanges, DoCheck {
+export class CoreDynamicComponent<ComponentClass> implements OnChanges, DoCheck, AsyncDirective {
 
     @Input() component?: Type<ComponentClass>;
     @Input() data?: Record<string | number, unknown>;
@@ -77,13 +79,18 @@ export class CoreDynamicComponent<ComponentClass> implements OnChanges, DoCheck
         setTimeout(() => this.createComponent());
     }
 
-    instance?: any; // eslint-disable-line @typescript-eslint/no-explicit-any
+    protected promisedInstance = new CorePromisedValue<any>(); // eslint-disable-line @typescript-eslint/no-explicit-any
+
     container?: ViewContainerRef;
 
     protected logger: CoreLogger;
     protected differ: KeyValueDiffer<unknown, unknown>; // To detect changes in the data input.
     protected lastComponent?: Type<unknown>;
 
+    get instance(): any { // eslint-disable-line @typescript-eslint/no-explicit-any
+        return this.promisedInstance.value;
+    }
+
     constructor(
         differs: KeyValueDiffers,
         protected cdr: ChangeDetectorRef,
@@ -101,7 +108,7 @@ export class CoreDynamicComponent<ComponentClass> implements OnChanges, DoCheck
         if (changes.component && !this.component) {
             // Component not set, destroy the instance if any.
             this.lastComponent = undefined;
-            this.instance = undefined;
+            this.promisedInstance.reset();
             this.container?.clear();
         } else if (changes.component && (!this.instance || this.component != this.lastComponent)) {
             this.createComponent();
@@ -112,18 +119,31 @@ export class CoreDynamicComponent<ComponentClass> implements OnChanges, DoCheck
      * @inheritdoc
      */
     ngDoCheck(): void {
-        if (this.instance) {
-            // Check if there's any change in the data object.
-            const changes = this.differ.diff(this.data || {});
-            if (changes) {
-                this.setInputData();
-                if (this.instance.ngOnChanges) {
-                    this.instance.ngOnChanges(CoreDomUtils.createChangesFromKeyValueDiff(changes));
-                }
+        if (!this.instance) {
+            return;
+        }
+
+        // Check if there's any change in the data object.
+        const changes = this.differ.diff(this.data || {});
+        if (changes) {
+            this.setInputData();
+            if (this.instance.ngOnChanges) {
+                this.instance.ngOnChanges(CoreDomUtils.createChangesFromKeyValueDiff(changes));
             }
         }
     }
 
+    /**
+     * @inheritdoc
+     */
+    async ready(): Promise<void> {
+        const instance = await this.promisedInstance;
+
+        if (instance && typeof instance['ready'] === 'function') {
+            await instance.ready();
+        }
+    }
+
     /**
      * Call a certain method on the component.
      *
@@ -135,11 +155,12 @@ export class CoreDynamicComponent<ComponentClass> implements OnChanges, DoCheck
         method: Method,
         ...params: InstanceMethodParams<ComponentClass, Method>
     ): InstanceMethodReturn<ComponentClass, Method> | undefined {
-        if (typeof this.instance?.[method] !== 'function') {
+        const instance = this.instance;
+        if (typeof instance?.[method] !== 'function') {
             return;
         }
 
-        return this.instance[method].apply(this.instance, params);
+        return instance[method].apply(instance, params);
     }
 
     /**
@@ -155,25 +176,26 @@ export class CoreDynamicComponent<ComponentClass> implements OnChanges, DoCheck
             return false;
         }
 
-        if (this.instance) {
+        if (this.promisedInstance.isSettled()) {
             // Component already instantiated.
             return true;
         }
 
         if (this.component instanceof ComponentRef) {
             // A ComponentRef was supplied instead of the component class. Add it to the view.
             this.container.insert(this.component.hostView);
-            this.instance = this.component.instance;
 
             // This feature is usually meant for site plugins. Inject some properties.
-            this.instance['ChangeDetectorRef'] = this.cdr;
-            this.instance['componentContainer'] = this.element.nativeElement;
+            this.component.instance['ChangeDetectorRef'] = this.cdr;
+            this.component.instance['componentContainer'] = this.element.nativeElement;
+
+            this.promisedInstance.resolve(this.component.instance);
         } else {
             try {
                 // Create the component and add it to the container.
                 const componentRef = this.container.createComponent(this.component);
 
-                this.instance = componentRef.instance;
+                this.promisedInstance.resolve(componentRef.instance);
             } catch (ex) {
                 this.logger.error('Error creating component', ex);
 
@@ -190,6 +212,10 @@ export class CoreDynamicComponent<ComponentClass> implements OnChanges, DoCheck
      * Set the input data for the component.
      */
     protected setInputData(): void {
+        if (!this.instance) {
+            return;
+        }
+
         for (const name in this.data) {
             this.instance[name] = this.data[name];
         }
diff --git a/src/core/features/question/classes/base-question-component.ts b/src/core/features/question/classes/base-question-component.ts
diff --git a/src/core/features/question/components/question/core-question.html b/src/core/features/question/components/question/core-question.html
diff --git a/src/core/features/question/components/question/question.ts b/src/core/features/question/components/question/question.ts

Original file line number	Diff line number	Diff line change
`@@ -45,18 +45,23 @@ export class AddonQtypeDdImageOrTextComponent`
`45`	`45`	`*/`
`46`	`46`	`init(): void {`
`47`	`47`	`if (!this.question) {`
	`48`	`+ this.onReadyPromise.resolve();`
	`49`	`+`
`48`	`50`	`return;`
`49`	`51`	`}`
`50`	`52`
`51`	`53`	`const questionElement = this.initComponent();`
`52`	`54`	`if (!questionElement) {`
	`55`	`+ this.onReadyPromise.resolve();`
	`56`	`+`
`53`	`57`	`return;`
`54`	`58`	`}`
`55`	`59`
`56`	`60`	`// Get D&D area and question text.`
`57`	`61`	`const ddArea = questionElement.querySelector('.ddarea');`
`58`	`62`	`if (!ddArea) {`
`59`	`63`	`this.logger.warn('Aborting because of an error parsing question.', this.question.slot);`
	`64`	`+ this.onReadyPromise.resolve();`
`60`	`65`
`61`	`66`	`return CoreQuestionHelper.showComponentError(this.onAbort);`
`62`	`67`	`}`
`@@ -84,6 +89,7 @@ export class AddonQtypeDdImageOrTextComponent`
`84`	`89`	`}`
`85`	`90`
`86`	`91`	`this.question.loaded = false;`
	`92`	`+ this.onReadyPromise.resolve();`
`87`	`93`	`}`
`88`	`94`
`89`	`95`	`/**`
Original file line number	Diff line number	Diff line change
`@@ -51,11 +51,15 @@ export class AddonQtypeDdMarkerComponent`
`51`	`51`	`*/`
`52`	`52`	`init(): void {`
`53`	`53`	`if (!this.question) {`
	`54`	`+ this.onReadyPromise.resolve();`
	`55`	`+`
`54`	`56`	`return;`
`55`	`57`	`}`
`56`	`58`
`57`	`59`	`const questionElement = this.initComponent();`
`58`	`60`	`if (!questionElement) {`
	`61`	`+ this.onReadyPromise.resolve();`
	`62`	`+`
`59`	`63`	`return;`
`60`	`64`	`}`
`61`	`65`
`@@ -65,6 +69,7 @@ export class AddonQtypeDdMarkerComponent`
`65`	`69`
`66`	`70`	`if (!ddArea \|\| !ddForm) {`
`67`	`71`	`this.logger.warn('Aborting because of an error parsing question.', this.question.slot);`
	`72`	`+ this.onReadyPromise.resolve();`
`68`	`73`
`69`	`74`	`return CoreQuestionHelper.showComponentError(this.onAbort);`
`70`	`75`	`}`
`@@ -107,6 +112,7 @@ export class AddonQtypeDdMarkerComponent`
`107`	`112`	`}`
`108`	`113`
`109`	`114`	`this.question.loaded = false;`
	`115`	`+ this.onReadyPromise.resolve();`
`110`	`116`	`}`
`111`	`117`
`112`	`118`	`/**`
Original file line number	Diff line number	Diff line change
`@@ -45,6 +45,8 @@ export class AddonQtypeEssayComponent extends CoreQuestionBaseComponent<AddonMod`
`45`	`45`	`*/`
`46`	`46`	`init(): void {`
`47`	`47`	`if (!this.question) {`
	`48`	`+ this.onReadyPromise.resolve();`
	`49`	`+`
`48`	`50`	`return;`
`49`	`51`	`}`
`50`	`52`
`@@ -57,6 +59,7 @@ export class AddonQtypeEssayComponent extends CoreQuestionBaseComponent<AddonMod`
`57`	`59`	`if (this.question?.allowsAttachments && this.uploadFilesSupported && !this.review) {`
`58`	`60`	`this.loadAttachments();`
`59`	`61`	`}`
	`62`	`+ this.onReadyPromise.resolve();`
`60`	`63`	`}`
`61`	`64`
`62`	`65`	`/**`
Original file line number	Diff line number	Diff line change
`@@ -36,6 +36,7 @@ export class AddonQtypeGapSelectComponent extends CoreQuestionBaseComponent {`
`36`	`36`	`*/`
`37`	`37`	`init(): void {`
`38`	`38`	`this.initOriginalTextComponent('.qtext');`
	`39`	`+ this.onReadyPromise.resolve();`
`39`	`40`	`}`
`40`	`41`
`41`	`42`	`/**`
Original file line number	Diff line number	Diff line change
`@@ -35,6 +35,7 @@ export class AddonQtypeMatchComponent extends CoreQuestionBaseComponent<AddonMod`
`35`	`35`	`*/`
`36`	`36`	`init(): void {`
`37`	`37`	`this.initMatchComponent();`
	`38`	`+ this.onReadyPromise.resolve();`
`38`	`39`	`}`
`39`	`40`
`40`	`41`	`}`