EVOgeek
/
Vmeda.Online
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #1618 from crazyserver/MOBILE-1070 

MOBILE-1070 ux: Add retry button when infinite loading fails
main
Juan Leyva 2018-11-22 15:32:38 +01:00 committed by GitHub
parent c6cae89d98 2c66bf23ae
commit ccc92e332b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
16 changed files with 61 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/addon/calendar/pages/list/list.html
View File

@ -29,7 +29,7 @@
</a> </a>
</ion-list> </ion-list>
<core-infinite-loading [enabled]="canLoadMore" (action)="loadMoreEvents($event)"></core-infinite-loading> <core-infinite-loading [enabled]="canLoadMore" (action)="loadMoreEvents($event)" [error]="loadMoreError"></core-infinite-loading>
</core-loading> </core-loading>
</ion-content> </ion-content>
</core-split-view> </core-split-view>

5
src/addon/calendar/pages/list/list.ts
View File

@ -59,6 +59,7 @@ export class AddonCalendarListPage implements OnDestroy {
notificationsEnabled = false; notificationsEnabled = false;
filteredEvents = []; filteredEvents = [];
canLoadMore = false; canLoadMore = false;
loadMoreError = false;
filter = { filter = {
course: this.allCourses course: this.allCourses
}; };
@ -127,6 +128,8 @@ export class AddonCalendarListPage implements OnDestroy {
* @return {Promise<any>} Promise resolved when done. * @return {Promise<any>} Promise resolved when done.
*/ */
fetchEvents(refresh: boolean = false): Promise<any> { fetchEvents(refresh: boolean = false): Promise<any> {
this.loadMoreError = false;
return this.calendarProvider.getEventsList(this.daysLoaded, AddonCalendarProvider.DAYS_INTERVAL).then((events) => { return this.calendarProvider.getEventsList(this.daysLoaded, AddonCalendarProvider.DAYS_INTERVAL).then((events) => {
this.daysLoaded += AddonCalendarProvider.DAYS_INTERVAL; this.daysLoaded += AddonCalendarProvider.DAYS_INTERVAL;
if (events.length === 0) { if (events.length === 0) {
@ -168,7 +171,7 @@ export class AddonCalendarListPage implements OnDestroy {
this.content.resize(); this.content.resize();
}).catch((error) => { }).catch((error) => {
this.domUtils.showErrorModalDefault(error, 'addon.calendar.errorloadevents', true); this.domUtils.showErrorModalDefault(error, 'addon.calendar.errorloadevents', true);
this.canLoadMore = false; // Set to false to prevent infinite calls with infinite-loading. this.loadMoreError = true; // Set to prevent infinite calls with infinite-loading.
}).then(() => { }).then(() => {
// Success retrieving events. Get categories if needed. // Success retrieving events. Get categories if needed.
if (this.getCategories) { if (this.getCategories) {

2
src/addon/messages/pages/discussion/discussion.html
View File

@ -15,7 +15,7 @@
<ion-content class="has-footer"> <ion-content class="has-footer">
<core-loading [hideUntil]="loaded"> <core-loading [hideUntil]="loaded">
<!-- Load previous messages. --> <!-- Load previous messages. -->
<core-infinite-loading [enabled]="canLoadMore" (action)="loadPrevious($event)" position="top"></core-infinite-loading> <core-infinite-loading [enabled]="canLoadMore" (action)="loadPrevious($event)" position="top" [error]="loadMoreError"></core-infinite-loading>
<ion-list class="addon-messages-discussion-container" [attr.aria-live]="polite"> <ion-list class="addon-messages-discussion-container" [attr.aria-live]="polite">
<ng-container *ngFor="let message of messages; index as index; last as last"> <ng-container *ngFor="let message of messages; index as index; last as last">
<ion-chip *ngIf="showDate(message, messages[index - 1])" class="addon-messages-date" color="light"> <ion-chip *ngIf="showDate(message, messages[index - 1])" class="addon-messages-date" color="light">

5
src/addon/messages/pages/discussion/discussion.ts
View File

@ -62,6 +62,7 @@ export class AddonMessagesDiscussionPage implements OnDestroy {
loaded = false; loaded = false;
showKeyboard = false; showKeyboard = false;
canLoadMore = false; canLoadMore = false;
loadMoreError = false;
messages = []; messages = [];
showDelete = false; showDelete = false;
canDelete = false; canDelete = false;
@ -206,6 +207,8 @@ export class AddonMessagesDiscussionPage implements OnDestroy {
* @return {Promise<any>} Resolved when done. * @return {Promise<any>} Resolved when done.
*/ */
protected fetchData(): Promise<any> { protected fetchData(): Promise<any> {
this.loadMoreError = false;
this.logger.debug(`Polling new messages for discussion with user '${this.userId}'`); this.logger.debug(`Polling new messages for discussion with user '${this.userId}'`);
if (this.messagesBeingSent > 0) { if (this.messagesBeingSent > 0) {
// We do not poll while a message is being sent or we could confuse the user. // We do not poll while a message is being sent or we could confuse the user.
@ -552,6 +555,8 @@ export class AddonMessagesDiscussionPage implements OnDestroy {
this.pagesLoaded++; this.pagesLoaded++;
this.fetchData().catch((error) => { this.fetchData().catch((error) => {
this.loadMoreError = true; // Set to prevent infinite calls with infinite-loading.
this.pagesLoaded--; this.pagesLoaded--;
this.domUtils.showErrorModalDefault(error, 'addon.messages.errorwhileretrievingmessages', true); this.domUtils.showErrorModalDefault(error, 'addon.messages.errorwhileretrievingmessages', true);
}).finally(() => { }).finally(() => {

2
src/addon/mod/forum/components/index/addon-mod-forum-index.html
View File

@ -88,7 +88,7 @@
</div> </div>
</core-empty-box> </core-empty-box>
<core-infinite-loading [enabled]="canLoadMore" (action)="fetchMoreDiscussions($event)"></core-infinite-loading> <core-infinite-loading [enabled]="canLoadMore" (action)="fetchMoreDiscussions($event)" [error]="loadMoreError"></core-infinite-loading>
</core-loading> </core-loading>
<ion-fab bottom end *ngIf="forum && forum.cancreatediscussions"> <ion-fab bottom end *ngIf="forum && forum.cancreatediscussions">

9
src/addon/mod/forum/components/index/index.ts
View File

@ -41,6 +41,7 @@ export class AddonModForumIndexComponent extends CoreCourseModuleMainActivityCom
descriptionNote: string; descriptionNote: string;
forum: any; forum: any;
canLoadMore = false; canLoadMore = false;
loadMoreError = false;
discussions = []; discussions = [];
offlineDiscussions = []; offlineDiscussions = [];
selectedDiscussion = 0; // Disucssion ID or negative timecreated if it's an offline discussion. selectedDiscussion = 0; // Disucssion ID or negative timecreated if it's an offline discussion.
@ -130,6 +131,8 @@ export class AddonModForumIndexComponent extends CoreCourseModuleMainActivityCom
* @return {Promise<any>} Promise resolved when done. * @return {Promise<any>} Promise resolved when done.
*/ */
protected fetchContent(refresh: boolean = false, sync: boolean = false, showErrors: boolean = false): Promise<any> { protected fetchContent(refresh: boolean = false, sync: boolean = false, showErrors: boolean = false): Promise<any> {
this.loadMoreError = false;
return this.forumProvider.getForum(this.courseId, this.module.id).then((forum) => { return this.forumProvider.getForum(this.courseId, this.module.id).then((forum) => {
this.forum = forum; this.forum = forum;
@ -184,7 +187,7 @@ export class AddonModForumIndexComponent extends CoreCourseModuleMainActivityCom
this.domUtils.showErrorModalDefault(message, 'addon.mod_forum.errorgetforum', true); this.domUtils.showErrorModalDefault(message, 'addon.mod_forum.errorgetforum', true);
this.canLoadMore = false; // Set to false to prevent infinite calls with infinite-loading. this.loadMoreError = true; // Set to prevent infinite calls with infinite-loading.
}); });
} }
@ -241,6 +244,8 @@ export class AddonModForumIndexComponent extends CoreCourseModuleMainActivityCom
* @return {Promise<any>} Promise resolved when done. * @return {Promise<any>} Promise resolved when done.
*/ */
protected fetchDiscussions(refresh: boolean): Promise<any> { protected fetchDiscussions(refresh: boolean): Promise<any> {
this.loadMoreError = false;
if (refresh) { if (refresh) {
this.page = 0; this.page = 0;
} }
@ -314,7 +319,7 @@ export class AddonModForumIndexComponent extends CoreCourseModuleMainActivityCom
return this.fetchDiscussions(false).catch((message) => { return this.fetchDiscussions(false).catch((message) => {
this.domUtils.showErrorModalDefault(message, 'addon.mod_forum.errorgetforum', true); this.domUtils.showErrorModalDefault(message, 'addon.mod_forum.errorgetforum', true);
this.canLoadMore = false; // Set to false to prevent infinite calls with infinite-loading. this.loadMoreError = true; // Set to prevent infinite calls with infinite-loading.
}).finally(() => { }).finally(() => {
infiniteComplete && infiniteComplete(); infiniteComplete && infiniteComplete();
}); });

2
src/addon/mod/glossary/components/index/addon-mod-glossary-index.html
View File

@ -56,7 +56,7 @@
<core-empty-box *ngIf="!entries.length && !offlineEntries.length" icon="list" [message]="'addon.mod_glossary.noentriesfound' | translate"></core-empty-box> <core-empty-box *ngIf="!entries.length && !offlineEntries.length" icon="list" [message]="'addon.mod_glossary.noentriesfound' | translate"></core-empty-box>
<core-infinite-loading [enabled]="canLoadMore" (action)="loadMoreEntries($event)"></core-infinite-loading> <core-infinite-loading [enabled]="canLoadMore" (action)="loadMoreEntries($event)" [error]="loadMoreError"></core-infinite-loading>
</core-loading> </core-loading>
<ion-fab bottom end *ngIf="canAdd"> <ion-fab bottom end *ngIf="canAdd">

6
src/addon/mod/glossary/components/index/index.ts
View File

@ -44,6 +44,7 @@ export class AddonModGlossaryIndexComponent extends CoreCourseModuleMainActivity
offlineEntries = []; offlineEntries = [];
canAdd = false; canAdd = false;
canLoadMore = false; canLoadMore = false;
loadMoreError = false;
loadingMessage = this.translate.instant('core.loading'); loadingMessage = this.translate.instant('core.loading');
selectedEntry: number; selectedEntry: number;
@ -139,6 +140,8 @@ export class AddonModGlossaryIndexComponent extends CoreCourseModuleMainActivity
* @return {Promise<any>} Promise resolved when done. * @return {Promise<any>} Promise resolved when done.
*/ */
protected fetchEntries(append: boolean = false): Promise<any> { protected fetchEntries(append: boolean = false): Promise<any> {
this.loadMoreError = false;
if (!this.fetchFunction || !this.fetchArguments) { if (!this.fetchFunction || !this.fetchArguments) {
// This happens in search mode with an empty query. // This happens in search mode with an empty query.
return Promise.resolve({entries: [], count: 0}); return Promise.resolve({entries: [], count: 0});
@ -155,8 +158,6 @@ export class AddonModGlossaryIndexComponent extends CoreCourseModuleMainActivity
} }
this.canLoadMore = this.entries.length < result.count; this.canLoadMore = this.entries.length < result.count;
}).catch((error) => { }).catch((error) => {
this.canLoadMore = false; // Set to false to prevent infinite calls with infinite-loading.
return Promise.reject(error); return Promise.reject(error);
}); });
} }
@ -294,6 +295,7 @@ export class AddonModGlossaryIndexComponent extends CoreCourseModuleMainActivity
*/ */
loadMoreEntries(infiniteComplete?: any): Promise<any> { loadMoreEntries(infiniteComplete?: any): Promise<any> {
return this.fetchEntries(true).catch((error) => { return this.fetchEntries(true).catch((error) => {
this.loadMoreError = true;
this.domUtils.showErrorModalDefault(error, 'addon.mod_glossary.errorloadingentries', true); this.domUtils.showErrorModalDefault(error, 'addon.mod_glossary.errorloadingentries', true);
}).finally(() => { }).finally(() => {
infiniteComplete && infiniteComplete(); infiniteComplete && infiniteComplete();

2
src/addon/notifications/pages/list/list.html
View File

@ -32,6 +32,6 @@
<addon-notifications-actions [contextUrl]="notification.contexturl" [courseId]="notification.courseid"></addon-notifications-actions> <addon-notifications-actions [contextUrl]="notification.contexturl" [courseId]="notification.courseid"></addon-notifications-actions>
</ion-card> </ion-card>
<core-empty-box *ngIf="!notifications || notifications.length <= 0" icon="notifications" [message]="'addon.notifications.therearentnotificationsyet' | translate"></core-empty-box> <core-empty-box *ngIf="!notifications || notifications.length <= 0" icon="notifications" [message]="'addon.notifications.therearentnotificationsyet' | translate"></core-empty-box>
<core-infinite-loading [enabled]="canLoadMore" (action)="loadMoreNotifications($event)"></core-infinite-loading> <core-infinite-loading [enabled]="canLoadMore" (action)="loadMoreNotifications($event)" [error]="loadMoreError"></core-infinite-loading>
</core-loading> </core-loading>
</ion-content> </ion-content>

7
src/addon/notifications/pages/list/list.ts
View File

@ -36,6 +36,7 @@ export class AddonNotificationsListPage {
notifications = []; notifications = [];
notificationsLoaded = false; notificationsLoaded = false;
canLoadMore = false; canLoadMore = false;
loadMoreError = false;
canMarkAllNotificationsAsRead = false; canMarkAllNotificationsAsRead = false;
loadingMarkAllNotificationsAsRead = false; loadingMarkAllNotificationsAsRead = false;
@ -76,6 +77,8 @@ export class AddonNotificationsListPage {
* @return {Promise<any>} Resolved when done. * @return {Promise<any>} Resolved when done.
*/ */
protected fetchNotifications(refresh?: boolean): Promise<any> { protected fetchNotifications(refresh?: boolean): Promise<any> {
this.loadMoreError = false;
if (refresh) { if (refresh) {
this.readCount = 0; this.readCount = 0;
this.unreadCount = 0; this.unreadCount = 0;
@ -107,7 +110,7 @@ export class AddonNotificationsListPage {
}).catch((error) => { }).catch((error) => {
if (unread.length == 0) { if (unread.length == 0) {
this.domUtils.showErrorModalDefault(error, 'addon.notifications.errorgetnotifications', true); this.domUtils.showErrorModalDefault(error, 'addon.notifications.errorgetnotifications', true);
this.canLoadMore = false; // Set to false to prevent infinite calls with infinite-loading. this.loadMoreError = true; // Set to prevent infinite calls with infinite-loading.
} }
})); }));
} else { } else {
@ -125,7 +128,7 @@ export class AddonNotificationsListPage {
}); });
}).catch((error) => { }).catch((error) => {
this.domUtils.showErrorModalDefault(error, 'addon.notifications.errorgetnotifications', true); this.domUtils.showErrorModalDefault(error, 'addon.notifications.errorgetnotifications', true);
this.canLoadMore = false; // Set to false to prevent infinite calls with infinite-loading. this.loadMoreError = true; // Set to prevent infinite calls with infinite-loading.
}); });
} }

32
src/components/infinite-loading/core-infinite-loading.html
View File

@ -1,18 +1,28 @@
<div *ngIf="enabled && !loadingMore && position != 'top'" padding-horizontal> <ng-container *ngIf="!loadingMore && position != 'top'">
<button ion-button block (click)="loadMore()" color="light"> <div *ngIf="enabled || error" padding-horizontal>
{{'core.loadmore' | translate }} <button *ngIf="!error" ion-button block (click)="loadMore()" color="light">
</button> {{ 'core.loadmore' | translate }}
</div> </button>
<button *ngIf="error" ion-button block (click)="loadMore()" color="light">
{{ 'core.tryagain' | translate }}
</button>
</div>
</ng-container>
<ion-infinite-scroll [enabled]="enabled && !loadingMore" (ionInfinite)="loadMore($event)" [position]="position"> <ion-infinite-scroll [enabled]="enabled && !error && !loadingMore" (ionInfinite)="loadMore($event)" [position]="position">
<ion-infinite-scroll-content></ion-infinite-scroll-content> <ion-infinite-scroll-content></ion-infinite-scroll-content>
</ion-infinite-scroll> </ion-infinite-scroll>
<div *ngIf="enabled && !loadingMore && position == 'top'" padding-horizontal> <ng-container *ngIf="!loadingMore && position == 'top'">
<button ion-button block (click)="loadMore()" color="light"> <div *ngIf="enabled || error" padding-horizontal>
{{'core.loadmore' | translate }} <button *ngIf="!error" ion-button block (click)="loadMore()" color="light">
</button> {{ 'core.loadmore' | translate }}
</div> </button>
<button *ngIf="error" ion-button block (click)="loadMore()" color="light">
{{ 'core.tryagain' | translate }}
</button>
</div>
</ng-container>
<div *ngIf="loadingMore" padding text-center> <div *ngIf="loadingMore" padding text-center>
<ion-spinner></ion-spinner> <ion-spinner></ion-spinner>

1
src/components/infinite-loading/infinite-loading.ts
View File

@ -27,6 +27,7 @@ import { InfiniteScroll } from 'ionic-angular';
}) })
export class CoreInfiniteLoadingComponent { export class CoreInfiniteLoadingComponent {
@Input() enabled: boolean; @Input() enabled: boolean;
@Input() error = false;
@Input() position = 'bottom'; @Input() position = 'bottom';
@Output() action: EventEmitter<() => void>; // Will emit an event when triggered. @Output() action: EventEmitter<() => void>; // Will emit an event when triggered.

2
src/core/courses/pages/search/search.html
View File

@ -10,7 +10,7 @@
<ion-item-divider color="light">{{ 'core.courses.totalcoursesearchresults' | translate:{$a: total} }}</ion-item-divider> <ion-item-divider color="light">{{ 'core.courses.totalcoursesearchresults' | translate:{$a: total} }}</ion-item-divider>
<core-empty-box *ngIf="total == 0" icon="search" [message]="'core.courses.nosearchresults' | translate"></core-empty-box> <core-empty-box *ngIf="total == 0" icon="search" [message]="'core.courses.nosearchresults' | translate"></core-empty-box>
<core-courses-course-list-item *ngFor="let course of courses" [course]="course"></core-courses-course-list-item> <core-courses-course-list-item *ngFor="let course of courses" [course]="course"></core-courses-course-list-item>
<core-infinite-loading [enabled]="canLoadMore" (action)="loadMoreResults($event)"></core-infinite-loading> <core-infinite-loading [enabled]="canLoadMore" (action)="loadMoreResults($event)" [error]="loadMoreError"></core-infinite-loading>
</div> </div>
</ion-content> </ion-content>

5
src/core/courses/pages/search/search.ts
View File

@ -29,6 +29,7 @@ export class CoreCoursesSearchPage {
total = 0; total = 0;
courses: any[]; courses: any[];
canLoadMore: boolean; canLoadMore: boolean;
loadMoreError = false;
protected page = 0; protected page = 0;
protected currentSearch = ''; protected currentSearch = '';
@ -68,6 +69,8 @@ export class CoreCoursesSearchPage {
* @return {Promise<any>} Promise resolved when done. * @return {Promise<any>} Promise resolved when done.
*/ */
protected searchCourses(): Promise<any> { protected searchCourses(): Promise<any> {
this.loadMoreError = false;
return this.coursesProvider.search(this.currentSearch, this.page).then((response) => { return this.coursesProvider.search(this.currentSearch, this.page).then((response) => {
if (this.page === 0) { if (this.page === 0) {
this.courses = response.courses; this.courses = response.courses;
@ -79,7 +82,7 @@ export class CoreCoursesSearchPage {
this.page++; this.page++;
this.canLoadMore = this.courses.length < this.total; this.canLoadMore = this.courses.length < this.total;
}).catch((error) => { }).catch((error) => {
this.canLoadMore = false; this.loadMoreError = true; // Set to prevent infinite calls with infinite-loading.
this.domUtils.showErrorModalDefault(error, 'core.courses.errorsearching', true); this.domUtils.showErrorModalDefault(error, 'core.courses.errorsearching', true);
}); });
} }

2
src/core/user/components/participants/core-user-participants.html
View File

@ -16,7 +16,7 @@
<p *ngIf="participant.lastaccess"><strong>{{ 'core.lastaccess' | translate }}: </strong>{{ participant.lastaccess * 1000 | coreFormatDate:"dfmediumdate"}}</p> <p *ngIf="participant.lastaccess"><strong>{{ 'core.lastaccess' | translate }}: </strong>{{ participant.lastaccess * 1000 | coreFormatDate:"dfmediumdate"}}</p>
</a> </a>
</ion-list> </ion-list>
<core-infinite-loading [enabled]="canLoadMore" (action)="loadMoreData($event)"></core-infinite-loading> <core-infinite-loading [enabled]="canLoadMore" (action)="loadMoreData($event)" [error]="loadMoreError"></core-infinite-loading>
</core-loading> </core-loading>
</ion-content> </ion-content>
</core-split-view> </core-split-view>

4
src/core/user/components/participants/participants.ts
View File

@ -34,6 +34,7 @@ export class CoreUserParticipantsComponent implements OnInit {
participantId: number; participantId: number;
participants = []; participants = [];
canLoadMore = false; canLoadMore = false;
loadMoreError = false;
participantsLoaded = false; participantsLoaded = false;
constructor(private userProvider: CoreUserProvider, private domUtils: CoreDomUtilsProvider) { } constructor(private userProvider: CoreUserProvider, private domUtils: CoreDomUtilsProvider) { }
@ -68,6 +69,7 @@ export class CoreUserParticipantsComponent implements OnInit {
*/ */
fetchData(refresh: boolean = false): Promise<any> { fetchData(refresh: boolean = false): Promise<any> {
const firstToGet = refresh ? 0 : this.participants.length; const firstToGet = refresh ? 0 : this.participants.length;
this.loadMoreError = false;
return this.userProvider.getParticipants(this.courseId, firstToGet).then((data) => { return this.userProvider.getParticipants(this.courseId, firstToGet).then((data) => {
if (refresh) { if (refresh) {
@ -78,7 +80,7 @@ export class CoreUserParticipantsComponent implements OnInit {
this.canLoadMore = data.canLoadMore; this.canLoadMore = data.canLoadMore;
}).catch((error) => { }).catch((error) => {
this.domUtils.showErrorModalDefault(error, 'Error loading participants'); this.domUtils.showErrorModalDefault(error, 'Error loading participants');
this.canLoadMore = false; // Set to false to prevent infinite calls with infinite-loading. this.loadMoreError = true; // Set to prevent infinite calls with infinite-loading.
}); });
} }