std-filter

Level: Atom | Entity: FilterTarget | Persistence: runtime

2 states, 3 events, 4 transitions

Live Preview

orbital FilterTargetOrbital {
  entity FilterTarget [runtime] {
    id : string
    name : string
    description : string
    status : string
    createdAt : string
  }
  trait FilterTargetFilter -> FilterTarget [interaction] {
    initial: browsing
    state browsing {
      INIT -> browsing
        (fetch FilterTarget)
        (render-ui main { type: "stack", direction: "vertical", gap: "lg", children: [{ type: "stack", direction: "horizontal", gap: "md", justify: "space-between", align: "center", children: [{ type: "stack", direction: "horizontal", gap: "md", align: "center", children: [{ type: "icon", name: "filter", size: "lg" }, { type: "typography", content: "FilterTargets", variant: "h2" }] }, { type: "badge", label: "All" }] }, { type: "divider" }, { type: "filter-group", entity: "FilterTarget", filters: [{ field: "status", label: "Status", options: ["active", "inactive", "pending"], filterType: "select" }] }, { type: "divider" }, { type: "data-grid", entity: "FilterTarget", emptyIcon: "inbox", emptyTitle: "No filtertargets yet", emptyDescription: "Add filtertargets to see them here.", className: "transition-shadow hover:shadow-md cursor-pointer", renderItem: ["fn", "item", { type: "stack", direction: "vertical", gap: "sm", children: [{ type: "typography", variant: "h4", content: "@item.name" }, { type: "typography", variant: "caption", color: "muted", content: "@item.status" }] }] }] })
      FILTER -> filtered
        (fetch FilterTarget (== (object/get @entity @payload.field) @payload.value))
        (render-ui main { type: "stack", direction: "vertical", gap: "lg", 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: "filter", size: "lg" }, { type: "typography", content: "FilterTargets", variant: "h2" }] }, { type: "stack", direction: "horizontal", gap: "sm", align: "center", children: [{ type: "badge", label: "Filtered", variant: "primary" }, { type: "button", label: "Clear All", event: "CLEAR_FILTERS", variant: "ghost", icon: "x" }] }] }, { type: "stack", direction: "horizontal", gap: "sm", align: "center", children: [{ type: "icon", name: "filter", size: "sm" }, { type: "typography", variant: "caption", color: "muted", content: "Filtered by" }, { type: "badge", label: "@payload.field", variant: "secondary" }, { type: "typography", variant: "caption", content: "=" }, { type: "badge", label: "@payload.value", variant: "primary" }] }, { type: "divider" }, { type: "filter-group", entity: "FilterTarget", filters: [{ field: "status", label: "Status", options: ["active", "inactive", "pending"], filterType: "select" }] }, { type: "divider" }, { type: "data-grid", entity: "FilterTarget", emptyIcon: "inbox", emptyTitle: "No filtertargets yet", emptyDescription: "Add filtertargets to see them here.", className: "transition-shadow hover:shadow-md cursor-pointer", renderItem: ["fn", "item", { type: "stack", direction: "vertical", gap: "sm", children: [{ type: "typography", variant: "h4", content: "@item.name" }, { type: "typography", variant: "caption", color: "muted", content: "@item.status" }] }] }] })
    }
    state filtered {
      FILTER -> filtered
        (fetch FilterTarget (== (object/get @entity @payload.field) @payload.value))
        (render-ui main { type: "stack", direction: "vertical", gap: "lg", 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: "filter", size: "lg" }, { type: "typography", content: "FilterTargets", variant: "h2" }] }, { type: "stack", direction: "horizontal", gap: "sm", align: "center", children: [{ type: "badge", label: "Filtered", variant: "primary" }, { type: "button", label: "Clear All", event: "CLEAR_FILTERS", variant: "ghost", icon: "x" }] }] }, { type: "stack", direction: "horizontal", gap: "sm", align: "center", children: [{ type: "icon", name: "filter", size: "sm" }, { type: "typography", variant: "caption", color: "muted", content: "Filtered by" }, { type: "badge", label: "@payload.field", variant: "secondary" }, { type: "typography", variant: "caption", content: "=" }, { type: "badge", label: "@payload.value", variant: "primary" }] }, { type: "divider" }, { type: "filter-group", entity: "FilterTarget", filters: [{ field: "status", label: "Status", options: ["active", "inactive", "pending"], filterType: "select" }] }, { type: "divider" }, { type: "data-grid", entity: "FilterTarget", emptyIcon: "inbox", emptyTitle: "No filtertargets yet", emptyDescription: "Add filtertargets to see them here.", className: "transition-shadow hover:shadow-md cursor-pointer", renderItem: ["fn", "item", { type: "stack", direction: "vertical", gap: "sm", children: [{ type: "typography", variant: "h4", content: "@item.name" }, { type: "typography", variant: "caption", color: "muted", content: "@item.status" }] }] }] })
      CLEAR_FILTERS -> browsing
        (fetch FilterTarget)
        (render-ui main { type: "stack", direction: "vertical", gap: "lg", children: [{ type: "stack", direction: "horizontal", gap: "md", justify: "space-between", align: "center", children: [{ type: "stack", direction: "horizontal", gap: "md", align: "center", children: [{ type: "icon", name: "filter", size: "lg" }, { type: "typography", content: "FilterTargets", variant: "h2" }] }, { type: "badge", label: "All" }] }, { type: "divider" }, { type: "filter-group", entity: "FilterTarget", filters: [{ field: "status", label: "Status", options: ["active", "inactive", "pending"], filterType: "select" }] }, { type: "divider" }, { type: "data-grid", entity: "FilterTarget", emptyIcon: "inbox", emptyTitle: "No filtertargets yet", emptyDescription: "Add filtertargets to see them here.", className: "transition-shadow hover:shadow-md cursor-pointer", renderItem: ["fn", "item", { type: "stack", direction: "vertical", gap: "sm", children: [{ type: "typography", variant: "h4", content: "@item.name" }, { type: "typography", variant: "caption", color: "muted", content: "@item.status" }] }] }] })
    }
  }
  page "/filtertargets" -> FilterTargetFilter
}

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
browsing	Initial
filtered	-

Events

Event	Payload
INIT	-
FILTER	field: string, value: string
CLEAR_FILTERS	-

Transitions

From	Event	To	Effects
browsing	INIT	browsing	2 effects
browsing	FILTER	filtered	2 effects
filtered	FILTER	filtered	2 effects
filtered	CLEAR_FILTERS	browsing	2 effects