docspell/modules/webapp/src/main/elm/Comp/ContactField.elm

module Comp.ContactField exposing (Model
                                  ,emptyModel
                                  ,getContacts
                                  ,Msg(..)
                                  ,update
                                  ,view
                                  )

import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (onInput, onClick)
import Api.Model.Contact exposing (Contact)
import Data.ContactType exposing (ContactType)
import Comp.Dropdown

type alias Model =
    { items: List Contact
    , kind: Comp.Dropdown.Model ContactType
    , value: String
    }

emptyModel: Model
emptyModel =
    { items = []
    , kind = Comp.Dropdown.makeSingleList
             { makeOption = \ct -> { value = Data.ContactType.toString ct, text = Data.ContactType.toString ct }
             , placeholder = ""
             , options = Data.ContactType.all
             , selected = List.head Data.ContactType.all
             }
    , value = ""
    }

makeModel: List Contact -> Model
makeModel contacts =
    let
        em = emptyModel
    in
    { em | items = contacts }

getContacts: Model -> List Contact
getContacts model =
    List.filter (\c -> c.value /= "") model.items

type Msg
    = SetValue String
    | TypeMsg (Comp.Dropdown.Msg ContactType)
    | AddContact
    | Select Contact
    | SetItems (List Contact)

update: Msg -> Model -> (Model, Cmd Msg)
update msg model =
    case msg of
        SetItems contacts ->
            ({model | items = contacts, value = "" }, Cmd.none)

        SetValue v ->
            ({model | value = v}, Cmd.none)

        TypeMsg m ->
            let
                (m1, c1) = Comp.Dropdown.update m model.kind
            in
                ({model|kind = m1}, Cmd.map TypeMsg c1)

        AddContact ->
            if model.value == "" then (model, Cmd.none)
            else
                let
                    kind = Comp.Dropdown.getSelected model.kind
                         |> List.head
                         |> Maybe.map Data.ContactType.toString
                         |> Maybe.withDefault ""
                in
                    ({model| items = (Contact "" model.value kind) :: model.items, value = ""}, Cmd.none)

        Select contact ->
            let
                newItems = List.filter (\c -> c /= contact) model.items
                (m1, c1) = Data.ContactType.fromString contact.kind
                           |> Maybe.map (\ct -> update (TypeMsg (Comp.Dropdown.SetSelection [ct])) model)
                           |> Maybe.withDefault (model, Cmd.none)
            in
                ({m1 | value = contact.value, items = newItems}, c1)

view: Model -> Html Msg
view model =
    div []
        [div [class "fields"]
             [div [class "four wide field"]
                  [Html.map TypeMsg (Comp.Dropdown.view model.kind)
                  ]
             ,div [class "twelve wide field"]
                  [div [class "ui action input"]
                       [input [type_ "text"
                              ,onInput SetValue
                              ,value model.value
                              ][]
                       ,a [class "ui button", onClick AddContact, href ""]
                           [text "Add"
                           ]
                       ]
                  ]
             ]
        ,div [classList [("field", True)
                        ,("invisible", List.isEmpty model.items)
                        ]
             ]
             [div [class "ui vertical secondary fluid menu"]
                  (List.map (renderItem model) model.items)
             ]
        ]


renderItem: Model -> Contact -> Html Msg
renderItem model contact =
    div [class "link item", onClick (Select contact) ]
        [i [class "delete icon"][]
        ,div [class "ui blue label"]
            [text contact.kind
            ]
        ,text contact.value
        ]