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>
</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>
</ion-content>
</core-split-view>

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

@ -59,6 +59,7 @@ export class AddonCalendarListPage implements OnDestroy {
notificationsEnabled = false;
filteredEvents = [];
canLoadMore = false;
loadMoreError = false;
filter = {
course: this.allCourses
};
@ -127,6 +128,8 @@ export class AddonCalendarListPage implements OnDestroy {
* @return {Promise<any>} Promise resolved when done.
*/
fetchEvents(refresh: boolean = false): Promise<any> {
this.loadMoreError = false;
return this.calendarProvider.getEventsList(this.daysLoaded, AddonCalendarProvider.DAYS_INTERVAL).then((events) => {
this.daysLoaded += AddonCalendarProvider.DAYS_INTERVAL;
if (events.length === 0) {
@ -168,7 +171,7 @@ export class AddonCalendarListPage implements OnDestroy {
this.content.resize();
}).catch((error) => {
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(() => {
// Success retrieving events. Get categories if needed.
if (this.getCategories) {

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

@ -15,7 +15,7 @@
<ion-content class="has-footer">
<core-loading [hideUntil]="loaded">
<!-- 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">
<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">

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

@ -62,6 +62,7 @@ export class AddonMessagesDiscussionPage implements OnDestroy {
loaded = false;
showKeyboard = false;
canLoadMore = false;
loadMoreError = false;
messages = [];
showDelete = false;
canDelete = false;
@ -206,6 +207,8 @@ export class AddonMessagesDiscussionPage implements OnDestroy {
* @return {Promise<any>} Resolved when done.
*/
protected fetchData(): Promise<any> {
this.loadMoreError = false;
this.logger.debug(`Polling new messages for discussion with user '${this.userId}'`);
if (this.messagesBeingSent > 0) {
// 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.fetchData().catch((error) => {
this.loadMoreError = true; // Set to prevent infinite calls with infinite-loading.
this.pagesLoaded--;
this.domUtils.showErrorModalDefault(error, 'addon.messages.errorwhileretrievingmessages', true);
}).finally(() => {

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

@ -88,7 +88,7 @@
</div>
</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>
<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;
forum: any;
canLoadMore = false;
loadMoreError = false;
discussions = [];
offlineDiscussions = [];
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.
*/
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) => {
this.forum = forum;
@ -184,7 +187,7 @@ export class AddonModForumIndexComponent extends CoreCourseModuleMainActivityCom
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.
*/
protected fetchDiscussions(refresh: boolean): Promise<any> {
this.loadMoreError = false;
if (refresh) {
this.page = 0;
}
@ -314,7 +319,7 @@ export class AddonModForumIndexComponent extends CoreCourseModuleMainActivityCom
return this.fetchDiscussions(false).catch((message) => {
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(() => {
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-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>
<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 = [];
canAdd = false;
canLoadMore = false;
loadMoreError = false;
loadingMessage = this.translate.instant('core.loading');
selectedEntry: number;
@ -139,6 +140,8 @@ export class AddonModGlossaryIndexComponent extends CoreCourseModuleMainActivity
* @return {Promise<any>} Promise resolved when done.
*/
protected fetchEntries(append: boolean = false): Promise<any> {
this.loadMoreError = false;
if (!this.fetchFunction || !this.fetchArguments) {
// This happens in search mode with an empty query.
return Promise.resolve({entries: [], count: 0});
@ -155,8 +158,6 @@ export class AddonModGlossaryIndexComponent extends CoreCourseModuleMainActivity
}
this.canLoadMore = this.entries.length < result.count;
}).catch((error) => {
this.canLoadMore = false; // Set to false to prevent infinite calls with infinite-loading.
return Promise.reject(error);
});
}
@ -294,6 +295,7 @@ export class AddonModGlossaryIndexComponent extends CoreCourseModuleMainActivity
*/
loadMoreEntries(infiniteComplete?: any): Promise<any> {
return this.fetchEntries(true).catch((error) => {
this.loadMoreError = true;
this.domUtils.showErrorModalDefault(error, 'addon.mod_glossary.errorloadingentries', true);
}).finally(() => {
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>
</ion-card>
<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>
</ion-content>

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

@ -36,6 +36,7 @@ export class AddonNotificationsListPage {
notifications = [];
notificationsLoaded = false;
canLoadMore = false;
loadMoreError = false;
canMarkAllNotificationsAsRead = false;
loadingMarkAllNotificationsAsRead = false;
@ -76,6 +77,8 @@ export class AddonNotificationsListPage {
* @return {Promise<any>} Resolved when done.
*/
protected fetchNotifications(refresh?: boolean): Promise<any> {
this.loadMoreError = false;
if (refresh) {
this.readCount = 0;
this.unreadCount = 0;
@ -107,7 +110,7 @@ export class AddonNotificationsListPage {
}).catch((error) => {
if (unread.length == 0) {
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 {
@ -125,7 +128,7 @@ export class AddonNotificationsListPage {
});
}).catch((error) => {
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>
<button ion-button block (click)="loadMore()" color="light">
{{'core.loadmore' | translate }}
</button>
</div>
<ng-container *ngIf="!loadingMore && position != 'top'">
<div *ngIf="enabled || error" padding-horizontal>
<button *ngIf="!error" ion-button block (click)="loadMore()" color="light">
{{ 'core.loadmore' | translate }}
</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>
<div *ngIf="enabled && !loadingMore && position == 'top'" padding-horizontal>
<button ion-button block (click)="loadMore()" color="light">
{{'core.loadmore' | translate }}
</button>
</div>
<ng-container *ngIf="!loadingMore && position == 'top'">
<div *ngIf="enabled || error" padding-horizontal>
<button *ngIf="!error" ion-button block (click)="loadMore()" color="light">
{{ 'core.loadmore' | translate }}
</button>
<button *ngIf="error" ion-button block (click)="loadMore()" color="light">
{{ 'core.tryagain' | translate }}
</button>
</div>
</ng-container>
<div *ngIf="loadingMore" padding text-center>
<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 {
@Input() enabled: boolean;
@Input() error = false;
@Input() position = 'bottom';
@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>
<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-infinite-loading [enabled]="canLoadMore" (action)="loadMoreResults($event)"></core-infinite-loading>
<core-infinite-loading [enabled]="canLoadMore" (action)="loadMoreResults($event)" [error]="loadMoreError"></core-infinite-loading>
</div>
</ion-content>

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

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

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

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