Offres : filters

src/app/app-routing.module.ts

-import { NgModule } from '@angular/core';
-import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
-import { AuthGuardService } from './services/auth-guard.service';
+import { NgModule } from '@angular/core';
+import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
+import { AuthGuardService } from './services/auth-guard.service';
+
+const routes: Routes = [
+  { path: '', redirectTo: 'start', pathMatch: 'full' },
+  { path: 'start', loadChildren: './pages/start/start.module#StartPageModule' },
+  { path: 'login', loadChildren: './pages/compte/login/login.module#LoginPageModule' },
+  { path: 'mainslider', loadChildren: './pages/mainslider/mainslider.module#MainsliderPageModule' },
+  {
+    path: 'app',
+    loadChildren: './pages/menu/menu.module#MenuPageModule',
+    canActivate: [AuthGuardService]
+  },
+  {
+    path: 'offre-details',
+    loadChildren: './pages/offres/offre-details/offre-details.module#OffreDetailsPageModule',
+    canActivate: [AuthGuardService]
+  },
+  { path: 'login-help', loadChildren: './modals/login-help/login-help.module#LoginHelpPageModule' },
  { path: 'offres-carte-filters', loadChildren: './modals/offres-carte-filters/offres-carte-filters.module#OffresCarteFiltersPageModule' },
 
-const routes: Routes = [
-  { path: '', redirectTo: 'start', pathMatch: 'full' },
-  { path: 'start', loadChildren: './pages/start/start.module#StartPageModule' },
-  { path: 'login', loadChildren: './pages/compte/login/login.module#LoginPageModule' },
-  { path: 'mainslider', loadChildren: './pages/mainslider/mainslider.module#MainsliderPageModule' },
-  {
-    path: 'app',
-    loadChildren: './pages/menu/menu.module#MenuPageModule',
-    canActivate: [AuthGuardService]
-  },
-  {
-    path: 'offre-details',
-    loadChildren: './pages/offres/offre-details/offre-details.module#OffreDetailsPageModule',
-    canActivate: [AuthGuardService]
-  },
-  { path: 'login-help', loadChildren: './modals/login-help/login-help.module#LoginHelpPageModule' },
-
-
-];
-
-@NgModule({
-  imports: [
-    RouterModule.forRoot(
-      routes,
-      {
-        preloadingStrategy: PreloadAllModules
-      }
-    )
-  ],
-  exports: [RouterModule]
-})
-export class AppRoutingModule { }
+
+
+];
+
+@NgModule({
+  imports: [
+    RouterModule.forRoot(
+      routes,
+      {
+        preloadingStrategy: PreloadAllModules
+      }
+    )
+  ],
+  exports: [RouterModule]
+})
+export class AppRoutingModule { }

src/app/app.module.ts

@@ -29,6 +29,7 @@ import { environment } from 'src/environments/environment';
 import { AuthService } from './services/auth.service';
 import { AuthGuardService } from './services/auth-guard.service';
 import { LoginHelpPageModule } from './modals/login-help/login-help.module';
+import { OffresCarteFiltersPageModule } from './modals/offres-carte-filters/offres-carte-filters.module';
 // import { AngularFireAuthModule } from '@angular/fire/auth';
 
 // import * as firebase from 'firebase';
