Filter page

client/src/app/app-routing.module.ts

@@ -40,6 +40,11 @@ const routes: Routes = [
     path: 'tabs',
     loadChildren: () => import('./pages/tabs/tabs.module').then( m => m.TabsPageModule)
   },
+  {
+    path: 'filter',
+    loadChildren: () => import('./pages/filter/filter.module').then( m => m.FilterPageModule)
+  },
+
 ];
 
 @NgModule({

client/src/app/components/search/search.component.html

@@ -1,6 +1,6 @@
 <ion-item>
     <ion-searchbar></ion-searchbar>
-    <ion-button color="primary">
+    <ion-button color="primary" (click)="filterPage()">
       <ion-icon name="filter-outline"></ion-icon>
      Filter  </ion-button>
 </ion-item>

client/src/app/components/search/search.component.ts

@@ -1,3 +1,4 @@
+import { Router } from '@angular/router';
 import { Component, OnInit } from '@angular/core';
 
 @Component({
@@ -6,9 +7,11 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./search.component.scss'],
 })
 export class SearchComponent implements OnInit {
+  constructor(private route: Router) {}
 
-  constructor() { }
+  filterPage() {
+    this.route.navigate(['/filter']);
+  }
 
   ngOnInit() {}
-
 }

client/src/app/pages/filter/filter-routing.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { FilterPage } from './filter.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: FilterPage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class FilterPageRoutingModule {}

client/src/app/pages/filter/filter.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { FilterPageRoutingModule } from './filter-routing.module';
+
+import { FilterPage } from './filter.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    FilterPageRoutingModule
+  ],
+  declarations: [FilterPage]
+})
+export class FilterPageModule {}

client/src/app/pages/filter/filter.page.html

@@ -0,0 +1,112 @@
+<ion-header>
+  <ion-toolbar color="danger">
+    <ion-button slot="start">
+      <ion-back-button color="light" defaultHref="profile"></ion-back-button
+    ></ion-button>
+    <ion-title>Apply Filters</ion-title>
+    <ion-title slot="end"> Reset</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+  <div class="upperBox">
+    <h3>Type</h3>
+    <ion-list>
+      <ion-radio-group>
+        <ion-item>
+          <ion-label>Cup</ion-label>
+          <ion-radio value="cup"></ion-radio>
+        </ion-item>
+        <ion-item>
+          <ion-label>Jeans</ion-label>
+          <ion-radio value="Jeans"></ion-radio>
+        </ion-item>
+        <ion-item>
+          <ion-label>Candel</ion-label>
+          <ion-radio value="Candel"></ion-radio>
+        </ion-item>
+        <ion-item>
+          <ion-label>T-shirt</ion-label>
+          <ion-radio value="T-shirt"></ion-radio>
+        </ion-item>
+        <ion-item>
+          <ion-label>umbrella</ion-label>
+          <ion-radio value="umbrella"></ion-radio>
+        </ion-item>
+        <ion-item>
+          <ion-label>Carpet</ion-label>
+          <ion-radio value="Carpet"></ion-radio>
+        </ion-item>
+        <ion-item>
+          <ion-label>plate</ion-label>
+          <ion-radio value="plate"></ion-radio>
+        </ion-item>
+        <ion-item>
+          <ion-label>Shoose</ion-label>
+          <ion-radio value="Shoose"></ion-radio>
+        </ion-item>
+        <ion-item>
+          <ion-label>Spoon</ion-label>
+          <ion-radio value="Spoon"></ion-radio>
+        </ion-item>
+        <ion-item>
+          <ion-label>Mosaico</ion-label>
+          <ion-radio value="Mosaico"></ion-radio>
+        </ion-item>
+        <ion-item lines="none">
+          <ion-label >Other</ion-label>
+          <ion-radio value="other"></ion-radio>
+        </ion-item>
+      </ion-radio-group>
+    </ion-list>
+  </div>
+  <div class="upperBox">
+    <h3>Tages</h3>
+    <ion-radio-group>
+      <ion-row>
+        <ion-col size="6">
+<ion-item>
+  <ion-label>Clothes</ion-label>
+  <ion-radio mode="md" item-left value="clothes"></ion-radio>
+</ion-item>
+        </ion-col>
+        <ion-col size="6">
+<ion-item>
+  <ion-label>Men</ion-label>
+  <ion-radio mode="md" item-left value="men"></ion-radio>
+</ion-item>
+        </ion-col>
+        <ion-col size="6">
+<ion-item>
+  <ion-label>Food</ion-label>
+  <ion-radio mode="md" item-left value="food"></ion-radio>
+</ion-item>
+        </ion-col>
+        <ion-col size="6">
+<ion-item>
+  <ion-label>Women</ion-label>
+  <ion-radio mode="md" item-left value="women"></ion-radio>
+</ion-item>
+        </ion-col>
+      </ion-row>
+    </ion-radio-group>
+  </div>
+  <div class="upperBox">
+    <h3>Sort by</h3>
+    <ion-list lines="none">
+      <ion-item>
+        <ion-label>Most Popular</ion-label>
+        <ion-toggle mode="ios"></ion-toggle>
+      </ion-item>
+      <hr style="border-bottom: 1px solid gray;">
+    </ion-list>
+    <ion-list lines="none">
+      <ion-radio-group>
+        <ion-label>Most Popular</ion-label>
+        <ion-toggle mode="ios"></ion-toggle>
+      </ion-radio-group>
+      <hr style="border-bottom: 1px solid gray;">
+    </ion-list>
+    </div>
+
+</ion-content>

client/src/app/pages/filter/filter.page.scss

@@ -0,0 +1,16 @@
+ion-content {
+  --background: #f0f0f2;
+
+  .upperBox {
+    background-color: #fff;
+    box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
+    ;
+    height: auto;
+    margin-bottom: 10px;
+    padding: 20px;
+    h3{
+      font-size:20px;
+      color:red;
+    }
+  }
+}

client/src/app/pages/filter/filter.page.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-filter',
+  templateUrl: './filter.page.html',
+  styleUrls: ['./filter.page.scss'],
+})
+export class FilterPage implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}