std-sort

Level: Atom | Entity: SortableItem | Persistence: runtime

2 states, 2 events, 4 transitions

Live Preview

orbital SortableItemOrbital {
  entity SortableItem [runtime] {
    id : string
    name : string
    description : string
    status : string
    createdAt : string
  }
  trait SortableItemSort -> SortableItem [interaction] {
    initial: idle
    state idle {
      INIT -> idle
        (fetch SortableItem)
        (render-ui main { type: "stack", direction: "vertical", gap: "lg", children: [{ type: "stack", direction: "horizontal", gap: "sm", justify: "space-between", align: "center", children: [{ type: "stack", direction: "horizontal", gap: "sm", align: "center", children: [{ type: "icon", name: "arrow-up-down", size: "lg" }, { type: "typography", content: "SortableItems", variant: "h2" }] }] }, { type: "divider" }, { type: "stack", direction: "horizontal", gap: "sm", align: "center", children: [{ type: "typography", variant: "caption", color: "muted", content: "Sort by" }, { type: "button", label: "Name", event: "SORT", actionPayload: { field: "name", direction: "asc" }, variant: "secondary", icon: "arrow-up-down" }, { type: "button", label: "Description", event: "SORT", actionPayload: { field: "description", direction: "asc" }, variant: "secondary", icon: "arrow-up-down" }, { type: "button", label: "Status", event: "SORT", actionPayload: { field: "status", direction: "asc" }, variant: "secondary", icon: "arrow-up-down" }, { type: "button", label: "CreatedAt", event: "SORT", actionPayload: { field: "createdAt", direction: "asc" }, variant: "secondary", icon: "arrow-up-down" }] }, { type: "data-grid", entity: "SortableItem", emptyIcon: "inbox", emptyTitle: "No sortableitems yet", emptyDescription: "Add sortableitems to see them here.", columns: [{ name: "name", label: "Name", variant: "h4" }, { name: "description", label: "Description", variant: "caption" }, { name: "status", label: "Status", variant: "badge" }] }] })
      SORT -> sorted
        (fetch SortableItem null (concat @payload.field ":" @payload.direction))
        (render-ui main { type: "stack", direction: "vertical", gap: "lg", children: [{ type: "stack", direction: "horizontal", gap: "sm", justify: "space-between", align: "center", children: [{ type: "stack", direction: "horizontal", gap: "sm", align: "center", children: [{ type: "icon", name: "arrow-up-down", size: "lg" }, { type: "typography", content: "SortableItems", variant: "h2" }] }, { type: "button", label: "Clear sort", event: "INIT", variant: "ghost", icon: "x" }] }, { type: "divider" }, { type: "stack", direction: "horizontal", gap: "sm", align: "center", children: [{ type: "typography", variant: "caption", color: "muted", content: "Sort by" }, { type: "button", label: "Name", event: "SORT", actionPayload: { field: "name", direction: "desc" }, variant: "primary", icon: "chevron-up" }, { type: "button", label: "Description", event: "SORT", actionPayload: { field: "description", direction: "asc" }, variant: "secondary", icon: "arrow-up-down" }, { type: "button", label: "Status", event: "SORT", actionPayload: { field: "status", direction: "asc" }, variant: "secondary", icon: "arrow-up-down" }, { type: "button", label: "CreatedAt", event: "SORT", actionPayload: { field: "createdAt", direction: "asc" }, variant: "secondary", icon: "arrow-up-down" }] }, { type: "data-grid", entity: "SortableItem", emptyIcon: "inbox", emptyTitle: "No sortableitems yet", emptyDescription: "Add sortableitems to see them here.", columns: [{ name: "name", label: "Name", variant: "h4" }, { name: "description", label: "Description", variant: "caption" }, { name: "status", label: "Status", variant: "badge" }] }, { type: "sortable-list", entity: "SortableItem", onReorder: "SORT", renderItem: ["fn", "item", { type: "stack", direction: "horizontal", gap: "md", align: "center", children: [{ type: "icon", name: "grip-vertical", size: "sm" }, { type: "typography", variant: "body", content: "@item.name" }] }] }] })
    }
    state sorted {
      SORT -> sorted
        (fetch SortableItem null (concat @payload.field ":" @payload.direction))
        (render-ui main { type: "stack", direction: "vertical", gap: "lg", children: [{ type: "stack", direction: "horizontal", gap: "sm", justify: "space-between", align: "center", children: [{ type: "stack", direction: "horizontal", gap: "sm", align: "center", children: [{ type: "icon", name: "arrow-up-down", size: "lg" }, { type: "typography", content: "SortableItems", variant: "h2" }] }, { type: "button", label: "Clear sort", event: "INIT", variant: "ghost", icon: "x" }] }, { type: "divider" }, { type: "stack", direction: "horizontal", gap: "sm", align: "center", children: [{ type: "typography", variant: "caption", color: "muted", content: "Sort by" }, { type: "button", label: "Name", event: "SORT", actionPayload: { field: "name", direction: "desc" }, variant: "primary", icon: "chevron-up" }, { type: "button", label: "Description", event: "SORT", actionPayload: { field: "description", direction: "asc" }, variant: "secondary", icon: "arrow-up-down" }, { type: "button", label: "Status", event: "SORT", actionPayload: { field: "status", direction: "asc" }, variant: "secondary", icon: "arrow-up-down" }, { type: "button", label: "CreatedAt", event: "SORT", actionPayload: { field: "createdAt", direction: "asc" }, variant: "secondary", icon: "arrow-up-down" }] }, { type: "data-grid", entity: "SortableItem", emptyIcon: "inbox", emptyTitle: "No sortableitems yet", emptyDescription: "Add sortableitems to see them here.", columns: [{ name: "name", label: "Name", variant: "h4" }, { name: "description", label: "Description", variant: "caption" }, { name: "status", label: "Status", variant: "badge" }] }, { type: "sortable-list", entity: "SortableItem", onReorder: "SORT", renderItem: ["fn", "item", { type: "stack", direction: "horizontal", gap: "md", align: "center", children: [{ type: "icon", name: "grip-vertical", size: "sm" }, { type: "typography", variant: "body", content: "@item.name" }] }] }] })
      INIT -> idle
        (fetch SortableItem)
        (render-ui main { type: "stack", direction: "vertical", gap: "lg", children: [{ type: "stack", direction: "horizontal", gap: "sm", justify: "space-between", align: "center", children: [{ type: "stack", direction: "horizontal", gap: "sm", align: "center", children: [{ type: "icon", name: "arrow-up-down", size: "lg" }, { type: "typography", content: "SortableItems", variant: "h2" }] }] }, { type: "divider" }, { type: "stack", direction: "horizontal", gap: "sm", align: "center", children: [{ type: "typography", variant: "caption", color: "muted", content: "Sort by" }, { type: "button", label: "Name", event: "SORT", actionPayload: { field: "name", direction: "asc" }, variant: "secondary", icon: "arrow-up-down" }, { type: "button", label: "Description", event: "SORT", actionPayload: { field: "description", direction: "asc" }, variant: "secondary", icon: "arrow-up-down" }, { type: "button", label: "Status", event: "SORT", actionPayload: { field: "status", direction: "asc" }, variant: "secondary", icon: "arrow-up-down" }, { type: "button", label: "CreatedAt", event: "SORT", actionPayload: { field: "createdAt", direction: "asc" }, variant: "secondary", icon: "arrow-up-down" }] }, { type: "data-grid", entity: "SortableItem", emptyIcon: "inbox", emptyTitle: "No sortableitems yet", emptyDescription: "Add sortableitems to see them here.", columns: [{ name: "name", label: "Name", variant: "h4" }, { name: "description", label: "Description", variant: "caption" }, { name: "status", label: "Status", variant: "badge" }] }] })
    }
  }
  page "/sortableitems" -> SortableItemSort
}

Loading preview...

Orbital Visualization

Loading visualization...

Entity Fields

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

States

State	Type
idle	Initial
sorted	-

Events

Event	Payload
INIT	-
SORT	field: string, direction: string

Transitions

From	Event	To	Effects
idle	INIT	idle	2 effects
idle	SORT	sorted	2 effects
sorted	SORT	sorted	2 effects
sorted	INIT	idle	2 effects