168 lines
6.4 KiB
Plaintext
168 lines
6.4 KiB
Plaintext
package adminview
|
|
|
|
import "git.haelnorr.com/h/oslstats/internal/db"
|
|
import "fmt"
|
|
import "time"
|
|
|
|
templ UserList(users *db.List[db.User]) {
|
|
<div
|
|
id="users-list-container"
|
|
x-data={ fmt.Sprintf("{ page: %d, perPage: %d, order: '%s', orderBy: '%s' }",
|
|
users.PageOpts.Page,
|
|
users.PageOpts.PerPage,
|
|
users.PageOpts.Order,
|
|
users.PageOpts.OrderBy) }
|
|
>
|
|
<!-- Header -->
|
|
<div class="flex justify-between items-center mb-4">
|
|
<h1 class="text-2xl font-bold text-text">User Management</h1>
|
|
</div>
|
|
<!-- Users table -->
|
|
if len(users.Items) == 0 {
|
|
<div class="bg-mantle border border-surface1 rounded-lg p-8 text-center">
|
|
<p class="text-subtext0 text-lg">No users found</p>
|
|
</div>
|
|
} else {
|
|
<div class="bg-surface0 border border-surface1 rounded-lg overflow-hidden">
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full">
|
|
<thead class="bg-mantle border-b border-surface1">
|
|
<tr>
|
|
@userTableHeader("id", "ID", users.PageOpts.OrderBy, string(users.PageOpts.Order))
|
|
@userTableHeader("username", "Username", users.PageOpts.OrderBy, string(users.PageOpts.Order))
|
|
<th class="px-4 py-3 text-left text-sm font-semibold text-text">Discord ID</th>
|
|
<th class="px-4 py-3 text-left text-sm font-semibold text-text">Roles</th>
|
|
@userTableHeader("created_at", "Created", users.PageOpts.OrderBy, string(users.PageOpts.Order))
|
|
<th class="px-4 py-3 text-left text-sm font-semibold text-text">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-surface1">
|
|
for _, user := range users.Items {
|
|
<tr class="hover:bg-surface1 transition-colors">
|
|
<td class="px-4 py-3 text-sm text-subtext0">{ fmt.Sprintf("%d", user.ID) }</td>
|
|
<td class="px-4 py-3 text-sm font-medium text-text">{ user.Username }</td>
|
|
<td class="px-4 py-3 text-sm text-subtext0 font-mono">{ user.DiscordID }</td>
|
|
<td class="px-4 py-3 text-sm">
|
|
if len(user.Roles) > 0 {
|
|
<div class="flex flex-wrap gap-1">
|
|
for _, role := range user.Roles {
|
|
<span class="px-2 py-0.5 bg-blue/20 text-blue rounded text-xs font-medium">
|
|
{ role.DisplayName }
|
|
</span>
|
|
}
|
|
</div>
|
|
} else {
|
|
<span class="text-subtext1 text-xs italic">No roles</span>
|
|
}
|
|
</td>
|
|
<td class="px-4 py-3 text-sm text-subtext0">
|
|
{ formatTimestamp(user.CreatedAt) }
|
|
</td>
|
|
<td class="px-4 py-3 text-sm">
|
|
<button
|
|
class="px-3 py-1 bg-blue hover:bg-blue/80 text-mantle rounded text-xs font-medium transition hover:cursor-pointer"
|
|
>
|
|
Edit Roles
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<!-- Pagination controls -->
|
|
<div class="mt-6 flex flex-col gap-4">
|
|
<!-- Page info and per-page selector -->
|
|
<div class="flex flex-col sm:flex-row justify-between items-center gap-4 text-sm text-subtext0">
|
|
<div>
|
|
if users.Total > 0 {
|
|
Showing { fmt.Sprintf("%d", users.PageOpts.StartItem()) } - { fmt.Sprintf("%d", users.PageOpts.EndItem(users.Total)) } of { fmt.Sprintf("%d", users.Total) } users
|
|
} else {
|
|
No users
|
|
}
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<label for="users-per-page-select">Per page:</label>
|
|
<select
|
|
id="users-per-page-select"
|
|
class="py-1 px-2 rounded-lg bg-surface0 border border-surface1 text-text focus:border-blue outline-none"
|
|
x-model.number="perPage"
|
|
@change="submitUsersPage(page, perPage, order, orderBy)"
|
|
>
|
|
<option value="10">10</option>
|
|
<option value="25">25</option>
|
|
<option value="50">50</option>
|
|
<option value="100">100</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<!-- Pagination buttons -->
|
|
if users.Total > 0 && users.PageOpts.TotalPages(users.Total) > 1 {
|
|
<div class="flex flex-wrap justify-center items-center gap-2">
|
|
@paginationButton("First", "<<", fmt.Sprintf("submitUsersPage(1, perPage, order, orderBy)"), !users.PageOpts.HasPrevPage())
|
|
@paginationButton("Previous", "<", fmt.Sprintf("submitUsersPage(%d, perPage, order, orderBy)", users.PageOpts.Page-1), !users.PageOpts.HasPrevPage())
|
|
for _, pageNum := range users.PageOpts.GetPageRange(users.Total, 7) {
|
|
@pageNumberButton(pageNum, users.PageOpts.Page, "submitUsersPage")
|
|
}
|
|
@paginationButton("Next", ">", fmt.Sprintf("submitUsersPage(%d, perPage, order, orderBy)", users.PageOpts.Page+1), !users.PageOpts.HasNextPage(users.Total))
|
|
@paginationButton("Last", ">>", fmt.Sprintf("submitUsersPage(%d, perPage, order, orderBy)", users.PageOpts.TotalPages(users.Total)), !users.PageOpts.HasNextPage(users.Total))
|
|
</div>
|
|
}
|
|
</div>
|
|
}
|
|
</div>
|
|
}
|
|
|
|
templ userTableHeader(field string, label string, currentField string, currentOrder string) {
|
|
{{
|
|
isActive := currentField == field
|
|
baseClasses := "px-4 py-3 text-left text-sm font-semibold text-text cursor-pointer select-none hover:text-blue transition-colors"
|
|
arrow := ""
|
|
if isActive {
|
|
if currentOrder == "ASC" {
|
|
arrow = " ↑"
|
|
} else {
|
|
arrow = " ↓"
|
|
}
|
|
}
|
|
}}
|
|
<th class={ baseClasses } @click={ fmt.Sprintf("sortUsersColumn('%s', order, orderBy)", field) }>
|
|
{ label }
|
|
if arrow != "" {
|
|
<span class="text-blue">{ arrow }</span>
|
|
}
|
|
</th>
|
|
}
|
|
|
|
templ paginationButton(longText string, shortText string, onClick string, disabled bool) {
|
|
<button
|
|
type="button"
|
|
@click={ onClick }
|
|
class="px-3 py-2 rounded-lg border transition border-surface1 text-text bg-mantle"
|
|
:disabled={ fmt.Sprintf("%t", disabled) }
|
|
:class={ fmt.Sprintf("%t", disabled) +
|
|
" ? 'text-subtext0 cursor-not-allowed opacity-50' : 'hover:bg-surface0 hover:border-blue cursor-pointer'" }
|
|
>
|
|
<span class="hidden sm:inline">{ longText }</span>
|
|
<span class="sm:hidden">{ shortText }</span>
|
|
</button>
|
|
}
|
|
|
|
templ pageNumberButton(pageNum int, currentPage int, funcName string) {
|
|
<button
|
|
type="button"
|
|
@click={ fmt.Sprintf("%s(%d, perPage, order, orderBy)", funcName, pageNum) }
|
|
class={ "px-3 py-2 rounded-lg border transition",
|
|
templ.KV("bg-blue border-blue text-mantle font-bold", pageNum == currentPage),
|
|
templ.KV("bg-mantle border-surface1 text-text hover:bg-surface0 hover:border-blue cursor-pointer", pageNum != currentPage) }
|
|
>
|
|
{ fmt.Sprintf("%d", pageNum) }
|
|
</button>
|
|
}
|
|
|
|
func formatTimestamp(unixTime int64) string {
|
|
t := time.Unix(unixTime, 0)
|
|
return t.Format("Jan 2, 2006")
|
|
}
|