From 52e6e41fcd287627cfe19b3452f667dd03b3567a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= Date: Thu, 6 Feb 2020 15:02:19 +0100 Subject: [PATCH] MOBILE-3335 glossary: Improve UX on browser modes --- .../index/addon-mod-glossary-index.html | 11 ++- .../mod/glossary/components/index/index.ts | 81 ++++++++++++------- .../components/mode-picker/mode-picker.ts | 10 +-- 3 files changed, 61 insertions(+), 41 deletions(-) diff --git a/src/addon/mod/glossary/components/index/addon-mod-glossary-index.html b/src/addon/mod/glossary/components/index/addon-mod-glossary-index.html index d5d0d361c..95f710bb1 100644 --- a/src/addon/mod/glossary/components/index/addon-mod-glossary-index.html +++ b/src/addon/mod/glossary/components/index/addon-mod-glossary-index.html @@ -1,7 +1,10 @@ - + @@ -29,11 +32,11 @@ {{ 'core.hasdatatosync' | translate:{$a: moduleName} }} - + - + {{ 'addon.mod_glossary.entriestobesynced' | translate }} diff --git a/src/addon/mod/glossary/components/index/index.ts b/src/addon/mod/glossary/components/index/index.ts index cc1550134..a2016e96b 100644 --- a/src/addon/mod/glossary/components/index/index.ts +++ b/src/addon/mod/glossary/components/index/index.ts @@ -25,7 +25,7 @@ import { AddonModGlossarySyncProvider } from '../../providers/sync'; import { AddonModGlossaryModePickerPopoverComponent } from '../mode-picker/mode-picker'; import { AddonModGlossaryPrefetchHandler } from '../../providers/prefetch-handler'; -type FetchMode = 'author_all' | 'cat_all' | 'newest_first' | 'recently_updated' | 'search' | 'letter_all'; +type FetchMode = 'author_all' | 'cat_all' | 'newest_first' | 'recently_updated' | 'letter_all'; /** * Component that displays a glossary entry page. @@ -41,8 +41,6 @@ export class AddonModGlossaryIndexComponent extends CoreCourseModuleMainActivity component = AddonModGlossaryProvider.COMPONENT; moduleName = 'glossary'; - fetchMode: FetchMode; - viewMode: string; isSearch = false; entries = []; offlineEntries = []; @@ -60,6 +58,10 @@ export class AddonModGlossaryIndexComponent extends CoreCourseModuleMainActivity protected showDivider: (entry: any, previous?: any) => boolean; protected getDivider: (entry: any) => string; protected addEntryObserver: any; + protected fetchMode: FetchMode; + protected viewMode: string; + protected fetchedEntriesCanLoadMore = false; + protected fetchedEntries = []; hasOfflineRatings: boolean; protected ratingOfflineObserver: any; @@ -252,6 +254,7 @@ export class AddonModGlossaryIndexComponent extends CoreCourseModuleMainActivity */ protected switchMode(mode: FetchMode): void { this.fetchMode = mode; + this.isSearch = false; switch (mode) { case 'author_all': @@ -294,15 +297,6 @@ export class AddonModGlossaryIndexComponent extends CoreCourseModuleMainActivity this.getDivider = null; this.showDivider = (): boolean => false; break; - case 'search': - // Search for entries. - this.viewMode = 'search'; - this.fetchFunction = this.glossaryProvider.getEntriesBySearch; - this.fetchInvalidate = this.glossaryProvider.invalidateEntriesBySearch; - this.fetchArguments = null; // Dynamically set later. - this.getDivider = null; - this.showDivider = (): boolean => false; - break; case 'letter_all': default: // Consider it is 'letter_all'. @@ -341,26 +335,15 @@ export class AddonModGlossaryIndexComponent extends CoreCourseModuleMainActivity */ openModePicker(event: MouseEvent): void { const popover = this.popoverCtrl.create(AddonModGlossaryModePickerPopoverComponent, { - glossary: this.glossary, - selectedMode: this.fetchMode + browsemodes: this.glossary.browsemodes, + selectedMode: this.isSearch ? '' : this.fetchMode }); - popover.onDidDismiss((newMode: FetchMode) => { - if (newMode === this.fetchMode) { - return; - } - - this.loadingMessage = this.translate.instant('core.loading'); - this.domUtils.scrollToTop(this.content); - this.switchMode(newMode); - - if (this.fetchMode === 'search') { - // If it's not an instant search, then we reset the values. - this.entries = []; - this.canLoadMore = false; - } else { - this.loaded = false; - this.loadContent(); + popover.onDidDismiss((mode: FetchMode) => { + if (mode !== this.fetchMode) { + this.changeFetchMode(mode); + } else if (this.isSearch) { + this.toggleSearch(); } }); @@ -369,6 +352,44 @@ export class AddonModGlossaryIndexComponent extends CoreCourseModuleMainActivity }); } + /** + * Toggles between search and fetch mode. + */ + toggleSearch(): void { + if (this.isSearch) { + this.isSearch = false; + this.entries = this.fetchedEntries; + this.canLoadMore = this.fetchedEntriesCanLoadMore; + this.switchMode(this.fetchMode); + } else { + // Search for entries. + this.fetchFunction = this.glossaryProvider.getEntriesBySearch; + this.fetchInvalidate = this.glossaryProvider.invalidateEntriesBySearch; + this.fetchArguments = null; // Dynamically set later. + this.getDivider = null; + this.showDivider = (): boolean => false; + this.isSearch = true; + + this.fetchedEntries = this.entries; + this.fetchedEntriesCanLoadMore = this.canLoadMore; + this.canLoadMore = false; + this.entries = []; + } + } + + /** + * Change fetch mode + * @param {FetchMode} mode [description] + */ + changeFetchMode(mode: FetchMode): void { + this.isSearch = false; + this.loadingMessage = this.translate.instant('core.loading'); + this.domUtils.scrollToTop(this.content); + this.switchMode(mode); + this.loaded = false; + this.loadContent(); + } + /** * Opens an entry. * diff --git a/src/addon/mod/glossary/components/mode-picker/mode-picker.ts b/src/addon/mod/glossary/components/mode-picker/mode-picker.ts index d7e51905c..baac2a4f4 100644 --- a/src/addon/mod/glossary/components/mode-picker/mode-picker.ts +++ b/src/addon/mod/glossary/components/mode-picker/mode-picker.ts @@ -27,14 +27,10 @@ export class AddonModGlossaryModePickerPopoverComponent { selectedMode: string; constructor(navParams: NavParams, private viewCtrl: ViewController) { - this.selectedMode = navParams.get('selectedMode'); - const glossary = navParams.get('glossary'); + this.selectedMode = navParams.get('selectedMode') || ''; + const browsemodes = navParams.get('browsemodes'); - // Preparing browse modes. - this.modes = [ - {key: 'search', langkey: 'addon.mod_glossary.bysearch'} - ]; - glossary.browsemodes.forEach((mode) => { + browsemodes.forEach((mode) => { switch (mode) { case 'letter' : this.modes.push({key: 'letter_all', langkey: 'addon.mod_glossary.byalphabet'});