Merge pull request #2051 from albertgasset/MOBILE-3068

Mobile 3068

src/addon/calendar/components/calendar/calendar.ts

@@ -23,6 +23,7 @@ import { AddonCalendarProvider } from '../../providers/calendar';
 import { AddonCalendarHelperProvider } from '../../providers/helper';
 import { AddonCalendarOfflineProvider } from '../../providers/calendar-offline';
 import { CoreCoursesProvider } from '@core/courses/providers/courses';
+import { CoreAppProvider } from '@providers/app';
 
 /**
  * Component that displays a calendar.
@@ -70,7 +71,8 @@ export class AddonCalendarCalendarComponent implements OnInit, OnChanges, OnDest
             private domUtils: CoreDomUtilsProvider,
             private timeUtils: CoreTimeUtilsProvider,
             private utils: CoreUtilsProvider,
-            private coursesProvider: CoreCoursesProvider) {
+            private coursesProvider: CoreCoursesProvider,
+            private appProvider: CoreAppProvider) {
 
         this.currentSiteId = sitesProvider.getCurrentSiteId();
 
@@ -184,8 +186,14 @@ export class AddonCalendarCalendarComponent implements OnInit, OnChanges, OnDest
      */
     fetchEvents(): Promise<any> {
         // Don't pass courseId and categoryId, we'll filter them locally.
-        return this.calendarProvider.getMonthlyEvents(this.year, this.month).then((result) => {
-
+        return this.calendarProvider.getMonthlyEvents(this.year, this.month).catch((error) => {
+            if (!this.appProvider.isOnline()) {
+                // Allow navigating to non-cached months in offline (behave as if using emergency cache).
+                return this.calendarHelper.getOfflineMonthWeeks(this.year, this.month);
+            } else {
+                return Promise.reject(error);
+            }
+        }).then((result) => {
             // Calculate the period name. We don't use the one in result because it's in server's language.
             this.periodName = this.timeUtils.userDate(new Date(this.year, this.month - 1).getTime(), 'core.strftimemonthyear');
 

src/addon/calendar/components/upcoming-events/upcoming-events.ts

@@ -264,7 +264,7 @@ export class AddonCalendarUpcomingEventsComponent implements OnInit, OnChanges,
             return this.onlineEvents;
         }
 
-        const start = Date.now(),
+        const start = Date.now() / 1000,
             end = start + (CoreConstants.SECONDS_DAY * this.lookAhead);
         let result = this.onlineEvents;
 

src/addon/calendar/pages/day/day.ts

@@ -282,7 +282,14 @@ export class AddonCalendarDayPage implements OnInit, OnDestroy {
      */
     fetchEvents(): Promise<any> {
         // Don't pass courseId and categoryId, we'll filter them locally.
-        return this.calendarProvider.getDayEvents(this.year, this.month, this.day).then((result) => {
+        return this.calendarProvider.getDayEvents(this.year, this.month, this.day).catch((error) => {
+            if (!this.appProvider.isOnline()) {
+                // Allow navigating to non-cached days in offline (behave as if using emergency cache).
+                return Promise.resolve({ events: [] });
+            } else {
+                return Promise.reject(error);
+            }
+        }).then((result) => {
             const promises = [];
 
             // Calculate the period name. We don't use the one in result because it's in server's language.
@@ -321,7 +328,7 @@ export class AddonCalendarDayPage implements OnInit, OnDestroy {
     protected mergeEvents(): any[] {
         this.hasOffline = false;
 
-        if (!this.offlineEditedEventsIds.length && !this.deletedEvents.length) {
+        if (!Object.keys(this.offlineEvents).length && !this.deletedEvents.length) {
             // No offline events, nothing to merge.
             return this.onlineEvents;
         }

src/addon/calendar/pages/index/index.html

@@ -1,6 +1,6 @@
 <ion-header>
     <ion-navbar core-back-button>
-        <ion-title>{{ 'addon.calendar.calendarevents' | translate }}</ion-title>
+        <ion-title>{{ (showCalendar ? 'addon.calendar.calendarevents' : 'addon.calendar.upcomingevents') | translate }}</ion-title>
         <ion-buttons end>
             <button *ngIf="showCalendar" ion-button icon-only (click)="toggleDisplay()" [attr.aria-label]="'addon.calendar.upcomingevents' | translate">
                 <ion-icon name="list"></ion-icon>

src/addon/calendar/providers/calendar.ts

@@ -43,6 +43,7 @@ export class AddonCalendarProvider {
     static DEFAULT_NOTIFICATION_TIME_CHANGED = 'AddonCalendarDefaultNotificationTimeChangedEvent';
     static DEFAULT_NOTIFICATION_TIME_SETTING = 'mmaCalendarDefaultNotifTime';
     static DEFAULT_NOTIFICATION_TIME = 60;
+    static STARTING_WEEK_DAY = 'addon_calendar_starting_week_day';
     static NEW_EVENT_EVENT = 'addon_calendar_new_event';
     static NEW_EVENT_DISCARDED_EVENT = 'addon_calendar_new_event_discarded';
     static EDIT_EVENT_EVENT = 'addon_calendar_edit_event';
@@ -726,7 +727,7 @@ export class AddonCalendarProvider {
             return this.userProvider.getUserPreference('calendar_lookahead').catch((error) => {
                 // Ignore errors.
             }).then((value): any => {
-                if (typeof value != 'undefined') {
+                if (value != null) {
                     return value;
                 }
 
@@ -1198,6 +1199,11 @@ export class AddonCalendarProvider {
                     });
                 });
 
+                // Store starting week day preference, we need it in offline to show months that are not in cache.
+                if (this.appProvider.isOnline()) {
+                    this.configProvider.set(AddonCalendarProvider.STARTING_WEEK_DAY, response.daynames[0].dayno);
+                }
+
                 return response;
             });
         });

src/addon/calendar/providers/helper.ts

@@ -18,6 +18,8 @@ import { CoreSitesProvider } from '@providers/sites';
 import { CoreCourseProvider } from '@core/course/providers/course';
 import { AddonCalendarProvider } from './calendar';
 import { CoreConstants } from '@core/constants';
+import { CoreConfigProvider } from '@providers/config';
+import { CoreUtilsProvider } from '@providers/utils/utils';
 import * as moment from 'moment';
 
 /**
@@ -38,7 +40,9 @@ export class AddonCalendarHelperProvider {
     constructor(logger: CoreLoggerProvider,
             private courseProvider: CoreCourseProvider,
             private sitesProvider: CoreSitesProvider,
-            private calendarProvider: AddonCalendarProvider) {
+            private calendarProvider: AddonCalendarProvider,
+            private configProvider: CoreConfigProvider,
+            private utils: CoreUtilsProvider) {
         this.logger = logger.getInstance('AddonCalendarHelperProvider');
     }
 
@@ -189,6 +193,66 @@ export class AddonCalendarHelperProvider {
         return year + '#' + month;
     }
 
+    /**
+     * Get weeks of a month in offline (with no events).
+     *
+     * The result has the same structure than getMonthlyEvents, but it only contains fields that are actually used by the app.
+     *
+     * @param {number} year Year to get.
+     * @param {number} month Month to get.
+     * @param {string} [siteId] Site ID. If not defined, current site.
+     * @return {Promise<any>} Promise resolved with the response.
+     */
+    getOfflineMonthWeeks(year: number, month: number, siteId?: string): Promise<any> {
+        return this.sitesProvider.getSite(siteId).then((site) => {
+            // Get starting week day user preference, fallback to site configuration.
+            const startWeekDay = site.getStoredConfig('calendar_startwday');
+
+            return this.configProvider.get(AddonCalendarProvider.STARTING_WEEK_DAY, startWeekDay);
+        }).then((startWeekDay) => {
+            const today = moment();
+            const isCurrentMonth = today.year() == year && today.month() == month - 1;
+            const weeks = [];
+
+            let date = moment({year, month: month - 1, date: 1});
+            for (let mday = 1; mday <= date.daysInMonth(); mday++) {
+                date = moment({year, month: month - 1, date: mday});
+
+                // Add new week and calculate prepadding.
+                if (!weeks.length || date.day() == startWeekDay) {
+                    const prepaddingLength = (date.day() - startWeekDay + 7) % 7;
+                    const prepadding = [];
+                    for (let i = 0; i < prepaddingLength; i++) {
+                        prepadding.push(i);
+                    }
+                    weeks.push({ prepadding, postpadding: [], days: []});
+                }
+
+                // Calculate postpadding of last week.
+                if (mday == date.daysInMonth()) {
+                    const postpaddingLength = (startWeekDay - date.day() + 6) % 7;
+                    const postpadding = [];
+                    for (let i = 0; i < postpaddingLength; i++) {
+                        postpadding.push(i);
+                    }
+                    weeks[weeks.length - 1].postpadding = postpadding;
+                }
+
+                // Add day to current week.
+                weeks[weeks.length - 1].days.push({
+                    events: [],
+                    hasevents: false,
+                    mday: date.date(),
+                    isweekend: date.day() == 0 || date.day() == 6,
+                    istoday: isCurrentMonth && today.date() == date.date(),
+                    calendareventtypes: [],
+                });
+            }
+
+            return {weeks, daynames: [{dayno: startWeekDay}]};
+        });
+    }
+
     /**
      * Check if the data of an event has changed.
      *
@@ -286,57 +350,67 @@ export class AddonCalendarHelperProvider {
      * @return {Promise<any>}           REsolved when done.
      */
     invalidateRepeatedEventsOnCalendar(event: any, repeated: number, siteId?: string): Promise<any> {
-        let invalidatePromise;
-        const timestarts = [];
+        return this.sitesProvider.getSite(siteId).then((site) => {
+            let invalidatePromise;
+            const timestarts = [];
 
-        if (repeated > 1) {
-            if (event.repeatid) {
-                // Being edited or deleted.
-                invalidatePromise = this.calendarProvider.getLocalEventsByRepeatIdFromLocalDb(event.repeatid, siteId)
-                        .then((events) => {
-                    return events.map((event) => {
-                        timestarts.push(event.timestart);
+            if (repeated > 1) {
+                if (event.repeatid) {
+                    // Being edited or deleted.
+                    invalidatePromise = this.calendarProvider.getLocalEventsByRepeatIdFromLocalDb(event.repeatid, site.id)
+                            .then((events) => {
+                        return this.utils.allPromises(events.map((event) => {
+                            timestarts.push(event.timestart);
 
-                        return this.calendarProvider.invalidateEvent(event.id);
+                            return this.calendarProvider.invalidateEvent(event.id);
+                        }));
                     });
-
-                });
-            } else {
-                // Being added.
-                let time = event.timestart;
-                while (repeated > 0) {
-                    timestarts.push(time);
-                    time += CoreConstants.SECONDS_DAY * 7;
-                    repeated--;
-                }
-
-                invalidatePromise = Promise.resolve();
-            }
-        } else {
-            // Not repeated.
-            timestarts.push(event.timestart);
-            invalidatePromise = this.calendarProvider.invalidateEvent(event.id);
-        }
-
-        return invalidatePromise.then(() => {
-            let lastMonth, lastYear;
-
-            return Promise.all([
-                this.calendarProvider.invalidateAllUpcomingEvents(),
-                timestarts.map((time) => {
-                    const day = moment(new Date(time * 1000));
-
-                    if (lastMonth && (lastMonth == day.month() + 1 && lastYear == day.year())) {
-                        return Promise.resolve();
+                } else {
+                    // Being added.
+                    let time = event.timestart;
+                    while (repeated > 0) {
+                        timestarts.push(time);
+                        time += CoreConstants.SECONDS_DAY * 7;
+                        repeated--;
                     }
 
-                    // Invalidate once.
-                    lastMonth = day.month() + 1;
-                    lastYear = day.year();
+                    invalidatePromise = Promise.resolve();
+                }
+            } else {
+                // Not repeated.
+                timestarts.push(event.timestart);
+                invalidatePromise = this.calendarProvider.invalidateEvent(event.id);
+            }
 
-                    return this.calendarProvider.invalidateMonthlyEvents(lastYear, lastMonth, siteId);
-                })
-            ]);
+            return invalidatePromise.finally(() => {
+                let lastMonth, lastYear;
+
+                return this.utils.allPromises([
+                    this.calendarProvider.invalidateAllUpcomingEvents(),
+
+                    // Invalidate months.
+                    this.utils.allPromises(timestarts.map((time) => {
+                        const day = moment(new Date(time * 1000));
+
+                        if (lastMonth && (lastMonth == day.month() + 1 && lastYear == day.year())) {
+                            return Promise.resolve();
+                        }
+
+                        // Invalidate once.
+                        lastMonth = day.month() + 1;
+                        lastYear = day.year();
+
+                        return this.calendarProvider.invalidateMonthlyEvents(lastYear, lastMonth, site.id);
+                    })),
+
+                    // Invalidate days.
+                    this.utils.allPromises(timestarts.map((time) => {
+                        const day = moment(new Date(time * 1000));
+
+                        return this.calendarProvider.invalidateDayEvents(day.year(), day.month() + 1, day.date(), site.id);
+                    })),
+                ]);
+            });
         });
     }
 }

src/app/app.scss

@@ -1079,6 +1079,11 @@ details summary {
   contain: none !important;
 }
 
+// Lower z-index for ion-item-divider so it is displayed below video menus.
+ion-item-divider {
+  z-index: 2; // Ionic default is 100.
+}
+
 // Highlight text.
 .matchtext {
   background-color: $core-text-hightlight-background-color;

src/assets/lang/en.json

@@ -1391,7 +1391,7 @@
     "core.course.warningmanualcompletionmodified": "The manual completion of an activity was modified on the site.",
     "core.course.warningofflinemanualcompletiondeleted": "Some offline manual completion of course '{{name}}' has been deleted. {{error}}",
     "core.coursedetails": "Course details",
-    "core.coursenogroups": "This course doesn't have any group.",
+    "core.coursenogroups": "You are not a member of any group of this course.",
     "core.courses.addtofavourites": "Star this course",
     "core.courses.allowguests": "This course allows guest users to enter",
     "core.courses.availablecourses": "Available courses",

src/components/ion-tabs/ion-tabs.scss

@@ -25,7 +25,7 @@ ion-app.app-root core-ion-tabs {
 
     &[tabsplacement="bottom"] {
         .ion-page > ion-content > .scroll-content {
-            margin-bottom: $navbar-md-height !important;
+            margin-bottom: $navbar-md-height;
         }
     }
 

src/lang/en.json

@@ -48,7 +48,7 @@
     "copiedtoclipboard": "Text copied to clipboard",
     "course": "Course",
     "coursedetails": "Course details",
-    "coursenogroups": "This course doesn't have any group.",
+    "coursenogroups": "You are not a member of any group of this course.",
     "currentdevice": "Current device",
     "datastoredoffline": "Data stored in the device because it couldn't be sent. It will be sent automatically later.",
     "date": "Date",