From 933974c9586bb9d28162edd78f3087324549fe6a Mon Sep 17 00:00:00 2001
From: Thomas Peetz <thomas.peetz@cimt-ag.de>
Date: Mon, 15 Sep 2025 17:08:42 +0200
Subject: [PATCH] add Artist Details

---
 kontor-angular/src/app/app.config.ts          |  4 ++--
 .../artist-detail/artist-detail.component.css |  5 ++++
 .../artist-detail.component.html              |  5 ++++
 .../artist-detail.component.spec.ts           | 23 +++++++++++++++++++
 .../artist-detail/artist-detail.component.ts  | 14 +++++++++++
 .../artist-list/artist-list.component.css     | 14 +++++++++++
 .../artist-list/artist-list.component.html    |  7 +++---
 .../artist-list/artist-list.component.ts      |  3 ++-
 .../src/app/comic/artist/artist.service.ts    |  2 +-
 9 files changed, 69 insertions(+), 8 deletions(-)
 create mode 100644 kontor-angular/src/app/comic/artist/artist-detail/artist-detail.component.css
 create mode 100644 kontor-angular/src/app/comic/artist/artist-detail/artist-detail.component.html
 create mode 100644 kontor-angular/src/app/comic/artist/artist-detail/artist-detail.component.spec.ts
 create mode 100644 kontor-angular/src/app/comic/artist/artist-detail/artist-detail.component.ts

diff --git a/kontor-angular/src/app/app.config.ts b/kontor-angular/src/app/app.config.ts
index ae06e63..97842c8 100644
--- a/kontor-angular/src/app/app.config.ts
+++ b/kontor-angular/src/app/app.config.ts
@@ -1,5 +1,5 @@
 import { ApplicationConfig, provideBrowserGlobalErrorListeners, provideZoneChangeDetection } from '@angular/core';
-import { provideRouter } from '@angular/router';
+import { provideRouter, withComponentInputBinding } from '@angular/router';
 
 import { routes } from './app.routes';
 import { provideHttpClient } from '@angular/common/http';
@@ -8,7 +8,7 @@ export const appConfig: ApplicationConfig = {
   providers: [
     provideBrowserGlobalErrorListeners(),
     provideZoneChangeDetection({ eventCoalescing: true }),
-    provideRouter(routes),
+    provideRouter(routes, withComponentInputBinding()),
     provideHttpClient(),
   ]
 };
