118 lines
3.5 KiB
Plaintext
118 lines
3.5 KiB
Plaintext
package teamsview
|
|
|
|
import "git.haelnorr.com/h/oslstats/internal/db"
|
|
import "git.haelnorr.com/h/oslstats/internal/view/baseview"
|
|
import "git.haelnorr.com/h/oslstats/internal/view/pagination"
|
|
import "git.haelnorr.com/h/oslstats/internal/view/sort"
|
|
import "git.haelnorr.com/h/oslstats/internal/contexts"
|
|
import "git.haelnorr.com/h/oslstats/internal/permissions"
|
|
import "github.com/uptrace/bun"
|
|
import "fmt"
|
|
|
|
templ ListPage(teams *db.List[db.Team]) {
|
|
@baseview.Layout("Teams") {
|
|
<div class="max-w-screen-2xl mx-auto px-2">
|
|
@TeamsList(teams)
|
|
</div>
|
|
}
|
|
}
|
|
|
|
templ TeamsList(teams *db.List[db.Team]) {
|
|
{{
|
|
permCache := contexts.Permissions(ctx)
|
|
canAddTeam := permCache.HasPermission(permissions.TeamsCreate)
|
|
sortOpts := []db.OrderOpts{
|
|
{
|
|
Order: bun.OrderAsc,
|
|
OrderBy: "name",
|
|
Label: "Name (A-Z)",
|
|
},
|
|
{
|
|
Order: bun.OrderDesc,
|
|
OrderBy: "name",
|
|
Label: "Name (Z-A)",
|
|
},
|
|
{
|
|
Order: bun.OrderAsc,
|
|
OrderBy: "short_name",
|
|
Label: "Short Name (A-Z)",
|
|
},
|
|
{
|
|
Order: bun.OrderDesc,
|
|
OrderBy: "short_name",
|
|
Label: "Short Name (Z-A)",
|
|
},
|
|
}
|
|
}}
|
|
<div id="teams-list-container">
|
|
<form
|
|
id="teams-form"
|
|
hx-target="#teams-list-container"
|
|
hx-swap="outerHTML"
|
|
hx-push-url="true"
|
|
x-data={ templ.JSFuncCall("paginateData",
|
|
"teams-form",
|
|
"/teams",
|
|
teams.PageOpts.Page,
|
|
teams.PageOpts.PerPage,
|
|
teams.PageOpts.Order,
|
|
teams.PageOpts.OrderBy).CallInline }
|
|
>
|
|
<!-- Header with title and sort controls -->
|
|
<div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-6 px-4">
|
|
<div class="flex gap-4 items-center">
|
|
<span class="text-3xl font-bold">Teams</span>
|
|
if canAddTeam {
|
|
<a
|
|
href="/teams/new"
|
|
class="rounded-lg px-2 py-1 hover:cursor-pointer text-center text-sm
|
|
bg-green hover:bg-green/75 text-mantle transition"
|
|
>Add team</a>
|
|
}
|
|
</div>
|
|
@sort.Dropdown(teams.PageOpts, sortOpts)
|
|
</div>
|
|
<!-- Results section -->
|
|
if len(teams.Items) == 0 {
|
|
<div class="bg-mantle border border-surface1 rounded-lg p-8 text-center">
|
|
<p class="text-subtext0 text-lg">No teams found</p>
|
|
</div>
|
|
} else {
|
|
<!-- Card grid -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
for _, t := range teams.Items {
|
|
<a
|
|
href={ templ.SafeURL(fmt.Sprintf("/teams/%d", t.ID)) }
|
|
class="bg-mantle border border-surface1 rounded-lg p-6 hover:bg-surface0
|
|
transition-colors flex flex-col hover:cursor-pointer"
|
|
>
|
|
<!-- Header: Name with color indicator -->
|
|
<div class="flex justify-between items-start mb-3">
|
|
<h3 class="text-xl font-bold text-text">{ t.Name }</h3>
|
|
if t.Color != "" {
|
|
<div
|
|
class="w-6 h-6 rounded-full border-2 border-surface1"
|
|
style={ "background-color: " + templ.SafeCSS(t.Color) }
|
|
></div>
|
|
}
|
|
</div>
|
|
<!-- Info Row: Short Names -->
|
|
<div class="flex items-center gap-2 text-sm mb-3 flex-wrap">
|
|
<span class="px-2 py-1 bg-surface1 rounded text-subtext0 font-mono">
|
|
{ t.ShortName }
|
|
</span>
|
|
<span class="px-2 py-1 bg-surface0 border border-surface1 rounded text-subtext0 font-mono">
|
|
{ t.AltShortName }
|
|
</span>
|
|
</div>
|
|
</a>
|
|
}
|
|
</div>
|
|
<!-- Pagination controls -->
|
|
@pagination.Pagination(teams.PageOpts, teams.Total)
|
|
}
|
|
</form>
|
|
<script src="/static/js/pagination.js"></script>
|
|
</div>
|
|
}
|