From 65b80a6233d68c1bd198062cc35d9d604b330074 Mon Sep 17 00:00:00 2001 From: Chingaipe Date: Mon, 13 Aug 2018 19:14:11 -0700 Subject: [PATCH 1/2] Adding event date to event list table: Done. Solving part of issue #20 --- .../src/app/components/view-all/view-all.component.html | 4 ++-- server/app/Http/Controllers/EventController.php | 8 +++++++- 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/client/src/app/components/view-all/view-all.component.html b/client/src/app/components/view-all/view-all.component.html index e5aafff..4ebb450 100644 --- a/client/src/app/components/view-all/view-all.component.html +++ b/client/src/app/components/view-all/view-all.component.html @@ -19,7 +19,7 @@
All bookings
# Event name - Dates + Next event date Actions @@ -34,7 +34,7 @@
All bookings
{{ evnt.name }} - Dates + {{ evnt.bookings[0].start_date | date: 'mediumDate' }} Edit | diff --git a/server/app/Http/Controllers/EventController.php b/server/app/Http/Controllers/EventController.php index 9915731..51052ba 100644 --- a/server/app/Http/Controllers/EventController.php +++ b/server/app/Http/Controllers/EventController.php @@ -43,7 +43,13 @@ public function store(Request $request) */ public function index() { - $events = Event::all(); + // $events = Event::all(); + + // query to retreive event and its bookings + $events = Event::with(['bookings' => function($query) { + $query->latest(); // orders the bookings in desc order(most rest first) + }])->orderBy('created_at', 'desc')->get(); + $response = [ 'events' => $events ]; From 71aa8362c3c26c2c6c8795defe2c3fe884a17b52 Mon Sep 17 00:00:00 2001 From: Chingaipe Date: Tue, 21 Aug 2018 18:57:27 -0700 Subject: [PATCH 2/2] Rooms module added to the app including CRUD functionality --- client/src/app/app.module.ts | 7 +- .../app/components/rooms/rooms.component.css | 7 + .../app/components/rooms/rooms.component.html | 107 ++++++++++++ .../components/rooms/rooms.component.spec.ts | 25 +++ .../app/components/rooms/rooms.component.ts | 153 ++++++++++++++++++ .../sidemenu/sidemenu.component.html | 6 + .../view-details/view-details.component.html | 14 ++ .../view-details/view-details.component.ts | 3 + .../src/app/services/event-service.service.ts | 3 +- client/src/app/services/rooms.service.spec.ts | 15 ++ client/src/app/services/rooms.service.ts | 55 +++++++ client/src/index.html | 2 +- .../app/Http/Controllers/EventController.php | 3 +- 13 files changed, 395 insertions(+), 5 deletions(-) create mode 100644 client/src/app/components/rooms/rooms.component.css create mode 100644 client/src/app/components/rooms/rooms.component.html create mode 100644 client/src/app/components/rooms/rooms.component.spec.ts create mode 100644 client/src/app/components/rooms/rooms.component.ts create mode 100644 client/src/app/services/rooms.service.spec.ts create mode 100644 client/src/app/services/rooms.service.ts diff --git a/client/src/app/app.module.ts b/client/src/app/app.module.ts index 99dbed2..e3e8fb2 100644 --- a/client/src/app/app.module.ts +++ b/client/src/app/app.module.ts @@ -27,10 +27,12 @@ import { LoadingSpinnerComponent } from './components/loading-spinner/loading-sp import { AddBookinComponent } from './components/add-bookin/add-bookin.component'; import { UtilsService } from './services/utils.service'; import { AuthServiceService } from './services/auth-service.service'; +import { RoomsService } from './services/rooms.service'; import { SignupComponent } from './components/signup/signup.component'; import { CalendarModule } from 'angular-calendar'; import { CalendarComponent } from './components/calendar/calendar.component'; import { InterceptorService } from './services/interceptor.service'; +import { RoomsComponent } from './components/rooms/rooms.component'; // routing links const appRoutes: Routes = [ @@ -58,6 +60,7 @@ const appRoutes: Routes = [ { path: 'edit-event/:id', component: EditBookingComponent, canActivate: [AuthGuard] }, { path: 'view-details/:id', component: ViewDetailsComponent, canActivate: [AuthGuard] }, { path: 'new-bookin/:evnt_id', component: AddBookinComponent, canActivate: [AuthGuard] }, + { path: 'rooms', component: RoomsComponent, canActivate: [AuthGuard] }, { path: 'register', component: SignupComponent } ] } @@ -79,7 +82,8 @@ const appRoutes: Routes = [ LoadingSpinnerComponent, AddBookinComponent, SignupComponent, - CalendarComponent + CalendarComponent, + RoomsComponent ], imports: [ BrowserModule, @@ -98,6 +102,7 @@ const appRoutes: Routes = [ UtilsService, AuthServiceService, AuthGuard, + RoomsService, { provide: HTTP_INTERCEPTORS, useClass: InterceptorService, diff --git a/client/src/app/components/rooms/rooms.component.css b/client/src/app/components/rooms/rooms.component.css new file mode 100644 index 0000000..6e288d5 --- /dev/null +++ b/client/src/app/components/rooms/rooms.component.css @@ -0,0 +1,7 @@ + +app-loading-spinner { + width: 150px; + position: absolute; + top: 50%; + left: 40%; +} \ No newline at end of file diff --git a/client/src/app/components/rooms/rooms.component.html b/client/src/app/components/rooms/rooms.component.html new file mode 100644 index 0000000..8aa0445 --- /dev/null +++ b/client/src/app/components/rooms/rooms.component.html @@ -0,0 +1,107 @@ +
+

Rooms & Spaces

+ +
+ +
+
+ +
Manage your available booking rooms and spaces here.

+
+ + + + + + + + + + + + + + + + + + + + + + +
#Name of RoomActions
{{ room.id }} + {{ room.name }} + + + | + + + + +
+
Confirm Deletion
+ +
+
+

Are you sure you want to delete this room (Name: {{ room.name }}) permanently?

+
+
+ + +
+ +
+ + + +
+
Create Booking Room
+ +
+ +
+
+
+ + +
+
+
+
+ + +
+ + + + + +
+
Edit Booking Room Details
+ +
+
+
+
+ + +
+
+
+
+ + +
+ + +
diff --git a/client/src/app/components/rooms/rooms.component.spec.ts b/client/src/app/components/rooms/rooms.component.spec.ts new file mode 100644 index 0000000..23221e4 --- /dev/null +++ b/client/src/app/components/rooms/rooms.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { RoomsComponent } from './rooms.component'; + +describe('RoomsComponent', () => { + let component: RoomsComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ RoomsComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(RoomsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/client/src/app/components/rooms/rooms.component.ts b/client/src/app/components/rooms/rooms.component.ts new file mode 100644 index 0000000..dc991fa --- /dev/null +++ b/client/src/app/components/rooms/rooms.component.ts @@ -0,0 +1,153 @@ +import { Component, OnInit } from '@angular/core'; +import { NgbModal } from '@ng-bootstrap/ng-bootstrap'; +import { RoomsService } from '../../services/rooms.service'; +import { FlashMessagesService } from 'ngx-flash-messages'; +import { Router } from '@angular/router'; + +@Component({ + selector: 'app-rooms', + templateUrl: './rooms.component.html', + styleUrls: ['./rooms.component.css'] +}) +export class RoomsComponent implements OnInit { + + rooms: any; + showSpinner = true; // shows the loader + + // form variable + name: string; + nm: string; + + constructor( + private roomService: RoomsService, + private modalService: NgbModal, + private flashMessages: FlashMessagesService, + private router: Router + ) { } + + ngOnInit() { + this.getRooms(); + } + + /** + * Gets all rooms from the DB + */ + getRooms() { + this.roomService.getAllRooms().subscribe(data => { + this.showSpinner = false; // stops showing the spinner + + this.rooms = data['rooms']; + }, + err => { console.log(err); }); // logs error + } + + /** + * Opens and displays the room-form modal + * @param content this is the template reference variable of the delete modal + */ + openForm(content) { + this.modalService.open(content).result.then((result) => { // result can contain form obj or string depending on the button clicked + // check if form have been sent or not + if (result.name !== undefined) { + this.onSubmit(result); // submit to database + } + }); + } + + /** + * Opens and displays the room-form modal + * @param content this is the template reference variable of the delete modal + */ + openEdit(content, room) { + this.modalService.open(content).result.then((result) => { + if (result !== undefined) { + // console.log(result); + this.updateRoom(room.id, result); + } else { + console.log('Cancelled!!!!'); + } + }); + + this.name = room.name; // inistializes the room name for edit + } + + /** + * Opens and displays the delete modal + * @param content this is the template reference variable of the delete modal + */ + openDelete(content) { + this.modalService.open(content).result.then((result) => { + // TODO: Find better implementation, if any + if (result !== undefined) { + this.deleteRoom(result); // calls actually delete function + } + }); + } + + /** + * Submits a user-input data into the database + * @param data user input on the room details + */ + onSubmit(data) { + this.roomService.storeRoom(data).subscribe( + result => { + this.getRooms(); + + this.nm = ''; + + this.flashMessages.show('Room has been successfully created', { + classes: ['alert', 'alert-success'], + timeout: 3000 + }); + }, + err => { console.log(err); } + ); + } + + /** + * Updates the room details + * @param id ID of the room being edited + * @param room Data from the edit form + */ + updateRoom(id, room) { + this.roomService.updateRoom(id, room).subscribe( + data => { + this.flashMessages.show('Details have been successfully updated.', { + classes: ['alert', 'alert-success'], + timeout: 3000 + }); + + // TODO: find better implementation for updating UI on update + this.getRooms(); // poorman's refresh + }, + err => { console.log(err); } + ); + } + + /** + * Deletes a booking room from the DB + * @param id of the room being deleted + */ + deleteRoom(id) { + console.log(id); + this.roomService.deleteRoom(id).subscribe( + data => { + this.flashMessages.show('Room has been successfully deleted', { + classes: ['alert', 'alert-success'], + timeout: 3000 + }); + + // TODO: find better implementation for updating UI on update + this.getRooms(); + }, + err => { + this.flashMessages.show('Oops! An error occurred, please try again later.', { + classes: ['alert', 'alert-warning'], + timeout: 3000 + }); + console.log(err); + } + ); + } + +} diff --git a/client/src/app/components/sidemenu/sidemenu.component.html b/client/src/app/components/sidemenu/sidemenu.component.html index d02a378..49757cd 100644 --- a/client/src/app/components/sidemenu/sidemenu.component.html +++ b/client/src/app/components/sidemenu/sidemenu.component.html @@ -25,6 +25,12 @@
{{ getUsername() }}
New Booking +
  • + + + Rooms/ Spaces + +
  • diff --git a/client/src/app/components/view-details/view-details.component.html b/client/src/app/components/view-details/view-details.component.html index d5651ed..36b5d4f 100644 --- a/client/src/app/components/view-details/view-details.component.html +++ b/client/src/app/components/view-details/view-details.component.html @@ -103,6 +103,14 @@

    Edit Booking

    + +
    + + +
    @@ -147,6 +155,12 @@
    Booking Details
    {{ booking.end_time }}
    {{ booking.start_date}}
    {{ booking.end_date }}
    +
    + +
      +
    • {{ room.name }}
      • +
    +
    diff --git a/client/src/app/components/view-details/view-details.component.ts b/client/src/app/components/view-details/view-details.component.ts index dd7b232..6cc7f1f 100644 --- a/client/src/app/components/view-details/view-details.component.ts +++ b/client/src/app/components/view-details/view-details.component.ts @@ -19,6 +19,7 @@ export class ViewDetailsComponent implements OnInit { evnt: any; // holds the event specific info bookings: any; // holds the booking info for a specific event showSpinner = true; + rooms: any; // form variables startDate: NgbDateStruct; // <- custom type acceptable for use in datepicker comp @@ -40,6 +41,8 @@ export class ViewDetailsComponent implements OnInit { this.id = this.route.snapshot.params['id']; // retrievs id from the url // fetches data from db this.getEvent(this.id); + + this.rooms = this.utilService.loadRooms(); // loads rooms } /** diff --git a/client/src/app/services/event-service.service.ts b/client/src/app/services/event-service.service.ts index 9e05dc9..25aa5f8 100644 --- a/client/src/app/services/event-service.service.ts +++ b/client/src/app/services/event-service.service.ts @@ -10,8 +10,7 @@ export class EventServiceService { contentHeaders = new HttpHeaders({'Content-Type': 'application/json'}); constructor( - private http: HttpClient, - private authService: AuthServiceService + private http: HttpClient ) { } /** diff --git a/client/src/app/services/rooms.service.spec.ts b/client/src/app/services/rooms.service.spec.ts new file mode 100644 index 0000000..0373e89 --- /dev/null +++ b/client/src/app/services/rooms.service.spec.ts @@ -0,0 +1,15 @@ +import { TestBed, inject } from '@angular/core/testing'; + +import { RoomsService } from './rooms.service'; + +describe('RoomsService', () => { + beforeEach(() => { + TestBed.configureTestingModule({ + providers: [RoomsService] + }); + }); + + it('should be created', inject([RoomsService], (service: RoomsService) => { + expect(service).toBeTruthy(); + })); +}); diff --git a/client/src/app/services/rooms.service.ts b/client/src/app/services/rooms.service.ts new file mode 100644 index 0000000..ef72c64 --- /dev/null +++ b/client/src/app/services/rooms.service.ts @@ -0,0 +1,55 @@ +import { Injectable } from '@angular/core'; +import { HttpClient, HttpHeaders } from '@angular/common/http'; + +@Injectable() +export class RoomsService { + + // baseURL = 'https://agora-booking-system.herokuapp.com/api/rooms/'; + baseURL = 'http://127.0.0.1:8000/api/rooms/'; + contentHeaders = new HttpHeaders({'Content-Type': 'application/json'}); + + constructor( + private http: HttpClient + ) { } + + /** + * Get all the rooms + */ + getAllRooms() { + return this.http.get(this.baseURL + 'all'); + } + + /** + * Get particalur room + */ + getRoom(id) { + return this.http.get(this.baseURL + id); + } + + /** + * Saves an room into the db + * @param data the room input data + */ + storeRoom(data) { + return this.http.post(this.baseURL, data, {headers: this.contentHeaders}); + } + + /** + * Updates a rooom + * @param room_id room id to be updated + * @param data the updated input data + */ + updateRoom(room_id, data) { + return this.http.put(this.baseURL + room_id, data, {headers: this.contentHeaders}); + } + + /** + * Deletes a room + * @param room_id the event's id + */ + deleteRoom(room_id) { + return this.http.delete(this.baseURL + room_id); + } + + +} diff --git a/client/src/index.html b/client/src/index.html index a210531..a822653 100644 --- a/client/src/index.html +++ b/client/src/index.html @@ -2,7 +2,7 @@ - GPZ | Booking + Agora Booking System diff --git a/server/app/Http/Controllers/EventController.php b/server/app/Http/Controllers/EventController.php index 51052ba..a06a834 100644 --- a/server/app/Http/Controllers/EventController.php +++ b/server/app/Http/Controllers/EventController.php @@ -65,9 +65,10 @@ public function index() */ public function select(Event $event) { + $bookings = $event->bookings()->get(); $response = [ 'event' => $event, - 'bookings' => $event->bookings()->get() // to get only 1 add ==> orderBy('created_at', 'desc')->first()o + 'bookings' => $bookings->load('rooms:name') // gets a booking and its rooms ]; return response($response, 200);