From fbad712136632b5e8dacef98b6edc2a1a4b3b9ac Mon Sep 17 00:00:00 2001 From: Noel De Martin Date: Tue, 23 Feb 2021 17:13:07 +0100 Subject: [PATCH] MOBILE-3643 forum: Migrate sort order selector --- .../mod/forum/components/components.module.ts | 2 + .../mod/forum/components/index/index.html | 2 +- .../mod/forum/components/index/index.ts | 51 ++++++++++--------- .../sort-order-selector.html | 26 ++++++++++ .../sort-order-selector.ts | 47 +++++++++++++++++ 5 files changed, 103 insertions(+), 25 deletions(-) create mode 100644 src/addons/mod/forum/components/sort-order-selector/sort-order-selector.html create mode 100644 src/addons/mod/forum/components/sort-order-selector/sort-order-selector.ts diff --git a/src/addons/mod/forum/components/components.module.ts b/src/addons/mod/forum/components/components.module.ts index 885c436d7..6e3dcd101 100644 --- a/src/addons/mod/forum/components/components.module.ts +++ b/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, diff --git a/src/addons/mod/forum/components/index/index.html b/src/addons/mod/forum/components/index/index.html index 7815b4c1b..78a8a86df 100644 --- a/src/addons/mod/forum/components/index/index.html +++ b/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()"> {{ selectedSortOrder.label | translate }}
diff --git a/src/addons/mod/forum/components/index/index.ts b/src/addons/mod/forum/components/index/index.ts index 0b956a286..7a651b621 100644 --- a/src/addons/mod/forum/components/index/index.ts +++ b/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 - showSortOrderSelector(event: MouseEvent): void { + async showSortOrderSelector(): Promise { 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 - // const params = { sortOrders: this.sortOrders, selected: this.selectedSortOrder.value }; - // const modal = this.modalCtrl.create('AddonModForumSortOrderSelectorPage', params); - // modal.onDidDismiss((sortOrder) => { - // this.sortOrderSelectorExpanded = false; + modal.present(); - // if (sortOrder && sortOrder.value != this.selectedSortOrder.value) { - // 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.'); - // }); - // } - // }); + this.sortOrderSelectorExpanded = true; - // modal.present({ ev: event }); - // this.sortOrderSelectorExpanded = true; + const result = await modal.onDidDismiss(); + + 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.'); + } + } } /** diff --git a/src/addons/mod/forum/components/sort-order-selector/sort-order-selector.html b/src/addons/mod/forum/components/sort-order-selector/sort-order-selector.html new file mode 100644 index 000000000..6911e0bdc --- /dev/null +++ b/src/addons/mod/forum/components/sort-order-selector/sort-order-selector.html @@ -0,0 +1,26 @@ + + + + + + {{ 'core.sort' | translate }} + + + + + + + + + + + + +

{{ sortOrder.label | translate }}

+ + + + + diff --git a/src/addons/mod/forum/components/sort-order-selector/sort-order-selector.ts b/src/addons/mod/forum/components/sort-order-selector/sort-order-selector.ts new file mode 100644 index 000000000..8c3669bee --- /dev/null +++ b/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); + } + +}