[Table] split table header into normal and reneamble

src/Gargantext/Components/Nodes/Lists.purs

@@ -8,7 +8,6 @@ import Gargantext.Components.App.Data (Boxes)
 import Gargantext.Components.NgramsTable.Loader (clearCache)
 import Gargantext.Components.Node (NodePoly(..))
 import Gargantext.Components.Nodes.Corpus (loadCorpusWithChild)
-import Gargantext.Components.Nodes.Corpus.Types (getCorpusInfo, CorpusInfo(..), Hyperdata(..))
 import Gargantext.Components.Nodes.Lists.Tabs as Tabs
 import Gargantext.Components.Nodes.Lists.Types (CacheState(..))
 import Gargantext.Components.Table as Table
@@ -73,18 +72,17 @@ listsLayoutWithKeyCpt = here.component "listsLayoutWithKey" cpt where
               , path
               , loader: loadCorpusWithChild
               , render: \corpusData@{ corpusId, corpusNode: NodePoly poly } ->
-                          let { date, hyperdata : Hyperdata h, name } = poly
-                              CorpusInfo { authors, desc, query } = getCorpusInfo h.fields
+                          let { date, hyperdata } = poly
                           in
                             R.fragment [
-                              Table.tableHeaderLayout {
+                              Table.tableHeaderWithRenameLayout {
                                 cacheState
                               , date
-                              , desc
+                              , hyperdata
+                              , nodeId: corpusId
+                              , session
                               , key: "listsLayoutWithKey-header-" <> (show cacheState')
-                              , query
-                              , title: "Corpus " <> name
-                              , user: authors } []
+                                } []
                             , Tabs.tabs {
                                 activeTab
                               , boxes

src/Gargantext/Components/Nodes/Texts.purs

@@ -17,7 +17,7 @@ import Gargantext.Components.Node (NodePoly(..))
 import Gargantext.Components.Nodes.Corpus (loadCorpusWithChild)
 import Gargantext.Components.Nodes.Corpus.Chart.Histo (histo)
 import Gargantext.Components.Nodes.Corpus.Document as D
-import Gargantext.Components.Nodes.Corpus.Types (CorpusData, CorpusInfo(..), Hyperdata(..), getCorpusInfo)
+import Gargantext.Components.Nodes.Corpus.Types (CorpusData)
 import Gargantext.Components.Nodes.Lists.Types as LT
 import Gargantext.Components.Nodes.Texts.Types as TT
 import Gargantext.Components.Reload (textsReloadContext)
@@ -105,18 +105,16 @@ textsLayoutWithKeyCpt = here.component "textsLayoutWithKey" cpt
                 , loader: loadCorpusWithChild
                 , path: { nodeId, session }
                 , render: \corpusData@{ corpusId, corpusNode } -> do
-                    let NodePoly { date, hyperdata: Hyperdata h, name } = corpusNode
-                        CorpusInfo { authors, desc, query } = getCorpusInfo h.fields
-                        title = "Corpus " <> name
+                    let NodePoly { date, hyperdata } = corpusNode
 
                     R.fragment
-                      [ Table.tableHeaderLayout { cacheState
-                                                , date
-                                                , desc
-                                                , query
-                                                , title
-                                                , user: authors
-                                                , key: "textsLayoutWithKey-" <> (show cacheState') } []
+                      [ Table.tableHeaderWithRenameLayout { 
+                          cacheState
+                        , date
+                        , hyperdata
+                        , nodeId: corpusId
+                        , session
+                        , key: "textsLayoutWithKey-" <> (show cacheState') } []
                       , tabs { boxes
                              , cacheState
                              , corpusData

src/Gargantext/Components/Table.purs

@@ -7,10 +7,13 @@ import Data.Maybe (Maybe(..))
 import Data.Sequence as Seq
 import Effect (Effect)
 import Gargantext.Components.FolderView as FV
+import Gargantext.Components.Nodes.Corpus.Types (CorpusInfo(..), Hyperdata(..), getCorpusInfo)
 import Gargantext.Components.Nodes.Lists.Types as NT
 import Gargantext.Components.Renameable (renameable)
 import Gargantext.Components.Search (SearchType(..))
 import Gargantext.Components.Table.Types (ColumnName, OrderBy, OrderByDirection(..), Params, Props, TableContainerProps, columnName)
+import Gargantext.Sessions.Types (Session)
+import Gargantext.Types (NodeID)
 import Gargantext.Utils.Reactix (effectLink)
 import Gargantext.Utils.Reactix as R2
 import Reactix as R
@@ -51,13 +54,80 @@ type TableHeaderLayoutProps = (
   , user  :: String
   )
 
+type TableHeaderWithRenameLayoutProps = (
+    cacheState :: T.Box NT.CacheState
+  , session    :: Session
+  , hyperdata  :: Hyperdata
+  , nodeId     :: NodeID
+  , date       :: String
+  , key        :: String
+)
+
 initialParams :: Params
 initialParams = stateParams {page: 1, pageSize: PS10, orderBy: Nothing, searchType: SearchDoc}
 -- TODO: Not sure this is the right place for this
 
-onRenameDummy :: String -> Effect Unit
-onRenameDummy _ = do
-  pure unit
+tableHeaderWithRenameLayout :: R2.Component TableHeaderWithRenameLayoutProps
+tableHeaderWithRenameLayout = R.createElement tableHeaderWithRenameLayoutCpt
+
+tableHeaderWithRenameLayoutCpt :: R.Component TableHeaderWithRenameLayoutProps
+tableHeaderWithRenameLayoutCpt = here.component "tableHeaderWithRenameLayoutCpt" cpt
+  where
+    cpt { hyperdata: Hyperdata h, nodeId, session, cacheState, date } _ = do
+      cacheState' <- T.useLive T.unequal cacheState
+      let CorpusInfo { authors, desc, query, title} = getCorpusInfo h.fields
+
+      pure $ R.fragment
+        [ R2.row [FV.backButton {} []]
+        ,
+          R2.row
+          [ H.div {className: "col-md-3"} [ H.h3 {} [renameable {text: title, onRename: onRenameDummy} []] ]
+          , H.div {className: "col-md-9"}
+            [ H.hr {style: {height: "2px", backgroundColor: "black"}} ]
+          ]
+          , R2.row
+            [ H.div {className: "col-md-8 content"}
+              [ H.p {}
+                [ H.span {className: "fa fa-globe"} []
+                , renameable {text: " " <> desc, onRename: onRenameDummy} []
+                ]
+              , H.p {}
+                [ H.span {className: "fa fa-search-plus"} []
+                , renameable {text: " " <> query, onRename: onRenameDummy} []
+                ]
+              , H.p { className: "cache-toggle"
+                    , on: { click: cacheClick cacheState } }
+                [ H.span { className: "fa " <> (cacheToggle cacheState') } []
+                , H.text $ cacheText cacheState'
+                ]
+              ]
+            , H.div {className: "col-md-4 content"}
+              [ H.p {}
+                [ H.span {className: "fa fa-calendar"} []
+                , renameable {text: " " <> date, onRename: onRenameDummy} []
+                ]
+              , H.p {}
+                [ H.span {className: "fa fa-user"} []
+                , renameable {text: " " <> authors, onRename: onRenameDummy} []
+                ]
+              ]
+            ]
+          ]
+
+    cacheToggle NT.CacheOn = "fa-toggle-on"
+    cacheToggle NT.CacheOff = "fa-toggle-off"
+
+    cacheText NT.CacheOn = "Cache On"
+    cacheText NT.CacheOff = "Cache Off"
+
+    cacheClick cacheState _ = do
+      T.modify cacheStateToggle cacheState
+
+    cacheStateToggle NT.CacheOn = NT.CacheOff
+    cacheStateToggle NT.CacheOff = NT.CacheOn
+
+    onRenameDummy _ = do
+      pure unit
 
 tableHeaderLayout :: R2.Component TableHeaderLayoutProps
 tableHeaderLayout = R.createElement tableHeaderLayoutCpt
@@ -71,7 +141,7 @@ tableHeaderLayoutCpt = here.component "tableHeaderLayout" cpt
         [ R2.row [FV.backButton {} []]
         ,
           R2.row
-          [ H.div {className: "col-md-3"} [ H.h3 {} [renameable {text: title, onRename: onRenameDummy} []] ]
+          [ H.div {className: "col-md-3"} [ H.h3 {} [H.text title] ]
           , H.div {className: "col-md-9"}
             [ H.hr {style: {height: "2px", backgroundColor: "black"}} ]
           ]
@@ -79,11 +149,11 @@ tableHeaderLayoutCpt = here.component "tableHeaderLayout" cpt
             [ H.div {className: "col-md-8 content"}
               [ H.p {}
                 [ H.span {className: "fa fa-globe"} []
-                , renameable {text: " " <> desc, onRename: onRenameDummy} []
+                , H.text $ " " <> desc
                 ]
               , H.p {}
                 [ H.span {className: "fa fa-search-plus"} []
-                , renameable {text: " " <> query, onRename: onRenameDummy} []
+                , H.text $ " " <> query
                 ]
               , H.p { className: "cache-toggle"
                     , on: { click: cacheClick cacheState } }
@@ -94,11 +164,11 @@ tableHeaderLayoutCpt = here.component "tableHeaderLayout" cpt
             , H.div {className: "col-md-4 content"}
               [ H.p {}
                 [ H.span {className: "fa fa-calendar"} []
-                , renameable {text: " " <> date, onRename: onRenameDummy} []
+                , H.text $ " " <> date
                 ]
               , H.p {}
                 [ H.span {className: "fa fa-user"} []
-                , renameable {text: " " <> user, onRename: onRenameDummy} []
+                , H.text $ " " <> user
                 ]
               ]
             ]