12.15 Deleting Bookings

Author: webdevtut

src/app/bookings/booking.service.ts

@@ -71,15 +71,21 @@ export class BookingService {
   }
 
   cancelBooking(bookingId: string) {
-    return this.bookings.pipe(
-      take(1),
-      delay(1000),
-      tap((bookings) => {
-        this._bookings.next(
-          bookings.filter((booking) => booking.id !== bookingId)
-        );
-      })
-    );
+    return this.http
+      .delete(
+        `https://ionic-angular-backend-66c35-default-rtdb.asia-southeast1.firebasedatabase.app/bookings/${bookingId}.json`
+      )
+      .pipe(
+        switchMap(() => {
+          return this.bookings;
+        }),
+        take(1),
+        tap((bookings) => {
+          this._bookings.next(
+            bookings.filter((booking) => booking.id !== bookingId)
+          );
+        })
+      );
   }
 
   fetchBookings() {

src/app/bookings/bookings.page.html

@@ -23,12 +23,15 @@
         <ion-list>
           <ion-item-sliding *ngFor="let booking of loadedBookings" #slidingBooking>
             <ion-item>
+              <ion-avatar slot="start">
+                <ion-img [src]="booking.placeImage"></ion-img>
+              </ion-avatar>
               <ion-label>
                 <h5>{{booking.placeTitle}}</h5>
                 <p>Guest: {{booking.guestnumber}}</p>
               </ion-label>
             </ion-item>
-            <ion-item-options side="start">
+            <ion-item-options side="end">
               <ion-item-option color="danger" (click)="onCancelBooking(booking.id, slidingBooking)">
                 <ion-icon name="trash" slot="icon-only"></ion-icon>
               </ion-item-option>