MOBILE-2347 core: Create a template class to create resource modules

src/addon/mod/book/components/index/index.ts

@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { Component, OnInit, OnDestroy, Input, Output, EventEmitter, Optional } from '@angular/core';
+import { Component, Optional } from '@angular/core';
 import { Content, PopoverController } from 'ionic-angular';
 import { TranslateService } from '@ngx-translate/core';
 import { CoreAppProvider } from '@providers/app';
@@ -20,7 +20,7 @@ import { CoreDomUtilsProvider } from '@providers/utils/dom';
 import { CoreTextUtilsProvider } from '@providers/utils/text';
 import { CoreCourseProvider } from '@core/course/providers/course';
 import { CoreCourseHelperProvider } from '@core/course/providers/helper';
-import { CoreCourseModuleMainComponent } from '@core/course/providers/module-delegate';
+import { CoreCourseModuleMainResourceComponent } from '@core/course/classes/main-resource-component';
 import { AddonModBookProvider, AddonModBookContentsMap, AddonModBookTocChapter } from '../../providers/book';
 import { AddonModBookPrefetchHandler } from '../../providers/prefetch-handler';
 import { AddonModBookTocPopoverComponent } from '../../components/toc-popover/toc-popover';
@@ -32,71 +32,31 @@ import { AddonModBookTocPopoverComponent } from '../../components/toc-popover/to
     selector: 'addon-mod-book-index',
     templateUrl: 'index.html',
 })
