daily commit

src/app/home/index/index.component.html

@@ -316,22 +316,21 @@
                                         <div class="col-md-12">
                                             <div class="service_methods">
                                                 <ul>
-                                                    <!-- <div *ngFor="let issue_data of issuesData; let issue_id = index">
-                                                        {{issue_data}}
-                                                        <li data-toggle="collapse" data-target="#issue_{{issue_id}}">{{issue_data.issue_id}}</li>
-                                                        <div class="service_list collapse" id="issue_{{issue_id}}">
+                                                    <div *ngFor="let issue_data of issuesData">
+                                                        <li data-toggle="collapse" [attr.data-target]="'#issue_' + issue_data.issue_id">{{issue_data.issue}}</li>
+                                                        <div class="service_list collapse" [attr.id]="'issue_' + issue_data.issue_id">
                                                             <ul>
-                                                                <li *ngFor="let sub_issue_data of issue_data.sub_categories; let subIssueId = index">
+                                                                <li *ngFor="let sub_issue_data of issue_data.sub_categories">
                                                                     <button id="custom_check_button">
                                                                         <label>
-                                                                            <input id="{{subIssueId}}" type="checkbox" name="services" value="{{subIssueId}}">
+                                                                            <input type="checkbox" name="services" [attr.id]="'issue_' + issue_data.issue_id + '_' + sub_issue_data.issue_cat_id" [attr.issue_id]="issue_data.issue_id" [attr.sub_issue_id]="sub_issue_data.issue_cat_id" (click)="setIssueSelected($event)">
                                                                             <p>{{sub_issue_data.issue_category}}</p>
                                                                         </label>
                                                                     </button>
                                                                 </li>
                                                             </ul>
                                                         </div>
-                                                    </div> -->
+                                                    </div>
                                                 </ul>
                                             </div>
                                         </div>
@@ -390,10 +389,7 @@
                                         <div class="col-md-12">
                                             <div class="selected_services">
                                                 <ul>
-                                                    <li>EXHAUST<a>&times;</a></li>
-                                                    <li>TIRES<a>&times;</a></li>
-                                                    <li>FLUIDS<a>&times;</a></li>
-                                                    <li>BRAKES<a>&times;</a></li>
+                                                    <li *ngFor="let selIssue of selectedIssues">{{selIssue.issue_category}}<a (click)="removeSelectedItem(selIssue.issue_id,selIssue.sub_issue_id)">&times;</a></li>
                                                 </ul>
                                             </div>
                                         </div>

src/app/home/index/index.component.scss

@@ -369,7 +369,7 @@
                 text-transform: uppercase;
                 color: #1e1e1e;
                 font-weight: 600;
-                padding-bottom: 40px;
+                padding-bottom: 10px;
             }
             .facebook_btn {
                 background-color: #3b5998;

src/app/home/index/index.component.ts

@@ -6,6 +6,7 @@ import { MapsAPILoader } from '@agm/core';
 import { SubjectService } from '../../provider/subject.service';
 import { FormGroup, FormControl, Validators, ValidationErrors } from '@angular/forms';
 
+declare var $;
 declare const google: any;
 
 @Component({
@@ -40,6 +41,7 @@ export class IndexComponent implements OnInit {
   //Service  Details: TAB 3
   loader: boolean;
   issuesData: any;
+  selectedIssues: any[] = new Array();
 
   carModel: any;
   carSearchJsonData: any;
@@ -92,6 +94,43 @@ export class IndexComponent implements OnInit {
     this.carModel = this.carSearchJsonData[event].models;
   }
 
+  setIssueSelected(event){
+    let issue_id = event.target.attributes.issue_id.value;
+    let sub_issue_id = event.target.attributes.sub_issue_id.value;
+
+    let index = this.selectedIssues.findIndex(x => x.sub_issue_id == sub_issue_id);
+    if(index > -1){
+      this.selectedIssues.splice(index, 1);
+    } else {
+      const thisObj = this;
+      this.issuesData.forEach(function (issData) {
+        if(issData.issue_id == issue_id){
+          issData.sub_categories.forEach(function (subIssData) {
+            if(subIssData.issue_cat_id == sub_issue_id){
+              let issue = issData.issue, 
+                  issue_image = issData.issue_image,
+                  issue_category = subIssData.issue_category,
+                  issue_cat_image = subIssData.issue_cat_image,
+                  default_service_fee = subIssData.default_service_fee,
+                  default_description = subIssData.default_description;
+
+              thisObj.selectedIssues.push({issue_id,sub_issue_id,issue,issue_image,issue_category,issue_cat_image,default_service_fee,default_description});
+            }
+          });
+        }
+      }); 
+    }
+  }
+
+  removeSelectedItem(issue_id,sub_issue_id){
+    let index = this.selectedIssues.findIndex(x => x.sub_issue_id == sub_issue_id);
+    if(index > -1){
+      this.selectedIssues.splice(index, 1);
+
+      $('[id="issue_'+issue_id+'_'+sub_issue_id+'"]').prop('checked', false);
+    }
+  }
+
   getVehicleLoc(lastLoc){
     if(lastLoc == ''){
       this.searchLocError = true;
@@ -138,7 +177,6 @@ export class IndexComponent implements OnInit {
       this.loader = false;
       if(response.status == '1'){
         this.issuesData = response.issue_data;
-        console.log(this.issuesData);
       } else {
         this.router.navigate(["index"]);
       }