diff options
Diffstat (limited to 'web/templates/partials/shopping-tab.html')
| -rw-r--r-- | web/templates/partials/shopping-tab.html | 40 |
1 files changed, 38 insertions, 2 deletions
diff --git a/web/templates/partials/shopping-tab.html b/web/templates/partials/shopping-tab.html index 9d49122..4937b73 100644 --- a/web/templates/partials/shopping-tab.html +++ b/web/templates/partials/shopping-tab.html @@ -53,6 +53,21 @@ </div> </form> + <!-- New store --> + <form class="flex gap-2" + hx-post="/shopping/stores" + hx-target="#shopping-items-list" + hx-swap="innerHTML" + hx-on::after-request="if(event.detail.successful) this.reset()"> + <input type="hidden" name="grouped" value="{{.Grouped}}"> + <input type="text" name="name" placeholder="New store..." + class="flex-1 bg-white/5 border border-white/10 rounded-lg px-3 py-2 text-white placeholder-white/30 focus:outline-none focus:ring-1 focus:ring-white/20 text-sm" + required autocomplete="off"> + <button type="submit" class="bg-white/10 hover:bg-white/20 text-white/70 hover:text-white px-4 py-2 rounded-lg text-sm transition-colors"> + Add store + </button> + </form> + <!-- Items List Container --> <div id="shopping-items-list"> {{template "shopping-items-content" .}} @@ -114,7 +129,10 @@ <ul class="space-y-2"> {{range .Items}} {{if not .Checked}} - <li class="flex items-center gap-3 p-3 bg-card bg-card-hover transition-colors rounded-lg border border-white/5"> + <li class="flex items-center gap-3 p-3 bg-card bg-card-hover transition-colors rounded-lg border border-white/5 cursor-pointer" + hx-get="/shopping/item/{{.ID}}/edit?source={{.Source}}&name={{.Name}}&store={{.Store}}" + hx-target="body" + hx-swap="beforeend"> <span class="flex-1 text-white">{{.Name}}</span> {{if .Quantity}}<span class="text-white/50 text-sm">{{.Quantity}}</span>{{end}} <span class="text-xs px-2 py-0.5 rounded {{if eq .Source "user"}}bg-purple-900/50 text-purple-300{{else}}bg-green-900/50 text-green-300{{end}}"> @@ -126,6 +144,21 @@ </ul> </div> {{end}} + <!-- Add a section to this store --> + <form class="mt-3 flex gap-2" + hx-post="/shopping/sections" + hx-target="#shopping-items-list" + hx-swap="innerHTML scroll:#store-{{slug .Name}}:top"> + <input type="hidden" name="store" value="{{.Name}}"> + <input type="hidden" name="grouped" value="true"> + <input type="text" name="name" placeholder="New section in {{.Name}}..." + class="flex-1 bg-white/5 border border-white/10 rounded-lg px-3 py-2 text-white placeholder-white/30 focus:outline-none focus:ring-1 focus:ring-white/20 text-xs" + required autocomplete="off"> + <button type="submit" class="bg-white/5 hover:bg-white/15 text-white/50 hover:text-white px-3 py-2 rounded-lg text-xs transition-colors"> + + section + </button> + </form> + <!-- Inline Add Item --> <!-- scroll: is not optional here. This form sits *inside* the swap target, so submitting it replaces the form mid-request; without an @@ -155,7 +188,10 @@ {{range .Categories}} {{range .Items}} {{if not .Checked}} - <li class="flex items-center gap-3 p-3 bg-card bg-card-hover transition-colors rounded-lg border border-white/5"> + <li class="flex items-center gap-3 p-3 bg-card bg-card-hover transition-colors rounded-lg border border-white/5 cursor-pointer" + hx-get="/shopping/item/{{.ID}}/edit?source={{.Source}}&name={{.Name}}&store={{.Store}}" + hx-target="body" + hx-swap="beforeend"> <span class="flex-1 text-white">{{.Name}}</span> {{if .Quantity}}<span class="text-white/50 text-sm">{{.Quantity}}</span>{{end}} <span class="text-xs px-2 py-0.5 rounded bg-white/10 text-white/50"> |