Merge pull request 'Use dropdowns for filters' (#65) from improved-filter-ui into main

Reviewed-on: https://git.ts.mattnite.net/mattnite/forgejo-tickets/pulls/65
This commit is contained in:
Matthew Knight 2026-02-19 04:36:51 +00:00
commit 040f848268
2 changed files with 58 additions and 44 deletions

View File

@ -7,37 +7,45 @@
{{$filters := dict "status" .StatusFilter "priority" .PriorityFilter "product" .ProductFilter "reporter" .ReporterFilter}}
{{$productFilter := .ProductFilter}}
{{$reporterFilter := .ReporterFilter}}
<div class="mb-4 space-y-2">
<div class="flex items-center gap-2">
<span class="text-xs font-medium text-gray-500 uppercase w-16">Status</span>
<a href="{{filterURL "/admin/tickets" $filters "status" ""}}" class="rounded-md px-3 py-1.5 text-sm font-medium {{if not .StatusFilter}}bg-gray-900 text-white{{else}}bg-white text-gray-700 ring-1 ring-gray-300 hover:bg-gray-50{{end}}">All</a>
<a href="{{filterURL "/admin/tickets" $filters "status" "open"}}" class="rounded-md px-3 py-1.5 text-sm font-medium {{if eq .StatusFilter "open"}}bg-gray-900 text-white{{else}}bg-white text-gray-700 ring-1 ring-gray-300 hover:bg-gray-50{{end}}">Open</a>
<a href="{{filterURL "/admin/tickets" $filters "status" "in_progress"}}" class="rounded-md px-3 py-1.5 text-sm font-medium {{if eq .StatusFilter "in_progress"}}bg-gray-900 text-white{{else}}bg-white text-gray-700 ring-1 ring-gray-300 hover:bg-gray-50{{end}}">In Progress</a>
<a href="{{filterURL "/admin/tickets" $filters "status" "closed"}}" class="rounded-md px-3 py-1.5 text-sm font-medium {{if eq .StatusFilter "closed"}}bg-gray-900 text-white{{else}}bg-white text-gray-700 ring-1 ring-gray-300 hover:bg-gray-50{{end}}">Closed</a>
<div class="flex items-center gap-4 mb-4">
<div class="flex items-center gap-1.5">
<label class="text-xs font-medium text-gray-500 uppercase">Status</label>
<select onchange="window.location.href=this.value" class="rounded-md border-gray-300 text-sm py-1.5 pr-8">
<option value="{{filterURL "/admin/tickets" $filters "status" ""}}" {{if not .StatusFilter}}selected{{end}}>All</option>
<option value="{{filterURL "/admin/tickets" $filters "status" "open"}}" {{if eq .StatusFilter "open"}}selected{{end}}>Open</option>
<option value="{{filterURL "/admin/tickets" $filters "status" "in_progress"}}" {{if eq .StatusFilter "in_progress"}}selected{{end}}>In Progress</option>
<option value="{{filterURL "/admin/tickets" $filters "status" "closed"}}" {{if eq .StatusFilter "closed"}}selected{{end}}>Closed</option>
</select>
</div>
<div class="flex items-center gap-2">
<span class="text-xs font-medium text-gray-500 uppercase w-16">Priority</span>
<a href="{{filterURL "/admin/tickets" $filters "priority" ""}}" class="rounded-md px-3 py-1.5 text-sm font-medium {{if not .PriorityFilter}}bg-gray-900 text-white{{else}}bg-white text-gray-700 ring-1 ring-gray-300 hover:bg-gray-50{{end}}">All</a>
<a href="{{filterURL "/admin/tickets" $filters "priority" "high"}}" class="rounded-md px-3 py-1.5 text-sm font-medium {{if eq .PriorityFilter "high"}}bg-gray-900 text-white{{else}}bg-white text-gray-700 ring-1 ring-gray-300 hover:bg-gray-50{{end}}">High</a>
<a href="{{filterURL "/admin/tickets" $filters "priority" "medium"}}" class="rounded-md px-3 py-1.5 text-sm font-medium {{if eq .PriorityFilter "medium"}}bg-gray-900 text-white{{else}}bg-white text-gray-700 ring-1 ring-gray-300 hover:bg-gray-50{{end}}">Medium</a>
<a href="{{filterURL "/admin/tickets" $filters "priority" "low"}}" class="rounded-md px-3 py-1.5 text-sm font-medium {{if eq .PriorityFilter "low"}}bg-gray-900 text-white{{else}}bg-white text-gray-700 ring-1 ring-gray-300 hover:bg-gray-50{{end}}">Low</a>
<div class="flex items-center gap-1.5">
<label class="text-xs font-medium text-gray-500 uppercase">Priority</label>
<select onchange="window.location.href=this.value" class="rounded-md border-gray-300 text-sm py-1.5 pr-8">
<option value="{{filterURL "/admin/tickets" $filters "priority" ""}}" {{if not .PriorityFilter}}selected{{end}}>All</option>
<option value="{{filterURL "/admin/tickets" $filters "priority" "high"}}" {{if eq .PriorityFilter "high"}}selected{{end}}>High</option>
<option value="{{filterURL "/admin/tickets" $filters "priority" "medium"}}" {{if eq .PriorityFilter "medium"}}selected{{end}}>Medium</option>
<option value="{{filterURL "/admin/tickets" $filters "priority" "low"}}" {{if eq .PriorityFilter "low"}}selected{{end}}>Low</option>
</select>
</div>
{{if .Products}}
<div class="flex items-center gap-2">
<span class="text-xs font-medium text-gray-500 uppercase w-16">Product</span>
<a href="{{filterURL "/admin/tickets" $filters "product" ""}}" class="rounded-md px-3 py-1.5 text-sm font-medium {{if not .ProductFilter}}bg-gray-900 text-white{{else}}bg-white text-gray-700 ring-1 ring-gray-300 hover:bg-gray-50{{end}}">All</a>
<div class="flex items-center gap-1.5">
<label class="text-xs font-medium text-gray-500 uppercase">Product</label>
<select onchange="window.location.href=this.value" class="rounded-md border-gray-300 text-sm py-1.5 pr-8">
<option value="{{filterURL "/admin/tickets" $filters "product" ""}}" {{if not .ProductFilter}}selected{{end}}>All</option>
{{range .Products}}
<a href="{{filterURL "/admin/tickets" $filters "product" .}}" class="rounded-md px-3 py-1.5 text-sm font-medium {{if eq $productFilter .}}bg-gray-900 text-white{{else}}bg-white text-gray-700 ring-1 ring-gray-300 hover:bg-gray-50{{end}}">{{.}}</a>
<option value="{{filterURL "/admin/tickets" $filters "product" .}}" {{if eq $productFilter .}}selected{{end}}>{{.}}</option>
{{end}}
</select>
</div>
{{end}}
{{if .Reporters}}
<div class="flex items-center gap-2">
<span class="text-xs font-medium text-gray-500 uppercase w-16">Reporter</span>
<a href="{{filterURL "/admin/tickets" $filters "reporter" ""}}" class="rounded-md px-3 py-1.5 text-sm font-medium {{if not .ReporterFilter}}bg-gray-900 text-white{{else}}bg-white text-gray-700 ring-1 ring-gray-300 hover:bg-gray-50{{end}}">All</a>
<div class="flex items-center gap-1.5">
<label class="text-xs font-medium text-gray-500 uppercase">Reporter</label>
<select onchange="window.location.href=this.value" class="rounded-md border-gray-300 text-sm py-1.5 pr-8">
<option value="{{filterURL "/admin/tickets" $filters "reporter" ""}}" {{if not .ReporterFilter}}selected{{end}}>All</option>
{{range .Reporters}}
<a href="{{filterURL "/admin/tickets" $filters "reporter" .}}" class="rounded-md px-3 py-1.5 text-sm font-medium {{if eq $reporterFilter .}}bg-gray-900 text-white{{else}}bg-white text-gray-700 ring-1 ring-gray-300 hover:bg-gray-50{{end}}">{{.}}</a>
<option value="{{filterURL "/admin/tickets" $filters "reporter" .}}" {{if eq $reporterFilter .}}selected{{end}}>{{.}}</option>
{{end}}
</select>
</div>
{{end}}
</div>

View File

@ -9,28 +9,34 @@
{{with .Data}}
{{$filters := dict "status" .StatusFilter "priority" .PriorityFilter "product" .ProductFilter}}
{{$productFilter := .ProductFilter}}
<div class="mb-4 space-y-2">
<div class="flex items-center gap-2">
<span class="text-xs font-medium text-gray-500 uppercase w-16">Status</span>
<a href="{{filterURL "/tickets" $filters "status" ""}}" class="rounded-md px-3 py-1.5 text-sm font-medium {{if not .StatusFilter}}bg-gray-900 text-white{{else}}bg-white text-gray-700 ring-1 ring-gray-300 hover:bg-gray-50{{end}}">All</a>
<a href="{{filterURL "/tickets" $filters "status" "open"}}" class="rounded-md px-3 py-1.5 text-sm font-medium {{if eq .StatusFilter "open"}}bg-gray-900 text-white{{else}}bg-white text-gray-700 ring-1 ring-gray-300 hover:bg-gray-50{{end}}">Open</a>
<a href="{{filterURL "/tickets" $filters "status" "in_progress"}}" class="rounded-md px-3 py-1.5 text-sm font-medium {{if eq .StatusFilter "in_progress"}}bg-gray-900 text-white{{else}}bg-white text-gray-700 ring-1 ring-gray-300 hover:bg-gray-50{{end}}">In Progress</a>
<a href="{{filterURL "/tickets" $filters "status" "closed"}}" class="rounded-md px-3 py-1.5 text-sm font-medium {{if eq .StatusFilter "closed"}}bg-gray-900 text-white{{else}}bg-white text-gray-700 ring-1 ring-gray-300 hover:bg-gray-50{{end}}">Closed</a>
<div class="flex items-center gap-4 mb-4">
<div class="flex items-center gap-1.5">
<label class="text-xs font-medium text-gray-500 uppercase">Status</label>
<select onchange="window.location.href=this.value" class="rounded-md border-gray-300 text-sm py-1.5 pr-8">
<option value="{{filterURL "/tickets" $filters "status" ""}}" {{if not .StatusFilter}}selected{{end}}>All</option>
<option value="{{filterURL "/tickets" $filters "status" "open"}}" {{if eq .StatusFilter "open"}}selected{{end}}>Open</option>
<option value="{{filterURL "/tickets" $filters "status" "in_progress"}}" {{if eq .StatusFilter "in_progress"}}selected{{end}}>In Progress</option>
<option value="{{filterURL "/tickets" $filters "status" "closed"}}" {{if eq .StatusFilter "closed"}}selected{{end}}>Closed</option>
</select>
</div>
<div class="flex items-center gap-2">
<span class="text-xs font-medium text-gray-500 uppercase w-16">Priority</span>
<a href="{{filterURL "/tickets" $filters "priority" ""}}" class="rounded-md px-3 py-1.5 text-sm font-medium {{if not .PriorityFilter}}bg-gray-900 text-white{{else}}bg-white text-gray-700 ring-1 ring-gray-300 hover:bg-gray-50{{end}}">All</a>
<a href="{{filterURL "/tickets" $filters "priority" "high"}}" class="rounded-md px-3 py-1.5 text-sm font-medium {{if eq .PriorityFilter "high"}}bg-gray-900 text-white{{else}}bg-white text-gray-700 ring-1 ring-gray-300 hover:bg-gray-50{{end}}">High</a>
<a href="{{filterURL "/tickets" $filters "priority" "medium"}}" class="rounded-md px-3 py-1.5 text-sm font-medium {{if eq .PriorityFilter "medium"}}bg-gray-900 text-white{{else}}bg-white text-gray-700 ring-1 ring-gray-300 hover:bg-gray-50{{end}}">Medium</a>
<a href="{{filterURL "/tickets" $filters "priority" "low"}}" class="rounded-md px-3 py-1.5 text-sm font-medium {{if eq .PriorityFilter "low"}}bg-gray-900 text-white{{else}}bg-white text-gray-700 ring-1 ring-gray-300 hover:bg-gray-50{{end}}">Low</a>
<div class="flex items-center gap-1.5">
<label class="text-xs font-medium text-gray-500 uppercase">Priority</label>
<select onchange="window.location.href=this.value" class="rounded-md border-gray-300 text-sm py-1.5 pr-8">
<option value="{{filterURL "/tickets" $filters "priority" ""}}" {{if not .PriorityFilter}}selected{{end}}>All</option>
<option value="{{filterURL "/tickets" $filters "priority" "high"}}" {{if eq .PriorityFilter "high"}}selected{{end}}>High</option>
<option value="{{filterURL "/tickets" $filters "priority" "medium"}}" {{if eq .PriorityFilter "medium"}}selected{{end}}>Medium</option>
<option value="{{filterURL "/tickets" $filters "priority" "low"}}" {{if eq .PriorityFilter "low"}}selected{{end}}>Low</option>
</select>
</div>
{{if .Products}}
<div class="flex items-center gap-2">
<span class="text-xs font-medium text-gray-500 uppercase w-16">Product</span>
<a href="{{filterURL "/tickets" $filters "product" ""}}" class="rounded-md px-3 py-1.5 text-sm font-medium {{if not .ProductFilter}}bg-gray-900 text-white{{else}}bg-white text-gray-700 ring-1 ring-gray-300 hover:bg-gray-50{{end}}">All</a>
<div class="flex items-center gap-1.5">
<label class="text-xs font-medium text-gray-500 uppercase">Product</label>
<select onchange="window.location.href=this.value" class="rounded-md border-gray-300 text-sm py-1.5 pr-8">
<option value="{{filterURL "/tickets" $filters "product" ""}}" {{if not .ProductFilter}}selected{{end}}>All</option>
{{range .Products}}
<a href="{{filterURL "/tickets" $filters "product" .}}" class="rounded-md px-3 py-1.5 text-sm font-medium {{if eq $productFilter .}}bg-gray-900 text-white{{else}}bg-white text-gray-700 ring-1 ring-gray-300 hover:bg-gray-50{{end}}">{{.}}</a>
<option value="{{filterURL "/tickets" $filters "product" .}}" {{if eq $productFilter .}}selected{{end}}>{{.}}</option>
{{end}}
</select>
</div>
{{end}}
</div>