Event list item card

src/RunnersMeet.Client/src/app/app.module.ts

@@ -36,7 +36,8 @@ import { ViewEventPageComponent } from './pages/view-event-page/view-event-page.
 import { UiLibraryModule } from './ui-library.module';
 import { DistancePipe } from './tracks/distance.pipe';
 import { ElevationPipe } from './tracks/elevation.pipe';
-import { RegistrationStatePipe } from './events/registration-state.pipe';
+import { RegistrationStatePipe } from './events/registration-state.pipe';
+import { EventListItemComponent } from './events/event-list-item/event-list-item.component';
 
 @NgModule({
 	declarations: [
@@ -61,6 +62,7 @@ import { RegistrationStatePipe } from './events/registration-state.pipe';
 		DistancePipe,
 		ElevationPipe,
 		RegistrationStatePipe,
+  EventListItemComponent,
 	],
 	imports: [
 		BrowserModule,

src/RunnersMeet.Client/src/app/datetime.ts

@@ -21,6 +21,10 @@ export class DateTime {
 		return this.date.toLocaleTimeString('sv-SE');
 	}
 
+	public toFullDateTimeString(): string {
+		return `${this.toDateString()} ${this.toTimeString()}`;
+	}
+
 	public toJSON(): string {
 		return this.date.toJSON();
 	}

src/RunnersMeet.Client/src/app/events/event-list-item/event-list-item.component.html

@@ -0,0 +1,17 @@
+<p-card styleClass="event-overview-item">
+	<ng-template pTemplate="title">
+		{{ groupEvent?.title }}
+	</ng-template>
+	<ng-template pTemplate="subtitle">
+		🕑 {{ groupEvent?.startTime?.toFullDateTimeString() }} ↔{{ groupEvent?.track?.distance | distance }} ↑{{ groupEvent?.track?.elevationUp | elevation:'up' }} ↓{{ groupEvent?.track?.elevationDown | elevation:'down' }}
+	</ng-template>
+	<ng-template pTemplate="content">
+		{{ groupEvent?.description }}
+	</ng-template>
+	<ng-template pTemplate="footer">
+		<div class="button-group">
+			<a pButton class="p-button-secondary" [routerLink]="['/events/view', groupEvent?.eventId]">View</a>
+			<a pButton class="p-button-secondary" [routerLink]="['/events/edit', groupEvent?.eventId]">Edit</a>
+		</div>
+	</ng-template>
+</p-card>

src/RunnersMeet.Client/src/app/events/event-list-item/event-list-item.component.spec.ts

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

src/RunnersMeet.Client/src/app/events/event-list-item/event-list-item.component.ts

@@ -0,0 +1,14 @@
+import { Component, Input } from '@angular/core';
+import { GroupEvent } from '../group-event';
+
+@Component({
+  selector: 'app-event-list-item',
+  templateUrl: './event-list-item.component.html',
+  styleUrls: ['./event-list-item.component.scss']
+})
+export class EventListItemComponent {
+	@Input()
+	public groupEvent?: GroupEvent;
+
+	public constructor(	) { }
+}

src/RunnersMeet.Client/src/app/pages/events-page/events-page.component.html

@@ -22,8 +22,6 @@
 	</form>
 </p-panel>
 
-<ul>
-	<li *ngFor="let event of groupEvents | async">{{ event.title }} <a [routerLink]="['/events/view', event.eventId]">View</a> <a [routerLink]="['/events/edit', event.eventId]">Edit</a></li>
-</ul>
+<app-event-list-item *ngFor="let event of groupEvents | async" [groupEvent]="event"></app-event-list-item>
 
 <button pButton class="p-button-secondary" [disabled]="!hasMore" (click)="loadMore()">More</button>

src/RunnersMeet.Client/src/styles.scss

@@ -27,6 +27,10 @@ body {
 	margin-bottom: 1em;
 }
 
+.event-overview-item {
+	margin-bottom: 1em;
+}
+
 .button-group {
 	margin-top: 1rem;
 }

src/RunnersMeet.Server/Persistence/EventsQuery.cs

@@ -20,7 +20,7 @@ public class EventsQuery : IRequestHandler<EventsRequest, QueryPagingConfig, ILi
 
 	public IList<Event> Handle(EventsRequest request)
 	{
-		var query = _database.Events.Query();
+		var query = _database.Events.Query().Include(e => e.Track);
 		query.WhereIf(request.Owner != null, e => e.Owner.UserId == request.Owner);
 		query.WhereIf(request.Filter != null, e => e.Title.Contains(request.Filter!));