Extract list items management from badges

src/addons/badges/badges-lazy.module.ts

@@ -12,29 +12,60 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+import { CommonModule } from '@angular/common';
+import { IonicModule } from '@ionic/angular';
 import { NgModule } from '@angular/core';
-import { Route, RouterModule, Routes } from '@angular/router';
+import { RouterModule, Routes } from '@angular/router';
+import { TranslateModule } from '@ngx-translate/core';
 
+import { conditionalRoutes } from '@/app/app-routing.module';
+import { CoreScreen } from '@services/screen';
+import { CoreSharedModule } from '@/core/shared.module';
 
-export const AddonBadgesIssueRoute: Route = {
+import { AddonBadgesIssuedBadgePage } from './pages/issued-badge/issued-badge';
-    path: 'issue',
+import { AddonBadgesUserBadgesPage } from './pages/user-badges/user-badges';
-    loadChildren: () => import('./pages/issued-badge/issued-badge.module').then( m => m.AddonBadgesIssuedBadgePageModule),
-};
 
-const routes: Routes = [
+const mobileRoutes: Routes = [
     {
         path: '',
-        redirectTo: 'user',
         pathMatch: 'full',
+        component: AddonBadgesUserBadgesPage,
     },
-    AddonBadgesIssueRoute,
     {
-        path: 'user',
+        path: ':badgeHash',
-        loadChildren: () => import('./pages/user-badges/user-badges.module').then( m => m.AddonBadgesUserBadgesPageModule),
+        component: AddonBadgesIssuedBadgePage,
     },
 ];
 
+const tabletRoutes: Routes = [
+    {
+        path: '',
+        component: AddonBadgesUserBadgesPage,
+        children: [
+            {
+                path: ':badgeHash',
+                component: AddonBadgesIssuedBadgePage,
+            },
+        ],
+    },
+];
+
+const routes: Routes = [
+    ...conditionalRoutes(mobileRoutes, () => CoreScreen.instance.isMobile),
+    ...conditionalRoutes(tabletRoutes, () => CoreScreen.instance.isTablet),
+];
+
 @NgModule({
-    imports: [RouterModule.forChild(routes)],
+    imports: [
+        RouterModule.forChild(routes),
+        CommonModule,
+        IonicModule,
+        TranslateModule.forChild(),
+        CoreSharedModule,
+    ],
+    declarations: [
+        AddonBadgesUserBadgesPage,
+        AddonBadgesIssuedBadgePage,
+    ],
 })
 export class AddonBadgesLazyModule {}

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

@@ -1,44 +0,0 @@
-// (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 { NgModule } from '@angular/core';
-import { IonicModule } from '@ionic/angular';
-import { TranslateModule } from '@ngx-translate/core';
-import { RouterModule, Routes } from '@angular/router';
-import { CommonModule } from '@angular/common';
-
-import { CoreSharedModule } from '@/core/shared.module';
-import { AddonBadgesIssuedBadgePage } from './issued-badge.page';
-
-const routes: Routes = [
-    {
-        path: '',
-        component: AddonBadgesIssuedBadgePage,
-    },
-];
-
-@NgModule({
-    imports: [
-        RouterModule.forChild(routes),
-        CommonModule,
-        IonicModule,
-        TranslateModule.forChild(),
-        CoreSharedModule,
-    ],
-    declarations: [
-        AddonBadgesIssuedBadgePage,
-    ],
-    exports: [RouterModule],
-})
-export class AddonBadgesIssuedBadgePageModule {}

src/addons/badges/pages/user-badges/user-badges.html

@@ -8,17 +8,17 @@
 </ion-header>
 <ion-content>
     <core-split-view>
-        <ion-refresher slot="fixed" [disabled]="!badgesLoaded" (ionRefresh)="refreshBadges($event)">
+        <ion-refresher slot="fixed" [disabled]="!badges.loaded" (ionRefresh)="refreshBadges($event.target)">
             <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
         </ion-refresher>
-        <core-loading [hideUntil]="badgesLoaded">
+        <core-loading [hideUntil]="badges.loaded">
-            <core-empty-box *ngIf="!badges || badges.length == 0"  icon="fas-trophy"
+            <core-empty-box *ngIf="badges.empty"  icon="fas-trophy"
                 [message]="'addon.badges.nobadges' | translate">
             </core-empty-box>
 
-            <ion-list *ngIf="badges && badges.length"  class="ion-no-margin">
+            <ion-list *ngIf="!badges.empty"  class="ion-no-margin">
-                <ion-item class="ion-text-wrap" *ngFor="let badge of badges" [title]="badge.name"
+                <ion-item class="ion-text-wrap" *ngFor="let badge of badges.items" [title]="badge.name"
-                    (click)="loadIssuedBadge(badge.uniquehash)" [class.core-selected-item]="badge.uniquehash == badgeHash">
+                    (click)="badges.select(badge)" [class.core-selected-item]="badges.isSelected(badge)">
                     <ion-avatar slot="start">
                         <img [src]="badge.badgeurl" [alt]="badge.name" core-external-content>
                     </ion-avatar>

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

@@ -1,63 +0,0 @@
-// (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 { NgModule } from '@angular/core';
-import { IonicModule } from '@ionic/angular';
-import { TranslateModule } from '@ngx-translate/core';
-import { RouterModule, Routes } from '@angular/router';
-import { CommonModule } from '@angular/common';
-import { conditionalRoutes } from '@/app/app-routing.module';
-import { CoreScreen } from '@services/screen';
-
-import { CoreSharedModule } from '@/core/shared.module';
-import { AddonBadgesUserBadgesPage } from './user-badges.page';
-import { AddonBadgesIssueRoute } from '@addons/badges/badges-lazy.module';
-
-const mobileRoutes: Routes = [
-    {
-        path: '',
-        component: AddonBadgesUserBadgesPage,
-    },
-    AddonBadgesIssueRoute,
-];
-
-const tabletRoutes: Routes = [
-    {
-        path: '',
-        component: AddonBadgesUserBadgesPage,
-        children: [
-            AddonBadgesIssueRoute,
-        ],
-    },
-];
-
-const routes: Routes = [
-    ...conditionalRoutes(mobileRoutes, () => CoreScreen.instance.isMobile),
-    ...conditionalRoutes(tabletRoutes, () => CoreScreen.instance.isTablet),
-];
-
-@NgModule({
-    imports: [
-        RouterModule.forChild(routes),
-        CommonModule,
-        IonicModule,
-        TranslateModule.forChild(),
-        CoreSharedModule,
-    ],
-    declarations: [
-        AddonBadgesUserBadgesPage,
-    ],
-    exports: [RouterModule],
-})
-export class AddonBadgesUserBadgesPageModule {}

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

@@ -1,106 +0,0 @@
-// (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 { Component, OnInit } from '@angular/core';
-import { IonRefresher } from '@ionic/angular';
-import { AddonBadges, AddonBadgesUserBadge } from '../../services/badges';
-import { CoreTimeUtils } from '@services/utils/time';
-import { CoreDomUtils } from '@services/utils/dom';
-import { CoreSites } from '@services/sites';
-import { CoreUtils } from '@services/utils/utils';
-import { CoreNavigator } from '@services/navigator';
-import { CoreScreen } from '@services/screen';
-
-/**
- * Page that displays the list of calendar events.
- */
-@Component({
-    selector: 'page-addon-badges-user-badges',
-    templateUrl: 'user-badges.html',
-})
-export class AddonBadgesUserBadgesPage implements OnInit {
-
-    courseId = 0;
-    userId!: number;
-
-    badgesLoaded = false;
-    badges: AddonBadgesUserBadge[] = [];
-    currentTime = 0;
-    badgeHash!: string;
-
-    /**
-     * View loaded.
-     */
-    ngOnInit(): void {
-
-        this.courseId = CoreNavigator.instance.getRouteNumberParam('courseId') || this.courseId; // Use 0 for site badges.
-        this.userId = CoreNavigator.instance.getRouteNumberParam('userId') || CoreSites.instance.getCurrentSite()!.getUserId();
-
-        this.fetchBadges().finally(() => {
-            if (!this.badgeHash && CoreScreen.instance.isTablet && this.badges.length > 0) {
-                // Take first and load it.
-                this.loadIssuedBadge(this.badges[0].uniquehash);
-            }
-            this.badgesLoaded = true;
-        });
-    }
-
-    /**
-     * Fetch all the badges required for the view.
-     *
-     * @return Promise resolved when done.
-     */
-    async fetchBadges(): Promise<void> {
-        this.currentTime = CoreTimeUtils.instance.timestamp();
-
-        try {
-            this.badges = await AddonBadges.instance.getUserBadges(this.courseId, this.userId);
-        } catch (message) {
-            CoreDomUtils.instance.showErrorModalDefault(message, 'Error getting badges data.');
-        }
-    }
-
-    /**
-     * Refresh the badges.
-     *
-     * @param refresher Refresher.
-     */
-    async refreshBadges(refresher?: CustomEvent<IonRefresher>): Promise<void> {
-        await CoreUtils.instance.ignoreErrors(Promise.all([
-            AddonBadges.instance.invalidateUserBadges(this.courseId, this.userId),
-        ]));
-
-        await CoreUtils.instance.ignoreErrors(Promise.all([
-            this.fetchBadges(),
-        ]));
-
-        refresher?.detail.complete();
-    }
-
-    /**
-     * Navigate to a particular badge.
-     *
-     * @param badgeHash Badge to load.
-     */
-    loadIssuedBadge(badgeHash: string): void {
-        this.badgeHash = badgeHash;
-        const params = { courseId: this.courseId, userId: this.userId, badgeHash: badgeHash };
-
-        const splitViewLoaded = CoreNavigator.instance.isCurrentPathInTablet('**/badges/user/issue');
-        const path = (splitViewLoaded ? '../' : '') + 'issue';
-
-        CoreNavigator.instance.navigate(path, { params });
-    }
-
-}

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

@@ -0,0 +1,142 @@
+// (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 { AfterViewInit, Component, OnDestroy, ViewChild } from '@angular/core';
+import { IonRefresher } from '@ionic/angular';
+import { AddonBadges, AddonBadgesUserBadge } from '../../services/badges';
+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 { ActivatedRoute, ActivatedRouteSnapshot, Params } from '@angular/router';
+import { CoreSplitViewComponent } from '@components/split-view/split-view';
+import { CoreObject } from '@singletons/object';
+
+/**
+ * Page that displays the list of calendar events.
+ */
+@Component({
+    selector: 'page-addon-badges-user-badges',
+    templateUrl: 'user-badges.html',
+})
+export class AddonBadgesUserBadgesPage implements AfterViewInit, OnDestroy {
+
+    currentTime = 0;
+    badges: AddonBadgesUserBadgesManager;
+
+    @ViewChild(CoreSplitViewComponent) splitView!: CoreSplitViewComponent;
+
+    constructor(route: ActivatedRoute) {
+        const courseId = parseInt(route.snapshot.queryParams.courseId ?? 0); // Use 0 for site badges.
+        const userId = parseInt(route.snapshot.queryParams.userId ?? CoreSites.instance.getCurrentSiteUserId());
+
+        this.badges = new AddonBadgesUserBadgesManager(AddonBadgesUserBadgesPage, courseId, userId);
+    }
+
+    /**
+     * @inheritdoc
+     */
+    async ngAfterViewInit(): Promise<void> {
+        await this.fetchInitialBadges();
+
+        this.badges.watchSplitViewOutlet(this.splitView);
+        this.badges.start();
+    }
+
+    /**
+     * @inheritdoc
+     */
+    ngOnDestroy(): void {
+        this.badges.destroy();
+    }
+
+    /**
+     * Refresh the badges.
+     *
+     * @param refresher Refresher.
+     */
+    async refreshBadges(refresher?: IonRefresher): Promise<void> {
+        await CoreUtils.instance.ignoreErrors(AddonBadges.instance.invalidateUserBadges(this.badges.courseId, this.badges.userId));
+        await CoreUtils.instance.ignoreErrors(this.fetchBadges());
+
+        refresher?.complete();
+    }
+
+    /**
+     * Obtain the initial list of badges.
+     */
+    private async fetchInitialBadges(): Promise<void> {
+        this.currentTime = CoreTimeUtils.instance.timestamp();
+
+        try {
+            await this.fetchBadges();
+        } catch (message) {
+            CoreDomUtils.instance.showErrorModalDefault(message, 'Error loading badges');
+
+            this.badges.setItems([]);
+        }
+    }
+
+    /**
+     * Update the list of badges.
+     */
+    private async fetchBadges(): Promise<void> {
+        const badges = await AddonBadges.instance.getUserBadges(this.badges.courseId, this.badges.userId);
+
+        this.badges.setItems(badges);
+    }
+
+}
+
+/**
+ * Helper class to manage badges.
+ */
+class AddonBadgesUserBadgesManager extends CorePageItemsListManager<AddonBadgesUserBadge> {
+
+    courseId: number;
+    userId: number;
+
+    constructor(pageComponent: unknown, courseId: number, userId: number) {
+        super(pageComponent);
+
+        this.courseId = courseId;
+        this.userId = userId;
+    }
+
+    /**
+     * @inheritdoc
+     */
+    protected getItemPath(badge: AddonBadgesUserBadge): string {
+        return badge.uniquehash;
+    }
+
+    /**
+     * @inheritdoc
+     */
+    protected getItemQueryParams(): Params {
+        return CoreObject.withoutEmpty({
+            courseId: this.courseId,
+            userId: this.userId,
+        });
+    }
+
+    /**
+     * @inheritdoc
+     */
+    protected getSelectedItemPath(route: ActivatedRouteSnapshot): string | null {
+        return route.params.badgeHash ?? null;
+    }
+
+}

src/addons/badges/services/handlers/badge-link.ts

@@ -43,13 +43,7 @@ export class AddonBadgesBadgeLinkHandlerService extends CoreContentLinksHandlerB
 
         return [{
             action: (siteId: string): void => {
-                CoreNavigator.instance.navigateToSitePath(
+                CoreNavigator.instance.navigateToSitePath(`/badges/${params.hash}`, { siteId });
-                    '/badges/issue',
-                    {
-                        siteId,
-                        params: { courseId: 0, badgeHash: params.hash },
-                    },
-                );
             },
         }];
     }

