MOBILE-3136 calendar: Add Calendar filter type

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

@@ -21,7 +21,7 @@ import { CoreDomUtilsProvider } from '@providers/utils/dom';
 import { CoreTimeUtilsProvider } from '@providers/utils/time';
 import { CoreUtilsProvider } from '@providers/utils/utils';
 import { AddonCalendarProvider, AddonCalendarWeek } from '../../providers/calendar';
-import { AddonCalendarHelperProvider } from '../../providers/helper';
+import { AddonCalendarHelperProvider, AddonCalendarFilter } from '../../providers/helper';
 import { AddonCalendarOfflineProvider } from '../../providers/calendar-offline';
 import { CoreCoursesProvider } from '@core/courses/providers/courses';
 import { CoreAppProvider } from '@providers/app';
@@ -36,7 +36,7 @@ import { CoreAppProvider } from '@providers/app';
 export class AddonCalendarCalendarComponent implements OnInit, OnChanges, DoCheck, OnDestroy {
     @Input() initialYear: number | string; // Initial year to load.
     @Input() initialMonth: number | string; // Initial month to load.
-    @Input() filter: any; // Filter to apply.
+    @Input() filter: AddonCalendarFilter; // Filter to apply.
     @Input() canNavigate?: string | boolean; // Whether to include arrows to change the month. Defaults to true.
     @Input() displayNavButtons?: string | boolean; // Whether to display nav buttons created by this component. Defaults to true.
     @Output() onEventClicked = new EventEmitter<number>();

src/addon/calendar/components/filter/addon-calendar-filter-popover.html

@@ -4,7 +4,7 @@
         <ion-label>{{ 'addon.calendar.' + type + 'events' | translate}}</ion-label>
         <ion-toggle [(ngModel)]="types[type]" (ionChange)="onChange($event)"></ion-toggle>
     </ion-item>
-    <ion-item-divider></ion-item-divider>
+    <ion-item-divider *ngIf="types.course || types.category || types.group"></ion-item-divider>
     <ion-list radio-group [(ngModel)]="courseId" *ngIf="types.course || types.category || types.group">
         <ion-item text-wrap *ngFor="let course of courses" >
             <ion-label><core-format-text [text]="course.fullname"></core-format-text></ion-label>

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

@@ -1,4 +1,4 @@
-// (C) Copyright 2015 Martin Dougiamas
+// (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.
@@ -16,10 +16,10 @@ import { Component } from '@angular/core';
 import { NavParams } from 'ionic-angular';
 import { CoreEventsProvider } from '@providers/events';
 import { AddonCalendarProvider } from '../../providers/calendar';
-import { AddonCalendarHelperProvider } from '../../providers/helper';
+import { AddonCalendarHelperProvider, AddonCalendarFilter } from '../../providers/helper';
 
 /**
- * Component to display a list of courses.
+ * Component to display the events filter that includes events types and a list of courses.
  */
 @Component({
     selector: 'addon-calendar-filter-popover',
@@ -35,7 +35,16 @@ export class AddonCalendarFilterPopoverComponent {
 
     constructor(navParams: NavParams, protected eventsProvider: CoreEventsProvider) {
         this.courses = navParams.get('courses') || [];
-        const filter = navParams.get('filter') || {};
+        const filter: AddonCalendarFilter = navParams.get('filter') || {
+            filtered: false,
+            courseId: null,
+            categoryId: null,
+            course: true,
+            group: true,
+            site: true,
+            user: true,
+            category: true
+        };
         this.courseId = filter.courseId || -1;
 
         this.typeKeys = AddonCalendarProvider.ALL_TYPES.map((name) => {

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

@@ -18,7 +18,7 @@ import { CoreLocalNotificationsProvider } from '@providers/local-notifications';
 import { CoreSitesProvider } from '@providers/sites';
 import { CoreDomUtilsProvider } from '@providers/utils/dom';
 import { AddonCalendarProvider, AddonCalendarCalendarEvent } from '../../providers/calendar';
-import { AddonCalendarHelperProvider } from '../../providers/helper';
+import { AddonCalendarHelperProvider, AddonCalendarFilter } from '../../providers/helper';
 import { AddonCalendarOfflineProvider } from '../../providers/calendar-offline';
 import { CoreCoursesProvider } from '@core/courses/providers/courses';
 import { CoreConstants } from '@core/constants';
@@ -31,7 +31,7 @@ import { CoreConstants } from '@core/constants';
     templateUrl: 'addon-calendar-upcoming-events.html',
 })
 export class AddonCalendarUpcomingEventsComponent implements OnInit, DoCheck, OnDestroy {
-    @Input() filter: any; // Filter to apply.
+    @Input() filter: AddonCalendarFilter; // Filter to apply.
     @Output() onEventClicked = new EventEmitter<number>();
 
     filteredEvents = [];

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

@@ -22,7 +22,7 @@ import { CoreDomUtilsProvider } from '@providers/utils/dom';
 import { CoreTimeUtilsProvider } from '@providers/utils/time';
 import { AddonCalendarProvider, AddonCalendarCalendarEvent } from '../../providers/calendar';
 import { AddonCalendarOfflineProvider } from '../../providers/calendar-offline';
-import { AddonCalendarHelperProvider } from '../../providers/helper';
+import { AddonCalendarHelperProvider, AddonCalendarFilter } from '../../providers/helper';
 import { AddonCalendarSyncProvider } from '../../providers/calendar-sync';
 import { CoreCoursesProvider } from '@core/courses/providers/courses';
 import { CoreCoursesHelperProvider } from '@core/courses/providers/helper';
@@ -76,7 +76,16 @@ export class AddonCalendarDayPage implements OnInit, OnDestroy {
     syncIcon: string;
     isCurrentDay: boolean;
     isPastDay: boolean;
-    filter = {};
+    filter: AddonCalendarFilter = {
+        filtered: false,
+        courseId: null,
+        categoryId: null,
+        course: true,
+        group: true,
+        site: true,
+        user: true,
+        category: true
+    };
 
     constructor(localNotificationsProvider: CoreLocalNotificationsProvider,
             navParams: NavParams,

src/addon/calendar/pages/index/index.ts

@@ -21,7 +21,7 @@ import { CoreSitesProvider } from '@providers/sites';
 import { CoreDomUtilsProvider } from '@providers/utils/dom';
 import { AddonCalendarProvider } from '../../providers/calendar';
 import { AddonCalendarOfflineProvider } from '../../providers/calendar-offline';
-import { AddonCalendarHelperProvider } from '../../providers/helper';
+import { AddonCalendarHelperProvider, AddonCalendarFilter } from '../../providers/helper';
 import { AddonCalendarCalendarComponent } from '../../components/calendar/calendar';
 import { AddonCalendarUpcomingEventsComponent } from '../../components/upcoming-events/upcoming-events';
 import { AddonCalendarFilterPopoverComponent } from '../../components/filter/filter';
@@ -66,7 +66,16 @@ export class AddonCalendarIndexPage implements OnInit, OnDestroy {
     syncIcon: string;
     showCalendar = true;
     loadUpcoming = false;
-    filter = {};
+    filter: AddonCalendarFilter = {
+        filtered: false,
+        courseId: null,
+        categoryId: null,
+        course: true,
+        group: true,
+        site: true,
+        user: true,
+        category: true
+    };
 
     constructor(localNotificationsProvider: CoreLocalNotificationsProvider,
             navParams: NavParams,
@@ -95,7 +104,7 @@ export class AddonCalendarIndexPage implements OnInit, OnDestroy {
         AddonCalendarProvider.ALL_TYPES.forEach((name) => {
             this.filter[name] = true;
         });
-        this.filter['courseId'] = navParams.get('courseId');
+        this.filter.courseId = navParams.get('courseId');
 
         // Listen for events added. When an event is added, reload the data.
         this.newEventObserver = eventsProvider.on(AddonCalendarProvider.NEW_EVENT_EVENT, (data) => {
@@ -218,12 +227,12 @@ export class AddonCalendarIndexPage implements OnInit, OnDestroy {
             this.hasOffline = false;
 
             // Load courses for the popover.
-            promises.push(this.coursesHelper.getCoursesForPopover(this.filter['courseId']).then((data) => {
+            promises.push(this.coursesHelper.getCoursesForPopover(this.filter.courseId).then((data) => {
                 this.courses = data.courses;
             }));
 
             // Check if user can create events.
-            promises.push(this.calendarHelper.canEditEvents(this.filter['courseId']).then((canEdit) => {
+            promises.push(this.calendarHelper.canEditEvents(this.filter.courseId).then((canEdit) => {
                 this.canCreate = canEdit;
             }));
 
@@ -315,8 +324,8 @@ export class AddonCalendarIndexPage implements OnInit, OnDestroy {
             year: data.year
         };
 
-        if (this.filter['courseId']) {
+        if (this.filter.courseId) {
-            params.courseId = this.filter['courseId'];
+            params.courseId = this.filter.courseId;
         }
 
         this.navCtrl.push('AddonCalendarDayPage', params);
@@ -349,8 +358,8 @@ export class AddonCalendarIndexPage implements OnInit, OnDestroy {
         if (eventId) {
             params.eventId = eventId;
         }
-        if (this.filter['courseId']) {
+        if (this.filter.courseId) {
-            params.courseId = this.filter['courseId'];
+            params.courseId = this.filter.courseId;
         }
 
         this.navCtrl.push('AddonCalendarEditEventPage', params);

src/addon/calendar/pages/list/list.ts

@@ -16,7 +16,7 @@ import { Component, ViewChild, OnDestroy, NgZone } from '@angular/core';
 import { IonicPage, Content, NavParams, NavController, PopoverController } from 'ionic-angular';
 import { AddonCalendarProvider, AddonCalendarGetEventsEvent } from '../../providers/calendar';
 import { AddonCalendarOfflineProvider } from '../../providers/calendar-offline';
-import { AddonCalendarHelperProvider } from '../../providers/helper';
+import { AddonCalendarHelperProvider, AddonCalendarFilter } from '../../providers/helper';
 import { AddonCalendarSyncProvider } from '../../providers/calendar-sync';
 import { CoreCoursesProvider } from '@core/courses/providers/courses';
 import { CoreCoursesHelperProvider } from '@core/courses/providers/helper';
@@ -81,7 +81,16 @@ export class AddonCalendarListPage implements OnDestroy {
     hasOffline = false;
     isOnline = false;
     syncIcon: string; // Sync icon.
-    filter = {};
+    filter: AddonCalendarFilter = {
+        filtered: false,
+        courseId: null,
+        categoryId: null,
+        course: false,
+        group: false,
+        site: false,
+        user: false,
+        category: false
+    };
 
     constructor(
             navParams: NavParams,

src/addon/calendar/providers/helper.ts

@@ -317,7 +317,7 @@ export class AddonCalendarHelperProvider {
      * @param categories Categories indexed by ID.
      * @return Filtered events.
      */
-    getFilteredEvents(events: any[], filter: any, categories: any): any[] {
+    getFilteredEvents(events: any[], filter: AddonCalendarFilter, categories: any): any[] {
         // Do not filter.
         if (!filter.filtered) {
             return events;
@@ -515,3 +515,17 @@ export class AddonCalendarHelperProvider {
         return this.refreshAfterChangeEvents([{event: event, repeated: repeated}], siteId);
     }
 }
+
+/**
+ * Calculated data for Calendar filtering.
+ */
+export type AddonCalendarFilter = {
+    filtered: boolean; // If filter enabled (some filters applied).
+    courseId: number; // Course Id to filter.
+    categoryId: string; // Category Id to filter.
+    course: boolean, // Filter to show course events.
+    group: boolean, // Filter to show group events.
+    site: boolean, // Filter to show show site events.
+    user: boolean, // Filter to show user events.
+    category: boolean // Filter to show category events.
+};

src/app/app.scss

@@ -293,7 +293,7 @@ ion-app.app-root {
 
             @include darkmode {
               background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) calc(100% - 50px), $core-dark-item-bg-color calc(100% - 15px));
-              background: -webkit-gradient(left top, left bottom, color-stop(calc(100% - 50px), rgba(255, 255, 255, 0)), color-stop(calc(100% - 15px), white));
+              background: -webkit-gradient(left top, left bottom, color-stop(calc(100% - 50px), rgba(255, 255, 255, 0)), color-stop(calc(100% - 15px), $core-dark-item-bg-color));
               background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) calc(100% - 50px), $core-dark-item-bg-color calc(100% - 15px));
               background: -o-linear-gradient(top, rgba(255, 255, 255, 0) calc(100% - 50px), $core-dark-item-bg-color calc(100% - 15px));
               background: -ms-linear-gradient(top, rgba(255, 255, 255, 0) calc(100% - 50px), $core-dark-item-bg-color calc(100% - 15px));