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

main
Pau Ferrer Ocaña 2024-05-13 13:11:55 +02:00
parent 55d087ca18
commit eddcfbe12b
5 changed files with 10 additions and 108 deletions

View File

@ -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,

View File

@ -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"
[label]="('core.sort' | translate)" (onChange)="setSortOrder($event)" [selection]="selectedSortOrder.label | translate"
interface="modal" />
<core-combobox [label]="('core.sort' | translate)" (onChange)="setSortOrder($event)" [selection]="selectedSortOrder.value">
<ion-select-option *ngFor="let order of sortOrders" class="ion-text-wrap" [value]="order.value">
{{ order.label | translate }}
</ion-select-option>
</core-combobox>
</div>
<core-empty-box *ngIf="!discussions || (!discussions.hasDiscussions && !errorLoadingDiscussions)" icon="far-comments"

View File

@ -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> {
if (this.discussions && sortOrder.value != this.discussions.getSource().selectedSortOrder?.value) {
async setSortOrder(sortOrderValue: number): Promise<void> {
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.
*

View File

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

View File

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