-export class AddonModBookIndexComponent implements OnInit, OnDestroy, CoreCourseModuleMainComponent {
+export class AddonModBookIndexComponent extends CoreCourseModuleMainResourceComponent {
-    @Input() module: any; // The module of the book.
-    @Input() courseId: number; // Course ID the book belongs to.
-    @Output() bookRetrieved?: EventEmitter<any>;
-
-    loaded: boolean;
     component = AddonModBookProvider.COMPONENT;
-    componentId: number;
     chapterContent: string;
     previousChapter: string;
     nextChapter: string;
 
-    // Data for context menu.
-    externalUrl: string;
-    description: string;
-    refreshIcon: string;
-    prefetchStatusIcon: string;
-    prefetchText: string;
-    size: string;
-
     protected chapters: AddonModBookTocChapter[];
     protected currentChapter: string;
     protected contentsMap: AddonModBookContentsMap;
-    protected isDestroyed = false;
-    protected statusObserver;
 
     constructor(private bookProvider: AddonModBookProvider, private courseProvider: CoreCourseProvider,
-            private domUtils: CoreDomUtilsProvider, private appProvider: CoreAppProvider, private textUtils: CoreTextUtilsProvider,
+            protected domUtils: CoreDomUtilsProvider, private appProvider: CoreAppProvider,
-            private courseHelper: CoreCourseHelperProvider, private prefetchDelegate: AddonModBookPrefetchHandler,
+            protected textUtils: CoreTextUtilsProvider, protected courseHelper: CoreCourseHelperProvider,
-            private popoverCtrl: PopoverController, private translate: TranslateService, @Optional() private content: Content) {
+            private prefetchDelegate: AddonModBookPrefetchHandler, private popoverCtrl: PopoverController,
-        this.bookRetrieved = new EventEmitter();
+            protected translate: TranslateService, @Optional() private content: Content) {
+        super(textUtils, courseHelper, translate, domUtils);
     }
 
     /**
      * Component being initialized.
      */
     ngOnInit(): void {
-        this.description = this.module.description;
+        super.ngOnInit();
-        this.componentId = this.module.id;
-        this.externalUrl = this.module.url;
-        this.loaded = false;
-        this.refreshIcon = 'spinner';
 
-        this.fetchContent();
+        this.loadContent();
-    }
-
-    /**
-     * Refresh the data.
-     *
-     * @param {any} [refresher] Refresher.
-     * @param {Function} [done] Function to call when done.
-     * @return {Promise<any>} Promise resolved when done.
-     */
-    doRefresh(refresher?: any, done?: () => void): Promise<any> {
-        this.refreshIcon = 'spinner';
-
-        return this.bookProvider.invalidateContent(this.module.id, this.courseId).catch(() => {
-            // Ignore errors.
-        }).then(() => {
-            return this.fetchContent(this.currentChapter, true);
-        }).finally(() => {
-            this.refreshIcon = 'refresh';
-            refresher && refresher.complete();
-            done && done();
-        });
     }
 
     /**
@@ -133,40 +93,27 @@ export class AddonModBookIndexComponent implements OnInit, OnDestroy, CoreCourse
     }
 
     /**
-     * Expand the description.
+     * Perform the invalidate content function.
+     *
+     * @return {Promise<any>} Resolved when done.
      */
-    expandDescription(): void {
+    protected invalidateContent(): Promise<any> {
-        this.textUtils.expandText(this.translate.instant('core.description'), this.description, this.component, this.module.id);
+        return this.bookProvider.invalidateContent(this.module.id, this.courseId);
-    }
-
-    /**
-     * Prefetch the module.
-     */
-    prefetch(): void {
-        this.courseHelper.contextMenuPrefetch(this, this.module, this.courseId);
-    }
-
-    /**
-     * Confirm and remove downloaded files.
-     */
-    removeFiles(): void {
-        this.courseHelper.confirmAndRemoveFiles(this.module, this.courseId);
     }
 
     /**
      * Download book contents and load the current chapter.
      *
-     * @param {string} [chapterId] Chapter to load.
      * @param {boolean} [refresh] Whether we're refreshing data.
      * @return {Promise<any>} Promise resolved when done.
      */
-    protected fetchContent(chapterId?: string, refresh?: boolean): Promise<any> {
+    protected fetchContent(refresh?: boolean): Promise<any> {
         const promises = [];
         let downloadFailed = false;
 
         // Try to get the book data.
         promises.push(this.bookProvider.getBook(this.courseId, this.module.id).then((book) => {
-            this.bookRetrieved.emit(book);
+            this.dataRetrieved.emit(book);
             this.description = book.intro || this.description;
         }).catch(() => {
             // Ignore errors since this WS isn't available in some Moodle versions.
@@ -192,22 +139,17 @@ export class AddonModBookIndexComponent implements OnInit, OnDestroy, CoreCourse
             }
 
             // Show chapter.
-            return this.loadChapter(chapterId || this.currentChapter).then(() => {
+            return this.loadChapter(this.currentChapter).then(() => {
                 if (downloadFailed && this.appProvider.isOnline()) {
                     // We could load the main file but the download failed. Show error message.
                     this.domUtils.showErrorModal('core.errordownloadingsomefiles', true);
                 }
 
                 // All data obtained, now fill the context menu.
-                this.courseHelper.fillContextMenu(this, this.module, this.courseId, refresh, this.component);
+                this.fillContextMenu(refresh);
             }).catch(() => {
                 // Ignore errors, they're handled inside the loadChapter function.
             });
-        }).catch((error) => {
-            // Error getting data, fail.
-            this.loaded = true;
-            this.refreshIcon = 'refresh';
-            this.domUtils.showErrorModalDefault(error, 'core.course.errorgetmodule', true);
         });
     }
 
@@ -242,9 +184,4 @@ export class AddonModBookIndexComponent implements OnInit, OnDestroy, CoreCourse
             this.refreshIcon = 'refresh';
         });
     }
-
-    ngOnDestroy(): void {
-        this.isDestroyed = true;
-        this.statusObserver && this.statusObserver.off();
-    }
 }

src/addon/mod/book/pages/index/index.html

@@ -12,5 +12,5 @@
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
 
-    <addon-mod-book-index [module]="module" [courseId]="courseId" (bookRetrieved)="updateData($event)"></addon-mod-book-index>
+    <addon-mod-book-index [module]="module" [courseId]="courseId" (dataRetrieved)="updateData($event)"></addon-mod-book-index>
 </ion-content>

src/addon/mod/folder/components/index/index.ts

@@ -12,14 +12,14 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { Component, OnInit, OnDestroy, Input, Output, EventEmitter } from '@angular/core';
+import { Component, Input } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
 import { CoreAppProvider } from '@providers/app';
 import { CoreDomUtilsProvider } from '@providers/utils/dom';
 import { CoreTextUtilsProvider } from '@providers/utils/text';
 import { CoreCourseProvider } from '@core/course/providers/course';
 import { CoreCourseHelperProvider } from '@core/course/providers/helper';
-import { CoreCourseModuleMainComponent } from '@core/course/providers/module-delegate';
+import { CoreCourseModuleMainResourceComponent } from '@core/course/classes/main-resource-component';
 import { AddonModFolderProvider } from '../../providers/folder';
 import { AddonModFolderHelperProvider } from '../../providers/helper';
 
@@ -32,47 +32,25 @@ import { AddonModFolderHelperProvider } from '../../providers/helper';
     selector: 'addon-mod-folder-index',
     templateUrl: 'index.html',
 })
