-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #14 from agora-code-community/master
Room Module
- Loading branch information
Showing
14 changed files
with
405 additions
and
9 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
|
|
||
| app-loading-spinner { | ||
| width: 150px; | ||
| position: absolute; | ||
| top: 50%; | ||
| left: 40%; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,107 @@ | ||
| <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom"> | ||
| <h1 class="h2">Rooms & Spaces</h1> | ||
|
|
||
| <div class="btn-toolbar mb-2 mb-md-0"> | ||
| <button class="btn btn-sm btn-outline-primary" (click)="openForm(formContent)"> | ||
| <i class="fa fa-plus"></i> | ||
| Create New Room | ||
| </button> | ||
| </div> | ||
| </div> | ||
|
|
||
| <h6>Manage your available booking rooms and spaces here.</h6> <br> | ||
| <div class="table-responsive"> | ||
| <table class="table table-striped table-sm"> | ||
| <thead> | ||
| <tr> | ||
| <th>#</th> | ||
| <th>Name of Room</th> | ||
| <!-- <th>Capacity</th> --> | ||
| <th>Actions</th> | ||
| </tr> | ||
| </thead> | ||
|
|
||
| <app-loading-spinner *ngIf="showSpinner"></app-loading-spinner> | ||
|
|
||
| <tbody> | ||
|
|
||
| <tr *ngFor="let room of rooms"> | ||
| <td>{{ room.id }}</td> | ||
| <td> | ||
| {{ room.name }} | ||
| </td> | ||
| <!-- <td>Capacity</td> --> | ||
| <td> | ||
| <!-- Action buttons --> | ||
| <button type="button" class="btn btn-sm btn-secondary" (click)="openEdit(editContent, room)"> Edit</button> | | ||
| <button type="button" class="btn btn-sm btn-danger" (click)="openDelete(deleteContent)">Delete</button> | ||
|
|
||
| <!-- delete modal --> | ||
| <ng-template #deleteContent let-c="close" let-d="dismiss"> | ||
| <div class="modal-header"> | ||
| <h5 class="modal-title">Confirm Deletion</h5> | ||
| <button type="button" class="close" aria-label="close" (click)="d('Cross click')"> | ||
| <span aria-hidden="true">×</span> | ||
| </button> | ||
| </div> | ||
| <div class="modal-body"> | ||
| <p>Are you sure you want to delete this room <em>(Name: {{ room.name }})</em> permanently?</p> | ||
| </div> | ||
| <div class="modal-footer"> | ||
| <button type="button" class="btn btn-md btn-danger" (click)="c(room.id)">Yes</button> | ||
| <button type="button" class="btn btn-md btn-secondary" (click)="c()">Cancel</button> | ||
| </div> | ||
| </ng-template> | ||
| </td> | ||
| </tr> | ||
| </tbody> | ||
|
|
||
| </table> | ||
|
|
||
| <!-- create room modal --> | ||
| <ng-template #formContent let-c="close" let-d="dismiss"> | ||
| <div class="modal-header"> | ||
| <h5 class="modal-title">Create Booking Room</h5> | ||
| <button type="button" class="close" aria-label="close" (click)="d('Cross click')"> | ||
| <span aria-hidden="true">×</span> | ||
| </button> | ||
| </div> | ||
|
|
||
| <div class="modal-body"> | ||
| <form #roomForm="ngForm"> | ||
| <div class="form-group"> | ||
| <label for="name"><b>Name of Room/Space:</b></label> | ||
| <input type="text" class="form-control" name="name" [(ngModel)]="nm" required> | ||
| </div> | ||
| </form> | ||
| </div> | ||
| <div class="modal-footer"> | ||
| <button type="button" class="btn btn-md btn-success" (click)="c(roomForm.value)">Create</button> | ||
| <button type="button" class="btn btn-md btn-secondary" (click)="c('Close click')">Cancel</button> | ||
| </div> | ||
|
|
||
| </ng-template> | ||
|
|
||
| <!-- Edit room modal --> | ||
| <ng-template #editContent let-c="close" let-d="dismiss"> | ||
| <div class="modal-header"> | ||
| <h5 class="modal-title">Edit Booking Room Details</h5> | ||
| <button type="button" class="close" aria-label="close" (click)="d('Cross click')"> | ||
| <span aria-hidden="true">×</span> | ||
| </button> | ||
| </div> | ||
| <div class="modal-body"> | ||
| <form #roomEdit="ngForm"> | ||
| <div class="form-group"> | ||
| <label for="name"><b>Name of Room/Space:</b></label> | ||
| <input type="text" class="form-control" name="name" [(ngModel)]="name" required> | ||
| </div> | ||
| </form> | ||
| </div> | ||
| <div class="modal-footer"> | ||
| <button type="button" class="btn btn-md btn-success" (click)="c(roomEdit.value)">Save</button> | ||
| <button type="button" class="btn btn-md btn-secondary" (click)="c()">Cancel</button> | ||
| </div> | ||
| </ng-template> | ||
|
|
||
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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<RoomsComponent>; | ||
|
|
||
| beforeEach(async(() => { | ||
| TestBed.configureTestingModule({ | ||
| declarations: [ RoomsComponent ] | ||
| }) | ||
| .compileComponents(); | ||
| })); | ||
|
|
||
| beforeEach(() => { | ||
| fixture = TestBed.createComponent(RoomsComponent); | ||
| component = fixture.componentInstance; | ||
| fixture.detectChanges(); | ||
| }); | ||
|
|
||
| it('should create', () => { | ||
| expect(component).toBeTruthy(); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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); | ||
| } | ||
| ); | ||
| } | ||
|
|
||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.