Showing event registrations in a table

src/RunnersMeet.Client/src/app/events/event-view/event-view.component.html

@@ -12,6 +12,21 @@
 <h3>Your registration</h3>
 <p-selectButton [options]="registrationStates" [(ngModel)]="currentState" (onChange)="updateRegistration($event)" optionLabel="label" optionValue="value"></p-selectButton>
 <h3>Other registrations</h3>
-<ul>
-	<li *ngFor="let registration of registrations">{{ registration.owner?.displayName }}: {{ registration.status | stateDisplay }}</li>
-</ul>
+<p-table [value]="registrations" styleClass="p-datatable-striped">
+	<ng-template pTemplate="header">
+		<tr>
+			<th>Name</th>
+			<th>Yes</th>
+			<th>Maybe</th>
+			<th>No</th>
+		</tr>
+	</ng-template>
+	<ng-template pTemplate="body" let-item>
+		<tr>
+			<td>{{ item.name }}</td>
+			<td><i class="pi" [class.pi-check-circle]="item.yes"></i></td>
+			<td><i class="pi" [class.pi-check-circle]="item.maybe"></i></td>
+			<td><i class="pi" [class.pi-check-circle]="item.no"></i></td>
+		</tr>
+	</ng-template>
+</p-table>

src/RunnersMeet.Client/src/app/events/event-view/event-view.component.ts

@@ -6,6 +6,13 @@ import { Registration } from '../registration';
 import { AuthService } from '@auth0/auth0-angular';
 import { combineLatest, take } from 'rxjs';
 
+interface RegistrationModel {
+	readonly name: string;
+	readonly yes: boolean;
+	readonly no: boolean;
+	readonly maybe: boolean;
+}
+
 @Component({
 	selector: 'app-event-view',
 	templateUrl: './event-view.component.html',
@@ -16,7 +23,7 @@ export class EventViewComponent {
 	public eventId: string = '';
 
 	public event: GroupEvent | null = null;
-	public registrations: Array<Registration> = [];
+	public registrations: Array<RegistrationModel> = [];
 
 	public registrationStates = RegistrationStateItems;
 
@@ -37,7 +44,14 @@ export class EventViewComponent {
 				const currentRegistrationIndex = registrations.findIndex(r => r.owner?.userId === user?.sub);
 
 				this.currentState = (currentRegistrationIndex >= 0 ? registrations.splice(currentRegistrationIndex, 1)[0] : null)?.status ?? RegistrationState.Unknown;
-				this.registrations = registrations;
+				this.registrations = registrations
+					.filter(r => r.status !== RegistrationState.Unknown)
+					.map(r => ({
+						name: r.owner?.displayName ?? '',
+						yes: r.status === RegistrationState.Yes,
+						no: r.status === RegistrationState.No,
+						maybe: r.status === RegistrationState.Maybe,
+					}));
 			});
 	}
 

src/RunnersMeet.Client/src/styles.scss

@@ -64,6 +64,9 @@ body {
 	width: 100%;
 }
 
+///////////////////
+/// Custom Elements
+
 dl.pivot-table {
 	display: flex;
 	flex-flow: row wrap;