MOBILE-3926 badges: Implement swipe navigation

src/addons/badges/classes/user-badges-source.ts

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

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

@@ -10,6 +10,7 @@
     </ion-toolbar>
 </ion-header>
 <ion-content>
+    <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>
@@ -245,4 +246,5 @@
                 </ion-item-group>
             </ng-container>
         </core-loading>
+    </core-swipe-navigation>
 </ion-content>

src/addons/badges/pages/issued-badge/issued-badge.page.ts

@@ -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(
+    constructor(protected route: ActivatedRoute) { }
-        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;
+    }
+
+}

src/addons/badges/pages/user-badges/user-badges.page.ts

@@ -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(
-        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();
     }
@@ -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> {
+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
@@ -131,8 +122,8 @@ class AddonBadgesUserBadgesManager extends CorePageItemsListManager<AddonBadgesU
      */
     protected getItemQueryParams(): Params {
         return {
-            courseId: this.courseId,
+            courseId: this.getSource().COURSE_ID,
-            userId: this.userId,
+            userId: this.getSource().USER_ID,
         };
     }
 

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

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