began plugin of dashboard + refactor for appList and workspaceContentList

frontend/package.json

@@ -32,6 +32,7 @@
     "js-cookie": "^2.2.0",
     "prop-types": "^15.6.0",
     "query-string": "^6.1.0",
+    "radium": "^0.24.1",
     "react": "^16.0.0",
     "react-animate-height": "^0.10.10",
     "react-dom": "^16.0.0",

frontend/src/action-creator.async.js

@@ -11,6 +11,8 @@ import {
   setUserRole,
   WORKSPACE,
   WORKSPACE_LIST,
+  WORKSPACE_DETAIL,
+  WORKSPACE_MEMBER_LIST,
   FOLDER,
   setFolderData,
   APP_LIST,
@@ -57,8 +59,20 @@ const fetchWrapper = async ({url, param, actionName, dispatch, debug = false}) =
   })()
   if (debug) console.log(`fetch ${param.method}/${actionName} result: `, fetchResult)
 
-  if ([200, 204, 304].includes(fetchResult.status)) dispatch({type: `${param.method}/${actionName}/SUCCESS`, data: fetchResult.json})
-  else if ([400, 404, 500].includes(fetchResult.status)) dispatch({type: `${param.method}/${actionName}/FAILED`, data: fetchResult.json})
+  // if ([200, 204, 304].includes(fetchResult.status)) dispatch({type: `${param.method}/${actionName}/SUCCESS`, data: fetchResult.json})
+  // else if ([400, 404, 500].includes(fetchResult.status)) dispatch({type: `${param.method}/${actionName}/FAILED`, data: fetchResult.json})
+  switch (fetchResult.status) {
+    case 200:
+    case 204:
+    case 304:
+      dispatch({type: `${param.method}/${actionName}/SUCCESS`, data: fetchResult.json})
+      break
+    case 400:
+    case 404:
+    case 500:
+      dispatch({type: `${param.method}/${actionName}/FAILED`, data: fetchResult.json})
+      break
+  }
 
   return fetchResult
 }
@@ -161,9 +175,9 @@ export const getWorkspaceList = user => dispatch => {
   })
 }
 
