[Action Share] Autocomplete API

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

@@ -2,9 +2,11 @@ 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)
@@ -12,9 +14,10 @@ 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.Components.InputWithAutocomplete (inputWithAutocomplete')
-import Gargantext.Config.REST (AffRESTError)
+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
@@ -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,14 +59,35 @@ 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 } _ = do
+    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' ""
 
@@ -67,14 +95,13 @@ shareNodeCpt = here.component "shareNode" cpt
                 [ inputWithAutocomplete' { boxAction: shareAction
                                          , dispatch
                                          , state
-                                         , classes: ""
+                                         , classes: "d-flex align-items-center"
                                          , autocompleteSearch
                                          , onAutocompleteClick
                                          , text }
                 ] (H.div {} [H.text text'])
       where
-        -- TODO: This will be fetched from API
-        autocompleteSearch _ = ["test1", "test2", "test3"]
+        autocompleteSearch input = nub $ filter (contains (Pattern input)) completions
         onAutocompleteClick _ = pure unit
 ------------------------------------------------------------------------
 publishNode :: R2.Component SubTreeParamsIn

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

@@ -10,6 +10,8 @@ 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
@@ -173,6 +175,12 @@ inputWithAutocompleteCpt' = here.component "inputWithAutocomplete" cpt
                         , blur: onBlur completions containerRef
                         }
                   }
+        , B.iconButton
+            { callback: submit state'
+            , title: "Submit"
+            , name: "plus"
+            , elevation: Level1
+            }
         ]
 
       -- Helpers
@@ -231,6 +239,10 @@ inputWithAutocompleteCpt' = here.component "inputWithAutocomplete" cpt
           else
             pure $ false
 
+        submit val _ = do
+          T.write_ ("Invited " <> val <> " to the team") text
+          launchAff_ $ dispatch (boxAction val)
+
 ---------------------------------------------------------
 
 type CompletionsProps =

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"