Hi,
Not sure if you still have this problem, or even if I understood your
problem (I'm brand new to Elm so please be gentle), but I tried something
similar a few days ago so I figure my solution might help a bit.
As I understand (please correct me if I misread), you want to show/hide a
detailed contact view whenever a contact or other relevant component is
selected. I made some small changes to the code you already shared (I don't
have all your source so I couldn't exactly check if my solution worked) and
added some sample contacts. So this is what I came up with.
view : Model -> Html a
view model =
renderContacts model
model : Model
model =
let
testdata =
[ { firstname = "Jesse", lastname = "Rocket", phonenumber =
"PRE-PAR-EFOR" }
, { firstname = "James", lastname = "Rocket", phonenumber =
"TRO-UBL-EAND" }
, { firstname = "Meowth", lastname = "Rocket", phonenumber =
"MAK-ITD-OUBLE " }
]
in
{ contacts = testdata }
type alias Contact =
{ firstname : String
, lastname : String
, phonenumber: String
}
type alias Model =
{ contacts : List Contact
}
renderContact : Contact -> Html a
renderContact contact =
let
contactView model =
span[]
[ a [class "contactfield"] [text <| model.firstname ++ " " ++
model.lastname]
, span [class "contactfield"] [text <| model.phonenumber]
]
in
li [] [ contactView contact ]
renderContacts: Model -> Html a
renderContacts model =
model.contacts
|> List.map renderContact
|> ul []
What I did after this was add a status "Active" to your contact model. So
any contact can be Active or InActive. Then I added an additional function
to render the contact's details if the status was set to active. And then I
added that to your existing list item tag so it would get handled by the
existing view functions. Then I added an update function that will handle
changing the contact, state and a small plus button ahead of your a[][] tag
(you could add the onClick directly to the a tag, but you can't exactly
tell that it's clickable that way). Here is the code with the changes.
view : Model -> Html Msg
view model =
renderContacts model
model : Model
model =
let
testdata =
[ { firstname = "Jesse", lastname = "Rocket", phonenumber =
"PRE-PAR-EFOR", active = False }
, { firstname = "James", lastname = "Rocket", phonenumber =
"TRO-UBL-EAND", active = False }
, { firstname = "Meowth", lastname = "Rocket", phonenumber =
"MAK-ITD-OUBLE", active = False }
]
in
{ contacts = testdata }
type alias Contact =
{ firstname : String
, lastname : String
, phonenumber : String
, active : Bool -- Added status to the contact itself
}
type alias Model =
{ contacts : List Contact
}
renderContact : Contact -> Html Msg
renderContact contact =
let
-- Added a render function for contact details
contactDetails model =
if model.active then
span [][text "<| toString model"] -- Put whataver you want in the
span tag
else
span [][]
contactView model =
span[] -- Added an onClick event to your a [][]
[ button [onClick <| Toggle model][text "+"]
, a [class "contactfield"] [text <| model.firstname ++ " " ++
model.lastname]
, span [class "contactfield"] [text <| model.phonenumber]
]
in
li [] [(contactView contact), (contactDetails contact)]
renderContacts: Model -> Html Msg
renderContacts model =
model.contacts
|> List.map renderContact
|> ul []
-- Update
type Msg = Toggle Contact
update msg model =
if model.active then
{ model | active = False }
else
{ model | active = True }
I added comments to show where the changes are.
Let me know if you need a different solve for this.
Cheers!
--
You received this message because you are subscribed to the Google Groups "Elm
Discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
For more options, visit https://groups.google.com/d/optout.
