diff options
| author | Tyler Hoang <tyler@tylerhoang.xyz> | 2026-05-06 17:12:46 -0700 |
|---|---|---|
| committer | Tyler Hoang <tyler@tylerhoang.xyz> | 2026-05-06 17:12:46 -0700 |
| commit | 4bbafdd460945eb506ddb07b9068731245708812 (patch) | |
| tree | 3a3ac9151fb9db3d57af10d781658c13b1a2cfdd /templates | |
| parent | 21f0cb70ca8f6c1731bf0e514e2668f42ea00718 (diff) | |
Add search, filter, and sort functionality to film shelves
- Add _SORT_COLUMNS dict to routers/films.py with 8 sort options
- Extend _get_shelf_query to accept q (search) and sort parameters
- Update /films/partial endpoint to accept q/sort query params and pass
search_active to template to suppress month grouping when searching
- Add filter bar (search input + sort select) to templates/index.html
- Add data-shelf attribute to #film-feed for JS to read current shelf
- Rewrite infinite scroll JS to support debounced search (300ms),
feed reset on filter/sort change, and pass params on all fetches
Filters text search by title OR director (case-insensitive ilike).
Sort options: date watched (newest/oldest), title (A-Z/Z-A), year,
stars. Month grouping disabled when search is active.
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
Diffstat (limited to 'templates')
| -rw-r--r-- | templates/index.html | 22 |
1 files changed, 21 insertions, 1 deletions
diff --git a/templates/index.html b/templates/index.html index cb0e1fc..dc76e5d 100644 --- a/templates/index.html +++ b/templates/index.html @@ -13,6 +13,26 @@ </div> </section> + <div class="search-row" style="margin-bottom: 20px;"> + <input + type="search" + id="film-search" + placeholder="Search by title or director…" + autocomplete="off" + > + <select id="film-sort"> + <option value="">Default order</option> + <option value="date_watched_desc">Date watched — newest</option> + <option value="date_watched_asc">Date watched — oldest</option> + <option value="title_asc">Title — A → Z</option> + <option value="title_desc">Title — Z → A</option> + <option value="year_desc">Year — newest</option> + <option value="year_asc">Year — oldest</option> + <option value="stars_desc">Stars — highest</option> + <option value="stars_asc">Stars — lowest</option> + </select> + </div> + {% if imported is not none %} <div class="notice">{{ imported }} entries imported.</div> {% endif %} @@ -38,7 +58,7 @@ {% endif %} {% if films %} - <section class="diary-feed" id="film-feed" aria-label="Diary entries"> + <section class="diary-feed" id="film-feed" data-shelf="{{ active_shelf }}" aria-label="Diary entries"> {% if active_shelf == 'diary' and grouped_films %} {% for group in grouped_films %} <div class="month-group" data-month="{{ group.month }}"> |