Merge pull request #19 from agora-code-community/master

Organisations added to the front end

client/package.json

@@ -25,7 +25,7 @@
     "@angular/platform-browser-dynamic": "5.2.9",
     "@angular/router": "5.2.9",
     "@ng-bootstrap/ng-bootstrap": "^1.0.2",
-    "angular-calendar": "^0.25.2",
+    "angular-calendar": "^0.24.1",
     "angular2-jwt": "^0.2.3",
     "bootstrap": "^4.0.0",
     "core-js": "^2.4.1",

client/src/app/app.module.ts

@@ -21,6 +21,7 @@ import { BookFormComponent } from './components/book-form/book-form.component';
 
 import { EventServiceService } from './services/event-service.service';
 import { BookingServiceService } from './services/booking-service.service';
+import { OrganisationService } from './services/organisation.service';
 import { EditBookingComponent } from './components/edit-booking/edit-booking.component';
 import { ViewDetailsComponent } from './components/view-details/view-details.component';
 import { LoadingSpinnerComponent } from './components/loading-spinner/loading-spinner.component';
@@ -33,6 +34,7 @@ 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';
+import { ViewOrgsComponent } from './components/view-orgs/view-orgs.component';
 
 // routing links
 const appRoutes: Routes = [
@@ -61,7 +63,9 @@ const appRoutes: Routes = [
       { 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 }
+      { path: 'register', component: SignupComponent },
+      { path: 'calendar', component: CalendarComponent },
+      { path: 'view-orgs', component: ViewOrgsComponent }
     ]
   }
 ]; // ends routes
