From 63ac0231dc4c504a399724790b79c81dfae87e28 Mon Sep 17 00:00:00 2001
From: Thomas Peetz <thomas.peetz@cimt-ag.de>
Date: Fri, 19 Sep 2025 00:55:04 +0200
Subject: [PATCH] add route for specific comic

---
 .../comic-comic/comic-comic.component.css     |  0
 .../comic-comic/comic-comic.component.html    |  7 ++++
 .../comic-comic/comic-comic.component.spec.ts | 23 ++++++++++++
 .../comic-comic/comic-comic.component.ts      | 13 +++++++
 .../comic-comics-list.component.css           |  0
 .../comic-comics-list.component.html          |  9 +++++
 .../comic-comics-list.component.spec.ts       | 23 ++++++++++++
 .../comic-comics-list.component.ts            | 37 +++++++++++++++++++
 .../comic-comics/comic-comics.component.html  |  6 +++
 .../comic-comics/comic-comics.component.ts    |  3 +-
 .../kontor/comic/comic-comics/comic.model.ts  |  5 +++
 .../comic/comic-comics/comic.service.ts       | 28 ++++++++++++++
 .../comic-section/comic-section.routes.ts     |  8 ++--
 13 files changed, 157 insertions(+), 5 deletions(-)
 create mode 100644 kontor-angular/src/app/kontor/comic/comic-comic/comic-comic.component.css
 create mode 100644 kontor-angular/src/app/kontor/comic/comic-comic/comic-comic.component.html
 create mode 100644 kontor-angular/src/app/kontor/comic/comic-comic/comic-comic.component.spec.ts
 create mode 100644 kontor-angular/src/app/kontor/comic/comic-comic/comic-comic.component.ts
 create mode 100644 kontor-angular/src/app/kontor/comic/comic-comics-list/comic-comics-list.component.css
 create mode 100644 kontor-angular/src/app/kontor/comic/comic-comics-list/comic-comics-list.component.html
 create mode 100644 kontor-angular/src/app/kontor/comic/comic-comics-list/comic-comics-list.component.spec.ts
 create mode 100644 kontor-angular/src/app/kontor/comic/comic-comics-list/comic-comics-list.component.ts
 create mode 100644 kontor-angular/src/app/kontor/comic/comic-comics/comic.model.ts
 create mode 100644 kontor-angular/src/app/kontor/comic/comic-comics/comic.service.ts

