MOBILE-3643 forum: Migrate sort order selector

src/addons/mod/forum/components/components.module.ts

@@ -24,6 +24,7 @@ import { AddonModForumEditPostComponent } from './edit-post/edit-post';
 import { AddonModForumIndexComponent } from './index/index';
 import { AddonModForumPostComponent } from './post/post';
 import { AddonModForumPostOptionsMenuComponent } from './post-options-menu/post-options-menu';
+import { AddonModForumSortOrderSelectorComponent } from './sort-order-selector/sort-order-selector';
 
 @NgModule({
     declarations: [
@@ -32,6 +33,7 @@ import { AddonModForumPostOptionsMenuComponent } from './post-options-menu/post-
         AddonModForumIndexComponent,
         AddonModForumPostComponent,
         AddonModForumPostOptionsMenuComponent,
+        AddonModForumSortOrderSelectorComponent,
     ],
     imports: [
         CoreSharedModule,

src/addons/mod/forum/components/index/index.html

@@ -35,7 +35,7 @@
                     class="core-button-select button-no-uppercase"
                     aria-haspopup="true" aria-controls="addon-mod-forum-sort-order-selector"
                     [attr.aria-label]="('core.sort' | translate)" [attr.aria-expanded]="sortOrderSelectorExpanded"
-                    (click)="showSortOrderSelector($event)">
+                    (click)="showSortOrderSelector()">
                     <span class="core-button-select-text">{{ selectedSortOrder.label | translate }}</span>
                     <div class="select-icon" slot="end"><div class="select-icon-inner"></div></div>
                 </ion-button>

src/addons/mod/forum/components/index/index.ts

@@ -24,7 +24,7 @@ import {
     AddonModForumDiscussion,
 } from '@addons/mod/forum/services/forum.service';
 import { AddonModForumOffline, AddonModForumOfflineDiscussion } from '@addons/mod/forum/services/offline.service';
-import { PopoverController, Translate } from '@singletons';
+import { ModalController, PopoverController, Translate } from '@singletons';
 import { CoreCourseContentsPage } from '@features/course/pages/contents/contents';
 import { AddonModForumHelper } from '@addons/mod/forum/services/helper.service';
 import { CoreGroups, CoreGroupsProvider } from '@services/groups';
@@ -38,6 +38,7 @@ import { CoreCourse } from '@features/course/services/course';
 import { CorePageItemsListManager } from '@classes/page-items-list-manager';
 import { CoreSplitViewComponent } from '@components/split-view/split-view';
 import { AddonModForumDiscussionOptionsMenuComponent } from '../discussion-options-menu/discussion-options-menu';
+import { AddonModForumSortOrderSelectorComponent } from '../sort-order-selector/sort-order-selector';
 
 /**
  * Component that displays a forum entry page.
@@ -522,37 +523,39 @@ export class AddonModForumIndexComponent extends CoreCourseModuleMainActivityCom
 
     /**
      * Display the sort order selector modal.
-     *
-     * @param event Event.
      */
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    async showSortOrderSelector(): Promise<void> {
-    showSortOrderSelector(event: MouseEvent): void {
         if (!this.sortingAvailable) {
             return;
         }
 
-        alert('Show sort order selector not implemented');
+        const modal = await ModalController.instance.create({
+            component: AddonModForumSortOrderSelectorComponent,
+            componentProps: {
+                sortOrders: this.sortOrders,
+                selected: this.selectedSortOrder!.value,
+            },
+        });
 
-        // @todo
+        modal.present();
-        // const params = { sortOrders: this.sortOrders, selected: this.selectedSortOrder.value };
-        // const modal = this.modalCtrl.create('AddonModForumSortOrderSelectorPage', params);
-        // modal.onDidDismiss((sortOrder) => {
-        //     this.sortOrderSelectorExpanded = false;
 
-        //     if (sortOrder && sortOrder.value != this.selectedSortOrder.value) {
+        this.sortOrderSelectorExpanded = true;
-        //         this.selectedSortOrder = sortOrder;
-        //         this.page = 0;
-        //         this.userProvider.setUserPreference(AddonModForumProvider.PREFERENCE_SORTORDER, sortOrder.value.toFixed(0))
-        //             .then(() => {
-        //                 this.showLoadingAndFetch();
-        //             }).catch((error) => {
-        //                 this.domUtils.showErrorModalDefault(error, 'Error updating preference.');
-        //             });
-        //     }
-        // });
 
-        // modal.present({ ev: event });
+        const result = await modal.onDidDismiss<AddonModForumSortOrder>();
-        // this.sortOrderSelectorExpanded = true;
+
+        this.sortOrderSelectorExpanded = false;
+
+        if (result.data && result.data.value != this.selectedSortOrder?.value) {
+            this.selectedSortOrder = result.data;
+            this.page = 0;
+
+            try {
+                await CoreUser.instance.setUserPreference(AddonModForumProvider.PREFERENCE_SORTORDER, result.data.value.toFixed(0));
+                await this.showLoadingAndFetch();
+            } catch (error) {
+                CoreDomUtils.instance.showErrorModalDefault(error, 'Error updating preference.');
+            }
+        }
     }
 
     /**

src/addons/mod/forum/components/sort-order-selector/sort-order-selector.html

@@ -0,0 +1,26 @@
+<ion-header>
+    <ion-toolbar>
+        <ion-buttons slot="start">
+            <ion-back-button [attr.aria-label]="'core.back' | translate"></ion-back-button>
+        </ion-buttons>
+        <ion-title>{{ 'core.sort' | translate }}</ion-title>
+        <ion-buttons slot="end">
+            <ion-button (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
+                <ion-icon name="close" slot="icon-only"></ion-icon>
+            </ion-button>
+        </ion-buttons>
+    </ion-toolbar>
+</ion-header>
+<ion-content>
+    <ion-list id="addon-mod-forum-sort-selector" role="menu" aria-labelledby="addon-mod-forum-sort-order-button">
+        <ng-container *ngFor="let sortOrder of sortOrders">
+            <ion-item class="ion-text-wrap" detail="false" role="menuitem"
+                [class.core-primary-selected-item]="selected == sortOrder.value" [attr.aria-label]="sortOrder.label | translate"
+                (click)="selectSortOrder(sortOrder)">
+                <ion-label>
+                    <h2>{{ sortOrder.label | translate }}</h2>
+                </ion-label>
+            </ion-item>
+        </ng-container>
+    </ion-list>
+</ion-content>

src/addons/mod/forum/components/sort-order-selector/sort-order-selector.ts

@@ -0,0 +1,47 @@
+// (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, Input } from '@angular/core';
+import { AddonModForumSortOrder } from '@addons/mod/forum/services/forum.service';
+import { ModalController } from '@singletons';
+
+/**
+ * Page that displays the sort selector.
+ */
+@Component({
+    selector: 'page-addon-mod-forum-sort-order-selector',
+    templateUrl: 'sort-order-selector.html',
+})
+export class AddonModForumSortOrderSelectorComponent {
+
+    @Input() sortOrders!: AddonModForumSortOrder[];
+    @Input() selected!: number;
+
+    /**
+     * Close the modal.
+     */
+    closeModal(): void {
+        ModalController.instance.dismiss();
+    }
+
+    /**
+     * Select a sort order.
+     *
+     * @param sortOrder Selected sort order.
+     */
+    selectSortOrder(sortOrder: AddonModForumSortOrder): void {
+        ModalController.instance.dismiss(sortOrder);
+    }
+
+}