std-form-advanced

Level: Molecule | Entity: FormEntry | Persistence: runtime

2 states, 3 events, 3 transitions

Live Preview

orbital FormEntryOrbital {
  entity FormEntry [runtime] {
    id : string
    name : string
    description : string
    status : string
    createdAt : string
    notes : string
    age : number
    isActive : boolean
    birthDate : datetime
    priority : string
    categoryId : relation
  }
  trait FormEntryFormAdvanced -> FormEntry [interaction] {
    initial: editing
    state editing {
      INIT -> editing
        (fetch FormEntry { include: ["categoryId"] })
        (fetch FormEntry)
        (render-ui main { type: "stack", direction: "vertical", gap: "lg", children: [{ type: "stack", direction: "horizontal", gap: "sm", align: "center", children: [{ type: "icon", name: "file-text", size: "lg" }, { type: "typography", content: "FormEntry Form", variant: "h2" }] }, { type: "divider" }, { type: "form-section", entity: "FormEntry", mode: "create", submitEvent: "SUBMIT", cancelEvent: "INIT", fields: [{ name: "name", label: "Name" }, { name: "description", label: "Description" }, { name: "status", label: "Status", type: "enum", values: ["active", "inactive", "pending"] }, { name: "notes", label: "Notes", type: "textarea" }, { name: "age", label: "Age", type: "number" }, { name: "isActive", label: "Is Active", type: "boolean" }, { name: "birthDate", label: "Birth Date", type: "date" }, { name: "priority", label: "Priority", type: "enum", values: ["low", "medium", "high", "critical"] }, { name: "categoryId", label: "Category ID", type: "relation", relation: { entity: "FormEntry", cardinality: "many-to-one" } }] }] })
      SUBMIT -> submitted
        (persist create FormEntry @payload.data)
        (render-ui main { type: "stack", direction: "vertical", gap: "lg", align: "center", children: [{ type: "icon", name: "check-circle", size: "lg" }, { type: "typography", content: "Form Submitted", variant: "h2" }, { type: "alert", variant: "success", message: "Your form has been submitted successfully." }, { type: "grid", columns: 2, gap: "md", children: [{ type: "stack", direction: "vertical", gap: "xs", children: [{ type: "typography", variant: "caption", color: "muted", content: "Name" }, { type: "typography", variant: "body", content: ["object/get", ["array/first", "@entity"], "name"] }] }, { type: "stack", direction: "vertical", gap: "xs", children: [{ type: "typography", variant: "caption", color: "muted", content: "Description" }, { type: "typography", variant: "body", content: ["object/get", ["array/first", "@entity"], "description"] }] }, { type: "stack", direction: "vertical", gap: "xs", children: [{ type: "typography", variant: "caption", color: "muted", content: "Status" }, { type: "typography", variant: "body", content: ["object/get", ["array/first", "@entity"], "status"] }] }, { type: "stack", direction: "vertical", gap: "xs", children: [{ type: "typography", variant: "caption", color: "muted", content: "Notes" }, { type: "typography", variant: "body", content: ["object/get", ["array/first", "@entity"], "notes"] }] }, { type: "stack", direction: "vertical", gap: "xs", children: [{ type: "typography", variant: "caption", color: "muted", content: "Age" }, { type: "typography", variant: "body", content: ["object/get", ["array/first", "@entity"], "age"] }] }, { type: "stack", direction: "vertical", gap: "xs", children: [{ type: "typography", variant: "caption", color: "muted", content: "Is Active" }, { type: "typography", variant: "body", content: ["object/get", ["array/first", "@entity"], "isActive"] }] }, { type: "stack", direction: "vertical", gap: "xs", children: [{ type: "typography", variant: "caption", color: "muted", content: "Birth Date" }, { type: "typography", variant: "body", content: ["object/get", ["array/first", "@entity"], "birthDate"] }] }, { type: "stack", direction: "vertical", gap: "xs", children: [{ type: "typography", variant: "caption", color: "muted", content: "Priority" }, { type: "typography", variant: "body", content: ["object/get", ["array/first", "@entity"], "priority"] }] }, { type: "stack", direction: "vertical", gap: "xs", children: [{ type: "typography", variant: "caption", color: "muted", content: "Category ID" }, { type: "typography", variant: "body", content: ["object/get", ["array/first", "@entity"], "categoryId"] }] }] }, { type: "button", label: "New Entry", event: "RESET", variant: "primary", icon: "plus" }] })
        (notify "FormEntry created successfully")
    }
    state submitted {
      RESET -> editing
        (fetch FormEntry { include: ["categoryId"] })
        (fetch FormEntry)
        (render-ui main { type: "stack", direction: "vertical", gap: "lg", children: [{ type: "stack", direction: "horizontal", gap: "sm", align: "center", children: [{ type: "icon", name: "file-text", size: "lg" }, { type: "typography", content: "FormEntry Form", variant: "h2" }] }, { type: "divider" }, { type: "form-section", entity: "FormEntry", mode: "create", submitEvent: "SUBMIT", cancelEvent: "INIT", fields: [{ name: "name", label: "Name" }, { name: "description", label: "Description" }, { name: "status", label: "Status", type: "enum", values: ["active", "inactive", "pending"] }, { name: "notes", label: "Notes", type: "textarea" }, { name: "age", label: "Age", type: "number" }, { name: "isActive", label: "Is Active", type: "boolean" }, { name: "birthDate", label: "Birth Date", type: "date" }, { name: "priority", label: "Priority", type: "enum", values: ["low", "medium", "high", "critical"] }, { name: "categoryId", label: "Category ID", type: "relation", relation: { entity: "FormEntry", cardinality: "many-to-one" } }] }] })
    }
  }
  page "/formentrys/form" -> FormEntryFormAdvanced
}

Loading preview...

Orbital Visualization

Loading visualization...

Entity Fields

Field	Type	Default
id	string	-
name	string	-
description	string	-
status	string	"active"
createdAt	string	-
notes	string	""
age	number	0
isActive	boolean	false
birthDate	date	""
priority	string	"medium"
categoryId	relation	""

States

State	Type
editing	Initial
submitted	-

Events

Event	Payload
INIT	-
SUBMIT	data: object
RESET	-

Transitions

From	Event	To	Effects
editing	INIT	editing	3 effects
editing	SUBMIT	submitted	3 effects
submitted	RESET	editing	3 effects