Add edit database form

internal/view/web/dashboard/databases/create_database.go

@@ -76,7 +76,7 @@ func createDatabaseButton() gomponents.Node {
 
 	mo := component.Modal(component.ModalParams{
 		Size:  component.SizeMd,
-		Title: "Create Database",
+		Title: "Create database",
 		Content: []gomponents.Node{
 			html.Form(
 				html.ID("create-database-form"),
@@ -144,7 +144,7 @@ func createDatabaseButton() gomponents.Node {
 	button := html.Button(
 		mo.OpenerAttr,
 		html.Class("btn btn-primary"),
-		component.SpanText("Create Database"),
+		component.SpanText("Create database"),
 		lucide.Plus(),
 	)
 

internal/view/web/dashboard/databases/edit_database.go

@@ -0,0 +1,172 @@
+package databases
+
+import (
+	"database/sql"
+
+	lucide "github.com/eduardolat/gomponents-lucide"
+	"github.com/eduardolat/pgbackweb/internal/database/dbgen"
+	"github.com/eduardolat/pgbackweb/internal/validate"
+	"github.com/eduardolat/pgbackweb/internal/view/web/component"
+	"github.com/eduardolat/pgbackweb/internal/view/web/htmx"
+	"github.com/google/uuid"
+	"github.com/labstack/echo/v4"
+	"github.com/maragudk/gomponents"
+	"github.com/maragudk/gomponents/components"
+	"github.com/maragudk/gomponents/html"
+)
+
+func (h *handlers) editDatabaseHandler(c echo.Context) error {
+	ctx := c.Request().Context()
+
+	databaseID, err := uuid.Parse(c.Param("databaseID"))
+	if err != nil {
+		return htmx.RespondToastError(c, err.Error())
+	}
+
+	var formData createDatabaseDTO
+	if err := c.Bind(&formData); err != nil {
+		return htmx.RespondToastError(c, err.Error())
+	}
+	if err := validate.Struct(&formData); err != nil {
+		return htmx.RespondToastError(c, err.Error())
+	}
+
+	_, err = h.servs.DatabasesService.UpdateDatabase(
+		ctx, dbgen.DatabasesServiceUpdateDatabaseParams{
+			ID:               databaseID,
+			Name:             sql.NullString{String: formData.Name, Valid: true},
+			PgVersion:        sql.NullString{String: formData.Version, Valid: true},
+			ConnectionString: sql.NullString{String: formData.ConnectionString, Valid: true},
+		},
+	)
+	if err != nil {
+		return htmx.RespondToastError(c, err.Error())
+	}
+
+	return htmx.RespondToastSuccess(c, "Database updated")
+}
+
+func editDatabaseButton(
+	database dbgen.DatabasesServicePaginateDatabasesRow,
+) gomponents.Node {
+	idPref := "edit-database-" + database.ID.String()
+	formID := idPref + "-form"
+	btnClass := idPref + "-btn"
+	loadingID := idPref + "-loading"
+
+	htmxAttributes := func(url string) gomponents.Node {
+		return gomponents.Group([]gomponents.Node{
+			htmx.HxPost(url),
+			htmx.HxInclude("#" + formID),
+			htmx.HxDisabledELT("." + btnClass),
+			htmx.HxIndicator("#" + loadingID),
+			htmx.HxValidate("true"),
+		})
+	}
+
+	mo := component.Modal(component.ModalParams{
+		Size:  component.SizeMd,
+		Title: "Edit database",
+		Content: []gomponents.Node{
+			html.Form(
+				html.ID(formID),
+				html.Class("space-y-2"),
+
+				component.InputControl(component.InputControlParams{
+					Name:        "name",
+					Label:       "Name",
+					Placeholder: "My database",
+					Required:    true,
+					Type:        component.InputTypeText,
+					HelpText:    "A name to easily identify the database",
+					Children: []gomponents.Node{
+						html.Value(database.Name),
+					},
+				}),
+
+				component.SelectControl(component.SelectControlParams{
+					Name:     "version",
+					Label:    "Version",
+					Required: true,
+					HelpText: "The version of the database",
+					Children: []gomponents.Node{
+						html.Option(
+							gomponents.If(database.PgVersion == "13", html.Selected()),
+							html.Value("13"), gomponents.Text("PostgreSQL 13"),
+						),
+						html.Option(
+							gomponents.If(database.PgVersion == "14", html.Selected()),
+							html.Value("14"), gomponents.Text("PostgreSQL 14"),
+						),
+						html.Option(
+							gomponents.If(database.PgVersion == "15", html.Selected()),
+							html.Value("15"), gomponents.Text("PostgreSQL 15"),
+						),
+						html.Option(
+							gomponents.If(database.PgVersion == "16", html.Selected()),
+							html.Value("16"), gomponents.Text("PostgreSQL 16"),
+						),
+					},
+				}),
+
+				component.InputControl(component.InputControlParams{
+					Name:        "connection_string",
+					Label:       "Connection string",
+					Placeholder: "postgresql://user:password@localhost:5432/mydb",
+					Required:    true,
+					Type:        component.InputTypeText,
+					HelpText:    "It should be a valid PostgreSQL connection string including the database name. It will be stored securely using PGP encryption.",
+					Children: []gomponents.Node{
+						html.Value(database.DecryptedConnectionString),
+					},
+				}),
+			),
+
+			html.Div(
+				html.Class("flex justify-between items-center pt-4"),
+				html.Div(
+					html.Button(
+						htmxAttributes("/dashboard/databases/test"),
+						components.Classes{
+							btnClass:                      true,
+							"btn btn-neutral btn-outline": true,
+						},
+						html.Type("button"),
+						component.SpanText("Test connection"),
+						lucide.DatabaseZap(),
+					),
+				),
+				html.Div(
+					html.Class("flex justify-end items-center space-x-2"),
+					component.HxLoadingMd(loadingID),
+					html.Button(
+						htmxAttributes("/dashboard/databases/"+database.ID.String()+"/edit"),
+						components.Classes{
+							btnClass:          true,
+							"btn btn-primary": true,
+						},
+						html.Type("button"),
+						component.SpanText("Save"),
+						lucide.Save(),
+					),
+				),
+			),
+		},
+	})
+
+	button := html.Button(
+		mo.OpenerAttr,
+		html.Class("btn btn-neutral btn-sm btn-square btn-ghost"),
+		lucide.Pencil(),
+	)
+
+	return html.Div(
+		html.Class("inline-block"),
+		mo.HTML,
+		html.Div(
+			html.Class("inline-block tooltip tooltip-right"),
+			html.Data("tip", "Edit database"),
+			button,
+		),
+	)
+}

internal/view/web/dashboard/databases/list_databases.go

@@ -17,7 +17,7 @@ import (
 	"github.com/maragudk/gomponents/html"
 )
 
-func (h *handlers) indexListDatabasesHandler(c echo.Context) error {
+func (h *handlers) listDatabasesHandler(c echo.Context) error {
 	ctx := c.Request().Context()
 
 	var formData struct {
@@ -41,11 +41,11 @@ func (h *handlers) indexListDatabasesHandler(c echo.Context) error {
 	}
 
 	return echoutil.RenderGomponent(
-		c, http.StatusOK, indexListDatabases(pagination, databases),
+		c, http.StatusOK, listDatabases(pagination, databases),
 	)
 }
 
-func indexListDatabases(
+func listDatabases(
 	pagination paginateutil.PaginateResponse,
 	databases []dbgen.DatabasesServicePaginateDatabasesRow,
 ) gomponents.Node {
@@ -54,7 +54,11 @@ func indexListDatabases(
 		trs = append(trs, html.Tr(
 			html.Td(
 				html.Class("w-[40px]"),
-				deleteDatabaseButton(database.ID),
+				html.Div(
+					html.Class("flex justify-start space-x-1"),
+					editDatabaseButton(database),
+					deleteDatabaseButton(database.ID),
+				),
 			),
 			html.Td(component.SpanText(database.Name)),
 			html.Td(component.SpanText("PostgreSQL "+database.PgVersion)),

internal/view/web/dashboard/databases/router.go

@@ -20,8 +20,9 @@ func MountRouter(
 	h := newHandlers(servs)
 
 	parent.GET("", h.indexPageHandler)
-	parent.GET("/list", h.indexListDatabasesHandler)
+	parent.GET("/list", h.listDatabasesHandler)
 	parent.POST("", h.createDatabaseHandler)
 	parent.POST("/test", h.testDatabaseHandler)
 	parent.DELETE("/:databaseID", h.deleteDatabaseHandler)
+	parent.POST("/:databaseID/edit", h.editDatabaseHandler)
 }