[tree] new node adding: better name and icon

* Issue #309

dist/styles/bootstrap-default.css

@@ -9945,5 +9945,8 @@ h3 {
     border-color: #dee2e6;
   }
 }
+.with-icon-font {
+  font-family: ForkAwesome, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+}
 
 /*# sourceMappingURL=bootstrap-default.css.map */

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

@@ -11,14 +11,16 @@ import Toestand as T
 
 import Gargantext.Prelude
 
-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, formChoiceSafe, panel)
+import Gargantext.Components.Forest.Tree.Node.Settings (SettingsBox(..), settingsBox)
+import Gargantext.Components.Forest.Tree.Node.Tools (formChoiceSafe', panel, submitButton)
 import Gargantext.Components.InputWithEnter (inputWithEnter)
+import Gargantext.Components.Lang (Lang(..), translate)
 import Gargantext.Routes as GR
 import Gargantext.Sessions (Session, post)
-import Gargantext.Types  as GT
-import Gargantext.Types (NodeType(..))
+import Gargantext.Types (NodeType(..), charCodeIcon)
+import Gargantext.Types as GT
+import Gargantext.Utils (nbsp)
 import Gargantext.Utils.Reactix as R2
 
 here :: R2.Here
@@ -74,12 +76,16 @@ addNodeViewCpt = here.component "addNodeView" cpt where
     nodeType' <- T.useLive T.unequal nodeType
 
     let
+        print nt = charCodeIcon nt
+                <> nbsp 4
+                <> translate EN nt -- @TODO "EN" assumption
+
         SettingsBox {edit} = settingsBox nodeType'
         setNodeType' nt = do
           T.write_ (GT.prettyNodeType nt) nodeName
           T.write_ nt nodeType
         (maybeChoose /\ nt') = if length nodeTypes > 1
-                         then ([ formChoiceSafe nodeTypes Error setNodeType' ] /\ nodeType')
+                         then ([ formChoiceSafe' nodeTypes Error setNodeType' print ] /\ nodeType')
                          else ([H.div {} [H.text $ "Creating a node of type "
                                                 <> show defaultNt
                                                 <> " with name:"
@@ -112,4 +118,3 @@ showConfig FolderPrivate = H.div {} [H.text "This folder will be private only"]
 showConfig FolderShared  = H.div {} [H.text "This folder will be shared"]
 showConfig FolderPublic  = H.div {} [H.text "This folder will be public"]
 showConfig nt            = H.div {} [H.h4  {} [H.text $ "Config of " <> show nt ]]
-

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

@@ -80,7 +80,7 @@ instance eqDroppedFile :: Eq DroppedFile where
 type FileHash = String
 
 
-type UploadFile = 
+type UploadFile =
   { blob     :: UploadFileBlob
   , name     :: String
   }
@@ -326,7 +326,7 @@ uploadFile session nodeType id fileType {mName, blob: UploadFileBlob blob} = do
       Corpus   -> GR.NodeAPI nodeType (Just id) $ GT.asyncTaskTypePath GT.Form
       Annuaire -> GR.NodeAPI nodeType (Just id) "annuaire"
       _        -> GR.NodeAPI nodeType (Just id) ""
-      
+
     bodyParams c = [ Tuple "_wf_data"     (Just c)
                    , Tuple "_wf_filetype" (Just $ show fileType)
                    , Tuple "_wf_name"      mName

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

@@ -2,7 +2,7 @@ module Gargantext.Components.Forest.Tree.Node.Tools where
 
 import Gargantext.Prelude
   ( class Ord, class Read, class Show, Unit
-  , bind, const, discard, map, not, pure, read, show, when
+  , bind, const, discard, map, not, pure, read, show, when, mempty
   , ($), (<), (<<<), (<>), (<$>), (<*>) )
 import Data.Maybe (fromMaybe, Maybe(..))
 import Data.Nullable (null)
@@ -10,8 +10,6 @@ import Data.Set (Set)
 import Data.Set as Set
 import Data.String as S
 import Data.String.CodeUnits as DSCU
-import Data.Tuple.Nested ((/\))
-import DOM.Simple.Console (log2)
 import Effect (Effect)
 import Effect.Aff (Aff, launchAff, launchAff_)
 import Reactix as R
@@ -21,12 +19,11 @@ import Toestand as T
 import Gargantext.Components.Forest.Tree.Node.Action (Action, icon, text)
 import Gargantext.Components.InputWithEnter (inputWithEnter)
 import Gargantext.Ends (Frontends, url)
-import Gargantext.Hooks.Loader (useLoader)
 import Gargantext.Sessions (Session, sessionId)
 import Gargantext.Types as GT
 import Gargantext.Utils (glyphicon, toggleSet)
-import Gargantext.Utils.Reactix as R2
 import Gargantext.Utils.ReactTooltip as ReactTooltip
+import Gargantext.Utils.Reactix as R2
 
 here :: R2.Here
 here = R2.here "Gargantext.Components.Forest.Tree.Node.Tools"
@@ -103,7 +100,7 @@ type DefaultText = String
 
 formEdit :: forall prev next
           . DefaultText -> ((prev -> String) -> Effect next) -> R.Element
-formEdit defaultValue setter = 
+formEdit defaultValue setter =
   H.div { className: "form-group" }
   [ H.input { defaultValue, type: "text", on: { input }
             , placeholder: defaultValue, className: "form-control" }
@@ -136,7 +133,7 @@ formChoice :: forall a b c d
            -> (b -> Effect a)
            -- -> ((c -> b) -> Effect a)
            -> R.Element
-formChoice nodeTypes defaultNodeType setNodeType = 
+formChoice nodeTypes defaultNodeType setNodeType =
   H.div { className: "form-group"}
         [ R2.select { className: "form-control"
                     , on: { change: \e -> setNodeType $ fromMaybe defaultNodeType $ read $ R.unsafeEventValue e }
@@ -164,6 +161,71 @@ formButton nodeType setNodeType =
                         , on: { click: \_ -> setNodeType nodeType }
                         } [H.text $ "Confirmation"]
 
+------------------------------------------------------------------------
+
+formChoiceSafe' :: forall item m
+  .  Read item
+  => Show item
+  => Array item
+  -> item
+  -> (item -> Effect m)
+  -> (item -> String)
+  -> R.Element
+formChoiceSafe' []  _   _   _    = mempty
+formChoiceSafe' [n] _   cbk prnt = formButton' n cbk prnt
+formChoiceSafe' arr def cbk prnt = formChoice' arr def cbk prnt
+
+formChoice' :: forall item m
+  .  Read item
+  => Show item
+  => Array item
+  -> item
+  -> (item -> Effect m)
+  -> (item -> String)
+  -> R.Element
+formChoice' items def cbk prnt =
+
+  H.div { className: "form-group"}
+  [
+    R2.select
+    { className: "form-control with-icon-font"
+    , on: { change }
+    } $
+    map option items
+  ]
+
+  where
+    change e = cbk $ fromMaybe def $ read $ R.unsafeEventValue e
+
+    option opt =
+      H.option { value: show opt }
+      [ H.text $ prnt opt ]
+
+formButton' :: forall item m
+  .  item
+  -> (item -> Effect m)
+  -> (item -> String)
+  -> R.Element
+formButton' item cbk prnt =
+
+  H.div {}
+  [
+    H.text $ "Confirm the selection of: " <> prnt item
+  ,
+    cta
+  ]
+
+  where
+    cta =
+      H.button
+      { className : "cold-md-5 btn btn-primary center"
+      , type : "button"
+      , title: "Form Button"
+      , style : { width: "100%" }
+      , on: { click: \_ -> cbk item }
+      }
+      [ H.text "Confirmation" ]
+
 ------------------------------------------------------------------------
 ------------------------------------------------------------------------
 

src/Gargantext/Components/Lang.purs

@@ -35,3 +35,7 @@ instance encodeJsonLang :: EncodeJson Lang where
 
 -- Language used for the landing page
 data LandingLang = LL_EN | LL_FR
+
+-- @TODO a possible method/class that a real i18n logic could later replace
+class Show t <= Translate t where
+  translate :: Lang -> t -> String

src/Gargantext/Types.purs

@@ -3,15 +3,19 @@ module Gargantext.Types where
 import Data.Argonaut (class DecodeJson, class EncodeJson, decodeJson, encodeJson, jsonEmptyObject, (.:), (:=), (~>))
 import Data.Argonaut.Decode.Error (JsonDecodeError(..))
 import Data.Array as A
+import Data.Char (fromCharCode)
 import Data.Either (Either(..))
-import Data.String as S
 import Data.Generic.Rep (class Generic)
 import Data.Generic.Rep.Eq (genericEq)
 import Data.Generic.Rep.Ord (genericCompare)
 import Data.Generic.Rep.Show (genericShow)
 import Data.Int (toNumber)
-import Data.Maybe (Maybe(..), maybe, fromMaybe)
+import Data.Maybe (Maybe(..), fromJust, fromMaybe, maybe)
+import Data.String as S
+import Data.String.CodeUnits (singleton)
 import Effect.Aff (Aff)
+import Gargantext.Components.Lang (class Translate, Lang(..))
+import Partial.Unsafe (unsafePartial)
 import Prim.Row (class Union)
 import Reactix as R
 import URI.Query (Query)
@@ -239,6 +243,120 @@ instance readNodeType :: Read NodeType where
   -- TODO NodePublic read ?
   read _                   = Nothing
 
+------------------------------------------------------
+
+-- (?) UI print Glyphicon directly on text node
+--
+--    * convert "Glyphicon ForkAwesome" classNames to CharCode [1]
+--    * bypass React "dangerousInnerHTML" via vanilla JavaScript coerce [2]
+--      (see "forkawesome.css" dist file for conversion matching)
+--
+-- [1] https://stackoverflow.com/a/54002856/6003907
+-- [2] https://github.com/facebook/react/issues/3769#issuecomment-97163582
+--
+-- @TODO thinking of a purs file for glyphicon conversion?
+charCodeIcon :: NodeType -> String
+charCodeIcon = _toString <<< case _ of
+  Annuaire            -> 0xf2bb
+  Corpus              -> 0xf2b9
+  Dashboard           -> 0xf012
+  Error               -> _defaultCharCode
+  Folder              -> 0xf07b
+  FolderPrivate       -> 0xf023
+  FolderPublic        -> 0xf33f
+  FolderShared        -> 0xf1e0
+  Graph               -> 0xf2eb
+  Individu            -> _defaultCharCode
+  Node                -> _defaultCharCode
+  NodeContact         -> 0xf2bb
+  NodeList            -> 0xf00b
+  NodeUser            -> 0xf007
+  Nodes               -> _defaultCharCode
+  Phylo               -> 0xf126
+  Team                -> 0xf0c0
+  Texts               -> 0xf1ea
+  Tree                -> _defaultCharCode
+  Url_Document        -> _defaultCharCode
+  --
+  NodeFile            -> 0xf15b
+  NodeFrameCalc       -> 0xf1ec
+  NodeFrameNotebook   -> 0xf1c9
+  NodeFrameWrite      -> 0xf15c
+  NodeFrameVisio      -> 0xf03d
+  NodePublic n        -> _defaultCharCode
+
+  where
+    _defaultCharCode = 0xf309
+    _toString i = singleton $ unsafePartial $ fromJust $ fromCharCode i
+
+------------------------------------------------------
+
+instance translateNodeType :: Translate NodeType where
+  translate l n = case l of
+    FR -> _translateFR n
+    _  -> _translateEN n
+
+_translateFR :: NodeType -> String
+_translateFR = case _ of
+  Annuaire            -> "Annuaire"
+  Corpus              -> "Corpus"
+  Dashboard           -> "Dashboard"
+  Error               -> "Erreur"
+  Folder              -> "Dossier"
+  FolderPrivate       -> "Dossier privé"
+  FolderPublic        -> "Dossier public"
+  FolderShared        -> "Dossier partagé"
+  Graph               -> "Graphe"
+  Individu            -> "Individu"
+  Node                -> "Nœud"
+  NodeContact         -> "Contact"
+  NodeList            -> "Liste"
+  NodeUser            -> "Utilisateur"
+  Nodes               -> "Nœuds"
+  Phylo               -> "Phylo"
+  Team                -> "Équipe"
+  Texts               -> "Textes"
+  Tree                -> "Arbre"
+  Url_Document        -> "Document URL"
+  --
+  NodeFile            -> "Fichier"
+  NodeFrameCalc       -> "Feuilles de calcul"
+  NodeFrameNotebook   -> "Carnet de notes"
+  NodeFrameWrite      -> "Éditeur de texte"
+  NodeFrameVisio      -> "Visio"
+  NodePublic n        -> "Nœud public"
+
+_translateEN :: NodeType -> String
+_translateEN = case _ of
+  Annuaire            -> "Annuaire"
+  Corpus              -> "Corpus"
+  Dashboard           -> "Dashboard"
+  Error               -> "Error"
+  Folder              -> "Folder"
+  FolderPrivate       -> "Private folder"
+  FolderPublic        -> "Public folder"
+  FolderShared        -> "Shared folder"
+  Graph               -> "Graph"
+  Individu            -> "Person"
+  Node                -> "Node"
+  NodeContact         -> "Contact"
+  NodeList            -> "List"
+  NodeUser            -> "User"
+  Nodes               -> "Nodes"
+  Phylo               -> "Phylo"
+  Team                -> "Team"
+  Texts               -> "Texts"
+  Tree                -> "Tree"
+  Url_Document        -> "URL document"
+  --
+  NodeFile            -> "File"
+  NodeFrameCalc       -> "Calc"
+  NodeFrameNotebook   -> "Notebook"
+  NodeFrameWrite      -> "Write"
+  NodeFrameVisio      -> "Visio"
+  NodePublic n        -> "Public node"
+
+------------------------------------------------------
 
 fldr :: NodeType -> Boolean -> String
 fldr NodeUser false = "fa fa-user-circle"

src/Gargantext/Utils.purs

 module Gargantext.Utils where
 
+import Data.Char (fromCharCode)
 import Data.Either (Either(..))
 import Data.Foldable (class Foldable, foldr)
 import Data.Lens (Lens', lens)
+import Data.Maybe (fromJust)
 import Data.Newtype (class Newtype, unwrap, wrap)
+import Data.Sequence.Ordered as OSeq
 import Data.Set (Set)
 import Data.Set as Set
-import Data.Sequence.Ordered as OSeq
 import Data.String as S
+import Data.String.CodeUnits (singleton)
 import Data.Unfoldable (class Unfoldable)
-import DOM.Simple.Window (window)
 import Effect (Effect)
 import Prelude
+import Partial.Unsafe (unsafePartial)
 import Web.HTML as WHTML
-import Web.HTML.Window (location)
 import Web.HTML.Location as WHL
+import Web.HTML.Window (location)
 
 -- | TODO (hard coded)
 csrfMiddlewareToken :: String
@@ -106,3 +109,12 @@ href = do
   w <- WHTML.window
   loc <- location w
   WHL.href loc
+
+
+nbsp :: Int -> String
+nbsp = nbsp' ""
+  where
+    char = singleton $ unsafePartial $ fromJust $ fromCharCode 160
+    nbsp' acc n
+      | n <= 0 = acc
+      | otherwise = nbsp' (acc <> char) (n - 1)

src/sass/bootstrap/default.sass

@@ -9,3 +9,6 @@ $theme-colors: ("primary": $blue, "secondary": $black)
 
 // Bootstrap and its default variables
 @import ../../../node_modules/bootstrap/scss/bootstrap
+
+.with-icon-font
+  font-family: ForkAwesome, $font-family-base