-export const getWorkspaceContentList = (user, idWorkspace, idParent) => dispatch => {
+export const getWorkspaceDetail = (user, idWorkspace) => dispatch => {
   return fetchWrapper({
-    url: `${FETCH_CONFIG.apiUrl}/workspaces/${idWorkspace}/contents?parent_id=${idParent}`,
+    url: `${FETCH_CONFIG.apiUrl}/workspaces/${idWorkspace}`,
     param: {
       headers: {
         ...FETCH_CONFIG.headers,
@@ -171,16 +185,34 @@ export const getWorkspaceContentList = (user, idWorkspace, idParent) => dispatch
       },
       method: 'GET'
     },
-    actionName: WORKSPACE,
+    actionName: WORKSPACE_DETAIL,
     dispatch
   })
 }
 
-export const getWorkspaceContent = (idWorkspace, idContent) => dispatch => {
+export const getWorkspaceMemberList = (user, idWorkspace) => dispatch => {
   return fetchWrapper({
-    url: `${FETCH_CONFIG.apiUrl}/workspaces/${idWorkspace}/contents/${idContent}`,
+    url: `${FETCH_CONFIG.apiUrl}/workspaces/${idWorkspace}/members`,
     param: {
-      headers: {...FETCH_CONFIG.headers},
+      headers: {
+        ...FETCH_CONFIG.headers,
+        'Authorization': 'Basic ' + user.auth
+      },
+      method: 'GET'
+    },
+    actionName: WORKSPACE_MEMBER_LIST,
+    dispatch
+  })
+}
+
+export const getWorkspaceContentList = (user, idWorkspace, idParent) => dispatch => {
+  return fetchWrapper({
+    url: `${FETCH_CONFIG.apiUrl}/workspaces/${idWorkspace}/contents?parent_id=${idParent}`,
+    param: {
+      headers: {
+        ...FETCH_CONFIG.headers,
+        'Authorization': 'Basic ' + user.auth
+      },
       method: 'GET'
     },
     actionName: WORKSPACE,

frontend/src/action-creator.sync.js

@@ -15,13 +15,13 @@ export const addFlashMessage = msg => ({ type: `${ADD}/${FLASH_MESSAGE}`, msg })
 export const removeFlashMessage = msg => ({ type: `${REMOVE}/${FLASH_MESSAGE}`, msg })
 
 export const USER = 'User'
-export const USER_LOGIN = 'User/Login'
-export const USER_LOGOUT = 'User/Logout'
-export const USER_DATA = 'User/Data'
-export const USER_ROLE = 'User/Role'
-export const USER_CONNECTED = 'User/Connected'
-export const USER_DISCONNECTED = 'User/Disconnected'
-export const USER_LANG = 'User/Lang'
+export const USER_LOGIN = `${USER}/Login`
+export const USER_LOGOUT = `${USER}/Logout`
+export const USER_DATA = `${USER}/Data`
+export const USER_ROLE = `${USER}/Role`
+export const USER_CONNECTED = `${USER}/Connected`
+export const USER_DISCONNECTED = `${USER}/Disconnected`
+export const USER_LANG = `${USER}/Lang`
 export const setUserConnected = user => ({ type: `${SET}/${USER}/Connected`, user })
 export const setUserDisconnected = () => ({ type: `${SET}/${USER}/Disconnected` })
 export const updateUserData = userData => ({ type: `${UPDATE}/${USER}/Data`, data: userData })
@@ -31,20 +31,30 @@ export const updateUserWorkspaceSubscriptionNotif = (workspaceId, subscriptionNo
   ({ type: `${UPDATE}/${USER_ROLE}/SubscriptionNotif`, workspaceId, subscriptionNotif })
 
 export const WORKSPACE = 'Workspace'
-export const setWorkspaceContent = (workspaceContent, filterStr = '') => ({ type: `${SET}/${WORKSPACE}/Content`, workspaceContent, filterStr })
+export const WORKSPACE_CONTENT = `${WORKSPACE}/Content`
+export const setWorkspaceContentList = (workspaceContentList, filterStr = '') => ({ type: `${SET}/${WORKSPACE_CONTENT}`, workspaceContentList, filterStr })
 export const updateWorkspaceFilter = filterList => ({ type: `${UPDATE}/${WORKSPACE}/Filter`, filterList })
 
-export const FOLDER = 'Folder'
-export const setFolderData = (folderId, content) => ({ type: `${SET}/${WORKSPACE}/${FOLDER}/Content`, folderId, content })
-
-export const WORKSPACE_LIST = 'WorkspaceList'
+export const WORKSPACE_LIST = `${WORKSPACE}/List`
 export const updateWorkspaceListData = workspaceList => ({ type: `${UPDATE}/${WORKSPACE_LIST}`, workspaceList })
 export const setWorkspaceListIsOpenInSidebar = (workspaceId, isOpenInSidebar) => ({ type: `${SET}/${WORKSPACE_LIST}/isOpenInSidebar`, workspaceId, isOpenInSidebar })
 
-export const APP_LIST = 'App/List'
+export const WORKSPACE_DETAIL = `${WORKSPACE}/Detail`
+export const setWorkspaceDetail = workspaceDetail => ({ type: `${SET}/${WORKSPACE_DETAIL}`, workspaceDetail })
+
+export const WORKSPACE_MEMBER = `${WORKSPACE}/Member`
+export const WORKSPACE_MEMBER_LIST = `${WORKSPACE_MEMBER}/List`
+export const setWorkspaceMemberList = workspaceMemberList => ({ type: `${SET}/${WORKSPACE_MEMBER_LIST}`, workspaceMemberList })
+
+export const FOLDER = 'Folder'
+export const setFolderData = (folderId, content) => ({ type: `${SET}/${WORKSPACE}/${FOLDER}/Content`, folderId, content })
+
+export const APP = 'App'
+export const APP_LIST = `${APP}/List`
 export const setAppList = appList => ({ type: `${SET}/${APP_LIST}`, appList })
 
-export const CONTENT_TYPE_LIST = 'ContentType/List'
+export const CONTENT_TYPE = 'ContentType'
+export const CONTENT_TYPE_LIST = `${CONTENT_TYPE}/List`
 export const setContentTypeList = contentTypeList => ({ type: `${SET}/${CONTENT_TYPE_LIST}`, contentTypeList })
 
 export const LANG = 'Lang'

frontend/src/component/Workspace/ContentItem.jsx

@@ -4,6 +4,8 @@ import classnames from 'classnames'
 import BtnExtandedAction from './BtnExtandedAction.jsx'
 
 const ContentItem = props => {
+  if (props.contentType === null) return null // this means the endpoint system/content_type hasn't responded yet
+
   const status = props.contentType.availableStatuses.find(s => s.slug === props.statusSlug)
   return (
     <div className={classnames('content', 'align-items-center', {'item-last': props.isLast}, props.customClass)} onClick={props.onClickItem}>

frontend/src/component/Workspace/OpenContentApp.jsx

@@ -6,11 +6,11 @@ import appFactory from '../../appFactory.js'
 // @FIXME Côme - 2018/07/31 - should this be in a component like AppFeatureManager ?
 export class OpenContentApp extends React.Component {
   openContentApp = () => {
-    const { idWorkspace, appOpenedType, user, workspaceContent, contentType, renderAppFeature, dispatchCustomEvent, match } = this.props
+    const { idWorkspace, appOpenedType, user, workspaceContentList, contentType, renderAppFeature, dispatchCustomEvent, match } = this.props
 
     if (isNaN(idWorkspace) || idWorkspace === -1) return
 
-    if (['type', 'idcts'].every(p => p in match.params) && match.params.type !== 'contents' && workspaceContent.length) {
+    if (['type', 'idcts'].every(p => p in match.params) && match.params.type !== 'contents' && workspaceContentList.length) {
       if (isNaN(match.params.idcts) || !contentType.map(c => c.slug).includes(match.params.type)) return
 
       const contentToOpen = {
@@ -57,5 +57,5 @@ export class OpenContentApp extends React.Component {
   }
 }
 
-const mapStateToProps = ({ user, workspaceContent, contentType }) => ({ user, workspaceContent, contentType })
+const mapStateToProps = ({ user, workspaceContentList, contentType }) => ({ user, workspaceContentList, contentType })
 export default withRouter(connect(mapStateToProps)(appFactory(OpenContentApp)))

frontend/src/component/Workspace/OpenCreateContentApp.jsx

@@ -39,5 +39,5 @@ export class OpenCreateContentApp extends React.Component {
   }
 }
 
-const mapStateToProps = ({ user, workspaceContent, contentType }) => ({ user, workspaceContent, contentType })
+const mapStateToProps = ({ user, contentType }) => ({ user, contentType })
 export default withRouter(connect(mapStateToProps)(appFactory(OpenCreateContentApp)))

frontend/src/container/AppFullscreenManager.jsx

@@ -17,7 +17,7 @@ class AppFullscreenManager extends React.Component {
   componentDidMount = () => this.setState({AmIMounted: true})
 
   render () {
-    const { user, renderAppFullscreen } = this.props
+    const { props } = this
 
     return (
       <div className='sidebarpagecontainer'>
@@ -28,12 +28,12 @@ class AppFullscreenManager extends React.Component {
         {this.state.AmIMounted && (// we must wait for the component to be fully mounted to be sure the div#appFullscreenContainer exists in DOM
           <div className='emptyDiForRoute'>
             <Route path={PAGE.ADMIN.WORKSPACE} render={() => {
-              renderAppFullscreen({slug: 'admin_workspace_user', hexcolor: '#7d4e24', type: 'workspace'}, user, {})
+              props.renderAppFullscreen({slug: 'admin_workspace_user', hexcolor: '#7d4e24', type: 'workspace'}, props.user, {})
               return null
             }} />
 
             <Route path={PAGE.ADMIN.USER} render={() => {
-              renderAppFullscreen({slug: 'admin_workspace_user', hexcolor: '#7d4e24', type: 'user'}, user, {})
+              props.renderAppFullscreen({slug: 'admin_workspace_user', hexcolor: '#7d4e24', type: 'user'}, props.user, {})
               return null
             }} />
           </div>

frontend/src/container/Dashboard.jsx

@@ -2,15 +2,23 @@ import React from 'react'
 import { connect } from 'react-redux'
 import Sidebar from './Sidebar.jsx'
 import imgProfil from '../img/imgProfil.png'
+import { translate } from 'react-i18next'
+import Radium from 'radium'
+import color from 'color'
+import {
+  PageWrapper,
+  PageTitle,
+  PageContent
+} from 'tracim_frontend_lib'
 import {
-  getAppList,
-  getContentTypeList, getWorkspaceList
+  getWorkspaceDetail,
+  getWorkspaceMemberList
 } from '../action-creator.async.js'
 import {
-  setAppList,
-  setContentTypeList, setWorkspaceListIsOpenInSidebar, updateWorkspaceListData
+  addFlashMessage,
+  setWorkspaceDetail,
+  setWorkspaceMemberList
 } from '../action-creator.sync.js'
-import { translate } from 'react-i18next'
 
 class Dashboard extends React.Component {
   constructor (props) {
@@ -25,28 +33,28 @@ class Dashboard extends React.Component {
   }
 
   async componentDidMount () {
-    const { workspaceIdInUrl } = this.state
-    const { user, workspaceList, app, contentType, dispatch } = this.props
-
-    console.log('<Dashboard> componentDidMount')
-
-    if (app.length === 0) {
-      const fetchGetAppList = await dispatch(getAppList(user))
-      if (fetchGetAppList.status === 200) dispatch(setAppList(fetchGetAppList.json))
-    }
-
-    if (contentType.length === 0) {
-      const fetchGetContentTypeList = await dispatch(getContentTypeList(user))
-      if (fetchGetContentTypeList.status === 200) dispatch(setContentTypeList(fetchGetContentTypeList.json))
+    const { props, state } = this
+
+    const fetchWorkspaceDetail = await props.dispatch(getWorkspaceDetail(props.user, state.workspaceIdInUrl))
+    switch (fetchWorkspaceDetail.status) {
+      case 200:
+        props.dispatch(setWorkspaceDetail(fetchWorkspaceDetail.json))
+        break
+      case 400:
+      case 500:
+        props.dispatch(addFlashMessage(props.t('An error has happened'), 'warning'))
+        break
     }
 
-    if (user.user_id !== -1 && workspaceList.length === 0) {
-      const fetchGetWorkspaceList = await dispatch(getWorkspaceList(user))
-
-      if (fetchGetWorkspaceList.status === 200) {
-        dispatch(updateWorkspaceListData(fetchGetWorkspaceList.json))
-        dispatch(setWorkspaceListIsOpenInSidebar(workspaceIdInUrl || fetchGetWorkspaceList.json[0].workspace_id, true))
-      }
+    const fetchWorkspaceMemberList = await props.dispatch(getWorkspaceMemberList(props.user, state.workspaceIdInUrl))
+    switch (fetchWorkspaceMemberList.status) {
+      case 200:
+        props.dispatch(setWorkspaceMemberList(fetchWorkspaceMemberList.json))
+        break
+      case 400:
+      case 500:
+        props.dispatch(addFlashMessage(props.t('An error has happened'), 'warning'))
+        break
     }
   }
 
@@ -67,152 +75,118 @@ class Dashboard extends React.Component {
   }))
 
   render () {
+    const { props, state } = this
+
     return (
       <div className='sidebarpagecontainer'>
         <Sidebar />
 
-        <div className='dashboard'>
-          <div className='container-fluid nopadding'>
-            <div className='dashboard__header mb-5'>
-              <div className='pageTitleGeneric dashboard__header__title d-flex align-items-center'>
-                <div className='pageTitleGeneric__title dashboard__header__title__text mr-3'>
-                  {this.props.t('Dashboard')}
-                </div>
-                <div className='dashboard__header__acces' />
-              </div>
-              <div className='dashboard__header__advancedmode mr-3'>
-                <button type='button' className='btn btn-primary'>
-                  {this.props.t('Active advanced Dashboard')}
-                </button>
-              </div>
+        <PageWrapper customeClass='dashboard'>
+          <PageTitle
+            parentClass='dashboard__header'
+            title={props.t('Dashboard')}
+            subtitle={''}
+          >
+            <div className='dashboard__header__advancedmode mr-3'>
+              <button type='button' className='btn btn-primary'>
+                {props.t('Active advanced Dashboard')}
+              </button>
             </div>
+          </PageTitle>
 
-            <div className='dashboard__wkswrapper'>
+          <PageContent>
+            <div className='dashboard__workspace-wrapper'>
               <div className='dashboard__workspace'>
                 <div className='dashboard__workspace__title'>
-                  Développement tracim
+                  {props.curWs.label}
                 </div>
 
                 <div className='dashboard__workspace__detail'>
-                  Ligne directive pour le prochain design de Tracim et des futurs fonctionnalités.
+                  {props.curWs.description}
                 </div>
               </div>
-              <div className='dashboard__userstatut'>
 
+              <div className='dashboard__userstatut'>
                 <div className='dashboard__userstatut__role'>
-                  <div className='dashboard__userstatut__role__text'>
-                    Hi ! Alexi, vous êtes actuellement
+                  <div className='dashboard__userstatut__role__msg'>
+                    {props.t(`Hi ! ${props.user.public_name}, vous êtes actuellement`)}
                   </div>
-                  <div className='dashboard__userstatut__role__rank'>
-                    <div className='dashboard__userstatut__role__rank__icon'>
+
+                  <div className='dashboard__userstatut__role__definition'>
+                    <div className='dashboard__userstatut__role__definition__icon'>
                       <i className='fa fa-graduation-cap' />
                     </div>
-                    <div className='dashboard__userstatut__role__rank__rolename'>
-                      Gestionnaire de projet
+
+                    <div className='dashboard__userstatut__role__definition__text'>
+                      {(member => member ? member.role : '')(props.curWs.member.find(m => m.id === props.user.user_id))}
                     </div>
                   </div>
                 </div>
 
                 <div className='dashboard__userstatut__notification'>
                   <div className='dashboard__userstatut__notification__text'>
-                    Vous êtes abonné(e) aux notifications de ce workspace
+                    {props.t("You have subscribed to this workspace's notifications")} (nyi)
                   </div>
-                  {this.state.displayNotifBtn === false &&
-                    <div
-                      className='dashboard__userstatut__notification__btn btn btn-outline-primary'
-                      onClick={this.handleToggleNotifBtn}
-                    >
-                      {this.props.t('Change your status')}
-                    </div>
-                  }
 
-                  {this.state.displayNotifBtn === true &&
-                    <div className='dashboard__userstatut__notification__subscribe dropdown'>
-                      <button className='dashboard__userstatut__notification__subscribe__btn btn btn-outline-primary dropdown-toggle' type='button' id='dropdownMenuButton' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>
-                        Abonné(e)
-                      </button>
-                      <div className='dashboard__userstatut__notification__subscribe__submenu dropdown-menu'>
-                        <div className='dashboard__userstatut__notification__subscribe__submenu__item dropdown-item'>
-                          {this.props.t('subscriber')}
-                        </div>
-                        <div className='dashboard__userstatut__notification__subscribe__submenu__item dropdown-item dropdown-item'>
-                          {this.props.t('unsubscribed')}
+                  {state.displayNotifBtn
+                    ? (
+                      <div className='dashboard__userstatut__notification__subscribe dropdown'>
+                        <button
+                          className='dashboard__userstatut__notification__subscribe__btn btn btn-outline-primary dropdown-toggle'
+                          type='button'
+                          id='dropdownMenuButton'
+                          data-toggle='dropdown'
+                          aria-haspopup='true'
+                          aria-expanded='false'
+                        >
+                          Abonné(e)
+                        </button>
+
+                        <div className='dashboard__userstatut__notification__subscribe__submenu dropdown-menu'>
+                          <div className='dashboard__userstatut__notification__subscribe__submenu__item dropdown-item'>
+                            {props.t('subscriber')}
+                          </div>
+                          <div className='dashboard__userstatut__notification__subscribe__submenu__item dropdown-item dropdown-item'>
+                            {props.t('unsubscribed')}
+                          </div>
                         </div>
                       </div>
-                    </div>
+                    )
+                    : (
+                      <div
+                        className='dashboard__userstatut__notification__btn btn btn-outline-primary'
+                        onClick={this.handleToggleNotifBtn}
+                      >
+                        {props.t('Change your status')}
+                      </div>
+                    )
                   }
                 </div>
               </div>
             </div>
 
             <div className='dashboard__calltoaction justify-content-xl-center'>
-              <div className='dashboard__calltoaction__button btnaction btnthread'>
-                <div className='dashboard__calltoaction__button__text'>
-                  <div className='dashboard__calltoaction__button__text__icon'>
-                    <i className='fa fa-comments-o' />
-                  </div>
-                  <div className='dashboard__calltoaction__button__text__title'>
-                    {this.props.t('Start a new Thread')}
-                  </div>
-                </div>
-              </div>
-
-              <div className='dashboard__calltoaction__button btnaction writefile'>
-                <div className='dashboard__calltoaction__button__text'>
-                  <div className='dashboard__calltoaction__button__text__icon'>
-                    <i className='fa fa-file-text-o' />
-                  </div>
-                  <div className='dashboard__calltoaction__button__text__title'>
-                    {this.props.t('Writing a document')}
-                  </div>
-                </div>
-              </div>
-
-              <div className='dashboard__calltoaction__button btnaction importfile'>
-                <div className='dashboard__calltoaction__button__text'>
-                  <div className='dashboard__calltoaction__button__text__icon'>
-                    <i className='fa fa-paperclip' />
-                  </div>
-                  <div className='dashboard__calltoaction__button__text__title'>
-                    {this.props.t('Upload a file')}
-                  </div>
-                </div>
-              </div>
-
-              {/*
-                <div className='dashboard__calltoaction__button btnaction visioconf'>
-                  <div className='dashboard__calltoaction__button__text'>
-                    <div className='dashboard__calltoaction__button__text__icon'>
-                      <i className='fa fa-video-camera' />
-                    </div>
-                    <div className='dashboard__calltoaction__button__text__title'>
-                      {this.props.t('Start a videoconference')}
-                    </div>
-                  </div>
-                </div>
-
-                <div className='dashboard__calltoaction__button btnaction calendar'>
+              {props.contentType.map(ct =>
+                <div
+                  className='dashboard__calltoaction__button btnaction'
+                  style={{
+                    backgroundColor: ct.hexcolor,
+                    ':hover': {
+                      backgroundColor: color(ct.hexcolor).darken(0.15).hexString()
+                    }
+                  }}
+                  key={ct.label}
+                >
                   <div className='dashboard__calltoaction__button__text'>
                     <div className='dashboard__calltoaction__button__text__icon'>
-                      <i className='fa fa-calendar' />
+                      <i className={`fa fa-${ct.faIcon}`} />
                     </div>
                     <div className='dashboard__calltoaction__button__text__title'>
-                      {this.props.t('View the Calendar')}
+                      {ct.creationLabel}
                     </div>
                   </div>
                 </div>
-              */ }
-
-              <div className='dashboard__calltoaction__button btnaction explore'>
-                <div className='dashboard__calltoaction__button__text'>
-                  <div className='dashboard__calltoaction__button__text__icon'>
-                    <i className='fa fa-folder-open-o' />
-                  </div>
-                  <div className='dashboard__calltoaction__button__text__title'>
-                    {this.props.t('Explore the workspace')}
-                  </div>
-                </div>
-              </div>
+              )}
             </div>
 
             <div className='dashboard__wksinfo'>
@@ -227,57 +201,13 @@ class Dashboard extends React.Component {
                   </div>
                 </div>
                 <div className='dashboard__activity__wrapper'>
-                  <div className='dashboard__activity__workspace'>
-                    <div className='dashboard__activity__workspace__icon'>
-                      <i className='fa fa-comments-o' />
-                    </div>
-                    <div className='dashboard__activity__workspace__name'>
-                      <span>Développement Tracim</span>
-                    </div>
-                  </div>
-
-                  <div className='dashboard__activity__workspace'>
-                    <div className='dashboard__activity__workspace__icon'>
-                      <i className='fa fa-list-ul' />
-                    </div>
-                    <div className='dashboard__activity__workspace__name'>
-                      Mission externe
-                    </div>
-                  </div>
-
-                  <div className='dashboard__activity__workspace'>
-                    <div className='dashboard__activity__workspace__icon'>
-                      <i className='fa fa-list-ul' />
-                    </div>
-                    <div className='dashboard__activity__workspace__name'>
-                      Recherche et developpement
-                    </div>
-                  </div>
-
-                  <div className='dashboard__activity__workspace'>
-                    <div className='dashboard__activity__workspace__icon'>
-                      <i className='fa fa-file-text-o' />
-                    </div>
-                    <div className='dashboard__activity__workspace__name'>
-                      <span>Marketing</span>
-                    </div>
-                  </div>
 
                   <div className='dashboard__activity__workspace'>
                     <div className='dashboard__activity__workspace__icon'>
                       <i className='fa fa-comments-o' />
                     </div>
                     <div className='dashboard__activity__workspace__name'>
-                      <span>Évolution</span>
-                    </div>
-                  </div>
-
-                  <div className='dashboard__activity__workspace'>
-                    <div className='dashboard__activity__workspace__icon'>
-                      <i className='fa fa-file-text-o' />
-                    </div>
-                    <div className='dashboard__activity__workspace__name'>
-                      Commercialisation
+                      <span>Développement Tracim</span>
                     </div>
                   </div>
 
@@ -299,6 +229,7 @@ class Dashboard extends React.Component {
                   {this.state.displayNewMemberDashboard === false &&
                     <div>
                       <ul className='dashboard__memberlist__list'>
+
                         <li className='dashboard__memberlist__list__item'>
                           <div className='dashboard__memberlist__list__item__avatar'>
                             <img src={imgProfil} alt='avatar' />
@@ -316,107 +247,6 @@ class Dashboard extends React.Component {
                           </div>
                         </li>
 
-                        <li className='dashboard__memberlist__list__item'>
-                          <div className='dashboard__memberlist__list__item__avatar'>
-                            <img src={imgProfil} alt='avatar' />
-                          </div>
-                          <div className='dashboard__memberlist__list__item__info mr-auto'>
-                            <div className='dashboard__memberlist__list__item__info__name'>
-                              Aldwin Vinel
-                            </div>
-                            <div className='dashboard__memberlist__list__item__info__role'>
-                              Lecteur
-                            </div>
-                          </div>
-                          <div className='dashboard__memberlist__list__item__delete d-flex justify-content-end'>
-                            <i className='fa fa-trash-o' />
-                          </div>
-                        </li>
-
-                        <li className='dashboard__memberlist__list__item'>
-                          <div className='dashboard__memberlist__list__item__avatar'>
-                            <img src={imgProfil} alt='avatar' />
-                          </div>
-                          <div className='dashboard__memberlist__list__item__info mr-auto'>
-                            <div className='dashboard__memberlist__list__item__info__name'>
-                              William Himme
-                            </div>
-                            <div className='dashboard__memberlist__list__item__info__role'>
-                              Contributeur
-                            </div>
-                          </div>
-                          <div className='dashboard__memberlist__list__item__delete d-flex justify-content-end'>
-                            <i className='fa fa-trash-o' />
-                          </div>
-                        </li>
-
-                        <li className='dashboard__memberlist__list__item'>
-                          <div className='dashboard__memberlist__list__item__avatar'>
-                            <img src={imgProfil} alt='avatar' />
-                          </div>
-                          <div className='dashboard__memberlist__list__item__info mr-auto'>
-                            <div className='dashboard__memberlist__list__item__info__name'>
-                              Yacine Lite
-                            </div>
-                            <div className='dashboard__memberlist__list__item__info__role'>
-                              Contributeur
-                            </div>
-                          </div>
-                          <div className='dashboard__memberlist__list__item__delete d-flex justify-content-end'>
-                            <i className='fa fa-trash-o' />
-                          </div>
-                        </li>
-
-                        <li className='dashboard__memberlist__list__item'>
-                          <div className='dashboard__memberlist__list__item__avatar'>
-                            <img src={imgProfil} alt='avatar' />
-                          </div>
-                          <div className='dashboard__memberlist__list__item__info mr-auto'>
-                            <div className='dashboard__memberlist__list__item__info__name'>
-                              Alexi Falcin
-                            </div>
-                            <div className='dashboard__memberlist__list__item__info__role'>
-                              Gestionnaire
-                            </div>
-                          </div>
-                          <div className='dashboard__memberlist__list__item__delete d-flex justify-content-end'>
-                            <i className='fa fa-trash-o' />
-                          </div>
-                        </li>
-
-                        <li className='dashboard__memberlist__list__item'>
-                          <div className='dashboard__memberlist__list__item__avatar'>
-                            <img src={imgProfil} alt='avatar' />
-                          </div>
-                          <div className='dashboard__memberlist__list__item__info mr-auto'>
-                            <div className='dashboard__memberlist__list__item__info__name'>
-                              Mickaël Fonati
-                            </div>
-                            <div className='dashboard__memberlist__list__item__info__role'>
-                              Gestionnaire
-                            </div>
-                          </div>
-                          <div className='dashboard__memberlist__list__item__delete d-flex justify-content-end'>
-                            <i className='fa fa-trash-o' />
-                          </div>
-                        </li>
-
-                        <li className='dashboard__memberlist__list__item'>
-                          <div className='dashboard__memberlist__list__item__avatar'>
-                            <img src={imgProfil} alt='avatar' />
-                          </div>
-                          <div className='dashboard__memberlist__list__item__info mr-auto'>
-                            <div className='dashboard__memberlist__list__item__info__name'>
-                              Eva Lonbard
-                            </div>
-                            <div className='dashboard__memberlist__list__item__info__role'>
-                              Gestionnaire
-                            </div>
-                          </div>
-                          <div className='dashboard__memberlist__list__item__delete d-flex justify-content-end'>
-                            <i className='fa fa-trash-o' />
-                          </div>
-                        </li>
                       </ul>
 
                       <div
@@ -440,93 +270,64 @@ class Dashboard extends React.Component {
                   }
 
                   {this.state.displayNewMemberDashboard === true &&
-                    <form className='dashboard__memberlist__form'>
-                      <div
-                        className='dashboard__memberlist__form__close d-flex justify-content-end'
-                      >
-                        <i className='fa fa-times' onClick={this.handleToggleNewMemberDashboard} />
+                  <form className='dashboard__memberlist__form'>
+                    <div
+                      className='dashboard__memberlist__form__close d-flex justify-content-end'
+                    >
+                      <i className='fa fa-times' onClick={this.handleToggleNewMemberDashboard} />
+                    </div>
+
+                    <div className='dashboard__memberlist__form__member'>
+                      <div className='dashboard__memberlist__form__member__name'>
+                        <label className='name__label' htmlFor='addmember'>
+                          {this.props.t('Enter the name or email of the member')}
+                        </label>
+                        <input type='text' id='addmember' className='name__input form-control' placeholder='Nom ou Email' />
                       </div>
-                      <div className='dashboard__memberlist__form__member'>
-                        <div className='dashboard__memberlist__form__member__name'>
-                          <label className='name__label' htmlFor='addmember'>
-                            {this.props.t('Enter the name or email of the member')}
-                          </label>
-                          <input type='text' id='addmember' className='name__input form-control' placeholder='Nom ou Email' />
+
+                      <div className='dashboard__memberlist__form__member__create'>
+                        <div className='create__radiobtn mr-3'>
+                          <input type='radio' />
                         </div>
-                        <div className='dashboard__memberlist__form__member__create'>
-                          <div className='create__radiobtn mr-3'>
-                            <input type='radio' />
-                          </div>
-                          <div className='create__text'>
-                            {this.props.t('Create an account')}
-                          </div>
+
+                        <div className='create__text'>
+                          {this.props.t('Create an account')}
                         </div>
                       </div>
-                      <div className='dashboard__memberlist__form__role'>
-                        <div className='dashboard__memberlist__form__role__text'>
-                          {this.props.t('Choose the role of the member')}
-                        </div>
-                        <ul className='dashboard__memberlist__form__role__list'>
-                          <li className='dashboard__memberlist__form__role__list__item'>
-                            <div className='item__radiobtn mr-3'>
-                              <input type='radio' name='role' value='responsable' />
-                            </div>
-                            <div className='item__text'>
-                              <div className='item_text_icon mr-2'>
-                                <i className='fa fa-gavel' />
-                              </div>
-                              <div className='item__text__name'>
-                                {this.props.t('Supervisor')}
-                              </div>
-                            </div>
-                          </li>
-                          <li className='dashboard__memberlist__form__role__list__item'>
-                            <div className='item__radiobtn mr-3'>
-                              <input type='radio' name='role' value='gestionnaire' />
-                            </div>
-                            <div className='item__text'>
-                              <div className='item_text_icon mr-2'>
-                                <i className='fa fa-graduation-cap' />
-                              </div>
-                              <div className='item__text__name'>
-                                {this.props.t('Content Manager')}
-                              </div>
-                            </div>
-                          </li>
-                          <li className='dashboard__memberlist__form__role__list__item'>
-                            <div className='item__radiobtn mr-3'>
-                              <input type='radio' name='role' value='contributeur' />
-                            </div>
-                            <div className='item__text'>
-                              <div className='item_text_icon mr-2'>
-                                <i className='fa fa-pencil' />
-                              </div>
-                              <div className='item__text__name'>
-                                {this.props.t('Contributor')}
-                              </div>
-                            </div>
-                          </li>
-                          <li className='dashboard__memberlist__form__role__list__item'>
-                            <div className='item__radiobtn mr-3'>
-                              <input type='radio' name='role' value='lecteur' />
+                    </div>
+
+                    <div className='dashboard__memberlist__form__role'>
+                      <div className='dashboard__memberlist__form__role__text'>
+                        {this.props.t('Choose the role of the member')}
+                      </div>
+
+                      <ul className='dashboard__memberlist__form__role__list'>
+
+                        <li className='dashboard__memberlist__form__role__list__item'>
+                          <div className='item__radiobtn mr-3'>
+                            <input type='radio' name='role' value='responsable' />
+                          </div>
+
+                          <div className='item__text'>
+                            <div className='item_text_icon mr-2'>
+                              <i className='fa fa-gavel' />
                             </div>
-                            <div className='item__text'>
-                              <div className='item_text_icon mr-2'>
-                                <i className='fa fa-eye' />
-                              </div>
-                              <div className='item__text__name'>
-                                {this.props.t('Reader')}
-                              </div>
+
+                            <div className='item__text__name'>
+                              {this.props.t('Supervisor')}
                             </div>
-                          </li>
-                        </ul>
-                      </div>
-                      <div className='dashboard__memberlist__form__submitbtn'>
-                        <button className='btn btn-outline-primary'>
-                          {this.props.t('Validate')}
-                        </button>
-                      </div>
-                    </form>
+                          </div>
+                        </li>
+
+                      </ul>
+                    </div>
+
+                    <div className='dashboard__memberlist__form__submitbtn'>
+                      <button className='btn btn-outline-primary'>
+                        {this.props.t('Validate')}
+                      </button>
+                    </div>
+                  </form>
                   }
                 </div>
               </div>
@@ -547,17 +348,17 @@ class Dashboard extends React.Component {
                   </div>
                 </div>
                 {this.state.displayWebdavBtn === true &&
-                  <div>
-                    <div className='dashboard__moreinfo__webdav__information genericBtnInfoDashboard__info'>
-                      <div className='dashboard__moreinfo__webdav__information__text genericBtnInfoDashboard__info__text'>
-                        {this.props.t('Find all your documents deposited online directly on your computer via the workstation, without going through the software.')}'
-                      </div>
+                <div>
+                  <div className='dashboard__moreinfo__webdav__information genericBtnInfoDashboard__info'>
+                    <div className='dashboard__moreinfo__webdav__information__text genericBtnInfoDashboard__info__text'>
+                      {this.props.t('Find all your documents deposited online directly on your computer via the workstation, without going through the software.')}'
+                    </div>
 
-                      <div className='dashboard__moreinfo__webdav__information__link genericBtnInfoDashboard__info__link'>
-                        http://algoo.trac.im/webdav/
-                      </div>
+                    <div className='dashboard__moreinfo__webdav__information__link genericBtnInfoDashboard__info__link'>
+                      http://algoo.trac.im/webdav/
                     </div>
                   </div>
+                </div>
                 }
               </div>
               <div className='dashboard__moreinfo__calendar genericBtnInfoDashboard'>
@@ -577,27 +378,27 @@ class Dashboard extends React.Component {
                 </div>
                 <div className='dashboard__moreinfo__calendar__wrapperText'>
                   {this.state.displayCalendarBtn === true &&
-                    <div>
-                      <div className='dashboard__moreinfo__calendar__information genericBtnInfoDashboard__info'>
-                        <div className='dashboard__moreinfo__calendar__information__text genericBtnInfoDashboard__info__text'>
-                          {this.props.t('Each workspace has its own calendar.')}
-                        </div>
+                  <div>
+                    <div className='dashboard__moreinfo__calendar__information genericBtnInfoDashboard__info'>
+                      <div className='dashboard__moreinfo__calendar__information__text genericBtnInfoDashboard__info__text'>
+                        {this.props.t('Each workspace has its own calendar.')}
+                      </div>
 
-                        <div className='dashboard__moreinfo__calendar__information__link genericBtnInfoDashboard__info__link'>
-                          http://algoo.trac.im/calendar/
-                        </div>
+                      <div className='dashboard__moreinfo__calendar__information__link genericBtnInfoDashboard__info__link'>
+                        http://algoo.trac.im/calendar/
                       </div>
                     </div>
+                  </div>
                   }
                 </div>
               </div>
             </div>
-          </div>
-        </div>
+          </PageContent>
+        </PageWrapper>
       </div>
     )
   }
 }
 
-const mapStateToProps = ({ user, app, contentType, workspaceList }) => ({ user, app, contentType, workspaceList })
-export default connect(mapStateToProps)(translate()(Dashboard))
+const mapStateToProps = ({ user, contentType, currentWorkspace }) => ({ user, contentType, curWs: currentWorkspace })
+export default connect(mapStateToProps)(translate()(Radium(Dashboard)))

frontend/src/container/Dashboard_old.jsx

@@ -0,0 +1,571 @@
+import React from 'react'
+import { connect } from 'react-redux'
+import Sidebar from './Sidebar.jsx'
+import imgProfil from '../img/imgProfil.png'
+import { translate } from 'react-i18next'
+
+class Dashboard extends React.Component {
+  constructor (props) {
+    super(props)
+    this.state = {
+      workspaceIdInUrl: props.match.params.idws ? parseInt(props.match.params.idws) : null, // this is used to avoid handling the parseInt everytime
+      displayNewMemberDashboard: false,
+      displayNotifBtn: false,
+      displayWebdavBtn: false,
+      displayCalendarBtn: false
+    }
+  }
+
+  handleToggleNewMemberDashboard = () => this.setState(prevState => ({
+    displayNewMemberDashboard: !prevState.displayNewMemberDashboard
+  }))
+
+  handleToggleNotifBtn = () => this.setState(prevState => ({
+    displayNotifBtn: !prevState.displayNotifBtn
+  }))
+
+  handleToggleWebdavBtn = () => this.setState(prevState => ({
+    displayWebdavBtn: !prevState.displayWebdavBtn
+  }))
+
+  handleToggleCalendarBtn = () => this.setState(prevState => ({
+    displayCalendarBtn: !prevState.displayCalendarBtn
+  }))
+
+  render () {
+    return (
+      <div className='sidebarpagecontainer'>
+        <Sidebar />
+
+        <div className='dashboard'>
+          <div className='container-fluid nopadding'>
+            <div className='dashboard__header mb-5'>
+              <div className='pageTitleGeneric dashboard__header__title d-flex align-items-center'>
+                <div className='pageTitleGeneric__title dashboard__header__title__text mr-3'>
+                  {this.props.t('Dashboard')}
+                </div>
+                <div className='dashboard__header__acces' />
+              </div>
+
+              <div className='dashboard__header__advancedmode mr-3'>
+                <button type='button' className='btn btn-primary'>
+                  {this.props.t('Active advanced Dashboard')}
+                </button>
+              </div>
+            </div>
+
+            <div className='dashboard__workspace-wrapper'>
+              <div className='dashboard__workspace'>
+                <div className='dashboard__workspace__title'>
+                  Développement tracim
+                </div>
+
+                <div className='dashboard__workspace__detail'>
+                  Ligne directive pour le prochain design de Tracim et des futurs fonctionnalités.
+                </div>
+              </div>
+
+              <div className='dashboard__userstatut'>
+
+                <div className='dashboard__userstatut__role'>
+                  <div className='dashboard__userstatut__role__text'>
+                    Hi ! Alexi, vous êtes actuellement
+                  </div>
+                  <div className='dashboard__userstatut__role__rank'>
+                    <div className='dashboard__userstatut__role__rank__icon'>
+                      <i className='fa fa-graduation-cap' />
+                    </div>
+                    <div className='dashboard__userstatut__role__rank__rolename'>
+                      Gestionnaire de projet
+                    </div>
+                  </div>
+                </div>
+
+                <div className='dashboard__userstatut__notification'>
+                  <div className='dashboard__userstatut__notification__text'>
+                    Vous êtes abonné(e) aux notifications de ce workspace
+                  </div>
+                  {this.state.displayNotifBtn === false &&
+                  <div
+                    className='dashboard__userstatut__notification__btn btn btn-outline-primary'
+                    onClick={this.handleToggleNotifBtn}
+                  >
+                    {this.props.t('Change your status')}
+                  </div>
+                  }
+
+                  {this.state.displayNotifBtn === true &&
+                  <div className='dashboard__userstatut__notification__subscribe dropdown'>
+                    <button className='dashboard__userstatut__notification__subscribe__btn btn btn-outline-primary dropdown-toggle' type='button' id='dropdownMenuButton' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>
+                      Abonné(e)
+                    </button>
+                    <div className='dashboard__userstatut__notification__subscribe__submenu dropdown-menu'>
+                      <div className='dashboard__userstatut__notification__subscribe__submenu__item dropdown-item'>
+                        {this.props.t('subscriber')}
+                      </div>
+                      <div className='dashboard__userstatut__notification__subscribe__submenu__item dropdown-item dropdown-item'>
+                        {this.props.t('unsubscribed')}
+                      </div>
+                    </div>
+                  </div>
+                  }
+                </div>
+              </div>
+            </div>
+
+            <div className='dashboard__calltoaction justify-content-xl-center'>
+              <div className='dashboard__calltoaction__button btnaction btnthread'>
+                <div className='dashboard__calltoaction__button__text'>
+                  <div className='dashboard__calltoaction__button__text__icon'>
+                    <i className='fa fa-comments-o' />
+                  </div>
+                  <div className='dashboard__calltoaction__button__text__title'>
+                    {this.props.t('Start a new Thread')}
+                  </div>
+                </div>
+              </div>
+
+              <div className='dashboard__calltoaction__button btnaction writefile'>
+                <div className='dashboard__calltoaction__button__text'>
+                  <div className='dashboard__calltoaction__button__text__icon'>
+                    <i className='fa fa-file-text-o' />
+                  </div>
+                  <div className='dashboard__calltoaction__button__text__title'>
+                    {this.props.t('Writing a document')}
+                  </div>
+                </div>
+              </div>
+
+              <div className='dashboard__calltoaction__button btnaction importfile'>
+                <div className='dashboard__calltoaction__button__text'>
+                  <div className='dashboard__calltoaction__button__text__icon'>
+                    <i className='fa fa-paperclip' />
+                  </div>
+                  <div className='dashboard__calltoaction__button__text__title'>
+                    {this.props.t('Upload a file')}
+                  </div>
+                </div>
+              </div>
+
+              {/*
+                <div className='dashboard__calltoaction__button btnaction visioconf'>
+                  <div className='dashboard__calltoaction__button__text'>
+                    <div className='dashboard__calltoaction__button__text__icon'>
+                      <i className='fa fa-video-camera' />
+                    </div>
+                    <div className='dashboard__calltoaction__button__text__title'>
+                      {this.props.t('Start a videoconference')}
+                    </div>
+                  </div>
+                </div>
+
+                <div className='dashboard__calltoaction__button btnaction calendar'>
+                  <div className='dashboard__calltoaction__button__text'>
+                    <div className='dashboard__calltoaction__button__text__icon'>
+                      <i className='fa fa-calendar' />
+                    </div>
+                    <div className='dashboard__calltoaction__button__text__title'>
+                      {this.props.t('View the Calendar')}
+                    </div>
+                  </div>
+                </div>
+              */ }
+
+              <div className='dashboard__calltoaction__button btnaction explore'>
+                <div className='dashboard__calltoaction__button__text'>
+                  <div className='dashboard__calltoaction__button__text__icon'>
+                    <i className='fa fa-folder-open-o' />
+                  </div>
+                  <div className='dashboard__calltoaction__button__text__title'>
+                    {this.props.t('Explore the workspace')}
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div className='dashboard__wksinfo'>
+              <div className='dashboard__activity'>
+                <div className='dashboard__activity__header'>
+                  <div className='dashboard__activity__header__title subTitle'>
+                    {this.props.t('Recent activity')}
+                  </div>
+
+                  <div className='dashboard__activity__header__allread btn btn-outline-primary'>
+                    {this.props.t('Mark everything as read')}
+                  </div>
+                </div>
+                <div className='dashboard__activity__wrapper'>
+                  <div className='dashboard__activity__workspace'>
+                    <div className='dashboard__activity__workspace__icon'>
+                      <i className='fa fa-comments-o' />
+                    </div>
+                    <div className='dashboard__activity__workspace__name'>
+                      <span>Développement Tracim</span>
+                    </div>
+                  </div>
+
+                  <div className='dashboard__activity__workspace'>
+                    <div className='dashboard__activity__workspace__icon'>
+                      <i className='fa fa-list-ul' />
+                    </div>
+                    <div className='dashboard__activity__workspace__name'>
+                      Mission externe
+                    </div>
+                  </div>
+
+                  <div className='dashboard__activity__workspace'>
+                    <div className='dashboard__activity__workspace__icon'>
+                      <i className='fa fa-list-ul' />
+                    </div>
+                    <div className='dashboard__activity__workspace__name'>
+                      Recherche et developpement
+                    </div>
+                  </div>
+
+                  <div className='dashboard__activity__workspace'>
+                    <div className='dashboard__activity__workspace__icon'>
+                      <i className='fa fa-file-text-o' />
+                    </div>
+                    <div className='dashboard__activity__workspace__name'>
+                      <span>Marketing</span>
+                    </div>
+                  </div>
+
+                  <div className='dashboard__activity__workspace'>
+                    <div className='dashboard__activity__workspace__icon'>
+                      <i className='fa fa-comments-o' />
+                    </div>
+                    <div className='dashboard__activity__workspace__name'>
+                      <span>Évolution</span>
+                    </div>
+                  </div>
+
+                  <div className='dashboard__activity__workspace'>
+                    <div className='dashboard__activity__workspace__icon'>
+                      <i className='fa fa-file-text-o' />
+                    </div>
+                    <div className='dashboard__activity__workspace__name'>
+                      Commercialisation
+                    </div>
+                  </div>
+
+                  <div className='dashboard__activity__more d-flex flex-row-reverse'>
+                    <div className='dashboard__activity__more__btn btn btn-outline-primary'>
+                      {this.props.t('See more')}
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <div className='dashboard__memberlist'>
+
+                <div className='dashboard__memberlist__title subTitle'>
+                  {this.props.t('Member List')}
+                </div>
+
+                <div className='dashboard__memberlist__wrapper'>
+                  {this.state.displayNewMemberDashboard === false &&
+                  <div>
+                    <ul className='dashboard__memberlist__list'>
+                      <li className='dashboard__memberlist__list__item'>
+                        <div className='dashboard__memberlist__list__item__avatar'>
+                          <img src={imgProfil} alt='avatar' />
+                        </div>
+                        <div className='dashboard__memberlist__list__item__info mr-auto'>
+                          <div className='dashboard__memberlist__list__item__info__name'>
+                            Jean Dupont
+                          </div>
+                          <div className='dashboard__memberlist__list__item__info__role'>
+                            Responsable
+                          </div>
+                        </div>
+                        <div className='dashboard__memberlist__list__item__delete d-flex justify-content-end'>
+                          <i className='fa fa-trash-o' />
+                        </div>
+                      </li>
+
+                      <li className='dashboard__memberlist__list__item'>
+                        <div className='dashboard__memberlist__list__item__avatar'>
+                          <img src={imgProfil} alt='avatar' />
+                        </div>
+                        <div className='dashboard__memberlist__list__item__info mr-auto'>
+                          <div className='dashboard__memberlist__list__item__info__name'>
+                            Aldwin Vinel
+                          </div>
+                          <div className='dashboard__memberlist__list__item__info__role'>
+                            Lecteur
+                          </div>
+                        </div>
+                        <div className='dashboard__memberlist__list__item__delete d-flex justify-content-end'>
+                          <i className='fa fa-trash-o' />
+                        </div>
+                      </li>
+
+                      <li className='dashboard__memberlist__list__item'>
+                        <div className='dashboard__memberlist__list__item__avatar'>
+                          <img src={imgProfil} alt='avatar' />
+                        </div>
+                        <div className='dashboard__memberlist__list__item__info mr-auto'>
+                          <div className='dashboard__memberlist__list__item__info__name'>
+                            William Himme
+                          </div>
+                          <div className='dashboard__memberlist__list__item__info__role'>
+                            Contributeur
+                          </div>
+                        </div>
+                        <div className='dashboard__memberlist__list__item__delete d-flex justify-content-end'>
+                          <i className='fa fa-trash-o' />
+                        </div>
+                      </li>
+
+                      <li className='dashboard__memberlist__list__item'>
+                        <div className='dashboard__memberlist__list__item__avatar'>
+                          <img src={imgProfil} alt='avatar' />
+                        </div>
+                        <div className='dashboard__memberlist__list__item__info mr-auto'>
+                          <div className='dashboard__memberlist__list__item__info__name'>
+                            Yacine Lite
+                          </div>
+                          <div className='dashboard__memberlist__list__item__info__role'>
+                            Contributeur
+                          </div>
+                        </div>
+                        <div className='dashboard__memberlist__list__item__delete d-flex justify-content-end'>
+                          <i className='fa fa-trash-o' />
+                        </div>
+                      </li>
+
+                      <li className='dashboard__memberlist__list__item'>
+                        <div className='dashboard__memberlist__list__item__avatar'>
+                          <img src={imgProfil} alt='avatar' />
+                        </div>
+                        <div className='dashboard__memberlist__list__item__info mr-auto'>
+                          <div className='dashboard__memberlist__list__item__info__name'>
+                            Alexi Falcin
+                          </div>
+                          <div className='dashboard__memberlist__list__item__info__role'>
+                            Gestionnaire
+                          </div>
+                        </div>
+                        <div className='dashboard__memberlist__list__item__delete d-flex justify-content-end'>
+                          <i className='fa fa-trash-o' />
+                        </div>
+                      </li>
+
+                      <li className='dashboard__memberlist__list__item'>
+                        <div className='dashboard__memberlist__list__item__avatar'>
+                          <img src={imgProfil} alt='avatar' />
+                        </div>
+                        <div className='dashboard__memberlist__list__item__info mr-auto'>
+                          <div className='dashboard__memberlist__list__item__info__name'>
+                            Mickaël Fonati
+                          </div>
+                          <div className='dashboard__memberlist__list__item__info__role'>
+                            Gestionnaire
+                          </div>
+                        </div>
+                        <div className='dashboard__memberlist__list__item__delete d-flex justify-content-end'>
+                          <i className='fa fa-trash-o' />
+                        </div>
+                      </li>
+
+                      <li className='dashboard__memberlist__list__item'>
+                        <div className='dashboard__memberlist__list__item__avatar'>
+                          <img src={imgProfil} alt='avatar' />
+                        </div>
+                        <div className='dashboard__memberlist__list__item__info mr-auto'>
+                          <div className='dashboard__memberlist__list__item__info__name'>
+                            Eva Lonbard
+                          </div>
+                          <div className='dashboard__memberlist__list__item__info__role'>
+                            Gestionnaire
+                          </div>
+                        </div>
+                        <div className='dashboard__memberlist__list__item__delete d-flex justify-content-end'>
+                          <i className='fa fa-trash-o' />
+                        </div>
+                      </li>
+                    </ul>
+
+                    <div
+                      className='dashboard__memberlist__btnadd'
+                      onClick={this.handleToggleNewMemberDashboard}
+                    >
+                      <div className='dashboard__memberlist__btnadd__button'>
+                        <div className='dashboard__memberlist__btnadd__button__avatar'>
+                          <div className='dashboard__memberlist__btnadd__button__avatar__icon'>
+                            <i className='fa fa-plus' />
+                          </div>
+                        </div>
+                        <div
+                          className='dashboard__memberlist__btnadd__button__text'
+                        >
+                          {this.props.t('Add a member')}
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  }
+
+                  {this.state.displayNewMemberDashboard === true &&
+                  <form className='dashboard__memberlist__form'>
+                    <div
+                      className='dashboard__memberlist__form__close d-flex justify-content-end'
+                    >
+                      <i className='fa fa-times' onClick={this.handleToggleNewMemberDashboard} />
+                    </div>
+                    <div className='dashboard__memberlist__form__member'>
+                      <div className='dashboard__memberlist__form__member__name'>
+                        <label className='name__label' htmlFor='addmember'>
+                          {this.props.t('Enter the name or email of the member')}
+                        </label>
+                        <input type='text' id='addmember' className='name__input form-control' placeholder='Nom ou Email' />
+                      </div>
+                      <div className='dashboard__memberlist__form__member__create'>
+                        <div className='create__radiobtn mr-3'>
+                          <input type='radio' />
+                        </div>
+                        <div className='create__text'>
+                          {this.props.t('Create an account')}
+                        </div>
+                      </div>
+                    </div>
+                    <div className='dashboard__memberlist__form__role'>
+                      <div className='dashboard__memberlist__form__role__text'>
+                        {this.props.t('Choose the role of the member')}
+                      </div>
+                      <ul className='dashboard__memberlist__form__role__list'>
+                        <li className='dashboard__memberlist__form__role__list__item'>
+                          <div className='item__radiobtn mr-3'>
+                            <input type='radio' name='role' value='responsable' />
+                          </div>
+                          <div className='item__text'>
+                            <div className='item_text_icon mr-2'>
+                              <i className='fa fa-gavel' />
+                            </div>
+                            <div className='item__text__name'>
+                              {this.props.t('Supervisor')}
+                            </div>
+                          </div>
+                        </li>
+                        <li className='dashboard__memberlist__form__role__list__item'>
+                          <div className='item__radiobtn mr-3'>
+                            <input type='radio' name='role' value='gestionnaire' />
+                          </div>
+                          <div className='item__text'>
+                            <div className='item_text_icon mr-2'>
+                              <i className='fa fa-graduation-cap' />
+                            </div>
+                            <div className='item__text__name'>
+                              {this.props.t('Content Manager')}
+                            </div>
+                          </div>
+                        </li>
+                        <li className='dashboard__memberlist__form__role__list__item'>
+                          <div className='item__radiobtn mr-3'>
+                            <input type='radio' name='role' value='contributeur' />
+                          </div>
+                          <div className='item__text'>
+                            <div className='item_text_icon mr-2'>
+                              <i className='fa fa-pencil' />
+                            </div>
+                            <div className='item__text__name'>
+                              {this.props.t('Contributor')}
+                            </div>
+                          </div>
+                        </li>
+                        <li className='dashboard__memberlist__form__role__list__item'>
+                          <div className='item__radiobtn mr-3'>
+                            <input type='radio' name='role' value='lecteur' />
+                          </div>
+                          <div className='item__text'>
+                            <div className='item_text_icon mr-2'>
+                              <i className='fa fa-eye' />
+                            </div>
+                            <div className='item__text__name'>
+                              {this.props.t('Reader')}
+                            </div>
+                          </div>
+                        </li>
+                      </ul>
+                    </div>
+                    <div className='dashboard__memberlist__form__submitbtn'>
+                      <button className='btn btn-outline-primary'>
+                        {this.props.t('Validate')}
+                      </button>
+                    </div>
+                  </form>
+                  }
+                </div>
+              </div>
+            </div>
+
+            <div className='dashboard__moreinfo'>
+              <div className='dashboard__moreinfo__webdav genericBtnInfoDashboard'>
+                <div
+                  className='dashboard__moreinfo__webdav__btn genericBtnInfoDashboard__btn'
+                  onClick={this.handleToggleWebdavBtn}
+                >
+                  <div className='dashboard__moreinfo__webdav__btn__icon genericBtnInfoDashboard__btn__icon'>
+                    <i className='fa fa-windows' />
+                  </div>
+
+                  <div className='dashboard__moreinfo__webdav__btn__text genericBtnInfoDashboard__btn__text'>
+                    {this.props.t('Implement Tracim in your explorer')}
+                  </div>
+                </div>
+                {this.state.displayWebdavBtn === true &&
+                <div>
+                  <div className='dashboard__moreinfo__webdav__information genericBtnInfoDashboard__info'>
+                    <div className='dashboard__moreinfo__webdav__information__text genericBtnInfoDashboard__info__text'>
+                      {this.props.t('Find all your documents deposited online directly on your computer via the workstation, without going through the software.')}'
+                    </div>
+
+                    <div className='dashboard__moreinfo__webdav__information__link genericBtnInfoDashboard__info__link'>
+                      http://algoo.trac.im/webdav/
+                    </div>
+                  </div>
+                </div>
+                }
+              </div>
+              <div className='dashboard__moreinfo__calendar genericBtnInfoDashboard'>
+                <div className='dashboard__moreinfo__calendar__wrapperBtn'>
+                  <div
+                    className='dashboard__moreinfo__calendar__btn genericBtnInfoDashboard__btn'
+                    onClick={this.handleToggleCalendarBtn}
+                  >
+                    <div className='dashboard__moreinfo__calendar__btn__icon genericBtnInfoDashboard__btn__icon'>
+                      <i className='fa fa-calendar' />
+                    </div>
+
+                    <div className='dashboard__moreinfo__calendar__btn__text genericBtnInfoDashboard__btn__text'>
+                      {this.props.t('Workspace Calendar')}
+                    </div>
+                  </div>
+                </div>
+                <div className='dashboard__moreinfo__calendar__wrapperText'>
+                  {this.state.displayCalendarBtn === true &&
+                  <div>
+                    <div className='dashboard__moreinfo__calendar__information genericBtnInfoDashboard__info'>
+                      <div className='dashboard__moreinfo__calendar__information__text genericBtnInfoDashboard__info__text'>
+                        {this.props.t('Each workspace has its own calendar.')}
+                      </div>
+
+                      <div className='dashboard__moreinfo__calendar__information__link genericBtnInfoDashboard__info__link'>
+                        http://algoo.trac.im/calendar/
+                      </div>
+                    </div>
+                  </div>
+                  }
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  }
+}
+
+const mapStateToProps = ({ user, app, contentType, workspaceList }) => ({ user, app, contentType, workspaceList })
+export default connect(mapStateToProps)(translate()(Dashboard))

frontend/src/container/Sidebar.jsx

@@ -63,7 +63,7 @@ class Sidebar extends React.Component {
 
     history.push(`${PAGE.WORKSPACE.CONTENT_LIST(idWs)}?type=${newFilter.join(';')}`) // workspace.filter gets updated on react redraw from match.params
 
-    // obviously, it's ugly to use custom event to tell WorkspaceContent to refresh, but since WorkspaceContent
+    // obviously, it's ugly to use custom event to tell WorkspaceContentList to refresh, but since WorkspaceContentList
     // will end up being an App, it'll have to be that way. So it's fine
     GLOBAL_dispatchEvent({ type: 'refreshContentList', data: {} })
   }
@@ -124,11 +124,10 @@ class Sidebar extends React.Component {
   }
 }
 
-const mapStateToProps = ({ lang, user, workspace, workspaceList, app }) => ({
+const mapStateToProps = ({ lang, user, workspace, workspaceList }) => ({
   activeLang: lang.find(l => l.active) || {id: 'en'},
   user,
   workspace,
-  workspaceList,
-  app
+  workspaceList
 })
 export default withRouter(connect(mapStateToProps)(translate()(Sidebar)))

frontend/src/container/Tracim.jsx

@@ -16,12 +16,14 @@ import PrivateRoute from './PrivateRoute.jsx'
 import { COOKIE, PAGE } from '../helper.js'
 import {
   getAppList,
-  getUserIsConnected
+  getUserIsConnected,
+  getContentTypeList
 } from '../action-creator.async.js'
 import {
   removeFlashMessage,
   setAppList,
-  setUserConnected
+  setUserConnected,
+  setContentTypeList
 } from '../action-creator.sync.js'
 import Cookies from 'js-cookie'
 
@@ -47,6 +49,9 @@ class Tracim extends React.Component {
 
         const fetchGetAppList = await dispatch(getAppList(userLogged))
         if (fetchGetAppList.status === 200) dispatch(setAppList(fetchGetAppList.json))
+
+        const fetchGetContentTypeList = await dispatch(getContentTypeList(userLogged))
+        if (fetchGetContentTypeList.status === 200) dispatch(setContentTypeList(fetchGetContentTypeList.json))
         break
 
       case 401:

frontend/src/container/WorkspaceContent.jsx

@@ -16,14 +16,12 @@ import {
   PageContent
 } from 'tracim_frontend_lib'
 import {
-  getContentTypeList,
   getWorkspaceContentList,
   getFolderContent
 } from '../action-creator.async.js'
 import {
   newFlashMessage,
-  setContentTypeList,
-  setWorkspaceContent
+  setWorkspaceContentList
 } from '../action-creator.sync.js'
 
 const qs = require('query-string')
@@ -61,15 +59,10 @@ class WorkspaceContent extends React.Component {
   }
 
   async componentDidMount () {
-    const { user, workspaceList, contentType, match, dispatch } = this.props
+    const { workspaceList, match } = this.props
 
     console.log('%c<WorkspaceContent> componentDidMount', 'color: #c17838')
 
-    if (contentType.length === 0) {
-      const fetchGetContentTypeList = await dispatch(getContentTypeList(user))
-      if (fetchGetContentTypeList.status === 200) dispatch(setContentTypeList(fetchGetContentTypeList.json))
-    }
-
     let wsToLoad = null
 
     if (match.params.idws === undefined) {
@@ -109,7 +102,7 @@ class WorkspaceContent extends React.Component {
 
     const wsContent = await dispatch(getWorkspaceContentList(user, idWorkspace, 0))
 
-    if (wsContent.status === 200) dispatch(setWorkspaceContent(wsContent.json, qs.parse(location.search).type))
+    if (wsContent.status === 200) dispatch(setWorkspaceContentList(wsContent.json, qs.parse(location.search).type))
     else dispatch(newFlashMessage('Error while loading workspace', 'danger'))
   }
 
@@ -155,7 +148,7 @@ class WorkspaceContent extends React.Component {
   handleUpdateAppOpenedType = openedAppType => this.setState({appOpenedType: openedAppType})
 
   render () {
-    const { workspaceContent, contentType } = this.props
+    const { workspaceContentList, contentType } = this.props
 
     const filterWorkspaceContent = (contentList, filter) => {
       return filter.length === 0
@@ -168,8 +161,8 @@ class WorkspaceContent extends React.Component {
 
     const urlFilter = qs.parse(this.props.location.search).type
 
-    const filteredWorkspaceContent = workspaceContent.length > 0
-      ? filterWorkspaceContent(workspaceContent, urlFilter ? [urlFilter] : [])
+    const filteredWorkspaceContentList = workspaceContentList.length > 0
+      ? filterWorkspaceContent(workspaceContentList, urlFilter ? [urlFilter] : [])
       : []
 
     return (
@@ -196,7 +189,7 @@ class WorkspaceContent extends React.Component {
             parentClass='workspace__header'
             customClass='justify-content-between'
             title='Liste des Contenus'
-            subtitle={workspaceContent.label ? workspaceContent.label : ''}
+            subtitle={workspaceContentList.label ? workspaceContentList.label : ''}
           >
             <DropdownCreateButton
               parentClass='workspace__header__btnaddworkspace'
@@ -212,7 +205,7 @@ class WorkspaceContent extends React.Component {
             <div className='workspace__content__fileandfolder folder__content active'>
               <ContentItemHeader />
 
-              { filteredWorkspaceContent.map((c, i) => c.type === 'folder'
+              { filteredWorkspaceContentList.map((c, i) => c.type === 'folder'
                 ? (
                   <Folder
                     availableApp={contentType}
@@ -227,7 +220,7 @@ class WorkspaceContent extends React.Component {
                     }}
                     onClickFolder={this.handleClickFolder}
                     onClickCreateContent={this.handleClickCreateContent}
-                    isLast={i === filteredWorkspaceContent.length - 1}
+                    isLast={i === filteredWorkspaceContentList.length - 1}
                     key={c.id}
                   />
                 )
@@ -237,7 +230,7 @@ class WorkspaceContent extends React.Component {
                     type={c.type}
                     faIcon={contentType.length ? contentType.find(a => a.slug === c.type).faIcon : ''}
                     statusSlug={c.statusSlug}
-                    contentType={contentType.find(ct => ct.slug === c.type)}
+                    contentType={contentType.length ? contentType.find(ct => ct.slug === c.type) : null}
                     onClickItem={() => this.handleClickContentItem(c)}
                     onClickExtendedAction={{
                       edit: e => this.handleClickEditContentItem(e, c),
@@ -247,7 +240,7 @@ class WorkspaceContent extends React.Component {
                       delete: e => this.handleClickDeleteContentItem(e, c)
                     }}
                     onClickCreateContent={this.handleClickCreateContent}
-                    isLast={i === filteredWorkspaceContent.length - 1}
+                    isLast={i === filteredWorkspaceContentList.length - 1}
                     key={c.id}
                   />
                 )
@@ -268,5 +261,5 @@ class WorkspaceContent extends React.Component {
   }
 }
 
-const mapStateToProps = ({ user, workspaceContent, workspaceList, app, contentType }) => ({ user, workspaceContent, workspaceList, app, contentType })
+const mapStateToProps = ({ user, workspaceContentList, workspaceList, contentType }) => ({ user, workspaceContentList, workspaceList, contentType })
 export default withRouter(connect(mapStateToProps)(appFactory(WorkspaceContent)))

frontend/src/css/Dashboard.styl

@@ -43,7 +43,7 @@ coloricon()
         margin 0
     &__advancedmode
       cursor pointer
-  &__wkswrapper
+  &__workspace-wrapper
     flexwrap()
   &__workspace
     margin-right 20px
@@ -62,9 +62,9 @@ coloricon()
       flexwrap()
       margin 20px 0
       font-size 18px
-      &__text
+      &__msg
         margin-right 15px
-      &__rank
+      &__definition
         display flex
         &__icon
           margin-right 15px
@@ -88,25 +88,11 @@ coloricon()
       &:active
         box-shadow inset 0px 0px 5px 2px #656565
       &__text
+        color white
         &__icon
           font-size 30px
-          .fa-comments-o, .fa-paperclip, .fa-calendar, .fa-file-text-o, .fa-folder-open-o, .fa-video-camera
-              color white
         &__title
           font-size 18px
-          color white
-    .btnthread
-      background-color threadColor
-    .writefile
-      background-color writefile
-    .importfile
-      background-color importfile
-    .visioconf
-      background-color grey-hover
-    .calendar
-      background-color calendar
-    .explore
-      background-color explore
   &__wksinfo
     flexwrap()
     margin-top 150px

frontend/src/css/Generic.styl

@@ -202,7 +202,7 @@ a
   display flex
   flex-direction column
   justify-content center
-  margin 20px 30px 20px 0
+  margin 0 15px
   border-radius 10px
   padding 15px
   width 230px
@@ -210,6 +210,10 @@ a
   box-shadow shadow-all
   text-align center
   cursor pointer
+  &:nth-child(1)
+    margin-left 0
+  &:nth-last-child
+    margin-right 0
 
 .genericBtnInfoDashboard
   &__btn

frontend/src/helper.js

@@ -55,3 +55,5 @@ export const ROLE = [{
   icon: 'fa-gavel',
   translationKey: 'role.manager'
 }]
+
+export const handleRouteFromApi = route => route.startsWith('/#') ? route.slice(2) : route

frontend/src/reducer/currentWorkspace.js

@@ -0,0 +1,46 @@
+import {SET, WORKSPACE_DETAIL, WORKSPACE_MEMBER_LIST} from '../action-creator.sync.js'
+import { handleRouteFromApi } from '../helper.js'
+
+const defaultWorkspace = {
+  id: 0,
+  slug: '',
+  label: '',
+  description: '',
+  sidebarEntries: [],
+  member: []
+}
+
+export default function currentWorkspace (state = defaultWorkspace, action) {
+  switch (action.type) {
+    case `${SET}/${WORKSPACE_DETAIL}`:
+      return {
+        ...state,
+        id: action.workspaceDetail.workspace_id,
+        slug: action.workspaceDetail.slug,
+        label: action.workspaceDetail.label,
+        description: action.workspaceDetail.description,
+        sidebarEntries: action.workspaceDetail.sidebar_entries.map(sbe => ({
+          slug: sbe.slug,
+          route: handleRouteFromApi(sbe.route),
+          faIcon: sbe.fa_icon,
+          hexcolor: sbe.hexcolor,
+          label: sbe.label
+        }))
+      }
+
+    case `${SET}/${WORKSPACE_MEMBER_LIST}`:
+      return {
+        ...state,
+        member: action.workspaceMemberList.map(m => ({
+          id: m.user_id,
+          publicName: m.user.public_name,
+          avatarUrl: m.user.avatar_url,
+          role: m.role,
+          isActive: m.is_active,
+        }))
+      }
+
+    default:
+      return state
+  }
+}

frontend/src/reducer/root.js

@@ -2,12 +2,13 @@ import { combineReducers } from 'redux'
 import lang from './lang.js'
 import flashMessage from './flashMessage.js'
 import user from './user.js'
-import workspaceContent from './workspaceContent.js'
+import currentWorkspace from './currentWorkspace.js'
+import workspaceContentList from './workspaceContentList.js'
 import workspaceList from './workspaceList.js'
-import app from './app.js'
+import appList from './appList.js'
 import contentType from './contentType.js'
 import timezone from './timezone.js'
 
-const rootReducer = combineReducers({ lang, flashMessage, user, workspaceContent, workspaceList, app, contentType, timezone })
+const rootReducer = combineReducers({ lang, flashMessage, user, currentWorkspace, workspaceContentList, workspaceList, appList, contentType, timezone })
 
 export default rootReducer

frontend/src/reducer/workspaceContent.js → frontend/src/reducer/workspaceContentList.js

@@ -2,13 +2,14 @@ import {
   SET,
   UPDATE,
   WORKSPACE,
+  WORKSPACE_CONTENT,
   FOLDER
 } from '../action-creator.sync.js'
 
-export default function workspace (state = [], action) {
+export default function workspaceContentList (state = [], action) {
   switch (action.type) {
-    case `${SET}/${WORKSPACE}/Content`:
-      return action.workspaceContent.map(wsc => ({
+    case `${SET}/${WORKSPACE_CONTENT}`:
+      return action.workspaceContentList.map(wsc => ({
         id: wsc.content_id,
         label: wsc.label,
         slug: wsc.slug,

frontend/src/reducer/workspaceList.js

@@ -4,8 +4,7 @@ import {
   WORKSPACE_LIST,
   USER_ROLE
 } from '../action-creator.sync.js'
-
-const handleRouteFromApi = route => route.startsWith('/#') ? route.slice(2) : route
+import { handleRouteFromApi } from '../helper.js'
 
 export function workspaceList (state = [], action) {
   switch (action.type) {
@@ -14,7 +13,7 @@ export function workspaceList (state = [], action) {
         id: ws.workspace_id,
         label: ws.label,
         slug: ws.slug,
-        description: ws.description,
+        // description: ws.description, // not returned by /api/v2/users/:idUser/workspaces
         sidebarEntry: ws.sidebar_entries.map(sbe => ({
           slug: sbe.slug,
           route: handleRouteFromApi(sbe.route),