tree spec added

src/DocView.purs

@@ -67,11 +67,12 @@ newtype Hyperdata = Hyperdata
   }
 
 type State = CorpusTableData
+
 data Action
   = ChangePageSize PageSizes
   | ChangePage Int
   | LoadData
-  | ToggleFolder ID
+
 
 
 instance decodeHyperdata :: DecodeJson Hyperdata where
@@ -94,21 +95,6 @@ instance decodeResponse :: DecodeJson Response where
     pure $ Response { cid, created, favorite, ngramCount, hyperdata }
 
 
-type Name = String
-type Open = Boolean
-type URL  = String
-type ID   = Int
-
-data NTree a = NLeaf a | NNode ID Open Name (Array (NTree a))
-
-type FTree = NTree (Tuple Name URL)
-
-toggleNode :: forall t10. Int -> NTree t10 -> NTree t10
-toggleNode sid (NNode iid open name ary) =
-  NNode iid nopen name $ map (toggleNode sid) ary
-  where
-    nopen = if sid == iid then not open else open
-toggleNode sid a = a
 
 
 layoutDocview :: Spec _ State _ Action
@@ -121,7 +107,7 @@ layoutDocview = simpleSpec performAction render
           [ div [className "col-md-3"]
             [ br' []
             , br' []
-            ,  div [className "tree"] [toHtml dispatch d.tree]
+--            ,  div [className "tree"] [toHtml dispatch d.tree]
             ]
           , div [className "col-md-9"]
             [ nav []
@@ -173,66 +159,6 @@ layoutDocview = simpleSpec performAction render
       ]
 
 
-------------------------------------------------------------------------
--- Realistic Tree for the UI
-
-myCorpus :: Int -> String -> NTree (Tuple String String)
-myCorpus n name = NNode n false name
-    [ NLeaf (Tuple "Facets"    "#/docView")
-    , NLeaf (Tuple "Graph"     "#/docView")
-    , NLeaf (Tuple "Dashboard" "#/userPage")
-    ]
-
-exampleTree :: NTree (Tuple String String)
-exampleTree =
-  NNode 1 true "My gargantext"
-  [ myCorpus 2 "My publications"
-  , myCorpus 3 "My community"
-  , NNode 4 false "My researchs" [ myCorpus 5 "Subject A"
-                                 , myCorpus 6 "Subject B"
-                                 , myCorpus 7 "Subject C"
-                                 ]
-  ]
-
-------------------------------------------------------------------------
--- TODO
--- alignment to the right
-nodeOptionsCorp activated = case activated of
-                         true  -> [ i [className "fab fa-whmcs" ] []]
-                         false -> []
-
--- TODO
--- alignment to the right
--- on hover make other options available:
-nodeOptionsView activated = case activated of
-                         true -> [ i [className "fas fa-sync-alt" ] []
-                                 , i [className "fas fa-upload"   ] []
-                                 , i [className "fas fa-share-alt"] []
-                                 ]
-                         false -> []
-
-toHtml :: _ -> FTree -> ReactElement
-toHtml d (NLeaf (Tuple name link)) =
-  li []
-  [ a [ href link]
-    ( [ text (name <> "    ")
-      ] <> nodeOptionsView false
-    )
-  ]
-toHtml d (NNode id open name ary) =
-  ul [ ]
-  [ li [] $
-    ( [ a [onClick $ (\e-> d $ ToggleFolder id)] [i [fldr open] []]
-      ,  text $ " " <> name <> "    "
-      ] <> nodeOptionsCorp false <>
-      if open then
-        map (toHtml d) ary
-        else []
-    )
-  ]
-
-fldr :: Boolean -> Props
-fldr open = if open then className "fas fa-folder-open" else className "fas fa-folder"
 
 performAction :: PerformAction _ State _ Action
 performAction (ChangePageSize ps) _ _ = void (cotransform (\state ->  changePageSize ps state ))
@@ -256,7 +182,7 @@ performAction LoadData _ _ = void do
          }
 
 
-performAction (ToggleFolder i) _ _ = void (cotransform (\(TableData td) -> TableData $ td {tree = toggleNode i td.tree}))
+-- performAction (ToggleFolder i) _ _ = void (cotransform (\(TableData td) -> TableData $ td {tree = toggleNode i td.tree}))
 
 
 changePageSize :: PageSizes -> CorpusTableData -> CorpusTableData
@@ -411,7 +337,7 @@ newtype TableData a
     , pageSize     :: PageSizes
     , totalRecords :: Int
     , title        :: String
-    , tree         :: FTree
+   -- , tree         :: FTree
     }
 
 newtype Corpus
@@ -446,7 +372,7 @@ tdata = TableData
         , pageSize     : PS10
         , totalRecords : 100
         , title        : "Documents"
