Cancel booking

Author: hoc081098

ng-app/package.json

@@ -8,7 +8,7 @@
     "test": "ng test",
     "lint": "ng lint",
     "e2e": "ng e2e",
-    "graphql": "gql-gen --schema http://localhost:3000/graphql --template graphql-codegen-apollo-angular-template --out src/app/generated/graphql.ts src/app/graphql/*.graphql"
+    "graphql": "gql-gen --schema http://localhost:3000/graphql --template graphql-codegen-apollo-angular-template --out src/app/graphql/generated/graphql.ts src/app/graphql/*.graphql"
   },
   "private": true,
   "dependencies": {

ng-app/src/app/app.module.ts

@@ -16,6 +16,8 @@ import { EventsItemComponent } from './events/events-list/events-item/events-ite
 import { GraphQLModule } from './graphql/graphql.module';
 import { CreateEventDialogComponent } from './events/create-event-dialog/create-event-dialog.component';
 import { EventDetailDialogComponent } from './events/events-list/event-detail-dialog/event-detail-dialog.component';
+import { BookingItemComponent } from './bookings/booking-item/booking-item.component';
+import { CancelBookingDialogComponent } from './bookings/cancel-booking-dialog/cancel-booking-dialog.component';
 
 @NgModule({
   declarations: [
@@ -26,7 +28,9 @@ import { EventDetailDialogComponent } from './events/events-list/event-detail-di
     EventsListComponent,
     EventsItemComponent,
     CreateEventDialogComponent,
-    EventDetailDialogComponent
+    EventDetailDialogComponent,
+    BookingItemComponent,
+    CancelBookingDialogComponent
   ],
   imports: [
     BrowserModule,
@@ -38,6 +42,10 @@ import { EventDetailDialogComponent } from './events/events-list/event-detail-di
   ],
   providers: [AuthService, EventsService],
   bootstrap: [AppComponent],
-  entryComponents: [EventDetailDialogComponent, CreateEventDialogComponent]
+  entryComponents: [
+    EventDetailDialogComponent,
+    CreateEventDialogComponent,
+    CancelBookingDialogComponent,
+  ],
 })
-export class AppModule {}
+export class AppModule { }

ng-app/src/app/auth/auth.service.ts

@@ -2,8 +2,8 @@ import { Injectable } from '@angular/core';
 import { Observable, BehaviorSubject } from 'rxjs';
 import { ApolloQueryResult } from 'apollo-client';
 import { tap, map, shareReplay } from 'rxjs/operators';
-import { LoginGQL, Login, CreateUserGQL } from '../generated/graphql';
 import { Apollo } from 'apollo-angular';
+import { CreateUserGQL, LoginGQL, Login } from '../graphql/generated/graphql';
 
 export const AUTH_KEY = 'AUTH_KEY';
 

ng-app/src/app/bookings/booking-item/booking-item.component.css

@@ -0,0 +1,15 @@
+<mat-card>
+  <mat-card-header>
+    <mat-card-title>
+      {{ booking.event.title }}
+    </mat-card-title>
+    <mat-card-subtitle>
+      Booked at {{ booking.createdAt | date: 'medium' }}
+    </mat-card-subtitle>
+  </mat-card-header>
+  <mat-card-actions>
+    <button mat-button color="primary" (click)="clickCancel.emit(booking)">
+      Cancel
+    </button>
+  </mat-card-actions>
+</mat-card>

ng-app/src/app/bookings/booking-item/booking-item.component.html

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BookingItemComponent } from './booking-item.component';
+
+describe('BookingItemComponent', () => {
+  let component: BookingItemComponent;
+  let fixture: ComponentFixture<BookingItemComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ BookingItemComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(BookingItemComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

ng-app/src/app/bookings/booking-item/booking-item.component.spec.ts

@@ -0,0 +1,21 @@
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { Bookings } from 'src/app/graphql/generated/graphql';
+
+@Component({
+  selector: 'app-booking-item',
+  templateUrl: './booking-item.component.html',
+  styleUrls: ['./booking-item.component.css']
+})
+export class BookingItemComponent implements OnInit {
+  @Input()
+  booking: Bookings.Bookings;
+
+  @Output()
+  clickCancel = new EventEmitter<Bookings.Bookings>();
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

ng-app/src/app/bookings/booking-item/booking-item.component.ts

@@ -0,0 +1,15 @@
+.bookings-list {
+  padding: 0;
+  max-width: 90%;
+  width: 40rem;
+  margin: 2rem auto;
+}
+
+.progress {
+  display: inline-block;
+}
+
+.progress-wrapper {
+  margin-top: 20px;
+  text-align: center;
+}

ng-app/src/app/bookings/bookings.component.css

@@ -1 +1,10 @@
-<p>bookings works!</p>
+<div *ngIf="isLoading" class="progress-wrapper">
+  <mat-spinner [diameter]="50" [color]="'accent'" class="progress">
+  </mat-spinner>
+</div>
+
+<div *ngIf="bookings$ | async as bookings">
+  <div *ngFor="let booking of bookings" class="bookings-list">
+    <app-booking-item [booking]="booking" (clickCancel)="showCancelBookingsDialog($event)"></app-booking-item>
+  </div>
+</div>

ng-app/src/app/bookings/bookings.component.html

@@ -1,15 +1,41 @@
 import { Component, OnInit } from '@angular/core';
+import { Bookings } from '../graphql/generated/graphql';
+import { BookingsService } from './bookings.service';
+import { Observable, BehaviorSubject } from 'rxjs';
+import { tap } from 'rxjs/operators';
+import { MatDialog } from '@angular/material';
+import { CancelBookingDialogComponent } from './cancel-booking-dialog/cancel-booking-dialog.component';
 
 @Component({
   selector: 'app-bookings',
   templateUrl: './bookings.component.html',
   styleUrls: ['./bookings.component.css']
 })
 export class BookingsComponent implements OnInit {
+  isLoading = true;
+  bookings$: Observable<Bookings.Bookings[]>;
 
-  constructor() { }
+  constructor(
+    private readonly bookingsService: BookingsService,
+    private readonly dialog: MatDialog,
+  ) { }
 
   ngOnInit() {
+    console.log('[BOOKINGS_COMPONENT] onInit');
+    this.bookings$ = this.bookingsService.getAllBookings$().pipe(
+      tap(() => this.isLoading = false)
+    );
   }
 
+  showCancelBookingsDialog(booking: Bookings.Bookings) {
+    console.log(booking);
+    const dialogRef = this.dialog.open(CancelBookingDialogComponent, {
+      width: '30rem',
+      data: booking
+    });
+
+    dialogRef.afterClosed().subscribe(result => {
+      console.log('The dialog was closed ', result);
+    });
+  }
 }