Merge branch 'master' of https://gitlab.techware.co.in/tobin/dcarfixers_angular

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,21 +10,106 @@ 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});
-    document.body.scrollTop = document.documentElement.scrollTop = 0;
+    this.router.navigate([path],{queryParams:  data});
+    document.body.scrollTop  =  document.documentElement.scrollTop  =  0;
   }
 
   carouselTileLoad(){ return ''; }

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>
@@ -106,31 +107,32 @@
     </div>
   </div>
   <div class="bottom_product_list">
-    <ngx-carousel [inputs]="carouselTile" (carouselLoad)="carouselTileLoad()">
-      <ngx-tile NgxCarouselItem> <!-- LOOP THIS -->
-        <li (click)="goToPage('productdetails')">
+    <div class="loader_overlay" *ngIf="loader2"></div>
+    <ngx-carousel [inputs]="carouselTile" (carouselLoad)="carouselTileLoad()" *ngIf="trendingProductData">
+      <ngx-tile NgxCarouselItem *ngFor="let prdt of trendingProductData" >
+        <li (click)="latestPrdtDtls(prdt.product_id)">
           <div class="inner_div_product">
               <div class="product_wrapper">
-                      <img src="/assets/images/asset_product.png">
+                  <img src="{{imageServer + prdt.product_image}}" onerror="this.src='assets/images/user_avatar.jpg'">
               </div>
-              <h5>JK Victory Wheelers type</h5>
-              <p>265/65 R17, Tubeless</p>
+              <h5>{{prdt.product_name}}</h5>
+              <p>{{prdt.short_description}}</p>
               <div class="star_ratting">
-                  <fieldset class="rating">
-                      <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5"></label>
-                      <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half"></label>
-                      <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4"></label>
-                      <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half"></label>
-                      <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3"></label>
-                      <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half"></label>
-                      <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2"></label>
-                      <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half"></label>
-                      <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1"></label>
-                      <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf"></label>
+                  <fieldset class="rating"  *ngIf="prdt.rating > 0">
+                    <input type="radio" [checked]="(prdt.rating >= 4.75) ? 'true':''" [attr.id]="'thirdStar_'+prdt.product_id+'_5'" [attr.name]="'thirdStarName_'+prdt.product_id" value="5" /><label class = "full" for="thirdStar5"></label>
+                    <input type="radio" [checked]="(prdt.rating >= 4.25 && prdt.rating < 4.75) ? 'true':''" [attr.id]="'thirdStar_'+prdt.product_id+'_4half'" [attr.name]="'thirdStarName_'+prdt.product_id" value="4.5" /><label class="half" for="thirdStar4half"></label>
+                    <input type="radio" [checked]="(prdt.rating >= 3.75 && prdt.rating < 4.25) ? 'true':''" [attr.id]="'thirdStar_'+prdt.product_id+'_4'" [attr.name]="'thirdStarName_'+prdt.product_id" value="4" /><label class = "full" for="thirdStar4"></label>
+                    <input type="radio" [checked]="(prdt.rating >= 3.25 && prdt.rating < 3.75) ? 'true':''" [attr.id]="'thirdStar_'+prdt.product_id+'_3half'" [attr.name]="'thirdStarName_'+prdt.product_id" value="3.5" /><label class="half" for="thirdStar3half"></label>
+                    <input type="radio" [checked]="(prdt.rating >= 2.75 && prdt.rating < 3.25) ? 'true':''" [attr.id]="'thirdStar_'+prdt.product_id+'_3'" [attr.name]="'thirdStarName_'+prdt.product_id" value="3" /><label class = "full" for="thirdStar3"></label>
+                    <input type="radio" [checked]="(prdt.rating >= 2.25 && prdt.rating < 2.75) ? 'true':''" [attr.id]="'thirdStar_'+prdt.product_id+'_2half'" [attr.name]="'thirdStarName_'+prdt.product_id" value="2.5" /><label class="half" for="thirdStar2half"></label>
+                    <input type="radio" [checked]="(prdt.rating >= 1.75 && prdt.rating < 2.25) ? 'true':''" [attr.id]="'thirdStar_'+prdt.product_id+'_2'" [attr.name]="'thirdStarName_'+prdt.product_id" value="2" /><label class = "full" for="thirdStar2"></label>
+                    <input type="radio" [checked]="(prdt.rating >= 1.25 && prdt.rating < 1.75) ? 'true':''" [attr.id]="'thirdStar_'+prdt.product_id+'_1half'" [attr.name]="'thirdStarName_'+prdt.product_id" value="1.5" /><label class="half" for="thirdStar1half"></label>
+                    <input type="radio" [checked]="(prdt.rating >= 0.75 && prdt.rating < 1.25) ? 'true':''" [attr.id]="'thirdStar_'+prdt.product_id+'_1'" [attr.name]="'thirdStarName_'+prdt.product_id" value="1" /><label class = "full" for="thirdStar1"></label>
+                    <input type="radio" [checked]="(prdt.rating < 0.75) ? 'true':''" [attr.id]="'thirdStar_'+prdt.product_id+'_half'" [attr.name]="'thirdStarName_'+prdt.product_id" value="0.5" /><label class="half" for="thirdStarhalf"></label>
                   </fieldset>
