Merge pull request #1858 from albertgasset/MOBILE-2949

Mobile 2949

src/addon/mod/data/pages/entry/entry.html

@@ -4,10 +4,10 @@
     </ion-navbar>
 </ion-header>
 <ion-content>
-    <ion-refresher [enabled]="entryLoaded" (ionRefresh)="refreshDatabase($event)">
+    <ion-refresher [enabled]="entryLoaded && (isPullingToRefresh || !renderingEntry && !loadingRating && !loadingComments)" (ionRefresh)="refreshDatabase($event)">
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
-    <core-loading [hideUntil]="entryLoaded">
+    <core-loading [hideUntil]="entryLoaded && (isPullingToRefresh || !renderingEntry && !loadingRating && !loadingComments)">
         <!-- Database entries found to be synchronized -->
         <div class="core-warning-card" icon-start *ngIf="hasOffline">
             <ion-icon name="warning"></ion-icon>
@@ -25,14 +25,14 @@
         <div class="addon-data-contents addon-data-entries-{{data.id}}" *ngIf="entry">
             <core-style [css]="data.csstemplate" prefix=".addon-data-entries-{{data.id}}"></core-style>
 
-            <core-compile-html [text]="entryRendered" [jsData]="jsData" [extraImports]="extraImports"></core-compile-html>
+            <core-compile-html [text]="entryHtml" [jsData]="jsData" [extraImports]="extraImports" (compiling)="setRenderingEntry($event)"></core-compile-html>
         </div>
 
-        <core-rating-rate *ngIf="data && entry && ratingInfo && (!data.approval || entry.approved)" [ratingInfo]="ratingInfo" contextLevel="module" [instanceId]="data.coursemodule" [itemId]="entry.id" [itemSetId]="0" [courseId]="courseId" [aggregateMethod]="data.assessed" [scaleId]="data.scale" [userId]="entry.userid" (onUpdate)="ratingUpdated()"></core-rating-rate>
+        <core-rating-rate *ngIf="data && entry && ratingInfo && (!data.approval || entry.approved)" [ratingInfo]="ratingInfo" contextLevel="module" [instanceId]="data.coursemodule" [itemId]="entry.id" [itemSetId]="0" [courseId]="courseId" [aggregateMethod]="data.assessed" [scaleId]="data.scale" [userId]="entry.userid" (onLoading)="setLoadingRating($event)" (onUpdate)="ratingUpdated()"></core-rating-rate>
         <core-rating-aggregate *ngIf="data && entry && ratingInfo" [ratingInfo]="ratingInfo" contextLevel="module" [instanceId]="data.coursemodule" [itemId]="entry.id" [courseId]="courseId" [aggregateMethod]="data.assessed" [scaleId]="data.scale"></core-rating-aggregate>
 
         <ion-item *ngIf="data && entry">
-            <core-comments contextLevel="module" [instanceId]="data.coursemodule" component="mod_data" [itemId]="entry.id" area="database_entry"></core-comments>
+            <core-comments contextLevel="module" [instanceId]="data.coursemodule" component="mod_data" [itemId]="entry.id" area="database_entry" [displaySpinner]="false" (onLoading)="setLoadingComments($event)"></core-comments>
         </ion-item>
 
         <ion-grid *ngIf="previousOffset != null || nextOffset != null">

src/addon/mod/data/pages/entry/entry.ts

@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { Component, ViewChild, OnDestroy } from '@angular/core';
+import { ChangeDetectorRef, Component, ViewChild, OnDestroy } from '@angular/core';
 import { Content, IonicPage, NavParams, NavController } from 'ionic-angular';
 import { CoreUtilsProvider } from '@providers/utils/utils';
 import { CoreDomUtilsProvider } from '@providers/utils/dom';