-        , tree         : exampleTree
+     --   , tree         : exampleTree
         }
 
 tdata' :: _ -> CorpusTableData
@@ -457,7 +383,7 @@ tdata' d = TableData
         , pageSize     : PS10
         , totalRecords : 100
         , title        : "Documents"
-        , tree         : exampleTree
+       -- , tree         : exampleTree
         }
 
 

src/NTree.purs

 module NTree where
 
-import Prelude
-
 import Data.Tuple (Tuple(..))
+import Prelude hiding (div)
 import React (ReactElement)
-import React.DOM (a, i, li, text, ul)
-import React.DOM.Props (className, href)
+import React.DOM (a, div, i, li, text, ul)
+import React.DOM.Props (Props, className, href, onClick)
+import Thermite (PerformAction, Render, Spec, cotransform, simpleSpec)
+
+type Name = String
+type Open = Boolean
+type URL  = String
+type ID   = Int
+
+data NTree a = NLeaf a | NNode ID Open Name (Array (NTree a))
+
+type FTree = NTree (Tuple Name URL)
+
+data Action = ToggleFolder ID
+
+type State = FTree
+
+initialState :: State
+initialState = NLeaf (Tuple "" "")
+
+performAction :: PerformAction _ State _ Action
+performAction (ToggleFolder i) _ _ = void (cotransform (\td -> toggleNode i td))
+
+toggleNode :: forall t10. Int -> NTree t10 -> NTree t10
+toggleNode sid (NNode iid open name ary) =
+  NNode iid nopen name $ map (toggleNode sid) ary
+  where
+    nopen = if sid == iid then not open else open
+toggleNode sid a = a
+
 
-data NTree a = NLeaf a | NNode String (Array (NTree a))
 
-type FTree = NTree (Tuple String String)
+------------------------------------------------------------------------
+-- Realistic Tree for the UI
 
+myCorpus :: Int -> String -> NTree (Tuple String String)
+myCorpus n name = NNode n false name
+    [ NLeaf (Tuple "Facets"    "#/docView")
+    , NLeaf (Tuple "Graph"     "#/docView")
+    , NLeaf (Tuple "Dashboard" "#/userPage")
+    ]
+
+exampleTree :: NTree (Tuple String String)
+exampleTree =
+  NNode 1 true "My gargantext"
+  [ myCorpus 2 "My publications"
+  , myCorpus 3 "My community"
+  , NNode 4 false "My researchs" [ myCorpus 5 "Subject A"
+                                 , myCorpus 6 "Subject B"
+                                 , myCorpus 7 "Subject C"
+                                 ]
+  ]
+
+------------------------------------------------------------------------
+-- TODO
+-- alignment to the right
+nodeOptionsCorp :: Boolean -> Array ReactElement
+nodeOptionsCorp activated = case activated of
+                         true  -> [ i [className "fab fa-whmcs" ] []]
+                         false -> []
+
+-- TODO
+-- alignment to the right
+-- on hover make other options available:
+nodeOptionsView :: Boolean -> Array ReactElement
+nodeOptionsView activated = case activated of
+                         true -> [ i [className "fas fa-sync-alt" ] []
+                                 , i [className "fas fa-upload"   ] []
+                                 , i [className "fas fa-share-alt"] []
+                                 ]
+                         false -> []
 
-toHtml :: FTree -> ReactElement
-toHtml (NLeaf (Tuple name link)) =
+
+treeview :: Spec _ State _ Action
+treeview = simpleSpec performAction render
+  where
+    render :: Render State _ Action
+    render dispatch _ state _ =
+      [div [className "tree"] [toHtml dispatch state]]
+
+
+toHtml :: _ -> FTree -> ReactElement
+toHtml d (NLeaf (Tuple name link)) =
   li []
   [ a [ href link]
-    [ i [className "fas fa-folder"] []
-    , text name
-    ]
+    ( [ text (name <> "    ")
+      ] <> nodeOptionsView false
+    )
   ]
-toHtml (NNode name ary) =
-  ul []
+toHtml d (NNode id open name ary) =
+  ul [ ]
   [ li [] $
-    [ text name
-    ] <>
-    map toHtml ary
+    ( [ a [onClick $ (\e-> d $ ToggleFolder id)] [i [fldr open] []]
+      ,  text $ " " <> name <> "    "
+      ] <> nodeOptionsCorp false <>
+      if open then
+        map (toHtml d) ary
+        else []
+    )
   ]
+
+fldr :: Boolean -> Props
+fldr open = if open then className "fas fa-folder-open" else className "fas fa-folder"

src/Navigation.purs

 module Navigation where
 
 import DOM
+import Gargantext.Data.Lang
+import Prelude
 
 import AddCorpusview as AC