diff --git a/kontor-angular/src/app/kontor/comic/comic-comic/comic-comic.component.css b/kontor-angular/src/app/kontor/comic/comic-comic/comic-comic.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/kontor-angular/src/app/kontor/comic/comic-comic/comic-comic.component.html b/kontor-angular/src/app/kontor/comic/comic-comic/comic-comic.component.html
new file mode 100644
index 0000000..684553a
--- /dev/null
+++ b/kontor-angular/src/app/kontor/comic/comic-comic/comic-comic.component.html
@@ -0,0 +1,7 @@
+<p>comic-comic works!</p>
+<p>comic works!</p>
+<div>
+  <a [routerLink]="['/', 'comic', 'comics', comic().id]" routerLinkActive="active">
+    <span>{{ comic().title }}</span>
+  </a>
+</div>
diff --git a/kontor-angular/src/app/kontor/comic/comic-comic/comic-comic.component.spec.ts b/kontor-angular/src/app/kontor/comic/comic-comic/comic-comic.component.spec.ts
new file mode 100644
index 0000000..c390c8d
--- /dev/null
+++ b/kontor-angular/src/app/kontor/comic/comic-comic/comic-comic.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ComicComicComponent } from './comic-comic.component';
+
+describe('ComicComicComponent', () => {
+  let component: ComicComicComponent;
+  let fixture: ComponentFixture<ComicComicComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ComicComicComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ComicComicComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/kontor-angular/src/app/kontor/comic/comic-comic/comic-comic.component.ts b/kontor-angular/src/app/kontor/comic/comic-comic/comic-comic.component.ts
new file mode 100644
index 0000000..5508e11
--- /dev/null
+++ b/kontor-angular/src/app/kontor/comic/comic-comic/comic-comic.component.ts
@@ -0,0 +1,13 @@
+import { Component, input } from '@angular/core';
+import { Comic } from '../comic-comics/comic.model';
+import { RouterLink, RouterLinkActive } from '@angular/router';
+
+@Component({
+  selector: 'app-comic-comic',
+  imports: [RouterLink, RouterLinkActive],
+  templateUrl: './comic-comic.component.html',
+  styleUrl: './comic-comic.component.css'
+})
+export class ComicComicComponent {
+  comic = input.required<Comic>();
+}
diff --git a/kontor-angular/src/app/kontor/comic/comic-comics-list/comic-comics-list.component.css b/kontor-angular/src/app/kontor/comic/comic-comics-list/comic-comics-list.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/kontor-angular/src/app/kontor/comic/comic-comics-list/comic-comics-list.component.html b/kontor-angular/src/app/kontor/comic/comic-comics-list/comic-comics-list.component.html
new file mode 100644
index 0000000..938afc3
--- /dev/null
+++ b/kontor-angular/src/app/kontor/comic/comic-comics-list/comic-comics-list.component.html
@@ -0,0 +1,9 @@
+<p>comic-comics-list works!</p>
+<p>comic-list works!</p>
+<ul>
+  @for (comic of comics(); track comic.id) {
+    <li>
+      <app-comic-comic [comic]="comic"/>
+    </li>
+  }
+</ul>
diff --git a/kontor-angular/src/app/kontor/comic/comic-comics-list/comic-comics-list.component.spec.ts b/kontor-angular/src/app/kontor/comic/comic-comics-list/comic-comics-list.component.spec.ts
new file mode 100644
index 0000000..a68ff6d
--- /dev/null
+++ b/kontor-angular/src/app/kontor/comic/comic-comics-list/comic-comics-list.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ComicComicsListComponent } from './comic-comics-list.component';
+
+describe('ComicComicsListComponent', () => {
+  let component: ComicComicsListComponent;
+  let fixture: ComponentFixture<ComicComicsListComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ComicComicsListComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ComicComicsListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/kontor-angular/src/app/kontor/comic/comic-comics-list/comic-comics-list.component.ts b/kontor-angular/src/app/kontor/comic/comic-comics-list/comic-comics-list.component.ts
new file mode 100644
index 0000000..ec94c71
--- /dev/null
+++ b/kontor-angular/src/app/kontor/comic/comic-comics-list/comic-comics-list.component.ts
@@ -0,0 +1,37 @@
+import { Component, DestroyRef, inject, OnInit, signal } from '@angular/core';
+import { Comic } from '../comic-comics/comic.model';
+import { ComicService } from '../comic-comics/comic.service';
+import { ComicComicComponent } from "../comic-comic/comic-comic.component";
+
+@Component({
+  selector: 'app-comic-comics-list',
+  imports: [ComicComicComponent],
+  templateUrl: './comic-comics-list.component.html',
+  styleUrl: './comic-comics-list.component.css'
+})
+export class ComicComicsListComponent implements OnInit {
+  comics = signal<Comic[] | undefined>(undefined);
+  isFetching = signal(false);
+  error = signal('');
+  private comicsService = inject(ComicService);
+  private destroyRef = inject(DestroyRef);
+
+  ngOnInit() {
+    this.isFetching.set(true);
+    const subscription = this.comicsService.loadComics().subscribe({
+      next: (comics) => {
+        this.comics.set(comics);
+      },
+      error: (error: Error) => {
+        this.error.set(error.message);
+      },
+      complete: () => {
+        this.isFetching.set(false);
+      }
+    });
+
+    this.destroyRef.onDestroy(() => {
+      subscription.unsubscribe();
+    })
+  }
+}
diff --git a/kontor-angular/src/app/kontor/comic/comic-comics/comic-comics.component.html b/kontor-angular/src/app/kontor/comic/comic-comics/comic-comics.component.html
index 3f1c3dc..cbcec80 100644
--- a/kontor-angular/src/app/kontor/comic/comic-comics/comic-comics.component.html
+++ b/kontor-angular/src/app/kontor/comic/comic-comics/comic-comics.component.html
@@ -1 +1,7 @@
 <p>comic-comics works!</p>
+<div>
+    <app-comic-comics-list/>
+</div>
+<div>
+    <h2>Comic Details</h2>
+</div>
diff --git a/kontor-angular/src/app/kontor/comic/comic-comics/comic-comics.component.ts b/kontor-angular/src/app/kontor/comic/comic-comics/comic-comics.component.ts
index bf8e770..b5526b8 100644
--- a/kontor-angular/src/app/kontor/comic/comic-comics/comic-comics.component.ts
+++ b/kontor-angular/src/app/kontor/comic/comic-comics/comic-comics.component.ts
@@ -1,8 +1,9 @@
 import { Component } from '@angular/core';
+import { ComicComicsListComponent } from "../comic-comics-list/comic-comics-list.component";
 
 @Component({
   selector: 'app-comic-comics',
-  imports: [],
+  imports: [ComicComicsListComponent],
   templateUrl: './comic-comics.component.html',
   styleUrl: './comic-comics.component.css'
 })
diff --git a/kontor-angular/src/app/kontor/comic/comic-comics/comic.model.ts b/kontor-angular/src/app/kontor/comic/comic-comics/comic.model.ts
new file mode 100644
index 0000000..444d197
--- /dev/null
+++ b/kontor-angular/src/app/kontor/comic/comic-comics/comic.model.ts
@@ -0,0 +1,5 @@
+export interface Comic {
+  id: string;
+  title: string;
+  completed: boolean;
+}
diff --git a/kontor-angular/src/app/kontor/comic/comic-comics/comic.service.ts b/kontor-angular/src/app/kontor/comic/comic-comics/comic.service.ts
new file mode 100644
index 0000000..90ed19f
--- /dev/null
+++ b/kontor-angular/src/app/kontor/comic/comic-comics/comic.service.ts
@@ -0,0 +1,28 @@
+import { HttpClient } from "@angular/common/http";
+import { inject, Injectable, signal } from "@angular/core";
+import { Comic } from "./comic.model";
+import { catchError, map, throwError } from "rxjs";
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ComicService {
+  private httpClient = inject(HttpClient);
+  private comics = signal<Comic[]>([]);
+
+  loadedComics = this.comics.asReadonly();
+
+  loadComics() {
+    return this.fetchComics('http://127.0.0.1:8800/api/comics/comics', 'Someting went wrong fetching comics. Please try again later.');
+  }
+
+  private fetchComics(url: string, errorMessage: string) {
+    return this.httpClient.get<Comic[]>(url).pipe(
+      map((resData) => resData),
+      catchError((error) => {
+        console.log(error);
+        return throwError(() => new Error(errorMessage));
+      })
+    );
+  }
+}
diff --git a/kontor-angular/src/app/kontor/comic/comic-section/comic-section.routes.ts b/kontor-angular/src/app/kontor/comic/comic-section/comic-section.routes.ts
index f6048bd..23bd73d 100644
--- a/kontor-angular/src/app/kontor/comic/comic-section/comic-section.routes.ts
+++ b/kontor-angular/src/app/kontor/comic/comic-section/comic-section.routes.ts
@@ -8,10 +8,10 @@ export const comicRoutes: Routes = [
         path: 'comics', 
         component: ComicComicsComponent
     },
-    // {
-    //     path: 'comics/:comicId',
-    //     component: ComicDetailsComponent,
-    // },
+    {
+        path: 'comics/:comicId',
+        component: ComicComicsComponent,
+    },
     { 
         path: 'publisher', 
         component: ComicPublishersComponent