add multiple select

Author: bouzuya

src/Component/App.purs

@@ -20,6 +20,7 @@ type Form =
   , optionLabel :: String
   , optionValue :: String
   , options :: Array Option
+  , selects :: Array Select
   }
 type OptionLabel = String
 type OptionValue = String
@@ -29,13 +30,14 @@ type Name = String
 data Select = Select Name Label (Array Option)
 
 type State =
-  { built :: Maybe Select
+  { built :: Maybe (Array Select)
   , form :: Form
   }
 
 data Action
   = Noop
   | AddOption
+  | AddSelect
   | BuildForm
   | EditLabel String
   | EditName String
@@ -48,8 +50,8 @@ component = createComponent "App"
 app :: JSX
 app = make component { initialState, render, update } {}
 
-buildFromForm :: Form -> Select
-buildFromForm { name, options, label } = Select name label options
+buildFromForm :: Form -> Array Select
+buildFromForm { selects } = selects
 
 initialForm :: Form
 initialForm =
@@ -58,6 +60,7 @@ initialForm =
   , optionLabel: ""
   , optionValue: ""
   , options: []
+  , selects: []
   }
 
 initialState :: State
@@ -135,25 +138,58 @@ render self@{ state: { built, form } } =
                   self
                   preventDefault
                   (const AddOption)
-            , children: [ H.text "Add" ]
+            , children: [ H.text "Add Option" ]
             }
-          ]
-        , H.div_
-          [ H.span_
-            [ H.text "options"
+          , H.div_
+            [ H.span_
+              [ H.text "options"
+              ]
+            , H.ul_
+              (mapFlipped
+                form.options
+                (\(Option l v) ->
+                  H.li_
+                  [ H.span_
+                    [ H.text l ]
+                  , H.span_
+                    [ H.text v ]
+                  ]))
+            ]
+          , H.div_
+            [ H.button
+              { onClick:
+                  capture
+                    self
+                    preventDefault
+                    (const AddSelect)
+              , children: [ H.text "Add Select" ]
+              }
             ]
-          , H.ul_
-            (mapFlipped
-              form.options
-              (\(Option l v) ->
-                H.li_
-                [ H.span_
-                  [ H.text l ]
-                , H.span_
-                  [ H.text v ]
-                ]
+          , H.div_
+            [ H.span_
+              [ H.text "selects"
+              ]
+            , H.ul_
+              (mapFlipped
+                form.selects
+                (\(Select name label options) ->
+                  H.div_
+                  [ H.span_ [ H.text name ]
+                  , H.span_ [ H.text label ]
+                  , H.ul_
+                      (mapFlipped
+                        options
+                        (\(Option l v) ->
+                          H.li_
+                          [ H.span_
+                            [ H.text l ]
+                          , H.span_
+                            [ H.text v ]
+                          ]))
+                  ]
+                )
               )
-            )
+            ]
           ]
         , H.div_
           [ H.button
@@ -168,18 +204,22 @@ render self@{ state: { built, form } } =
         , H.div_
           [ case built of
               Nothing -> H.text "Not build"
-              Just (Select name label options') ->
-                H.label_
-                [ H.span_ [ H.text label ]
-                , H.select
-                  { name
-                  , children:
-                      mapFlipped
-                        options'
-                        (\(Option l v) ->
-                          H.option { children: [H.text l], value: v })
-                  }
-                ]
+              Just selects ->
+                H.div_
+                  (mapFlipped
+                    selects
+                    (\(Select name label options') ->
+                      H.label_
+                      [ H.span_ [ H.text label ]
+                      , H.select
+                        { name
+                        , children:
+                            mapFlipped
+                              options'
+                              (\(Option l v) ->
+                                H.option { children: [H.text l], value: v })
+                        }
+                      ]))
           ]
         ]
       }
@@ -200,6 +240,19 @@ update self@{ state } AddOption =
             , options = Array.snoc state.form.options (Option state.form.optionLabel state.form.optionValue)
             }
       }
+update self@{ state } AddSelect =
+  Update
+    state
+      { form =
+          state.form
+            { label = ""
+            , name = ""
+            , options = []
+            , optionLabel = ""
+            , optionValue = ""
+            , selects = Array.snoc state.form.selects (Select state.form.name state.form.label state.form.options)
+            }
+      }
 update self@{ state } BuildForm =
   Update state { built = Just (buildFromForm state.form), form = initialForm }
 update self@{ state } (EditLabel v) =