From 0962a36b59de5f42dc184f4aa87a0781d2991132 Mon Sep 17 00:00:00 2001
From: Patrick Mueller <patrick@mueller-patrick.tech>
Date: Mon, 15 May 2023 21:00:28 +0200
Subject: [PATCH] Enable UI to work with event status

---
 src/app/components/event/event.component.html      |  9 +++++++++
 src/app/components/event/event.component.ts        | 11 +++++++++++
 .../events-table/events-table.component.html       |  1 +
 src/app/models/event.ts                            |  1 +
 src/app/pages/admin/admin.component.ts             | 14 ++++++++------
 5 files changed, 30 insertions(+), 6 deletions(-)

diff --git a/src/app/components/event/event.component.html b/src/app/components/event/event.component.html
index d2c9ecc..933e551 100644
--- a/src/app/components/event/event.component.html
+++ b/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>
diff --git a/src/app/components/event/event.component.ts b/src/app/components/event/event.component.ts
index 844a362..b75d656 100644
--- a/src/app/components/event/event.component.ts
+++ b/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';
+		}
+	}
 }
diff --git a/src/app/components/events-table/events-table.component.html b/src/app/components/events-table/events-table.component.html
index 3136e13..f2662b2 100644
--- a/src/app/components/events-table/events-table.component.html
+++ b/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>
diff --git a/src/app/models/event.ts b/src/app/models/event.ts
index 60e25e3..fd596c8 100644
--- a/src/app/models/event.ts
+++ b/src/app/models/event.ts
@@ -11,4 +11,5 @@ export interface Event {
 	createdBy: string;
 	url: string;
 	wholeDay: boolean;
+	status: string;
 }
diff --git a/src/app/pages/admin/admin.component.ts b/src/app/pages/admin/admin.component.ts
index c0ce831..737a12f 100644
--- a/src/app/pages/admin/admin.component.ts
+++ b/src/app/pages/admin/admin.component.ts
@@ -52,12 +52,14 @@ export class AdminComponent implements OnInit {
 
 		this.api.getEvents(this.selectedCalendar).subscribe((events: Event[]): void => {
 			for (let event of events) {
-				this.events.push({
-					...event,
-					startDateTime: new Date(event.startDateTime),
-					endDateTime: new Date(event.endDateTime),
-					createdDate: new Date(event.createdDate)
-				});
+				if(event.status !== 'DELETED') {
+					this.events.push({
+						...event,
+						startDateTime: new Date(event.startDateTime),
+						endDateTime: new Date(event.endDateTime),
+						createdDate: new Date(event.createdDate)
+					});
+				}
 			}
 			this.filterEvents();
 			this.sortEvents();