Skip to content

Instantly share code, notes, and snippets.

@tolgap
Created February 3, 2016 09:38
Show Gist options
  • Save tolgap/e00e156863167eb03e26 to your computer and use it in GitHub Desktop.
Save tolgap/e00e156863167eb03e26 to your computer and use it in GitHub Desktop.
Admin Page component in Elm
import Page exposing (update, view, emptyModel)
import StartApp.Simple exposing (start)
main =
start { model = emptyModel, view = view, update = update }
module Page where
import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Lazy exposing (lazy2, lazy3)
import Html.Events exposing (..)
import Json.Decode as Json
import Signal exposing (Signal, Address)
import String
type alias Model =
{ pages : List Page
, idseq : Int
, currentPage : Maybe Int
, titleField : String
, bodyField : String
}
type alias SeoMeta =
{ name : String
, value : String
}
type alias Page =
{ id : Int
, title : String
, body : String
, seo : List SeoMeta
}
emptyModel : Model
emptyModel =
{ pages = []
, idseq = 0
, currentPage = Nothing
, titleField = ""
, bodyField = ""
}
newPage : Int -> String -> String -> List SeoMeta -> Page
newPage id title body seos =
{ id = id
, title = title
, body = body
, seo = seos
}
type Action = NoOp
| Add
| Show Int
| UpdateTitle String
| UpdateBody String
update : Action -> Model -> Model
update action model =
case action of
NoOp -> model
Add ->
{ model | idseq = model.idseq + 1
, currentPage = Nothing
, titleField = ""
, bodyField = ""
, pages =
if (String.isEmpty model.titleField) || (String.isEmpty model.bodyField)
then model.pages
else model.pages ++ [newPage model.idseq model.titleField model.bodyField []]
}
Show id ->
{ model | currentPage = Just id }
UpdateTitle str ->
{ model | titleField = str }
UpdateBody str ->
{ model | bodyField = str }
view : Address Action -> Model -> Html
view address model =
div
[ class "pages-wrapper" ]
[ section
[ id "page-app" ]
[ lazy3 pageEntry address model.titleField model.bodyField
, lazy2 pageList address model.pages
]
]
onEnter : Address a -> a -> Attribute
onEnter address value =
on "keydown"
(Json.customDecoder keyCode is13)
(\_ -> Signal.message address value)
is13 : Int -> Result String ()
is13 code =
if code == 13 then Ok () else Err "not the right key code"
pageEntry : Address Action -> String -> String -> Html
pageEntry address title body =
header
[ id "header" ]
[ h1 [] [ text "pages" ]
, input
[ id "page-title"
, placeholder "Page title"
, autofocus True
, value title
, name "newPageTitle"
, on "input" targetValue (Signal.message address << UpdateTitle)
, onEnter address Add
]
[]
, textarea
[ id "page-body"
, placeholder "Page body"
, name "newPageBody"
, on "input" targetValue (Signal.message address << UpdateBody)
]
[ text body ]
]
pageList : Address Action -> List Page -> Html
pageList address pages =
section
[ id "main" ]
[ ul
[ id "page-list" ]
(List.map (pageItem address) pages)
]
pageItem : Address Action -> Page -> Html
pageItem address page =
li
[ class "page-item" ]
[ p [] [ text page.title ]]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment