Elm Filterable Stores

Main.elm

module Main exposing (..)

import Html exposing (Html, Attribute, beginnerProgram, select, option, table, tr, td, th, text, div)
import Html.Attributes exposing (value)
import Html.Events exposing (on, targetValue)
import Json.Decode as JD


onChange : (String -> msg) -> Attribute msg
onChange toMsg =
    on "change" (JD.map toMsg targetValue)


type StoreCategory
    = StoreTypeA
    | StoreTypeB
    | StoreTypeC


categories : List StoreCategory
categories =
    [ StoreTypeA, StoreTypeB, StoreTypeC ]


parseStoreCategory : String -> Maybe StoreCategory
parseStoreCategory s =
    case s of
        "StoreTypeA" ->
            Just StoreTypeA

        "StoreTypeB" ->
            Just StoreTypeB

        "StoreTypeC" ->
            Just StoreTypeC

        _ ->
            Nothing


type alias Store =
    { name : String
    , location : String
    , category : StoreCategory
    }


type alias Model =
    { allEntries : List Store
    , filteredEntries : List Store
    , filterCategory : Maybe StoreCategory
    }


initModel : Model
initModel =
    let
        allEntries =
            [ Store "my store" "my town" StoreTypeA
            , Store "your store" "your town" StoreTypeA
            , Store "his store" "his town" StoreTypeB
            , Store "her store" "her town" StoreTypeA
            , Store "their store" "their town" StoreTypeC
            ]
    in
        { allEntries = allEntries
        , filteredEntries = allEntries
        , filterCategory = Nothing
        }


filteredBy : Maybe StoreCategory -> Model -> Model
filteredBy msc model =
    case msc of
        Nothing ->
            { model | filteredEntries = model.allEntries, filterCategory = Nothing }

        Just sc ->
            { model
                | filteredEntries = List.filter (\s -> s.category == sc) model.allEntries
                , filterCategory = Just sc
            }


type Msg
    = ChangeStoreFilter (Maybe StoreCategory)


update : Msg -> Model -> Model
update msg model =
    case msg of
        ChangeStoreFilter f ->
            model |> filteredBy f


view : Model -> Html Msg
view model =
    div []
        [ viewCategorySelector model
        , viewEntries model
        ]


viewCategorySelector : Model -> Html Msg
viewCategorySelector model =
    div []
        [ select [ onChange (parseStoreCategory >> ChangeStoreFilter) ]
            ([ option [ value "None" ] [ text "All categories" ] ]
                ++ (List.map viewCategoryOption categories)
            )
        ]


viewCategoryOption : StoreCategory -> Html Msg
viewCategoryOption cat =
    option [ value <| toString cat ] [ text <| toString cat ]


viewEntries : Model -> Html Msg
viewEntries model =
    div []
        [ table []
            ([ tr [] [ th [] [ text "Name" ], th [] [ text "Location" ], th [] [ text "Category" ] ]
             ]
                ++ (List.map viewEntry model.filteredEntries)
            )
        ]


viewEntry : Store -> Html Msg
viewEntry s =
    tr [] [ td [] [ text s.name ], td [] [ text s.location ], td [] [ text <| toString s.category ] ]


main =
    beginnerProgram { model = initModel, update = update, view = view }