feat: space settings page
This commit is contained in:
parent
c08acb7d7d
commit
2a9c2ca263
5 changed files with 272 additions and 0 deletions
75
internal/ui/forms/update_space.templ
Normal file
75
internal/ui/forms/update_space.templ
Normal file
|
|
@ -0,0 +1,75 @@
|
|||
package forms
|
||||
|
||||
import "git.juancwu.dev/juancwu/budgit/internal/routeurl"
|
||||
import "git.juancwu.dev/juancwu/budgit/internal/ui/components/button"
|
||||
import "git.juancwu.dev/juancwu/budgit/internal/ui/components/card"
|
||||
import "git.juancwu.dev/juancwu/budgit/internal/ui/components/form"
|
||||
import "git.juancwu.dev/juancwu/budgit/internal/ui/components/input"
|
||||
|
||||
type UpdateSpaceProps struct {
|
||||
SpaceID string
|
||||
|
||||
Name string
|
||||
|
||||
NameErr string
|
||||
GeneralErr string
|
||||
SuccessMsg string
|
||||
}
|
||||
|
||||
templ UpdateSpace(props UpdateSpaceProps) {
|
||||
<form
|
||||
id="update-space-form"
|
||||
hx-post={ routeurl.URL("action.app.spaces.space.settings.rename", "spaceID", props.SpaceID) }
|
||||
hx-swap="outerHTML"
|
||||
>
|
||||
@card.Card(card.Props{Class: "rounded-sm"}) {
|
||||
@card.Header() {
|
||||
@card.Title() {
|
||||
Space Details
|
||||
}
|
||||
@card.Description() {
|
||||
Update the space name.
|
||||
}
|
||||
}
|
||||
@card.Content(card.ContentProps{Class: "space-y-4"}) {
|
||||
if props.GeneralErr != "" {
|
||||
@form.Message(form.MessageProps{Variant: form.MessageVariantError}) {
|
||||
{ props.GeneralErr }
|
||||
}
|
||||
}
|
||||
if props.SuccessMsg != "" {
|
||||
@form.Message(form.MessageProps{Variant: form.MessageVariantInfo}) {
|
||||
{ props.SuccessMsg }
|
||||
}
|
||||
}
|
||||
@form.Item() {
|
||||
@form.Label(form.LabelProps{For: "name"}) {
|
||||
Space Name
|
||||
}
|
||||
@input.Input(input.Props{
|
||||
ID: "name",
|
||||
Name: "name",
|
||||
Type: input.TypeText,
|
||||
Class: "rounded-sm",
|
||||
Value: props.Name,
|
||||
HasError: props.NameErr != "",
|
||||
Required: true,
|
||||
Attributes: templ.Attributes{
|
||||
"autocomplete": "off",
|
||||
},
|
||||
})
|
||||
if props.NameErr != "" {
|
||||
@form.Message(form.MessageProps{Variant: form.MessageVariantError}) {
|
||||
{ props.NameErr }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@card.Footer(card.FooterProps{Class: "flex justify-end gap-2"}) {
|
||||
@button.Button(button.Props{Type: button.TypeSubmit}) {
|
||||
Save changes
|
||||
}
|
||||
}
|
||||
}
|
||||
</form>
|
||||
}
|
||||
|
|
@ -64,6 +64,16 @@ templ spaceSpecificSidebarContent(spaceID string) {
|
|||
<span>Space Overview</span>
|
||||
}
|
||||
}
|
||||
@sidebar.MenuItem() {
|
||||
@sidebar.MenuButton(sidebar.MenuButtonProps{
|
||||
Href: routeurl.URL("page.app.spaces.space.settings", "spaceID", spaceID),
|
||||
IsActive: ctxkeys.URLPath(ctx) == routeurl.URL("page.app.spaces.space.settings", "spaceID", spaceID),
|
||||
Tooltip: "Space Settings",
|
||||
}) {
|
||||
@icon.Settings()
|
||||
<span>Settings</span>
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
82
internal/ui/pages/space_settings.templ
Normal file
82
internal/ui/pages/space_settings.templ
Normal file
|
|
@ -0,0 +1,82 @@
|
|||
package pages
|
||||
|
||||
import "git.juancwu.dev/juancwu/budgit/internal/routeurl"
|
||||
import "git.juancwu.dev/juancwu/budgit/internal/ui/forms"
|
||||
import "git.juancwu.dev/juancwu/budgit/internal/ui/layouts"
|
||||
import "git.juancwu.dev/juancwu/budgit/internal/ui/components/button"
|
||||
import "git.juancwu.dev/juancwu/budgit/internal/ui/components/card"
|
||||
import "git.juancwu.dev/juancwu/budgit/internal/ui/components/dialog"
|
||||
import "git.juancwu.dev/juancwu/budgit/internal/ui/components/icon"
|
||||
|
||||
type SpaceSettingsPageProps struct {
|
||||
SpaceID string
|
||||
SpaceName string
|
||||
CanDelete bool
|
||||
UpdateForm forms.UpdateSpaceProps
|
||||
}
|
||||
|
||||
templ SpaceSettingsPage(props SpaceSettingsPageProps) {
|
||||
@layouts.App("Space Settings", spaceOverviewSidebarContent(), spaceSpecificSidebarContent(props.SpaceID)) {
|
||||
<div class="container max-w-3xl px-6 py-8 mx-auto space-y-8">
|
||||
<div>
|
||||
<h1 class="text-3xl font-bold">Space Settings</h1>
|
||||
<p class="text-muted-foreground mt-2">
|
||||
Manage settings for { props.SpaceName }.
|
||||
</p>
|
||||
</div>
|
||||
@forms.UpdateSpace(props.UpdateForm)
|
||||
if props.CanDelete {
|
||||
@card.Card(card.Props{Class: "rounded-sm border-destructive"}) {
|
||||
@card.Header() {
|
||||
@card.Title(card.TitleProps{Class: "text-destructive"}) {
|
||||
Danger Zone
|
||||
}
|
||||
@card.Description() {
|
||||
Deleting a space permanently removes the space and all of its accounts, transactions, and members. This cannot be undone.
|
||||
}
|
||||
}
|
||||
@card.Footer(card.FooterProps{Class: "flex justify-end pt-8"}) {
|
||||
@dialog.Dialog() {
|
||||
@dialog.Trigger() {
|
||||
@button.Button(button.Props{
|
||||
Variant: button.VariantDestructive,
|
||||
Class: "flex gap-2 items-center",
|
||||
}) {
|
||||
@icon.Trash2()
|
||||
Delete Space
|
||||
}
|
||||
}
|
||||
@dialog.Content() {
|
||||
@dialog.Header() {
|
||||
@dialog.Title() {
|
||||
Delete { props.SpaceName }?
|
||||
}
|
||||
@dialog.Description() {
|
||||
This permanently removes the space along with all of its accounts, transactions, and members. This cannot be undone.
|
||||
}
|
||||
}
|
||||
@dialog.Footer(dialog.FooterProps{Class: "mt-2"}) {
|
||||
@dialog.Close() {
|
||||
@button.Button(button.Props{Variant: button.VariantOutline}) {
|
||||
Cancel
|
||||
}
|
||||
}
|
||||
<form hx-post={ routeurl.URL("action.app.spaces.space.settings.delete", "spaceID", props.SpaceID) }>
|
||||
@button.Button(button.Props{
|
||||
Type: button.TypeSubmit,
|
||||
Variant: button.VariantDestructive,
|
||||
Class: "flex gap-2 items-center",
|
||||
}) {
|
||||
@icon.Trash2()
|
||||
Delete Space
|
||||
}
|
||||
</form>
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</div>
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue