Filter matches

package.json

@@ -28,6 +28,7 @@
     "@ionic-native/splash-screen": "4.7.0",
     "@ionic-native/status-bar": "4.7.0",
     "@ionic/storage": "2.1.3",
+    "@types/lodash": "^4.14.110",
     "cordova-android": "7.0.0",
     "cordova-ios": "4.5.4",
     "cordova-plugin-device": "^2.0.2",
@@ -38,6 +39,7 @@
     "cordova-plugin-whitelist": "^1.3.3",
     "ionic-angular": "3.9.2",
     "ionicons": "3.0.0",
+    "lodash": "^4.17.10",
     "rxjs": "5.5.10",
     "sw-toolbox": "3.6.0",
     "zone.js": "0.8.26"
@@ -62,4 +64,4 @@
       "android"
     ]
   }
-}
+}

src/app/app.module.ts

@@ -53,6 +53,7 @@ import { FollowersPage } from '../pages/User/followers/followers';
 import { SearchUserTab } from '../pages/User/search/search-user/search-user';
 import { SearchBarTab } from '../pages/User/search/search-bar/search-bar';
 import { SearchedBarPage } from '../pages/User/searched-bar/searched-bar';
+import { FilterMatchesModal } from '../pages/User/matches/filter-matches/filter-matches';
 
 //Enterprise
 import { OwnerHomePage } from '../pages/Enterprise/home-owner/owner-home';
@@ -88,7 +89,8 @@ import { AddPromotionModal } from '../pages/Enterprise/promotions/add-promotion-
     OwnerHomePage,
     MyBarPage,
     PromotionsPage,
