MOBILE-3926 badges: Implement swipe navigation
Noel De Martin
parent
7857e5b79c
commit
9987c3bcf9
|
|
@ -0,0 +1,42 @@
|
|||
// (C) Copyright 2015 Moodle Pty Ltd.
|
||||
//
|
||||
// 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 { CoreItemsManagerSource } from '@classes/items-management/items-manager-source';
|
||||
import { AddonBadges, AddonBadgesUserBadge } from '../services/badges';
|
||||
|
||||
/**
|
||||
* Provides a collection of user badges.
|
||||
*/
|
||||
export class AddonBadgesUserBadgesSource extends CoreItemsManagerSource<AddonBadgesUserBadge> {
|
||||
|
||||
readonly COURSE_ID: number;
|
||||
readonly USER_ID: number;
|
||||
|
||||
constructor(courseId: number, userId: number) {
|
||||
super();
|
||||
|
||||
this.COURSE_ID = courseId;
|
||||
this.USER_ID = userId;
|
||||
}
|
||||
|
||||
/**
|
||||
* @inheritdoc
|
||||
*/
|
||||
protected async loadPageItems(): Promise<{ items: AddonBadgesUserBadge[]; hasMoreItems: boolean }> {
|
||||
const badges = await AddonBadges.getUserBadges(this.COURSE_ID, this.USER_ID);
|
||||
|
||||
return { items: badges, hasMoreItems: false };
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -10,239 +10,241 @@
|
|||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content>
|
||||
<ion-refresher slot="fixed" [disabled]="!badgeLoaded" (ionRefresh)="refreshBadges($event.target)">
|
||||
<ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
|
||||
</ion-refresher>
|
||||
<core-loading [hideUntil]="badgeLoaded">
|
||||
<ion-item-group *ngIf="badge">
|
||||
<ion-item class="ion-text-wrap ion-text-center">
|
||||
<ion-label>
|
||||
<img *ngIf="badge.badgeurl" class="large-avatar" [src]="badge.badgeurl" core-external-content [alt]="badge.name" />
|
||||
<ion-badge color="danger" *ngIf="badge.dateexpire && currentTime >= badge.dateexpire">
|
||||
{{ 'addon.badges.expired' | translate }}
|
||||
</ion-badge>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
</ion-item-group>
|
||||
|
||||
<ion-item-group *ngIf="user">
|
||||
<ion-item-divider>
|
||||
<ion-label>
|
||||
<h2>{{ 'addon.badges.recipientdetails' | translate}}</h2>
|
||||
</ion-label>
|
||||
</ion-item-divider>
|
||||
<ion-item class="ion-text-wrap">
|
||||
<ion-label>
|
||||
<h2>{{ 'core.name' | translate}}</h2>
|
||||
<p>{{ user.fullname }}</p>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
</ion-item-group>
|
||||
|
||||
<ng-container *ngIf="badge">
|
||||
<ion-item-group>
|
||||
<ion-item-divider>
|
||||
<core-swipe-navigation [manager]="badges">
|
||||
<ion-refresher slot="fixed" [disabled]="!badgeLoaded" (ionRefresh)="refreshBadges($event.target)">
|
||||
<ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
|
||||
</ion-refresher>
|
||||
<core-loading [hideUntil]="badgeLoaded">
|
||||
<ion-item-group *ngIf="badge">
|
||||
<ion-item class="ion-text-wrap ion-text-center">
|
||||
<ion-label>
|
||||
<h2>{{ 'addon.badges.issuerdetails' | translate}}</h2>
|
||||
</ion-label>
|
||||
</ion-item-divider>
|
||||
<ion-item class="ion-text-wrap" *ngIf="badge.issuername">
|
||||
<ion-label>
|
||||
<h2>{{ 'addon.badges.issuername' | translate}}</h2>
|
||||
<p>{{ badge.issuername }}</p>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
<ion-item class="ion-text-wrap" *ngIf="badge.issuercontact">
|
||||
<ion-label>
|
||||
<h2>{{ 'addon.badges.contact' | translate}}</h2>
|
||||
<p><a href="mailto:{{badge.issuercontact}}" core-link auto-login="no" [showBrowserWarning]="false">
|
||||
{{ badge.issuercontact }}
|
||||
</a></p>
|
||||
<img *ngIf="badge.badgeurl" class="large-avatar" [src]="badge.badgeurl" core-external-content [alt]="badge.name" />
|
||||
<ion-badge color="danger" *ngIf="badge.dateexpire && currentTime >= badge.dateexpire">
|
||||
{{ 'addon.badges.expired' | translate }}
|
||||
</ion-badge>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
</ion-item-group>
|
||||
|
||||
<ion-item-group>
|
||||
<ion-item-group *ngIf="user">
|
||||
<ion-item-divider>
|
||||
<ion-label>
|
||||
<h2>{{ 'addon.badges.badgedetails' | translate}}</h2>
|
||||
<h2>{{ 'addon.badges.recipientdetails' | translate}}</h2>
|
||||
</ion-label>
|
||||
</ion-item-divider>
|
||||
<ion-item class="ion-text-wrap" *ngIf="badge.name">
|
||||
<ion-item class="ion-text-wrap">
|
||||
<ion-label>
|
||||
<h2>{{ 'core.name' | translate}}</h2>
|
||||
<p>{{ badge.name }}</p>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
<ion-item class="ion-text-wrap" *ngIf="badge.version">
|
||||
<ion-label>
|
||||
<h2>{{ 'addon.badges.version' | translate}}</h2>
|
||||
<p>{{ badge.version }}</p>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
<ion-item class="ion-text-wrap" *ngIf="badge.language">
|
||||
<ion-label>
|
||||
<h2>{{ 'addon.badges.language' | translate}}</h2>
|
||||
<p>{{ badge.language }}</p>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
<ion-item class="ion-text-wrap" *ngIf="badge.description">
|
||||
<ion-label>
|
||||
<h2>{{ 'core.description' | translate}}</h2>
|
||||
<p>{{ badge.description }}</p>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
<ion-item class="ion-text-wrap" *ngIf="badge.imageauthorname">
|
||||
<ion-label>
|
||||
<h2>{{ 'addon.badges.imageauthorname' | translate}}</h2>
|
||||
<p>{{ badge.imageauthorname }}</p>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
<ion-item class="ion-text-wrap" *ngIf="badge.imageauthoremail">
|
||||
<ion-label>
|
||||
<h2>{{ 'addon.badges.imageauthoremail' | translate}}</h2>
|
||||
<p><a href="mailto:{{badge.imageauthoremail}}" core-link auto-login="no" [showBrowserWarning]="false">
|
||||
{{ badge.imageauthoremail }}
|
||||
</a></p>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
<ion-item class="ion-text-wrap" *ngIf="badge.imageauthorurl">
|
||||
<ion-label>
|
||||
<h2>{{ 'addon.badges.imageauthorurl' | translate}}</h2>
|
||||
<p><a [href]="badge.imageauthorurl" core-link auto-login="no"> {{ badge.imageauthorurl }} </a></p>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
<ion-item class="ion-text-wrap" *ngIf="badge.imagecaption">
|
||||
<ion-label>
|
||||
<h2>{{ 'addon.badges.imagecaption' | translate}}</h2>
|
||||
<p>{{ badge.imagecaption }}</p>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
<ion-item class="ion-text-wrap" *ngIf="course">
|
||||
<ion-label>
|
||||
<h2>{{ 'core.course' | translate}}</h2>
|
||||
<p>
|
||||
<core-format-text [text]="course.fullname" contextLevel="course" [contextInstanceId]="courseId">
|
||||
</core-format-text>
|
||||
</p>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
<!-- Criteria (not yet available) -->
|
||||
</ion-item-group>
|
||||
|
||||
<ion-item-group>
|
||||
<ion-item-divider>
|
||||
<ion-label>
|
||||
<h2>{{ 'addon.badges.issuancedetails' | translate}}</h2>
|
||||
</ion-label>
|
||||
</ion-item-divider>
|
||||
<ion-item class="ion-text-wrap" *ngIf="badge.dateissued">
|
||||
<ion-label>
|
||||
<h2>{{ 'addon.badges.dateawarded' | translate}}</h2>
|
||||
<p>{{badge.dateissued * 1000 | coreFormatDate }}</p>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
<ion-item class="ion-text-wrap" *ngIf="badge.dateexpire">
|
||||
<ion-label>
|
||||
<h2>{{ 'addon.badges.expirydate' | translate}}</h2>
|
||||
<p>
|
||||
{{ badge.dateexpire * 1000 | coreFormatDate }}
|
||||
<span class="text-danger" *ngIf="currentTime >= badge.dateexpire">
|
||||
{{ 'addon.badges.warnexpired' | translate }}
|
||||
</span>
|
||||
</p>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
<!-- Evidence (not yet available) -->
|
||||
</ion-item-group>
|
||||
|
||||
<!-- Endorsement -->
|
||||
<ion-item-group *ngIf="badge.endorsement">
|
||||
<ion-item-divider>
|
||||
<ion-label>
|
||||
<h2>{{ 'addon.badges.bendorsement' | translate}}</h2>
|
||||
</ion-label>
|
||||
</ion-item-divider>
|
||||
<ion-item class="ion-text-wrap" *ngIf="badge.endorsement.issuername">
|
||||
<ion-label>
|
||||
<h2>{{ 'addon.badges.issuername' | translate}}</h2>
|
||||
<p>{{ badge.endorsement.issuername }}</p>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
<ion-item class="ion-text-wrap" *ngIf="badge.endorsement.issueremail">
|
||||
<ion-label>
|
||||
<h2>{{ 'addon.badges.issueremail' | translate}}</h2>
|
||||
<p>
|
||||
<a href="mailto:{{badge.endorsement.issueremail}}" core-link auto-login="no" [showBrowserWarning]="false">
|
||||
{{ badge.endorsement.issueremail }}
|
||||
</a>
|
||||
</p>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
<ion-item class="ion-text-wrap" *ngIf="badge.endorsement.issuerurl">
|
||||
<ion-label>
|
||||
<h2>{{ 'addon.badges.issuerurl' | translate}}</h2>
|
||||
<p><a [href]="badge.endorsement.issuerurl" core-link auto-login="no"> {{ badge.endorsement.issuerurl }} </a></p>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
<ion-item class="ion-text-wrap" *ngIf="badge.endorsement.dateissued">
|
||||
<ion-label>
|
||||
<h2>{{ 'addon.badges.dateawarded' | translate}}</h2>
|
||||
<p>{{ badge.endorsement.dateissued * 1000 | coreFormatDate }}</p>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
<ion-item class="ion-text-wrap" *ngIf="badge.endorsement.claimid">
|
||||
<ion-label>
|
||||
<h2>{{ 'addon.badges.claimid' | translate}}</h2>
|
||||
<p><a [href]="badge.endorsement.claimid" core-link auto-login="no"> {{ badge.endorsement.claimid }} </a></p>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
<ion-item class="ion-text-wrap" *ngIf="badge.endorsement.claimcomment">
|
||||
<ion-label>
|
||||
<h2>{{ 'addon.badges.claimcomment' | translate}}</h2>
|
||||
<p>{{ badge.endorsement.claimcomment }}</p>
|
||||
<p>{{ user.fullname }}</p>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
</ion-item-group>
|
||||
|
||||
<!-- Related badges -->
|
||||
<ion-item-group *ngIf="badge.relatedbadges">
|
||||
<ion-item-divider>
|
||||
<ion-label>
|
||||
<h2>{{ 'addon.badges.relatedbages' | translate}}</h2>
|
||||
</ion-label>
|
||||
</ion-item-divider>
|
||||
<ion-item class="ion-text-wrap" *ngFor="let relatedBadge of badge.relatedbadges">
|
||||
<ion-label>
|
||||
<h2>{{ relatedBadge.name }}</h2>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
<ion-item class="ion-text-wrap" *ngIf="badge.relatedbadges.length == 0">
|
||||
<ion-label>
|
||||
<h2>{{ 'addon.badges.norelated' | translate}}</h2>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
</ion-item-group>
|
||||
<ng-container *ngIf="badge">
|
||||
<ion-item-group>
|
||||
<ion-item-divider>
|
||||
<ion-label>
|
||||
<h2>{{ 'addon.badges.issuerdetails' | translate}}</h2>
|
||||
</ion-label>
|
||||
</ion-item-divider>
|
||||
<ion-item class="ion-text-wrap" *ngIf="badge.issuername">
|
||||
<ion-label>
|
||||
<h2>{{ 'addon.badges.issuername' | translate}}</h2>
|
||||
<p>{{ badge.issuername }}</p>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
<ion-item class="ion-text-wrap" *ngIf="badge.issuercontact">
|
||||
<ion-label>
|
||||
<h2>{{ 'addon.badges.contact' | translate}}</h2>
|
||||
<p><a href="mailto:{{badge.issuercontact}}" core-link auto-login="no" [showBrowserWarning]="false">
|
||||
{{ badge.issuercontact }}
|
||||
</a></p>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
</ion-item-group>
|
||||
|
||||
<!-- Competencies alignment -->
|
||||
<ion-item-group *ngIf="badge.alignment">
|
||||
<ion-item-divider>
|
||||
<ion-label>
|
||||
<h2>{{ 'addon.badges.alignment' | translate}}</h2>
|
||||
</ion-label>
|
||||
</ion-item-divider>
|
||||
<ion-item class="ion-text-wrap" *ngFor="let alignment of badge.alignment" [href]="alignment.targeturl" core-link
|
||||
auto-login="no">
|
||||
<ion-label>
|
||||
<h2>{{ alignment.targetname }}</h2>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
<ion-item class="ion-text-wrap" *ngIf="badge.alignment.length == 0">
|
||||
<ion-label>
|
||||
<h2>{{ 'addon.badges.noalignment' | translate}}</h2>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
</ion-item-group>
|
||||
</ng-container>
|
||||
</core-loading>
|
||||
<ion-item-group>
|
||||
<ion-item-divider>
|
||||
<ion-label>
|
||||
<h2>{{ 'addon.badges.badgedetails' | translate}}</h2>
|
||||
</ion-label>
|
||||
</ion-item-divider>
|
||||
<ion-item class="ion-text-wrap" *ngIf="badge.name">
|
||||
<ion-label>
|
||||
<h2>{{ 'core.name' | translate}}</h2>
|
||||
<p>{{ badge.name }}</p>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
<ion-item class="ion-text-wrap" *ngIf="badge.version">
|
||||
<ion-label>
|
||||
<h2>{{ 'addon.badges.version' | translate}}</h2>
|
||||
<p>{{ badge.version }}</p>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
<ion-item class="ion-text-wrap" *ngIf="badge.language">
|
||||
<ion-label>
|
||||
<h2>{{ 'addon.badges.language' | translate}}</h2>
|
||||
<p>{{ badge.language }}</p>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
<ion-item class="ion-text-wrap" *ngIf="badge.description">
|
||||
<ion-label>
|
||||
<h2>{{ 'core.description' | translate}}</h2>
|
||||
<p>{{ badge.description }}</p>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
<ion-item class="ion-text-wrap" *ngIf="badge.imageauthorname">
|
||||
<ion-label>
|
||||
<h2>{{ 'addon.badges.imageauthorname' | translate}}</h2>
|
||||
<p>{{ badge.imageauthorname }}</p>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
<ion-item class="ion-text-wrap" *ngIf="badge.imageauthoremail">
|
||||
<ion-label>
|
||||
<h2>{{ 'addon.badges.imageauthoremail' | translate}}</h2>
|
||||
<p><a href="mailto:{{badge.imageauthoremail}}" core-link auto-login="no" [showBrowserWarning]="false">
|
||||
{{ badge.imageauthoremail }}
|
||||
</a></p>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
<ion-item class="ion-text-wrap" *ngIf="badge.imageauthorurl">
|
||||
<ion-label>
|
||||
<h2>{{ 'addon.badges.imageauthorurl' | translate}}</h2>
|
||||
<p><a [href]="badge.imageauthorurl" core-link auto-login="no"> {{ badge.imageauthorurl }} </a></p>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
<ion-item class="ion-text-wrap" *ngIf="badge.imagecaption">
|
||||
<ion-label>
|
||||
<h2>{{ 'addon.badges.imagecaption' | translate}}</h2>
|
||||
<p>{{ badge.imagecaption }}</p>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
<ion-item class="ion-text-wrap" *ngIf="course">
|
||||
<ion-label>
|
||||
<h2>{{ 'core.course' | translate}}</h2>
|
||||
<p>
|
||||
<core-format-text [text]="course.fullname" contextLevel="course" [contextInstanceId]="courseId">
|
||||
</core-format-text>
|
||||
</p>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
<!-- Criteria (not yet available) -->
|
||||
</ion-item-group>
|
||||
|
||||
<ion-item-group>
|
||||
<ion-item-divider>
|
||||
<ion-label>
|
||||
<h2>{{ 'addon.badges.issuancedetails' | translate}}</h2>
|
||||
</ion-label>
|
||||
</ion-item-divider>
|
||||
<ion-item class="ion-text-wrap" *ngIf="badge.dateissued">
|
||||
<ion-label>
|
||||
<h2>{{ 'addon.badges.dateawarded' | translate}}</h2>
|
||||
<p>{{badge.dateissued * 1000 | coreFormatDate }}</p>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
<ion-item class="ion-text-wrap" *ngIf="badge.dateexpire">
|
||||
<ion-label>
|
||||
<h2>{{ 'addon.badges.expirydate' | translate}}</h2>
|
||||
<p>
|
||||
{{ badge.dateexpire * 1000 | coreFormatDate }}
|
||||
<span class="text-danger" *ngIf="currentTime >= badge.dateexpire">
|
||||
{{ 'addon.badges.warnexpired' | translate }}
|
||||
</span>
|
||||
</p>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
<!-- Evidence (not yet available) -->
|
||||
</ion-item-group>
|
||||
|
||||
<!-- Endorsement -->
|
||||
<ion-item-group *ngIf="badge.endorsement">
|
||||
<ion-item-divider>
|
||||
<ion-label>
|
||||
<h2>{{ 'addon.badges.bendorsement' | translate}}</h2>
|
||||
</ion-label>
|
||||
</ion-item-divider>
|
||||
<ion-item class="ion-text-wrap" *ngIf="badge.endorsement.issuername">
|
||||
<ion-label>
|
||||
<h2>{{ 'addon.badges.issuername' | translate}}</h2>
|
||||
<p>{{ badge.endorsement.issuername }}</p>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
<ion-item class="ion-text-wrap" *ngIf="badge.endorsement.issueremail">
|
||||
<ion-label>
|
||||
<h2>{{ 'addon.badges.issueremail' | translate}}</h2>
|
||||
<p>
|
||||
<a href="mailto:{{badge.endorsement.issueremail}}" core-link auto-login="no" [showBrowserWarning]="false">
|
||||
{{ badge.endorsement.issueremail }}
|
||||
</a>
|
||||
</p>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
<ion-item class="ion-text-wrap" *ngIf="badge.endorsement.issuerurl">
|
||||
<ion-label>
|
||||
<h2>{{ 'addon.badges.issuerurl' | translate}}</h2>
|
||||
<p><a [href]="badge.endorsement.issuerurl" core-link auto-login="no"> {{ badge.endorsement.issuerurl }} </a></p>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
<ion-item class="ion-text-wrap" *ngIf="badge.endorsement.dateissued">
|
||||
<ion-label>
|
||||
<h2>{{ 'addon.badges.dateawarded' | translate}}</h2>
|
||||
<p>{{ badge.endorsement.dateissued * 1000 | coreFormatDate }}</p>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
<ion-item class="ion-text-wrap" *ngIf="badge.endorsement.claimid">
|
||||
<ion-label>
|
||||
<h2>{{ 'addon.badges.claimid' | translate}}</h2>
|
||||
<p><a [href]="badge.endorsement.claimid" core-link auto-login="no"> {{ badge.endorsement.claimid }} </a></p>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
<ion-item class="ion-text-wrap" *ngIf="badge.endorsement.claimcomment">
|
||||
<ion-label>
|
||||
<h2>{{ 'addon.badges.claimcomment' | translate}}</h2>
|
||||
<p>{{ badge.endorsement.claimcomment }}</p>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
</ion-item-group>
|
||||
|
||||
<!-- Related badges -->
|
||||
<ion-item-group *ngIf="badge.relatedbadges">
|
||||
<ion-item-divider>
|
||||
<ion-label>
|
||||
<h2>{{ 'addon.badges.relatedbages' | translate}}</h2>
|
||||
</ion-label>
|
||||
</ion-item-divider>
|
||||
<ion-item class="ion-text-wrap" *ngFor="let relatedBadge of badge.relatedbadges">
|
||||
<ion-label>
|
||||
<h2>{{ relatedBadge.name }}</h2>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
<ion-item class="ion-text-wrap" *ngIf="badge.relatedbadges.length == 0">
|
||||
<ion-label>
|
||||
<h2>{{ 'addon.badges.norelated' | translate}}</h2>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
</ion-item-group>
|
||||
|
||||
<!-- Competencies alignment -->
|
||||
<ion-item-group *ngIf="badge.alignment">
|
||||
<ion-item-divider>
|
||||
<ion-label>
|
||||
<h2>{{ 'addon.badges.alignment' | translate}}</h2>
|
||||
</ion-label>
|
||||
</ion-item-divider>
|
||||
<ion-item class="ion-text-wrap" *ngFor="let alignment of badge.alignment" [href]="alignment.targeturl" core-link
|
||||
auto-login="no">
|
||||
<ion-label>
|
||||
<h2>{{ alignment.targetname }}</h2>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
<ion-item class="ion-text-wrap" *ngIf="badge.alignment.length == 0">
|
||||
<ion-label>
|
||||
<h2>{{ 'addon.badges.noalignment' | translate}}</h2>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
</ion-item-group>
|
||||
</ng-container>
|
||||
</core-loading>
|
||||
</core-swipe-navigation>
|
||||
</ion-content>
|
||||
|
|
|
|||
|
|
@ -22,7 +22,10 @@ import { AddonBadges, AddonBadgesUserBadge } from '../../services/badges';
|
|||
import { CoreUtils } from '@services/utils/utils';
|
||||
import { CoreCourses, CoreEnrolledCourseData } from '@features/courses/services/courses';
|
||||
import { CoreNavigator } from '@services/navigator';
|
||||
import { ActivatedRoute } from '@angular/router';
|
||||
import { ActivatedRoute, ActivatedRouteSnapshot, Params } from '@angular/router';
|
||||
import { CoreSwipeItemsManager } from '@classes/items-management/swipe-items-manager';
|
||||
import { CoreItemsManagerSourcesTracker } from '@classes/items-management/items-manager-sources-tracker';
|
||||
import { AddonBadgesUserBadgesSource } from '@addons/badges/classes/user-badges-source';
|
||||
|
||||
/**
|
||||
* Page that displays the list of calendar events.
|
||||
|
|
@ -40,12 +43,11 @@ export class AddonBadgesIssuedBadgePage implements OnInit {
|
|||
user?: CoreUserProfile;
|
||||
course?: CoreEnrolledCourseData;
|
||||
badge?: AddonBadgesUserBadge;
|
||||
badges?: AddonBadgesUserBadgesSwipeManager;
|
||||
badgeLoaded = false;
|
||||
currentTime = 0;
|
||||
|
||||
constructor(
|
||||
protected route: ActivatedRoute,
|
||||
) { }
|
||||
constructor(protected route: ActivatedRoute) { }
|
||||
|
||||
/**
|
||||
* View loaded.
|
||||
|
|
@ -58,6 +60,11 @@ export class AddonBadgesIssuedBadgePage implements OnInit {
|
|||
this.fetchIssuedBadge().finally(() => {
|
||||
this.badgeLoaded = true;
|
||||
});
|
||||
|
||||
const source = CoreItemsManagerSourcesTracker.getOrCreateSource(AddonBadgesUserBadgesSource, [this.courseId, this.userId]);
|
||||
this.badges = new AddonBadgesUserBadgesSwipeManager(source);
|
||||
|
||||
this.badges.start();
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -110,3 +117,38 @@ export class AddonBadgesIssuedBadgePage implements OnInit {
|
|||
}
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Helper to manage swiping within a collection of user badges.
|
||||
*/
|
||||
class AddonBadgesUserBadgesSwipeManager extends CoreSwipeItemsManager<AddonBadgesUserBadge, AddonBadgesUserBadgesSource> {
|
||||
|
||||
/**
|
||||
* @inheritdoc
|
||||
*/
|
||||
protected getItemPath(badge: AddonBadgesUserBadge): string {
|
||||
return String(badge.uniquehash);
|
||||
}
|
||||
|
||||
/**
|
||||
* @inheritdoc
|
||||
*/
|
||||
protected getItemQueryParams(): Params {
|
||||
return {
|
||||
courseId: this.getSource().COURSE_ID,
|
||||
userId: this.getSource().USER_ID,
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* @inheritdoc
|
||||
*/
|
||||
protected getSelectedItemPath(route?: ActivatedRouteSnapshot | null): string | null {
|
||||
if (!route) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return route.params.badgeHash;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,10 +19,12 @@ import { CoreTimeUtils } from '@services/utils/time';
|
|||
import { CoreDomUtils } from '@services/utils/dom';
|
||||
import { CoreSites } from '@services/sites';
|
||||
import { CoreUtils } from '@services/utils/utils';
|
||||
import { CorePageItemsListManager } from '@classes/page-items-list-manager';
|
||||
import { Params } from '@angular/router';
|
||||
import { CoreSplitViewComponent } from '@components/split-view/split-view';
|
||||
import { CoreNavigator } from '@services/navigator';
|
||||
import { CoreListItemsManager } from '@classes/items-management/list-items-manager';
|
||||
import { AddonBadgesUserBadgesSource } from '@addons/badges/classes/user-badges-source';
|
||||
import { CoreItemsManagerSourcesTracker } from '@classes/items-management/items-manager-sources-tracker';
|
||||
|
||||
/**
|
||||
* Page that displays the list of calendar events.
|
||||
|
|
@ -34,7 +36,7 @@ import { CoreNavigator } from '@services/navigator';
|
|||
export class AddonBadgesUserBadgesPage implements AfterViewInit, OnDestroy {
|
||||
|
||||
currentTime = 0;
|
||||
badges: AddonBadgesUserBadgesManager;
|
||||
badges: AddonBadgesUserBadgesListManager;
|
||||
|
||||
@ViewChild(CoreSplitViewComponent) splitView!: CoreSplitViewComponent;
|
||||
|
||||
|
|
@ -47,7 +49,10 @@ export class AddonBadgesUserBadgesPage implements AfterViewInit, OnDestroy {
|
|||
courseId = 0;
|
||||
}
|
||||
|
||||
this.badges = new AddonBadgesUserBadgesManager(AddonBadgesUserBadgesPage, courseId, userId);
|
||||
this.badges = new AddonBadgesUserBadgesListManager(
|
||||
CoreItemsManagerSourcesTracker.getOrCreateSource(AddonBadgesUserBadgesSource, [courseId, userId]),
|
||||
AddonBadgesUserBadgesPage,
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -72,8 +77,13 @@ export class AddonBadgesUserBadgesPage implements AfterViewInit, OnDestroy {
|
|||
* @param refresher Refresher.
|
||||
*/
|
||||
async refreshBadges(refresher?: IonRefresher): Promise<void> {
|
||||
await CoreUtils.ignoreErrors(AddonBadges.invalidateUserBadges(this.badges.courseId, this.badges.userId));
|
||||
await CoreUtils.ignoreErrors(this.fetchBadges());
|
||||
await CoreUtils.ignoreErrors(
|
||||
AddonBadges.invalidateUserBadges(
|
||||
this.badges.getSource().COURSE_ID,
|
||||
this.badges.getSource().USER_ID,
|
||||
),
|
||||
);
|
||||
await CoreUtils.ignoreErrors(this.badges.reload());
|
||||
|
||||
refresher?.complete();
|
||||
}
|
||||
|
|
@ -85,39 +95,20 @@ export class AddonBadgesUserBadgesPage implements AfterViewInit, OnDestroy {
|
|||
this.currentTime = CoreTimeUtils.timestamp();
|
||||
|
||||
try {
|
||||
await this.fetchBadges();
|
||||
await this.badges.reload();
|
||||
} catch (message) {
|
||||
CoreDomUtils.showErrorModalDefault(message, 'Error loading badges');
|
||||
|
||||
this.badges.setItems([]);
|
||||
this.badges.reset();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Update the list of badges.
|
||||
*/
|
||||
private async fetchBadges(): Promise<void> {
|
||||
const badges = await AddonBadges.getUserBadges(this.badges.courseId, this.badges.userId);
|
||||
|
||||
this.badges.setItems(badges);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Helper class to manage badges.
|
||||
* Helper class to manage badges list.
|
||||
*/
|
||||
class AddonBadgesUserBadgesManager extends CorePageItemsListManager<AddonBadgesUserBadge> {
|
||||
|
||||
courseId: number;
|
||||
userId: number;
|
||||
|
||||
constructor(pageComponent: unknown, courseId: number, userId: number) {
|
||||
super(pageComponent);
|
||||
|
||||
this.courseId = courseId;
|
||||
this.userId = userId;
|
||||
}
|
||||
class AddonBadgesUserBadgesListManager extends CoreListItemsManager<AddonBadgesUserBadge, AddonBadgesUserBadgesSource> {
|
||||
|
||||
/**
|
||||
* @inheritdoc
|
||||
|
|
@ -131,8 +122,8 @@ class AddonBadgesUserBadgesManager extends CorePageItemsListManager<AddonBadgesU
|
|||
*/
|
||||
protected getItemQueryParams(): Params {
|
||||
return {
|
||||
courseId: this.courseId,
|
||||
userId: this.userId,
|
||||
courseId: this.getSource().COURSE_ID,
|
||||
userId: this.getSource().USER_ID,
|
||||
};
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -58,7 +58,7 @@ export class CoreItemsManagerSourcesTracker {
|
|||
const constructorInstances = this.getConstructorInstances(source.constructor as SourceConstructor);
|
||||
const instanceId = this.instanceIds.get(source);
|
||||
|
||||
if (!instanceId) {
|
||||
if (instanceId === undefined) {
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
@ -83,7 +83,7 @@ export class CoreItemsManagerSourcesTracker {
|
|||
const instanceId = this.instanceIds.get(source);
|
||||
const index = constructorInstances?.[instanceId ?? '']?.references.indexOf(reference) ?? -1;
|
||||
|
||||
if (!constructorInstances || !instanceId || index === -1) {
|
||||
if (!constructorInstances || instanceId === undefined || index === -1) {
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue