added issue works on artist details

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

@@ -4,10 +4,13 @@
     grid-gap: 20px;
 }
 section {
-margin-left: 10px;
-padding: 10px;
+    margin-left: 10px;
+    padding: 10px;
+    background-color: darkgrey;
+    border-radius: 10px;
+    margin-bottom: 10px;
 }
 article {
     margin-left: 10px;
     padding: 5px;
-}
+}

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

@@ -5,18 +5,30 @@
   </div>
   <div>
     @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>
-        }
+      <section>
+        <h2>{{ artist().name }}</h2>
+        <a href="{{ artist().weblink }}" style="background-color: green;">{{ artist().name }}</a>
+      </section>
+      @for (work of artist().comic_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>
+      }
+      @for (work of artist().issue_works; track work.worktype.id) {
+        <section>
+          <app-comic-worktype [worktype]="work.worktype"/>
+            @for (issue of work.issues; track issue.id) {
+              <article>
+                <app-comic-comic [comic]="issue.comic"/>
+              </article>
+            }
+        </section>
+      }
     } @else {
       <h2>Artist Details</h2>
     }

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

@@ -16,6 +16,20 @@ export interface Comic {
   completed: boolean;
 }
 
+export interface Volume {
+  id: string;
+  name: string;
+}
+
+export interface Issue {
+    id: string;
+    issue_number: string;
+    in_stock: boolean;
+    is_read: boolean;
+    comic: Comic;
+    volume: Volume | undefined
+
+}
 export interface ComicWork {
   worktype: string;
 
@@ -38,9 +52,14 @@ export interface ArtistWorktypeComics {
   comics: Comic[];
 }
 
+export interface ArtistWorktypeIssues {
+  worktype: Worktype;
+  issues: Issue[];
+}
 export interface ArtistDetails {
   id: string;
   name: string;
   weblink: string;
-  works: ArtistWorktypeComics[];
+  comic_works: ArtistWorktypeComics[];
+  issue_works: ArtistWorktypeIssues[];
 }