src/addons/badges/services/handlers/mybadges-link.ts

@@ -37,7 +37,7 @@ export class AddonBadgesMyBadgesLinkHandlerService extends CoreContentLinksHandl
     getActions(): CoreContentLinksAction[] {
         return [{
             action: (siteId: string): void => {
-                CoreNavigator.instance.navigateToSitePath('/badges/user', { siteId });
+                CoreNavigator.instance.navigateToSitePath('/badges', { siteId });
             },
         }];
     }

src/addons/badges/services/handlers/push-click.ts

@@ -59,9 +59,8 @@ export class AddonBadgesPushClickHandlerService implements CorePushNotifications
 
         if (data.hash) {
             // We have the hash, open the badge directly.
-            await CoreNavigator.instance.navigateToSitePath('/badges/issue', {
+            await CoreNavigator.instance.navigateToSitePath(`/badges/${data.hash}`, {
                 siteId: notification.site,
-                params: { courseId: 0, badgeHash: data.hash },
             });
 
             return;
@@ -76,7 +75,7 @@ export class AddonBadgesPushClickHandlerService implements CorePushNotifications
             ),
         );
 
-        await CoreNavigator.instance.navigateToSitePath('/badges/user', { siteId: notification.site });
+        await CoreNavigator.instance.navigateToSitePath('/badges', { siteId: notification.site });
     }
 
 }

src/addons/badges/services/handlers/user.ts

@@ -18,6 +18,7 @@ import { CoreUserProfile } from '@features/user/services/user';
 import { CoreUserDelegateService, CoreUserProfileHandler, CoreUserProfileHandlerData } from '@features/user/services/user-delegate';
 import { CoreNavigator } from '@services/navigator';
 import { makeSingleton } from '@singletons';
+import { CoreObject } from '@singletons/object';
 import { AddonBadges } from '../badges';
 
 /**
@@ -72,10 +73,9 @@ export class AddonBadgesUserHandlerService implements CoreUserProfileHandler {
             action: (event, user, courseId): void => {
                 event.preventDefault();
                 event.stopPropagation();
-                CoreNavigator.instance.navigateToSitePath(
+                CoreNavigator.instance.navigateToSitePath('/badges', {
-                    '/badges/user',
+                    params: CoreObject.withoutEmpty({ courseId, userId: user.id }),
-                    { params: { courseId: courseId || 0, userId: user.id } },
+                });
-                );
             },
         };
     }