+import AnnotationDocumentView as D
 import Control.Monad.Eff.Console (CONSOLE)
-
 import Data.Array (concat)
 import Data.Either (Either(..))
 import Data.Foldable (fold, intercalate)
 import Data.Lens (Lens', Prism', lens, over, prism)
 import Data.Maybe (Maybe(Nothing, Just))
+import Data.Tuple (Tuple(..))
 import DocView as DV
 import Landing as L
 import Login as LN
+import NTree as NT
 import Network.HTTP.Affjax (AJAX)
 import PageRouter (Routes(..))
-import Prelude (class Applicative, class Bind, Unit, bind, id, map, negate, pure, unit, void, ($), (<>))
 import React (ReactElement)
-import React.DOM (a, div, img, li, span, text, ul, input, button, footer, p, hr, form)
-import React.DOM.Props (_data, _id, _type, aria, className, href, name, placeholder, role, src, style, tabIndex, target, title)
+import React.DOM (a, button, div, footer, form, hr, i, img, input, li, p, span, text, ul)
+import React.DOM.Props (Props, _data, _id, _type, aria, className, href, name, onClick, placeholder, role, src, style, tabIndex, target, title)
 import React.DOM.Props as RP
 import SearchForm as S
-import Thermite (PerformAction, Render, Spec, _render, defaultRender, focus, modifyState, simpleSpec, withState)
+import Thermite (PerformAction, Render, Spec, _render, cotransform, defaultRender, focus, modifyState, simpleSpec, withState)
 import UserPage as UP
-import AnnotationDocumentView as D
-import Gargantext.Data.Lang
-
 type E e = (dom :: DOM, ajax :: AJAX, console :: CONSOLE | e)
 
 type AppState =
@@ -37,6 +37,7 @@ type AppState =
   , searchState    :: S.State
   , userPage       :: UP.State
   , annotationdocumentView   :: D.State
+  , ntreeView   :: NT.State
   }
 
 initAppState :: AppState
@@ -49,6 +50,7 @@ initAppState =
   , searchState    : S.initialState
   , userPage       : UP.initialState
   , annotationdocumentView   : D.initialState
+  , ntreeView : NT.exampleTree
   }
 
 data Action
@@ -61,6 +63,7 @@ data Action
   | SearchA    S.Action
   | UserPageA  UP.Action
   | AnnotationDocumentViewA  D.Action
+  | TreeViewA  NT.Action
 
 
 performAction :: forall eff props. PerformAction ( dom :: DOM
@@ -69,10 +72,12 @@ performAction :: forall eff props. PerformAction ( dom :: DOM
 performAction (SetRoute route)  _ _ = void do
   modifyState $ _ {currentRoute = pure route}
 
-performAction _ _ _ = void do
+
+performAction _  _ _ = void do
   modifyState id
 
 
+
 ---- Lens and Prism
 _landingState :: Lens' AppState L.State
 _landingState = lens (\s -> s.landingState) (\s ss -> s{landingState = ss})
@@ -151,6 +156,16 @@ _annotationdocumentviewAction = prism AnnotationDocumentViewA \action ->
     _-> Left action
 
 
+_treeState :: Lens' AppState NT.State
+_treeState = lens (\s -> s.ntreeView) (\s ss -> s {ntreeView = ss})
+
+
+_treeAction :: Prism' Action NT.Action
+_treeAction = prism TreeViewA \action ->
+  case action of
+    TreeViewA caction -> Right caction
+    _-> Left action
+
 
 pagesComponent :: forall props eff. AppState -> Spec (E eff) AppState props Action
 pagesComponent s =
@@ -185,11 +200,9 @@ layout0 :: forall eff props. Spec (E eff) AppState props Action
 layout0 layout =
   fold
   [ layoutSidebar
---  TODO Add layoutTree
---, exampleTree'
-    , divSearchBar
+  , focus _treeState _treeAction NT.treeview
+  , divSearchBar
   , innerLayout $ layout
-
   , layoutFooter
   ]
   where
@@ -202,11 +215,11 @@ layout0 layout =
         ]
       ]
 --    TODO Add Tree to the template
---    exampleTree' ::  forall props eff. Spec (dom :: DOM |eff) AppState props Action
---    exampleTree' = simpleSpec performAction render
---      where
---        render :: Render AppState props Action
---        render dispatch _ state _ = DV.toHtml dispatch DV.exampleTree
+    -- exampleTree' ::  forall props eff. Spec (dom :: DOM |eff) AppState props Action
+    -- exampleTree' = simpleSpec performAction render
+    --  where
+    --    render :: Render AppState props Action
+    --    render dispatch _ state _ = [ toHtml dispatch exampleTree]
 
 
 layoutSidebar ::  forall props eff. Spec (dom :: DOM |eff) AppState props Action