[COMPONENT] TextInputBox Action generic

src/Gargantext/Components/Forest/Tree.purs

@@ -205,7 +205,7 @@ performAction { reload: (_ /\ setReload)
 performAction p@{ reload: (_ /\ setReload)
                 , session
                 , tree: (NTree (LNode {id}) _) } (RenameNode name)  = do
-  void $ renameNode session id $ RenameValue {name}
+  void $ renameNode session id $ RenameValue {text:name}
   performAction p RefreshTree
 
 performAction p@{ openNodes: (_ /\ setOpenNodes)

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

@@ -5,13 +5,13 @@ import Data.Maybe (Maybe(..))
 import Data.Tuple.Nested ((/\))
 import Effect.Aff (Aff, launchAff)
 import Effect.Uncurried (mkEffectFn1)
-import Prelude (Unit, bind, const, discard, pure, ($), (<<<))
+import Prelude (Unit, bind, const, discard, pure, ($), (<<<), (<>))
 import Reactix as R
 import Reactix.DOM.HTML as H
 
 import Gargantext.Components.Forest.Tree.Node.Action
 import Gargantext.Types as GT
-import Gargantext.Types (NodeType, ID, Name)
+import Gargantext.Types (ID)
 import Gargantext.Routes as GR
 import Gargantext.Utils.Reactix as R2
 import Gargantext.Sessions (Session, get, put, post, delete)
@@ -22,61 +22,68 @@ renameNode session renameNodeId =
   put session $ GR.NodeAPI GT.Node (Just renameNodeId) "rename"
 
 newtype RenameValue = RenameValue
-  { name :: Name }
+  { text :: String }
 
 instance encodeJsonRenameValue :: EncodeJson RenameValue where
-  encodeJson (RenameValue {name})
-     = "r_name" := name
+  encodeJson (RenameValue {text})
+     = "r_name" := text
     ~> jsonEmptyObject
 
 
 -- | START Rename Box
-type RenameBoxProps =
-  ( id            :: ID
-  , dispatch      :: Action -> Aff Unit
-  , name          :: Name
-  , renameBoxOpen :: R.State Boolean
+type TextInputBoxProps =
+  ( id       :: ID
+  , dispatch :: Action -> Aff Unit
+  , text     :: String
+  , isOpen   :: R.State Boolean
+  , boxName  :: String
+  , textAction :: String -> Action
   )
 
-renameBox :: Record RenameBoxProps -> R.Element
-renameBox p@{ dispatch, renameBoxOpen: (true /\ setRenameBoxOpen) } = R.createElement el p []
+renameAction :: String -> Action
+renameAction newName = RenameNode newName
+
+textInputBox :: Record TextInputBoxProps -> R.Element
+textInputBox p@{ boxName, textAction, dispatch, isOpen: (true /\ setIsOpen) } = R.createElement el p []
   where
-    el = R.hooksComponent "RenameBox" cpt
-    cpt {id, name} _ = do
-      renameNodeName <- R.useState' name
+    el = R.hooksComponent (boxName <> "Box") cpt
+    cpt {id, text} _ = do
+      renameNodeName <- R.useState' text
       pure $ H.div {className: "from-group row-no-padding"}
-        [ renameInput renameNodeName
-        , renameBtn renameNodeName
+        [ textInput renameNodeName
+        , submitBtn   renameNodeName
         , cancelBtn
         ]
       where
-        renameInput (_ /\ setRenameNodeName) =
+        textInput (_ /\ setRenameNodeName) =
           H.div {className: "col-md-8"}
           [ H.input { type: "text"
-                    , placeholder: "Rename Node"
-                    , defaultValue: name
+                    , placeholder: (boxName <> " Node")
+                    , defaultValue: text
                     , className: "form-control"
-                    , onInput: mkEffectFn1 $ setRenameNodeName <<< const <<< R2.unsafeEventValue
+                    , onInput: mkEffectFn1 $ setRenameNodeName
+                                         <<< const
+                                         <<< R2.unsafeEventValue
                     }
           ]
-        renameBtn (newName /\ _) =
+        submitBtn (newName /\ _) =
           H.a {className: "btn glyphitem glyphicon glyphicon-ok col-md-2 pull-left"
               , type: "button"
               , onClick: mkEffectFn1 $ \_ -> do
-                    setRenameBoxOpen $ const false
-                    launchAff $ dispatch $ RenameNode newName
-              , title: "Rename"
+                    setIsOpen $ const false
+                    launchAff $ dispatch ( textAction newName )
+              , title: "Submit"
               } []
         cancelBtn =
           H.a {className: "btn text-danger glyphitem glyphicon glyphicon-remove col-md-2 pull-left"
               , type: "button"
-              , onClick: mkEffectFn1 $ \_ -> setRenameBoxOpen $ const false
+              , onClick: mkEffectFn1 $ \_ -> setIsOpen $ const false
               , title: "Cancel"
               } []
-renameBox p@{ renameBoxOpen: (false /\ _) } = R.createElement el p []
+textInputBox p@{ boxName, isOpen: (false /\ _) } = R.createElement el p []
   where
-    el = R.hooksComponent "RenameBox" cpt
-    cpt {name} _ = pure $ H.div {} []
+    el = R.hooksComponent (boxName <> "Box") cpt
+    cpt {text} _ = pure $ H.div {} []
 
 -- END Rename Box
 

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

@@ -28,7 +28,7 @@ import Gargantext.Components.Forest.Tree.Node (NodeAction(..), SettingsBox(..),
 import Gargantext.Components.Forest.Tree.Node.Action (Action(..), FileType(..), UploadFileContents(..))
 import Gargantext.Components.Forest.Tree.Node.Action.Add (NodePopup(..), addNodeView)
 import Gargantext.Components.Forest.Tree.Node.Action.CopyFrom (copyFromCorpusView)
-import Gargantext.Components.Forest.Tree.Node.Action.Rename (renameBox)
+import Gargantext.Components.Forest.Tree.Node.Action.Rename (textInputBox, renameAction)
 import Gargantext.Components.Forest.Tree.Node.Action.Update
 import Gargantext.Components.Forest.Tree.Node.Action.Upload (DroppedFile(..), uploadFileView, fileTypeView, uploadTermListView)
 import Gargantext.Components.Forest.Tree.Node.ProgressBar (asyncProgressBar, BarType(..))
@@ -402,9 +402,13 @@ nodePopupCpt :: R.Component NodePopupProps
 nodePopupCpt = R.hooksComponent "G.C.F.T.N.B.nodePopupView" cpt
   where
     cpt p _ = do
-      renameBoxOpen <- R.useState' false
-      iframeRef <- R.useRef null
-      nodePopupState@(nodePopup /\ setNodePopup) <- R.useState' {action: Nothing, id: p.id, name: p.name, nodeType: p.nodeType}
+      isOpen    <- R.useState' false
+      iframeRef <- R.useRef    null
+      nodePopupState@(nodePopup /\ setNodePopup) <- R.useState' { action: Nothing
+                                                                , id: p.id
+                                                                , name: p.name
+                                                                , nodeType: p.nodeType
+                                                                }
       search        <- R.useState' $ defaultSearch { node_id = Just p.id }
       pure $ H.div tooltipProps $
         [ H.div { className: "popup-container" }
@@ -416,7 +420,7 @@ nodePopupCpt = R.hooksComponent "G.C.F.T.N.B.nodePopupView" cpt
                 , H.p {className: "text-primary center"} [H.text p.name]
                 ]
               ]
-            , panelHeading renameBoxOpen p
+            , panelHeading isOpen         p
             , panelBody    nodePopupState p
             , mPanelAction nodePopupState p search
             ]
@@ -435,14 +439,14 @@ nodePopupCpt = R.hooksComponent "G.C.F.T.N.B.nodePopupView" cpt
                          --, style: { top: y - 65.0, left: x + 10.0 }
                        }
 
-        panelHeading renameBoxOpen@(open /\ _) {dispatch, id, name, nodeType} =
+        panelHeading isOpen@(open /\ _) {dispatch, id, name, nodeType} =
           H.div {className: "panel-heading"}
                 [ R2.row
                         [ H.div {className: "col-md-8"}
-                                [ renameBox { dispatch, id, name, renameBoxOpen } ]
+                                [ textInputBox { textAction: renameAction, boxName: "Rename", dispatch, id, text:name, isOpen } ]
 
                         , H.div {className: "flex-end"}
-                                [ if edit then editIcon renameBoxOpen else H.div {} []
+                                [ if edit then editIcon isOpen else H.div {} []
                                 , H.div {className: "col-md-1"}
                                         [ H.a { "type"   : "button"
                                               , className: glyphicon "remove-circle"
@@ -456,12 +460,12 @@ nodePopupCpt = R.hooksComponent "G.C.F.T.N.B.nodePopupView" cpt
             SettingsBox {edit, doc, buttons} = settingsBox nodeType
 
             editIcon :: R.State Boolean -> R.Element
-            editIcon (false /\ setRenameBoxOpen) =
+            editIcon (false /\ setIsOpen) =
               H.div {className : "col-md-1"}
               [ H.a { className: glyphicon "pencil"
                     , id       : "rename1"
                     , title    : "Rename"
-                    , on: { click: \_ -> setRenameBoxOpen $ const true }
+                    , on: { click: \_ -> setIsOpen $ const true }
                     }
                 []
               ]