Add first version of admin table with basic edit capabilities

src/app/app.module.ts

@@ -9,6 +9,9 @@ import {AdminComponent} from './pages/admin/admin.component';
 import {LandingpageComponent} from './pages/landingpage/landingpage.component';
 import {NotfoundComponent} from './pages/notfound/notfound.component';
 import {ApiService} from './services/api.service';
+import {HttpClientModule} from '@angular/common/http';
+import {FormsModule} from '@angular/forms';
+import {EventsTableComponent} from './components/events-table/events-table.component';
 
 @NgModule({
 	declarations: [
@@ -17,11 +20,14 @@ import {ApiService} from './services/api.service';
 		EventComponent,
 		AdminComponent,
 		LandingpageComponent,
-		NotfoundComponent
+		NotfoundComponent,
+		EventsTableComponent
 	],
 	imports: [
 		BrowserModule,
-		AppRouting
+		HttpClientModule,
+		AppRouting,
+		FormsModule
 	],
 	providers: [ApiService],
 	bootstrap: [AppComponent]

src/app/components/event/event.component.css

@@ -0,0 +1,3 @@
+table, th, td {
+	border: .05em solid black;
+}

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

@@ -1 +1,67 @@
-<p>event works!</p>
+<td>
+	<div *ngIf="editActive">
+		{{this.event?.calendarId}}
+	</div>
+	<div *ngIf="!editActive">
+		{{this.event?.calendarId}}
+	</div>
+</td>
+<td>
+	<div *ngIf="editActive">
+		<input type="text" [(ngModel)]="event!.name">
+	</div>
+	<div *ngIf="!editActive">
+		{{this.event?.name}}
+	</div>
+</td>
+<td>
+	<div *ngIf="editActive">
+
+	</div>
+	<div *ngIf="!editActive">
+		{{this.event?.description}}
+	</div>
+</td>
+<td>
+	<div *ngIf="editActive">
+
+	</div>
+	<div *ngIf="!editActive">
+		{{this.event?.startDateTime}}
+	</div>
+</td>
+<td>
+	<div *ngIf="editActive">
+
+	</div>
+	<div *ngIf="!editActive">
+		{{this.event?.endDateTime}}
+	</div>
+</td>
+<td>
+	<div *ngIf="editActive">
+
+	</div>
+	<div *ngIf="!editActive">
+		{{this.event?.location}}
+	</div>
+</td>
+<td>
+	<div *ngIf="editActive">
+
+	</div>
+	<div *ngIf="!editActive">
+		{{this.event?.createdBy}}
+	</div>
+</td>
+<td>
+	<div *ngIf="editActive">
+
+	</div>
+	<div *ngIf="!editActive">
+		{{this.event?.url}}
+	</div>
+</td>
+<td>
+	<button (click)="toggleEdit()">{{editActive ? 'Save' : 'Edit'}}</button>
+</td>

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

@@ -1,16 +1,30 @@
-import {Component, OnInit} from '@angular/core';
+import {Component, Input, OnInit} from '@angular/core';
+import {Event} from '../../models/event';
+import {ApiService} from '../../services/api.service';
 
 @Component({
-	selector: 'app-event',
+	selector: '[app-event]',
 	templateUrl: './event.component.html',
 	styleUrls: ['./event.component.css']
 })
 export class EventComponent implements OnInit {
 
-	constructor() {
+	@Input() event: Event | undefined;
+
+	editActive: boolean = false;
+	constructor(private api: ApiService) {
 	}
 
 	ngOnInit(): void {
 	}
 
+	toggleEdit() {
+		if(this.editActive && this.event !== undefined) {
+			this.api.updateEvent(this.event).subscribe((res: any) => {
+				console.log(res);
+			});
+		}
+
+		this.editActive = !this.editActive;
+	}
 }

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

@@ -0,0 +1,3 @@
+table, th, td {
+	border: .05em solid black;
+}

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

@@ -0,0 +1,14 @@
+<table>
+	<tr>
+		<th>Calendar</th>
+		<th>Name</th>
+		<th>Description</th>
+		<th>Start</th>
+		<th>End</th>
+		<th>Location</th>
+		<th>Created by</th>
+		<th>URL</th>
+		<th>Edit</th>
+	</tr>
+	<tr app-event *ngFor="let event of events" [event]="event"></tr>
+</table>

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

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EventsTableComponent } from './events-table.component';
+
+describe('EventsTableComponent', () => {
+  let component: EventsTableComponent;
+  let fixture: ComponentFixture<EventsTableComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ EventsTableComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(EventsTableComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,18 @@
+import {Component, Input, OnInit} from '@angular/core';
+import {Event} from '../../models/event';
+
+@Component({
+	selector: 'app-events-table',
+	templateUrl: './events-table.component.html',
+	styleUrls: ['./events-table.component.css']
+})
+export class EventsTableComponent implements OnInit {
+
+	@Input() events: Event[] = [];
+	constructor() {
+	}
+
+	ngOnInit(): void {
+	}
+
+}

src/app/models/event.ts

@@ -1,13 +1,13 @@
 export interface Event {
-	event_id: number;
+	eventId: number;
-	calendar_id: number;
+	calendarId: number;
 	uuid: string;
 	name: string;
 	description: string;
-	start_datetime: Date;
+	startDateTime: Date;
-	end_datetime: Date;
+	endDateTime: Date;
-	created_date: Date;
+	createdDate: Date;
 	location: string;
-	created_by: string;
+	createdBy: string;
 	url: string;
 }

src/app/pages/admin/admin.component.html

@@ -1 +1,14 @@
-<p>admin works!</p>
+<div *ngIf="!isLoggedIn">
+	<p>Please log in:</p>
+	<input type="password" aria-label="Password" (keyup.enter)="login()" [(ngModel)]="password">
+	<input type="text" aria-label="Your Name" (keyup.enter)="login()" [(ngModel)]="name">
+</div>
+<div *ngIf="isLoggedIn">
+	<select [(ngModel)]="selectedCalendar" (change)="getEvents()">
+		<option value="" disabled selected hidden>Select calendar</option>
+		<option>public</option>
+		<option>members</option>
+		<option>management</option>
+	</select>
+	<app-events-table [events]="this.events"></app-events-table>
+</div>

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

@@ -1,4 +1,7 @@
 import {Component, OnInit} from '@angular/core';
+import {ApiService} from '../../services/api.service';
+import {UtilsService} from '../../services/utils.service';
+import {Event} from '../../models/event';
 
 @Component({
 	selector: 'app-admin',
@@ -7,10 +10,43 @@ import {Component, OnInit} from '@angular/core';
 })
 export class AdminComponent implements OnInit {
 
-	constructor() {
+	isLoggedIn: boolean = false;
+	events: Event[] = [];
+	selectedCalendar: string = '';
+	password: string = '';
+	name: string = '';
+	constructor(
+		private api: ApiService
+	) {
 	}
 
 	ngOnInit(): void {
+		if (UtilsService.getPasswordFromLocalStorage() !== '') {
+			this.isLoggedIn = true;
+			this.getEvents();
+		}
 	}
 
+	getEvents(): void {
+		if(this.selectedCalendar === '') {
+			return;
+		}
+
+		this.api.getEvents(this.selectedCalendar).subscribe((events: Event[]): void => {
+			events.forEach((event: Event) => {
+				this.events.push({
+					...event,
+					startDateTime: new Date(event.startDateTime),
+					endDateTime: new Date(event.endDateTime),
+					createdDate: new Date(event.createdDate)
+				})
+			})
+		})
+	}
+
+	login(): void {
+		UtilsService.saveUserInfoToLocalStorage(this.password, this.name);
+		this.isLoggedIn = true;
+		this.getEvents();
+	}
 }

src/app/services/api.service.ts

@@ -8,7 +8,8 @@ import {UtilsService} from './utils.service';
 	providedIn: 'root'
 })
 export class ApiService {
-	apiUrl = 'https://api.nachklang/calendar/events/';
+	// apiUrl = 'https://api.nachklang.art/calendar/events/';
+	apiUrl = 'http://localhost:3000/calendar/events/';
 
 	constructor(
 		private http: HttpClient
@@ -28,4 +29,22 @@ export class ApiService {
 		}
 		return new Observable<Event[]>();
 	}
+
+	updateEvent(event: Event): Observable<any> {
+		try {
+			// Get password
+			let password = UtilsService.getPasswordFromLocalStorage();
+
+			let updateEvent: any = event;
+
+			updateEvent.password = password;
+
+			console.log(event);
+
+			return this.http.put(this.apiUrl + updateEvent.eventId, updateEvent);
+		} catch (exception) {
+			console.log('Error fetching events from API');
+		}
+		return new Observable<any>();
+	}
 }