@@ -51,6 +51,9 @@ export class AddonModDataEntryPage implements OnDestroy {
     moduleName = 'data';
     component = AddonModDataProvider.COMPONENT;
     entryLoaded = false;
+    renderingEntry = false;
+    loadingComments = false;
+    loadingRating = false;
     selectedGroup = 0;
     entry: any;
     offlineActions = [];
@@ -61,18 +64,19 @@ export class AddonModDataEntryPage implements OnDestroy {
     data: any;
     groupInfo: any;
     showComments: any;
-    entryRendered = '';
+    entryHtml = '';
     siteId: string;
     extraImports = [AddonModDataComponentsModule];
     jsData;
     ratingInfo: CoreRatingInfo;
+    isPullingToRefresh = false; // Whether the last fetching of data was started by a pull-to-refresh action
 
     constructor(params: NavParams, protected utils: CoreUtilsProvider, protected groupsProvider: CoreGroupsProvider,
             protected domUtils: CoreDomUtilsProvider, protected fieldsDelegate: AddonModDataFieldsDelegate,
             protected courseProvider: CoreCourseProvider, protected dataProvider: AddonModDataProvider,
             protected dataOffline: AddonModDataOfflineProvider, protected dataHelper: AddonModDataHelperProvider,
-            sitesProvider: CoreSitesProvider, protected navCtrl: NavController,
+            sitesProvider: CoreSitesProvider, protected navCtrl: NavController, protected eventsProvider: CoreEventsProvider,
-            protected eventsProvider: CoreEventsProvider) {
+            private cdr: ChangeDetectorRef) {
         this.module = params.get('module') || {};
         this.entryId = params.get('entryId') || null;
         this.courseId = params.get('courseId');
@@ -122,12 +126,15 @@ export class AddonModDataEntryPage implements OnDestroy {
     /**
      * Fetch the entry data.
      *
-     * @param  {boolean}      refresh If refresh the current data or not.
+     * @param  {boolean} [refresh] Whether to refresh the current data or not.
+     * @param  {boolean} [isPtr] Whether is a pull to refresh action.
      * @return {Promise<any>} Resolved when done.
      */
-    protected fetchEntryData(refresh?: boolean): Promise<any> {
+    protected fetchEntryData(refresh?: boolean, isPtr?: boolean): Promise<any> {
         let fieldsArray;
 
+        this.isPullingToRefresh = isPtr;
+
         return this.dataProvider.getDatabase(this.courseId, this.module.id).then((data) => {
             this.title = data.name || this.title;
             this.data = data;
@@ -176,7 +183,7 @@ export class AddonModDataEntryPage implements OnDestroy {
             const actions = this.dataHelper.getActions(this.data, this.access, this.entry);
 
             const templte = this.data.singletemplate || this.dataHelper.getDefaultTemplate('single', fieldsArray);
-            this.entryRendered = this.dataHelper.displayShowFields(templte, fieldsArray, this.entry, this.offset, 'show', actions);
+            this.entryHtml = this.dataHelper.displayShowFields(templte, fieldsArray, this.entry, this.offset, 'show', actions);
             this.showComments = actions.comments;
 
             const entries = {};
@@ -191,7 +198,7 @@ export class AddonModDataEntryPage implements OnDestroy {
         }).catch((message) => {
             if (!refresh) {
                 // Some call failed, retry without using cache since it might be a new activity.
-                return this.refreshAllData();
+                return this.refreshAllData(isPtr);
             }
 
             this.domUtils.showErrorModalDefault(message, 'core.course.errorgetmodule', true);
@@ -219,9 +226,10 @@ export class AddonModDataEntryPage implements OnDestroy {
     /**
      * Refresh all the data.
      *
+     * @param  {boolean} [isPtr] Whether is a pull to refresh action.
      * @return {Promise<any>} Promise resolved when done.
      */
-    protected refreshAllData(): Promise<any> {
+    protected refreshAllData(isPtr?: boolean): Promise<any> {
         const promises = [];
 
         promises.push(this.dataProvider.invalidateDatabaseData(this.courseId));
@@ -232,7 +240,7 @@ export class AddonModDataEntryPage implements OnDestroy {
         }
 
         return Promise.all(promises).finally(() => {
-            return this.fetchEntryData(true);
+            return this.fetchEntryData(true, isPtr);
         });
     }
 
@@ -244,7 +252,7 @@ export class AddonModDataEntryPage implements OnDestroy {
      */
     refreshDatabase(refresher?: any): Promise<any> {
         if (this.entryLoaded) {
-            return this.refreshAllData().finally(() => {
+            return this.refreshAllData(true).finally(() => {
                 refresher && refresher.complete();
             });
         }
@@ -310,6 +318,30 @@ export class AddonModDataEntryPage implements OnDestroy {
         });
     }
 
+    /**
+     * Function called when entry is being rendered.
+     */
+    setRenderingEntry(rendering: boolean): void {
+        this.renderingEntry = rendering;
+        this.cdr.detectChanges();
+    }
+
+    /**
+     * Function called when comments component is loading data.
+     */
+    setLoadingComments(loading: boolean): void {
+        this.loadingComments = loading;
+        this.cdr.detectChanges();
+    }
+
+    /**
+     * Function called when rate component is loading data.
+     */
+    setLoadingRating(loading: boolean): void {
+        this.loadingRating = loading;
+        this.cdr.detectChanges();
+    }
+
     /**
      * Function called when rating is updated online.
      */

src/core/comments/components/comments/comments.ts

@@ -12,8 +12,8 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { Component, Input, OnChanges, SimpleChange } from '@angular/core';
+import { Component, EventEmitter, Input, OnChanges, Output, SimpleChange } from '@angular/core';
-import { NavParams, NavController } from 'ionic-angular';
+import { NavController } from 'ionic-angular';
 import { CoreCommentsProvider } from '../../providers/comments';
 
 /**
@@ -31,11 +31,15 @@ export class CoreCommentsCommentsComponent implements OnChanges {
     @Input() area = '';
     @Input() page = 0;
     @Input() title?: string;
+    @Input() displaySpinner = true; // Whether to display the loading spinner.
+    @Output() onLoading: EventEmitter<boolean>; // Eevent that indicates whether the component is loading data.
 
     commentsLoaded = false;
     commentsCount: number;
 
-    constructor(navParams: NavParams, private navCtrl: NavController, private commentsProvider: CoreCommentsProvider) {}
+    constructor(private navCtrl: NavController, private commentsProvider: CoreCommentsProvider) {
+        this.onLoading = new EventEmitter<boolean>();
+    }
 
     /**
      * View loaded.
@@ -56,6 +60,7 @@ export class CoreCommentsCommentsComponent implements OnChanges {
 
     protected fetchData(): void {
         this.commentsLoaded = false;
+        this.onLoading.emit(true);
 
         this.commentsProvider.getComments(this.contextLevel, this.instanceId, this.component, this.itemId, this.area, this.page)
             .then((comments) => {
@@ -64,6 +69,7 @@ export class CoreCommentsCommentsComponent implements OnChanges {
                 this.commentsCount = -1;
             }).finally(() => {
                 this.commentsLoaded = true;
+                this.onLoading.emit(false);
             });
     }
 

src/core/comments/components/comments/core-comments.html

@@ -1,4 +1,4 @@
-<core-loading [hideUntil]="commentsLoaded">
+<core-loading [hideUntil]="commentsLoaded || !displaySpinner">
     <div (click)="openComments()" *ngIf="commentsCount >= 0">
         {{ 'core.commentscount' | translate : {'$a': commentsCount} }}
     </div>

src/core/compile/components/compile-html/compile-html.ts

@@ -48,6 +48,7 @@ export class CoreCompileHtmlComponent implements OnChanges, OnDestroy, DoCheck {
     @Input() extraProviders: any[] = []; // Extra providers.
     @Input() forceCompile: string | boolean; // Set it to true to force compile even if the text/javascript hasn't changed.
     @Output() created: EventEmitter<any> = new EventEmitter(); // Will emit an event when the component is instantiated.
+    @Output() compiling: EventEmitter<boolean> = new EventEmitter(); // Event that indicates whether the template is being compiled.
 
     // Get the container where to put the content.
     @ViewChild('dynamicComponent', { read: ViewContainerRef }) container: ViewContainerRef;
@@ -58,6 +59,7 @@ export class CoreCompileHtmlComponent implements OnChanges, OnDestroy, DoCheck {
     protected componentRef: ComponentRef<any>;
     protected element;
     protected differ: any; // To detect changes in the jsData input.
+    protected creatingComponent = false;
 
     constructor(protected compileProvider: CoreCompileProvider, protected cdr: ChangeDetectorRef, element: ElementRef,
             @Optional() protected navCtrl: NavController, differs: KeyValueDiffers, protected domUtils: CoreDomUtilsProvider,
@@ -70,7 +72,7 @@ export class CoreCompileHtmlComponent implements OnChanges, OnDestroy, DoCheck {
      * Detect and act upon changes that Angular can’t or won’t detect on its own (objects and arrays).
      */
     ngDoCheck(): void {
-        if (this.componentInstance) {
+        if (this.componentInstance && !this.creatingComponent) {
             // Check if there's any change in the jsData object.
             const changes = this.differ.diff(this.jsData);
             if (changes) {
@@ -91,6 +93,8 @@ export class CoreCompileHtmlComponent implements OnChanges, OnDestroy, DoCheck {
                 this.text) {
 
             // Create a new component and a new module.
+            this.creatingComponent = true;
+            this.compiling.emit(true);
             this.compileProvider.createAndCompileComponent(this.text, this.getComponentClass(), this.extraImports)
                     .then((factory) => {
                 // Destroy previous components.
@@ -107,6 +111,9 @@ export class CoreCompileHtmlComponent implements OnChanges, OnDestroy, DoCheck {
                 this.domUtils.showErrorModal(error);
 
                 this.loaded = true;
+            }).finally(() => {
+                this.creatingComponent = false;
+                this.compiling.emit(false);
             });
         }
     }

src/core/rating/components/rate/rate.ts

@@ -35,6 +35,7 @@ export class CoreRatingRateComponent implements OnChanges {
     @Input() aggregateMethod: number;
     @Input() scaleId: number;
     @Input() userId: number;
+    @Output() onLoading: EventEmitter<boolean>; // Eevent that indicates whether the component is loading data.
     @Output() onUpdate: EventEmitter<void>; // Event emitted when the rating is updated online.
 
     item: CoreRatingInfoItem;
@@ -43,6 +44,7 @@ export class CoreRatingRateComponent implements OnChanges {
 
     constructor(private domUtils: CoreDomUtilsProvider, private translate: TranslateService,
             private ratingProvider: CoreRatingProvider, private ratingOffline: CoreRatingOfflineProvider) {
+        this.onLoading = new EventEmitter<boolean>();
         this.onUpdate = new EventEmitter<void>();
     }
 
@@ -77,6 +79,7 @@ export class CoreRatingRateComponent implements OnChanges {
             });
         }
 
+        this.onLoading.emit(true);
         this.ratingOffline.getRating(this.contextLevel, this.instanceId, this.ratingInfo.component, this.ratingInfo.ratingarea,
                 this.itemId).then((rating) => {
             this.rating = rating.rating;
@@ -86,6 +89,8 @@ export class CoreRatingRateComponent implements OnChanges {
             } else {
                 this.rating = CoreRatingProvider.UNSET_RATING;
             }
+        }).finally(() => {
+            this.onLoading.emit(false);
         });
     }