MOBILE-2325 badges: Issued badge page

src/addon/badges/pages/issued-badge/issued-badge.html

@@ -0,0 +1,87 @@
+<ion-header>
+    <ion-navbar>
+        <ion-title>{{badge.name}}</ion-title>
+    </ion-navbar>
+</ion-header>
+<ion-content>
+    <ion-refresher [enabled]="badgeLoaded" (ionRefresh)="refreshEvent($event)">
+        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
+    </ion-refresher>
+    <core-loading [hideUntil]="badgeLoaded">
+
+        <div class="list">
+            <div class="item item-text-wrap item-avatar-center">
+                <img *ngIf="badge.badgeurl" class="avatar" src="{{badge.badgeurl}}" core-external-content alt="{{badge.name}}" role="presentation">
+                <span *ngIf="badge.dateexpire && currentTime >= badge.dateexpire" class="badge badge-assertive">
+                        {{ 'addon.badges.expired' | translate }}
+                </span>
+            </div>
+        </div>
+
+        <div class="list" *ngIf="user.fullname">
+            <div class="item item-divider">
+                <h2>{{ 'addon.badges.recipientdetails' | translate}}</h2>
+            </div>
+            <div class="item">
+                <p class="item-heading">{{ 'core.name' | translate}}</p>
+                <p>
+                    <core-format-text watch="true" clean="true" [text]="user.fullname"></core-format-text>
+                </p>
+            </div>
+        </div>
+
+        <div class="list">
+            <div class="item item-divider">
+                <h2>{{ 'addon.badges.issuerdetails' | translate}}</h2>
+            </div>
+            <div class="item" *ngIf="badge.issuername">
+                <p class="item-heading">{{ 'addon.badges.issuername' | translate}}</p>
+                <p>
+                    <core-format-text watch="true" clean="true" [text]="badge.issuername"></core-format-text>
+                </p>
+            </div>
+            <div class="item" *ngIf="badge.issuercontact">
+                <p class="item-heading">{{ 'addon.badges.contact' | translate}}</p>
+                <p>
+                    <core-format-text watch="true" clean="true" [text]="badge.issuercontact"></core-format-text>
+                </p>
+            </div>
+        </div>
+
+        <div class="list">
+            <div class="item item-divider">
+                <h2>{{ 'addon.badges.badgedetails' | translate}}</h2>
+            </div>
+            <div class="item" *ngIf="badge.name">
+                <p class="item-heading">{{ 'core.name' | translate}}</p>
+                <p>{{badge.name}}</p>
+            </div>
+            <div class="item item-text-wrap" *ngIf="badge.description">
+                <p class="item-heading">{{ 'core.description' | translate}}</p>
+                <p>
+                    <core-format-text watch="true" clean="true" [text]="badge.description"></core-format-text>
+                </p>
+            </div>
+            <div class="item item-text-wrap" *ngIf="course.fullname">
+                <p class="item-heading">{{ 'core.course' | translate}}</p>
+                <p>
+                    <core-format-text watch="true" clean="true" [text]="course.fullname"></core-format-text>
+                </p>
+            </div>
+        </div>
+
+        <div class="list">
+            <div class="item item-divider">
+                <h2>{{ 'addon.badges.issuancedetails' | translate}}</h2>
+            </div>
+            <div class="item" *ngIf="badge.dateissued">
+                <p class="item-heading">{{ 'addon.badges.dateawarded' | translate}}</p>
+                <p>{{badge.dateissued | coreToLocaleString }}</p>
+            </div>
+            <div class="item item-text-wrap" *ngIf="badge.dateexpire">
+                <p class="item-heading">{{ 'addon.badges.expirydate' | translate}}</p>
+                <p>{{badge.dateexpire | coreToLocaleString }}</p>
+            </div>
+        </div>
+    </core-loading>
+</ion-content>

src/addon/badges/pages/issued-badge/issued-badge.module.ts

@@ -0,0 +1,35 @@
+// (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 { NgModule } from '@angular/core';
+import { IonicPageModule } from 'ionic-angular';
+import { TranslateModule } from '@ngx-translate/core';
+import { CoreComponentsModule } from '../../../../components/components.module';
+import { CoreDirectivesModule } from '../../../../directives/directives.module';
+import { CorePipesModule } from '../../../../pipes/pipes.module';
+import { AddonBadgesIssuedBadgePage } from './issued-badge';
+
+@NgModule({
+    declarations: [
+        AddonBadgesIssuedBadgePage,
+    ],
+    imports: [
+        CoreComponentsModule,
+        CoreDirectivesModule,
+        CorePipesModule,
+        IonicPageModule.forChild(AddonBadgesIssuedBadgePage),
+        TranslateModule.forChild()
+    ],
+})
+export class AddonBadgesIssuedBadgePageModule {}

src/addon/badges/pages/issued-badge/issued-badge.ts

