Merge branch 'main' into fix/sse
This commit is contained in:
juancwu
commit
9044a64b10
17 changed files with 1118 additions and 35 deletions
|
|
@ -232,6 +232,106 @@ templ AddExpenseForm(props AddExpenseFormProps) {
|
|||
</form>
|
||||
}
|
||||
|
||||
templ EditExpenseForm(spaceID string, exp *model.ExpenseWithTags) {
|
||||
{{ editDialogID := "edit-expense-" + exp.ID }}
|
||||
{{ tagValues := make([]string, len(exp.Tags)) }}
|
||||
for i, t := range exp.Tags {
|
||||
{{ tagValues[i] = t.Name }}
|
||||
}
|
||||
<form
|
||||
hx-patch={ fmt.Sprintf("/app/spaces/%s/expenses/%s", spaceID, exp.ID) }
|
||||
hx-target={ "#expense-" + exp.ID }
|
||||
hx-swap="outerHTML"
|
||||
_={ "on htmx:afterOnLoad if event.detail.xhr.status == 200 then call window.tui.dialog.close('" + editDialogID + "') end" }
|
||||
class="space-y-4"
|
||||
>
|
||||
@csrf.Token()
|
||||
// Type
|
||||
<div class="flex gap-4">
|
||||
<div class="flex items-start gap-3">
|
||||
@radio.Radio(radio.Props{
|
||||
ID: "edit-type-expense-" + exp.ID,
|
||||
Name: "type",
|
||||
Value: "expense",
|
||||
Checked: exp.Type == model.ExpenseTypeExpense,
|
||||
})
|
||||
<div class="grid gap-2">
|
||||
@label.Label(label.Props{For: "edit-type-expense-" + exp.ID}) {
|
||||
Expense
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start gap-3">
|
||||
@radio.Radio(radio.Props{
|
||||
ID: "edit-type-topup-" + exp.ID,
|
||||
Name: "type",
|
||||
Value: "topup",
|
||||
Checked: exp.Type == model.ExpenseTypeTopup,
|
||||
})
|
||||
<div class="grid gap-2">
|
||||
@label.Label(label.Props{For: "edit-type-topup-" + exp.ID}) {
|
||||
Top-up
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
// Description
|
||||
<div>
|
||||
@label.Label(label.Props{For: "edit-description-" + exp.ID}) {
|
||||
Description
|
||||
}
|
||||
@input.Input(input.Props{
|
||||
Name: "description",
|
||||
ID: "edit-description-" + exp.ID,
|
||||
Value: exp.Description,
|
||||
Attributes: templ.Attributes{"required": "true"},
|
||||
})
|
||||
</div>
|
||||
// Amount
|
||||
<div>
|
||||
@label.Label(label.Props{For: "edit-amount-" + exp.ID}) {
|
||||
Amount
|
||||
}
|
||||
@input.Input(input.Props{
|
||||
Name: "amount",
|
||||
ID: "edit-amount-" + exp.ID,
|
||||
Type: "number",
|
||||
Value: fmt.Sprintf("%.2f", float64(exp.AmountCents)/100.0),
|
||||
Attributes: templ.Attributes{"step": "0.01", "required": "true"},
|
||||
})
|
||||
</div>
|
||||
// Date
|
||||
<div>
|
||||
@label.Label(label.Props{For: "edit-date-" + exp.ID}) {
|
||||
Date
|
||||
}
|
||||
@datepicker.DatePicker(datepicker.Props{
|
||||
ID: "edit-date-" + exp.ID,
|
||||
Name: "date",
|
||||
Value: exp.Date,
|
||||
Attributes: templ.Attributes{"required": "true"},
|
||||
})
|
||||
</div>
|
||||
// Tags
|
||||
<div>
|
||||
@label.Label(label.Props{For: "edit-tags-" + exp.ID}) {
|
||||
Tags
|
||||
}
|
||||
@tagsinput.TagsInput(tagsinput.Props{
|
||||
ID: "edit-tags-" + exp.ID,
|
||||
Name: "tags",
|
||||
Value: tagValues,
|
||||
Placeholder: "Add tags (press enter)",
|
||||
})
|
||||
</div>
|
||||
<div class="flex justify-end">
|
||||
@button.Button(button.Props{Type: button.TypeSubmit}) {
|
||||
Save
|
||||
}
|
||||
</div>
|
||||
</form>
|
||||
}
|
||||
|
||||
templ BalanceCard(spaceID string, balance int, oob bool) {
|
||||
<div
|
||||
id="balance-card"
|
||||
|
|
|
|||
|
|
@ -80,6 +80,16 @@ templ Space(title string, space *model.Space) {
|
|||
<span>Tags</span>
|
||||
}
|
||||
}
|
||||
@sidebar.MenuItem() {
|
||||
@sidebar.MenuButton(sidebar.MenuButtonProps{
|
||||
Href: "/app/spaces/" + space.ID + "/settings",
|
||||
IsActive: ctxkeys.URLPath(ctx) == "/app/spaces/"+space.ID+"/settings",
|
||||
Tooltip: "Settings",
|
||||
}) {
|
||||
@icon.Settings(icon.Props{Class: "size-4"})
|
||||
<span>Settings</span>
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,13 @@ import (
|
|||
"fmt"
|
||||
"git.juancwu.dev/juancwu/budgit/internal/model"
|
||||
"git.juancwu.dev/juancwu/budgit/internal/ui/layouts"
|
||||
"git.juancwu.dev/juancwu/budgit/internal/ui/components/button"
|
||||
"git.juancwu.dev/juancwu/budgit/internal/ui/components/card"
|
||||
"git.juancwu.dev/juancwu/budgit/internal/ui/components/csrf"
|
||||
"git.juancwu.dev/juancwu/budgit/internal/ui/components/dialog"
|
||||
"git.juancwu.dev/juancwu/budgit/internal/ui/components/icon"
|
||||
"git.juancwu.dev/juancwu/budgit/internal/ui/components/input"
|
||||
"git.juancwu.dev/juancwu/budgit/internal/ui/components/label"
|
||||
)
|
||||
|
||||
templ Dashboard(spaces []*model.Space, totalBalance int) {
|
||||
|
|
@ -43,11 +49,48 @@ templ Dashboard(spaces []*model.Space, totalBalance int) {
|
|||
}
|
||||
|
||||
// Option to create a new space
|
||||
@card.Card(card.Props{ Class: "h-full border-dashed" }) {
|
||||
@card.Content(card.ContentProps{ Class: "h-full flex flex-col items-center justify-center py-12" }) {
|
||||
<p class="text-muted-foreground mb-4">Need another space?</p>
|
||||
// TODO: Add a button or link to create a new space
|
||||
<span class="text-sm font-medium opacity-50">Create Space (Coming Soon)</span>
|
||||
@dialog.Dialog(dialog.Props{ID: "create-space-dialog"}) {
|
||||
@dialog.Trigger() {
|
||||
@card.Card(card.Props{ Class: "h-full border-dashed cursor-pointer transition-colors hover:border-primary" }) {
|
||||
@card.Content(card.ContentProps{ Class: "h-full flex flex-col items-center justify-center py-12" }) {
|
||||
@icon.Plus(icon.Props{Class: "h-8 w-8 text-muted-foreground mb-2"})
|
||||
<p class="text-muted-foreground">Create a new space</p>
|
||||
}
|
||||
}
|
||||
}
|
||||
@dialog.Content() {
|
||||
@dialog.Header() {
|
||||
@dialog.Title() {
|
||||
Create Space
|
||||
}
|
||||
@dialog.Description() {
|
||||
Create a new space to organize expenses and shopping lists.
|
||||
}
|
||||
}
|
||||
<form hx-post="/app/spaces" hx-swap="none" class="space-y-4">
|
||||
@csrf.Token()
|
||||
<div class="space-y-2">
|
||||
@label.Label(label.Props{For: "space-name"}) {
|
||||
Name
|
||||
}
|
||||
@input.Input(input.Props{
|
||||
ID: "space-name",
|
||||
Name: "name",
|
||||
Type: input.TypeText,
|
||||
Placeholder: "e.g. Household, Trip, Roommates",
|
||||
})
|
||||
</div>
|
||||
@dialog.Footer() {
|
||||
@dialog.Close(dialog.CloseProps{For: "create-space-dialog"}) {
|
||||
@button.Button(button.Props{Variant: button.VariantOutline, Type: button.TypeButton}) {
|
||||
Cancel
|
||||
}
|
||||
}
|
||||
@button.Button(button.Props{Type: button.TypeSubmit}) {
|
||||
Create
|
||||
}
|
||||
}
|
||||
</form>
|
||||
}
|
||||
}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -3,13 +3,15 @@ package pages
|
|||
import (
|
||||
"fmt"
|
||||
"git.juancwu.dev/juancwu/budgit/internal/model"
|
||||
"git.juancwu.dev/juancwu/budgit/internal/ui/components/badge"
|
||||
"git.juancwu.dev/juancwu/budgit/internal/ui/components/button"
|
||||
"git.juancwu.dev/juancwu/budgit/internal/ui/components/dialog"
|
||||
"git.juancwu.dev/juancwu/budgit/internal/ui/components/expense"
|
||||
"git.juancwu.dev/juancwu/budgit/internal/ui/components/icon"
|
||||
"git.juancwu.dev/juancwu/budgit/internal/ui/layouts"
|
||||
)
|
||||
|
||||
templ SpaceExpensesPage(space *model.Space, expenses []*model.Expense, balance int, tags []*model.Tag, listsWithItems []model.ListWithUncheckedItems) {
|
||||
templ SpaceExpensesPage(space *model.Space, expenses []*model.ExpenseWithTags, balance int, tags []*model.Tag, listsWithItems []model.ListWithUncheckedItems) {
|
||||
@layouts.Space("Expenses", space) {
|
||||
<div class="space-y-4">
|
||||
<div class="flex justify-between items-center">
|
||||
|
|
@ -30,11 +32,11 @@ templ SpaceExpensesPage(space *model.Space, expenses []*model.Expense, balance i
|
|||
}
|
||||
}
|
||||
@expense.AddExpenseForm(expense.AddExpenseFormProps{
|
||||
Space: space,
|
||||
Tags: tags,
|
||||
ListsWithItems: listsWithItems,
|
||||
DialogID: "add-expense-dialog",
|
||||
})
|
||||
Space: space,
|
||||
Tags: tags,
|
||||
ListsWithItems: listsWithItems,
|
||||
DialogID: "add-expense-dialog",
|
||||
})
|
||||
}
|
||||
}
|
||||
</div>
|
||||
|
|
@ -42,45 +44,113 @@ templ SpaceExpensesPage(space *model.Space, expenses []*model.Expense, balance i
|
|||
@expense.BalanceCard(space.ID, balance, false)
|
||||
// List of expenses
|
||||
<div class="border rounded-lg">
|
||||
@ExpensesListContent(expenses)
|
||||
@ExpensesListContent(space.ID, expenses)
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
|
||||
templ ExpensesListContent(expenses []*model.Expense) {
|
||||
templ ExpensesListContent(spaceID string, expenses []*model.ExpenseWithTags) {
|
||||
<h2 class="text-lg font-semibold p-4">History</h2>
|
||||
<div id="expenses-list" class="divide-y">
|
||||
if len(expenses) == 0 {
|
||||
<p class="p-4 text-sm text-muted-foreground">No expenses recorded yet.</p>
|
||||
}
|
||||
for _, expense := range expenses {
|
||||
@ExpenseListItem(expense)
|
||||
for _, exp := range expenses {
|
||||
@ExpenseListItem(spaceID, exp)
|
||||
}
|
||||
</div>
|
||||
}
|
||||
|
||||
templ ExpenseListItem(expense *model.Expense) {
|
||||
<div class="p-4 flex justify-between items-center">
|
||||
<div>
|
||||
<p class="font-medium">{ expense.Description }</p>
|
||||
<p class="text-sm text-muted-foreground">{ expense.Date.Format("Jan 02, 2006") }</p>
|
||||
templ ExpenseListItem(spaceID string, exp *model.ExpenseWithTags) {
|
||||
<div id={ "expense-" + exp.ID } class="p-4 flex justify-between items-start gap-2">
|
||||
<div class="min-w-0 flex-1">
|
||||
<p class="font-medium">{ exp.Description }</p>
|
||||
<p class="text-sm text-muted-foreground">{ exp.Date.Format("Jan 02, 2006") }</p>
|
||||
if len(exp.Tags) > 0 {
|
||||
<div class="flex flex-wrap gap-1 mt-1">
|
||||
for _, t := range exp.Tags {
|
||||
@badge.Badge(badge.Props{Variant: badge.VariantSecondary}) {
|
||||
{ t.Name }
|
||||
}
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
<div>
|
||||
if expense.Type == model.ExpenseTypeExpense {
|
||||
<div class="flex items-center gap-1 shrink-0">
|
||||
if exp.Type == model.ExpenseTypeExpense {
|
||||
<p class="font-bold text-destructive">
|
||||
- { fmt.Sprintf("$%.2f", float64(expense.AmountCents)/100.0) }
|
||||
- { fmt.Sprintf("$%.2f", float64(exp.AmountCents)/100.0) }
|
||||
</p>
|
||||
} else {
|
||||
<p class="font-bold text-green-500">
|
||||
+ { fmt.Sprintf("$%.2f", float64(expense.AmountCents)/100.0) }
|
||||
+ { fmt.Sprintf("$%.2f", float64(exp.AmountCents)/100.0) }
|
||||
</p>
|
||||
}
|
||||
// Edit button
|
||||
@dialog.Dialog(dialog.Props{ID: "edit-expense-" + exp.ID}) {
|
||||
@dialog.Trigger() {
|
||||
@button.Button(button.Props{Variant: button.VariantGhost, Size: button.SizeIcon, Class: "size-7"}) {
|
||||
@icon.Pencil(icon.Props{Size: 14})
|
||||
}
|
||||
}
|
||||
@dialog.Content() {
|
||||
@dialog.Header() {
|
||||
@dialog.Title() {
|
||||
Edit Transaction
|
||||
}
|
||||
@dialog.Description() {
|
||||
Update the details of this transaction.
|
||||
}
|
||||
}
|
||||
@expense.EditExpenseForm(spaceID, exp)
|
||||
}
|
||||
}
|
||||
// Delete button
|
||||
@dialog.Dialog(dialog.Props{ID: "del-expense-" + exp.ID}) {
|
||||
@dialog.Trigger() {
|
||||
@button.Button(button.Props{Variant: button.VariantGhost, Size: button.SizeIcon, Class: "size-7"}) {
|
||||
@icon.Trash2(icon.Props{Size: 14})
|
||||
}
|
||||
}
|
||||
@dialog.Content() {
|
||||
@dialog.Header() {
|
||||
@dialog.Title() {
|
||||
Delete Transaction
|
||||
}
|
||||
@dialog.Description() {
|
||||
Are you sure you want to delete "{ exp.Description }"? This action cannot be undone.
|
||||
}
|
||||
}
|
||||
@dialog.Footer() {
|
||||
@dialog.Close() {
|
||||
@button.Button(button.Props{Variant: button.VariantOutline}) {
|
||||
Cancel
|
||||
}
|
||||
}
|
||||
@button.Button(button.Props{
|
||||
Variant: button.VariantDestructive,
|
||||
Attributes: templ.Attributes{
|
||||
"hx-delete": fmt.Sprintf("/app/spaces/%s/expenses/%s", spaceID, exp.ID),
|
||||
"hx-target": "#expense-" + exp.ID,
|
||||
"hx-swap": "outerHTML",
|
||||
},
|
||||
}) {
|
||||
Delete
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
templ ExpenseCreatedResponse(newExpense *model.Expense, balance int) {
|
||||
@ExpenseListItem(newExpense)
|
||||
templ ExpenseCreatedResponse(spaceID string, newExpense *model.ExpenseWithTags, balance int) {
|
||||
@ExpenseListItem(spaceID, newExpense)
|
||||
@expense.BalanceCard(newExpense.SpaceID, balance, true)
|
||||
}
|
||||
|
||||
templ ExpenseUpdatedResponse(spaceID string, exp *model.ExpenseWithTags, balance int) {
|
||||
@ExpenseListItem(spaceID, exp)
|
||||
@expense.BalanceCard(exp.SpaceID, balance, true)
|
||||
}
|
||||
|
|
|
|||
263
internal/ui/pages/app_space_settings.templ
Normal file
263
internal/ui/pages/app_space_settings.templ
Normal file
|
|
@ -0,0 +1,263 @@
|
|||
package pages
|
||||
|
||||
import (
|
||||
"git.juancwu.dev/juancwu/budgit/internal/ctxkeys"
|
||||
"git.juancwu.dev/juancwu/budgit/internal/model"
|
||||
"git.juancwu.dev/juancwu/budgit/internal/ui/components/badge"
|
||||
"git.juancwu.dev/juancwu/budgit/internal/ui/components/button"
|
||||
"git.juancwu.dev/juancwu/budgit/internal/ui/components/card"
|
||||
"git.juancwu.dev/juancwu/budgit/internal/ui/components/csrf"
|
||||
"git.juancwu.dev/juancwu/budgit/internal/ui/components/dialog"
|
||||
"git.juancwu.dev/juancwu/budgit/internal/ui/components/icon"
|
||||
"git.juancwu.dev/juancwu/budgit/internal/ui/components/input"
|
||||
"git.juancwu.dev/juancwu/budgit/internal/ui/layouts"
|
||||
)
|
||||
|
||||
templ SpaceSettingsPage(space *model.Space, members []*model.SpaceMemberWithProfile, pendingInvites []*model.SpaceInvitation, isOwner bool, currentUserID string) {
|
||||
@layouts.Space("Settings", space) {
|
||||
<div class="space-y-6 max-w-2xl">
|
||||
// Space Name Section
|
||||
@card.Card() {
|
||||
@card.Header() {
|
||||
@card.Title() {
|
||||
Space Name
|
||||
}
|
||||
@card.Description() {
|
||||
if isOwner {
|
||||
Update the name of this space.
|
||||
} else {
|
||||
The name of this space.
|
||||
}
|
||||
}
|
||||
}
|
||||
@card.Content() {
|
||||
if isOwner {
|
||||
<form
|
||||
hx-patch={ "/app/spaces/" + space.ID + "/settings/name" }
|
||||
hx-swap="none"
|
||||
class="flex gap-2 items-start"
|
||||
>
|
||||
@csrf.Token()
|
||||
@input.Input(input.Props{
|
||||
Name: "name",
|
||||
Value: space.Name,
|
||||
Attributes: templ.Attributes{
|
||||
"autocomplete": "off",
|
||||
"required": true,
|
||||
},
|
||||
})
|
||||
@button.Button(button.Props{
|
||||
Type: button.TypeSubmit,
|
||||
}) {
|
||||
Save
|
||||
}
|
||||
</form>
|
||||
} else {
|
||||
<p class="text-sm">{ space.Name }</p>
|
||||
}
|
||||
}
|
||||
}
|
||||
// Members Section
|
||||
@card.Card() {
|
||||
@card.Header() {
|
||||
@card.Title() {
|
||||
<div class="flex items-center gap-2">
|
||||
@icon.Users(icon.Props{Class: "size-5"})
|
||||
Members
|
||||
</div>
|
||||
}
|
||||
@card.Description() {
|
||||
People who have access to this space.
|
||||
}
|
||||
}
|
||||
@card.Content() {
|
||||
<div class="divide-y" id="members-list">
|
||||
for _, member := range members {
|
||||
@MemberRow(space.ID, member, isOwner, currentUserID)
|
||||
}
|
||||
</div>
|
||||
}
|
||||
}
|
||||
// Invitations Section (owner only)
|
||||
if isOwner {
|
||||
@card.Card() {
|
||||
@card.Header() {
|
||||
@card.Title() {
|
||||
<div class="flex items-center gap-2">
|
||||
@icon.Mail(icon.Props{Class: "size-5"})
|
||||
Invitations
|
||||
</div>
|
||||
}
|
||||
@card.Description() {
|
||||
Invite new members and manage pending invitations.
|
||||
}
|
||||
}
|
||||
@card.Content() {
|
||||
<div class="space-y-4">
|
||||
<form
|
||||
hx-post={ "/app/spaces/" + space.ID + "/invites" }
|
||||
hx-swap="none"
|
||||
_="on htmx:afterOnLoad if event.detail.xhr.status == 200 reset() me then send refreshInvites to #pending-invites"
|
||||
class="flex gap-2 items-start"
|
||||
>
|
||||
@csrf.Token()
|
||||
@input.Input(input.Props{
|
||||
Name: "email",
|
||||
Placeholder: "Email address...",
|
||||
Attributes: templ.Attributes{
|
||||
"type": "email",
|
||||
"autocomplete": "off",
|
||||
"required": true,
|
||||
},
|
||||
})
|
||||
@button.Button(button.Props{
|
||||
Type: button.TypeSubmit,
|
||||
}) {
|
||||
@icon.UserPlus(icon.Props{Class: "size-4"})
|
||||
Invite
|
||||
}
|
||||
</form>
|
||||
<div
|
||||
id="pending-invites"
|
||||
hx-get={ "/app/spaces/" + space.ID + "/settings/invites" }
|
||||
hx-trigger="refreshInvites from:body"
|
||||
hx-swap="innerHTML"
|
||||
>
|
||||
if len(pendingInvites) > 0 {
|
||||
<h4 class="text-sm font-medium text-muted-foreground mb-2">Pending invitations</h4>
|
||||
<div class="divide-y">
|
||||
for _, invite := range pendingInvites {
|
||||
@PendingInviteRow(space.ID, invite)
|
||||
}
|
||||
</div>
|
||||
} else {
|
||||
<p class="text-sm text-muted-foreground">No pending invitations.</p>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
}
|
||||
</div>
|
||||
@dialog.Script()
|
||||
}
|
||||
}
|
||||
|
||||
templ MemberRow(spaceID string, member *model.SpaceMemberWithProfile, isOwner bool, currentUserID string) {
|
||||
<div id={ "member-" + member.UserID } class="flex items-center justify-between py-3">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="flex h-8 w-8 items-center justify-center rounded-full bg-muted text-sm font-medium">
|
||||
{ string([]rune(member.Name)[0]) }
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm font-medium">{ member.Name }</p>
|
||||
<p class="text-xs text-muted-foreground">{ member.Email }</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
if member.Role == model.RoleOwner {
|
||||
@badge.Badge(badge.Props{Variant: badge.VariantDefault}) {
|
||||
@icon.Crown(icon.Props{Class: "size-3"})
|
||||
Owner
|
||||
}
|
||||
} else {
|
||||
@badge.Badge(badge.Props{Variant: badge.VariantSecondary}) {
|
||||
Member
|
||||
}
|
||||
}
|
||||
if isOwner && member.UserID != currentUserID && member.Role != model.RoleOwner {
|
||||
{{ dialogID := "remove-member-dialog-" + member.UserID }}
|
||||
@dialog.Dialog(dialog.Props{ID: dialogID}) {
|
||||
@dialog.Trigger() {
|
||||
@button.Button(button.Props{
|
||||
Variant: button.VariantGhost,
|
||||
Size: button.SizeIcon,
|
||||
Type: button.TypeButton,
|
||||
}) {
|
||||
@icon.UserMinus(icon.Props{Class: "size-4 text-destructive"})
|
||||
}
|
||||
}
|
||||
@dialog.Content() {
|
||||
@dialog.Header() {
|
||||
@dialog.Title() {
|
||||
Remove member
|
||||
}
|
||||
@dialog.Description() {
|
||||
Are you sure you want to remove { member.Name } from this space? They will lose access immediately.
|
||||
}
|
||||
}
|
||||
@dialog.Footer() {
|
||||
@dialog.Close() {
|
||||
@button.Button(button.Props{
|
||||
Variant: button.VariantOutline,
|
||||
Type: button.TypeButton,
|
||||
}) {
|
||||
Cancel
|
||||
}
|
||||
}
|
||||
@dialog.Close() {
|
||||
@button.Button(button.Props{
|
||||
Variant: button.VariantDestructive,
|
||||
Type: button.TypeButton,
|
||||
Attributes: templ.Attributes{
|
||||
"hx-delete": "/app/spaces/" + spaceID + "/members/" + member.UserID,
|
||||
"hx-target": "#member-" + member.UserID,
|
||||
"hx-swap": "outerHTML",
|
||||
"hx-headers": `{"X-CSRF-Token": "` + ctxkeys.CSRFToken(ctx) + `"}`,
|
||||
},
|
||||
}) {
|
||||
Remove
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
templ PendingInviteRow(spaceID string, invite *model.SpaceInvitation) {
|
||||
<div id={ "invite-" + invite.Token } class="flex items-center justify-between py-3">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="flex h-8 w-8 items-center justify-center rounded-full bg-muted text-sm">
|
||||
@icon.Mail(icon.Props{Class: "size-4 text-muted-foreground"})
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm font-medium">{ invite.Email }</p>
|
||||
<p class="text-xs text-muted-foreground">Sent { invite.CreatedAt.Format("Jan 02, 2006") }</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
@badge.Badge(badge.Props{Variant: badge.VariantOutline}) {
|
||||
Pending
|
||||
}
|
||||
@button.Button(button.Props{
|
||||
Variant: button.VariantGhost,
|
||||
Size: button.SizeIcon,
|
||||
Type: button.TypeButton,
|
||||
Attributes: templ.Attributes{
|
||||
"hx-delete": "/app/spaces/" + spaceID + "/invites/" + invite.Token,
|
||||
"hx-target": "#invite-" + invite.Token,
|
||||
"hx-swap": "outerHTML",
|
||||
"hx-headers": `{"X-CSRF-Token": "` + ctxkeys.CSRFToken(ctx) + `"}`,
|
||||
},
|
||||
}) {
|
||||
@icon.X(icon.Props{Class: "size-4 text-destructive"})
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
templ PendingInvitesList(spaceID string, pendingInvites []*model.SpaceInvitation) {
|
||||
if len(pendingInvites) > 0 {
|
||||
<h4 class="text-sm font-medium text-muted-foreground mb-2">Pending invitations</h4>
|
||||
<div class="divide-y">
|
||||
for _, invite := range pendingInvites {
|
||||
@PendingInviteRow(spaceID, invite)
|
||||
}
|
||||
</div>
|
||||
} else {
|
||||
<p class="text-sm text-muted-foreground">No pending invitations.</p>
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue