Merge remote-tracking branch 'origin/475-dev-node-team-invite' into dev-merge

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

@@ -2,22 +2,25 @@ module Gargantext.Components.Forest.Tree.Node.Action.Share where
 
 import Gargantext.Prelude
 
+import Data.Array (filter, nub)
 import Data.Generic.Rep (class Generic)
 import Data.Maybe (Maybe(..))
 import Data.Show.Generic (genericShow)
+import Data.String (Pattern(..), contains)
 import Data.Tuple.Nested ((/\))
 import Effect.Aff (Aff)
 import Gargantext.Components.Forest.Tree.Node.Action.Types (Action)
 import Gargantext.Components.Forest.Tree.Node.Action.Types as Action
 import Gargantext.Components.Forest.Tree.Node.Tools as Tools
 import Gargantext.Components.Forest.Tree.Node.Tools.SubTree (subTreeView, SubTreeParamsIn)
-import Gargantext.Config.REST (AffRESTError)
+import Gargantext.Components.InputWithAutocomplete (inputWithAutocomplete')
+import Gargantext.Config.REST (AffRESTError, logRESTError)
+import Gargantext.Hooks.Loader (useLoader)
 import Gargantext.Routes as GR
-import Gargantext.Sessions (Session, post)
+import Gargantext.Sessions (Session, get, post)
 import Gargantext.Types (ID)
 import Gargantext.Types as GT
 import Gargantext.Utils.Reactix as R2
-import Gargantext.Utils.Reactix as R2
 import Gargantext.Utils.SimpleJSON as GUSJ
 import Reactix as R
 import Reactix.DOM.HTML as H
@@ -32,6 +35,10 @@ shareReq :: Session -> ID -> ShareNodeParams -> AffRESTError ID
 shareReq session nodeId =
   post session $ GR.NodeAPI GT.Node (Just nodeId) "share"
 
+getCompletionsReq :: { session :: Session } -> AffRESTError (Array String)
+getCompletionsReq { session }  =
+  get session GR.Members
+
 shareAction :: String -> Action
 shareAction username = Action.ShareTeam username
 
@@ -52,24 +59,50 @@ instance Show ShareNodeParams where show = genericShow
 ------------------------------------------------------------------------
 type ShareNode =
   ( id :: ID
-  , dispatch :: Action -> Aff Unit )
+  , dispatch :: Action -> Aff Unit 
+  , session :: Session)
 
 shareNode :: R2.Component ShareNode
 shareNode = R.createElement shareNodeCpt
 shareNodeCpt :: R.Component ShareNode
 shareNodeCpt = here.component "shareNode" cpt
   where
-    cpt { dispatch, id } _ = do
-      username' /\ username <- R2.useBox' ""
+    cpt {session, dispatch} _ = do
+      useLoader {
+        loader: getCompletionsReq
+      , path: { session }
+      , render: \completions -> shareNodeInner {completions, dispatch} []
+      , errorHandler
+      }
+      where
+        errorHandler = logRESTError here "[shareNode]"
+
+type ShareNodeInner =
+  ( dispatch :: Action -> Aff Unit
+  , completions :: Array String
+  )
+
+shareNodeInner :: R2.Component ShareNodeInner
+shareNodeInner = R.createElement shareNodeInnerCpt
+shareNodeInnerCpt :: R.Component ShareNodeInner
+shareNodeInnerCpt = here.component "shareNodeInner" cpt
+  where
+    cpt { dispatch, completions } _ = do
+      state <- T.useBox "username"
+      text' /\ text <- R2.useBox' ""
 
       pure $ Tools.panel