diff --git a/kontor-angular/src/app/comic/artist/artist-detail/artist-detail.component.css b/kontor-angular/src/app/comic/artist/artist-detail/artist-detail.component.css
new file mode 100644
index 0000000..c34bfa6
--- /dev/null
+++ b/kontor-angular/src/app/comic/artist/artist-detail/artist-detail.component.css
@@ -0,0 +1,5 @@
+div {
+  border-radius: 6px;
+  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+}
diff --git a/kontor-angular/src/app/comic/artist/artist-detail/artist-detail.component.html b/kontor-angular/src/app/comic/artist/artist-detail/artist-detail.component.html
new file mode 100644
index 0000000..8c949f3
--- /dev/null
+++ b/kontor-angular/src/app/comic/artist/artist-detail/artist-detail.component.html
@@ -0,0 +1,5 @@
+<div>
+  <a [routerLink]="[artist().id]" routerLinkActive="active">
+    <span>{{ artist().name }}</span>
+  </a>
+</div>
diff --git a/kontor-angular/src/app/comic/artist/artist-detail/artist-detail.component.spec.ts b/kontor-angular/src/app/comic/artist/artist-detail/artist-detail.component.spec.ts
new file mode 100644
index 0000000..cf1fa88
--- /dev/null
+++ b/kontor-angular/src/app/comic/artist/artist-detail/artist-detail.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ArtistDetailComponent } from './artist-detail.component';
+
+describe('ArtistDetailComponent', () => {
+  let component: ArtistDetailComponent;
+  let fixture: ComponentFixture<ArtistDetailComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ArtistDetailComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ArtistDetailComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/kontor-angular/src/app/comic/artist/artist-detail/artist-detail.component.ts b/kontor-angular/src/app/comic/artist/artist-detail/artist-detail.component.ts
new file mode 100644
index 0000000..5bf9f95
--- /dev/null
+++ b/kontor-angular/src/app/comic/artist/artist-detail/artist-detail.component.ts
@@ -0,0 +1,14 @@
+import { Component, input, signal } from '@angular/core';
+import { Artist } from '../artist.model';
+import { RouterLink, RouterLinkActive } from '@angular/router';
+
+@Component({
+  selector: 'app-artist-detail',
+  imports: [RouterLink, RouterLinkActive],
+  templateUrl: './artist-detail.component.html',
+  styleUrl: './artist-detail.component.css'
+})
+export class ArtistDetailComponent {
+  artist = input.required<Artist>();
+
+}
diff --git a/kontor-angular/src/app/comic/artist/artist-list/artist-list.component.css b/kontor-angular/src/app/comic/artist/artist-list/artist-list.component.css
index e69de29..d95c44d 100644
--- a/kontor-angular/src/app/comic/artist/artist-list/artist-list.component.css
+++ b/kontor-angular/src/app/comic/artist/artist-list/artist-list.component.css
@@ -0,0 +1,14 @@
+ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  gap: 0.5rem;
+  overflow: auto;
+}
+
+@media (min-width: 768px) {
+  ul {
+    flex-direction: column;
+  }
+}
diff --git a/kontor-angular/src/app/comic/artist/artist-list/artist-list.component.html b/kontor-angular/src/app/comic/artist/artist-list/artist-list.component.html
index a6c80b6..984357c 100644
--- a/kontor-angular/src/app/comic/artist/artist-list/artist-list.component.html
+++ b/kontor-angular/src/app/comic/artist/artist-list/artist-list.component.html
@@ -1,8 +1,7 @@
-<p>artist-list works!</p>
 <ul>
   @for (artist of artists(); track artist.id) {
-  <li>
-    <h3>{{ artist.name }}</h3>
-  </li>
+    <li>
+      <app-artist-detail [artist]="artist"/>
+    </li>
   }
 </ul>
diff --git a/kontor-angular/src/app/comic/artist/artist-list/artist-list.component.ts b/kontor-angular/src/app/comic/artist/artist-list/artist-list.component.ts
index 7027275..441b24a 100644
--- a/kontor-angular/src/app/comic/artist/artist-list/artist-list.component.ts
+++ b/kontor-angular/src/app/comic/artist/artist-list/artist-list.component.ts
@@ -1,10 +1,11 @@
 import { Component, DestroyRef, inject, OnInit, signal } from '@angular/core';
 import { Artist } from '../artist.model';
 import { ArtistService } from '../artist.service';
+import { ArtistDetailComponent } from "../artist-detail/artist-detail.component";
 
 @Component({
   selector: 'app-artist-list',
-  imports: [],
+  imports: [ArtistDetailComponent],
   templateUrl: './artist-list.component.html',
   styleUrl: './artist-list.component.css'
 })
diff --git a/kontor-angular/src/app/comic/artist/artist.service.ts b/kontor-angular/src/app/comic/artist/artist.service.ts
index c72b9f7..6852eba 100644
--- a/kontor-angular/src/app/comic/artist/artist.service.ts
+++ b/kontor-angular/src/app/comic/artist/artist.service.ts
@@ -15,7 +15,7 @@ export class ArtistService {
   loadedArtists = this.artists.asReadonly();
 
   loadArtists() {
-    return this.fetchArtists('http://127.0.0.1:8800/api/comics/artists', 'Someting went wrong fetching sports. Please try again later-');
+    return this.fetchArtists('http://127.0.0.1:8800/api/comics/artists', 'Someting went wrong fetching artists. Please try again later-');
   }
 
   private fetchArtists(url: string, errorMessage: string) {