Commit b4ea78f9 authored by Alexandre Delanoë's avatar Alexandre Delanoë

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

parents da927c55 7bf630a2
......@@ -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
......
......@@ -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 } []
......
......@@ -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)
---------------------------------------------------------
......
......@@ -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
......
......@@ -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"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment