MOBILE-3675 course: Migrate participants search

src/core/classes/page-items-list-manager.ts

@@ -95,6 +95,16 @@ export abstract class CorePageItemsListManager<Item> {
         this.updateSelectedItem(splitView.outletRoute);
     }
 
+    /**
+     * Reset items data.
+     */
+    resetItems(): void {
+        this.itemsList = null;
+        this.itemsMap = null;
+        this.hasMoreItems = true;
+        this.selectedItem = null;
+    }
+
     // @todo Implement watchResize.
 
     /**

src/core/components/split-view/split-view.ts

@@ -14,7 +14,7 @@
 
 import { AfterViewInit, Component, ElementRef, HostBinding, Input, OnDestroy, ViewChild } from '@angular/core';
 import { ActivatedRouteSnapshot } from '@angular/router';
-import { IonRouterOutlet } from '@ionic/angular';
+import { IonContent, IonRouterOutlet } from '@ionic/angular';
 import { CoreScreen } from '@services/screen';
 import { BehaviorSubject, Observable, Subscription } from 'rxjs';
 
@@ -31,7 +31,8 @@ export enum CoreSplitViewMode {
 })
 export class CoreSplitViewComponent implements AfterViewInit, OnDestroy {
 
-    @ViewChild(IonRouterOutlet) outlet!: IonRouterOutlet;
+    @ViewChild(IonContent) menuContent!: IonContent;
+    @ViewChild(IonRouterOutlet) contentOutlet!: IonRouterOutlet;
     @HostBinding('class') classes = '';
     @Input() placeholderText = 'core.emptysplit';
     @Input() mode?: CoreSplitViewMode;
@@ -56,11 +57,11 @@ export class CoreSplitViewComponent implements AfterViewInit, OnDestroy {
     ngAfterViewInit(): void {
         this.isNested = !!this.element.nativeElement.parentElement?.closest('core-split-view');
         this.subscriptions = [
-            this.outlet.activateEvents.subscribe(() => {
+            this.contentOutlet.activateEvents.subscribe(() => {
                 this.updateClasses();
-                this.outletRouteSubject.next(this.outlet.activatedRoute.snapshot);
+                this.outletRouteSubject.next(this.contentOutlet.activatedRoute.snapshot);
             }),
-            this.outlet.deactivateEvents.subscribe(() => {
+            this.contentOutlet.deactivateEvents.subscribe(() => {
                 this.updateClasses();
                 this.outletRouteSubject.next(null);
             }),
@@ -83,7 +84,7 @@ export class CoreSplitViewComponent implements AfterViewInit, OnDestroy {
     private updateClasses(): void {
         const classes: string[] = [this.getCurrentMode()];
 
-        if (this.outlet.isActivated) {
+        if (this.contentOutlet.isActivated) {
             classes.push('outlet-activated');
         }
 
@@ -110,7 +111,7 @@ export class CoreSplitViewComponent implements AfterViewInit, OnDestroy {
         }
 
         if (CoreScreen.instance.isMobile) {
-            return this.outlet.isActivated
+            return this.contentOutlet.isActivated
                 ? CoreSplitViewMode.ContentOnly
                 : CoreSplitViewMode.MenuOnly;
         }
@@ -124,7 +125,7 @@ export class CoreSplitViewComponent implements AfterViewInit, OnDestroy {
      * @return If split view is enabled.
      */
     isOn(): boolean {
-        return this.outlet.isActivated;
+        return this.contentOutlet.isActivated;
     }
 
 }

src/core/features/features.module.ts

@@ -29,6 +29,7 @@ import { CoreUserModule } from './user/user.module';
 import { CorePushNotificationsModule } from './pushnotifications/pushnotifications.module';
 import { CoreXAPIModule } from './xapi/xapi.module';
 import { CoreViewerModule } from './viewer/viewer.module';
