Add delete capabilities

src/app/app.module.ts

@@ -1,4 +1,4 @@
-import {NgModule} from '@angular/core';
+import {ComponentRef, NgModule} from '@angular/core';
 import {BrowserModule} from '@angular/platform-browser';
 
 import {AppComponent} from './app.component';

src/app/components/event/event.component.html

@@ -29,6 +29,10 @@
 		<button (click)="toggleEdit()">Save</button>
 		<p class="has-error" *ngIf="showDateError">Start Date must not be after end date!</p>
 		<p class="has-error" *ngIf="requiredFieldsMissing">Required fields are missing!</p>
+		<p class="has-error" *ngIf="showCreateError">Error creating event. Please try again.</p>
+	</td>
+	<td>
+		<button (click)="triggerDelete()">Delete</button>
 	</td>
 </ng-container>
 <ng-container *ngIf="!editActive">
@@ -61,4 +65,7 @@
 	<td>
 		<button (click)="toggleEdit()">Edit</button>
 	</td>
+	<td>
+		<button (click)="triggerDelete()">Delete</button>
+	</td>
 </ng-container>

src/app/components/event/event.component.ts

@@ -1,4 +1,4 @@
-import {Component, Input, OnInit} from '@angular/core';
+import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
 import {Event} from '../../models/event';
 import {ApiService} from '../../services/api.service';
 
@@ -10,7 +10,6 @@ import {ApiService} from '../../services/api.service';
 export class EventComponent implements OnInit {
 
 	@Input() event: Event | undefined;
-
 	@Input() editActive: boolean = false;
 	newStartDate: string | undefined;
 	newStartTime: string | undefined;
@@ -18,8 +17,12 @@ export class EventComponent implements OnInit {
 	newEndTime: string | undefined;
 	showDateError: boolean = false;
 	requiredFieldsMissing: boolean = false;
+	showCreateError: boolean = false;
+	@Output() deleteEvent = new EventEmitter<number>();
 
-	constructor(private api: ApiService) {
+	constructor(
+		private api: ApiService
+	) {
 	}
 
 	ngOnInit(): void {
@@ -53,7 +56,14 @@ export class EventComponent implements OnInit {
 			if(this.event.eventId === undefined) {
 				this.api.createEvent(this.event).subscribe((res: any) => {
 					console.log(res);
-					this.event!.eventId = res.eventId;
+
+					if(res.eventId) {
+						this.event!.eventId = res.eventId;
+					} else {
+						this.showCreateError = true;
+						return;
+					}
+
 				});
 			} else {
 				// Update existing event
@@ -126,4 +136,17 @@ export class EventComponent implements OnInit {
 	isNullOrBlank(str: string | null): boolean {
 		return str === null || str === undefined || str.trim() === '';
 	}
+
+	triggerDelete() {
+		let deleteConfirmed = window.confirm('Are you sure?');
+
+		if(deleteConfirmed && this.event) {
+			this.api.deleteEvent(this.event).subscribe((res: any) => {
+				console.log(res);
+				if(res.message) {
+					this.deleteEvent.next(this.event!.eventId);
+				}
+			});
+		}
+	}
 }

src/app/components/events-table/events-table.component.html

@@ -9,7 +9,8 @@
 		<th>Created by</th>
 		<th>URL</th>
 		<th>Edit</th>
+		<th>Delete</th>
 	</tr>
-	<tr app-event *ngFor="let event of events" [event]="event" [editActive]="event.eventId === undefined"></tr>
+	<tr app-event *ngFor="let event of events" [event]="event" [editActive]="event.eventId === undefined" (deleteEvent)="deleteEvent($event)"></tr>
 </table>
 <button *ngIf="selectedCalendar !== -1" (click)="addEvent()">Add Event</button>

src/app/components/events-table/events-table.component.ts

@@ -26,4 +26,12 @@ export class EventsTableComponent implements OnInit {
 			createdBy: UtilsService.getNameFromLocalStorage()
 		} as Event);
 	}
+
+	deleteEvent(id: number) {
+		this.events.forEach(event => {
+			if(event.eventId === id) {
+				this.events.splice(this.events.indexOf(event), 1);
+			}
+		})
+	}
 }

src/app/services/api.service.ts

@@ -39,7 +39,7 @@ export class ApiService {
 
 			return this.http.put(this.apiUrl + updateEvent.eventId, updateEvent);
 		} catch (exception) {
-			console.log('Error fetching events from API');
+			console.log('Error updating event');
 		}
 		return new Observable<any>();
 	}
@@ -54,7 +54,27 @@ export class ApiService {
 
 			return this.http.post(this.apiUrl, createEvent);
 		} catch (exception) {
-			console.log('Error fetching events from API');
+			console.log('Error creating event');
+		}
+		return new Observable<any>();
+	}
+
+	deleteEvent(event: Event): Observable<any> {
+		try {
+			let password = UtilsService.getPasswordFromLocalStorage();
+
+			let deleteEvent: any = event;
+
+			deleteEvent.password = password;
+
+			return this.http.delete(this.apiUrl + deleteEvent.eventId, {
+				headers: {
+					'Content-Type': 'application/json'
+				},
+				body: deleteEvent
+			});
+		} catch (exception) {
+			console.log('Error deleting event');
 		}
 		return new Observable<any>();
 	}