feat: implement 3-state has_cover filter and filter item component
Template changes for bookshelf page: Cover filter (tristate button): - Replace checkbox with 3-state button: Any (null) → Has Cover → No Cover - Add Alpine state management for hasCoverState (true/false/null) - Button shows dynamic icon and label based on state: - ○ Cover: Any - ✓ Has Cover - ✗ No Cover - Hidden input conditionally rendered by Alpine (x-if="hasCoverState !== null") - Only submits "true"/"false" or not at all, never empty string - Theme-aware styling using CSS variables and color-mix() Filter management improvements: - Add name="library" attribute to library select for proper form submission - Create filter_item.templ component for rendering individual filter items - Add Load Filter and Delete Filter buttons with Alpine event handlers - Update save filter form to use HTMX attributes: - hx-post, hx-target, hx-swap, hx-include for AJAX submission - @htmx:afterRequest event for modal cleanup This fixes issues where: - Library wasn't being submitted with search/filter requests - has_cover was sending empty string causing no results - Saved filters couldn't be loaded or deleted
This commit is contained in:
+40
-18
@@ -46,6 +46,7 @@ templ BookShelf(
|
||||
</label>
|
||||
<select
|
||||
id="library-select"
|
||||
name="library"
|
||||
class="w-full px-3 py-2 border rounded-lg"
|
||||
style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);"
|
||||
>
|
||||
@@ -63,13 +64,15 @@ templ BookShelf(
|
||||
</select>
|
||||
</div>
|
||||
<!-- Search Input -->
|
||||
<div class="flex-1 min-w-[200px]">
|
||||
<div class="flex-1 min-w-[150px]">
|
||||
<label class="block text-sm font-medium mb-2" style="color: var(--text-secondary)">
|
||||
Search
|
||||
</label>
|
||||
<input
|
||||
name="q"
|
||||
type="text"
|
||||
class="w-full px-3 py-2 border rounded-lg"
|
||||
style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);"
|
||||
placeholder="Search all fields..."
|
||||
/>
|
||||
</div>
|
||||
@@ -173,19 +176,31 @@ templ BookShelf(
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Has Cover Filter -->
|
||||
<div class="flex items-end">
|
||||
<label class="flex items-center gap-2 cursor-pointer">
|
||||
<input type="hidden" name="has_cover" value="false"/>
|
||||
<input
|
||||
type="checkbox"
|
||||
name="has_cover"
|
||||
value="true"
|
||||
checked
|
||||
class="w-4 h-4 rounded"
|
||||
/>
|
||||
<span class="text-sm" style="color: var(--text-primary)">Has Cover</span>
|
||||
<!-- Has Cover Filter - TriState Button -->
|
||||
<div class="flex-1 min-w-[150px]">
|
||||
<label class="block text-sm font-medium mb-2" style="color: var(--text-secondary)">
|
||||
Cover Filter
|
||||
</label>
|
||||
<input
|
||||
type="button"
|
||||
id="has-cover-tristate"
|
||||
class="tristate-btn w-full transition-all duration-300 cursor-pointer flex items-center justify-center gap-2 px-4 py-2 rounded-lg border text-sm"
|
||||
:class="{
|
||||
'state-null': hasCoverState === null,
|
||||
'state-true': hasCoverState === true,
|
||||
'state-false': hasCoverState === false
|
||||
}"
|
||||
:value="hasCoverState === null ? '○ Cover: Any' : hasCoverState === true ? '✓ Has Cover' : '✗ No Cover'"
|
||||
@click="cycleHasCover()"
|
||||
/>
|
||||
<!-- Hidden input for HTMX form submission - conditionally rendered -->
|
||||
<template x-if="hasCoverState !== null">
|
||||
<input
|
||||
type="hidden"
|
||||
name="has_cover"
|
||||
:value="hasCoverState ? 'true' : 'false'"
|
||||
/>
|
||||
</template>
|
||||
</div>
|
||||
<!-- Sort By Dropdown (PRESERVED) -->
|
||||
<div class="flex-1 min-w-[150px]">
|
||||
@@ -257,12 +272,11 @@ templ BookShelf(
|
||||
<!-- Filter List -->
|
||||
<div class="space-y-2" id="saved-filters-list">
|
||||
for _, filter := range savedFilters {
|
||||
filterUUID := string(filter.ID.Bytes[0:16])
|
||||
<div class="flex items-center justify-between p-2 rounded hover:opacity-80" style="background-color: var(--bg-primary);" data-filter-id={ uuidToString(filter.ID) }>
|
||||
<button data-action="load-filter" class="flex-1 text-left px-2 py-1 rounded" style="color: var(--text-primary);">
|
||||
<button data-action="load-filter" @click="loadFilter($event)" class="flex-1 text-left px-2 py-1 rounded" style="color: var(--text-primary);">
|
||||
{ filter.Name }
|
||||
</button>
|
||||
<button data-action="delete-filter" class="p-1 hover:opacity-70 rounded" style="color: var(--text-secondary);" title="Delete filter">🗑️</button>
|
||||
<button data-action="delete-filter" @click="deleteFilter($event)" class="p-1 hover:opacity-70 rounded" style="color: var(--text-secondary);" title="Delete filter">🗑️</button>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
@@ -349,19 +363,27 @@ templ BookShelf(
|
||||
style="color: var(--text-primary)"
|
||||
>✕</button>
|
||||
</div>
|
||||
<form @submit="saveFilter($event)">
|
||||
<form
|
||||
hx-post="/api/saved-filters"
|
||||
hx-target="#saved-filters-list"
|
||||
hx-swap="beforeend"
|
||||
hx-include="#filter-form"
|
||||
@htmx:afterRequest="if(event.detail.xhr.status < 400) { afterFilterSave() }"
|
||||
>
|
||||
<div class="mb-4">
|
||||
<label class="block text-sm font-medium mb-2" style="color: var(--text-secondary)">
|
||||
Filter Name
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
x-model="filterName"
|
||||
name="filter_name"
|
||||
placeholder="My Custom Filter"
|
||||
class="w-full px-3 py-2 border rounded-lg"
|
||||
style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);"
|
||||
required
|
||||
/>
|
||||
<div id="filter-save-error" style="display: none; color: #ef4444; padding: 0.75rem; border-radius: 0.5rem; margin-bottom: 1rem;"></div>
|
||||
<input type="hidden" name="resource_type" value="media-items"/>
|
||||
</div>
|
||||
<div class="flex justify-end gap-2">
|
||||
<button
|
||||
|
||||
Reference in New Issue
Block a user