EVOgeek
/
Vmeda.Online
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

MOBILE-3926 badges: Implement swipe navigation

main
Noel De Martin 2021-11-17 12:35:44 +01:00
parent 7857e5b79c
commit 9987c3bcf9
5 changed files with 332 additions and 255 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
src/addons/badges/classes/user-badges-source.ts 100644
View File

@ -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 };
}
}

440
src/addons/badges/pages/issued-badge/issued-badge.html
View File

@ -10,239 +10,241 @@
</ion-toolbar> </ion-toolbar>
</ion-header> </ion-header>
<ion-content> <ion-content>
<ion-refresher slot="fixed" [disabled]="!badgeLoaded" (ionRefresh)="refreshBadges($event.target)"> <core-swipe-navigation [manager]="badges">
<ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content> <ion-refresher slot="fixed" [disabled]="!badgeLoaded" (ionRefresh)="refreshBadges($event.target)">
</ion-refresher> <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
<core-loading [hideUntil]="badgeLoaded"> </ion-refresher>
<ion-item-group *ngIf="badge"> <core-loading [hideUntil]="badgeLoaded">
<ion-item class="ion-text-wrap ion-text-center"> <ion-item-group *ngIf="badge">
<ion-label> <ion-item class="ion-text-wrap ion-text-center">
<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>
<ion-label> <ion-label>
<h2>{{ 'addon.badges.issuerdetails' | translate}}</h2> <img *ngIf="badge.badgeurl" class="large-avatar" [src]="badge.badgeurl" core-external-content [alt]="badge.name" />
</ion-label> <ion-badge color="danger" *ngIf="badge.dateexpire && currentTime >= badge.dateexpire">
</ion-item-divider> {{ 'addon.badges.expired' | translate }}
<ion-item class="ion-text-wrap" *ngIf="badge.issuername"> </ion-badge>
<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-label>
</ion-item> </ion-item>
</ion-item-group> </ion-item-group>
<ion-item-group> <ion-item-group *ngIf="user">
<ion-item-divider> <ion-item-divider>
<ion-label> <ion-label>
<h2>{{ 'addon.badges.badgedetails' | translate}}</h2> <h2>{{ 'addon.badges.recipientdetails' | translate}}</h2>
</ion-label> </ion-label>
</ion-item-divider> </ion-item-divider>
<ion-item class="ion-text-wrap" *ngIf="badge.name"> <ion-item class="ion-text-wrap">
<ion-label> <ion-label>
<h2>{{ 'core.name' | translate}}</h2> <h2>{{ 'core.name' | translate}}</h2>
<p>{{ badge.name }}</p> <p>{{ user.fullname }}</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-label>
</ion-item> </ion-item>
</ion-item-group> </ion-item-group>
<!-- Related badges --> <ng-container *ngIf="badge">
<ion-item-group *ngIf="badge.relatedbadges"> <ion-item-group>
<ion-item-divider> <ion-item-divider>
<ion-label> <ion-label>
<h2>{{ 'addon.badges.relatedbages' | translate}}</h2> <h2>{{ 'addon.badges.issuerdetails' | translate}}</h2>
</ion-label> </ion-label>
</ion-item-divider> </ion-item-divider>
<ion-item class="ion-text-wrap" *ngFor="let relatedBadge of badge.relatedbadges"> <ion-item class="ion-text-wrap" *ngIf="badge.issuername">
<ion-label> <ion-label>
<h2>{{ relatedBadge.name }}</h2> <h2>{{ 'addon.badges.issuername' | translate}}</h2>
</ion-label> <p>{{ badge.issuername }}</p>
</ion-item> </ion-label>
<ion-item class="ion-text-wrap" *ngIf="badge.relatedbadges.length == 0"> </ion-item>
<ion-label> <ion-item class="ion-text-wrap" *ngIf="badge.issuercontact">
<h2>{{ 'addon.badges.norelated' | translate}}</h2> <ion-label>
</ion-label> <h2>{{ 'addon.badges.contact' | translate}}</h2>
</ion-item> <p><a href="mailto:{{badge.issuercontact}}" core-link auto-login="no" [showBrowserWarning]="false">
</ion-item-group> {{ badge.issuercontact }}
</a></p>
</ion-label>
</ion-item>
</ion-item-group>
<!-- Competencies alignment --> <ion-item-group>
<ion-item-group *ngIf="badge.alignment"> <ion-item-divider>
<ion-item-divider> <ion-label>
<ion-label> <h2>{{ 'addon.badges.badgedetails' | translate}}</h2>
<h2>{{ 'addon.badges.alignment' | translate}}</h2> </ion-label>
</ion-label> </ion-item-divider>
</ion-item-divider> <ion-item class="ion-text-wrap" *ngIf="badge.name">
<ion-item class="ion-text-wrap" *ngFor="let alignment of badge.alignment" [href]="alignment.targeturl" core-link <ion-label>
auto-login="no"> <h2>{{ 'core.name' | translate}}</h2>
<ion-label> <p>{{ badge.name }}</p>
<h2>{{ alignment.targetname }}</h2> </ion-label>
</ion-label> </ion-item>
</ion-item> <ion-item class="ion-text-wrap" *ngIf="badge.version">
<ion-item class="ion-text-wrap" *ngIf="badge.alignment.length == 0"> <ion-label>
<ion-label> <h2>{{ 'addon.badges.version' | translate}}</h2>
<h2>{{ 'addon.badges.noalignment' | translate}}</h2> <p>{{ badge.version }}</p>
</ion-label> </ion-label>
</ion-item> </ion-item>
</ion-item-group> <ion-item class="ion-text-wrap" *ngIf="badge.language">
</ng-container> <ion-label>
</core-loading> <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> </ion-content>

