Zgradi celoten orbital

2. Eno stanje

Vsaka lastnost potrebuje vsaj eno stanje in zaslon zanj. INIT se sproži, ko se stran odpre:

lolo

app expense-step-2 "1.0.0"
"Step 2: one state and its screen."
orbital ExpenseOrbital {
  entity Expense [runtime] {
    id : string!
    amount : number = 120
  }

  trait Approval -> Expense [interaction, instance] {
    initial: draft

    state draft {
      INIT -> draft
        (set @entity.amount 120)
        (render-ui main { type: typography, content: (str/concat "Draft claim: " @entity.amount " EUR"), variant: h4 })
    }
  }

  page "/expenses" -> Approval
}

Preveri ga z orb validate. Uspe: eno stanje, zaslon, stran, ki nekaj prikaže. Opazi (set @entity.amount 120): vsako polje, ki ga lastnost bere, mora nastaviti neki prehod. Nič ni privzeto.

3. Premikanje med stanji

Zahtevek se odda, nato odobri ali zavrne. Vsak korak je stanje in vsak gumb pošlje dogodek, ki ga sprejme neko stanje. Če dodaš gumb, katerega dogodka ne obravnava nobeno stanje, ga orb validate zavrne. Poskusi.

lolo

state draft {
  SUBMIT -> submitted
    (render-ui main { type: stack, direction: horizontal, gap: sm, children: [
      { type: button, label: "Approve", action: APPROVE, variant: primary },
      { type: button, label: "Reject", action: REJECT, variant: secondary }
    ] })
}

state submitted {
  APPROVE -> approved
    (set @entity.note "Approved")
  REJECT -> rejected
    (set @entity.note "Rejected")
}

Opazi, da tudi approved in rejected potrebujeta izhod: stanje brez izhodnega prehoda je slepa ulica in preverjevalnik to pove. Dokončana različica doda NEW_CLAIM in REVISE.

4. Pravilo kot pogoj

Pravilo podjetja: zahtevkov nad 500 EUR tu ni mogoče odobriti. Zapiši ga na prehod:

lolo

APPROVE -> approved when (<= @entity.amount 500)
  (set @entity.note "Approved")

Ko pogoj ne drži, je APPROVE zavrnjen in zahtevek ostane oddan. Pravilo živi na natanko enem mestu, preverjevalnik pa preizkusi obe strani.

5. Dokončan orbital

Avtomat stanj

Approval

on Expense · states: 4 · transitions: 7

emitsMOVED

INIT

RAISE

SUBMIT

(> @entity.amount 0)

APPROVE

(<= @entity.amount 500)

REJECT

NEW_CLAIM

REVISE

nowdraft

submitted

approved

rejected

Teče v živo

Draft claim: EUR

Zgornji program kot avtomati stanj, eden za vsako lastnost: vsak okvir je stanje, vsaka puščica dogodek, ki ga premakne, ikone na puščici pa so učinki, ki jih ta dogodek izvede. ◇ na puščici je varovalo; z miško pojdite nanj in preberite pogoj. Kako brati AVL

std-orb-docex-expense.lolololo

app std-orb-docex-expense "1.0.0"
"std-orb-docex-expense — an approval flow: four states, a guard on the amount, and a rule the shape of the program enforces."
orbital ExpenseOrbital {
  entity Expense [runtime] {
    id : string!
    amount : number = 120
    note : string = ""
  }

  trait Approval -> Expense [interaction, instance] {
    initial: draft

    state draft {
      INIT -> draft
        (render-ui main { type: stack, direction: vertical, gap: sm, children: [
          { type: typography, content: (str/concat "Draft claim: " @entity.amount " EUR"), variant: h4 },
          { type: stack, direction: horizontal, gap: sm, children: [
            { type: button, label: "Add 50 EUR", action: RAISE, variant: ghost },
            { type: button, label: "Submit", action: SUBMIT, variant: primary }
          ] }
        ] })
      RAISE -> draft
        (emit MOVED { event: "RAISE" })
        (set @entity.amount (+ @entity.amount 50))
      SUBMIT -> submitted when (> @entity.amount 0)
        (emit MOVED { event: "SUBMIT" })
        (render-ui main { type: stack, direction: vertical, gap: sm, children: [
          { type: typography, content: (str/concat "Submitted: " @entity.amount " EUR"), variant: h4 },
          { type: typography, content: "Claims over 500 EUR cannot be approved here.", variant: small, color: muted },
          { type: stack, direction: horizontal, gap: sm, children: [
            { type: button, label: "Approve", action: APPROVE, variant: primary },
            { type: button, label: "Reject", action: REJECT, variant: secondary }
          ] }
        ] })
    }

    state submitted {
      APPROVE -> approved when (<= @entity.amount 500)
        (emit MOVED { event: "APPROVE" })
        (set @entity.note "Approved")
        (render-ui main { type: stack, direction: vertical, gap: sm, children: [
          { type: badge, label: "Approved", variant: success },
          { type: button, label: "New claim", action: NEW_CLAIM, variant: ghost }
        ] })
      REJECT -> rejected
        (emit MOVED { event: "REJECT" })
        (set @entity.note "Rejected")
        (render-ui main { type: stack, direction: vertical, gap: sm, children: [
          { type: badge, label: "Rejected", variant: error },
          { type: button, label: "Revise", action: REVISE, variant: primary }
        ] })
    }

    state approved {
      NEW_CLAIM -> draft
        (emit MOVED { event: "NEW_CLAIM" })
        (set @entity.amount 120)
        (render-ui main { type: stack, direction: vertical, gap: sm, children: [
          { type: typography, content: (str/concat "Draft claim: " @entity.amount " EUR"), variant: h4 },
          { type: stack, direction: horizontal, gap: sm, children: [
            { type: button, label: "Add 50 EUR", action: RAISE, variant: ghost },
            { type: button, label: "Submit", action: SUBMIT, variant: primary }
          ] }
        ] })
    }

    state rejected {
      REVISE -> draft
        (emit MOVED { event: "REVISE" })
        (render-ui main { type: stack, direction: vertical, gap: sm, children: [
          { type: typography, content: (str/concat "Draft claim: " @entity.amount " EUR"), variant: h4 },
          { type: stack, direction: horizontal, gap: sm, children: [
            { type: button, label: "Add 50 EUR", action: RAISE, variant: ghost },
            { type: button, label: "Submit", action: SUBMIT, variant: primary }
          ] }
        ] })
    }

    emits {
      MOVED -> external {
        event : string!
      }
        @description "Each move names the event it took, so the diagram beside the demo can follow it."
    }
  }

  page "/expenses" -> Approval
}

Kaj se zgodi, ko se sproži APPROVE:

submittedAPPROVE

→

approved

GuardThe transition only fires when this check is true.

(<= @entity.amount 500)

Effects (2)What runs, in order, when the transition fires.

(set @entity.note "Approved")

Na njem zaženi orb verify: izvede se vsak prehod, pogoj se preizkusi z zneskom nad mejo in pod njo, preveri se vsak zaslon.

Orb

Orb

Zgradi celoten orbital

1. Entiteta

2. Eno stanje

3. Premikanje med stanji

4. Pravilo kot pogoj

5. Dokončan orbital

Draft claim: EUR

→

Naprej

Orb