-                  <span class="floatRight">$320</span>
+                  <span class="floatRight">$ {{prdt.amount}}</span>
                   <div class="clear"></div>
-                  <p>21 Reviews</p>
+                  <p>{{prdt.reviews}} Reviews</p>
               </div>
           </div>
       </li>

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

@@ -15,6 +15,8 @@ import * as $ from 'jquery';
 export class ProductdetailsComponent implements OnInit {
   
   loader: boolean;
+  loader2:boolean;
+  review_loader:boolean;
   count:any;
   product_id: number;
   imageServer: string;
@@ -23,6 +25,10 @@ export class ProductdetailsComponent implements OnInit {
   galleryImages: NgxGalleryImage[];
   galleryOptions: NgxGalleryOptions[];
   loginDetails:any;
+  trendingProductData:any;
+  page: number = 1;
+  reviewArray:any = new Array();
+  total_page: number = 1;
 
   @ViewChild("indexLoginModal") loginModalRef: ElementRef;
 
@@ -33,6 +39,7 @@ export class ProductdetailsComponent implements OnInit {
               public subjectService : SubjectService) {
                 
     this.loader       = true;
+    this.loader2       = true;
     this.count        = 1;
     this.product_id   = 0;
     this.imageServer  = ImageStorage; 
@@ -61,6 +68,7 @@ export class ProductdetailsComponent implements OnInit {
     
     this.designModules();
     this.checkUserLogin();
+    this.trendingProducts();
   }
 
   checkUserLogin(){
@@ -71,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) {
@@ -95,6 +106,36 @@ 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.post_data('getTrendingPrdts',{'page':this.page}).subscribe(response => {
+      if(response.status == 'success'){
+        this.trendingProductData = response.data;
+      } else {
+        this.trendingProductData = false;
+      }
+      this.loader2 = false;
+    });
+  }
+
   buyProduct(amount){
     if(!this.loginDetails){
       this.loginModalRef.nativeElement.click();
@@ -104,6 +145,10 @@ export class ProductdetailsComponent implements OnInit {
     this.webService.setLocalStorageItem('productDetails', JSON.stringify(this.product_data));
     this.goToPage('address','');
   }
+
+  latestPrdtDtls(prdt_id){
+    this.goToPage('productdetails',{"product_id":prdt_id});
+  }
   
   goToPage(path,data=null){
     this.router.navigate([path],{queryParams:  data});

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.productArray = response.data;
+        this.total_page = response.meta.total_pages;
+        if(params.page == 1){
+          this.productArray = response.data;
+        } else {
+          let thisObj = this;
+          response.data.forEach(function(product,key) {
+            thisObj.productArray.push(product);
+          });
+        }
+
       } else {
-        this.productArray = false;
+        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.scss

@@ -233,6 +233,9 @@
                 ul{
                     margin:0px;
                     padding:0px;
+                    &::-webkit-scrollbar {
+                        display: none;
+                    }
                     li{
                         list-style: none;
                         padding:10px;
@@ -470,4 +473,26 @@
             }
         }
     }
+}
+
+
+.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

@@ -2,6 +2,7 @@ import { Component, OnInit, ViewChild,  ElementRef} from '@angular/core';
 import { Router,ActivatedRoute } from '@angular/router';
 import { WebService } from '../../provider/web.service';
 import { Options } from 'ng5-slider';
+import { ImageStorage } from '../../../environments/server.config';
 import { NgxCarousel } from 'ngx-carousel';
 
 @Component({
@@ -11,6 +12,14 @@ import { NgxCarousel } from 'ngx-carousel';
 })
 export class PurchaseHomeComponent implements OnInit {
   public carouselTile: NgxCarousel;
+  
+  page: number = 1;
+  loader:boolean;
+  total_page: number = 1;
+  imageServer: any;
+  trend_loader:boolean;
+  latestProductData:any;
+  trendingProductData:any;
 
   @ViewChild("failureModel") public failureModelRef: ElementRef;
   
@@ -18,7 +27,11 @@ export class PurchaseHomeComponent implements OnInit {
     private router        : Router, 
     private route         : ActivatedRoute,
     public webService     : WebService
-  ) { }
+  ) { 
+    this.loader = true;
+    this.trend_loader = true;
+    this.imageServer = ImageStorage;
+  }
 
   value: number = 40;
   highValue: number = 60;
@@ -37,16 +50,65 @@ export class PurchaseHomeComponent implements OnInit {
       }
     });
     this.unsetProdDetails();
-    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.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, loop: true}
   }
 
   unsetProdDetails(){
     this.webService.removeLocalItem('productDetails');
   }
 