-    AddPromotionModal
+    AddPromotionModal,
+    FilterMatchesModal
   ],
   imports: [
     ComponentsModule,
@@ -128,7 +130,8 @@ import { AddPromotionModal } from '../pages/Enterprise/promotions/add-promotion-
     OwnerHomePage,
     MyBarPage,
     PromotionsPage,
-    AddPromotionModal
+    AddPromotionModal,
+    FilterMatchesModal
   ],
   providers: [
     StatusBar,

src/pages/User/matches/filter-matches/filter-matches.html

@@ -0,0 +1,47 @@
+<ion-header>
+    <ion-navbar>
+      <ion-title>Filtros</ion-title>
+      <ion-buttons end>
+          <button ion-button (click)="dismiss()">
+            <ion-icon name="close"></ion-icon>
+          </button>
+      </ion-buttons>
+    </ion-navbar>
+</ion-header>
+
+<ion-content padding class="content">
+    <ion-list>
+        <ion-item>
+         <ion-label>Campeonato</ion-label>
+           <ion-select id="Liga/Campeonato" [(ngModel)]="selectedLeagues" multiple="true">
+             <ion-option *ngFor="let league of leagues" [value]="league">{{ league }}</ion-option>
+           </ion-select>
+        </ion-item>
+    </ion-list>
+
+    <ion-list>
+        <ion-item>
+         <ion-label>Time/Seleção</ion-label>
+           <ion-select id="Time/Seleção" [(ngModel)]="selectedTeams" multiple="true">
+             <ion-option *ngFor="let team of teams" [value]="team">{{ team }}</ion-option>
+           </ion-select>
+        </ion-item>
+    </ion-list>
+
+    <ion-list>
+        <ion-item>
+            <ion-label>Apenas times favoritos</ion-label>
+            <ion-toggle [(ngModel)]="favorites" color="royal" checked="false"></ion-toggle>
+        </ion-item>
+    </ion-list>
+
+    <ion-buttons>
+        <button ion-button float-left color="secondary" (click)="applyFilters()">
+            Aplicar filtros
+        </button>
+
+        <button ion-button float-right color="danger" (click)="clearFilters()">
+            Remover filtros
+        </button>
+    </ion-buttons>
+</ion-content>

src/pages/User/matches/filter-matches/filter-matches.scss

@@ -0,0 +1,3 @@
+.content {
+    //background-color: rgba(0, 0, 0, 0.5);
+}

src/pages/User/matches/filter-matches/filter-matches.ts

@@ -0,0 +1,64 @@
+import { Component, OnInit } from "@angular/core";
+import { NavController, ViewController, NavParams } from "ionic-angular/";
+import { Match } from "../../../../_models/match";
+
+@Component({
+    selector: 'filter-matches',
+    templateUrl: 'filter-matches.html'
+})
+export class FilterMatchesModal implements OnInit{
+    constructor(public navCtrl: NavController, public viewCtrl: ViewController, public navParams: NavParams) {
+    }
+
+    leagues: string[] = [];
+    selectedLeagues: string[] = [];
+
+    teams: string[] = [];
+    selectedTeams: string[] = [];
+
+    favorites:boolean = false;
+
+    ngOnInit(): void {
+        let matches:Match[] = this.navParams.get('matches');
+
+        this.leagues = this.getLeagues(matches);
+        this.teams = this.getTeams(matches);
+    }
+
+    private getLeagues(matches: Match[]) {
+        let leagues = matches.map(function (match) {
+            return match.league;
+        });
+        return Array.from(new Set(leagues)).sort();
+    }
+
+    private getTeams(matches: Match[]) {
+        let teams: string[] = [];
+        matches.forEach(
+            match => {
+                teams.push(match.homeTeam);
+                teams.push(match.awayTeam);
+            }
+        );
+        return Array.from(new Set(teams)).sort();
+    }
+
+    dismiss() {
+        this.viewCtrl.dismiss();
+    }
+
+    applyFilters() {
+        let filters = {
+            'leagues': this.selectedLeagues,
+            'teams': this.selectedTeams,
+            'favorites': this.favorites
+        }
+        this.viewCtrl.dismiss(filters);
+    }
+
+    clearFilters() {
+        let filter = {};
+        this.viewCtrl.dismiss(filter);
+    }
+
+}

src/pages/User/matches/matches.html

@@ -4,9 +4,14 @@
       <img width="22" height="17" src="./assets/imgs/hamburger_icon.png"/>
     </button>
     <ion-title class="text-large-medium">Jogos</ion-title>
+    <ion-buttons end>
+      <button ion-button (click)="openFilterModal()">
+        <ion-icon name="funnel"></ion-icon>
+      </button>
+    </ion-buttons>
   </ion-navbar>
 </ion-header>
 
 <ion-content padding>
-  <googol-card *ngFor="let match of matches" [match]="match" action="ADD_EVENT"></googol-card>
+  <googol-card *ngFor="let match of filteredMatches" [match]="match" action="ADD_EVENT"></googol-card>
 </ion-content>

src/pages/User/matches/matches.ts

@@ -1,8 +1,10 @@
 import { Component, OnInit } from '@angular/core';
-import { NavController, LoadingController } from 'ionic-angular';
+import { NavController, LoadingController, ModalController } from 'ionic-angular';
 import { MatchesService } from '../../../_services/matches';
 
 import { Match } from '../../../_models/match';
+import { FilterMatchesModal } from './filter-matches/filter-matches';
+import _ from 'lodash';
 
 @Component({
   selector: 'page-matches',
@@ -11,8 +13,10 @@ import { Match } from '../../../_models/match';
 export class MatchesPage implements OnInit{
 
   matches: Match[] = [];
+  filteredMatches: Match[] = [];
 
-  constructor(public navCtrl: NavController, private matchesService: MatchesService, private loadingController: LoadingController) {}
+  constructor(public navCtrl: NavController, private modalCtrl: ModalController, private matchesService: MatchesService, 
+    private loadingController: LoadingController) {}
 
   async ngOnInit(){
     await this.fetchMatches();
@@ -23,6 +27,28 @@ export class MatchesPage implements OnInit{
     spinner: 'bubbles'
   });
 
+  openFilterModal() {
+    let modal = this.modalCtrl.create(FilterMatchesModal, {'matches': this.matches});
+    modal.present();
+
+    modal.onDidDismiss(data => {
+      this.filterMatches(data);
+    });
+  }
+
+  filterMatches(filterOptions) {
+    if(filterOptions !== undefined) {
+      if(_.isEqual(filterOptions,{})) {
+        this.filteredMatches = this.matches;
+      } else {
+        this.filteredMatches = _.filter(this.matches, function(match) {
+          return _.includes(filterOptions.leagues, match.league) 
+          || _.includes(filterOptions.teams, match.homeTeam) || _.includes(filterOptions.teams, match.awayTeam);
+        });
+      }
+    }
+  }
+
   fetchMatches(){
     this.loading.present();
 
@@ -41,6 +67,8 @@ export class MatchesPage implements OnInit{
             return match;
           }
         });
+        this.matches = this.matches.filter(match => match !== undefined);
+        this.filteredMatches = this.matches;
         this.loading.dismiss();
       },error => {
         this.loading.dismiss();

yarn.lock

@@ -123,14 +123,18 @@
     localforage "~1.4.2"
     localforage-cordovasqlitedriver "~1.5.0"
 
-"@types/googlemaps@^3.30.8":
-  version "3.30.8"
-  resolved "https://registry.yarnpkg.com/@types/googlemaps/-/googlemaps-3.30.8.tgz#cc6ab90f79f3a8b799860ea1d70252a221af702e"
+"@types/googlemaps@^3.30.9":
+  version "3.30.10"
+  resolved "https://registry.yarnpkg.com/@types/googlemaps/-/googlemaps-3.30.10.tgz#6139b103860493bc345340806fe2d797ab78c78c"
 
 "@types/localforage@0.0.30":
   version "0.0.30"
   resolved "https://registry.yarnpkg.com/@types/localforage/-/localforage-0.0.30.tgz#3d60a6bf6dda38e3f8a469611598379f1f649509"
 
+"@types/lodash@^4.14.110":
+  version "4.14.110"
+  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.110.tgz#fb07498f84152947f30ea09d89207ca07123461e"
+
 abbrev@1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.1.tgz#f8f2c887ad10bf67f634f005b6987fed3179aac8"
@@ -2385,7 +2389,7 @@ lodash@^3.5.0:
   version "3.10.1"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-3.10.1.tgz#5bf45e8e49ba4189e17d482789dfd15bd140b7b6"
 
-lodash@^4.0.0, lodash@^4.14.0, lodash@~4.17.4:
+lodash@^4.0.0, lodash@^4.14.0, lodash@^4.17.10, lodash@~4.17.4:
   version "4.17.10"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.10.tgz#1b7793cf7259ea38fb3661d4d38b3260af8ae4e7"