[UI] more relastic POCK for meeting.

src/AddCorpusview.purs

@@ -92,7 +92,7 @@ addcorpusviewSpec = simpleSpec performAction render
     render :: Render State props Action
     render dispatch _ state _ =
       [
-        div [className "container"] [L.jumboTitle]
+        div [className "container"] [L.jumboTitle false]
       ,  div [className "container"]
         [
           div [className "jumbotron"]

src/Chart.purs

@@ -373,16 +373,20 @@ yAxisIndex = unsafeMkProps "yAxisIndex"
       -- , p''
       -- ]
 
-ex1 :: ReactElement
-ex1 = echarts
+histogram :: ReactElement
+histogram = echarts
      [ option
        [ tooltip [trigger "axis"]
        , grid [containLabel true]
-       , legend [data' ["Query A", "Query B", "Query C"]]
+       , legend [data' ["Map terms coverage", "Favorites", "All"]]
+       -- , legend [data' ["Map Terms coverage", "Favorites", "All"]]
        , xAxis
          [ type' "category"
          , axisTick [alignWithLabel true]
-         , data' ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "July", "Aug", "Sep", "Oct", "Nov", "Dec"]
+         , data' ["Jan" , "Feb", "Mar" , "Apr"
+                 , "May", "Jun", "July", "Aug"
+                 , "Sep", "Oct", "Nov" , "Dec"
+                 ]
          ]
        , dataZoom [dz1,dz1,dz2,dz2]
        , yAxis [ya1, ya2]
@@ -423,7 +427,7 @@ ya2 = unsafeFromPropsArray
       ]
 
 sd1 = unsafeFromPropsArray
-      [ name "Query A"
+      [ name "Map terms coverage"
       , type' "line"
       , label [normal[showp true, position "top"]]
       , lineStyle [ normal
@@ -436,7 +440,7 @@ sd1 = unsafeFromPropsArray
       ]
 
 sd2 = unsafeFromPropsArray
-      [ name "Query B"
+      [ name "Favorites"
       , type' "bar"
       , label [normal[showp true, position "top"]]
       , yAxisIndex 1
@@ -444,7 +448,7 @@ sd2 = unsafeFromPropsArray
       ]
 
 sd3 = unsafeFromPropsArray
-      [ name "Query C"
+      [ name "All"
       , type' "bar"
       , label [normal[showp true, position "top"]]
       , yAxisIndex 1

src/DocView.purs

@@ -2,7 +2,7 @@ module DocView where
 
 import Data.Argonaut
 
-import Chart (ex1, p'')
+import Chart (histogram, p'')
 import Control.Monad.Aff (Aff, attempt)
 import Control.Monad.Aff.Class (liftAff)
 import Control.Monad.Cont.Trans (lift)
@@ -26,8 +26,8 @@ import Partial.Unsafe (unsafePartial)
 import Prelude (class Eq, class Ord, class Show, Unit, bind, map, not, pure, show, void, ($), (*), (+), (-), (/), (<), (<$>), (<>), (==), (>), (>=), (>>=))
 import React (ReactElement)
 import React as R
-import React.DOM (a, b, b', br', div, h3, i, input, li, option, select, span, table, tbody, td, text, thead, tr, ul)
-import React.DOM.Props (Props, _type, className, href, onChange, onClick, selected, value)
+import React.DOM (a, b, b', br', div, h3, i, input, li, option, select, span, table, tbody, td, text, thead, th, tr, ul, nav)
+import React.DOM.Props (Props, _type, className, href, onChange, onClick, selected, value, scope, _id, role, _data, aria)
 import ReactDOM as RDOM
 import Thermite (PerformAction, Render, Spec, cotransform, createReactSpec, modifyState, simpleSpec)
 import Unsafe.Coerce (unsafeCoerce)
@@ -64,7 +64,7 @@ newtype Response = Response
 newtype Hyperdata = Hyperdata
   {
     title :: String
-  , abstract :: String
+  , source :: String
   }
 
 type State = CorpusTableData
@@ -79,8 +79,8 @@ instance decodeHyperdata :: DecodeJson Hyperdata where
   decodeJson json = do
     obj    <- decodeJson json
     title  <- obj .? "title"
-    abstract <- obj .? "abstract"
-    pure $ Hyperdata { title,abstract }
+    source <- obj .? "source"
+    pure $ Hyperdata { title,source }
 
 
 
@@ -119,48 +119,55 @@ spec = simpleSpec performAction render
     render :: Render State _ Action
     render dispatch _ state@(TableData d) _ =
       [ div [className "container"]
-        [
-          div [className "jumbotron"]
-          [
-            div [className "row"]
+        [ div [className "row"]
           [ div [className "col-md-3"]
             [ br' []
             , br' []
             ,  div [className "tree"] [toHtml dispatch d.tree]
             ]
           , div [className "col-md-9"]
+            [ nav []
+              [ div [className "nav nav-tabs", _id "nav-tab",role "tablist"]
                 [
-                br' []
+                  a [ className "nav-item nav-link active"
+                    , _id "nav-home-tab"
+                    , _data {toggle : "tab"}
+                    , href "#nav-home"
+                    , role "tab"
+                    , aria {controls : "nav-home"}
+                    , aria {selected:true}] [ text "Documents"]
+
+                , a [className "nav-item nav-link",_id "nav-profile-tab",  _data {toggle : "tab"},href "#nav-profile",role "tab",aria {controls : "nav-profile"},aria {selected:true}] [ text "Sources"]
+
+                ,a [className "nav-item nav-link",_id "nav-contact-tab",  _data {toggle : "tab"},href "#nav-contact",role "tab",aria {controls : "nav-contact"},aria {selected:true}] [ text "Authors"]
+                ,a [className "nav-item nav-link",_id "nav-contact-tab",  _data {toggle : "tab"},href "#nav-contact",role "tab",aria {controls : "nav-contact"},aria {selected:true}] [ text "Terms"]
+                ,a [className "nav-item nav-link",_id "nav-contact-tab",  _data {toggle : "tab"},href "#nav-contact",role "tab",aria {controls : "nav-contact"},aria {selected:true}] [ text "(+)"]
+
+                ]
+              ]
             , br' []
             , p''
             , h3 [] [text "Chart Title"]
-              , ex1
+            , histogram
             , p''
-
-
-              , div [] [b [] [text d.title]]
-              , div [] [ text "Search "
+            , br' []
+            , div [] [ b [] [text d.title]
+                     , text "    Filter "
                      , input [] []
-                       ]
                      , sizeDD d.pageSize dispatch
-              , br' []
-              , br' []
                      , textDescription d.currentPage d.pageSize d.totalRecords
-              , br' []
-              , br' []
                      , pagination dispatch d.totalPages d.currentPage
-              , br' []
-              , br' []
-              , table []
-                [thead [] [tr []
-                           [ td [] [ b' [text "Date"]]
-                           , td [] [ b' [text "Title"]]
-                           , td [] [ b' [text "Source"]]
-                           , td [] [ b' [text "Fav"]]
-                           , td [] [ b' [text "Delete"]]
-                           ]]
-                , tbody [] $ map showRow d.rows
                      ]
+            , table [ className "table"]
+              [thead  [ className "thead-dark"] 
+                         [tr [] [ th [scope "col"] [ b' [text "Date"]    ]
+                                , th [scope "col"] [ b' [text "Title"]   ]
+                                , th [scope "col"] [ b' [text "Source"]  ]
+                                , th [scope "col"] [ b' [text "Favorite"]]
+                                , th [scope "col"] [ b' [text "Delete"]  ]
+                                ]
+                         ]
+              , tbody [] $ map showRow d.rows
               ]
             ]
           ]
@@ -171,19 +178,13 @@ spec = simpleSpec performAction render
 ------------------------------------------------------------------------
 -- Realistic Tree for the UI
 
-urlFacetDoc :: String
-urlFacetDoc  = "http://localhost:8009/index.html#/docView"
-
 myCorpus :: Int -> String -> NTree (Tuple String String)
 myCorpus n name = NNode n false name
-    [ NLeaf (Tuple "Facets"    urlFacetDoc)
-    , NLeaf (Tuple "Graph"     urlFacetDoc)
-    , NLeaf (Tuple "Dashboard" urlFacetDoc)
+    [ NLeaf (Tuple "Facets"    "#/docView")
+    , NLeaf (Tuple "Graph"     "#/docView")
+    , NLeaf (Tuple "Dashboard" "#/userPage")
     ]
 
-urlFacetAuth :: String
-urlFacetAuth = urlFacetDoc
-
 exampleTree :: NTree (Tuple String String)
 exampleTree =
   NNode 1 true "My gargantext"
@@ -199,22 +200,26 @@ exampleTree =
 ------------------------------------------------------------------------
 -- TODO
 -- alignment to the right
-nodeOptionsCorp = [ i [className "fab fa-whmcs" ] []]
+nodeOptionsCorp activated = case activated of
+                         true  -> [ i [className "fab fa-whmcs" ] []]
+                         false -> []
 
 -- TODO
 -- alignment to the right
 -- on hover make other options available:
-nodeOptionsView = [ i [className "fas fa-sync-alt" ] []
+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
+      ] <> nodeOptionsView false
     )
   ]
 toHtml d (NNode id open name ary) =
@@ -222,7 +227,7 @@ toHtml d (NNode id open name ary) =
   [ li [] $
     ( [ a [onClick $ (\e-> d $ ToggleFolder id)] [i [fldr open] []]
       ,  text $ " " <> name <> "    "
-      ] <> nodeOptionsCorp <>
+      ] <> nodeOptionsCorp false <>
       if open then
         map (toHtml d) ary
         else []
@@ -249,7 +254,7 @@ performAction LoadData _ _ = void do
           , url    : ""
           , date   :  res.created
           , title  : (\(Hyperdata r) -> r.title) res.hyperdata
-          , source :  (\(Hyperdata r) -> r.abstract)res.hyperdata
+          , source : (\(Hyperdata r) -> r.source)res.hyperdata
           , fav    : res.favorite
          }
 
@@ -258,7 +263,11 @@ performAction (ToggleFolder i) _ _ = void (cotransform (\(TableData td) -> Table
 
 
 changePageSize :: PageSizes -> CorpusTableData -> CorpusTableData
-changePageSize ps (TableData td) = TableData $ td { pageSize = ps, totalPages = td.totalRecords / pageSizes2Int ps, currentPage = 1}
+changePageSize ps (TableData td) = 
+  TableData $ td { pageSize      = ps
+                 , totalPages    = td.totalRecords / pageSizes2Int ps
+                 , currentPage   = 1
+                 }
 
 
 data PageSizes = PS10 | PS20 | PS50 | PS100
@@ -332,7 +341,9 @@ pagination d tp cp
                else
                span []
                [ text " "
-               , a [href "javascript:void()", onClick (\e -> d $ ChangePage $ cp - 1)] [text "Previous"]
+               , a [ href "javascript:void()"
+                   , onClick (\e -> d $ ChangePage $ cp - 1)
+                   ] [text "Previous"]
                , text " "
                ]
       next = if cp == tp then
@@ -340,7 +351,9 @@ pagination d tp cp
                else
                span []
                [ text " "
-               , a [href "javascript:void()", onClick (\e -> d $ ChangePage $ cp + 1)] [text "Next"]
+               , a [ href "javascript:void()"
+                   , onClick (\e -> d $ ChangePage $ cp + 1)
+                   ] [text "Next"]
                , text " "
                ]
       first = if cp == 1 then
@@ -348,7 +361,9 @@ pagination d tp cp
                 else
                 span []
                 [ text " "
-                , a [href "javascript:void()", onClick (\e -> d $ ChangePage 1)] [text "1"]
+                , a [ href "javascript:void()"
+                    , onClick (\e -> d $ ChangePage 1)
+                    ] [text "1"]
                 , text " "
                 ]
       last = if cp == tp then
@@ -356,7 +371,9 @@ pagination d tp cp
              else
                span []
                [ text " "
-               , a [href "javascript:void()", onClick (\e -> d $ ChangePage tp)] [text $ show tp]
+               , a [ href "javascript:void()"
+                   , onClick (\e -> d $ ChangePage tp)
+                   ] [text $ show tp]
                , text " "
                ]
       ldots = if cp >= 5 then
@@ -374,7 +391,9 @@ fnmid :: _ -> Int -> ReactElement
 fnmid d i
   = span []
     [ text " "
-    , a [href "javascript:void()", onClick (\e -> d $ ChangePage i)] [text $ show i]
+    , a [ href "javascript:void()"
+        , onClick (\e -> d $ ChangePage i)
+        ] [text $ show i]
     , text " "
     ]
 
@@ -427,7 +446,7 @@ tdata = TableData
         , currentPage : 1
         , pageSize : PS10
         , totalRecords : 100
-        , title : "Publications by title"
+        , title : "Documents"
         , tree : exampleTree
         }
 
@@ -438,7 +457,7 @@ tdata' d = TableData
         , currentPage : 1
         , pageSize : PS10
         , totalRecords : 100
-        , title : "Publications by title"
+        , title : "Documents"
         , tree : exampleTree
         }
 
@@ -449,10 +468,13 @@ showRow {row : (Corpus c), delete} =
   [ td [] [text c.date]
   , td [] [text c.title]
   , td [] [text c.source]
-  , td [] [text $ show c.fav]
-  , td [] [ input [ _type "checkbox"] []]
+  , td [] [div [className $ fa <> "fa-star"][]]
+  , td [] [input [ _type "checkbox"] []]
   ]
-
+    where
+      fa = case c.fav of
+                true  -> "fas "
+                false -> "far "
 
 
 
@@ -477,3 +499,6 @@ loadData  = do
       --liftEff $ log $ "GET /api response: " <> show a.response
       let res = decodeJson a.response
       pure res
+
+
+

src/Landing.purs

@@ -50,12 +50,12 @@ performAction Login _ _ = void do
 performAction SignUp _ _ = void do
   T.modifyState \state -> state
 
-jumboTitle :: ReactElement
-jumboTitle = div [className "jumbotron"       ]
+jumboTitle :: Boolean -> ReactElement
+jumboTitle b = div jumbo
                    [ div [className "row"             ]
                      [ div [className "col-md-8 content"]
                        [ h1 [] [ text "Gargantext"]
-                       , p  [] [ text "Collaborative knowledge mapping experience" ]
+                       , p  [] [ text "search map share" ]
                        , p  [] [ a [ className "btn btn-success btn-lg spacing-class"
                                    , href "https://iscpif.fr/gargantext/your-first-map/"
                                    , target "blank"
@@ -64,7 +64,7 @@ jumboTitle = div [className "jumbotron"       ]
                                    [ span [ aria {hidden : true}
                                           , className "glyphicon glyphicon-hand-right" 
                                           ]  []
-                                   , text " Get's started"
+                                   , text " Documentation"
                                    ]
                                 ]
                        ]
@@ -78,6 +78,10 @@ jumboTitle = div [className "jumbotron"       ]
                        ]
                      ]
                    ]
+                  where
+                    jumbo = case b of
+                                 true  -> [className "jumbotron"       ]
+                                 false -> []
 
 
 imageEnter :: Props -> ReactElement
@@ -98,7 +102,7 @@ home = simpleSpec performAction render
   where
     render :: Render State props Action
     render dispatch _ state _ =
-      [ div [ className "container" ] [ jumboTitle                                ]
+      [ div [ className "container" ] [ jumboTitle true                            ]
       , div [ className "container" ] [ imageEnter (onClick \_ -> dispatch $ Enter)]
       , div [ className "container" ] [ blocksRandomText                          ]
       , div [ className "container" ] [ hr [] [], footerLegalInfo                 ]

src/Navigation.purs

@@ -14,8 +14,8 @@ 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)
-import React.DOM.Props (_data, _id, aria, className, href, role, src, style, tabIndex, target, title)
+import React.DOM (a, div, img, li, span, text, ul, input)
+import React.DOM.Props (_data, _id, aria, className, href, name, placeholder, _type, role, src, style, tabIndex, target, title)
 import Thermite (PerformAction, Render, Spec, _render, defaultRender, focus, modifyState, simpleSpec, withState)
 import DocView as DV
 import SearchForm as S
@@ -280,6 +280,13 @@ sidebarnavSpec = simpleSpec performAction render
                  ]
                ]
 ---------------------------------------------------------------------------
+-- TODO put the search form in the center of the navBar
+--             , ul [ className "nav navbar-nav"] 
+--                    [ input [ className "form-control"
+--                            , placeholder "Query, URL or FILE (optimized experience with Firefox or Chromium browsers)"
+--                            , _type "text"
+--                            ] []
+--                    ]
              , divDropdownRight
             ]
           ]

src/SearchForm.purs

@@ -56,7 +56,7 @@ searchSpec = simpleSpec performAction render
   where
     render :: Render State props Action
     render dispatch _ state _ =
-      [ div [className "container"] [L.jumboTitle]
+      [ div [className "container"] [L.jumboTitle false]
       , div [className "container"]
        [ div [className "jumbotron" ]
          [ div [className "row"       ]

src/UserPage.purs

@@ -8,6 +8,7 @@ import React.DOM (a, div, h3, h5, h6, img, li, nav, small, span, table, tbody, t
 import React.DOM.Props (_data, _id, aria, className, href, role, scope, src)
 import Thermite (PerformAction, Render, Spec, modifyState, simpleSpec)
 
+import DocView as DV
 
 type State = String
 
@@ -31,10 +32,11 @@ userPageSpec = simpleSpec performAction render
   where
     render :: Render State props Action
     render dispatch _ state _ =
-      [ div [className "container-fluid"]
+      [ -- TODO: div [className "tree"] [DV.toHtml dispatch d.tree]
+        div [className "container-fluid"]
         [ div [className "row", _id "user-page-header"]
           [ div [className "col-md-2"]
-            [ h3 [] [text "UserName"]
+            [ h3 [] [text "User Name"]
             ]
           , div [className "col-md-8"] []
           , div [className "col-md-2"]
@@ -54,26 +56,21 @@ userPageSpec = simpleSpec performAction render
                   ul [className "list-group"]
                   [
                     li [className "list-group-item justify-content-between"]
-                    [  span [] [text "fonction"]
-                    , span [className "badge badge-default badge-pill"] [text "Ensignent checheur"]
+                    [  span [] [text "Fonction"]
+                    , span [className "badge badge-default badge-pill"] [text "Enseignant chercheur"]
                     ]
                   , li [className "list-group-item justify-content-between"]
-                    [  span [] [text "Entitte, service"]
-                    , span [className "badge badge-default badge-pill"] [text "Mines Saint - Etinene SPIN -PTSI"]
+                    [  span [] [text "Entité, service"]
+                    , span [className "badge badge-default badge-pill"] [text "Mines Saint-Etienne SPIN -PTSI"]
                     ]
 
                   , li [className "list-group-item justify-content-between"]
-                    [  span [] [text "Telephone"]
-                    , span [className "badge badge-default badge-pill"] [text "04 77 42 0070"]
+                    [  span [] [text "Téléphone"]
+                    , span [className "badge badge-default badge-pill"] [text "(+33) 04 77 42 0070"]
                     ]
                    , li [className "list-group-item justify-content-between"]
-                    [  span [] [text "Telephone"]
-                    , span [className "badge badge-default badge-pill"] [text "04 77 42 0070"]
-                    ]
-
-                   , li [className "list-group-item justify-content-between"]
-                    [  span [] [text "courriel"]
-                    , span [className "badge badge-default badge-pill"] [text "veronica@mines-stsi.fr"]
+                    [  span [] [text "Courriel"]
+                    , span [className "badge badge-default badge-pill"] [text "gargantua@rabelais.fr"]
                     ]
                    , li [className "list-group-item justify-content-between"]
                     [  span [] [text "Bureau"]
@@ -81,11 +78,11 @@ userPageSpec = simpleSpec performAction render
                     ]
                    , li [className "list-group-item justify-content-between"]
                     [  span [] [text "Apellation"]
-                    , span [className "badge badge-default badge-pill"] [text "Maitre de reherche (EPA)"]
+                    , span [className "badge badge-default badge-pill"] [text "Maître de conférences (EPA)"]
                     ]
                    , li [className "list-group-item justify-content-between"]
                     [  span [] [text "Lieu"]
-                    , span [className "badge badge-default badge-pill"] [text "Saint -Etienne, 158 Cours Fauriel"]
+                    , span [className "badge badge-default badge-pill"] [text "Saint-Etienne, 158 Cours Fauriel"]
                     ]
 
                   ]
@@ -95,62 +92,74 @@ userPageSpec = simpleSpec performAction render
           ]
         , div [className "row",_id "user-page-footer"]
           [ div [className "col-md-12"]
-            [ nav []
-              [ div [className "nav nav-tabs", _id "nav-tab",role "tablist"]
-                [
-                  a [className "nav-item nav-link active",_id "nav-home-tab",  _data {toggle : "tab"},href "#nav-home",role "tab",aria {controls : "nav-home"},aria {selected:true}] [ text "Publications (12)"]
-
-                , a [className "nav-item nav-link",_id "nav-profile-tab",  _data {toggle : "tab"},href "#nav-profile",role "tab",aria {controls : "nav-profile"},aria {selected:true}] [ text "Brevets (2)"]
+            facets          
+            ]
+        ]
+      ]
 
-                ,a [className "nav-item nav-link",_id "nav-contact-tab",  _data {toggle : "tab"},href "#nav-contact",role "tab",aria {controls : "nav-contact"},aria {selected:true}] [ text "Projets IMT (5)"]
 
+facets = [ nav []
+              [ div [className "nav nav-tabs", _id "nav-tab",role "tablist"]
+                [ a [className "nav-item nav-link active",_id "nav-home-tab"   ,  _data {toggle : "tab"},href "#nav-home"   ,role "tab",aria {controls : "nav-home"}   ,aria {selected:true}] [ text "Publications (12)"]
+                , a [className "nav-item nav-link"       ,_id "nav-profile-tab",  _data {toggle : "tab"},href "#nav-profile",role "tab",aria {controls : "nav-profile"},aria {selected:true}] [ text "Brevets (2)"]
+                , a [className "nav-item nav-link"       ,_id "nav-contact-tab",  _data {toggle : "tab"},href "#nav-contact",role "tab",aria {controls : "nav-contact"},aria {selected:true}] [ text "Projets (5)"]
+                , a [className "nav-item nav-link"       ,_id "nav-contact-tab",  _data {toggle : "tab"},href "#nav-contact",role "tab",aria {controls : "nav-contact"},aria {selected:true}] [ text "All (19)"]
                 ]
               ]
             , div [className "tab-content" , _id "nav-tabContent"]
               [
-                div [className "tab-pane fade show active", role "tabpanel", aria {labelledby : "nav-home-tab"}, _id "nav-home"]
-                [
-                  table [ className "table"]
-                  [ thead [ className "thead-dark"]
-                    [ tr []
-                      [
-                        th [ scope "col"]
-                        [ text "Date"
+                div [ className "tab-pane fade show active"
+                    , role "tabpanel"
+                    , aria {labelledby : "nav-home-tab"}
+                    , _id "nav-home"
                     ]
-                      , th [scope "col"]
-                        [ text "Description"
-                        ]
-                      , th [ scope "col"]
-                        [ text "Projects"]
-                      , th [ scope "col"]
-                        [ text " Favorite"]
-
-                      , th [scope "col"]
-                        [text "Delete"]
+                      [ facetExample ]
               
+              , div [ className "tab-pane fade show"
+                    , role "tabpanel"
+                    , aria {labelledby : "nav-profile-tab"}
+                    , _id "nav-profile"
                     ]
+                      [ ]
+              , div [ className "tab-pane fade show"
+                    , role "tabpanel"
+                    , aria {labelledby : "nav-contact-tab"}
+                    , _id "nav-contact"
                     ]
-                  , tbody []
-                    [ tr []
-                      [ td [] [ text "2012/03/06"]
-                      , td [] [ text "use of acoustic mission"]
-                      , td [] [ text "use of acoustic emission"]
-                      , td [] [ text "use of acoustic emission"]
-                      , td [] [ text "use of acoustic emission"]
+                      [ ]
               ]
             ]
+
+facetExample = table [ className "table"]
+                  [ thead [ className "thead-dark"]
+                    [ tr []
+                      [ th [ scope "col"] [ text "Date"        ]
+                      , th [ scope "col"] [ text "Description" ]
+                      , th [ scope "col"] [ text "Projects"    ]
+                      , th [ scope "col"] [ text "Favorite"    ]
+                      , th [ scope "col"] [ text "Delete"      ]
                       ]
                     ]
-              , div [className "tab-pane fade show", role "tabpanel", aria {labelledby : "nav-profile-tab"}, _id "nav-profile"]
-                [
-                  h3 [] [text "hello1"]
-                ]
-              , div [className "tab-pane fade show", role "tabpanel", aria {labelledby : "nav-contact-tab"}, _id "nav-contact"]
-                [
-                  h3 [] [text "hello2"]
-                ]
+                  , tbody []
+                    [ tr [] [ td [] [ text "2012/03/06"]
+                            , td [] [ text "Big data and text mining"]
+                            , td [] [ text "European funds"]
+                            , td [] [ text "True"]
+                            , td [] [ text "False"]
                             ]
+                    , tr [] [ td [] [ text "2013/03/06"]
+                            , td [] [ text "Cryptography"]
+                            , td [] [ text "French funds"]
+                            , td [] [ text "True"]
+                            , td [] [ text "False"]
                             ]
+                    , tr [] [ td [] [ text "2013/03/06"]
+                            , td [] [ text "Artificial Intelligence"]
+                            , td [] [ text "Not found"]
+                            , td [] [ text "True"]
+                            , td [] [ text "False"]
                             ]
                     ]
                   ]
+
+