Toggle Drawer

[shmish111]

Toggle Drawer

[aforemny]

I do not have a solution, but I asked myself the same question. My "solution" so far is to modify elm-mdl's source to expose Msg(ToggleDrawer), so that I can do

Layout.update Layout.ToggleDrawer model.layout
|> Helpers.map1st (\layout -> { model | layout = layout })
|> Helpers.map2nd LayoutMsg

in my application's update function. I am guessing things like that have not been fleshed out with elm-mdl yet, and one will have to investigate a general solution for that for all elm-mdl components.

Personally, I wouldn't mind if all components export Msg(..) and every handled event is completely overidable, ie. preventing default behaviour and executing with a custom Decoder a.

[debois]

@aforemny : @shmish111 is using parts, so he don't have direct access to update. I'll think about this and try to come up with a good solution in a couple of days.

[debois]

I'll release a new version shortly, in which (a) ToggleDrawer is exposed (for @aforemny) and (b) there is a value toggleDrawer such that toggleDrawer Mdl will be an action of the appropriate type. I.e., from your update function, you may toggle the drawer with:

update action model = 
  case action of 
    ...
    MyToggleAction -> 
      update (Layout.toggleDrawer Mdl) model

[shmish111]

@debois I don't quite understand the usage, what is update and model in your example? Material.update? model is my model.materialModel?

I can't get it to compile, still not understanding parts properly :(

[debois]

No worries. Could you post a link to a gist or github where I can see what you're trying to do?

[shmish111]

@debois OK, I think I understand what's going on now but now that I got everything compiling the toggle doesn't actually seem to work :(

In my update function I have

        SelectSearch search ->
          let
            (updatedModel, cmd) = update (Layout.toggleDrawer MDL) model
          in
            ( { updatedModel | currentSearch = search }
            , cmd
            )

where MDL is my Msg type, i.e. | MDL Material.Msg
For parts to work I also have this in my update function

        MDL action' ->
            Material.update MDL action' model

Using Debug I can see that update is called with SelectSearch correctly and then with MDL (Msg <function>) as I expected. However the drawer is still shown :(

[shmish111]

Ok, so I understand the problem now and I've fixed it but I don't know how to structure the app with parts to make it nice. My update function is actually a sub module called using the normal TEA way. In order to use Layout stuff in my view, my child module's model has the mdl model from the parent. In my parent update function I have to pass the mdl to the child update and then update the parent mdl, it all seems a bit too much boiler plate.

My Main.elm update function:

        SearchesMsg action' ->
            let
                searchesModel =
                    model.searchesModel

                ( updatedSearchesModel, searchesCmd ) =
                    Searches.update action' { searchesModel | mdl = model.mdl }
            in
                ( { model
                    | searchesModel = updatedSearchesModel
                    , currentView = SearchView
                    , mdl = updatedSearchesModel.mdl
                  }
                , Cmd.map SearchesMsg searchesCmd
                )

Is there a better way to do this?

[debois]

I think a more idiomatic way would be to have your sub-module communicate its desire to toggle the drawer in the normal TEA-way (e.g., the parent intercepts some Msg of the sub, then invokes toggleDrawer on its mdl model).

Parts don't really solve the inter-component communication boilerplate problem. They just make it more convenient to have (independent) sub-components.

[dan-kihot8]

My worked example:

type alias Model =
   {mdl : Material.Model
   , myfields ... 
   }
...
viewDrawer:
    Layout.link
        [ Options.onClick (FilterCategory category)  -- it is toggle Action
...
type Msg = 
    FilterCategory Category
...
update : Msg -> Model -> ( Model, Cmd Msg )
    update msg model =
        FilterCategory category ->
            let
                catalog =
                    model.catalog

                mdl =
                    model.mdl

                ( updatedModel, updateDrawerCmd ) =
                    update (Layout.toggleDrawer Mdl) model
            in
                ({ model
                    | catalog =
                        { catalog
                            | filterCategory = category.name
                        }
                    , mdl = updatedModel.mdl
                 }
                    ! [ API.Product.forCategory LoadProducts category.id
                      , updateDrawerCmd
                      ]
                )