+import { CoreSearchModule } from './search/search.module';
 
 @NgModule({
     imports: [
@@ -44,6 +45,7 @@ import { CoreViewerModule } from './viewer/viewer.module';
         CoreTagModule,
         CoreUserModule,
         CorePushNotificationsModule,
+        CoreSearchModule,
         CoreXAPIModule,
         CoreH5PModule,
         CoreViewerModule,

src/core/features/user/pages/participants/participants.html

@@ -1,21 +1,50 @@
+<core-navbar-buttons slot="end">
+    <ion-button [hidden]="!searchEnabled" (click)="toggleSearch()" [attr.aria-label]="'core.search' | translate">
+        <ion-icon name="fas-search" slot="icon-only"></ion-icon>
+    </ion-button>
+</core-navbar-buttons>
+
 <ion-content>
     <core-split-view>
-        <ion-refresher slot="fixed" [disabled]="!participants.loaded" (ionRefresh)="refreshParticipants($event.target)">
+        <ion-refresher slot="fixed" [disabled]="!participants.loaded || searchInProgress" (ionRefresh)="refreshParticipants($event.target)">
             <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
         </ion-refresher>
 
+        <core-search-box *ngIf="showSearchBox"
+            [disabled]="searchInProgress" [spellcheck]="false" [autoFocus]="true" [lengthCheck]="1"
+            autocorrect="off" searchArea="CoreUserParticipants"
+            (onSubmit)="search($event)" (onClear)="clearSearch()">
+        </core-search-box>
+
         <core-loading [hideUntil]="participants.loaded">
-            <core-empty-box *ngIf="participants.empty" icon="person" [message]="'core.user.noparticipants' | translate">
+            <core-empty-box *ngIf="participants.empty && !searchInProgress && !searchQuery" icon="person" [message]="'core.user.noparticipants' | translate">
             </core-empty-box>
+
+            <core-empty-box *ngIf="participants.empty && !searchInProgress && searchQuery" icon="search" [message]="'core.noresults' | translate">
+            </core-empty-box>
+
             <ion-list *ngIf="!participants.empty">
-                <ion-item *ngFor="let participant of participants.items" class="ion-text-wrap" [class.core-selected-item]="participants.isSelected(participant)" [title]="participant.fullname" (click)="participants.select(participant)">
+                <ion-item *ngFor="let participant of participants.items"
+                    class="ion-text-wrap" [class.core-selected-item]="participants.isSelected(participant)" [title]="participant.fullname"
+                    (click)="participants.select(participant)">
+
                     <core-user-avatar [user]="participant" [linkProfile]="false" [checkOnline]="true" slot="start">
                     </core-user-avatar>
+
                     <ion-label>
+                        <ng-container *ngIf="!searchQuery">
+                            <h2>{{ participant.fullname }}</h2>
+                            <p *ngIf="participant.lastcourseaccess"><strong>{{ 'core.lastaccess' | translate }}: </strong>{{ participant.lastcourseaccess | coreTimeAgo }}</p>
+                            <p *ngIf="participant.lastcourseaccess == null && participant.lastaccess"><strong>{{ 'core.lastaccess' | translate }}: </strong>{{ participant.lastaccess | coreTimeAgo }}</p>
+                        </ng-container>
+
+                        <ng-container *ngIf="searchQuery">
                             <h2>
                                 <core-format-text [text]="participant.fullname" [highlight]="searchQuery" [filter]="false"></core-format-text>
                             </h2>
+                        </ng-container>
                     </ion-label>
+
                 </ion-item>
             </ion-list>
             <core-infinite-loading [enabled]="participants.loaded && !participants.completed" (action)="fetchMoreParticipants($event)" [error]="fetchMoreParticipantsFailed">

src/core/features/user/pages/participants/participants.ts

@@ -13,15 +13,16 @@
 // limitations under the License.
 
 import { ActivatedRoute, ActivatedRouteSnapshot } from '@angular/router';
-import { AfterViewInit, Component, OnDestroy, ViewChild } from '@angular/core';
+import { AfterViewInit, Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import { IonRefresher } from '@ionic/angular';
 
+import { CoreApp } from '@services/app';
 import { CoreDomUtils } from '@services/utils/dom';
 import { CoreNavigator } from '@services/navigator';
 import { CorePageItemsListManager } from '@classes/page-items-list-manager';
 import { CoreScreen } from '@services/screen';
 import { CoreSplitViewComponent } from '@components/split-view/split-view';
-import { CoreUser, CoreUserParticipant } from '@features/user/services/user';
+import { CoreUser, CoreUserProvider, CoreUserParticipant, CoreUserData } from '@features/user/services/user';
 import { CoreUtils } from '@services/utils/utils';
 
 /**
@@ -31,9 +32,13 @@ import { CoreUtils } from '@services/utils/utils';
     selector: 'page-core-user-participants',
     templateUrl: 'participants.html',
 })
-export class CoreUserParticipantsPage implements AfterViewInit, OnDestroy {
+export class CoreUserParticipantsPage implements OnInit, AfterViewInit, OnDestroy {
 
     participants: CoreUserParticipantsManager;
+    searchQuery: string | null = null;
+    searchInProgress = false;
+    searchEnabled = false;
+    showSearchBox = false;
     fetchMoreParticipantsFailed = false;
 
     @ViewChild(CoreSplitViewComponent) splitView!: CoreSplitViewComponent;
@@ -44,6 +49,13 @@ export class CoreUserParticipantsPage implements AfterViewInit, OnDestroy {
         this.participants = new CoreUserParticipantsManager(CoreUserParticipantsPage, courseId);
     }
 
+    /**
+     * @inheritdoc
+     */
+    async ngOnInit(): Promise<void> {
+        this.searchEnabled = await CoreUser.instance.canSearchParticipantsInSite();
+    }
+
     /**
      * @inheritdoc
      */
@@ -61,6 +73,53 @@ export class CoreUserParticipantsPage implements AfterViewInit, OnDestroy {
         this.participants.destroy();
     }
 
+    /**
+     * Show or hide search box.
+     */
+    toggleSearch(): void {
+        this.showSearchBox = !this.showSearchBox;
+
+        if (this.showSearchBox) {
+            // Make search bar visible.
+            this.splitView.menuContent.scrollToTop();
+        } else {
+            this.clearSearch();
+        }
+    }
+
+    /**
+     * Clear search.
+     */
+    async clearSearch(): Promise<void> {
+        if (this.searchQuery === null) {
+            // Nothing to clear.
+            return;
+        }
+
+        this.searchQuery = null;
+        this.searchInProgress = false;
+        this.participants.resetItems();
+
+        await this.fetchInitialParticipants();
+    }
+
+    /**
+     * Start a new search.
+     *
+     * @param query Text to search for.
+     */
+    async search(query: string): Promise<void> {
+        CoreApp.instance.closeKeyboard();
+
+        this.searchInProgress = true;
+        this.searchQuery = query;
+        this.participants.resetItems();
+
+        await this.fetchInitialParticipants();
+
+        this.searchInProgress = false;
+    }
+
     /**
      * Refresh participants.
      *
@@ -108,13 +167,26 @@ export class CoreUserParticipantsPage implements AfterViewInit, OnDestroy {
      *
      * @param loadedParticipants Participants list to continue loading from.
      */
-    private async fetchParticipants(loadedParticipants: CoreUserParticipant[] = []): Promise<void> {
+    private async fetchParticipants(loadedParticipants: CoreUserParticipant[] | CoreUserData[] = []): Promise<void> {
+        if (this.searchQuery) {
+            const { participants, canLoadMore } = await CoreUser.instance.searchParticipants(
+                this.participants.courseId,
+                this.searchQuery,
+                true,
+                Math.ceil(loadedParticipants.length / CoreUserProvider.PARTICIPANTS_LIST_LIMIT),
+                CoreUserProvider.PARTICIPANTS_LIST_LIMIT,
+            );
+
+            this.participants.setItems((loadedParticipants as CoreUserData[]).concat(participants), canLoadMore);
+        } else {
             const { participants, canLoadMore } = await CoreUser.instance.getParticipants(
                 this.participants.courseId,
                 loadedParticipants.length,
             );
 
-        this.participants.setItems(loadedParticipants.concat(participants), canLoadMore);
+            this.participants.setItems((loadedParticipants as CoreUserParticipant[]).concat(participants), canLoadMore);
+        }
+
         this.fetchMoreParticipantsFailed = false;
     }
 
@@ -123,7 +195,7 @@ export class CoreUserParticipantsPage implements AfterViewInit, OnDestroy {
 /**
  * Helper to manage the list of participants.
  */
-class CoreUserParticipantsManager extends CorePageItemsListManager<CoreUserParticipant> {
+class CoreUserParticipantsManager extends CorePageItemsListManager<CoreUserParticipant | CoreUserData> {
 
     courseId: number;
 
@@ -136,7 +208,7 @@ class CoreUserParticipantsManager extends CorePageItemsListManager<CoreUserParti
     /**
      * @inheritdoc
      */
-    async select(participant: CoreUserParticipant): Promise<void> {
+    async select(participant: CoreUserParticipant | CoreUserData): Promise<void> {
         if (CoreScreen.instance.isMobile) {
             await CoreNavigator.instance.navigateToSitePath('/user/profile', { params: { userId: participant.id } });
 
@@ -149,7 +221,7 @@ class CoreUserParticipantsManager extends CorePageItemsListManager<CoreUserParti
     /**
      * @inheritdoc
      */
-    protected getItemPath(participant: CoreUserParticipant): string {
+    protected getItemPath(participant: CoreUserParticipant | CoreUserData): string {
         return participant.id.toString();
     }
 

src/core/features/user/user-course-lazy.module.ts

@@ -19,6 +19,7 @@ import { IonicModule } from '@ionic/angular';
 import { TranslateModule } from '@ngx-translate/core';
 
 import { CoreSharedModule } from '@/core/shared.module';
+import { CoreSearchComponentsModule } from '@features/search/components/components.module';
 
 import { CoreUserParticipantsPage } from './pages/participants/participants';
 
@@ -42,6 +43,7 @@ const routes: Routes = [
         IonicModule,
         TranslateModule.forChild(),
         CoreSharedModule,
+        CoreSearchComponentsModule,
     ],
     declarations: [
         CoreUserParticipantsPage,