@@ -0,0 +1,114 @@
+// (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, ViewChild } from '@angular/core';
+import { IonicPage, Content, PopoverController, NavParams } from 'ionic-angular';
+import { TranslateService } from '@ngx-translate/core';
+import { AddonBadgesProvider } from '../../providers/badges';
+import { CoreTimeUtilsProvider } from '../../../../providers/utils/time';
+import { CoreDomUtilsProvider } from '../../../../providers/utils/dom';
+import { CoreSitesProvider } from '../../../../providers/sites';
+import { CoreUserProvider } from '../../../../core/user/providers/user';
+import { CoreCoursesProvider } from '../../../../core/courses/providers/courses';
+
+/**
+ * Page that displays the list of calendar events.
+ */
+@IonicPage({ segment: 'addon-badges-issued-badge' })
+@Component({
+    selector: 'page-addon-badges-issued-badge',
+    templateUrl: 'issued-badge.html',
+})
+export class AddonBadgesIssuedBadgePage {
+    @ViewChild(Content) content: Content;
+
+    courseId: number;
+    userId: number;
+    badgeHash: string;
+    user: any = {};
+    course: any = {};
+    badge: any = {};
+
+    badgeLoaded = false;
+    currentTime = 0;
+
+    constructor(private translate: TranslateService, private badgesProvider: AddonBadgesProvider, navParams: NavParams,
+            private domUtils: CoreDomUtilsProvider, private timeUtils: CoreTimeUtilsProvider,
+            private sitesProvider: CoreSitesProvider, private userProvider: CoreUserProvider,
+            private coursesProvider: CoreCoursesProvider) {
+
+        this.courseId = navParams.get('courseId') || 0; // Use 0 for site badges.
+        this.userId = navParams.get('userId') || sitesProvider.getCurrentSite().getUserId();
+        this.badgeHash = navParams.get('badgeHash');
+    }
+
+    /**
+     * View loaded.
+     */
+    ionViewDidLoad(): void {
+
+        this.fetchIssuedBadge().finally(() => {
+            this.badgeLoaded = true;
+        });
+    }
+
+    /**
+     * Fetch the issued badge required for the view.
+     *
+     * @return {Promise<any>} Promise resolved when done.
+     */
+    fetchIssuedBadge(): Promise<any> {
+        const promises = [];
+
+        this.currentTime = this.timeUtils.timestamp();
+        let promise = this.userProvider.getProfile(this.userId, this.courseId, true).then((user) => {
+            this.user = user;
+        });
+        promises.push(promise);
+
+        promise = this.badgesProvider.getUserBadges(this.courseId, this.userId).then((badges) => {
+            badges.forEach((badge) => {
+                if (this.badgeHash == badge.uniquehash) {
+                    this.badge = badge;
+                    if (badge.courseid) {
+                        return this.coursesProvider.getUserCourse(badge.courseid, true).then((course) => {
+                            this.course = course;
+                        }).catch(() => {
+                            // Maybe an old deleted course.
+                            this.course = null;
+                        });
+                    }
+                }
+            });
+        }).catch((message) => {
+            this.domUtils.showErrorModalDefault(message, 'Error getting badge data.');
+        });
+        promises.push(promise);
+
+        return Promise.all(promises);
+    }
+
+    /**
+     * Refresh the badges.
+     *
+     * @param {any} refresher Refresher.
+     */
+    refreshBadges(refresher: any): void {
+        this.badgesProvider.invalidateUserBadges(this.courseId, this.userId).finally(() => {
+            this.fetchIssuedBadge().finally(() => {
+                refresher.complete();
+            });
+        });
+    }
+}

src/addon/badges/pages/user-badges/user-badges.ts

@@ -39,11 +39,11 @@ export class AddonBadgesUserBadgesPage {
     badgesLoaded = false;
     badges = [];
     currentTime = 0;
-    badgeHash = '';
+    badgeHash: string;
 
-    constructor(private translate: TranslateService, private badgesProvider: AddonBadgesProvider, navParams: NavParams,
+    constructor(private translate: TranslateService, private badgesProvider: AddonBadgesProvider,
-            private domUtils: CoreDomUtilsProvider, private timeUtils: CoreTimeUtilsProvider,
+            navParams: NavParams, private domUtils: CoreDomUtilsProvider, private timeUtils: CoreTimeUtilsProvider,
-            sitesProvider: CoreSitesProvider, private navCtrl: NavController) {
+            private sitesProvider: CoreSitesProvider) {
 
         this.courseId = navParams.get('courseId') || 0; // Use 0 for site badges.
         this.userId = navParams.get('userId') || sitesProvider.getCurrentSite().getUserId();
@@ -55,6 +55,10 @@ export class AddonBadgesUserBadgesPage {
     ionViewDidLoad(): void {
 
         this.fetchBadges().finally(() => {
+            if (!this.badgeHash && this.splitviewCtrl.isOn() && this.badges.length > 0) {
+                // Take first and load it.
+                this.loadIssuedBadge(this.badges[0].uniquehash);
+            }
             this.badgesLoaded = true;
         });
     }
@@ -70,13 +74,7 @@ export class AddonBadgesUserBadgesPage {
         return this.badgesProvider.getUserBadges(this.courseId, this.userId).then((badges) => {
             this.badges = badges;
         }).catch((message) => {
-            if (message) {
+            this.domUtils.showErrorModalDefault(message, 'Error getting badges data.');
-                this.domUtils.showErrorModal(message);
-            } else {
-                this.domUtils.showErrorModal('Error getting badges data.');
-            }
-
-            return Promise.reject(null);
         });
     }
 
@@ -100,6 +98,7 @@ export class AddonBadgesUserBadgesPage {
      */
     loadIssuedBadge(badgeHash: string): void {
         this.badgeHash = badgeHash;
-        //this.splitviewCtrl.push('', { id:  });
+        const params = {courseId: this.courseId, userId: this.userId, badgeHash: badgeHash};
+        this.splitviewCtrl.push('AddonBadgesIssuedBadgePage', params);
     }
 }