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
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,28 @@
|
||||
package templates
|
||||
|
||||
// FilterItem renders a single saved filter item for the list
|
||||
templ FilterItem(id string, name string) {
|
||||
<div
|
||||
class="flex items-center justify-between p-2 rounded hover:opacity-80"
|
||||
style="background-color: var(--bg-primary);"
|
||||
data-filter-id={ id }
|
||||
>
|
||||
<button
|
||||
data-action="load-filter"
|
||||
@click="loadFilter($event)"
|
||||
class="flex-1 text-left px-2 py-1 rounded"
|
||||
style="color: var(--text-primary);"
|
||||
>
|
||||
{ name }
|
||||
</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>
|
||||
}
|
||||
@@ -0,0 +1,67 @@
|
||||
// Code generated by templ - DO NOT EDIT.
|
||||
|
||||
// templ: version: v0.3.1001
|
||||
package templates
|
||||
|
||||
//lint:file-ignore SA4006 This context is only used if a nested component is present.
|
||||
|
||||
import "github.com/a-h/templ"
|
||||
import templruntime "github.com/a-h/templ/runtime"
|
||||
|
||||
// FilterItem renders a single saved filter item for the list
|
||||
func FilterItem(id string, name string) templ.Component {
|
||||
return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
|
||||
templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
|
||||
if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
|
||||
return templ_7745c5c3_CtxErr
|
||||
}
|
||||
templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
|
||||
if !templ_7745c5c3_IsBuffer {
|
||||
defer func() {
|
||||
templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
|
||||
if templ_7745c5c3_Err == nil {
|
||||
templ_7745c5c3_Err = templ_7745c5c3_BufErr
|
||||
}
|
||||
}()
|
||||
}
|
||||
ctx = templ.InitializeContext(ctx)
|
||||
templ_7745c5c3_Var1 := templ.GetChildren(ctx)
|
||||
if templ_7745c5c3_Var1 == nil {
|
||||
templ_7745c5c3_Var1 = templ.NopComponent
|
||||
}
|
||||
ctx = templ.ClearChildren(ctx)
|
||||
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<div class=\"flex items-center justify-between p-2 rounded hover:opacity-80\" style=\"background-color: var(--bg-primary);\" data-filter-id=\"")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
var templ_7745c5c3_Var2 string
|
||||
templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(id)
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/filter_item.templ`, Line: 8, Col: 21}
|
||||
}
|
||||
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var2))
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "\"><button data-action=\"load-filter\" @click=\"loadFilter($event)\" class=\"flex-1 text-left px-2 py-1 rounded\" style=\"color: var(--text-primary);\">")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
var templ_7745c5c3_Var3 string
|
||||
templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(name)
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/filter_item.templ`, Line: 16, Col: 9}
|
||||
}
|
||||
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "</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>")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
return nil
|
||||
})
|
||||
}
|
||||
|
||||
var _ = templruntime.GeneratedTemplate
|
||||
Reference in New Issue
Block a user