From 92cd9be8ec1f73c330f00f8264a978cd671c4c06 Mon Sep 17 00:00:00 2001
From: Thomas Peetz <thomas.peetz@ingenieurbuero-peetz.de>
Date: Mon, 6 Oct 2025 19:40:28 +0200
Subject: [PATCH] add first draft of search bar to comics list

---
 .../comic-comics-list.component.html          |  3 +++
 .../comic-comics-list.component.ts            | 23 +++++++++++++------
 2 files changed, 19 insertions(+), 7 deletions(-)

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
index 3c6d0ba..5b03ea9 100644
--- 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
@@ -1,3 +1,6 @@
+<div>
+  <input #searchQuery type="text" (input)="search($event.target.value)" placeholder="Search" />
+</div>
 <ul>
   @for (comic of comics(); track comic.id) {
     <li>
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
index 057306c..cb2e912 100644
--- 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
@@ -1,16 +1,21 @@
-import { Component, DestroyRef, inject, OnInit, signal } from '@angular/core';
+import { Component, computed, DestroyRef, inject, OnInit, signal } from '@angular/core';
 import { Comic } from '../comic.model';
 import { ComicService } from '../comic-comics/comic.service';
-import { ComicComicComponent } from "../comic-comic/comic-comic.component";
+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'
+  styleUrl: './comic-comics-list.component.css',
 })
 export class ComicComicsListComponent implements OnInit {
-  comics = signal<Comic[] | undefined>(undefined);
+  comicsFetched = signal<Comic[] | undefined>(undefined);
+  searchQuery = signal<string>('');
+  comics = computed(() => {
+    const sq = this.searchQuery();
+    return this.comicsFetched()?.filter(c => c.title.toLowerCase().includes(sq.toLowerCase()));
+  });
   isFetching = signal(false);
   error = signal('');
   private comicsService = inject(ComicService);
@@ -20,18 +25,22 @@ export class ComicComicsListComponent implements OnInit {
     this.isFetching.set(true);
     const subscription = this.comicsService.loadComics().subscribe({
       next: (comics) => {
-        this.comics.set(comics);
+        this.comicsFetched.set(comics);
       },
       error: (error: Error) => {
         this.error.set(error.message);
       },
       complete: () => {
         this.isFetching.set(false);
-      }
+      },
     });
 
     this.destroyRef.onDestroy(() => {
       subscription.unsubscribe();
-    })
+    });
+  }
+
+  search(query: string) {
+    this.searchQuery.set(query);
   }
 }