50
src/addons/badges/pages/issued-badge/issued-badge.page.ts
View File

@ -22,7 +22,10 @@ import { AddonBadges, AddonBadgesUserBadge } from '../../services/badges';
import { CoreUtils } from '@services/utils/utils'; import { CoreUtils } from '@services/utils/utils';
import { CoreCourses, CoreEnrolledCourseData } from '@features/courses/services/courses'; import { CoreCourses, CoreEnrolledCourseData } from '@features/courses/services/courses';
import { CoreNavigator } from '@services/navigator'; 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. * Page that displays the list of calendar events.
@ -40,12 +43,11 @@ export class AddonBadgesIssuedBadgePage implements OnInit {
user?: CoreUserProfile; user?: CoreUserProfile;
course?: CoreEnrolledCourseData; course?: CoreEnrolledCourseData;
badge?: AddonBadgesUserBadge; badge?: AddonBadgesUserBadge;
badges?: AddonBadgesUserBadgesSwipeManager;
badgeLoaded = false; badgeLoaded = false;
currentTime = 0; currentTime = 0;
constructor( constructor(protected route: ActivatedRoute) { }
protected route: ActivatedRoute,
) { }
/** /**
* View loaded. * View loaded.
@ -58,6 +60,11 @@ export class AddonBadgesIssuedBadgePage implements OnInit {
this.fetchIssuedBadge().finally(() => { this.fetchIssuedBadge().finally(() => {
this.badgeLoaded = true; 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;
}
}

51
src/addons/badges/pages/user-badges/user-badges.page.ts
View File

@ -19,10 +19,12 @@ import { CoreTimeUtils } from '@services/utils/time';
import { CoreDomUtils } from '@services/utils/dom'; import { CoreDomUtils } from '@services/utils/dom';
import { CoreSites } from '@services/sites'; import { CoreSites } from '@services/sites';
import { CoreUtils } from '@services/utils/utils'; import { CoreUtils } from '@services/utils/utils';
import { CorePageItemsListManager } from '@classes/page-items-list-manager';
import { Params } from '@angular/router'; import { Params } from '@angular/router';
import { CoreSplitViewComponent } from '@components/split-view/split-view'; import { CoreSplitViewComponent } from '@components/split-view/split-view';
import { CoreNavigator } from '@services/navigator'; 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. * Page that displays the list of calendar events.
@ -34,7 +36,7 @@ import { CoreNavigator } from '@services/navigator';
export class AddonBadgesUserBadgesPage implements AfterViewInit, OnDestroy { export class AddonBadgesUserBadgesPage implements AfterViewInit, OnDestroy {
currentTime = 0; currentTime = 0;
badges: AddonBadgesUserBadgesManager; badges: AddonBadgesUserBadgesListManager;
@ViewChild(CoreSplitViewComponent) splitView!: CoreSplitViewComponent; @ViewChild(CoreSplitViewComponent) splitView!: CoreSplitViewComponent;
@ -47,7 +49,10 @@ export class AddonBadgesUserBadgesPage implements AfterViewInit, OnDestroy {
courseId = 0; 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. * @param refresher Refresher.
*/ */
async refreshBadges(refresher?: IonRefresher): Promise<void> { async refreshBadges(refresher?: IonRefresher): Promise<void> {
await CoreUtils.ignoreErrors(AddonBadges.invalidateUserBadges(this.badges.courseId, this.badges.userId)); await CoreUtils.ignoreErrors(
await CoreUtils.ignoreErrors(this.fetchBadges()); AddonBadges.invalidateUserBadges(
this.badges.getSource().COURSE_ID,
this.badges.getSource().USER_ID,
),
);
await CoreUtils.ignoreErrors(this.badges.reload());
refresher?.complete(); refresher?.complete();
} }
@ -85,39 +95,20 @@ export class AddonBadgesUserBadgesPage implements AfterViewInit, OnDestroy {
this.currentTime = CoreTimeUtils.timestamp(); this.currentTime = CoreTimeUtils.timestamp();
try { try {
await this.fetchBadges(); await this.badges.reload();
} catch (message) { } catch (message) {
CoreDomUtils.showErrorModalDefault(message, 'Error loading badges'); 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> { class AddonBadgesUserBadgesListManager extends CoreListItemsManager<AddonBadgesUserBadge, AddonBadgesUserBadgesSource> {
courseId: number;
userId: number;
constructor(pageComponent: unknown, courseId: number, userId: number) {
super(pageComponent);
this.courseId = courseId;
this.userId = userId;
}
/** /**
* @inheritdoc * @inheritdoc
@ -131,8 +122,8 @@ class AddonBadgesUserBadgesManager extends CorePageItemsListManager<AddonBadgesU
*/ */
protected getItemQueryParams(): Params { protected getItemQueryParams(): Params {
return { return {
courseId: this.courseId, courseId: this.getSource().COURSE_ID,
userId: this.userId, userId: this.getSource().USER_ID,
}; };
} }

4
src/core/classes/items-management/items-manager-sources-tracker.ts
View File

@ -58,7 +58,7 @@ export class CoreItemsManagerSourcesTracker {
const constructorInstances = this.getConstructorInstances(source.constructor as SourceConstructor); const constructorInstances = this.getConstructorInstances(source.constructor as SourceConstructor);
const instanceId = this.instanceIds.get(source); const instanceId = this.instanceIds.get(source);
if (!instanceId) { if (instanceId === undefined) {
return; return;
} }
@ -83,7 +83,7 @@ export class CoreItemsManagerSourcesTracker {
const instanceId = this.instanceIds.get(source); const instanceId = this.instanceIds.get(source);
const index = constructorInstances?.[instanceId ?? '']?.references.indexOf(reference) ?? -1; const index = constructorInstances?.[instanceId ?? '']?.references.indexOf(reference) ?? -1;
if (!constructorInstances || !instanceId || index === -1) { if (!constructorInstances || instanceId === undefined || index === -1) {
return; return;
} }