22-11-2019

src/app/app.module.ts

-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import { RouteReuseStrategy } from '@angular/router';
-
-import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
-import { SplashScreen } from '@ionic-native/splash-screen/ngx';
-import { StatusBar } from '@ionic-native/status-bar/ngx';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { IonicStorageModule } from '@ionic/storage';
-import { GooglePlus } from '@ionic-native/google-plus/ngx';
-
-import { AppRoutingModule } from './app-routing.module';
-import { AppComponent } from './app.component';
-
-import { AngularFireModule } from '@angular/fire';
-import { AngularFirestore } from '@angular/fire/firestore';
-import { AngularFirestoreModule } from '@angular/fire/firestore';
-import { AngularFireAuthModule } from '@angular/fire/auth';
-
-import { Geolocation } from '@ionic-native/geolocation/ngx';
-import { NativeGeocoder } from '@ionic-native/native-geocoder/ngx';
-
-
-import { environment } from '../environments/environment';
-import { ServiceService } from './../config/service.service';
-import { AuthService } from './../config/auth.service';
-import { from } from 'rxjs';
-import { DeliverypopPageModule} from './deliverypop/deliverypop.module';
-import { FormsModule } from '@angular/forms';
-
-
-
-
-
-
+import { NgModule } from "@angular/core";
+import { BrowserModule } from "@angular/platform-browser";
+import { RouteReuseStrategy } from "@angular/router";
+
+import { IonicModule, IonicRouteStrategy } from "@ionic/angular";
+import { SplashScreen } from "@ionic-native/splash-screen/ngx";
+import { StatusBar } from "@ionic-native/status-bar/ngx";
+import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
+import { IonicStorageModule } from "@ionic/storage";
+import { GooglePlus } from "@ionic-native/google-plus/ngx";
+
+import { AppRoutingModule } from "./app-routing.module";
+import { AppComponent } from "./app.component";
+
+import { AngularFireModule } from "@angular/fire";
+import { AngularFirestore } from "@angular/fire/firestore";
+import { AngularFirestoreModule } from "@angular/fire/firestore";
+import { AngularFireAuthModule } from "@angular/fire/auth";
+
+import { Geolocation } from "@ionic-native/geolocation/ngx";
+import { NativeGeocoder } from "@ionic-native/native-geocoder/ngx";
+
+import { environment } from "../environments/environment";
+import { ServiceService } from "./../config/service.service";
+import { AuthService } from "./../config/auth.service";
+import { from } from "rxjs";
+import { DeliverypopPageModule } from "./deliverypop/deliverypop.module";
+import { FormsModule } from "@angular/forms";
+import { SearchmodalPageModule } from "./searchmodal/searchmodal.module";
 
 @NgModule({
   declarations: [AppComponent],
@@ -47,6 +41,7 @@ import { FormsModule } from '@angular/forms';
     DeliverypopPageModule,
     AngularFireAuthModule,
     AngularFirestoreModule,
+    SearchmodalPageModule,
     FormsModule
   ],
   providers: [

src/app/catstorelist/catstorelist.page.html

@@ -4,7 +4,9 @@
     <div class="nav_title floatLeft">
         <input class="search_bar" placeholder="Search here.. eg:shirts, retailers etc..." (click)="clickSearch()">
     </div>
-    <button class="nav_btn nav_search floatRight">
+    <button class="nav_btn nav_search floatRight" *ngIf="!searchShow">
+    </button>
+    <button class="nav_btn nav_close floatRight" *ngIf="searchShow" (click)="searchClose()">
     </button>
     <div class="clear"></div>
 </div>

src/app/home/home.page.html

@@ -16,6 +16,7 @@
 </div>
 <ion-content>
     <div class="home_wrapper">
+
         <div class="home_banner">
             <div class="home_banner_title">
                 <ion-row>

src/app/home/home.page.ts

@@ -13,6 +13,7 @@ import { SearchService } from "./../../config/search.service";
 import { ProductsService } from "./../../config/products.service";
 import { from } from "rxjs";
 import { ModalController } from "@ionic/angular";
+import { SearchmodalPage } from "../searchmodal/searchmodal.page";
 
 @Component({
   selector: "app-home",
@@ -163,4 +164,12 @@ export class HomePage implements OnInit {
   searchFun(data: string) {
     this.searchService.search(data);
   }
+
+  async openModal() {
+    const modal = await this.modalController.create({
+      component: SearchmodalPage
+    });
+    modal.onDidDismiss().then(dataReturned => {});
+    return await modal.present();
+  }
 }

src/app/productlist/productlist.page.html

@@ -5,8 +5,9 @@
     <div class="nav_title floatLeft">
         <input class="search_bar" placeholder="Search here.. eg:shirts, retailers etc..." (click)="clickSearch()">
     </div>
-    <button class="nav_btn nav_search floatRight">
-        <img src="../assets/search_2.png">
+    <button class="nav_btn nav_search floatRight" *ngIf="!searchShow">
+    </button>
+    <button class="nav_btn nav_close floatRight" *ngIf="searchShow" (click)="searchClose()">
     </button>
     <div class="clear"></div>
 </div>

src/app/searchmodal/searchmodal.page.ts

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

src/app/storelist/storelist.page.html

@@ -3,7 +3,9 @@
     </button>
     <div class="nav_title floatLeft">
         <input class="search_bar" placeholder="Search here.. eg:shirts, retailers etc..."> </div>
-    <button class="nav_btn nav_search floatRight">
+    <button class="nav_btn nav_search floatRight" *ngIf="!searchShow">
+    </button>
+    <button class="nav_btn nav_close floatRight" *ngIf="searchShow" (click)="searchClose()">
     </button>
     <div class="clear"></div>
 </div>
@@ -51,3 +53,9 @@
     </div>
 
 </ion-content>
+
+<div class="search_item_list" *ngIf="searchShow" [@slideInOut]>
+    <ul>
+        <li>sample</li>
+    </ul>
+</div>
\ No newline at end of file

src/app/storelist/storelist.page.ts

-import { Component, OnInit } from '@angular/core';
-import { Router } from '@angular/router';
-import { Location } from '@angular/common';
-import { ServiceService } from './../../config/service.service';
-import { ShoppersService } from './../../config/shopper.service';
+import { Component, OnInit } from "@angular/core";
+import { trigger, transition, animate, style } from "@angular/animations";
+import { Router } from "@angular/router";
+import { Location } from "@angular/common";
+import { ServiceService } from "./../../config/service.service";
+import { ShoppersService } from "./../../config/shopper.service";
 
 @Component({
-  selector: 'app-storelist',
-  templateUrl: './storelist.page.html',
-  styleUrls: ['./storelist.page.scss'],
+  selector: "app-storelist",
+  templateUrl: "./storelist.page.html",
+  styleUrls: ["./storelist.page.scss"],
+  animations: [
+    trigger("slideInOut", [
+      transition(":enter", [
+        style({ transform: "translateY(100%)" }),
+        animate("200ms ease-in", style({ transform: "translateY(0%)" }))
+      ]),
+      transition(":leave", [
+        animate("200ms ease-out", style({ transform: "translateY(100%)" }))
+      ])
+    ])
+  ]
 })
 export class StorelistPage implements OnInit {
-
+  searchShow = false;
   slideOpts = {
     slidesPerView: 1.5
   };
@@ -20,18 +32,18 @@ export class StorelistPage implements OnInit {
     public router: Router,
     public location: Location,
     public service: ServiceService,
-    public shopperService: ShoppersService,
+    public shopperService: ShoppersService
   ) {
-    this.service.get('params').then((val) => {
+    this.service.get("params").then(val => {
       this.data = val;
-      this.shopperService.shopperList(this.data.cId, 'centerId');
+      this.shopperService.shopperList(this.data.cId, "centerId");
     });
   }
 
   ngOnInit() {}
 
   goToPage(path, data = null) {
-    this.service.set('params', data);
+    this.service.set("params", data);
     this.router.navigateByUrl(path, { queryParams: data });
     document.body.scrollTop = document.documentElement.scrollTop = 0;
   }
@@ -40,4 +52,11 @@ export class StorelistPage implements OnInit {
     this.location.back();
   }
 
+  clickSearch() {
+    this.searchShow = true;
+  }
+
+  searchClose() {
+    this.searchShow = false;
+  }
 }