search-model

src/app/searchmodal/searchmodal.page.html

@@ -2,27 +2,14 @@
     <button class="nav_btn nav_back floatLeft" (click)="closeModal()">
     </button>
     <div class="nav_title floatLeft relative">
-        <input class="search_bar" placeholder="Search here.. eg:shirts, retailers etc...">
+        <input class="search_bar" placeholder="Search here.. eg:shirts, retailers etc..." (click)="clickSearch()" (input)="searchFun($event.target.value)" #searchText>
     </div>
     <button class="nav_btn nav_close floatRight" (click)="closeModal()">
     </button>
     <div class="clear"></div>
 </div>
 <div class="search_item_list">
-    <ul>
-        <li>Item </li>
-        <li>Item </li>
-        <li>Item </li>
-        <li>Item </li>
-        <li>Item </li>
-        <li>Item </li>
-        <li>Item </li>
-        <li>Item </li>
-        <li>Item </li>
-        <li>Item </li>
-        <li>Item </li>
-        <li>Item </li>
-        <li>Item </li>
-        <li>Item </li>
+    <ul *ngIf="searchService.searchList">
+        <li *ngFor="let search of searchService.searchList" (click)="viewPage(search)">{{search.text}} </li>
     </ul>
 </div>
\ No newline at end of file

src/app/searchmodal/searchmodal.page.ts

-import { Component, OnInit } from "@angular/core";
-import { ModalController, NavParams } from "@ionic/angular";
+import { Component, OnInit } from '@angular/core';
+import { Router, ActivatedRoute } from '@angular/router';
+import { ModalController, NavParams } from '@ionic/angular';
+import { SearchService } from './../../config/search.service';
+import { ServiceService } from './../../config/service.service';
+import { ProductsService } from './../../config/products.service';
 
 @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 {
+  searchShow = false;
   constructor(
     private modalController: ModalController,
-    private navParams: NavParams
+    private navParams: NavParams,
+    private searchService: SearchService,
+    public service: ServiceService,
+    private productsService: ProductsService,
+    private router: Router
   ) {}
 
-  ngOnInit() {}
+  ngOnInit() {
+    this.searchService.searchList = [];
+  }
 
   async closeModal() {
     await this.modalController.dismiss();
   }
+
+  searchFun(data: string) {
+    this.searchShow = true;
+    this.searchService.search(data);
+  }
+
+  clickSearch() {
+    this.searchShow = true;
+    this.searchService.searchList = [];
+  }
+
+  viewPage(datas: any) {
+    this.closeModal();
+    console.log(datas);
+    let data;
+    let url;
+    if (datas.type === 'shopper') {
+      data = datas.data;
+      this.service.set('params', data);
+      url = 'productlist';
+    } else if (datas.type === 'category') {
+      data = datas.data;
+      this.service.set('params', data);
+      url = 'catstorelist';
+    } else {
+      data = datas.data;
+      data.size = this.service.splitSep(data.size);
+      data.tag = this.service.splitSep(data.tag);
+      (data.color = this.service.splitSep(data.color)), (url = 'productdetail');
+      this.productsService.setProd(data);
+    }
+    this.searchClose();
+    this.router.navigateByUrl(url, { queryParams: data });
+    document.body.scrollTop = document.documentElement.scrollTop = 0;
+  }
+
+  searchClose() {
+    this.closeModal();
+    this.searchShow = false;
+  }
+
+
 }

src/config/search.service.ts

-import { Injectable } from "@angular/core";
+import { Injectable } from '@angular/core';
 import {
   AngularFirestore,
   AngularFirestoreCollection
-} from "@angular/fire/firestore";
-import { Search } from "./services/search";
-import { database } from "firebase";
-import { take } from "rxjs/operators";
+} from '@angular/fire/firestore';
+import { Search } from './services/search';
+import { database } from 'firebase';
+import { take } from 'rxjs/operators';
 
 @Injectable({
-  providedIn: "root"
+  providedIn: 'root'
 })
 export class SearchService {
   searchList: Search[] = [];
   constructor(public afs: AngularFirestore) {}
 
   public async search(inputText: string) {
-    if (inputText === "") {
+    if (inputText === '') {
       this.searchList = [];
       return;
     }
@@ -24,13 +24,13 @@ export class SearchService {
     this.searchList = [];
     // tslint:disable-next-line:max-line-length
     const orderRef: AngularFirestoreCollection<any> = this.afs.collection(
-      "shoppers",
+      'shoppers',
       ref =>
         ref
-          .where("status", "==", state)
-          .orderBy("name")
+          .where('status', '==', state)
+          .orderBy('name')
           .startAt(inputText.toUpperCase())
-          .endAt(inputText.toLowerCase() + "\uf8ff")
+          .endAt(inputText.toLowerCase() + '\uf8ff')
           .limit(5)
     );
     orderRef.valueChanges().subscribe(value => {
@@ -41,7 +41,7 @@ export class SearchService {
           const shopper: Search = {
             text: item.name,
             data: item,
-            type: "shopper"
+            type: 'shopper'
           };
           this.searchList.push(shopper);
         });
@@ -50,13 +50,13 @@ export class SearchService {
 
     // tslint:disable-next-line:max-line-length
     const prodRef: AngularFirestoreCollection<any> = this.afs.collection(
-      "products",
+      'products',
       ref =>
         ref
-          .where("status", "==", state)
-          .orderBy("prodName")
+          .where('status', '==', state)
+          .orderBy('prodName')
           .startAt(inputText.toUpperCase())
-          .endAt(inputText.toLowerCase() + "\uf8ff")
+          .endAt(inputText.toLowerCase() + '\uf8ff')
           .limit(5)
     );
     prodRef.valueChanges().subscribe(values => {
@@ -67,7 +67,7 @@ export class SearchService {
           const prod: Search = {
             text: item.prodName,
             data: item,
-            type: "product"
+            type: 'product'
           };
           this.searchList.push(prod);
         });
@@ -77,13 +77,13 @@ export class SearchService {
 
     // tslint:disable-next-line:max-line-length
     const feaRef: AngularFirestoreCollection<any> = this.afs.collection(
-      "category",
+      'category',
       ref =>
         ref
-          .where("status", "==", state)
-          .orderBy("catName")
+          .where('status', '==', state)
+          .orderBy('catName')
           .startAt(inputText.toUpperCase())
-          .endAt(inputText.toLowerCase() + "\uf8ff")
+          .endAt(inputText.toLowerCase() + '\uf8ff')
           .limit(5)
     );
     feaRef.valueChanges().subscribe(values => {
@@ -94,7 +94,7 @@ export class SearchService {
           const prod: Search = {
             text: item.catName,
             data: item,
-            type: "category"
+            type: 'category'
           };
           this.searchList.push(prod);
         });