[ui] feat: Implement creating/deleting instructors

ClientApp/src/app/home/home.component.html

@@ -11,7 +11,7 @@
         <tr *ngFor="let instructor of instructors">
           <td>{{ instructor.firstName }}</td>
           <td>{{ instructor.lastName }}</td>
-          <td><button type="button" class="btn btn-danger">DELETE</button></td>
+          <td><button type="button" class="btn btn-danger" (click)="deleteInstructor(instructor)">DELETE</button></td>
         </tr>
     </tbody>
 </table>
@@ -21,6 +21,6 @@
   <label><h5 style="text-align: initial">Middle Name</h5><input type="text" style="margin-right: 20px" [(ngModel)]="changingInstructor.middleName"></label>
   <label><h5 style="text-align: initial">Last Name</h5><input type="text" [(ngModel)]="changingInstructor.lastName"></label>
   <br>
-  <button type="button" class="btn btn-primary">ADD/SAVE</button>
+  <button type="button" class="btn btn-primary" (click)="saveChanges()">ADD/SAVE</button>
 </div>
 

ClientApp/src/app/home/home.component.ts

@@ -15,12 +15,30 @@ export class HomeComponent {
     constructor(private instructorsService: InstructorsHttpService) {}
 
     ngOnInit() {
-      this.loadInstructors()
+        this.loadInstructors()
     }
 
     private loadInstructors() {
-      this.instructorsService.getInstructors().subscribe(result => {
-        this.instructors = result;
-      })
+        this.instructorsService.getInstructors().subscribe(result => {
+            this.instructors = result
+        })
+    }
+
+    saveChanges() {
+        if(this.changingInstructor.id == null) {
+            this.instructorsService.createInstructor(this.changingInstructor).subscribe(result => {
+                this.instructors.push(result)
+            })
+            
+        } else {
+            this.instructorsService.updateInstructor(this.changingInstructor)
+        }
+        this.changingInstructor = new Instructor()
+    }
+
+    deleteInstructor(instructor: Instructor) {
+        this.instructorsService.deleteInstructor(instructor.id).subscribe(_ =>{
+            this.instructors.splice(this.instructors.indexOf(instructor), 1)
+        })
     }
 }

ClientApp/src/app/services/instructors-http-service.ts

@@ -1,6 +1,7 @@
 import { Injectable, Inject } from '@angular/core';
 import { HttpClient} from '@angular/common/http';
 import { Instructor } from '../models/instructor';
+import { ResponseType } from '@angular/http';
  
 @Injectable()
 export class InstructorsHttpService {
@@ -11,7 +12,7 @@ export class InstructorsHttpService {
     }
 
     createInstructor(instructor: Instructor) {
-        return this.http.post(this.baseUrl + "api/v1/instructors/add", instructor)
+        return this.http.post<Instructor>(this.baseUrl + "api/v1/instructors/add", instructor)
     }
 
     updateInstructor(instructor: Instructor) {