Commit 0f2b5a52 authored by James Laver's avatar James Laver

move searchbar into new component and make it default hidden, expandable

parent 9e778543
...@@ -16,6 +16,7 @@ import Gargantext.Pages.Corpus.Document as D ...@@ -16,6 +16,7 @@ import Gargantext.Pages.Corpus.Document as D
import Gargantext.Pages.Corpus.Graph as GE import Gargantext.Pages.Corpus.Graph as GE
import Gargantext.Pages.Layout.Specs.AddCorpus as AC import Gargantext.Pages.Layout.Specs.AddCorpus as AC
import Gargantext.Pages.Layout.Specs.Search as S import Gargantext.Pages.Layout.Specs.Search as S
import Gargantext.Pages.Layout.Specs.SearchBar as SB
import Gargantext.Pages.Layout.States (AppState) import Gargantext.Pages.Layout.States (AppState)
import Gargantext.Prelude import Gargantext.Prelude
import Gargantext.Router (Routes) import Gargantext.Router (Routes)
...@@ -26,28 +27,25 @@ data Action ...@@ -26,28 +27,25 @@ data Action
= LoginA LN.Action = LoginA LN.Action
| SetRoute Routes | SetRoute Routes
| SearchA S.Action | SearchA S.Action
| Search String
| AddCorpusA AC.Action | AddCorpusA AC.Action
| GraphExplorerA GE.Action | GraphExplorerA GE.Action
| DocumentViewA D.Action | DocumentViewA D.Action
| AnnuaireAction Annuaire.Action | AnnuaireAction Annuaire.Action
| Go | SearchBarAction SB.Action
| ShowLogin | ShowLogin
| Logout | Logout
| ShowAddcorpus | ShowAddCorpus
| ToggleTree | ToggleTree
performAction :: PerformAction AppState {} Action performAction :: PerformAction AppState {} Action
performAction (SetRoute route) _ _ = void do performAction (SetRoute route) _ _ = void do
modifyState $ _ {currentRoute = pure route} modifyState $ _ {currentRoute = pure route}
performAction (Search s) _ _ = void do
modifyState $ _ {search = s}
performAction (ToggleTree) _ (state) = void do -- TODO performAction (ToggleTree) _ (state) = void do -- TODO
modifyState $ _ {showTree = not (state.showTree)} modifyState $ _ {showTree = not (state.showTree)}
performAction (ShowLogin) _ _ = void do performAction ShowLogin _ _ = void do
liftEffect $ modalShow "loginModal" liftEffect $ modalShow "loginModal"
modifyState $ _ {showLogin = true} modifyState $ _ {showLogin = true}
...@@ -60,15 +58,10 @@ performAction Logout _ _ = do ...@@ -60,15 +58,10 @@ performAction Logout _ _ = do
--------------------------------------------------------- ---------------------------------------------------------
-- TODO chose one of them -- TODO chose one of them
performAction (ShowAddcorpus) _ _ = void do performAction ShowAddCorpus _ _ = void do
liftEffect $ modalShow "addCorpus" liftEffect $ modalShow "addCorpus"
modifyState $ _ {showCorpus = true} modifyState $ _ {showCorpus = true}
performAction Go _ _ = void do
liftEffect $ modalShow "addCorpus"
modifyState $ _ {showCorpus = true}
-- _ <- lift $ setHash "/addCorpus"
--modifyState id
--------------------------------------------------------- ---------------------------------------------------------
performAction (LoginA _) _ _ = pure unit performAction (LoginA _) _ _ = pure unit
...@@ -77,6 +70,9 @@ performAction (SearchA _) _ _ = pure unit ...@@ -77,6 +70,9 @@ performAction (SearchA _) _ _ = pure unit
performAction (DocumentViewA _) _ _ = pure unit performAction (DocumentViewA _) _ _ = pure unit
performAction (GraphExplorerA _) _ _ = pure unit performAction (GraphExplorerA _) _ _ = pure unit
performAction (AnnuaireAction _) _ _ = pure unit performAction (AnnuaireAction _) _ _ = pure unit
performAction (SearchBarAction _) _ _ = pure unit
-- liftEffect $ modalShow "addCorpus"
-- modifyState $ _ {showCorpus = true}
---------------------------------------------------------- ----------------------------------------------------------
...@@ -104,6 +100,12 @@ _annuaireAction = prism AnnuaireAction \action -> ...@@ -104,6 +100,12 @@ _annuaireAction = prism AnnuaireAction \action ->
AnnuaireAction a -> Right a AnnuaireAction a -> Right a
_ -> Left action _ -> Left action
_searchBarAction :: Prism' Action SB.Action
_searchBarAction = prism SearchBarAction \action ->
case action of
SearchBarAction a -> Right a
_ -> Left action
_documentViewAction :: Prism' Action D.Action _documentViewAction :: Prism' Action D.Action
_documentViewAction = prism DocumentViewA \action -> _documentViewAction = prism DocumentViewA \action ->
case action of case action of
......
...@@ -8,7 +8,7 @@ import React (ReactElement) ...@@ -8,7 +8,7 @@ import React (ReactElement)
import React.DOM (a, button, div, footer, hr', img, input, li, p, span, text, ul,i) import React.DOM (a, button, div, footer, hr', img, input, li, p, span, text, ul,i)
import React.DOM.Props (_data, _id, _type, aria, className, href, onChange, onClick, placeholder, role, src, style, tabIndex, target, title) import React.DOM.Props (_data, _id, _type, aria, className, href, onChange, onClick, placeholder, role, src, style, tabIndex, target, title)
import Thermite (Render, Spec, _render, defaultPerformAction, defaultRender, focus, simpleSpec, withState, noState, cmapProps) import Thermite (Render, Spec, _render, defaultPerformAction, defaultRender, focus, simpleSpec, withState, noState, cmapProps)
import Unsafe.Coerce (unsafeCoerce) -- import Unsafe.Coerce (unsafeCoerce)
import Gargantext.Prelude import Gargantext.Prelude
import Gargantext.Components.Data.Lang (Lang(..)) import Gargantext.Components.Data.Lang (Lang(..))
...@@ -23,10 +23,11 @@ import Gargantext.Pages.Corpus.Document as Annotation ...@@ -23,10 +23,11 @@ import Gargantext.Pages.Corpus.Document as Annotation
import Gargantext.Pages.Corpus.Dashboard as Dsh import Gargantext.Pages.Corpus.Dashboard as Dsh
import Gargantext.Pages.Corpus.Graph as GE import Gargantext.Pages.Corpus.Graph as GE
import Gargantext.Pages.Home as L import Gargantext.Pages.Home as L
import Gargantext.Pages.Layout.Actions (Action(..), _addCorpusAction, _documentViewAction, _graphExplorerAction, _loginAction, _searchAction, performAction) import Gargantext.Pages.Layout.Actions (Action(..), _addCorpusAction, _documentViewAction, _graphExplorerAction, _loginAction, _searchAction, _searchBarAction, performAction)
import Gargantext.Pages.Layout.Specs.AddCorpus as AC import Gargantext.Pages.Layout.Specs.AddCorpus as AC
import Gargantext.Pages.Layout.Specs.Search as S import Gargantext.Pages.Layout.Specs.Search as S
import Gargantext.Pages.Layout.States (AppState, _addCorpusState, _documentViewState, _graphExplorerState, _loginState, _searchState) import Gargantext.Pages.Layout.Specs.SearchBar as SB
import Gargantext.Pages.Layout.States (AppState, _addCorpusState, _documentViewState, _graphExplorerState, _loginState, _searchState, _searchBarState)
import Gargantext.Router (Routes(..)) import Gargantext.Router (Routes(..))
layoutSpec :: Spec AppState {} Action layoutSpec :: Spec AppState {} Action
...@@ -61,7 +62,6 @@ pagesComponent s = case s.currentRoute of ...@@ -61,7 +62,6 @@ pagesComponent s = case s.currentRoute of
selectSpec (Document i) = layout0 $ focus _documentViewState _documentViewAction Annotation.docview selectSpec (Document i) = layout0 $ focus _documentViewState _documentViewAction Annotation.docview
selectSpec (PGraphExplorer i)= layout1 $ focus _graphExplorerState _graphExplorerAction GE.specOld selectSpec (PGraphExplorer i)= layout1 $ focus _graphExplorerState _graphExplorerAction GE.specOld
selectSpec Dashboard = layout0 $ noState Dsh.layoutDashboard selectSpec Dashboard = layout0 $ noState Dsh.layoutDashboard
selectSpec (Annuaire i) = layout0 $ cmapProps (const {annuaireId: i}) $ noState A.layout selectSpec (Annuaire i) = layout0 $ cmapProps (const {annuaireId: i}) $ noState A.layout
selectSpec (UserPage i) = layout0 $ cmapProps (const {nodeId: i}) $ noState C.layoutUser selectSpec (UserPage i) = layout0 $ cmapProps (const {nodeId: i}) $ noState C.layoutUser
selectSpec (ContactPage i) = layout0 $ cmapProps (const {nodeId: i}) $ noState C.layoutUser selectSpec (ContactPage i) = layout0 $ cmapProps (const {nodeId: i}) $ noState C.layoutUser
...@@ -75,11 +75,12 @@ layout0 :: Spec AppState {} Action ...@@ -75,11 +75,12 @@ layout0 :: Spec AppState {} Action
-> Spec AppState {} Action -> Spec AppState {} Action
layout0 layout = layout0 layout =
fold fold
[ layoutSidebar divSearchBar [ searchBar
, outerLayout , outerLayout
, layoutFooter , layoutFooter
] ]
where where
searchBar = layoutSidebar $ focus _searchBarState _searchBarAction SB.renderSpec
outerLayout1 = simpleSpec defaultPerformAction defaultRender outerLayout1 = simpleSpec defaultPerformAction defaultRender
outerLayout :: Spec AppState {} Action outerLayout :: Spec AppState {} Action
outerLayout = outerLayout =
...@@ -122,12 +123,13 @@ layout1 :: Spec AppState {} Action ...@@ -122,12 +123,13 @@ layout1 :: Spec AppState {} Action
-> Spec AppState {} Action -> Spec AppState {} Action
layout1 layout = layout1 layout =
fold fold
[ layoutSidebar divSearchBar [ searchBar
, layout , layout
-- , outerLayout -- , outerLayout
, layoutFooter , layoutFooter
] ]
where where
searchBar = layoutSidebar $ focus _searchBarState _searchBarAction SB.renderSpec
outerLayout1 = simpleSpec defaultPerformAction defaultRender outerLayout1 = simpleSpec defaultPerformAction defaultRender
outerLayout :: Spec AppState {} Action outerLayout :: Spec AppState {} Action
outerLayout = outerLayout =
...@@ -163,8 +165,7 @@ layout1 layout = ...@@ -163,8 +165,7 @@ layout1 layout =
] ]
layoutSidebar :: Spec AppState {} Action layoutSidebar :: Spec AppState {} Action -> Spec AppState {} Action
-> Spec AppState {} Action
layoutSidebar = over _render \render d p s c -> layoutSidebar = over _render \render d p s c ->
[ div [ _id "dafixedtop" [ div [ _id "dafixedtop"
, className "navbar navbar-inverse navbar-fixed-top" , className "navbar navbar-inverse navbar-fixed-top"
...@@ -297,31 +298,6 @@ liNav (LiNav { title : title' ...@@ -297,31 +298,6 @@ liNav (LiNav { title : title'
] ]
] ]
-- TODO put the search form in the center of the navBar
divSearchBar :: Spec AppState {} Action
divSearchBar = simpleSpec performAction render
where
render :: Render AppState {} Action
render dispatch _ state _ = [div [ className "" ] [ searchbar']]
where
searchbar' = ul [ className "nav navbar-nav col-md-6 col-md-offset-3"
, style { "marginLeft" : "15%"}
] [ {-div [className "navbar-form"]
[ input [ className "search-query"
, placeholder "Query, URL or FILE (works with Firefox or Chromium browsers)"
, _type "text"
, style { height: "35px"
, width: "400px"
}
, onChange \e -> dispatch $ Search (unsafeCoerce e).target.value
]
--, button [onClick \e -> dispatch Go, className "btn btn-primary"] [text "Enter"]
, span [onClick \e -> dispatch Go, style {color : "#039BE5"}]
[ i [className "material-icons md-36"] [text "control_point"]]
]
-}
]
divDropdownRight :: (Action -> Effect Unit) -> AppState -> ReactElement divDropdownRight :: (Action -> Effect Unit) -> AppState -> ReactElement
divDropdownRight d s = divDropdownRight d s =
ul [className "nav navbar-nav pull-right"] ul [className "nav navbar-nav pull-right"]
......
module Gargantext.Pages.Layout.Specs.SearchBar
(State, Action(..), initialState, performAction, renderSpec) where
import Data.Foldable (fold, intercalate)
import Data.Lens (Lens', lens, over, (^.), (.~))
import Data.Maybe (Maybe(Nothing, Just))
import Effect (Effect)
import Effect.Class.Console (log)
import React (ReactElement)
import React.DOM (a, button, div, footer, hr', img, input, li, p, span, text, ul,i)
import React.DOM.Props (_data, _id, _type, aria, className, href, onChange, onClick, placeholder, role, src, style, tabIndex, target, title)
import Thermite (Render, Spec, _render, defaultPerformAction, defaultRender, focus, simpleSpec, withState, noState, cmapProps)
import Unsafe.Coerce (unsafeCoerce)
import Gargantext.Prelude
import Gargantext.Components.Data.Lang (Lang(..))
import Gargantext.Components.Login.Types (AuthData(..))
import Gargantext.Components.Login as LN
import Gargantext.Components.Tree as Tree
import Gargantext.Folder as F
import Gargantext.Pages.Annuaire as A
import Gargantext.Pages.Annuaire.User.Contacts as C
import Gargantext.Pages.Corpus as Corpus
import Gargantext.Pages.Corpus.Document as Annotation
import Gargantext.Pages.Corpus.Dashboard as Dsh
import Gargantext.Pages.Corpus.Graph as GE
import Gargantext.Pages.Home as L
import Gargantext.Pages.Layout.Specs.AddCorpus as AC
import Gargantext.Pages.Layout.Specs.Search as S
import Gargantext.Router (Routes(..))
import Thermite (PerformAction, Render, Spec, modifyState, simpleSpec)
import Gargantext.Components.Modals.Modal (modalShow)
import Effect.Class (liftEffect)
import Data.Newtype as N
type State' = { open :: Boolean, searchTerm :: String }
newtype State = State State'
derive instance newtypeState :: N.Newtype State _
initialState :: State
initialState = State { open: false, searchTerm: "" }
data Action =
ToggleOpen
| SetSearchTerm String
| PerformSearch
performAction :: PerformAction State {} Action
performAction ToggleOpen _ st = void $ do
let new = st ^. _open
let msg = "Toggled open from " <> show new
liftEffect $ log msg
modifyState $ over _open not
performAction (SetSearchTerm term) _ _ = void $ do
liftEffect $ log $ "Search term set " <> term
modifyState $ _searchTerm .~ term
performAction PerformSearch _ _ = void $ do
liftEffect $ log "Search performed"
liftEffect $ modalShow "addCorpus"
render :: Render State {} Action
render dispatch _ state _ = [ expander ] <> (draw $ state ^. _open)
where
draw true = [ searchbar ]
draw false = [ ]
go = button [onClick \e -> dispatch PerformSearch, className "btn btn-primary"]
[text "Enter"]
expander = ul [ className "nav navbar pull-left" ]
[ li [ onClick \e -> dispatch ToggleOpen, style { color: "#039BE5" } ]
[ i [ className "material-icons md-36", style { marginTop: "-5px" } ]
[ text "control_point" ] ] ]
search = input [ className "search-query"
, placeholder "Query, URL or FILE (works with Firefox or Chromium browsers)"
, _type "text"
, style { height: "35px", width: "400px" }
, onChange \e -> dispatch $ SetSearchTerm (unsafeCoerce e).target.value
]
searchbar = ul [ className "nav navbar pull-left" ]
[ div [className "navbar-form"] [ search, go ] ]
-- TODO:
-- render differently based on whether we are open or not
-- tidy up css
-- subtle css animation
renderSpec :: Spec State {} Action
renderSpec = simpleSpec performAction render
----------------------------
overState :: (State' -> State') -> State -> State
overState = N.over State
_open :: Lens' State Boolean
_open = lens (_.open <<< N.unwrap) $ \s o -> overState (_ { open = o }) s
_searchTerm :: Lens' State String
_searchTerm = lens (_.searchTerm <<< N.unwrap) $ \s t -> overState (_ { searchTerm = t }) s
...@@ -11,6 +11,7 @@ import Gargantext.Pages.Corpus.Document as D ...@@ -11,6 +11,7 @@ import Gargantext.Pages.Corpus.Document as D
import Gargantext.Pages.Corpus.Graph as GE import Gargantext.Pages.Corpus.Graph as GE
import Gargantext.Pages.Layout.Specs.AddCorpus as AC import Gargantext.Pages.Layout.Specs.AddCorpus as AC
import Gargantext.Pages.Layout.Specs.Search as S import Gargantext.Pages.Layout.Specs.Search as S
import Gargantext.Pages.Layout.Specs.SearchBar as SB
import Gargantext.Router (Routes(..)) import Gargantext.Router (Routes(..))
type AppState = type AppState =
...@@ -19,7 +20,7 @@ type AppState = ...@@ -19,7 +20,7 @@ type AppState =
, addCorpusState :: AC.State , addCorpusState :: AC.State
, searchState :: S.State , searchState :: S.State
, documentState :: D.State , documentState :: D.State
, search :: String , searchBarState :: SB.State
, showLogin :: Boolean , showLogin :: Boolean
, showCorpus :: Boolean , showCorpus :: Boolean
, graphExplorerState :: GE.State , graphExplorerState :: GE.State
...@@ -35,14 +36,16 @@ initAppState = do ...@@ -35,14 +36,16 @@ initAppState = do
, addCorpusState : AC.initialState , addCorpusState : AC.initialState
, searchState : S.initialState , searchState : S.initialState
, documentState : D.initialState {} , documentState : D.initialState {}
, search : "" , searchBarState : SB.initialState
, showLogin : false , showLogin : false
, showCorpus : false , showCorpus : false
, graphExplorerState : GE.initialState , graphExplorerState : GE.initialState
, showTree : false , showTree : false
} }
--------------------------------------------------------- ---------------------------------------------------------
_loginState :: Lens' AppState LN.State _loginState :: Lens' AppState LN.State
_loginState = lens (\s -> s.loginState) (\s ss -> s{loginState = ss}) _loginState = lens (\s -> s.loginState) (\s ss -> s{loginState = ss})
...@@ -52,8 +55,12 @@ _addCorpusState = lens (\s -> s.addCorpusState) (\s ss -> s{addCorpusState = ss} ...@@ -52,8 +55,12 @@ _addCorpusState = lens (\s -> s.addCorpusState) (\s ss -> s{addCorpusState = ss}
_searchState :: Lens' AppState S.State _searchState :: Lens' AppState S.State
_searchState = lens (\s -> s.searchState) (\s ss -> s{searchState = ss}) _searchState = lens (\s -> s.searchState) (\s ss -> s{searchState = ss})
_searchBarState :: Lens' AppState SB.State
_searchBarState = lens (\s -> s.searchBarState) (\s ss -> s{searchBarState = ss})
_documentViewState :: Lens' AppState D.State _documentViewState :: Lens' AppState D.State
_documentViewState = lens (\s -> s.documentState) (\s ss -> s{documentState = ss}) _documentViewState = lens (\s -> s.documentState) (\s ss -> s{documentState = ss})
_graphExplorerState :: Lens' AppState GE.State _graphExplorerState :: Lens' AppState GE.State
_graphExplorerState = lens (\s -> s.graphExplorerState) (\s ss -> s{graphExplorerState = ss}) _graphExplorerState = lens (\s -> s.graphExplorerState) (\s ss -> s{graphExplorerState = ss})
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