pagination

package.json

@@ -41,6 +41,7 @@
     "ngx-carousel": "^1.3.5",
     "ngx-gallery": "^5.9.1",
     "ngx-google-places-autocomplete": "^2.0.3",
+    "ngx-infinite-scroll": "^7.1.0",
     "ngx-malihu-scrollbar": "^7.0.0",
     "ngx-slick": "^0.2.1",
     "node-sass": "^4.12.0",

src/app/purchase/orders/orders.component.scss

@@ -3,6 +3,9 @@
             width:100%;
             ul{
                 padding:0px;
+                &::-webkit-scrollbar {
+                    display: none;
+                }
                 li{
                     list-style: none;
                     background: #fff;

src/app/purchase/orders/orders.component.ts

 import { Component, OnInit } from '@angular/core';
 import { NgxCarousel } from 'ngx-carousel';
+import { WebService } from '../../provider/web.service';
+import { ImageStorage } from '../../../environments/server.config';
 import { Router,ActivatedRoute } from '@angular/router';
 
 @Component({
@@ -8,20 +10,105 @@ import { Router,ActivatedRoute } from '@angular/router';
   styleUrls: ['./orders.component.scss']
 })
 export class OrdersComponent implements OnInit {
+
+  page: number = 1;
+  total_page: number = 1;
+  loader:boolean;
+  loginDetails:any;
+  bookedData: any;
+  imageServer: string;
+  trend_loader:boolean;
+  trendingProductData:any;
+
   public carouselTile: NgxCarousel;
+
   constructor(
     private router        : Router, 
-    private route         : ActivatedRoute
+    private route         : ActivatedRoute,
+    public webService: WebService,
   ) { 
-    
+    this.loader = true;
+    this.trend_loader = true;
+    this.imageServer  = ImageStorage; 
   }
 
   ngOnInit() {
+    this.checkUserLogin();
+    this.getMyOrders();
+    this.trendingProducts();
     this.carouselTile = {grid: {xs: 1, sm: 2 , md: 4, lg: 8, all: 0},slide: 1, speed: 400,point: { visible: false },load: 2, touch: true, easing: 'ease'}
   }
   
+  checkUserLogin(){
+    this.loginDetails = JSON.parse(this.webService.getLocalStorageItem('userData'));
+  }
+
+  getMyOrders(){
+    this.loader = true;
+    this.webService.post_data('getMyOrders',{"customer_id":this.loginDetails.customer_id,'page':this.page}).subscribe(response => {
+      if(response.status == 'success'){
+        this.total_page = response.meta.total_pages;
+        this.bookedData = response.data;
+      } else {
+        this.bookedData = false;
+      }
+      this.loader = false;
+    })
+  }
+
+  trackOrder(transId){
+    this.goToPage('track',{"ref":transId});
+  }
+
+  onScroll(){
+    if(this.total_page < this.page){
+      return false;
+    }
+
+    this.page += 1;    
+    this.trend_loader = true;
+    this.webService.post_data('getMyOrders',{"customer_id":this.loginDetails.customer_id,'page':this.page}).subscribe(response => {
+      if(response.status == 'success'){
+        let thisObj = this;
+        response.data.forEach(function(orderData,key) {
+          thisObj.bookedData.push(orderData);
+        });
+      }
+      this.trend_loader = false;
+    });
+  }
+
+  cancelOrder(odrId){
+    if(odrId < 0){
+      return false;
+    }
+    this.loader = true;
+    this.webService.post_data('cancelOrder',{"order_id":odrId}).subscribe(response => {
+      if(response.status == 'success'){
+        this.getMyOrders();
+      }
+      this.loader = false;
+    })
+  }
+
+  trendingProducts(){
+    this.trend_loader = true;
+    this.webService.get_data('getTrendingPrdts').subscribe(response => {
+      if(response.status == 'success'){
+        this.trendingProductData = response.data;
+      } else {
+        this.trendingProductData = false;
+      }
+      this.trend_loader = false;
+    });
+  }
+  
+  latestPrdtDtls(prdt_id){
+    this.goToPage('productdetails',{"product_id":prdt_id});
+  }
+
   goToPage(path,data=null){
-    this.router.navigateByUrl(path,{queryParams:data});
+    this.router.navigate([path],{queryParams:  data});
     document.body.scrollTop  =  document.documentElement.scrollTop  =  0;
   }
 

src/app/purchase/productdetails/productdetails.component.html

@@ -70,8 +70,9 @@
                         <div class="clear"></div>
                     </div>
                     <div class="rate_review" *ngIf="productDetails.reviews">
-                      <ul>
-                        <li *ngFor="let revws of productDetails.reviews">
+                      <div class="loader_overlay" *ngIf="review_loader"></div>
+                      <ul infiniteScroll  [infiniteScrollDistance]="2"  [infiniteScrollThrottle]="50"  (scrolled)="onScroll()" [scrollWindow]="false" style="max-height: 700px; overflow: scroll">
+                        <li *ngFor="let revws of reviewArray">
                           <div class="row">
                             <div class="col-md-9">
                                 <h4 class="pt0">{{revws.title}}</h4>
@@ -108,7 +109,7 @@
   <div class="bottom_product_list">
     <div class="loader_overlay" *ngIf="loader2"></div>
     <ngx-carousel [inputs]="carouselTile" (carouselLoad)="carouselTileLoad()" *ngIf="trendingProductData">
-      <ngx-tile NgxCarouselItem *ngFor="let prdt of trendingProductData"> <!-- LOOP THIS -->
+      <ngx-tile NgxCarouselItem *ngFor="let prdt of trendingProductData" >
         <li (click)="latestPrdtDtls(prdt.product_id)">
           <div class="inner_div_product">
               <div class="product_wrapper">

src/app/purchase/productdetails/productdetails.component.scss

@@ -59,6 +59,9 @@
                 ul{
                     margin:0px;
                     padding: 0px;
+                    &::-webkit-scrollbar {
+                        display: none;
+                    }
                     li{
                         list-style: none;
                         border-bottom: 1px solid #eeeeee;

src/app/purchase/productdetails/productdetails.component.ts

@@ -16,6 +16,7 @@ export class ProductdetailsComponent implements OnInit {
   
   loader: boolean;
   loader2:boolean;
+  review_loader:boolean;
   count:any;
   product_id: number;
   imageServer: string;
@@ -25,6 +26,9 @@ export class ProductdetailsComponent implements OnInit {
   galleryOptions: NgxGalleryOptions[];
   loginDetails:any;
   trendingProductData:any;
+  page: number = 1;
+  reviewArray:any = new Array();
+  total_page: number = 1;
 
   @ViewChild("indexLoginModal") loginModalRef: ElementRef;
 
@@ -75,12 +79,15 @@ export class ProductdetailsComponent implements OnInit {
   }
 
   getProductDetails(){
-    this.webService.post_data('SingleProductSearch',{"product_id":this.product_id}).subscribe(response => {
+    this.loader = true;
+    this.webService.post_data('SingleProductSearch',{"product_id":this.product_id,'page':this.page}).subscribe(response => {
       if(response.status == 'success'){
         let image: string = '';
         let imageArr: any[] = new Array();
         const thisObj = this;
         this.productDetails = response.data;
+        this.reviewArray = response.data.reviews.data;
+        this.total_page = response.data.reviews.meta.total_pages;
         console.log(response.data)
         if(this.productDetails.images.length > 0){
           thisObj.productDetails.images.forEach(function (data) {
@@ -99,9 +106,27 @@ export class ProductdetailsComponent implements OnInit {
     });
   }
 
+  onScroll(){
+    if(this.total_page < this.page){
+      return false;
+    }
+
+    this.page += 1;    
+    this.review_loader = true;
+    this.webService.post_data('SingleProductSearch',{"product_id":this.product_id,'page':this.page}).subscribe(response => {
+      if(response.status == 'success'){
+        let thisObj = this;
+        response.data.reviews.data.forEach(function(reviewData,key) {
+          thisObj.reviewArray.push(reviewData);
+        });
+      }
+      this.review_loader = false;
+    });
+  }
+
   trendingProducts(){
     this.loader2 = true;
-    this.webService.get_data('getTrendingPrdts').subscribe(response => {
+    this.webService.post_data('getTrendingPrdts',{'page':this.page}).subscribe(response => {
       if(response.status == 'success'){
         this.trendingProductData = response.data;
       } else {
@@ -121,6 +146,10 @@ export class ProductdetailsComponent implements OnInit {
     this.goToPage('address','');
   }
 
+  latestPrdtDtls(prdt_id){
+    this.goToPage('productdetails',{"product_id":prdt_id});
+  }
+  
   goToPage(path,data=null){
     this.router.navigate([path],{queryParams:  data});
     document.body.scrollTop  =  document.documentElement.scrollTop  =  0;

src/app/purchase/productlist/productlist.component.html

@@ -67,7 +67,7 @@
                 </div>
                 <div class="loader_overlay" *ngIf="loader"></div>
                 <div class="search_listing_content" *ngIf="productArray && productArray.length > 0;else noProductData">
-                    <ul>
+                    <ul infiniteScroll  [infiniteScrollDistance]="2"  [infiniteScrollThrottle]="50"  (scrolled)="onScroll()" [scrollWindow]="false" style="max-height: 700px; overflow: scroll">
                         <li *ngFor="let prdt of productArray">
                             <div class="inner_div_product cpoint" (click)="getSingleProductDetails(prdt.product_id)">
                                 <div class="product_wrapper">

src/app/purchase/productlist/productlist.component.scss

@@ -233,6 +233,9 @@
                 ul{
                     margin:0px;
                     padding:0px;
+                    &::-webkit-scrollbar {
+                        display: none;
+                    }
                     li{
                         list-style: none;
                         padding:10px;

src/app/purchase/productlist/productlist.component.ts

@@ -13,12 +13,15 @@ export class ProductlistComponent implements OnInit {
   loader: boolean;
   searchKey:string;
   imageServer: any;
-  productArray: any;
+  productArray: any[] = new Array();
   productBrand: any;
   brandArr: any[] = new Array();
   sliderMinvalue: number;
   sliderhighValue: number;
   slideroptions: Options;
+  page: number = 1;
+  total_page: number = 1;
+  filterParam: any = new Array();
 
   constructor(
     private router        : Router, 
@@ -26,13 +29,16 @@ export class ProductlistComponent implements OnInit {
     public webService     : WebService
   ){ 
     this.loader = true;
-    this.productArray = true;
+    this.productArray = [];
+    this.filterParam = {"key":'',"brand_id":Array(),"minPrice":'',"maxPrice":'','page':1};
 
     this.imageServer = ImageStorage;
     route.params.subscribe(val => {
       this.route.queryParams.subscribe(params => {
         this.searchKey = params['key'];
-        this.getProductDetails({"key":this.searchKey});
+        this.filterParam.key = this.searchKey;
+        this.filterParam.page = this.page;
+        this.getProductDetails(this.filterParam);
       });
     });
     if(this.searchKey == ''){
@@ -51,14 +57,22 @@ export class ProductlistComponent implements OnInit {
     document.body.scrollTop  =  document.documentElement.scrollTop  =  0;
   }
 
-  getProductDetails(params:any = ''){
+  getProductDetails(params:any = Array()){
     this.loader = true;
     this.webService.post_data('productSearch',params).subscribe(response => {
       if(response.status == 'success'){
-        console.log(response.data);
+        this.total_page = response.meta.total_pages;
+        if(params.page == 1){
           this.productArray = response.data;
         } else {
-        this.productArray = false;
+          let thisObj = this;
+          response.data.forEach(function(product,key) {
+            thisObj.productArray.push(product);
+          });
+        }
+
+      } else {
+        this.productArray = [];
       }
       this.loader = false;
     });
@@ -75,6 +89,15 @@ export class ProductlistComponent implements OnInit {
     });
   }
 
+  onScroll(){
+    if(this.total_page == this.page){
+      return false;
+    }
+    this.page += 1;
+    this.filterParam.page = this.page;
+    this.getProductDetails(this.filterParam);
+  }
+
   getSingleProductDetails(prdt_id){
     this.goToPage('productdetails',{"product_id":prdt_id});
   }
@@ -88,10 +111,17 @@ export class ProductlistComponent implements OnInit {
         this.brandArr.splice(id, 1);
       }
     }
-    this.getProductDetails({"key":this.searchKey,"brand_id":this.brandArr});
+    this.page = 1;
+    this.filterParam.page = this.page;
+    this.filterParam.brand_id = this.brandArr;
+    this.getProductDetails(this.filterParam);
   }
 
   getPrice(low,top){
-    this.getProductDetails({"key":this.searchKey,"brand_id":this.brandArr,"minPrice":low,"maxPrice":top});
+    this.page = 1;
+    this.filterParam.page = this.page;
+    this.filterParam.minPrice = low;
+    this.filterParam.maxPrice = top;
+    this.getProductDetails(this.filterParam);
   }
 }

src/app/purchase/purchase-home/purchase-home.component.html

@@ -31,16 +31,16 @@
                                     <p>{{prdt.short_description}}</p>
                                     <div class="star_ratting">
                                         <fieldset class="rating" *ngIf="prdt.rating > 0">
-                                            <input type="radio" [checked]="(prdt.rating >= 4.75) ? 'true':''" [attr.id]="'usrReviewId_'+prdt.product_id+'_5'" [attr.name]="'usrReviewName_'+prdt.product_id" value="5" /><label class = "full" for="secondStar5"></label>
-                                            <input type="radio" [checked]="(prdt.rating >= 4.25 && prdt.rating < 4.75) ? 'true':''" [attr.id]="'usrReviewId_'+prdt.product_id+'_4half'" [attr.name]="'usrReviewName_'+prdt.product_id" value="4.5" /><label class="half" for="secondStar4half"></label>
-                                            <input type="radio" [checked]="(prdt.rating >= 3.75 && prdt.rating < 4.25) ? 'true':''" [attr.id]="'usrReviewId_'+prdt.product_id+'_4'" [attr.name]="'usrReviewName_'+prdt.product_id" value="4" /><label class = "full" for="secondStar4"></label>
-                                            <input type="radio" [checked]="(prdt.rating >= 3.25 && prdt.rating < 3.75) ? 'true':''" [attr.id]="'usrReviewId_'+prdt.product_id+'_3half'" [attr.name]="'usrReviewName_'+prdt.product_id" value="3.5" /><label class="half" for="secondStar3half"></label>
-                                            <input type="radio" [checked]="(prdt.rating >= 2.75 && prdt.rating < 3.25) ? 'true':''" [attr.id]="'usrReviewId_'+prdt.product_id+'_3'" [attr.name]="'usrReviewName_'+prdt.product_id" value="3" /><label class = "full" for="secondStar3"></label>
-                                            <input type="radio" [checked]="(prdt.rating >= 2.25 && prdt.rating < 2.75) ? 'true':''" [attr.id]="'usrReviewId_'+prdt.product_id+'_2half'" [attr.name]="'usrReviewName_'+prdt.product_id" value="2.5" /><label class="half" for="secondStar2half"></label>
-                                            <input type="radio" [checked]="(prdt.rating >= 1.75 && prdt.rating < 2.25) ? 'true':''" [attr.id]="'usrReviewId_'+prdt.product_id+'_2'" [attr.name]="'usrReviewName_'+prdt.product_id" value="2" /><label class = "full" for="secondStar2"></label>
-                                            <input type="radio" [checked]="(prdt.rating >= 1.25 && prdt.rating < 1.75) ? 'true':''" [attr.id]="'usrReviewId_'+prdt.product_id+'_1half'" [attr.name]="'usrReviewName_'+prdt.product_id" value="1.5" /><label class="half" for="secondStar1half"></label>
-                                            <input type="radio" [checked]="(prdt.rating >= 0.75 && prdt.rating < 1.25) ? 'true':''" [attr.id]="'usrReviewId_'+prdt.product_id+'_1'" [attr.name]="'usrReviewName_'+prdt.product_id" value="1" /><label class = "full" for="secondStar1"></label>
-                                            <input type="radio" [checked]="(prdt.rating < 0.75) ? 'true':''" [attr.id]="'usrReviewId_'+prdt.product_id+'_half'" [attr.name]="'usrReviewName_'+prdt.product_id" value="0.5" /><label class="half" for="secondStarhalf"></label>
+                                            <input type="radio" [checked]="(prdt.rating >= 4.75) ? 'true':''" [attr.id]="'usrStar_'+prdt.product_id+'_5'" [attr.name]="'usrStarName_'+prdt.product_id" value="5" /><label class = "full" for="secondStar5"></label>
+                                            <input type="radio" [checked]="(prdt.rating >= 4.25 && prdt.rating < 4.75) ? 'true':''" [attr.id]="'usrStar_'+prdt.product_id+'_4half'" [attr.name]="'usrStarName_'+prdt.product_id" value="4.5" /><label class="half" for="secondStar4half"></label>
+                                            <input type="radio" [checked]="(prdt.rating >= 3.75 && prdt.rating < 4.25) ? 'true':''" [attr.id]="'usrStar_'+prdt.product_id+'_4'" [attr.name]="'usrStarName_'+prdt.product_id" value="4" /><label class = "full" for="secondStar4"></label>
+                                            <input type="radio" [checked]="(prdt.rating >= 3.25 && prdt.rating < 3.75) ? 'true':''" [attr.id]="'usrStar_'+prdt.product_id+'_3half'" [attr.name]="'usrStarName_'+prdt.product_id" value="3.5" /><label class="half" for="secondStar3half"></label>
+                                            <input type="radio" [checked]="(prdt.rating >= 2.75 && prdt.rating < 3.25) ? 'true':''" [attr.id]="'usrStar_'+prdt.product_id+'_3'" [attr.name]="'usrStarName_'+prdt.product_id" value="3" /><label class = "full" for="secondStar3"></label>
+                                            <input type="radio" [checked]="(prdt.rating >= 2.25 && prdt.rating < 2.75) ? 'true':''" [attr.id]="'usrStar_'+prdt.product_id+'_2half'" [attr.name]="'usrStarName_'+prdt.product_id" value="2.5" /><label class="half" for="secondStar2half"></label>
+                                            <input type="radio" [checked]="(prdt.rating >= 1.75 && prdt.rating < 2.25) ? 'true':''" [attr.id]="'usrStar_'+prdt.product_id+'_2'" [attr.name]="'usrStarName_'+prdt.product_id" value="2" /><label class = "full" for="secondStar2"></label>
+                                            <input type="radio" [checked]="(prdt.rating >= 1.25 && prdt.rating < 1.75) ? 'true':''" [attr.id]="'usrStar_'+prdt.product_id+'_1half'" [attr.name]="'usrStarName_'+prdt.product_id" value="1.5" /><label class="half" for="secondStar1half"></label>
+                                            <input type="radio" [checked]="(prdt.rating >= 0.75 && prdt.rating < 1.25) ? 'true':''" [attr.id]="'usrStar_'+prdt.product_id+'_1'" [attr.name]="'usrStarName_'+prdt.product_id" value="1" /><label class = "full" for="secondStar1"></label>
+                                            <input type="radio" [checked]="(prdt.rating < 0.75) ? 'true':''" [attr.id]="'usrStar_'+prdt.product_id+'_half'" [attr.name]="'usrStarName_'+prdt.product_id" value="0.5" /><label class="half" for="secondStarhalf"></label>
                                         </fieldset>
                                         <span class="floatRight">$ {{prdt.amount}}</span>
                                         <div class="clear"></div>
@@ -55,14 +55,15 @@
                 </div>
 
                 <div class="search_listing_content">
-                    <div class="loader_overlay" *ngIf="loader2"></div>
+                    <div class="loader_overlay" *ngIf="trend_loader"></div>
                     <div class="row">
                         <div class="col-md-8">
                             <p>Trending Products</p>
                         </div>
                     </div>
-                    <ul *ngIf="trendingProductData">
-                        <li (click)="latestPrdtDtls(prdt.product_id)"  *ngFor="let prdt of trendingProductData">
+                    <ul *ngIf="trendingProductData" 
+                        infiniteScroll  [infiniteScrollDistance]="2"  [infiniteScrollThrottle]="50"  (scrolled)="onScroll()" [scrollWindow]="false" style="max-height: 700px; overflow: scroll">
+                        <li (click)="latestPrdtDtls(prdt.product_id)"  *ngFor="let prdt of trendingProductData" >
                             <div class="inner_div_product">
                                 <div class="product_wrapper">
                                     <img src="{{imageServer + prdt.product_image}}" onerror="this.src='assets/images/user_avatar.jpg'">
@@ -100,9 +101,12 @@
 <button #failureModel class="hide" data-toggle="modal" data-target="#failure"></button>
 
 <div class="modal" id="failure">
-    <div class="modal-dialog modal-full">
-        <div class="modal-content login_modal_wrapper">
-            <div class="modal_close" data-dismiss="modal"> × </div>
+    <div class="modal-dialog modal-sm">
+        <div class="modal-content login_modal_wrapper status_modal">
+            <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal">&times;</button>
+               
+              </div>
             <div class="modal-body quote_modal">
                 <div class="login_modal_content">
                     <div class="login_modal_inner">
@@ -112,8 +116,8 @@
                         </div>
                         
                         <div class="row">
-                            <div class="col-md-12 textCenter" style="padding-top:40px;">
-                                <button class="log_btn" data-dismiss="modal">Close</button>
+                            <div class="col-md-12 textCenter">
+                                <button class="btn log_btn btn-block" data-dismiss="modal">Close</button>
                             </div>
                         </div>
                     </div>

src/app/purchase/purchase-home/purchase-home.component.scss

@@ -233,6 +233,9 @@
                 ul{
                     margin:0px;
                     padding:0px;
+                    &::-webkit-scrollbar {
+                        display: none;
+                    }
                     li{
                         list-style: none;
                         padding:10px;
@@ -471,3 +474,25 @@
         }
     }
 }
+
+
+.status_modal{
+    border-radius: 0px;
+    .modal-header{
+        border:none;
+    }
+    .login_modal_inner{
+        img{
+            width:75px;
+        }
+        h4{
+            font-size:18px;
+        }
+        .log_btn{
+            background: #2655bf;
+            color: #fff;
+            border:none;
+            border-radius: 0px;
+        }
+    }
+}
\ No newline at end of file

src/app/purchase/purchase-home/purchase-home.component.ts

@@ -13,10 +13,12 @@ import { NgxCarousel } from 'ngx-carousel';
 export class PurchaseHomeComponent implements OnInit {
   public carouselTile: NgxCarousel;
   
+  page: number = 1;
   loader:boolean;
-  loader2:boolean;
-  latestProductData:any;
+  total_page: number = 1;
   imageServer: any;
+  trend_loader:boolean;
+  latestProductData:any;
   trendingProductData:any;
 
   @ViewChild("failureModel") public failureModelRef: ElementRef;
@@ -27,7 +29,7 @@ export class PurchaseHomeComponent implements OnInit {
     public webService     : WebService
   ) { 
     this.loader = true;
-    this.loader2 = true;
+    this.trend_loader = true;
     this.imageServer = ImageStorage;
   }
 
@@ -50,7 +52,7 @@ export class PurchaseHomeComponent implements OnInit {
     this.unsetProdDetails();
     this.getLatestProducts();
     this.trendingProducts();
-    this.carouselTile = {grid: {xs: 1, sm: 2 , md: 4, lg: 8, all: 0},slide: 1, speed: 400,point: { visible: false },load: 2, touch: true, easing: 'ease'}
+    this.carouselTile = {grid: {xs: 1, sm: 2, md: 4, lg: 8, all: 0},slide: 1, speed: 400, point: { visible: false }, load: 2, touch: true, loop: true}
   }
 
   unsetProdDetails(){
@@ -70,15 +72,15 @@ export class PurchaseHomeComponent implements OnInit {
   }
 
   trendingProducts(){
-    this.loader2 = true;
-    this.webService.get_data('getTrendingPrdts').subscribe(response => {
+    this.trend_loader = true;
+    this.webService.post_data('getTrendingPrdts',{'page':this.page}).subscribe(response => {
       if(response.status == 'success'){
-        console.log(response.data)
+        this.total_page = response.meta.total_pages;
         this.trendingProductData = response.data;
       } else {
         this.trendingProductData = false;
       }
-      this.loader2 = false;
+      this.trend_loader = false;
     });
   }
 
@@ -86,6 +88,24 @@ export class PurchaseHomeComponent implements OnInit {
     this.goToPage('productdetails',{"product_id":prdt_id});
   }
 
+  onScroll(){
+    if(this.total_page < this.page){
+      return false;
+    }
+
+    this.page += 1;    
+    this.trend_loader = true;
+    this.webService.post_data('getTrendingPrdts',{'page':this.page}).subscribe(response => {
+      if(response.status == 'success'){
+        let thisObj = this;
+        response.data.forEach(function(trendData,key) {
+          thisObj.trendingProductData.push(trendData);
+        });
+      }
+      this.trend_loader = false;
+    });
+  }
+
   goToPage(path,data=null){
     this.router.navigate([path],{queryParams:  data});
     document.body.scrollTop  =  document.documentElement.scrollTop  =  0;

src/app/purchase/purchase.module.ts

@@ -5,6 +5,7 @@ import { ProductlistComponent } from './productlist/productlist.component';
 import { ProductdetailsComponent } from './productdetails/productdetails.component';
 import { moduleRouting } from './purchase.routing';
 import { SearchbarComponent } from './searchbar/searchbar.component';
+import { InfiniteScrollModule } from 'ngx-infinite-scroll';
 import { Ng5SliderModule } from 'ng5-slider';
 import { MalihuScrollbarModule } from 'ngx-malihu-scrollbar';
 import { NgxGalleryModule } from 'ngx-gallery';
@@ -30,6 +31,7 @@ import { PurchaseHomeComponent } from './purchase-home/purchase-home.component';
     NgxGalleryModule,
     NgxCarouselModule,
     ReactiveFormsModule,
+    InfiniteScrollModule,
     TooltipModule,
     MalihuScrollbarModule.forRoot()
   ]

src/app/purchase/rating/rating.component.html

@@ -74,7 +74,7 @@
             </div>
         </div>
     </div>
-    <div class="bottom_product_list">
+    <!-- <div class="bottom_product_list">
         <h4>Audi Q7 <span>( Similar Results )</span></h4>
         <ngx-carousel [inputs]="carouselTile" (carouselLoad)="carouselTileLoad()">
             <ngx-tile NgxCarouselItem>
@@ -472,5 +472,5 @@
             <button NgxCarouselPrev class='leftRs'>&lt;</button>
             <button NgxCarouselNext class='rightRs'>&gt;</button>
         </ngx-carousel>
-    </div>
+    </div> -->
 </div>
\ No newline at end of file

src/app/purchase/searchbar/searchbar.component.html

@@ -12,9 +12,11 @@
       </ul>
     </div>
     <div  *ngIf="productArray && productArray.length > 0" class="nav_bar_search_list">
-      <ul class="filter-select">
+      <ul class="filter-select" malihu-scrollbar [scrollbarOptions]="scrollbarOptions" style="max-height: 350px; overflow: scroll">
         <li  class="cpoint" *ngFor="let prdt of productArray" (click)="clickProduct(prdt.product_id)">
-            <div class="search_list_image"></div>
+            <div class="search_list_image">
+                <img src="{{imageServer + prdt.image}}" onerror="this.src='assets/images/user_avatar.jpg'">
+            </div>
             <p>{{prdt.product_name}}</p>
             <div class="clear"></div>
           </li>

src/app/purchase/searchbar/searchbar.component.ts

 import { Component, OnInit, ElementRef, ViewChild } from '@angular/core';
 import { Router,ActivatedRoute } from '@angular/router';
 import { WebService } from '../../provider/web.service';
+import { ImageStorage } from '../../../environments/server.config';
 
 @Component({
   selector: 'app-searchbar',
@@ -11,10 +12,15 @@ export class SearchbarComponent implements OnInit {
   
   productArray: any;
   SingleProductData:any;
+  imageServer: string;
+  
+  public scrollbarOptions = { axis: 'y', theme: 'minimal-dark' };
+
   @ViewChild("productSearch") public productSearchRef: ElementRef;
   
   constructor(private router : Router, private route: ActivatedRoute, public webService: WebService) {
     this.productArray = true;
+    this.imageServer  = ImageStorage;
   }
 
   ngOnInit() {
@@ -32,6 +38,7 @@ export class SearchbarComponent implements OnInit {
     }
     this.webService.post_data('productSearch',{"key":product}).subscribe(response => {
       if(response.status == 'success'){
+        console.log(response.data)
         this.productArray = response.data;
       } else {
         this.productArray = false;

src/app/purchase/summary/summary.component.ts

@@ -91,9 +91,9 @@ export class SummaryComponent implements OnInit {
       if(response.status == 'success'){
         document.location.href = this.serverUrl+'orderPayNow/'+response.data;
       }else{
+        this.loader = false;
         this.failureModelRef.nativeElement.click();
       }
-      this.loader = false;
     })
   }
 

src/app/purchase/track/track.component.html

@@ -17,7 +17,7 @@
           <div class="product_details" *ngIf="orderDetails">
             <h1>{{orderDetails.product_name}}</h1>
             <!-- <div class="review" (click)="reviewBtn()">Write review</div> -->
-                    <div class="review" data-toggle="modal" data-target="#review">Write review</div>
+            <div class="review" data-toggle="modal" data-target="#review" *ngIf="!userReviewed">Write review</div>
             <div class="clear"></div>
             <h2>{{orderDetails.short_description}}</h2>
             <div class="others">
@@ -26,7 +26,7 @@
             </div>
             <div class="row">
               <div class="col-md-5">
-                            <div class="order_range">
+                <div class="order_range prevent-click">
                   <ng5-slider [(value)]="verticalSlider2.minValue" [(highValue)]="verticalSlider2.maxValue" [options]="verticalSlider2.options"></ng5-slider>
                 </div>
                 <div class="order_range_details">
@@ -84,7 +84,7 @@
       </div>
     </div>
   </div>
-  </div>
+</div>
 
 
 
@@ -95,10 +95,17 @@
 
 <!-- START-RATTING-DIV -->
 
-  <div class="modal" id="review">
-    <div class="modal-dialog modal-lg">
+<div class="modal" id="review">
+  <div class="modal-dialog modal-md">
     <div class="modal-content">
+
+      <div class="modal-header" #ratingModal>
+        <button type="button" class="close" data-dismiss="modal">&times;</button>
+       
+      </div>
       <div class="ratting_inner">
+        <div class="loader_overlay" *ngIf="loader_review"></div>
+        <form [formGroup]="rateForm" (ngSubmit)="rateFormSubmit(rateForm.value)">
           <div class="">
             <p>Rate this Product</p>
             <div class="ratting_star">
@@ -130,19 +137,33 @@
           <hr>
           <div class="">
             <p>Give a Title</p>
-                  <input class="title_input" placeholder="Type Here">
+            <input class="title_input" placeholder="Type Here" formControlName="title"
+              [ngClass]="{'input_error': !rateForm.controls['title'].valid && (rateForm.controls['title'].dirty || rateForm.controls['title'].touched || rateFormClick),
+                        'input_success': rateForm.controls['title'].valid}" (click)="rateFormClick = false">
+            <div class="s_error" *ngIf="(!rateForm.controls['title'].valid && rateForm.controls['title'].touched) || (!rateForm.controls['title'].valid && rateFormClick)">
+                <div class="s_validation" *ngIf="rateForm.controls['title'].hasError('required')">{{errorMsg.errorList.required}} </div>
+            </div>
             
           </div>
           <hr>
           <div class="">
             <p>Write a Review</p>
-                  <input class="title_input" placeholder="Type Here">
+            <input class="title_input" placeholder="Type Here" formControlName="description"
+              [ngClass]="{'input_error': !rateForm.controls['description'].valid && (rateForm.controls['description'].dirty || rateForm.controls['description'].touched || rateFormClick),
+                        'input_success': rateForm.controls['description'].valid}" (click)="rateFormClick = false">
+            <div class="s_error" *ngIf="(!rateForm.controls['description'].valid && rateForm.controls['description'].touched) || (!rateForm.controls['description'].valid && rateFormClick)">
+                <div class="s_validation" *ngIf="rateForm.controls['description'].hasError('required')">{{errorMsg.errorList.required}} </div>
             </div>
-              <hr>
-              <button class="submit_btn">Submit</button>
           </div>
+          <div *ngIf="rateFormResponse" class="s_alert" [ngClass]="(rateFormResponse.status == 'success') ? 'alert-success' : 'alert-danger'">
+              <strong>{{rateFormResponse.message}}<br></strong>
+          </div>
+          <hr>
+          <button class="submit_btn" (click)="rateFormClick = true">Submit</button>
+        </form>
       </div>
     </div>
   </div>
+</div>
 
-  <!-- END-RATTING-DIV -->
\ No newline at end of file
+<!-- END-RATTING-DIV -->
\ No newline at end of file

src/app/purchase/track/track.component.ts

-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
 import { Router,ActivatedRoute } from '@angular/router';
 import { WebService } from '../../provider/web.service';
 import { NgxGalleryOptions, NgxGalleryImage, NgxGalleryAnimation } from 'ngx-gallery';
-import * as $ from 'jquery';
+import { FormGroup, FormControl, Validators, ValidationErrors } from '@angular/forms';
+import { ValidationService } from '../../provider/validation.service';
 import { NgxCarousel } from 'ngx-carousel';
 import { ImageStorage } from '../../../environments/server.config';
 import { Options } from 'ng5-slider';
+import * as $ from 'jquery';
 
 interface RangeSliderModel {
   minValue: number;
@@ -23,37 +25,50 @@ export class TrackComponent implements OnInit {
   count:any;
   loginDetails:any;
   loader:boolean;
+  loader_review:boolean;
   imageServer: string;
   orderDetails:any;
+  userReviewed:boolean;
   galleryOptions: NgxGalleryOptions[];
   galleryImages: NgxGalleryImage[];
   verticalSlider2:any;
+  rateFormClick:boolean;
+  rateFormResponse:any;
+
+  @ViewChild('ratingModal') ratingModal: ElementRef;
 
   public carouselTile: NgxCarousel;
     constructor(private router        : Router, 
                 private route         : ActivatedRoute,
+                public errorMsg       : ValidationService,
                 public webService     : WebService){
       this.count = 0;
-      this.loader =true;
+      this.loader = true;
+      this.userReviewed = true;
+      this.loader_review = false;
       this.imageServer  = ImageStorage;
+      this.rateFormClick = false; 
     }
-    
+    rateForm;
     ngOnInit(): void {
       this.route.queryParams.subscribe(params => {
-        let payStatus = params['status'];
         this.ref_id = params['ref'];
-  
-        if(payStatus && payStatus !=''){
-          if(payStatus == 'success'){
-            if(this.ref_id > 0){
-              this.getOrderDetail();
-            }
-          }
+        if(!this.ref_id || this.ref_id < 0){
+          this.goToPage('purchaseHome','');
         }
       });
+      
       this.designModule();
+      this.getOrderDetail();
       this.checkUserLogin();
       this.unsetProdDetails();
+
+      
+      this.rateForm = new FormGroup({
+        rating: new FormControl('5'),
+        title: new FormControl('',[Validators.required]),
+        description: new FormControl('',[Validators.required])
+      });
     }
 
     checkUserLogin(){
@@ -67,10 +82,42 @@ export class TrackComponent implements OnInit {
       this.webService.removeLocalItem('productDetails');
     }
 
-    getOrderDetail(){
-      if(this.ref_id <= 0){
-        this.goToPage('purchaseHome','');
+    rateFormSubmit(data){
+      if(this.rateForm.invalid){
+        return false;
+      }
+      data.product_id = this.orderDetails.product_id;
+      data.customer_id = this.loginDetails.customer_id;
+      this.loader_review = true;
+      const This = this;
+      this.webService.post_data('rateProduct',data).subscribe(response => {
+        if(response.status == 'success'){
+          this.rateFormResponse = response;
+          this.userReviewed = true;
+          setTimeout( function() {
+            This.rateFormResponse = false;
+            This.ratingModal.nativeElement.click();
+          }, 3000);
+        }else{
+          response.status = 'error';
+          response.message = (response.message == '')?this.errorMsg.errorList.req_failure:response.message;
+  
+          this.rateFormResponse = response;
+          setTimeout( function() {
+            This.rateFormResponse = false;
+          }, 3000);
+        }
+        this.loader_review = false;
+      },error => {
+        this.rateFormResponse = {'status':'error','message':this.errorMsg.errorList.req_failure};
+        setTimeout( function() {
+          This.rateFormResponse = false;
+        }, 3000);
+        this.loader_review = false;
+      });
     }
+
+    getOrderDetail(){
       this.loader = true;
       this.webService.post_data('getOrderDetail',{'ref_id':this.ref_id}).subscribe(response => {
         if(response.status == 'success'){
@@ -78,6 +125,8 @@ export class TrackComponent implements OnInit {
           let imageArr: any[] = new Array();
           const thisObj = this;
           this.orderDetails = response.data;
+          this.userReviewed = (this.orderDetails.review_id <= 0 && (this.orderDetails.odr_status == '5' || this.orderDetails.odr_status == '6' || this.orderDetails.odr_status == '7'))?false:true;
+          console.log(this.userReviewed);
           if(this.orderDetails.images.length > 0){
             thisObj.orderDetails.images.forEach(function (data) {
               image = thisObj.imageServer + data.image;
@@ -124,7 +173,6 @@ export class TrackComponent implements OnInit {
     carouselTileLoad(){ return ''; }
     add(){this.count = this.count + 1;}
     minus(){ this.count = this.count - 1; if(this.count < 0){ this.count = 0; }}
-   // verticalSlider2: RangeSliderModel = { minValue: this.verticalMinValue, maxValue: this.verticalMaxValue, options: { floor: 0, ceil: this.verticalMaxValue, vertical: true } };
 
     designModule(){
       this.carouselTile = {grid: {xs: 1, sm: 2 , md: 4, lg: 8, all: 0},slide: 1, speed: 400,point: { visible: false },load: 2, touch: true, easing: 'ease'}