dc- appontment details and service history

src/app/home/dashboard/dashboard.component.scss

@@ -95,7 +95,7 @@
             .dashboard_tab_content {
                 padding-bottom: 80px;
 
-                #quote_list{
+                .quote_list_table{
                     background: darkgray;
                     thead {
                         
@@ -107,12 +107,51 @@
                                 font-weight: 400;
                                 padding: 5px;
                                 padding-left:20px;
+                                &:nth-child(1){
+                                    width:20%;
+                                }
+                                &:nth-child(2){
+                                    width:20%;
+                                }
+                                &:nth-child(3){
+                                    width:10%;
+                                }
+                                &:nth-child(4){
+                                    width:20%;
+                                }
+                                &:nth-child(5){
+                                    width:10%;
+                                }
+                                &:nth-child(6){
+                                    width:20%;
+                                }
                             }
                         }
                     }
                     
                     tbody {
-                        
+                        tr{
+                            td{
+                                &:nth-child(1){
+                                    width:20%;
+                                }
+                                &:nth-child(2){
+                                    width:20%;
+                                }
+                                &:nth-child(3){
+                                    width:10%;
+                                }
+                                &:nth-child(4){
+                                    width:20%;
+                                }
+                                &:nth-child(5){
+                                    width:10%;
+                                }
+                                &:nth-child(6){
+                                    width:20%;
+                                }
+                            }
+                        }
                     }
                 }
                 table {

src/app/home/dashboard/dashboard.component.ts

@@ -20,28 +20,31 @@ declare const google: any;
 export class DashboardComponent implements OnInit {
   tab: any;
   loader: boolean;
+  carModel: any;
   imageUrl: any;
   user_name: string;
   vehDetails: any;
   testMilage: any = '';
   errMessage: any;
+  modelDates: number[] = new Array();
+  monthArray: any[] = new Array(12);
   editProfile;
   loginDetails: any;
   selectedFile: File;
   profile_image: any;
+  mechCustQuote: number[] = new Array();
+  confirmParam: string = '';
+  confirmCallBak: string = '';
+  cfautocomplete: any;
   searchLocError: boolean;
   bookingDetails: any;
   successBookDtls: any;
   profileEditResp: any;
   autocompleteVin: any;
+  carSearchJsonData: any;
   autocompleteDetails: any;
-  editProfileSubmitClick: boolean;
   optionalDescription: string;
-  cfautocomplete: any;
-  carModel: any;
-  modelDates: number[] = new Array();
-  monthArray: any[] = new Array(12);
-  carSearchJsonData: any;
+  editProfileSubmitClick: boolean;
 
   vehicleVinAddForm;
   vehicleVinFormSubmitClick;
@@ -90,6 +93,7 @@ export class DashboardComponent implements OnInit {
   //minRoute:any;
 
   @ViewChild("closeWizard") public closeWizardRef: ElementRef;
+  @ViewChild("confirmModal") public confirmModalRef: ElementRef;
   @ViewChild("googleLocVin") public googleLocVinRef: ElementRef;
   @ViewChild("goTostep1") public goTostep1Ref: ElementRef;
   @ViewChild("step2nextBtn") public step2nextRef: ElementRef;
@@ -206,7 +210,7 @@ export class DashboardComponent implements OnInit {
     this.webService.post_data('getCustBookDetails', {'customer_id':this.loginDetails.customer_id}).subscribe(response => {
       if ( response.status == '1' && response.bookData != 'undefined' && response.bookData != undefined && response.bookData != 'null' && response.bookData != null ) {
         let bookings = response.bookData;
-
+        console.log(bookings)
         let successBooking: any[] = new Array();
         let bookingDetails: any[] = new Array();
 
@@ -460,19 +464,9 @@ export class DashboardComponent implements OnInit {
     });
   }
 
-  cancelBooking(bookingId){
-    this.loader = true;
-    this.webService.post_data('cancelBooking', {'customer_id':this.loginDetails.customer_id,'booking_id':bookingId}).subscribe(response => {
-      if ( response.status == '1' ) {
-        this.getCustBookDetails();
-        this.loader = false;
-      }
-    });
-  }
-
-  deleteCustomerCar(customer_id,customer_veh_id){
+  deleteCustomerCar(params){
     this.loader = true;
-    this.webService.post_data('deleteCustomerCar', {'customer_id':customer_id,'customer_veh_id':customer_veh_id}).subscribe(response => {
+    this.webService.post_data('deleteCustomerCar', params).subscribe(response => {
       if ( response.status == '1' ) {
         this.getCustVehDetails();
         this.loader = false;
@@ -791,6 +785,100 @@ export class DashboardComponent implements OnInit {
     this.optionalDescription = '';
   }
 
+  showCustQuote(booking_id,mechanic_id,type){
+    if(!booking_id || !mechanic_id){
+      return false;
+    }
+    this.loader = true;
+    const thisObj= this;
+    
+    if(type == '2'){
+      thisObj.successBookDtls = this.bookingDetails;
+    }
+    thisObj.successBookDtls.forEach(function (data,index) {
+      if(data.booking_id == booking_id){
+       // let bookdata = data;
+        data.mechanic_data.forEach(function (mechdata,mechindex) {
+          if(mechdata.mechanic_id == mechanic_id){
+            let mechdatadetails = mechdata;
+            thisObj.mechCustQuote = mechdatadetails.custom_service_quote;
+          }
+        })
+      }
+    });
+    this.loader = false;
+  }
+
+  cancelBooking(booking: any){
+    let bookingId: number;
+    if(!booking.bookingId){
+      return false;
+    }
+    bookingId = booking.bookingId;
+
+    this.loader = true;
+    this.webService.post_data('cancelBooking', {'customer_id':this.loginDetails.customer_id,'booking_id':bookingId}).subscribe(response => {
+      if ( response.status == '1' ) {
+        this.getCustBookDetails();
+        this.loader = false;
+      }
+    });
+  }
+
+  mechanicQuoteAccept(booking_id,mechanic_id){
+    if(!booking_id || !mechanic_id){
+      return false;
+    }
+
+    this.showConfirmPopUp('acceptQuote',{bookingId:booking_id,mechanicId:mechanic_id});
+  }
+
+  cnfCancelBook(booking_id){
+    if(!booking_id){
+      return false;
+    }
+    this.showConfirmPopUp('cancelBooking',{bookingId:booking_id});
+  }
+
+  cnfdeleteCustomerCar(customer_id,vehicle_id){
+    if(!customer_id || !vehicle_id){
+      return false;
+    }
+    this.showConfirmPopUp('deleteCustomerCar',{'customer_id':customer_id,'customer_veh_id':vehicle_id});
+  }
+
+  showConfirmPopUp(fn_name: string, param: any){
+    if(fn_name === ''){
+      return false;
+    }
+    if(param){
+      param = JSON.stringify(param);
+    }
+    this.confirmParam = param;
+    this.confirmCallBak = fn_name;
+    this.confirmModalRef.nativeElement.click();
+  }
+
+  confirmCallBack(fn_name: string,param: string){
+    if(fn_name === '' || !this[fn_name]){
+      return false;
+    }
+    if(param !== ''){
+      param = JSON.parse(param);
+      this[fn_name](param);
+    } else {
+      this[fn_name]();
+    }
+  }
+
+  acceptQuote(param: any){
+    this.webService.post_data('acceptMechanicQuote',param).subscribe(response => {
+      if(response.status == 'success'){
+        this.getCustBookDetails();
+      }
+    })
+  }
+
   scrollToTop(id){
     $('#'+id).stop().animate({scrollTop: 0}, 800);
   }

src/styles.scss

@@ -205,6 +205,10 @@ body {
     background: #D94350;
 }
 
+.background_transparent{
+    background-color: transparent !important;
+}
+
 .tile {
     box-shadow: none !important;
 }
@@ -601,4 +605,15 @@ bs-datepicker-container{
     }
 }
 
+.confirm_modal_content{
+    width: 300px;
+    background: #fff;
+    border-radius: 10px;
+    margin: 0 auto;
+    padding: 15px;
+    button{
+        margin:5px;
+    }
+}
+