std-geospatial

Level: Molecule | Entity: Location | Persistence: persistent

1 states, 3 events, 2 transitions

Live Preview

orbital LocationOrbital {
  entity Location [persistent: locations] {
    id : string
    name : string
    description : string
    status : string
    createdAt : string
    pendingId : string
  }
  trait LocationBrowse -> Location [interaction] {
    state browsing {
      INIT -> browsing
        (fetch Location)
        (render-ui main { type: "stack", direction: "vertical", gap: "lg", className: "max-w-5xl mx-auto w-full", children: [{ type: "stack", direction: "horizontal", gap: "md", justify: "space-between", align: "center", children: [{ type: "stack", direction: "horizontal", gap: "sm", align: "center", children: [{ type: "icon", name: "map-pin", size: "lg" }, { type: "typography", content: "Locations Picker", variant: "h2" }] }] }, { type: "divider" }, { type: "data-grid", entity: "Location", emptyIcon: "inbox", emptyTitle: "No locations found", emptyDescription: "No locations are available to select.", itemActions: [{ label: "Select Location", event: "SELECT", variant: "ghost", size: "sm" }], columns: [{ name: "name", label: "Name", variant: "h4", icon: "map-pin" }, { name: "description", label: "Description", variant: "badge", colorMap: { active: "success", completed: "success", done: "success", pending: "warning", draft: "warning", scheduled: "warning", inactive: "neutral", archived: "neutral", disabled: "neutral", error: "destructive", cancelled: "destructive", failed: "destructive" } }, { name: "status", label: "Status", variant: "caption" }] }, { type: "floating-action-button", icon: "plus", event: "INIT", label: "Create", tooltip: "Create" }] })
      CONFIRMED -> browsing
        (fetch Location)
    }
    listens {
      * CONFIRMED -> CONFIRMED
    }
  }
  trait LocationSelect -> Location [interaction] {
    initial: closed
    state closed {
      INIT -> closed
        (fetch Location)
      SELECT -> open
        (fetch Location { id: "@payload.id" })
        (render-ui modal { type: "stack", direction: "vertical", gap: "md", children: [{ type: "stack", direction: "horizontal", gap: "sm", align: "center", children: [{ type: "icon", name: "map-pin", size: "md" }, { type: "typography", variant: "h3", content: "@entity.name" }] }, { type: "divider" }, { type: "stack", direction: "horizontal", gap: "md", children: [{ type: "typography", variant: "caption", content: "Name" }, { type: "typography", variant: "body", content: "@entity.name" }] }, { type: "stack", direction: "horizontal", gap: "md", children: [{ type: "typography", variant: "caption", content: "Description" }, { type: "typography", variant: "body", content: "@entity.description" }] }, { type: "stack", direction: "horizontal", gap: "md", children: [{ type: "typography", variant: "caption", content: "Status" }, { type: "typography", variant: "body", content: "@entity.status" }] }, { type: "stack", direction: "horizontal", gap: "md", children: [{ type: "typography", variant: "caption", content: "Created At" }, { type: "typography", variant: "body", content: "@entity.createdAt" }] }, { type: "stack", direction: "horizontal", gap: "md", children: [{ type: "typography", variant: "caption", content: "Pending ID" }, { type: "typography", variant: "body", content: "@entity.pendingId" }] }, { type: "divider" }, { type: "stack", direction: "horizontal", gap: "sm", justify: "end", children: [{ type: "button", label: "Cancel", event: "CLOSE", variant: "ghost" }, { type: "button", label: "Confirm Selection", event: "CONFIRM_SELECT", variant: "primary", icon: "check" }] }] })
    }
    state open {
      CLOSE -> closed
        (render-ui modal null)
        (notify Cancelled info)
      CONFIRM_SELECT -> closed
        (render-ui modal null)
    }
  }
  trait LocationConfirmSelect -> Location [interaction] {
    initial: idle
    state idle {
      INIT -> idle
        (fetch Location)
      CONFIRM_SELECT -> confirming
        (set @entity.pendingId @payload.id)
        (fetch Location { id: "@payload.id" })
        (render-ui modal { type: "stack", direction: "vertical", gap: "md", children: [{ type: "stack", direction: "horizontal", gap: "sm", align: "center", children: [{ type: "icon", name: "alert-triangle", size: "md" }, { type: "typography", content: "Confirm Location Selection", variant: "h3" }] }, { type: "divider" }, { type: "alert", variant: "danger", message: "Are you sure you want to select this location?" }, { type: "stack", direction: "horizontal", gap: "sm", justify: "end", children: [{ type: "button", label: "Cancel", event: "CANCEL", variant: "ghost" }, { type: "button", label: "Confirm", event: "CONFIRMED", variant: "danger", icon: "check" }] }] })
    }
    state confirming {
      CONFIRMED -> idle
        (fetch Location)
        (render-ui modal null)
        (fetch Location)
        (emit CONFIRMED)
      CANCEL -> idle
        (render-ui modal null)
        (fetch Location)
      CLOSE -> idle
        (render-ui modal null)
        (fetch Location)
    }
    emits {
      CONFIRMED
    }
  }
  page "/locations" -> LocationBrowse, LocationSelect, LocationConfirmSelect
}

Loading preview...

Orbital Visualization

Loading visualization...

Entity Fields

Field	Type	Default
id	string	-
name	string	-
description	string	-
status	string	"active"
createdAt	string	-
pendingId	string	""

States

State	Type
browsing	Initial

Events

Event	Payload
INIT	-
SELECT	id: string
CONFIRMED	data: object

Transitions

From	Event	To	Effects
browsing	INIT	browsing	2 effects
browsing	CONFIRMED	browsing	1 effect

Listens

• [object Object]