+  getLatestProducts(){
+    this.loader = true;
+    this.webService.get_data('getLatestPrdts').subscribe(response => {
+      if(response.status == 'success'){
+        this.latestProductData = response.data;
+      } else {
+        this.latestProductData = false;
+      }
+      this.loader = false;
+    });
+  }
+
+  trendingProducts(){
+    this.trend_loader = true;
+    this.webService.post_data('getTrendingPrdts',{'page':this.page}).subscribe(response => {
+      if(response.status == 'success'){
+        this.total_page = response.meta.total_pages;
+        this.trendingProductData = response.data;
+      } else {
+        this.trendingProductData = false;
+      }
+      this.trend_loader = false;
+    });
+  }
+
+  latestPrdtDtls(prdt_id){
+    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.navigateByUrl(path,{queryParams:data});
-    document.body.scrollTop = document.documentElement.scrollTop = 0;
+    this.router.navigate([path],{queryParams:  data});
+    document.body.scrollTop  =  document.documentElement.scrollTop  =  0;
   }
 
   carouselTileLoad(){ return ''; }

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,11 +38,11 @@ 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;
       }
-      console.log(this.productArray);
     });
   }
 

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.scss

@@ -91,7 +91,7 @@
             }
 
             .order_range{
-                height:200px;
+                height:207px;
                 padding-top: 20px;
                 width:30px;
                 float: left;
@@ -99,7 +99,7 @@
             .order_range_details{
                 float: left;
                 width:calc(100% - 30px);
-                height:200px;
+                height:221px;
                 padding-top: 20px;
                 padding-left: 20px;
                 position: relative;
@@ -107,19 +107,19 @@
                 span{
                     position: absolute;
                     &:nth-child(1) {
-                        top:8%;
-                      }
-    
-                      &:nth-child(2) {
-                        top:48%;
-                      }
-    
-                      &:nth-child(3) {
-                        bottom:0%;
-                      }
+                        top:7%;
+                    }
+                    &:nth-child(2) {
+                        top:32%;
+                    }
+                    &:nth-child(3) {
+                        top:57%;
+                    }
+                    &:nth-child(4) {
+                        top:82%;
+                    }
                 }
-               
-                  
+                 
                 h5{
                     margin:0px;
                     padding:0px;
@@ -133,7 +133,7 @@
             }
 
             .order_delivery_details{
-                padding-top: 30px;
+                padding-top: 55px;
                 padding-bottom: 30px;
                 .order_id{
                     color: #000000;

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,36 +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.imageServer  = ImageStorage; 
+      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(){
@@ -66,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'){
@@ -77,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;
@@ -87,6 +137,19 @@ export class TrackComponent implements OnInit {
             imageArr.push({small: image,medium: image,big: image});
           }
           this.galleryImages = imageArr;
+
+          if(this.orderDetails.odr_status === '2'){
+            this.verticalSlider2 = { minValue: 50, maxValue: 50, options: { floor: 0, ceil: 50, vertical: true } };
+          }
+          else if(this.orderDetails.odr_status ==='3'){
+            this.verticalSlider2 = { minValue: 50, maxValue: 76, options: { floor: 0, ceil: 76, vertical: true } };
+          }
+          else if(this.orderDetails.odr_status ==='4'){
+            this.verticalSlider2 = { minValue: 50, maxValue: 152, options: { floor: 0, ceil: 152, vertical: true } };
+          }
+          else if(this.orderDetails.odr_status === '5'){
+            this.verticalSlider2 = { minValue: 50, maxValue: 10000000, options: { floor: 0, ceil: 10000000, vertical: true } };
+          }
         }else{
           this.orderDetails = false;
           this.goToPage('purchaseHome','');
@@ -110,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: 50, maxValue: 100, options: { floor: 0, ceil: 100, 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'}