book-shelf: language/category/library filters never refresh the grid #1013

Closed
opened 2026-08-12 07:27:07 +00:00 by spikerj · 1 comment
Owner

Summary

BookShelfComponent.filteredBooks is a computed() that reads this.books() (a signal) plus three plain fields (sortCategory, sortLibrary, sortLangage). Changing a filter via tab click / sortByLanguage etc. mutates those plain fields only, so the computed is not invalidated and the card grid keeps showing the unfiltered list until something else updates books (e.g. a SignalR refresh).

Expected

Selecting a language/category/library tab should immediately narrow filteredBooks / the rendered cards.

Actual

Tab handlers set private string fields; filteredBooks() keeps returning the previous snapshot. Confirmed in unit tests (wave6 a4).

Fix sketch

Promote the three sort fields to signals (or a single filters signal) and read them inside the computed.

Location

projects/spikersoft/src/app/_components/book-shelf/book-shelf.component.ts

## Summary `BookShelfComponent.filteredBooks` is a `computed()` that reads `this.books()` (a signal) plus three plain fields (`sortCategory`, `sortLibrary`, `sortLangage`). Changing a filter via tab click / `sortByLanguage` etc. mutates those plain fields only, so the computed is **not** invalidated and the card grid keeps showing the unfiltered list until something else updates `books` (e.g. a SignalR refresh). ## Expected Selecting a language/category/library tab should immediately narrow `filteredBooks` / the rendered cards. ## Actual Tab handlers set private string fields; `filteredBooks()` keeps returning the previous snapshot. Confirmed in unit tests (wave6 a4). ## Fix sketch Promote the three sort fields to `signal`s (or a single `filters` signal) and read them inside the computed. ## Location `projects/spikersoft/src/app/_components/book-shelf/book-shelf.component.ts`
Author
Owner

Fixed in spikersoft-angular PR #823 (a0f0ccd9). Closing.

Fixed in `spikersoft-angular` [PR #823](https://git.spikersoft.com/spikerj/spikersoft-angular/pulls/823) (`a0f0ccd9`). Closing.
Sign in to join this conversation.