Messages d'édition de Joueur

Modifiez src/Players/Messages.elm pour inclure deux nouvelles actions :

...

type Msg
    = OnFetchAll (Result Http.Error (List Player))
    | ShowPlayers
    | ShowPlayer PlayerId

Nous avons ajouté ShowPlayers et ShowPlayer.

Liste de Joueurs

La liste des joueurs devrait afficher un bouton par utilisateur pour déclencher le message ShowPlayer.

Dans src/Players/List.elm, ajoutez d'abord Html.Events:

import Html.Events exposing (onClick)

Puis ajoutez une nouvelle fonction pour ce bouton, à la fin :

editBtn : Player -> Html Msg
editBtn player =
    button
        [ class "btn regular"
        , onClick (ShowPlayer player.id)
        ]
        [ i [ class "fa fa-pencil mr1" ] [], text "Edit" ]

Ici, on envoie ShowPlayer avec l'id du Joueur que l'on souhaite éditer.

Enfin, modifiez playerRow pour inclure le bouton :

playerRow : Player -> Html Msg
playerRow player =
    tr []
        [ td [] [ text (toString player.id) ]
        , td [] [ text player.name ]
        , td [] [ text (toString player.level) ]
        , td []
            [ editBtn player ]
        ]

Édition de Joueur

Ajoutons le bouton de navigation à la vue d'édition. Dans /src/Players/Edit.elm, ajoutez un import :

import Html.Events exposing (onClick)

Ajoutez une nouvelle fonction à la fin pour le bouton List :

listBtn : Html Msg
listBtn =
    button
        [ class "btn regular"
        , onClick ShowPlayers
        ]
        [ i [ class "fa fa-chevron-left mr1" ] [], text "List" ]

On envoie le message ShowPlayers quand le bouton est cliqué.

Enfin, ajoutez ce bouton à la liste, en changeant la fonction nav :

nav : Player -> Html Msg
nav model =
    div [ class "clearfix mb2 white bg-black p1" ]
        [ listBtn ]

Mise à jour de Joueurs

Pour finir, src/Players/Update.elm doit désormais traiter les nouveaux messages.

import Navigation

Ajoutez deux nouvelles branches au case :

update : Msg -> List Player -> ( List Player, Cmd Msg )
update message players =
    case message of
        ...

        ShowPlayers ->
            ( players, Navigation.newUrl "#players" )

        ShowPlayer id ->
            ( players, Navigation.newUrl ("#players/" ++ id) )

Navigation.newUrl renvoie une commande. Quand cette commande sera exécutée par Elm, l'adresse du navigateur changera.

Testez !

Ouvrez http://localhost:3000/#players. Vous devriez voir un bouton Edit. Si vous le cliquez, l'adresse devrait changer et vous amener à la vue d'édition.

À ce stade, le code de votre application devrait ressembler à ça : https://github.com/sporto/elm-tutorial-app/tree/018-07-navigation.

Navigation