update outlet bookmark API connection and UI

src/app/mall-details/mall-details.page.html

@@ -11,7 +11,7 @@
             <div class="stat"> <ion-icon name="pin"></ion-icon> {{ mallDetails.mall.mall_distance }} km</div>
         </div>
         <div class="utilities-buttons-holder">
-            <button [ngClass]="{'active' : mallDetails.mall.is_bookmarked }"> <ion-icon name="bookmark"></ion-icon> </button>
+            <button [ngClass]="{'active' : mallDetails.mall.is_bookmarked }" (click)="toggleMallBookmark()"> <ion-icon name="bookmark"></ion-icon> </button>
             <button (click)="shareMallDetails(mallDetails)"> <ion-icon name="share"></ion-icon> </button>
             <a target="_blank" href="https://maps.google.com/?q={{ mallDetails.latitude }},{{ mallDetails.longitude }}">
                 <ion-icon name="navigate"></ion-icon>
@@ -26,7 +26,7 @@
                 <button (click)="back()"> <ion-icon name="arrow-back"></ion-icon> </button>
             </div>
             <div class="action-buttons-holder">
-                <button [ngClass]="{'active' : mallDetails.mall.is_bookmarked }">
+                <button [ngClass]="{'active' : mallDetails.mall.is_bookmarked }" (click)="toggleMallBookmark()">
                     <ion-icon name="bookmark"></ion-icon>
                 </button>
                 <button (click)="shareMallDetails(mallDetails)"> <ion-icon name="share"></ion-icon> </button>
@@ -64,12 +64,15 @@
         <ion-item *ngFor="let outlet of mallDetails.mall.outlet">
             <img src="{{ outlet.image_url }}" slot="start">
             <ion-label>
-                <h3 (click)="outletDetails(outlet)">
-                    {{ outlet.outlet_name }}
+                <h3>
+                    <div (click)="outletDetails(outlet)">
+                        {{ outlet.outlet_name }}
+                    </div>
                     <div class="rating-holder">
                         <ion-icon name="star"></ion-icon> {{ outlet.rating }}
                     </div>
-                    <ion-icon name="bookmark" [ngClass]="{'active' : outlet.is_bookmarked }"></ion-icon>
+                    <ion-icon name="bookmark" [ngClass]="{'active' : outlet.is_bookmarked }"
+                    (click)="toggleOutletBookmark(outlet)"></ion-icon>
                 </h3>
                 <p class="description">
                     <span (click)="outletDetails(outlet)"> {{ outlet.description }} </span>                    

src/app/mall-details/mall-details.page.ts

@@ -1,6 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { Location } from '@angular/common';
+import { MallService } from '../services/mall.service';
 
 @Component({
     selector: 'app-mall-details',
@@ -17,13 +18,25 @@ export class MallDetailsPage implements OnInit {
     constructor(
         private route: ActivatedRoute,
         private router: Router,
-        private location: Location
+        private location: Location,
+        private mallService: MallService
     ) { }
 
     ngOnInit() {
         this.mallDetails = JSON.parse(this.route.snapshot.paramMap.get('mall'));
     }
 
+    toggleOutletBookmark(outlet) {
+        outlet.is_bookmarked = !outlet.is_bookmarked;
+        this.mallService.updateOutlet(outlet);
+    }
+
+    toggleMallBookmark() {
+        this.mallDetails.mall.is_bookmarked = !this.mallDetails.mall.is_bookmarked;
+        console.log(this.mallDetails);
+        this.mallService.updateMallData(this.mallDetails);
+    }
+
     back() {
         this.location.back();
     }

src/app/outlet-details/outlet-details.page.html

@@ -14,7 +14,8 @@
 			</div>
 		</div>
 		<div class="utilities-buttons-holder">
-			<button [ngClass]="{'active' : outlet_details.is_bookmarked }">
+            <button [ngClass]="{'active' : outlet_details.is_bookmarked }"
+            (click)="toggleOutletBookmark()">
 				<ion-icon name="bookmark"></ion-icon>
 			</button>
 			<button (click)="shareOutletDetails()">
@@ -32,7 +33,7 @@
 				</button>
 			</div>
 			<div class="action-buttons-holder">
-				<button [ngClass]="{'active' : outlet_details.is_bookmarked }" (click)="toggleBookmark()">
+				<button [ngClass]="{'active' : outlet_details.is_bookmarked }" (click)="toggleOutletBookmark()">
 					<ion-icon name="bookmark"></ion-icon>
 				</button>
 				<button (click)="shareOutletDetails()">

src/app/outlet-details/outlet-details.page.ts

@@ -3,6 +3,7 @@ import { ActivatedRoute, Router } from '@angular/router';
 import { Location } from '@angular/common';
 import { ICart } from '../cart/cart.page';
 import * as moment from 'moment';
+import { MallService } from '../services/mall.service';
 
 @Component({
     selector: 'app-outlet-details',
@@ -28,10 +29,16 @@ export class OutletDetailsPage implements OnInit {
         private route: ActivatedRoute,
 		private router: Router,
         private location: Location,
+        private mallService: MallService
     ) { }
 
     ngOnInit() { }
 
+    toggleOutletBookmark() {
+        this.outlet_details.is_bookmarked = !this.outlet_details.is_bookmarked;
+        this.mallService.updateOutlet(this.outlet_details);
+    }
+
     shareOutletDetails() {
         if (window.navigator && window.navigator['share']) {
             const shareData = {

src/app/services/mall.service.ts

@@ -60,5 +60,18 @@ export class MallService {
 		};
 
 		return await this.http.put(URL + '/api/maioraservice/mall/v1/update/', mallData.mall , httpOptions).toPromise();
+    }
+    
+
+    async updateOutlet(outletData: any) {
+		const httpOptions = {
+			headers: new HttpHeaders({
+				'Access-Control-Allow-Origin': '*',
+				'Content-Type': 'application/json',
+				'Authorization': 'Bearer ' + localStorage.access_Token
+			})
+		};
+
+		return await this.http.put(URL + '/api/maioraservice/outlet/v1/update/', outletData , httpOptions).toPromise();
 	}
 }