MOBILE-4470 forum: Change Sort order selector page to select combobox

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

@@ -24,7 +24,6 @@ import { AddonModForumDiscussionOptionsMenuComponent } from './discussion-option
 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,7 +31,6 @@ import { AddonModForumSortOrderSelectorComponent } from './sort-order-selector/s
         AddonModForumIndexComponent,
         AddonModForumPostComponent,
         AddonModForumPostOptionsMenuComponent,
-        AddonModForumSortOrderSelectorComponent,
     ],
     imports: [
         CoreSharedModule,

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

@@ -60,9 +60,11 @@
 
         <ng-container *ngIf="forum">
             <div *ngIf="discussions && sortingAvailable && selectedSortOrder" class="ion-text-wrap">
-                <core-combobox [modalOptions]="sortOrderSelectorModalOptions" listboxId="addon-mod-forum-sort-selector"
+                <core-combobox [label]="('core.sort' | translate)" (onChange)="setSortOrder($event)" [selection]="selectedSortOrder.value">
-                    [label]="('core.sort' | translate)" (onChange)="setSortOrder($event)" [selection]="selectedSortOrder.label | translate"
+                    <ion-select-option *ngFor="let order of sortOrders" class="ion-text-wrap" [value]="order.value">
-                    interface="modal" />
+                        {{ order.label | translate }}
+                    </ion-select-option>
+                </core-combobox>
             </div>
 
             <core-empty-box *ngIf="!discussions || (!discussions.hasDiscussions && !errorLoadingDiscussions)" icon="far-comments"

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

@@ -15,7 +15,6 @@
 import { Component, Optional, OnInit, OnDestroy, ViewChild, AfterViewInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { IonContent } from '@ionic/angular';
-import { ModalOptions } from '@ionic/core';
 
 import { CoreCourseModuleMainActivityComponent } from '@features/course/classes/main-activity-component';
 import {
@@ -45,7 +44,6 @@ import { CoreDomUtils } from '@services/utils/dom';
 import { CoreCourse } from '@features/course/services/course';
 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';
 import { CoreScreen } from '@services/screen';
 import { AddonModForumPrefetchHandler } from '../../services/handlers/prefetch';
 import { AddonModForumModuleHandlerService } from '../../services/handlers/module';
@@ -87,9 +85,6 @@ export class AddonModForumIndexComponent extends CoreCourseModuleMainActivityCom
     showQAMessage = false;
     isSetPinAvailable = false;
     showSearch = false;
-    sortOrderSelectorModalOptions: ModalOptions = {
-        component: AddonModForumSortOrderSelectorComponent,
-    };
 
     protected fetchContentDefaultError = 'addon.mod_forum.errorgetforum';
     protected syncEventName = AddonModForumSyncProvider.AUTO_SYNCED;
@@ -188,10 +183,6 @@ export class AddonModForumIndexComponent extends CoreCourseModuleMainActivityCom
         this.sortOrders = AddonModForum.getAvailableSortOrders();
         this.isSetPinAvailable = AddonModForum.isSetPinStateAvailableForSite();
 
-        this.sortOrderSelectorModalOptions.componentProps = {
-            sortOrders: this.sortOrders,
-        };
-
         await super.ngOnInit();
 
         // Initialize discussions manager.
@@ -492,10 +483,6 @@ export class AddonModForumIndexComponent extends CoreCourseModuleMainActivityCom
         const selectedOrder = await AddonModForum.getSelectedSortOrder();
 
         discussions.getSource().selectedSortOrder = selectedOrder;
-
-        if (this.sortOrderSelectorModalOptions.componentProps) {
-            this.sortOrderSelectorModalOptions.componentProps.selected = selectedOrder.value;
-        }
     }
 
     /**
@@ -605,17 +592,15 @@ export class AddonModForumIndexComponent extends CoreCourseModuleMainActivityCom
     /**
      * Changes the sort order.
      *
-     * @param sortOrder Sort order new data.
+     * @param sortOrderValue Sort order new data.
      */
-    async setSortOrder(sortOrder: AddonModForumSortOrder): Promise<void> {
+    async setSortOrder(sortOrderValue: number): Promise<void> {
-        if (this.discussions && sortOrder.value != this.discussions.getSource().selectedSortOrder?.value) {
+        const sortOrder = this.sortOrders.find(sortOrder => sortOrder.value === sortOrderValue);
+
+        if (this.discussions && sortOrder && sortOrder.value != this.discussions.getSource().selectedSortOrder?.value) {
             this.discussions.getSource().selectedSortOrder = sortOrder;
             this.discussions.getSource().setDirty(true);
 
-            if (this.sortOrderSelectorModalOptions.componentProps) {
-                this.sortOrderSelectorModalOptions.componentProps.selected = sortOrder.value;
-            }
-
             try {
                 await CoreUser.setUserPreference(AddonModForumProvider.PREFERENCE_SORTORDER, sortOrder.value.toFixed(0));
                 await this.showLoadingAndFetch();
@@ -625,17 +610,6 @@ export class AddonModForumIndexComponent extends CoreCourseModuleMainActivityCom
         }
     }
 
-    /**
-     * Display the sort order selector modal.
-     */
-    async showSortOrderSelector(): Promise<void> {
-        const modalData = await CoreDomUtils.openModal<AddonModForumSortOrder>(this.sortOrderSelectorModalOptions);
-
-        if (modalData) {
-            this.setSortOrder(modalData);
-        }
-    }
-
     /**
      * Show the context menu.
      *

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

@@ -1,25 +0,0 @@
-<ion-header>
-    <ion-toolbar>
-        <ion-title>
-            <h1 id="addon-mod-forum-sort-order-label">{{ 'core.sort' | translate }}</h1>
-        </ion-title>
-        <ion-buttons slot="end">
-            <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
-                <ion-icon name="fas-xmark" slot="icon-only" aria-hidden="true" />
-            </ion-button>
-        </ion-buttons>
-    </ion-toolbar>
-</ion-header>
-<ion-content>
-    <ion-list id="addon-mod-forum-sort-selector" role="listbox" aria-labelledby="addon-mod-forum-sort-order-label">
-        <ng-container *ngFor="let sortOrder of sortOrders">
-            <ion-item class="ion-text-wrap" [detail]="false" role="combobox"
-                [attr.aria-current]="selected === sortOrder.value ? 'page' : 'false'" [attr.aria-label]="sortOrder.label | translate"
-                (click)="selectSortOrder(sortOrder)" button aria-haspopup="dialog">
-                <ion-label>
-                    <p class="item-heading">{{ sortOrder.label | translate }}</p>
-                </ion-label>
-            </ion-item>
-        </ng-container>
-    </ion-list>
-</ion-content>

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

@@ -1,47 +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, Input } from '@angular/core';
-import { AddonModForumSortOrder } from '@addons/mod/forum/services/forum';
-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.dismiss();
-    }
-
-    /**
-     * Select a sort order.
-     *
-     * @param sortOrder Selected sort order.
-     */
-    selectSortOrder(sortOrder: AddonModForumSortOrder): void {
-        ModalController.dismiss(sortOrder);
-    }
-
-}