[REFACT] Box generic panel (add + update list WIP)

src/Gargantext/Components/Forest/Tree/Node/Action/Add.purs

@@ -7,7 +7,7 @@ import Data.Tuple.Nested ((/\))
 import Effect.Aff (Aff)
 import Gargantext.Components.Forest.Tree.Node.Settings (SettingsBox(..), settingsBox)
 import Gargantext.Components.Forest.Tree.Node.Action (Action(..))
-import Gargantext.Components.Forest.Tree.Node.Tools (submitButton, formEdit, formChoiceSafe)
+import Gargantext.Components.Forest.Tree.Node.Tools (submitButton, formEdit, formChoiceSafe, panel)
 import Gargantext.Prelude (Unit, bind, pure, show, ($), (<>))
 import Gargantext.Routes as GR
 import Gargantext.Sessions (Session, post)
@@ -55,41 +55,23 @@ type CreateNodeProps =
   )
 
 addNodeView :: Record CreateNodeProps
-               -> R.Element
+            -> R.Element
 addNodeView p@{ dispatch, nodeType, nodeTypes } = R.createElement el p []
   where
     el = R.hooksComponent "AddNodeView" cpt
     cpt {id, name} _ = do
-      nodeName@(name' /\ _) <- R.useState' "Name"
-      nodeType'@(nt /\ _)  <- R.useState' $ fromMaybe NodeUser $ head nodeTypes
-      pure $ H.div {}
-          [ panelBody nodeName nodeType'
-          , submitButton (AddNode name' nt) dispatch -- panelFooter nodeName nodeType'
-          ]
-      where
-        panelBody :: R.State String
-                  -> R.State NodeType
-                  -> R.Element
-        panelBody (_ /\ setNodeName) (nt /\ setNodeType) =
-          H.div {className: "panel-body"}
-          [ H.div { className: "row"
-                  , style: {"margin":"10px"}
-                  }
-                  [ H.div { className: "col-md-10" }
-                          [ H.form {className: "form-horizontal"}
-                          $ maybeChoose <> maybeEdit 
-                          ]
-                  ]
-            ]
-              where
-                maybeChoose = [ formChoiceSafe nodeTypes Error setNodeType ]
+      nodeName@(name' /\ setNodeName) <- R.useState' "Name"
+      nodeType'@(nt /\ setNodeType)  <- R.useState' $ fromMaybe NodeUser $ head nodeTypes
 
-                SettingsBox {edit} = settingsBox nt
-                maybeEdit = [ if edit
-                                then formEdit "Node Name" setNodeName
-                                else H.div {} []
-                            ]
+      let 
+          SettingsBox {edit} = settingsBox nt
+          maybeChoose = [ formChoiceSafe nodeTypes Error setNodeType ]
+          maybeEdit   = [ if edit
+                          then formEdit "Node Name" setNodeName
+                          else H.div {} []
+                        ]
 
+      pure $ panel (maybeChoose <> maybeEdit) (submitButton (AddNode name' nt) dispatch)
 
 -- END Create Node
 

src/Gargantext/Components/Forest/Tree/Node/Action/Update.purs

@@ -5,7 +5,7 @@ import Data.Maybe (Maybe(..))
 import Data.Argonaut (class EncodeJson, jsonEmptyObject, (:=), (~>))
 import Effect.Aff (Aff)
 import Gargantext.Components.Forest.Tree.Node.Action (Action)
-import Gargantext.Components.Forest.Tree.Node.Tools (formChoiceSafe, formButton)
+import Gargantext.Components.Forest.Tree.Node.Tools (formChoiceSafe, formButton, panel)
 import Gargantext.Types (NodeType(..))
 import Gargantext.Types  as GT
 import Gargantext.Prelude (Unit, class Show, class Read, show, bind, ($), pure)
@@ -63,9 +63,11 @@ update :: NodeType -> R.Hooks R.Element
 update NodeList = do
   method  @( _ /\ setMethod  ) <- R.useState' Basic
   nodeType@( _ /\ setNodeType) <- R.useState' NodeList
-  pure $ H.div {} [ formChoiceSafe [Basic, Advanced, WithModel] Basic setMethod
-                  , formButton NodeList setNodeType
-                  ]
+  pure $ panel [ -- H.text "Update with"
+                formChoiceSafe [Basic, Advanced, WithModel] Basic setMethod
+               ]
+               (formButton NodeList setNodeType)
+
 update Graph    = pure $ H.div {} []
 update Texts    = pure $ H.div {} []
 update _        = pure $ H.div {} []

src/Gargantext/Components/Forest/Tree/Node/Tools.purs

@@ -7,14 +7,40 @@ import Effect (Effect)
 import Effect.Aff (Aff, launchAff)
 import Effect.Uncurried (mkEffectFn1)
 import Gargantext.Components.Forest.Tree.Node.Action
+import Gargantext.Prelude (Unit, bind, const, discard, pure, show, ($), (<<<), (<>), read, map, class Read, class Show)
 import Gargantext.Types (ID)
 import Gargantext.Utils.Reactix as R2
-import Gargantext.Prelude (Unit, bind, const, discard, pure, show, ($), (<<<), (<>), read, map, class Read, class Show)
 import Reactix as R
 import Reactix.DOM.HTML as H
 
 ------------------------------------------------------------------------
--- | START Rename Box
+
+type Body    = Array R.Element
+type Footer  = R.Element
+
+panel :: Body -> Footer -> R.Element
+panel bodies submit =
+  H.div {} [ panelBody bodies, footer submit ]
+    where
+      panelBody bs =
+          H.div {className: "panel-body"}
+          [ H.div { className: "row"
+                  , style: {"margin":"10px"}
+                  }
+                  [ H.div { className: "col-md-10" }
+                          [ H.form {className: "form-horizontal"} bs
+                          ]
+                  ]
+            ]
+      footer sb = 
+        H.div {className: "panel-footer"}
+            [ H.div {} []
+            , H.div { className: "center"} [ sb ]
+            ]
+
+
+------------------------------------------------------------------------
+-- | START Text input
 type TextInputBoxProps =
   ( id       :: ID
   , dispatch :: Action -> Aff Unit
@@ -69,22 +95,6 @@ textInputBox p@{ boxName, isOpen: (false /\ _) } = R.createElement el p []
 -- | END Rename Box
 
 
-submitButton :: Action -> (Action -> Aff Unit) -> R.Element
-submitButton action dispatch =
-  H.div {className: "panel-footer"}
-            [ H.div {} []
-            , H.div { className: "center"}
-                    [ H.button { className : "btn btn-primary fa fa-" <> icon action
-                               , type: "button"
-                               , style : { width: "50%" }
-                               , id: S.toLower $ show action
-                               , title: show action
-                               , on: {click: \_ -> launchAff $ dispatch action}
-                               }
-                               [ H.text $ " " <> text action]
-                     ]
-            ]
-
 -- | Sugar Text style
 fragmentPT :: String -> R.Element
 fragmentPT text = H.div {style: {margin: "10px"}} [H.text text]
@@ -149,6 +159,7 @@ formChoice nodeTypes defaultNodeType setNodeType =
           (map (\opt -> H.option {} [ H.text $ show opt ]) nodeTypes)
          ]
 
+-- Buttons
 
 formButton :: forall a b c
            .    a 
@@ -157,8 +168,20 @@ formButton :: forall a b c
 formButton nodeType setNodeType =
  H.button { className : "btn btn-primary center"
           , type : "button"
+          , title: "Form Button"
+          , style : { width: "50%" }
           , onClick : mkEffectFn1 
                     $ \_ -> setNodeType ( const nodeType)
-          } []
+          } [H.text $ "Go !"]
 
+submitButton :: Action -> (Action -> Aff Unit) -> R.Element
+submitButton action dispatch =
+  H.button { className : "btn btn-primary fa fa-" <> icon action
+                               , type: "button"
+                               , style : { width: "50%" }
+                               , id: S.toLower $ show action
+                               , title: show action
+                               , on: {click: \_ -> launchAff $ dispatch action}
+                               }
+                               [ H.text $ " " <> text action]