@@ -41,13 +42,15 @@ import { LoginHelpPageModule } from './modals/login-help/login-help.module';
   imports: [
     BrowserModule,
     IonicModule.forRoot(),
-    AppRoutingModule, LotsAGagnerFilterPageModule,
+    AppRoutingModule,
     IonicStorageModule.forRoot({
       name: '__allo_testeurs_app',
       driverOrder: ['websql', 'sqlite', 'indexeddb']
     }),
     HttpClientModule,
-    LoginHelpPageModule
+    LotsAGagnerFilterPageModule,
+    LoginHelpPageModule,
+    OffresCarteFiltersPageModule
   ],
   providers: [
     StatusBar,

src/app/pages/offres/dashboard/dashboard.page.html

@@ -9,11 +9,11 @@
             </ion-menu-button>
         </ion-buttons>
         
-        <ion-buttons slot="end">
+        <!-- <ion-buttons slot="end">
             <ion-button (click)="showHideMoreFilters()">
                 <ion-icon name="options"></ion-icon>
             </ion-button>
-        </ion-buttons>
+        </ion-buttons> -->
         <!--<ion-title>-->
         <!--<span ion-text>Super promos!</span>-->
         <!--<ion-searchbar hidden [(ngModel)]="terms" placeholder="Rechercher"></ion-searchbar>-->

src/app/pages/offres/offres-carte/offres-carte.page.html

@@ -108,6 +108,11 @@
       </ion-item>
     </ion-card>
   </div>
+  <ion-fab vertical="bottom" horizontal="end" slot="fixed">
+      <ion-fab-button (click)="presentFiltersModal()">
+        <ion-icon name="funnel"></ion-icon>
+      </ion-fab-button>
+    </ion-fab>
   <ion-infinite-scroll threshold="100px" (ionInfinite)="loadData($event)">
     <ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="Chargement...">
     </ion-infinite-scroll-content>

src/app/pages/offres/offres-carte/offres-carte.page.scss

@@ -15,7 +15,7 @@
       justify-content: center;
     }
     ion-img {
-      height: 10rem;
+      height: 15rem;
       background: var(--ion-color-tertiary, #989aa2);
       object-fit: cover;
     }

src/app/pages/offres/offres-carte/offres-carte.page.ts

 import { Component, OnInit, ViewChild } from '@angular/core';
-import { ToastController, IonInfiniteScroll } from '@ionic/angular';
+import { ToastController, IonInfiniteScroll, ModalController } from '@ionic/angular';
+import { Storage } from '@ionic/storage';
+import { Router } from '@angular/router';
 import { AlloService } from '../../../services/allo-service';
 import { AuthService } from '../../../services/auth.service';
 import { TripService } from '../../../services/trip-service';
-import { Storage } from '@ionic/storage';
-import { Router } from '@angular/router';
+import { OffresCarteFiltersPage } from '../../../modals/offres-carte-filters/offres-carte-filters.page';
 
 @Component({
   selector: 'app-offres-carte',
@@ -20,6 +21,7 @@ export class OffresCartePage implements OnInit {
     public _ALLO: AlloService,
     public _AUTH: AuthService,
     public _TRIP: TripService,
+    public modalController: ModalController,
     public toastCtrl: ToastController,
     private router: Router,
     private storage: Storage) { }
@@ -55,6 +57,14 @@ export class OffresCartePage implements OnInit {
     toast.present();
   }
 
+  async presentFiltersModal() {
+    const modal = await this.modalController.create({
+      component: OffresCarteFiltersPage,
+      cssClass: 'modal-filters'
+    });
+    return await modal.present();
+  }
+
   async doRefresh(refresher) {
     try {
       this.toast.dismiss();

src/app/services/trip-service.ts

@@ -66,8 +66,7 @@ export class TripService {
                 });
             });
             setTimeout(() => {
-                this.filtredProducts = this.products;
-                this.offersCardList = this.filtredProducts.slice(0, 2);
+                this.resetData();
             }, 2000);
         }
         if (null !== data && 'object' === typeof data && data.hasOwnProperty('cats')) {
@@ -82,6 +81,11 @@ export class TripService {
         }
     }
 
+    resetData() {
+        this.filtredProducts = this.products;
+        this.offersCardList = this.filtredProducts.slice(0, 2);
+    }
+
     getRequest() {
         if (this.platform.is('cordova')) {
             return this.httpAdv.get('http://www.allo-testeurs.com/services.json?' + Math.random(), {}, {});
@@ -117,8 +121,24 @@ export class TripService {
     }
 
     filterList(categoryId) {
-        this.filtredProducts = this.products.filter(item => {
-            return item.categories_ids.includes(categoryId) || categoryId === 'all';
+        console.log(this.products);
+
+        this.filtredProducts = this.filterByCategoryId(categoryId);
+        this.offersCardList = this.filtredProducts.slice(0, 2);
+        this.offersCardListPointer = 1;
+    }
+
+    filterByCategoryId(categoryId) {
+        return this.filtredProducts.filter(item => {
+            return item.categories_ids.includes(parseInt(categoryId)) || categoryId === 'all';
+        });
+    }
+
+    filterByBrandId(brandId) {
+        console.log(brandId);
+        
+        this.filtredProducts = this.filtredProducts.filter(item => {
+            return item.brand_id === brandId || brandId === 'all';
         });
         this.offersCardList = this.filtredProducts.slice(0, 2);
         this.offersCardListPointer = 1;