-export class AddonModFolderIndexComponent implements OnInit, OnDestroy, CoreCourseModuleMainComponent {
+export class AddonModFolderIndexComponent extends CoreCourseModuleMainResourceComponent {
-    @Input() module: any; // The module of the folder.
-    @Input() courseId: number; // Course ID the folder belongs to.
     @Input() path: string; // For subfolders. Use the path instead of a boolean so Angular detects them as different states.
-    @Output() folderRetrieved?: EventEmitter<any>;
 
-    loaded: boolean;
-    canReload: boolean;
     component = AddonModFolderProvider.COMPONENT;
-    componentId: number;
     canGetFolder: boolean;
     contents: any;
 
-    // Data for context menu.
-    externalUrl: string;
-    description: string;
-    refreshIcon: string;
-    prefetchStatusIcon: string;
-    prefetchText: string;
-    size: string;
-
-    protected isDestroyed;
-    protected statusObserver;
-
     constructor(private folderProvider: AddonModFolderProvider, private courseProvider: CoreCourseProvider,
-            private domUtils: CoreDomUtilsProvider, private appProvider: CoreAppProvider, private textUtils: CoreTextUtilsProvider,
+            protected domUtils: CoreDomUtilsProvider, private appProvider: CoreAppProvider,
-            private courseHelper: CoreCourseHelperProvider, private translate: TranslateService,
+            protected textUtils: CoreTextUtilsProvider, protected courseHelper: CoreCourseHelperProvider,
-            private folderHelper: AddonModFolderHelperProvider) {
+            protected translate: TranslateService, private folderHelper: AddonModFolderHelperProvider) {
-        this.folderRetrieved = new EventEmitter();
+        super(textUtils, courseHelper, translate, domUtils);
     }
 
     /**
      * Component being initialized.
      */
     ngOnInit(): void {
-        this.description = this.module.description;
+        super.ngOnInit();
-        this.componentId = this.module.id;
-        this.externalUrl = this.module.url;
-        this.loaded = false;
-        this.canReload = false;
-        this.refreshIcon = 'spinner';
 
         this.canGetFolder = this.folderProvider.isGetFolderWSAvailable();
 
@@ -80,65 +58,26 @@ export class AddonModFolderIndexComponent implements OnInit, OnDestroy, CoreCour
             // Subfolder. Use module param.
             this.showModuleData(this.module);
             this.loaded = true;
-            this.canReload = false;
             this.refreshIcon = 'refresh';
         } else {
-            this.fetchContent().then(() => {
+            this.loadContent().then(() => {
                 this.folderProvider.logView(this.module.instance).then(() => {
                     this.courseProvider.checkModuleCompletion(this.courseId, this.module.completionstatus);
                 });
             }).finally(() => {
                 this.loaded = true;
-                this.canReload = true;
                 this.refreshIcon = 'refresh';
             });
         }
     }
 
     /**
-     * Refresh the data.
+     * Perform the invalidate content function.
      *
-     * @param {any} [refresher] Refresher.
+     * @return {Promise<any>} Resolved when done.
-     * @param {Function} [done] Function to call when done.
-     * @return {Promise<any>} Promise resolved when done.
      */
-    doRefresh(refresher?: any, done?: () => void): Promise<any> {
+    protected invalidateContent(): Promise<any> {
-        if (this.canReload) {
+        return this.folderProvider.invalidateContent(this.module.id, this.courseId);
-            this.refreshIcon = 'spinner';
-
-            this.folderProvider.invalidateContent(this.module.id, this.courseId).catch(() => {
-                // Ignore errors.
-            }).then(() => {
-                return this.fetchContent(true);
-            }).finally(() => {
-                this.refreshIcon = 'refresh';
-                refresher && refresher.complete();
-                done && done();
-            });
-        }
-
-        return Promise.resolve();
-    }
-
-    /**
-     * Expand the description.
-     */
-    expandDescription(): void {
-        this.textUtils.expandText(this.translate.instant('core.description'), this.description, this.component, this.module.id);
-    }
-
-    /**
-     * Prefetch the module.
-     */
-    prefetch(): void {
-        this.courseHelper.contextMenuPrefetch(this, this.module, this.courseId);
-    }
-
-    /**
-     * Confirm and remove downloaded files.
-     */
-    removeFiles(): void {
-        this.courseHelper.confirmAndRemoveFiles(this.module, this.courseId);
     }
 
     /**
@@ -148,7 +87,7 @@ export class AddonModFolderIndexComponent implements OnInit, OnDestroy, CoreCour
     protected showModuleData(module: any): void {
         this.description = module.intro || module.description;
 
-        this.folderRetrieved.emit(module);
+        this.dataRetrieved.emit(module);
 
         if (this.path) {
             // Subfolder.
@@ -190,24 +129,13 @@ export class AddonModFolderIndexComponent implements OnInit, OnDestroy, CoreCour
         return promise.then((folder) => {
             if (folder) {
                 this.description = folder.intro || folder.description;
-                this.folderRetrieved.emit(folder);
+                this.dataRetrieved.emit(folder);
             }
 
             this.showModuleData(folder);
 
             // All data obtained, now fill the context menu.
-            this.courseHelper.fillContextMenu(this, this.module, this.courseId, refresh, this.component);
+            this.fillContextMenu(refresh);
-        }).catch((error) => {
-            // Error getting data, fail.
-            this.domUtils.showErrorModalDefault(error, 'core.course.errorgetmodule', true);
-        }).finally(() => {
-            this.loaded = true;
-            this.refreshIcon = 'refresh';
         });
     }
-
-    ngOnDestroy(): void {
-        this.isDestroyed = true;
-        this.statusObserver && this.statusObserver.off();
-    }
 }

src/addon/mod/folder/pages/index/index.html

@@ -12,5 +12,5 @@
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
 
-    <addon-mod-folder-index [module]="module" [courseId]="courseId" [path]="path" (folderRetrieved)="updateData($event)"></addon-mod-folder-index>
+    <addon-mod-folder-index [module]="module" [courseId]="courseId" [path]="path" (dataRetrieved)="updateData($event)"></addon-mod-folder-index>
 </ion-content>

src/addon/mod/page/components/index/index.ts

@@ -12,14 +12,14 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { Component, OnInit, OnDestroy, Input, Output, EventEmitter } from '@angular/core';
+import { Component } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
 import { CoreAppProvider } from '@providers/app';
 import { CoreDomUtilsProvider } from '@providers/utils/dom';
 import { CoreTextUtilsProvider } from '@providers/utils/text';
 import { CoreCourseProvider } from '@core/course/providers/course';
 import { CoreCourseHelperProvider } from '@core/course/providers/helper';
-import { CoreCourseModuleMainComponent } from '@core/course/providers/module-delegate';
+import { CoreCourseModuleMainResourceComponent } from '@core/course/classes/main-resource-component';
 import { AddonModPageProvider } from '../../providers/page';
 import { AddonModPageHelperProvider } from '../../providers/helper';
 import { AddonModPagePrefetchHandler } from '../../providers/prefetch-handler';
@@ -31,48 +31,29 @@ import { AddonModPagePrefetchHandler } from '../../providers/prefetch-handler';
     selector: 'addon-mod-page-index',
     templateUrl: 'index.html',
 })
-export class AddonModPageIndexComponent implements OnInit, OnDestroy, CoreCourseModuleMainComponent {
+export class AddonModPageIndexComponent extends CoreCourseModuleMainResourceComponent {
-    @Input() module: any; // The module of the page.
-    @Input() courseId: number; // Course ID the page belongs to.
-    @Output() pageRetrieved?: EventEmitter<any>;
-
-    loaded: boolean;
     component = AddonModPageProvider.COMPONENT;
-    componentId: number;
     canGetPage: boolean;
     contents: any;
-
+    protected fetchContentDefaultError = 'addon.mod_page.errorwhileloadingthepage';
-    // Data for context menu.
-    externalUrl: string;
-    description: string;
-    refreshIcon: string;
-    prefetchStatusIcon: string;
-    prefetchText: string;
-    size: string;
-
-    protected isDestroyed;
-    protected statusObserver;
 
     constructor(private pageProvider: AddonModPageProvider, private courseProvider: CoreCourseProvider,
-            private domUtils: CoreDomUtilsProvider, private appProvider: CoreAppProvider, private textUtils: CoreTextUtilsProvider,
+            protected domUtils: CoreDomUtilsProvider, private appProvider: CoreAppProvider,
-            private courseHelper: CoreCourseHelperProvider, private translate: TranslateService,
+            protected textUtils: CoreTextUtilsProvider, protected courseHelper: CoreCourseHelperProvider,
-            private pageHelper: AddonModPageHelperProvider, private pagePrefetch: AddonModPagePrefetchHandler) {
+            protected translate: TranslateService, private pageHelper: AddonModPageHelperProvider,
-        this.pageRetrieved = new EventEmitter();
+            private pagePrefetch: AddonModPagePrefetchHandler) {
+        super(textUtils, courseHelper, translate, domUtils);
     }
 
     /**
      * Component being initialized.
      */
     ngOnInit(): void {
-        this.description = this.module.description;
+        super.ngOnInit();
-        this.componentId = this.module.id;
-        this.externalUrl = this.module.url;
-        this.loaded = false;
-        this.refreshIcon = 'spinner';
 
         this.canGetPage = this.pageProvider.isGetPageWSAvailable();
 
-        this.fetchContent().then(() => {
+        this.loadContent().then(() => {
             this.pageProvider.logView(this.module.instance).then(() => {
                 this.courseProvider.checkModuleCompletion(this.courseId, this.module.completionstatus);
             });
@@ -80,49 +61,12 @@ export class AddonModPageIndexComponent implements OnInit, OnDestroy, CoreCourse
     }
 
     /**
-     * Refresh the data.
+     * Perform the invalidate content function.
      *
-     * @param {any} [refresher] Refresher.
+     * @return {Promise<any>} Resolved when done.
-     * @param {Function} [done] Function to call when done.
-     * @return {Promise<any>} Promise resolved when done.
      */
-    doRefresh(refresher?: any, done?: () => void): Promise<any> {
+    protected invalidateContent(): Promise<any> {
-        if (this.loaded) {
+        return this.pageProvider.invalidateContent(this.module.id, this.courseId);
-            this.refreshIcon = 'spinner';
-
-            return this.pageProvider.invalidateContent(this.module.id, this.courseId).catch(() => {
-                // Ignore errors.
-            }).then(() => {
-                return this.fetchContent(true);
-            }).finally(() => {
-                this.refreshIcon = 'refresh';
-                refresher && refresher.complete();
-                done && done();
-            });
-        }
-
-        return Promise.resolve();
-    }
-
-    /**
-     * Expand the description.
-     */
-    expandDescription(): void {
-        this.textUtils.expandText(this.translate.instant('core.description'), this.description, this.component, this.module.id);
-    }
-
-    /**
-     * Prefetch the module.
-     */
-    prefetch(): void {
-        this.courseHelper.contextMenuPrefetch(this, this.module, this.courseId);
-    }
-
-    /**
-     * Confirm and remove downloaded files.
-     */
-    removeFiles(): void {
-        this.courseHelper.confirmAndRemoveFiles(this.module, this.courseId);
     }
 
     /**
@@ -158,7 +102,7 @@ export class AddonModPageIndexComponent implements OnInit, OnDestroy, CoreCourse
             promises.push(getPagePromise.then((page) => {
                 if (page) {
                     this.description = page.intro || page.description;
-                    this.pageRetrieved.emit(page);
+                    this.dataRetrieved.emit(page);
                 }
             }).catch(() => {
                 // Ignore errors.
@@ -167,7 +111,7 @@ export class AddonModPageIndexComponent implements OnInit, OnDestroy, CoreCourse
             // Get the page HTML.
             promises.push(this.pageHelper.getPageHtml(this.module.contents, this.module.id).then((content) => {
                 // All data obtained, now fill the context menu.
-                this.courseHelper.fillContextMenu(this, this.module, this.courseId, refresh, this.component);
+                this.fillContextMenu(refresh);
 
                 this.contents = content;
 
@@ -178,17 +122,6 @@ export class AddonModPageIndexComponent implements OnInit, OnDestroy, CoreCourse
             }));
 
             return Promise.all(promises);
-        }).catch((error) => {
-            // Error getting data, fail.
-            this.domUtils.showErrorModalDefault(error, 'addon.mod_page.errorwhileloadingthepage', true);
-        }).finally(() => {
-            this.loaded = true;
-            this.refreshIcon = 'refresh';
         });
     }
-
-    ngOnDestroy(): void {
-        this.isDestroyed = true;
-        this.statusObserver && this.statusObserver.off();
-    }
 }

src/addon/mod/page/pages/index/index.html

@@ -12,5 +12,5 @@
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
 
-    <addon-mod-page-index [module]="module" [courseId]="courseId" (pageRetrieved)="updateData($event)"></addon-mod-page-index>
+    <addon-mod-page-index [module]="module" [courseId]="courseId" (dataRetrieved)="updateData($event)"></addon-mod-page-index>
 </ion-content>

src/addon/mod/resource/components/index/index.ts

@@ -12,14 +12,14 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { Component, OnInit, OnDestroy, Input, Output, EventEmitter } from '@angular/core';
+import { Component } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
 import { CoreAppProvider } from '@providers/app';
 import { CoreDomUtilsProvider } from '@providers/utils/dom';
 import { CoreTextUtilsProvider } from '@providers/utils/text';
 import { CoreCourseProvider } from '@core/course/providers/course';
 import { CoreCourseHelperProvider } from '@core/course/providers/helper';
-import { CoreCourseModuleMainComponent } from '@core/course/providers/module-delegate';
+import { CoreCourseModuleMainResourceComponent } from '@core/course/classes/main-resource-component';
 import { AddonModResourceProvider } from '../../providers/resource';
 import { AddonModResourcePrefetchHandler } from '../../providers/prefetch-handler';
 import { AddonModResourceHelperProvider } from '../../providers/helper';
@@ -31,36 +31,20 @@ import { AddonModResourceHelperProvider } from '../../providers/helper';
     selector: 'addon-mod-resource-index',
     templateUrl: 'index.html',
 })
-export class AddonModResourceIndexComponent implements OnInit, OnDestroy, CoreCourseModuleMainComponent {
+export class AddonModResourceIndexComponent extends CoreCourseModuleMainResourceComponent {
-    @Input() module: any; // The module of the resource.
-    @Input() courseId: number; // Course ID the resource belongs to.
-    @Output() resourceRetrieved?: EventEmitter<any>;
-
-    loaded: boolean;
     component = AddonModResourceProvider.COMPONENT;
-    componentId: number;
 
     canGetResource: boolean;
     mode: string;
     src: string;
     contentText: string;
 
-    // Data for context menu.
-    externalUrl: string;
-    description: string;
-    refreshIcon: string;
-    prefetchStatusIcon: string;
-    prefetchText: string;
-    size: string;
-
-    protected isDestroyed = false;
-    protected statusObserver;
-
     constructor(private resourceProvider: AddonModResourceProvider, private courseProvider: CoreCourseProvider,
-            private domUtils: CoreDomUtilsProvider, private appProvider: CoreAppProvider, private textUtils: CoreTextUtilsProvider,
+            protected domUtils: CoreDomUtilsProvider, private appProvider: CoreAppProvider,
-            private courseHelper: CoreCourseHelperProvider, private translate: TranslateService,
+            protected textUtils: CoreTextUtilsProvider, protected courseHelper: CoreCourseHelperProvider,
-            private prefetchHandler: AddonModResourcePrefetchHandler, private resourceHelper: AddonModResourceHelperProvider) {
+            protected translate: TranslateService, private prefetchHandler: AddonModResourcePrefetchHandler,
-        this.resourceRetrieved = new EventEmitter();
+            private resourceHelper: AddonModResourceHelperProvider) {
+        super(textUtils, courseHelper, translate, domUtils);
 
     }
 
@@ -68,15 +52,11 @@ export class AddonModResourceIndexComponent implements OnInit, OnDestroy, CoreCo
      * Component being initialized.
      */
     ngOnInit(): void {
-        this.description = this.module.description;
+        super.ngOnInit();
-        this.componentId = this.module.id;
-        this.externalUrl = this.module.url;
-        this.loaded = false;
-        this.refreshIcon = 'spinner';
 
         this.canGetResource = this.resourceProvider.isGetResourceWSAvailable();
 
-        this.fetchContent().then(() => {
+        this.loadContent().then(() => {
             this.resourceProvider.logView(this.module.instance).then(() => {
                 this.courseProvider.checkModuleCompletion(this.courseId, this.module.completionstatus);
             });
@@ -84,49 +64,12 @@ export class AddonModResourceIndexComponent implements OnInit, OnDestroy, CoreCo
     }
 
     /**
-     * Refresh the data.
+     * Perform the invalidate content function.
      *
-     * @param {any} [refresher] Refresher.
+     * @return {Promise<any>} Resolved when done.
-     * @param {Function} [done] Function to call when done.
-     * @return {Promise<any>} Promise resolved when done.
      */
-    doRefresh(refresher?: any, done?: () => void): Promise<any> {
+    protected invalidateContent(): Promise<any> {
-        if (this.loaded) {
+        return this.resourceProvider.invalidateContent(this.module.id, this.courseId);
-            this.refreshIcon = 'spinner';
-
-            return this.resourceProvider.invalidateContent(this.module.id, this.courseId).catch(() => {
-                // Ignore errors.
-            }).then(() => {
-                return this.fetchContent(true);
-            }).finally(() => {
-                this.refreshIcon = 'refresh';
-                refresher && refresher.complete();
-                done && done();
-            });
-        }
-
-        return Promise.resolve();
-    }
-
-    /**
-     * Expand the description.
-     */
-    expandDescription(): void {
-        this.textUtils.expandText(this.translate.instant('core.description'), this.description, this.component, this.module.id);
-    }
-
-    /**
-     * Prefetch the module.
-     */
-    prefetch(): void {
-        this.courseHelper.contextMenuPrefetch(this, this.module, this.courseId);
-    }
-
-    /**
-     * Confirm and remove downloaded files.
-     */
-    removeFiles(): void {
-        this.courseHelper.confirmAndRemoveFiles(this.module, this.courseId);
     }
 
     /**
@@ -155,7 +98,7 @@ export class AddonModResourceIndexComponent implements OnInit, OnDestroy, CoreCo
         }).then((resource) => {
             if (resource) {
                 this.description = resource.intro || resource.description;
-                this.resourceRetrieved.emit(resource);
+                this.dataRetrieved.emit(resource);
             }
 
             if (this.resourceHelper.isDisplayedInIframe(this.module)) {
@@ -196,13 +139,7 @@ export class AddonModResourceIndexComponent implements OnInit, OnDestroy, CoreCo
             }
         }).then(() => {
             // All data obtained, now fill the context menu.
-            this.courseHelper.fillContextMenu(this, this.module, this.courseId, refresh, this.component);
+            this.fillContextMenu(refresh);
-        }).catch((error) => {
-            // Error getting data, fail.
-            this.domUtils.showErrorModalDefault(error, 'core.course.errorgetmodule', true);
-        }).finally(() => {
-            this.loaded = true;
-            this.refreshIcon = 'refresh';
         });
     }
 
@@ -212,9 +149,4 @@ export class AddonModResourceIndexComponent implements OnInit, OnDestroy, CoreCo
     open(): void {
         this.resourceHelper.openModuleFile(this.module, this.courseId);
     }
-
-    ngOnDestroy(): void {
-        this.isDestroyed = true;
-        this.statusObserver && this.statusObserver.off();
-    }
 }

src/addon/mod/resource/pages/index/index.html

@@ -12,5 +12,5 @@
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
 
-    <addon-mod-resource-index [module]="module" [courseId]="courseId" (resourceRetrieved)="updateData($event)"></addon-mod-resource-index>
+    <addon-mod-resource-index [module]="module" [courseId]="courseId" (dataRetrieved)="updateData($event)"></addon-mod-resource-index>
 </ion-content>

src/core/course/classes/main-resource-component.ts

@@ -0,0 +1,167 @@
+// (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 { OnInit, OnDestroy, Input, Output, EventEmitter } from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
+import { CoreDomUtilsProvider } from '@providers/utils/dom';
+import { CoreTextUtilsProvider } from '@providers/utils/text';
+import { CoreCourseHelperProvider } from '@core/course/providers/helper';
+import { CoreCourseModuleMainComponent } from '@core/course/providers/module-delegate';
+
+/**
+ * Template class to easily create CoreCourseModuleMainComponent of resources (or activities without syncing).
+ */
+export class CoreCourseModuleMainResourceComponent implements OnInit, OnDestroy, CoreCourseModuleMainComponent {
+    @Input() module: any; // The module of the component.
+    @Input() courseId: number; // Course ID the component belongs to.
+    @Output() dataRetrieved?: EventEmitter<any>; // Called to notify changes the index page from the main component.
+
+    loaded: boolean; // If the component has been loaded.
+    component: string; // Component name.
+    componentId: number; // Component ID.
+
+    // Data for context menu.
+    externalUrl: string; // External URL to open in browser.
+    description: string; // Module description.
+    refreshIcon: string; // Refresh icon, normally spinner or refresh.
+    prefetchStatusIcon: string; // Used when calling fillContextMenu.
+    prefetchText: string; // Used when calling fillContextMenu.
+    size: string; // Used when calling fillContextMenu.
+
+    protected isDestroyed; // Whether the component is destroyed, used when calling fillContextMenu.
+    protected statusObserver; // Observer of package status changed, used when calling fillContextMenu.
+    protected fetchContentDefaultError = 'core.course.errorgetmodule'; // Default error to show when loading contents.
+
+    constructor(protected textUtils: CoreTextUtilsProvider, protected courseHelper: CoreCourseHelperProvider,
+            protected translate: TranslateService, protected domUtils: CoreDomUtilsProvider) {
+        this.dataRetrieved = new EventEmitter();
+    }
+
+    /**
+     * Component being initialized.
+     */
+    ngOnInit(): void {
+        this.description = this.module.description;
+        this.componentId = this.module.id;
+        this.externalUrl = this.module.url;
+        this.loaded = false;
+        this.refreshIcon = 'spinner';
+    }
+
+    /**
+     * Refresh the data.
+     *
+     * @param {any} [refresher] Refresher.
+     * @param {Function} [done] Function to call when done.
+     * @return {Promise<any>} Promise resolved when done.
+     */
+    doRefresh(refresher?: any, done?: () => void): Promise<any> {
+        if (this.loaded) {
+            this.refreshIcon = 'spinner';
+
+            return this.refreshContent().finally(() => {
+                this.refreshIcon = 'refresh';
+                refresher && refresher.complete();
+                done && done();
+            });
+        }
+
+        return Promise.resolve();
+    }
+
+    /**
+     * Perform the refresh content function.
+     *
+     * @return {Promise<any>} Resolved when done.
+     */
+    protected refreshContent(): Promise<any> {
+        return this.invalidateContent().catch(() => {
+            // Ignore errors.
+        }).then(() => {
+            return this.loadContent(true);
+        });
+    }
+
+    /**
+     * Perform the invalidate content function.
+     *
+     * @return {Promise<any>} Resolved when done.
+     */
+    protected invalidateContent(): Promise<any> {
+        return Promise.resolve();
+    }
+
+    /**
+     * Download the component contents.
+     *
+     * @param {boolean} [refresh] Whether we're refreshing data.
+     * @return {Promise<any>} Promise resolved when done.
+     */
+    protected fetchContent(refresh?: boolean): Promise<any> {
+        return Promise.resolve();
+    }
+
+    /**
+     * Loads the component contents and shows the corresponding error.
+     *
+     * @param {boolean} [refresh] Whether we're refreshing data.
+     * @return {Promise<any>} Promise resolved when done.
+     */
+    protected loadContent(refresh?: boolean): Promise<any> {
+        return this.fetchContent(refresh).catch((error) => {
+            // Error getting data, fail.
+            this.domUtils.showErrorModalDefault(error, this.fetchContentDefaultError, true);
+        }).finally(() => {
+            this.loaded = true;
+            this.refreshIcon = 'refresh';
+        });
+    }
+
+    /**
+     * Fill the context menu options
+     */
+    protected fillContextMenu(refresh: boolean = false): void {
+        // All data obtained, now fill the context menu.
+        this.courseHelper.fillContextMenu(this, this.module, this.courseId, refresh, this.component);
+    }
+
+    /**
+     * Expand the description.
+     */
+    expandDescription(): void {
+        this.textUtils.expandText(this.translate.instant('core.description'), this.description, this.component, this.module.id);
+    }
+
+    /**
+     * Prefetch the module.
+     */
+    prefetch(): void {
+        this.courseHelper.contextMenuPrefetch(this, this.module, this.courseId);
+    }
+
+    /**
+     * Confirm and remove downloaded files.
+     */
+    removeFiles(): void {
+        this.courseHelper.confirmAndRemoveFiles(this.module, this.courseId);
+    }
+
+    /**
+     * Component being destroyed.
+     */
+    ngOnDestroy(): void {
+        this.isDestroyed = true;
+        this.statusObserver && this.statusObserver.off();
+    }
+}