@@ -83,7 +87,8 @@ const appRoutes: Routes = [
     AddBookinComponent,
     SignupComponent,
     CalendarComponent,
-    RoomsComponent
+    RoomsComponent,
+    ViewOrgsComponent
   ],
   imports: [
     BrowserModule,
@@ -103,6 +108,7 @@ const appRoutes: Routes = [
     AuthServiceService,
     AuthGuard,
     RoomsService,
+    OrganisationService,
     {
       provide: HTTP_INTERCEPTORS,
       useClass: InterceptorService,

client/src/app/components/book-form/book-form.component.css

@@ -11,3 +11,8 @@ label {
 button:disabled {
     cursor: not-allowed;
 }
+
+.error {
+    font-size: 0.8rem;
+    color: orangered;
+}

client/src/app/components/book-form/book-form.component.html

@@ -5,8 +5,42 @@ <h1 class="h2">Add a Booking</h1>
 
 <!-- Tabbed form -->
 <ngb-tabset #t="ngbTabset" justify="justified">
+  <!-- Organisation tab -->
+  <ngb-tab title="Organization details">
+    <ng-template ngbTabContent>
+      <div class="border border-top-0 py-3 px-3">
+        <p><b>NB:</b> Create an Organisation/Co-ordinator of an event that is being booked. <br>
+          * 
+          If the organisation was previously created, just select it when creating an event.
+        </p>
+
+          <form (ngSubmit)="onOrgSubmit(orgForm.value)" #orgForm="ngForm">
+            <div class="col-md-8 mb-3">
+              <label for="evnt">Organization/Coordinater Name</label>
+              <input type="text" class="form-control" ngModel name="orgName" required>
+            </div>
+            <div class="col-md-8 mb-3">
+              <label for="evnt">Email</label>
+              <input type="text" class="form-control" ngModel name="email" required>
+            </div>
+            <div class="col-md-8 mb-3">
+              <label for="evnt">Phone number</label>  
+              <input type="number" class="form-control" ngModel name="phone"  required>
+            </div>
+            <div class="col-md-8 mb-3">
+              <label for="descp">Description</label>
+              <textarea class="form-control" rows="3" ngModel name="description" required></textarea>
+            </div>
+            <div class="d-flex justify-content-end">
+              <button type="submit" class="btn btn-primary">Save and Continue</button>
+            </div>
+          </form>
+
+      </div>
+    </ng-template>
+  </ngb-tab>
   <!-- event tab -->
-    <ngb-tab title="Event details">
+    <ngb-tab title="Event details" id="Event">
       <ng-template ngbTabContent>
         <div class="border border-top-0 py-3 px-3">
 
@@ -15,6 +49,14 @@ <h1 class="h2">Add a Booking</h1>
                 <label for="evnt">Event Name</label>
                 <input type="text" class="form-control" id="evnt" placeholder="" ngModel name="name" required>
               </div>
+              <div class="col-md-8 mb-3">
+                <label for="space">Organisation</label>
+                <select class="custom-select d-block w-100" ngModel name="organization_id" required>
+                 <option *ngFor="let element of orgs" [value]="element.id">{{ element.name }}</option>
+                  <!-- <option>-- Choose --</option> -->
+                </select>
+                <p class="error"><b>*NB:</b> If the organization is not on this list, please create in in the before moving on.</p>
+              </div>
               <!-- <div class="col-md-8 mb-3">
                 <label for="descp">Event description</label>
                 <textarea class="form-control" rows="3" id="descp" ngModel name="description" required></textarea>
@@ -27,7 +69,7 @@ <h1 class="h2">Add a Booking</h1>
         </div>
       </ng-template>
     </ngb-tab>
-    <!-- details tab -->
+    <!-- Booking details tab -->
     <ngb-tab title="Booking details" id="details">
       <ng-template ngbTabContent>
         <div class="border border-top-0 py-3 px-3">

client/src/app/components/book-form/book-form.component.ts

@@ -4,6 +4,7 @@ import { EventServiceService } from './../../services/event-service.service';
 import { Router } from '@angular/router';
 import { FlashMessagesService } from 'ngx-flash-messages';
 import { UtilsService } from '../../services/utils.service';
+import { OrganisationService } from './../../services/organisation.service';
 
 @Component({
   selector: 'app-book-form',
@@ -15,19 +16,23 @@ export class BookFormComponent implements OnInit {
   @ViewChild('t') t;  // selects the component eith the variale #t
   rooms: any;  // store the rooms from the db
   event: any; // full object of created event
+  orgs: any; // full object of create organistation
   formattedDate: string;
   formattedTime: string;
 
   constructor(
     private bservice: BookingServiceService,
     private evntService: EventServiceService,
+    private orgService: OrganisationService,
     private flashMessagesService: FlashMessagesService,
     private utilService: UtilsService,
     private router: Router
   ) { }
 
   ngOnInit() {
     this.initRooms();
+
+    this.getOrgs();
   }
 
   /**
@@ -37,25 +42,78 @@ export class BookFormComponent implements OnInit {
     this.rooms = this.utilService.loadRooms();
   }
 
+  /**
+   * Gets all organization from the DB
+   */
+  getOrgs() {
+    // get orgs from db
+    this.orgService.getAllOrganizations().subscribe(
+      data => {
+        this.orgs = data['organization'];
+      },
+      error => { console.error(error); }
+    );
+  }
+
+  /**
+   * Stores an organisation data
+   * @param org the organisation form data
+   */
+  onOrgSubmit(org) {
+    // reconstruct object for posting
+    const req = {
+      'name': org.orgName,
+      'email': org.email,
+      'phone_number': org.phone,
+      'description': org.description
+    };
+
+    this.orgService.storeOrg(req).subscribe(
+      data => {
+        // success message
+        if (data) {
+          this.flashMessagesService.show('Organisation created succussfully.', {
+            classes: ['alert', 'alert-success'],
+            timeout: 2500
+          });
+        }
+
+        this.getOrgs();  // refetches the organisations from the db
+      },
+      error => { console.error(error); } // err handling (poor, I know)
+    );
+
+    this.t.select('Event'); // selects the event tab after posting
+  }
+
   /**
    * Stores the event data first and moves to next tab
    * @param evnt the event data from the form
    */
   onEvntSubmit(evnt) {
     // console.log(evnt);
-    this.evntService.storeEvent(evnt).subscribe(data => {
-      this.event = data['event'];
+    this.evntService.storeEvent(evnt).subscribe(
+      data => {
+        this.event = data['event'];
 
-      // success message
-      if (data) {
-        this.flashMessagesService.show('Event created succussfully.', {
-          classes: ['alert', 'alert-success'],
+        // success message
+        if (data) {
+          this.flashMessagesService.show('Event created succussfully.', {
+            classes: ['alert', 'alert-success'],
+            timeout: 2500
+          });
+        }
+
+        this.t.select('details'); // selects the details tab after the posting
+      },
+      error => {
+        this.flashMessagesService.show('All fields are required. Please fill in everything.', {
+          classes: ['alert', 'alert-warning'],
           timeout: 2500
         });
+        console.log(error);
       }
-    });
-
-    this.t.select('details'); // selects the details tab after the posting
+    );
   }
 
   /**

client/src/app/components/calendar/calendar.component.html

@@ -1,3 +1,26 @@
+<ng-template #modalContent let-close="close">
+  <div class="modal-header">
+    <h5 class="modal-title">Event Summary</h5>
+    <button type="button" class="close" (click)="close()">
+      <span aria-hidden="true">&times;</span>
+    </button>
+  </div>
+  <div class="modal-body">
+    <div>
+      Quick summary <hr>
+      <dl>
+        <dd><b>Title:</b> {{ modalData?.event.title }}</dd>
+        <dd><b>Start date:</b> {{ modalData?.event.start | date:'mediumDate'}}</dd>
+        <dd><b>End date:</b> {{ modalData?.event.end | date:'mediumDate'}}</dd>
+      </dl>
+    </div>
+  </div>
+  <div class="modal-footer">
+    <button type="button" class="btn btn-outline-secondary" (click)="close()">OK</button>
+  </div>
+</ng-template>
+<!-- End modal -->
+
 <div class="row text-center">
   <div class="col-md-4">
     <div class="btn-group">
@@ -51,13 +74,14 @@ <h3>{{ viewDate | calendarDate:(view + 'ViewTitle'):'en' }}</h3>
     </div>
   </div>
 </div>
+
 <br>
+<!-- Actual calendar module -->
 <div [ngSwitch]="view">
   <mwl-calendar-month-view
     *ngSwitchCase="'month'"
     [viewDate]="viewDate"
     [events]="events"
-    [refresh]="refresh"
     [activeDayIsOpen]="activeDayIsOpen"
     (dayClicked)="dayClicked($event.day)"
     (eventClicked)="handleEvent('Clicked', $event.event)"
@@ -79,5 +103,4 @@ <h3>{{ viewDate | calendarDate:(view + 'ViewTitle'):'en' }}</h3>
     (eventClicked)="handleEvent('Clicked', $event.event)"
     (eventTimesChanged)="eventTimesChanged($event)">
   </mwl-calendar-day-view>
-  <br><br>
-</div>
+</div>