Skip to content

Document

How to build a document page with the document package: an A4 page with editable content, comment threads, log entries and a dialog for new comments.

Document

package main

import (
	"github.com/worldiety/option"
	"go.wdy.de/nago/application"
	"go.wdy.de/nago/presentation/core"
	"go.wdy.de/nago/presentation/ui"
	"go.wdy.de/nago/presentation/ui/alert"
	"go.wdy.de/nago/presentation/ui/document"
	"go.wdy.de/nago/web/vuejs"
	"time"
)

func main() {
	application.Configure(func(cfg *application.Configurator) {
		cfg.SetApplicationID("de.worldiety.tutorial_68")
		cfg.Serve(vuejs.Dist())

		option.MustZero(cfg.StandardSystems())
		option.Must(option.Must(cfg.UserManagement()).UseCases.EnableBootstrapAdmin(time.Now().Add(time.Hour), "%6UbRsCuM8N$auy"))
		cfg.SetDecorator(cfg.NewScaffold().Decorator())

		cfg.RootViewWithDecoration(".", func(wnd core.Window) core.View {
			edit := core.AutoState[bool](wnd)
			text := core.AutoState[string](wnd).Init(func() string {
				return "finally a text to edit"
			})

			d := time.Date(2025, 7, 9, 12, 42, 0, 0, time.Local)

			addComment := core.AutoState[string](wnd).Observe(func(newValue string) {
				alert.ShowBannerMessage(wnd, alert.Message{Title: "Kommentar hinzugefügt", Message: newValue, Intent: alert.IntentOk})
			})

			selectedA := core.AutoState[bool](wnd)
			selectedB := core.AutoState[bool](wnd)
			newCommentPresented := core.AutoState[bool](wnd)

			return ui.VStack(
				ui.H1("Document example"),
				document.NewCommentDialog(newCommentPresented, func(text string) {
					alert.ShowBannerMessage(wnd, alert.Message{Title: "Neuer Kommentar", Message: text, Intent: alert.IntentOk})
				}),
				document.Page(
					document.AttachComment(selectedA, ui.Text("hello word")),
					document.Editable(
						func() core.View {
							return document.AttachComment(selectedB, ui.Text(text.Get()))
						},

						func() core.View {
							return ui.TextField("text", text.Get()).InputValue(text)
						},
					).Style(document.TopTrailing).
						Comment(func() {
							newCommentPresented.Set(true)
						}).
						InputValue(edit),
				).Size(document.DinA4).
					Comment(
						document.LogEntry("hello log entry", "Torben", d),
						document.LogEntry("another log entry with a lot more text to tell and more and more stories about stuff and things which don't matter at all.", "Olaf", d),
						document.Thread(wnd, document.Message{User: wnd.Subject().ID(), Message: "Toller Einzelkommentar", Time: d}).InputSelectedValue(selectedA),
						document.Thread(wnd,
							document.Message{User: wnd.Subject().ID(), Message: "Wie findest du das?", Time: d},
							document.Message{User: wnd.Subject().ID(), Message: "so mäßig", Time: d},
							document.Message{User: wnd.Subject().ID(), Message: "wieso?", Time: d},
							document.Message{User: wnd.Subject().ID(), Message: "sieht aus wie word", Time: d},
						).InputValue(addComment).InputSelectedValue(selectedB).Resolve(func() {
							alert.ShowBannerMessage(wnd, alert.Message{Title: "Erledigt", Message: "Gut gemacht", Intent: alert.IntentOk})
						}),
					),
			).FullWidth().Alignment(ui.Leading)

		})
	}).
		Run()
}

View on GitHub ↗ · run it with go run go.wdy.de/nago/example/cmd/tutorial-68-document@latest