From fd7a6bd1a18366337c6b52b5b02f1f3b41c2cb7b Mon Sep 17 00:00:00 2001
From: Thomas Peetz <thomas.peetz@ingenieurbuero-peetz.de>
Date: Fri, 19 Sep 2025 22:34:44 +0200
Subject: [PATCH] load comic details

---
 .../comic-comics/comic-comics.component.html  |  4 ++++
 .../comic-comics/comic-comics.component.ts    | 15 +++++++++++--
 .../kontor/comic/comic-comics/comic.model.ts  | 17 +++++++++++++++
 .../comic/comic-comics/comic.service.ts       | 19 ++++++++++++++++-
 .../comic-section/comic-section.routes.ts     | 21 +++++++++++--------
 5 files changed, 64 insertions(+), 12 deletions(-)

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 cb21067..cc60f9f 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
@@ -4,7 +4,11 @@
     </div>
     <div class="child">
         <div class="float-details-element">
+          @if (comic()) {
+            <h2>{{ comic().title }}</h2>
+          } @else {
             <h2>Comic Details</h2>
+          }
         </div>
     </div>
 </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 b5526b8..3c15733 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,5 +1,8 @@
-import { Component } from '@angular/core';
+import { Component, inject, input } from '@angular/core';
 import { ComicComicsListComponent } from "../comic-comics-list/comic-comics-list.component";
+import { ComicDetails } from './comic.model';
+import { ActivatedRouteSnapshot, ResolveFn, RouterStateSnapshot } from '@angular/router';
+import { ComicService } from './comic.service';
 
 @Component({
   selector: 'app-comic-comics',
@@ -8,5 +11,13 @@ import { ComicComicsListComponent } from "../comic-comics-list/comic-comics-list
   styleUrl: './comic-comics.component.css'
 })
 export class ComicComicsComponent {
-
+  comic = input.required<ComicDetails>();
 }
+
+export const comicResolver: ResolveFn<ComicDetails> = (route: ActivatedRouteSnapshot, state: RouterStateSnapshot) => {
+  const comicService = inject(ComicService);
+  const comicId = route.paramMap.get('comicId');
+  const comicDetails = comicService.loadComicDetails(comicId);
+  console.log(comicDetails);
+  return comicDetails;
+};
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
index 444d197..98bdc10 100644
--- a/kontor-angular/src/app/kontor/comic/comic-comics/comic.model.ts
+++ b/kontor-angular/src/app/kontor/comic/comic-comics/comic.model.ts
@@ -3,3 +3,20 @@ export interface Comic {
   title: string;
   completed: boolean;
 }
+
+export interface ComicWork {
+  worktype: string;
+
+}
+export interface ComicDetails {
+  id: string;
+  created: string;
+  title: string;
+  completed: boolean;
+  current_order: boolean;
+  weblink: string;
+  publisher: string;
+  volumes: [
+    name: string,
+  ];
+}
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
index 90ed19f..9ba608f 100644
--- a/kontor-angular/src/app/kontor/comic/comic-comics/comic.service.ts
+++ b/kontor-angular/src/app/kontor/comic/comic-comics/comic.service.ts
@@ -1,6 +1,6 @@
 import { HttpClient } from "@angular/common/http";
 import { inject, Injectable, signal } from "@angular/core";
-import { Comic } from "./comic.model";
+import { Comic, ComicDetails } from "./comic.model";
 import { catchError, map, throwError } from "rxjs";
 
 @Injectable({
@@ -16,6 +16,23 @@ export class ComicService {
     return this.fetchComics('http://127.0.0.1:8800/api/comics/comics', 'Someting went wrong fetching comics. Please try again later.');
   }
 
+  loadComicDetails(comicId: string | null) {
+    return this.fetchComicDetails('http://127.0.0.1:8800/api/comics/comics/' + comicId, 'Someting went wrong fetching comics. Please try again later.');
+  }
+
+  private fetchComicDetails(url: string, errorMessage: string) {
+    return this.httpClient.get<ComicDetails>(url).pipe(
+      map((resData) => {
+        console.log(resData);
+        return resData;
+      }),
+      catchError((error) => {
+        console.log(error);
+        return throwError(() => new Error(errorMessage));
+      })
+    );
+  }
+
   private fetchComics(url: string, errorMessage: string) {
     return this.httpClient.get<Comic[]>(url).pipe(
       map((resData) => resData),
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 23bd73d..465a5d3 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
@@ -1,29 +1,32 @@
 import { Routes } from "@angular/router";
 import { ComicArtistsComponent } from "../comic-artists/comic-artists.component";
 import { ComicPublishersComponent } from './../comic-publishers/comic-publishers.component';
-import { ComicComicsComponent } from "../comic-comics/comic-comics.component";
+import { ComicComicsComponent, comicResolver } from "../comic-comics/comic-comics.component";
 
 export const comicRoutes: Routes = [
     {
-        path: 'comics', 
+        path: 'comics',
         component: ComicComicsComponent
     },
     {
-        path: 'comics/:comicId',
-        component: ComicComicsComponent,
+      path: 'comics/:comicId',
+      component: ComicComicsComponent,
+      resolve: {
+        comic: comicResolver
+      }
     },
-    { 
-        path: 'publisher', 
+    {
+        path: 'publisher',
         component: ComicPublishersComponent
     },
     // {
     //     path: 'publishers/:publisherId',
     //     component: PublishersComponent,
     // },
-    { 
-        path: 'artist', 
+    {
+        path: 'artist',
         component: ComicArtistsComponent
-    },    
+    },
     {
         path: 'artist/:artistId',
         component: ComicArtistsComponent,