kontor-angular/src/app/kontor/comic/comic-artist/comic-artist.component.ts

@@ -1,5 +1,5 @@
 import { Component, input } from '@angular/core';
-import { Artist } from '../comic-artists/artist.model';
+import { Artist } from '../comic.model';
 import { RouterLink, RouterLinkActive } from '@angular/router';
 
 @Component({

kontor-angular/src/app/kontor/comic/comic-artists-list/comic-artists-list.component.ts

@@ -1,5 +1,5 @@
 import { Component, DestroyRef, inject, OnInit, signal } from '@angular/core';
-import { Artist } from '../comic-artists/artist.model';
+import { Artist } from '../comic.model';
 import { ComicArtistComponent } from '../comic-artist/comic-artist.component';
 import { ArtistService } from '../comic-artists/artist.service';
 

kontor-angular/src/app/kontor/comic/comic-artists/artist.model.ts

@@ -1,10 +0,0 @@
-export interface Artist {
-  id: string;
-  name: string;
-}
-
-export interface ArtistDetails {
-  id: string;
-  name: string;
-  weblink: string;
-}

kontor-angular/src/app/kontor/comic/comic-artists/artist.service.ts

@@ -2,7 +2,7 @@ import { inject, Injectable, signal } from "@angular/core";
 import { HttpClient } from "@angular/common/http";
 import { catchError, map, throwError } from "rxjs";
 import { ErrorService } from "../../../shared/error.service";
-import { Artist, ArtistDetails } from "./artist.model";
+import { Artist, ArtistDetails } from "../comic.model";
 
 @Injectable({
   providedIn: 'root',

kontor-angular/src/app/kontor/comic/comic-artists/comic-artists.component.css

@@ -2,4 +2,12 @@
     display: grid;
     grid-template-columns: 1fr 1fr;
     grid-gap: 20px;
+}
+section {
+margin-left: 10px;
+padding: 10px;
+}
+article {
+    margin-left: 10px;
+    padding: 5px;
 }

kontor-angular/src/app/kontor/comic/comic-artists/comic-artists.component.html

@@ -7,6 +7,16 @@
     @if (artist()) {
       <h2>{{ artist().name }}</h2>
       <a href="{{ artist().weblink }}">{{ artist().name }}</a>
+        @for (work of artist().works; track work.worktype.id) {
+          <section>
+            <app-comic-worktype [worktype]="work.worktype"/>
+              @for (comic of work.comics; track comic.id) {
+                <article>
+                  <app-comic-comic [comic]="comic"/>
+                </article>
+              }
+          </section>
+        }
     } @else {
       <h2>Artist Details</h2>
     }

kontor-angular/src/app/kontor/comic/comic-artists/comic-artists.component.ts

@@ -1,12 +1,14 @@
 import { Component, inject, input } from '@angular/core';
 import { ComicArtistsListComponent } from '../comic-artists-list/comic-artists-list.component';
-import { ArtistDetails } from './artist.model';
 import { ActivatedRouteSnapshot, ResolveFn, RouterStateSnapshot } from '@angular/router';
 import { ArtistService } from './artist.service';
+import { ComicComicComponent } from "../comic-comic/comic-comic.component";
+import { ComicWorktypeComponent } from "../comic-worktype/comic-worktype.component";
+import { ArtistDetails } from '../comic.model';
 
 @Component({
   selector: 'app-comic-artists',
-  imports: [ComicArtistsListComponent],
+  imports: [ComicArtistsListComponent, ComicComicComponent, ComicWorktypeComponent],
   templateUrl: './comic-artists.component.html',
   styleUrl: './comic-artists.component.css'
 })

kontor-angular/src/app/kontor/comic/comic-comic/comic-comic.component.ts

@@ -1,5 +1,5 @@
 import { Component, input } from '@angular/core';
-import { Comic } from '../comic-comics/comic.model';
+import { Comic } from '../comic.model';
 import { RouterLink, RouterLinkActive } from '@angular/router';
 
 @Component({

kontor-angular/src/app/kontor/comic/comic-comics-list/comic-comics-list.component.ts

@@ -1,5 +1,5 @@
 import { Component, DestroyRef, inject, OnInit, signal } from '@angular/core';
-import { Comic } from '../comic-comics/comic.model';
+import { Comic } from '../comic.model';
 import { ComicService } from '../comic-comics/comic.service';
 import { ComicComicComponent } from "../comic-comic/comic-comic.component";
 

kontor-angular/src/app/kontor/comic/comic-comics/comic-comics.component.ts

@@ -1,6 +1,6 @@
 import { Component, inject, input } from '@angular/core';
 import { ComicComicsListComponent } from "../comic-comics-list/comic-comics-list.component";
-import { ComicDetails } from './comic.model';
+import { ComicDetails } from '../comic.model';
 import { ActivatedRouteSnapshot, ResolveFn, RouterStateSnapshot } from '@angular/router';
 import { ComicService } from './comic.service';
 

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, ComicDetails } from "./comic.model";
+import { Comic, ComicDetails } from "../comic.model";
 import { catchError, map, throwError } from "rxjs";
 
 @Injectable({

kontor-angular/src/app/kontor/comic/comic-worktype/comic-worktype.component.html

@@ -0,0 +1,5 @@
+<div>
+  <a [routerLink]="['/', 'comic', 'worktype', worktype().id]" routerLinkActive="active">
+    <span>{{ worktype().name }}</span>
+  </a>
+</div>

kontor-angular/src/app/kontor/comic/comic-worktype/comic-worktype.component.spec.ts

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

kontor-angular/src/app/kontor/comic/comic-worktype/comic-worktype.component.ts

@@ -0,0 +1,13 @@
+import { Component, input } from '@angular/core';
+import { RouterLink, RouterLinkActive } from '@angular/router';
+import { Worktype } from '../comic.model';
+
+@Component({
+  selector: 'app-comic-worktype',
+  imports: [RouterLink, RouterLinkActive],
+  templateUrl: './comic-worktype.component.html',
+  styleUrl: './comic-worktype.component.css'
+})
+export class ComicWorktypeComponent {
+  worktype = input.required<Worktype>();
+}

kontor-angular/src/app/kontor/comic/comic.model.ts

@@ -1,3 +1,15 @@
+
+
+export interface Artist {
+  id: string;
+  name: string;
+}
+
+export interface Worktype {
+  id: string;
+  name: string;
+}
+
 export interface Comic {
   id: string;
   title: string;
@@ -20,3 +32,15 @@ export interface ComicDetails {
     name: string,
   ];
 }
+
+export interface ArtistWorktypeComics {
+  worktype: Worktype;
+  comics: Comic[];
+}
+
+export interface ArtistDetails {
+  id: string;
+  name: string;
+  weblink: string;
+  works: ArtistWorktypeComics[];
+}