Enable UI to work with event status

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

@@ -28,6 +28,12 @@
 	<td class="{{invalidUrlError? 'has-error' : ''}}">
 		<input type="text" [(ngModel)]="event!.url">
 	</td>
+	<td>
+		<select [(ngModel)]="event!.status">
+			<option value="DRAFT">Draft</option>
+			<option value="PUBLIC">Published</option>
+		</select>
+	</td>
 	<td>
 		<button (click)="toggleEdit()">Save</button>
 		<p class="has-error" *ngIf="showDateError">Start Date must not be after end date!</p>
@@ -69,6 +75,9 @@
 	<td>
 		{{event?.url}}
 	</td>
+	<td>
+		{{getEventStatusFriendlyName()}}
+	</td>
 	<td>
 		<button (click)="toggleEdit()">Edit</button>
 	</td>

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

@@ -175,4 +175,15 @@ export class EventComponent implements OnInit {
 
 		return validUrl;
 	}
+
+	getEventStatusFriendlyName(): string {
+		switch (this.event!.status) {
+			case 'DRAFT':
+				return 'Draft';
+			case 'PUBLIC':
+				return 'Published';
+			default:
+				return 'Error';
+		}
+	}
 }

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

@@ -9,6 +9,7 @@
 		<th>Location</th>
 		<th>Created by</th>
 		<th>URL</th>
+		<th>Status</th>
 		<th>Edit</th>
 		<th>Delete</th>
 	</tr>

src/app/models/event.ts

@@ -11,4 +11,5 @@ export interface Event {
 	createdBy: string;
 	url: string;
 	wholeDay: boolean;
+	status: string;
 }

src/app/pages/admin/admin.component.ts

@@ -52,6 +52,7 @@ export class AdminComponent implements OnInit {
 
 		this.api.getEvents(this.selectedCalendar).subscribe((events: Event[]): void => {
 			for (let event of events) {
+				if(event.status !== 'DELETED') {
 					this.events.push({
 						...event,
 						startDateTime: new Date(event.startDateTime),
@@ -59,6 +60,7 @@ export class AdminComponent implements OnInit {
 						createdDate: new Date(event.createdDate)
 					});
 				}
+			}
 			this.filterEvents();
 			this.sortEvents();
 		});