[wip] workspace dashboard

frontend/dist/index.html

@@ -36,7 +36,6 @@
       .primaryColorBorder { border-color: #7d4e24; }
       .primaryColorBorderDarken { border-color: #572800; }
       .primaryColorBorderLighten { border-color: #a3744a; }
-      .whiteColorBorder { border-color: #fdfdfd; }
 
       .primaryColorBorderHover:hover { border-color: #7d4e24; }
       .primaryColorBorderDarkenHover:hover { border-color: #572800; }

frontend/src/action-creator.async.js

@@ -2,8 +2,6 @@ import { FETCH_CONFIG } from './helper.js'
 import {
   TIMEZONE,
   setTimezone,
-  LANG,
-  updateLangList,
   USER_LOGIN,
   USER_LOGOUT,
   USER_ROLE,
@@ -16,7 +14,9 @@ import {
   FOLDER,
   setFolderData,
   APP_LIST,
-  CONTENT_TYPE_LIST
+  CONTENT_TYPE_LIST,
+  WORKSPACE_RECENT_ACTIVITY,
+  WORKSPACE_READ_STATUS
 } from './action-creator.sync.js'
 
 /*
@@ -36,6 +36,7 @@ import {
  * This function create a http async request using whatwg-fetch while dispatching a PENDING and a SUCCESS redux action.
  * It also adds, to the Response of the fetch request, the json value so that the redux action have access to the status and the data
  */
+// Côme - 2018/08/02 - fetchWrapper should come from tracim_lib so that all apps uses the same
 const fetchWrapper = async ({url, param, actionName, dispatch, debug = false}) => {
   dispatch({type: `${param.method}/${actionName}/PENDING`})
 
@@ -77,19 +78,6 @@ const fetchWrapper = async ({url, param, actionName, dispatch, debug = false}) =
   return fetchResult
 }
 
-export const getLangList = () => async dispatch => {
-  const fetchGetLangList = await fetchWrapper({
-    url: `${FETCH_CONFIG.apiUrl}/lang`,
-    param: {
-      headers: {...FETCH_CONFIG.headers},
-      method: 'GET'
-    },
-    actionName: LANG,
-    dispatch
-  })
-  if (fetchGetLangList.status === 200) dispatch(updateLangList(fetchGetLangList.json))
-}
-
 export const getTimezone = () => async dispatch => {
   const fetchGetTimezone = await fetchWrapper({
     url: `${FETCH_CONFIG.apiUrl}/timezone`,
@@ -220,6 +208,36 @@ export const getWorkspaceContentList = (user, idWorkspace, idParent) => dispatch
   })
 }
 
+export const getWorkspaceRecentActivityList = (user, idWorkspace) => dispatch => {
+  return fetchWrapper({
+    url: `${FETCH_CONFIG.apiUrl}/users/${user.user_id}/workspaces/${idWorkspace}/contents/recently_active?limit=10`,
+    param: {
+      headers: {
+        ...FETCH_CONFIG.headers,
+        'Authorization': 'Basic ' + user.auth
+      },
+      method: 'GET'
+    },
+    actionName: WORKSPACE_RECENT_ACTIVITY,
+    dispatch
+  })
+}
+
+export const getWorkspaceReadStatusList = (user, idWorkspace) => dispatch => {
+  return fetchWrapper({
+    url: `${FETCH_CONFIG.apiUrl}/users/${user.user_id}/workspaces/${idWorkspace}/contents/read_status`,
+    param: {
+      headers: {
+        ...FETCH_CONFIG.headers,
+        'Authorization': 'Basic ' + user.auth
+      },
+      method: 'GET'
+    },
+    actionName: WORKSPACE_READ_STATUS,
+    dispatch
+  })
+}
+
 export const getFolderContent = (idWorkspace, idFolder) => async dispatch => {
   const fetchGetFolderContent = await fetchWrapper({
     url: `${FETCH_CONFIG.apiUrl}/workspaces/${idWorkspace}/contents/?parent_id=${idFolder}`,

frontend/src/action-creator.sync.js

@@ -32,7 +32,7 @@ export const updateUserWorkspaceSubscriptionNotif = (workspaceId, subscriptionNo
 
 export const WORKSPACE = 'Workspace'
 export const WORKSPACE_CONTENT = `${WORKSPACE}/Content`
-export const setWorkspaceContentList = (workspaceContentList, filterStr = '') => ({ type: `${SET}/${WORKSPACE_CONTENT}`, workspaceContentList, filterStr })
+export const setWorkspaceContentList = workspaceContentList => ({ type: `${SET}/${WORKSPACE_CONTENT}`, workspaceContentList })
 export const updateWorkspaceFilter = filterList => ({ type: `${UPDATE}/${WORKSPACE}/Filter`, filterList })
 
 export const WORKSPACE_LIST = `${WORKSPACE}/List`
@@ -46,6 +46,14 @@ 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 WORKSPACE_RECENT_ACTIVITY = `${WORKSPACE}/RecentActivity/List`
+export const WORKSPACE_RECENT_ACTIVITY_LIST = `${WORKSPACE_RECENT_ACTIVITY}/List`
+export const setWorkspaceRecentActivityList = workspaceRecentActivityList => ({ type: `${SET}/${WORKSPACE_RECENT_ACTIVITY_LIST}`, workspaceRecentActivityList })
+
+export const WORKSPACE_READ_STATUS = `${WORKSPACE}/ReadStatus`
+export const WORKSPACE_READ_STATUS_LIST = `${WORKSPACE_READ_STATUS}/List`
+export const setWorkspaceReadStatusList = workspaceReadStatusList => ({ type: `${SET}/${WORKSPACE_READ_STATUS_LIST}`, workspaceReadStatusList })
+
 export const FOLDER = 'Folder'
 export const setFolderData = (folderId, content) => ({ type: `${SET}/${WORKSPACE}/${FOLDER}/Content`, folderId, content })
 

frontend/src/component/Account/Notification.jsx

@@ -4,7 +4,7 @@ import { BtnSwitch } from 'tracim_frontend_lib'
 import { ROLE } from '../../helper.js'
 
 export const Notification = props => {
-  const getRole = role => ROLE.find(r => r.name === role)
+  const getRole = role => ROLE.find(r => r.slug === role)
 
   return (
     <div className='account__userpreference__setting__notification'>

frontend/src/component/Dashboard/ContentTypeBtn.jsx

@@ -0,0 +1,41 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import Radium from 'radium'
+import color from 'color'
+import classnames from 'classnames'
+
+require('./ContentTypeBtn.styl')
+
+export const ContentTypeBtn = props =>
+  <div
+    className={classnames(`${props.customClass}`, 'contentTypeBtn')}
+    style={{
+      backgroundColor: props.hexcolor,
+      ':hover': {
+        backgroundColor: color(props.hexcolor).darken(0.15).hexString()
+      }
+    }}
+  >
+    <div className={classnames(`${props.customClass}__text`)}>
+      <div className={classnames(`${props.customClass}__text__icon`)}>
+        <i className={`fa fa-${props.faIcon}`} />
+      </div>
+      <div className={classnames(`${props.customClass}__text__title`)}>
+        {props.creationLabel}
+      </div>
+    </div>
+  </div>
+
+export default Radium(ContentTypeBtn)
+
+ContentTypeBtn.propTypes = {
+  hexcolor: PropTypes.string.isRequired,
+  label: PropTypes.string.isRequired,
+  faIcon: PropTypes.string.isRequired,
+  creationLabel: PropTypes.string.isRequired,
+  customClass: PropTypes.string
+}
+
+ContentTypeBtn.defaultProps = {
+  customClass: ''
+}

frontend/src/component/Dashboard/ContentTypeBtn.styl

@@ -0,0 +1,16 @@
+.contentTypeBtn
+  display flex
+  flex-direction column
+  justify-content center
+  margin 0 15px
+  border-radius 10px
+  padding 15px
+  width 230px
+  height 200px
+  box-shadow shadow-all
+  text-align center
+  cursor pointer
+  &:nth-child(1)
+    margin-left 0
+  &:nth-last-child
+    margin-right 0

frontend/src/component/Dashboard/MemberList.jsx

@@ -0,0 +1,162 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { Checkbox } from 'tracim_frontend_lib'
+
+require('./MemberList.styl')
+
+export class MemberList extends React.Component {
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      displayNewMemberList: true,
+      createAccountCheckbox: false
+    }
+  }
+
+  handleClickAddMemberBtn = () => this.setState({displayNewMemberList: false})
+
+  handleClickCloseAddMemberBtn = () => this.setState({displayNewMemberList: true})
+
+  handleClickCheckboxCreateAccount = e => {
+    e.preventDefault()
+    e.stopPropagation()
+    this.setState(prev => ({createAccountCheckbox: !prev.createAccountCheckbox}))
+  }
+
+  render () {
+    const { props, state } = this
+
+    return (
+      <div className='memberlist'>
+
+        <div className='memberlist__title subTitle'>
+          {props.t('Member List')}
+        </div>
+
+        <div className='memberlist__wrapper'>
+          {state.displayNewMemberList
+            ? (
+              <div>
+                <ul className='memberlist__list'>
+                  {props.memberList.map(m =>
+                    <li className='memberlist__list__item primaryColorBgLightenHover' key={m.id}>
+                      <div className='memberlist__list__item__avatar'>
+                        {m.avatarUrl ? <img src={m.avatarUrl} /> : <img src='NYI' />}
+                      </div>
+
+                      <div className='memberlist__list__item__info mr-auto'>
+                        <div className='memberlist__list__item__info__name'>
+                          {m.publicName}
+                        </div>
+
+                        <div className='memberlist__list__item__info__role'>
+                          {props.roleList.find(r => r.slug === m.role).label}
+                        </div>
+                      </div>
+
+                      <div className='memberlist__list__item__delete'>
+                        <i className='fa fa-trash-o' />
+                      </div>
+                    </li>
+                  )}
+                </ul>
+
+                <div className='memberlist__btnadd' onClick={this.handleClickAddMemberBtn}>
+                  <div className='memberlist__btnadd__button'>
+                    <div className='memberlist__btnadd__button__avatar'>
+                      <div className='memberlist__btnadd__button__avatar__icon'>
+                        <i className='fa fa-plus' />
+                      </div>
+                    </div>
+
+                    <div className='memberlist__btnadd__button__text'>
+                      {props.t('Add a member')}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            )
+            : (
+              <form className='memberlist__form'>
+                <div className='memberlist__form__close d-flex justify-content-end'>
+                  <i className='fa fa-times' onClick={this.handleClickCloseAddMemberBtn} />
+                </div>
+
+                <div className='memberlist__form__member'>
+                  <div className='memberlist__form__member__name'>
+                    <label className='name__label' htmlFor='addmember'>
+                      {props.t('Enter the name or email of the member')}
+                    </label>
+
+                    <input
+                      type='text'
+                      className='name__input form-control'
+                      id='addmember'
+                      placeholder='Nom ou Email'
+                      onChange={props.onChangeName}
+                    />
+                  </div>
+
+                  <div className='memberlist__form__member__create'>
+                    <div className='memberlist__form__member__create__checkbox mr-3'>
+                      <Checkbox
+                        name='createAccountCheckbox'
+                        onClickCheckbox={e => this.handleClickCheckboxCreateAccount(e)}
+                        checked={state.createAccountCheckbox}
+                      />
+                    </div>
+
+                    <div className='create__text'>
+                      {props.t('Create an account')}
+                    </div>
+                  </div>
+                </div>
+
+                <div className='memberlist__form__role'>
+                  <div className='memberlist__form__role__text'>
+                    {props.t('Choose the role of the member')}
+                  </div>
+
+                  <ul className='memberlist__form__role__list'>
+                    {props.roleList.map(r =>
+                      <li className='memberlist__form__role__list__item' key={r.slug}>
+                        <div className='item__radiobtn mr-3'>
+                          <input type='radio' name='role' value={r.slug} />
+                        </div>
+
+                        <div className='item__text'>
+                          <div className='item_text_icon mr-2' style={{color: r.hexcolor}}>
+                            <i className={`fa fa-${r.faIcon}`} />
+                          </div>
+
+                          <div className='item__text__name'>
+                            {r.label}
+                          </div>
+                        </div>
+                      </li>
+                    )}
+
+                  </ul>
+                </div>
+
+                <div className='memberlist__form__submitbtn'>
+                  <button className='btn btn-outline-primary'>
+                    {props.t('Validate')}
+                  </button>
+                </div>
+              </form>
+            )
+          }
+        </div>
+      </div>
+    )
+  }
+}
+
+export default MemberList
+
+MemberList.propTypes = {
+  memberList: PropTypes.array.isRequired,
+  onChangeName: PropTypes.func
+}

frontend/src/component/Dashboard/MemberList.styl

@@ -0,0 +1,117 @@
+.memberlist
+  margin 0 0 50px 0
+  width 35%
+  &__title
+    margin-bottom 20px
+    padding 6px
+    height 45px
+  &__wrapper
+    position relative
+    border 1px solid grey
+    height 480px
+  &__list
+    margin 0
+    padding 0
+    list-style none
+    height 400px
+    overflow-Y scroll
+    &__item
+      display flex
+      border-bottom 1px solid grey
+      padding 10px 15px
+      &:hover
+        background-color fourthColor
+      &:nth-last-child(1)
+        border-bottom 0
+      &:nth-child(even)
+        background-color grey-hover
+        &:hover
+          background-color fourthColor
+      &__avatar
+        margin-right 20px
+        & > img
+          width 50px
+          height 50px
+      &__info
+        &__name
+          font-size 20px
+        &__role
+          font-size 18px
+      &__delete
+        font-size 20px
+        color darkGrey
+        cursor pointer
+  &__btnadd
+    border-top 1px solid grey
+    padding 15px
+    &__button
+      display flex
+      align-items center
+      &__avatar
+        display flex
+        justify-content center
+        align-items center
+        margin-right 20px
+        border 2px dashed grey
+        border-radius 50%
+        width 50px
+        height 50px
+        cursor pointer
+        &__icon
+          color grey
+          font-size 25px
+      &__text
+        font-size 18px
+        color fontColor
+        cursor pointer
+  &__form
+    padding 15px
+    flex-direction column
+    height 100%
+    width 100%
+    background-color off-white
+    &__close
+      font-size 20px
+      & > i
+        cursor pointer
+    &__member
+      &__name
+        .name__label
+          margin 30px 0 20px 0
+          label()
+      .name__input
+        margin-bottom 20px
+        border 1px solid grey
+        border-radius 10px
+        padding 10px
+        width 300px
+      &__create
+        display flex
+        align-items center
+        margin 15px 0
+        line-height 23px
+        &__checkbox
+          padding-top 6px
+    &__role
+      margin-bottom 15px
+      coloricon()
+      &__text
+        margin 15px 0
+        label()
+      &__list
+        margin 0
+        padding 0
+        list-style none
+        &__item
+          display flex
+          align-items center
+          margin 10px 25px 10px 0
+          .item
+            &__text
+              display flex
+    &__submitbtn
+      display flex
+      justify-content flex-end
+      & > button
+        padding 8px 30px
+        cursor pointer

frontend/src/component/Dashboard/RecentActivity.jsx

@@ -0,0 +1,50 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+
+export const RecentActivity = props =>
+  <div className={props.customClass}>
+    <div className={`${props.customClass}__header`}>
+      <div className={classnames(`${props.customClass}__header__title`, 'subTitle')}>
+        {props.t('Recent activity')}
+      </div>
+
+      <div className={classnames(`${props.customClass}__header__allread`, 'btn btn-outline-primary')}>
+        {props.t('Mark everything as read')}
+      </div>
+    </div>
+
+    <div className={`${props.customClass}__wrapper`}>
+      {props.recentActivityFilteredForUser.map(content => {
+        const contentType = props.contentTypeList.find(ct => ct.slug === content.type)
+        return (
+          <div className={`${props.customClass}__workspace`} key={content.id}>
+            <div className={`${props.customClass}__workspace__icon`} style={{color: contentType.hexcolor}}>
+              <i className={`fa fa-${contentType.faIcon}`} />
+            </div>
+            <div className={`${props.customClass}__workspace__name`}>
+              {content.label}
+            </div>
+          </div>
+        )
+      })}
+
+      <div className={classnames(`${props.customClass}__more`, 'd-flex flex-row-reverse')}>
+        <div
+          className={classnames(`${props.customClass}__more__btn`, 'btn btn-outline-primary')}
+          onClick={props.onClickSeeMore}
+        >
+          {props.t('See more')}
+        </div>
+      </div>
+    </div>
+  </div>
+
+export default RecentActivity
+
+RecentActivity.propTypes = {
+  t: PropTypes.func.isRequired,
+  recentActivityFilteredForUser: PropTypes.array.isRequired,
+  contentTypeList: PropTypes.array.isRequired,
+  onClickSeeMore: PropTypes.func.isRequired
+}

frontend/src/container/Dashboard.jsx

@@ -1,10 +1,7 @@
 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,
@@ -12,13 +9,21 @@ import {
 } from 'tracim_frontend_lib'
 import {
   getWorkspaceDetail,
-  getWorkspaceMemberList
+  getWorkspaceMemberList,
+  getWorkspaceRecentActivityList,
+  getWorkspaceReadStatusList
 } from '../action-creator.async.js'
 import {
-  addFlashMessage,
+  newFlashMessage,
   setWorkspaceDetail,
-  setWorkspaceMemberList
+  setWorkspaceMemberList,
+  setWorkspaceRecentActivityList,
+  setWorkspaceReadStatusList
 } from '../action-creator.sync.js'
+import { ROLE } from '../helper.js'
+import ContentTypeBtn from '../component/Dashboard/ContentTypeBtn.jsx'
+import RecentActivity from '../component/Dashboard/RecentActivity.jsx'
+import MemberList from '../component/Dashboard/MemberList.jsx'
 
 class Dashboard extends React.Component {
   constructor (props) {
@@ -38,23 +43,33 @@ class Dashboard extends React.Component {
     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
+        props.dispatch(setWorkspaceDetail(fetchWorkspaceDetail.json)); break
+      default:
+        props.dispatch(newFlashMessage(props.t('An error has happened when fetching workspace detail'), 'warning')); break
     }
 
     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
+        props.dispatch(setWorkspaceMemberList(fetchWorkspaceMemberList.json)); break
+      default:
+        props.dispatch(newFlashMessage(props.t('An error has happened while fetching member list'), 'warning')); break
+    }
+
+    const fetchWorkspaceRecentActivityList = await props.dispatch(getWorkspaceRecentActivityList(props.user, state.workspaceIdInUrl))
+    switch (fetchWorkspaceRecentActivityList.status) {
+      case 200:
+        props.dispatch(setWorkspaceRecentActivityList(fetchWorkspaceRecentActivityList.json)); break
+      default:
+        props.dispatch(newFlashMessage(props.t('An error has happened while fetching recent activity list'), 'warning')); break
+    }
+
+    const fetchWorkspaceReadStatusList = await props.dispatch(getWorkspaceReadStatusList(props.user, state.workspaceIdInUrl))
+    switch (fetchWorkspaceReadStatusList.status) {
+      case 200:
+        props.dispatch(setWorkspaceReadStatusList(fetchWorkspaceReadStatusList.json)); break
+      default:
+        props.dispatch(newFlashMessage(props.t('An error has happened while fetching read status list'), 'warning')); break
     }
   }
 
@@ -112,15 +127,24 @@ class Dashboard extends React.Component {
                     {props.t(`Hi ! ${props.user.public_name}, vous êtes actuellement`)}
                   </div>
 
-                  <div className='dashboard__userstatut__role__definition'>
-                    <div className='dashboard__userstatut__role__definition__icon'>
-                      <i className='fa fa-graduation-cap' />
-                    </div>
+                  {(() => {
+                    const myself = props.curWs.memberList.find(m => m.id === props.user.user_id)
+                    if (myself === undefined) return
 
-                    <div className='dashboard__userstatut__role__definition__text'>
-                      {(member => member ? member.role : '')(props.curWs.member.find(m => m.id === props.user.user_id))}
-                    </div>
-                  </div>
+                    const myRole = ROLE.find(r => r.slug === myself.role)
+
+                    return (
+                      <div className='dashboard__userstatut__role__definition'>
+                        <div className='dashboard__userstatut__role__definition__icon'>
+                          <i className={`fa fa-${myRole.faIcon}`} />
+                        </div>
+
+                        <div className='dashboard__userstatut__role__definition__text'>
+                          {myRole.label}
+                        </div>
+                      </div>
+                    )
+                  })()}
                 </div>
 
                 <div className='dashboard__userstatut__notification'>
@@ -167,170 +191,32 @@ class Dashboard extends React.Component {
 
             <div className='dashboard__calltoaction justify-content-xl-center'>
               {props.contentType.map(ct =>
-                <div
-                  className='dashboard__calltoaction__button btnaction'
-                  style={{
-                    backgroundColor: ct.hexcolor,
-                    ':hover': {
-                      backgroundColor: color(ct.hexcolor).darken(0.15).hexString()
-                    }
-                  }}
+                <ContentTypeBtn
+                  customClass='dashboard__calltoaction__button'
+                  hexcolor={ct.hexcolor}
+                  label={ct.label}
+                  faIcon={ct.faIcon}
+                  creationLabel={ct.creationLabel}
                   key={ct.label}
-                >
-                  <div className='dashboard__calltoaction__button__text'>
-                    <div className='dashboard__calltoaction__button__text__icon'>
-                      <i className={`fa fa-${ct.faIcon}`} />
-                    </div>
-                    <div className='dashboard__calltoaction__button__text__title'>
-                      {ct.creationLabel}
-                    </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__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>
-
-                      </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>
-
-                      </ul>
-                    </div>
-
-                    <div className='dashboard__memberlist__form__submitbtn'>
-                      <button className='btn btn-outline-primary'>
-                        {this.props.t('Validate')}
-                      </button>
-                    </div>
-                  </form>
-                  }
-                </div>
-              </div>
+            <div className='dashboard__workspaceInfo'>
+              <RecentActivity
+                customClass='dashboard__activity'
+                recentActivityFilteredForUser={props.curWs.recentActivityList.filter(content => !props.curWs.contentReadStatusList.includes(content.id))}
+                contentTypeList={props.contentType}
+                onClickSeeMore={() => {}}
+                t={props.t}
+              />
+
+              <MemberList
+                customClass='dashboard__memberlist'
+                memberList={props.curWs.memberList}
+                roleList={ROLE}
+                t={props.t}
+              />
             </div>
 
             <div className='dashboard__moreinfo'>
@@ -401,4 +287,4 @@ class Dashboard extends React.Component {
 }
 
 const mapStateToProps = ({ user, contentType, currentWorkspace }) => ({ user, contentType, curWs: currentWorkspace })
-export default connect(mapStateToProps)(translate()(Radium(Dashboard)))
+export default connect(mapStateToProps)(translate()(Dashboard))

frontend/src/container/Dashboard_old.jsx

@@ -1,571 +0,0 @@
-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

@@ -6,11 +6,14 @@ import { translate } from 'react-i18next'
 import appFactory from '../appFactory.js'
 import WorkspaceListItem from '../component/Sidebar/WorkspaceListItem.jsx'
 import {
+  setAppList,
+  setContentTypeList,
   setWorkspaceListIsOpenInSidebar,
   updateWorkspaceFilter,
   updateWorkspaceListData
 } from '../action-creator.sync.js'
 import {
+  getAppList, getContentTypeList,
   getWorkspaceList
 } from '../action-creator.async.js'
 import { PAGE, workspaceConfig } from '../helper.js'
@@ -32,13 +35,13 @@ class Sidebar extends React.Component {
     switch (type) {
       case 'refreshWorkspaceList':
         console.log('%c<Sidebar> Custom event', 'color: #28a745', type, data)
-        this.loadWorkspaceList()
+        this.loadAppConfigAndWorkspaceList()
         break
     }
   }
 
   componentDidMount () {
-    this.loadWorkspaceList()
+    this.loadAppConfigAndWorkspaceList()
   }
 
   componentDidUpdate (prevProps, prevState) {
@@ -49,11 +52,17 @@ class Sidebar extends React.Component {
     if (prevState.workspaceIdInUrl !== newWorkspaceId) this.setState({workspaceIdInUrl: newWorkspaceId})
   }
 
-  loadWorkspaceList = async () => {
+  loadAppConfigAndWorkspaceList = async () => {
     const { workspaceIdInUrl } = this.state
     const { user, dispatch } = this.props
 
     if (user.user_id !== -1) {
+      const fetchGetAppList = await dispatch(getAppList(user))
+      if (fetchGetAppList.status === 200) dispatch(setAppList(fetchGetAppList.json))
+
+      const fetchGetContentTypeList = await dispatch(getContentTypeList(user))
+      if (fetchGetContentTypeList.status === 200) dispatch(setContentTypeList(fetchGetContentTypeList.json))
+
       const fetchGetWorkspaceList = await dispatch(getWorkspaceList(user))
 
       if (fetchGetWorkspaceList.status === 200) {

frontend/src/container/Tracim.jsx

@@ -15,15 +15,11 @@ import {
 import PrivateRoute from './PrivateRoute.jsx'
 import { COOKIE, PAGE } from '../helper.js'
 import {
-  getAppList,
-  getUserIsConnected,
-  getContentTypeList
+  getUserIsConnected
 } from '../action-creator.async.js'
 import {
   removeFlashMessage,
-  setAppList,
-  setUserConnected,
-  setContentTypeList
+  setUserConnected
 } from '../action-creator.sync.js'
 import Cookies from 'js-cookie'
 
@@ -54,24 +50,14 @@ class Tracim extends React.Component {
     const fetchGetUserIsConnected = await dispatch(getUserIsConnected(userFromCookies))
     switch (fetchGetUserIsConnected.status) {
       case 200:
-        const userLogged = {
+        dispatch(setUserConnected({
           ...fetchGetUserIsConnected.json,
           auth: userFromCookies.auth,
           logged: true
-        }
-
-        dispatch(setUserConnected(userLogged))
-
-        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:
         dispatch(setUserConnected({logged: false})); break
-
       default:
         dispatch(setUserConnected({logged: null})); break
     }
@@ -110,5 +96,5 @@ class Tracim extends React.Component {
   }
 }
 
-const mapStateToProps = ({ flashMessage }) => ({ flashMessage })
+const mapStateToProps = ({ user, appList, contentType, flashMessage }) => ({ user, appList, contentType, flashMessage })
 export default withRouter(connect(mapStateToProps)(translate()(Tracim)))

frontend/src/container/WorkspaceContent.jsx

@@ -192,7 +192,7 @@ class WorkspaceContent extends React.Component {
             subtitle={workspaceContentList.label ? workspaceContentList.label : ''}
           >
             <DropdownCreateButton
-              parentClass='workspace__header__btnaddworkspace'
+              parentClass='workspace__header__btnaddcontent'
               idFolder={null} // null because it is workspace root content
               onClickCreateContent={this.handleClickCreateContent}
               availableApp={contentType}

frontend/src/css/Dashboard.styl

@@ -59,7 +59,6 @@ coloricon()
   &__userstatut
     width 35%
     &__role
-      flexwrap()
       margin 20px 0
       font-size 18px
       &__msg
@@ -93,12 +92,15 @@ coloricon()
           font-size 30px
         &__title
           font-size 18px
-  &__wksinfo
+  &__workspaceInfo
     flexwrap()
-    margin-top 150px
   &__activity
     margin 0 35px 50px 0
     width 60%
+    &__wrapper
+      border 1px solid grey
+      height 480px
+      overflow-y scroll
     &__header
       display flex
       justify-content space-between
@@ -109,9 +111,6 @@ coloricon()
         padding 10px 25px
         font-size 18px
         cursor pointer
-    &__wrapper
-      border 1px solid grey
-      height 480px
     &__workspace
       display flex
       align-items center
@@ -137,120 +136,6 @@ coloricon()
         margin 15px
         padding 10px 25px
         cursor pointer
-  &__memberlist
-    margin 0 0 50px 0
-    width 35%
-    &__title
-      margin-bottom 20px
-      padding 6px
-      height 45px
-    &__wrapper
-      position relative
-      border 1px solid grey
-      height 480px
-    &__list
-      margin 0
-      padding 0
-      list-style none
-      height 400px
-      overflow-Y scroll
-      &__item
-        display flex
-        border-bottom 1px solid grey
-        padding 10px 15px
-        &:hover
-          background-color fourthColor
-        &:nth-last-child(1)
-          border-bottom 0
-        &:nth-child(even)
-          background-color grey-hover
-          &:hover
-            background-color fourthColor
-        &__avatar
-          margin-right 20px
-          & > img
-            width 50px
-            height 50px
-        &__info
-          &__name
-            font-size 20px
-          &__role
-            font-size 18px
-        &__delete
-          font-size 20px
-          color darkGrey
-          cursor pointer
-    &__btnadd
-      border-top 1px solid grey
-      padding 15px
-      &__button
-        display flex
-        align-items center
-        &__avatar
-          display flex
-          justify-content center
-          align-items center
-          margin-right 20px
-          border 2px dashed grey
-          border-radius 50%
-          width 50px
-          height 50px
-          cursor pointer
-          &__icon
-            color grey
-            font-size 25px
-        &__text
-          font-size 18px
-          color fontColor
-          cursor pointer
-    &__form
-      padding 15px
-      flex-direction column
-      height 100%
-      width 100%
-      background-color off-white
-      &__close
-        font-size 20px
-        & > i
-          cursor pointer
-      &__member
-        &__name
-          .name__label
-            margin 30px 0 20px 0
-            label()
-          .name__input
-            margin-bottom 20px
-            border 1px solid grey
-            border-radius 10px
-            padding 10px
-            width 300px
-        &__create
-          display flex
-          align-items center
-          margin 15px 0
-      &__role
-        margin-bottom 15px
-        coloricon()
-        &__text
-          margin 15px 0
-          label()
-        &__list
-          margin 0
-          padding 0
-          list-style none
-          &__item
-            display flex
-            align-items center
-            margin 10px 25px 10px 0
-            .item
-              &__text
-                display flex
-      &__submitbtn
-        display flex
-        justify-content flex-end
-        & > button
-          padding 8px 30px
-          cursor pointer
   &__moreinfo
     display flex
     justify-content space-between

frontend/src/css/Generic.styl

@@ -198,23 +198,6 @@ a
   font-weight 500
   color thirdColor
 
-.btnaction
-  display flex
-  flex-direction column
-  justify-content center
-  margin 0 15px
-  border-radius 10px
-  padding 15px
-  width 230px
-  height 200px
-  box-shadow shadow-all
-  text-align center
-  cursor pointer
-  &:nth-child(1)
-    margin-left 0
-  &:nth-last-child
-    margin-right 0
-
 .genericBtnInfoDashboard
   &__btn
     display flex

frontend/src/helper.js

@@ -45,24 +45,28 @@ export const PAGE = {
 
 export const ROLE = [{
   id: 0,
-  name: 'reader',
-  icon: 'fa-eye',
-  translationKey: 'role.reader'
+  slug: 'reader',
+  faIcon: 'eye',
+  hexcolor: '#15D948',
+  label: 'Reader'
 }, {
   id: 1,
-  name: 'contributor',
-  icon: 'fa-pencil',
-  translationKey: 'role.contributor'
+  slug: 'contributor',
+  faIcon: 'pencil',
+  hexcolor: '#3145F7',
+  label: 'Contributor'
 }, {
   id: 2,
-  name: 'content_manager',
-  icon: 'fa-graduation-cap',
-  translationKey: 'role.content_manager'
+  slug: 'content-manager',
+  faIcon: 'graduation-cap',
+  hexcolor: '#f2af2d',
+  label: 'Content manager'
 }, {
   id: 3,
-  name: 'manager',
-  icon: 'fa-gavel',
-  translationKey: 'role.manager'
+  slug: 'workspace-manager',
+  faIcon: 'gavel',
+  hexcolor: '#ed0007',
+  label: 'Workspace manager'
 }]
 
 export const handleRouteFromApi = route => route.startsWith('/#') ? route.slice(2) : route

frontend/src/reducer/currentWorkspace.js

@@ -1,4 +1,10 @@
-import {SET, WORKSPACE_DETAIL, WORKSPACE_MEMBER_LIST} from '../action-creator.sync.js'
+import {
+  SET,
+  WORKSPACE_DETAIL,
+  WORKSPACE_MEMBER_LIST,
+  WORKSPACE_READ_STATUS_LIST,
+  WORKSPACE_RECENT_ACTIVITY_LIST
+} from '../action-creator.sync.js'
 import { handleRouteFromApi } from '../helper.js'
 
 const defaultWorkspace = {
@@ -6,8 +12,10 @@ const defaultWorkspace = {
   slug: '',
   label: '',
   description: '',
-  sidebarEntries: [],
-  member: []
+  sidebarEntryList: [],
+  memberList: [],
+  recentActivityList: [],
+  contentReadStatusList: []
 }
 
 export default function currentWorkspace (state = defaultWorkspace, action) {
@@ -19,7 +27,7 @@ export default function currentWorkspace (state = defaultWorkspace, action) {
         slug: action.workspaceDetail.slug,
         label: action.workspaceDetail.label,
         description: action.workspaceDetail.description,
-        sidebarEntries: action.workspaceDetail.sidebar_entries.map(sbe => ({
+        sidebarEntryList: action.workspaceDetail.sidebar_entries.map(sbe => ({
           slug: sbe.slug,
           route: handleRouteFromApi(sbe.route),
           faIcon: sbe.fa_icon,
@@ -31,15 +39,40 @@ export default function currentWorkspace (state = defaultWorkspace, action) {
     case `${SET}/${WORKSPACE_MEMBER_LIST}`:
       return {
         ...state,
-        member: action.workspaceMemberList.map(m => ({
+        memberList: 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,
+          isActive: m.is_active
         }))
       }
 
+    case `${SET}/${WORKSPACE_RECENT_ACTIVITY_LIST}`:
+      return {
+        ...state,
+        recentActivityList: action.workspaceRecentActivityList.map(ra => ({
+          id: ra.content_id,
+          slug: ra.slug,
+          label: ra.label,
+          type: ra.content_type,
+          idParent: ra.parent_id,
+          showInUi: ra.show_in_ui,
+          isArchived: ra.is_archived,
+          isDeleted: ra.is_deleted,
+          statusSlug: ra.status,
+          subContentTypeSlug: ra.sub_content_types
+        }))
+      }
+
+    case `${SET}/${WORKSPACE_READ_STATUS_LIST}`:
+      return {
+        ...state,
+        contentReadStatusList: action.workspaceReadStatusList
+          .filter(content => content.read_by_user)
+          .map(content => content.content_id)
+      }
+
     default:
       return state
   }

frontend/src/reducer/workspaceContentList.js

@@ -16,7 +16,7 @@ export default function workspaceContentList (state = [], action) {
         type: wsc.content_type,
         idWorkspace: wsc.workspace_id,
         isArchived: wsc.is_archived,
-        parentId: wsc.parent_id,
+        idParent: wsc.parent_id,
         isDeleted: wsc.is_deleted,
         showInUi: wsc.show_in_ui,
         statusSlug: wsc.status,

frontend_lib/dist/index.html

@@ -17,6 +17,6 @@
 
   <div id='content'></div>
 
-  <script type='text/javascript' src='./tracim_lib.dev.js'></script>
+  <script type='text/javascript' src='./tracim_frontend_lib.dev.js'></script>
 </body>
 </html>

frontend_lib/package.json

@@ -7,8 +7,8 @@
     "servdev": "NODE_ENV=development webpack-dev-server --watch --colors --inline --hot --progress",
     "servdevwindoz": "set NODE_ENV=development&& webpack-dev-server --watch --colors --inline --hot --progress",
     "servdev-dashboard": "NODE_ENV=development webpack-dashboard -m -p 9870 -- webpack-dev-server --watch --colors --inline --hot --progress",
-    "buildwindoz": "set NODE_ENV=production&& webpack -p",
-    "build": "NODE_ENV=production webpack -p",
+    "buildwindoz": "echo 'Only use npm run buildtracimlibwindoz'",
+    "build": "echo 'Only use npm run buildtracimlib'",
     "build-translation": "node i18next.scanner.js",
     "buildtracimlib": "NODE_ENV=production webpack -p && echo '/* eslint-disable */' | cat - dist/tracim_frontend_lib.js > temp && mv temp dist/tracim_frontend_lib.js && printf '\n/* eslint-enable */\n' >> dist/tracim_frontend_lib.js",
     "buildtracimlibwindoz": "set NODE_ENV=production&& webpack -p && echo /* eslint-disable */ | cat - dist/tracim_frontend_lib.js > temp && mv temp dist/tracim_frontend_lib.js && echo /* eslint-enable */>> dist/tracim_frontend_lib.js",

frontend_lib/src/component/Input/Checkbox.jsx

@@ -0,0 +1,68 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+
+const style = {
+  label: {
+    position: 'relative',
+    width: '18px',
+    height: '18px',
+    border: '1px solid #999',
+    borderRadius: '3px',
+    backgroundColor: '#eee',
+    cursor: 'pointer'
+  },
+  checked: {
+    position: 'absolute',
+    top: '-3px',
+    left: '2px',
+    fontSize: '18px',
+    color: '#333'
+  },
+  input: {
+    width: '0',
+    height: '0',
+    visibility: 'hidden'
+  },
+  disabled: {
+    cursor: 'default'
+  }
+}
+
+export const Checkbox = props =>
+  <label
+    className={classnames('checkboxCustom', {'checked': props.checked})}
+    style={{
+      ...style.label,
+      ...(props.disabled ? style.disabled : {})
+    }}
+    onClick={props.onClickCheckbox}
+  >
+    { props.checked && <div className='checboxCustom__checked' style={style.checked}>✔</div> }
+    <input
+      type='checkbox'
+      name={`checkbox-${props.name}`}
+      checked={props.checked}
+      defaultChecked={props.defaultChecked}
+      onChange={() => {}} // to remove warning
+      style={style.input}
+      disabled={props.disabled}
+    />
+  </label>
+
+Checkbox.propTypes = {
+  name: PropTypes.string.isRequired,
+  onClickCheckbox: PropTypes.func.isRequired,
+  checked: PropTypes.bool,
+  defaultChecked: PropTypes.bool,
+  disabled: PropTypes.bool
+}
+
+Checkbox.defaultProps = {
+  name: '',
+  onClickCheckbox: () => {},
+  checked: false,
+  disabled: false
+}
+
+export default Checkbox

frontend_lib/src/index.dev.js

@@ -8,6 +8,7 @@ import PopinFixedContent from './component/PopinFixed/PopinFixedContent.jsx'
 
 import TextAreaApp from './component/Input/TextAreaApp/TextAreaApp.jsx'
 import BtnSwitch from './component/Input/BtnSwitch/BtnSwitch.jsx'
+import Checkbox from './component/Input/Checkbox.jsx'
 
 import Timeline from './component/Timeline/Timeline.jsx'
 import TimelineDebugData from './component/Timeline/debugData.js'
@@ -17,6 +18,7 @@ import Delimiter from './component/Delimiter/Delimiter.jsx'
 import CardPopup from './component/CardPopup/CardPopup.jsx'
 import CardPopupCreateContent from './component/CardPopup/CardPopupCreateContent.jsx'
 
+
 import NewVersionButton from './component/OptionComponent/NewVersionBtn.jsx'
 import ArchiveDeleteContent from './component/OptionComponent/ArchiveDeleteContent.jsx'
 
@@ -78,6 +80,11 @@ ReactDOM.render(
           <span>Here will be the app content. Style is handled by the app (obviously)</span>
           <BtnSwitch />
           {/* <TextAreaApp customClass={'randomClass'} text={'woot'} /> */}
+          <Checkbox
+            name='osef'
+            onClickCheckbox={() => {}}
+            checked
+          />
         </div>
 
         <Timeline

frontend_lib/src/index.js

@@ -1,8 +1,7 @@
-import { libAddAllResourceI18n, libHandleFetchResult } from './helper.js'
-
-// fr and en are deprecated
-import fr from './translate/fr.js'
-import en from './translate/en.js'
+import {
+  libAddAllResourceI18n,
+  libHandleFetchResult
+} from './helper.js'
 
 import libPopinFixed from './component/PopinFixed/PopinFixed.jsx'
 import libPopinFixedHeader from './component/PopinFixed/PopinFixedHeader.jsx'
@@ -13,6 +12,7 @@ import libTimeline from './component/Timeline/Timeline.jsx'
 
 import libTextAreaApp from './component/Input/TextAreaApp/TextAreaApp.jsx'
 import libBtnSwitch from './component/Input/BtnSwitch/BtnSwitch.jsx'
+import libCheckbox from './component/Input/Checkbox.jsx'
 
 import libPageWrapper from './component/Layout/PageWrapper.jsx'
 import libPageTitle from './component/Layout/PageTitle.jsx'
@@ -27,9 +27,6 @@ import libNewVersionBtn from './component/OptionComponent/NewVersionBtn.jsx'
 import libArchiveDeleteContent from './component/OptionComponent/ArchiveDeleteContent.jsx'
 import libSelectStatus from './component/Input/SelectStatus/SelectStatus.jsx'
 
-export const langFr = fr
-export const langEn = en
-
 export const addAllResourceI18n = libAddAllResourceI18n
 
 export const handleFetchResult = libHandleFetchResult
@@ -43,6 +40,7 @@ export const Timeline = libTimeline
 
 export const TextAreaApp = libTextAreaApp
 export const BtnSwitch = libBtnSwitch
+export const Checkbox = libCheckbox
 
 export const PageWrapper = libPageWrapper
 export const PageTitle = libPageTitle

install_frontend_dependencies.sh

@@ -42,7 +42,6 @@ log "npm link tracim_frontend_lib"
 npm link tracim_frontend_lib
 cd -
 
-
 # install app Admin Workspace User
 
 log "cd frontend_app_admin_workspace_user"