Modeling condition, nested forms with elm-simple-forms - elm

Question

I have a form that starts with a select. Depending on what was selected the form then expands to a common main bit and a details section that depends on the selection.
I started modeling with a separate details section
type ProductDetails
= Book Book.Model
| Brochure Brochure.Model
| Card Card.Model
type alias Model =
{ form : Form CustomError Estimate
, details : ProductDetails -- a Form CustomerError CardModel / BookModel / ....
, msg : String
}
but this is becoming quite convoluted to handle in e.g. view.
The alternative would seem to be conditionally to add the details into the main form model - e.g.
type alias Estimate =
{ customer : String
, project : String
, product : String
, details : ProductDetails
}
Before I get started I’d welcome experience from others on what has worked well

Answer 1

If I understand correctly, you have separate modules for Book, Brochure and Card? I don't quite understand what is the purpose of your Model but I would structure it like this:
import Book
import Brochure
import Card
type Products
= Book
| Brochure
| Card
type Msg
= Details Products
type alias Model =
{ selectedProduct : Product
}
update : Msg -> Model -> Model
update msg model =
case msg of
Details prd ->
Model prd
view : Model -> Html
view model =
model.selectedProduct.view
So as you can see, now you define all available products and then you say that Msg can be Details, which would show details, and it's function would be to set selectedProduct value in Model to selected Product. You can implement selecting with:
button [ onClick (Details Book) ] [ text "Book" ]
for example to select a book. Later on you want to make it dynamic and the first instinct should be to be able to call the view function of selected Product.
In other case you could define view which would require some fields, which every Product's model would contain and then you could use them to write some information on site.
Please note that code above isn't meant to work, it's just to represent the idea.

Answer 2

I'm not familiar with elm-simple-forms, but this seems like a good representation of your form:
type ProductType
= TBook
| TBrochure
| TCard
type Product
= Book Book.Model
| Brochure Brochure.Model
| Card Card.Model
type alias Model =
{ product : Maybe Product
, customer : String
, project : String
}
type Msg
= SelectProductType ProductType
init : Model
init =
{ product = Nothing
, customer = ""
, project = ""
}
update : Msg -> Model -> Model
update msg model =
case msg of
SelectProductType product ->
{model | product =
case product of
TBook -> Book Book.init
TBrochure -> Brochure Brochure.init
TCard -> Card Card.init
}
view : Model -> Html Msg
view model =
case model.product of
Nothing ->
myProductTypeSelect
Just product ->
withCommonFormInputs
<| case product of
Book submodel -> Book.view submodel
Brochure submodel -> Brochure.view submodel
Card submodel -> Card.view submodel
The Maybe gives you a nice way to choose between the first form (just the select) and the second form (customer details + selected product type details).
The Book.view etc. give you Html which you can add to the common case:
withCommonFormInputs : Model -> Html Msg -> Html Msg
withCommonFormInputs model productInputs =
div
[]
[ input [] [] -- customer
, input [] [] -- project
, productInputs -- product (Book, Brochure, Card) subform
]

Answer 3

I ended up using a Dict of the various fields and changed the fields when the product changed. Trying to model each product more explicitly create more boiler plate than I needed.