-                [ Tools.inviteInputBox { boxAction: shareAction
-                                        , boxName: "Share"
+                [ inputWithAutocomplete' { boxAction: shareAction
                                          , dispatch
-                                        , id
-                                        , text: "username"
-                                        , username } []
-                ] (H.div {} [H.text username'])
+                                         , state
+                                         , classes: "d-flex align-items-center"
+                                         , autocompleteSearch
+                                         , onAutocompleteClick
+                                         , text }
+                ] (H.div {} [H.text text'])
+      where
+        autocompleteSearch input = nub $ filter (contains (Pattern input)) completions
+        onAutocompleteClick _ = pure unit
 ------------------------------------------------------------------------
 publishNode :: R2.Component SubTreeParamsIn
 publishNode = R.createElement publishNodeCpt

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

@@ -349,7 +349,7 @@ panelActionCpt = here.component "panelAction" cpt
       pure $ moveNode { boxes, dispatch, id, nodeType, session, subTreeParams } []
     cpt { action: Link {subTreeParams}, boxes, dispatch, id, nodeType, session } _ =
       pure $ linkNode { boxes, dispatch, id, nodeType, session, subTreeParams } []
-    cpt { action : Share, dispatch, id } _ = pure $ Share.shareNode { dispatch, id } []
+    cpt { action : Share, dispatch, id, session } _ = pure $ Share.shareNode { dispatch, id, session } []
     cpt { action : AddingContact, dispatch, id } _ = pure $ Contact.actionAddContact { dispatch, id } []
     cpt { action : Publish {subTreeParams}, boxes, dispatch, id, nodeType, session } _ =
       pure $ Share.publishNode { boxes, dispatch, id, nodeType, session, subTreeParams } []

src/Gargantext/Components/InputWithAutocomplete.purs

@@ -8,7 +8,11 @@ import DOM.Simple.Event as DE
 import Data.Maybe (Maybe(..), maybe)
 import Data.Nullable (Nullable, null, toMaybe)
 import Effect (Effect)
+import Effect.Aff (Aff, launchAff_)
 import FFI.Simple ((..))
+import Gargantext.Components.Bootstrap as B
+import Gargantext.Components.Bootstrap.Types (Elevation(..))
+import Gargantext.Components.Forest.Tree.Node.Action.Types (Action)
 import Gargantext.Utils.Reactix as R2
 import Reactix as R
 import Reactix.DOM.HTML as H
@@ -122,7 +126,122 @@ inputWithAutocompleteCpt = here.component "inputWithAutocomplete" cpt
           else
             pure $ false
 
+type Props' =
+  (
+    autocompleteSearch  :: String -> Completions
+  , classes             :: String
+  , onAutocompleteClick :: String -> Effect Unit
+  , dispatch            :: Action -> Aff Unit
+  , boxAction           :: String -> Action
+  , state               :: T.Box String
+  , text                :: T.Box String
+  )
+
+inputWithAutocomplete' :: R2.Leaf Props'
+inputWithAutocomplete' = R2.leaf inputWithAutocompleteCpt'
+inputWithAutocompleteCpt' :: R.Component Props'
+inputWithAutocompleteCpt' = here.component "inputWithAutocomplete" cpt
+  where
+    cpt { autocompleteSearch
+        , classes
+        , onAutocompleteClick
+        , dispatch
+        , boxAction
+        , state
+        , text } _ = do
+      -- States
+      state'        <- T.useLive T.unequal state
+      containerRef  <- R.useRef null
+      inputRef      <- R.useRef null
+      completions   <- T.useBox $ autocompleteSearch state'
+
+      -- Render
+      pure $
+
+        H.div
+        { className: "input-with-autocomplete " <> classes
+        , ref: containerRef
+        }
+        [
+          completionsCpt { completions, onAutocompleteClick, state } []
+        , H.input { type: "text"
+                  , ref: inputRef
+                  , className: "form-control"
+                  , value: state'
+                  , on: { focus: onFocus completions state'
+                        , input: onInput completions
+                        , change: onInput completions
+                        , keyUp: onInputKeyUp inputRef
+                        , blur: onBlur completions containerRef
+                        }
+                  }
+        , B.iconButton
+            { callback: submit state'
+            , title: "Submit"
+            , name: "plus"
+            , elevation: Level1
+            }
+        ]
+
+      -- Helpers
+      where
+        -- (!) `onBlur` DOM.Event is triggered before any `onClick` DOM.Event
+        --     So when a completion is being clicked, the UX will be broken
+        --
+        --        ↳ As a solution we chose to check if the click is made from
+        --          the autocompletion list
+        onBlur :: forall event.
+             T.Box Completions
+          -> R.Ref (Nullable DOM.Element)
+          -> event
+          -> Effect Unit
+        onBlur completions containerRef event =
+
+          if isInnerEvent
+          then
+            pure $ (event .. "preventDefault")
+          else
+            T.write_ [] completions
+
+          where
+            mContains = do
+              a <- toMaybe $ R.readRef containerRef
+              b <- toMaybe (event .. "relatedTarget")
+              Just (contains a b)
+
+            isInnerEvent = maybe false identity mContains
+
+
+        onFocus :: forall event. T.Box Completions -> String -> event -> Effect Unit
+        onFocus completions st _ = T.write_ (autocompleteSearch st) completions
+
+        onInput :: forall event. T.Box Completions -> event -> Effect Unit
+        onInput completions e = do
+          let val = R.unsafeEventValue e
+          T.write_ val state
+          T.write_ (autocompleteSearch val) completions
+
+        onInputKeyUp :: R.Ref (Nullable DOM.Element) -> DE.KeyboardEvent -> Effect Boolean
+        onInputKeyUp inputRef e = do
+          if DE.key e == "Enter" then do
+            R2.preventDefault e
+            R2.stopPropagation e
+            let val = R.unsafeEventValue e
+            let mInput = toMaybe $ R.readRef inputRef
+            T.write_ val state
+            launchAff_ $ dispatch (boxAction val)
+            T.write_ ("Invited " <> val <> " to the team") text
+            case mInput of
+              Nothing -> pure false
+              Just input -> do
+                R2.blur input
+                pure false
+          else
+            pure $ false
 
+        submit val _ = do
+          T.write_ ("Invited " <> val <> " to the team") text
+          launchAff_ $ dispatch (boxAction val)
 
 ---------------------------------------------------------
 

src/Gargantext/Ends.purs

@@ -189,6 +189,7 @@ sessionPath (R.ChartHash { chartType, listId, tabType } i) =
     <> defaultListAddMaybe listId
 -- sessionPath (R.NodeAPI (NodeContact s a i) i) = sessionPath $ "annuaire/" <> show a <> "/contact/" <> show i
 sessionPath (R.PhyloAPI nId) = "node/" <> show nId <> "/phylo"
+sessionPath R.Members = "members"
 
 ------- misc routing stuff
 

src/Gargantext/Routes.purs

@@ -61,6 +61,7 @@ data SessionRoute
   | ChartHash { chartType :: ChartType, listId :: Maybe ListId, tabType :: TabType } (Maybe Id)
   -- | AnnuaireContact AnnuaireId DocId
   | PhyloAPI Id
+  | Members
 
 instance Show AppRoute where
   show Home                     = "Home"