Merge branch 'develop' into feature/650_folder_missing_endpoint_about_edit

backend/doc/roles.md

@@ -7,6 +7,11 @@ The other is workspace related and is called "workspace role".
 
 ## Global profile
 
+|                               | Normal User | Managers    | Admin          |
+|-------------------------------|-------------|-------------|----------------|
+| slug                            | users       | managers    | administrators |
+|-------------------------------|-------------|-------------|---------|
+
 
 |                               | Normal User | Managers    | Admin   |
 |-------------------------------|-------------|-------------|---------|
@@ -22,11 +27,18 @@ The other is workspace related and is called "workspace role".
 | access to all user data (/users/{user_id} endpoints) |personal-only|personal-only| yes     |
 
 
+
+
 ## Workspace Roles
 
 
 |                              | Reader | Contributor | Content Manager | Workspace Manager |
 |------------------------------|--------|-------------|-----------------|-------------------|
+| slug                         | reader | contributor | content-manager |  workspace-manager|
+|------------------------------|--------|-------------|-----------------|-------------------|
+
+|                              | Reader | Contributor | Content Manager | Workspace Manager |
+|------------------------------|--------|-------------|-----------------|-------------------|
 | read content                 |  yes   | yes         | yes             | yes               |
 |------------------------------|--------|-------------|-----------------|-------------------|
 | create content               |  no    | yes         | yes             | yes               |

backend/tracim_backend/lib/core/content.py

@@ -1145,7 +1145,7 @@ class ContentApi(object):
             content.properties = properties
 
     def set_status(self, content: Content, new_status: str):
-        if new_status in CONTENT_STATUS.allowed_slugs_values():
+        if new_status in CONTENT_STATUS.get_all_slugs_values():
             content.status = new_status
             content.revision_type = ActionDescription.STATUS_UPDATE
         else:

backend/tracim_backend/models/contents.py

@@ -85,11 +85,11 @@ class ContentStatusList(object):
                 return item
         raise ContentStatusNotExist()
 
-    def allowed_slugs_values(self) -> typing.List[str]:
+    def get_all_slugs_values(self) -> typing.List[str]:
         """ Get alls slugs"""
         return [item.slug for item in self._content_status]
 
-    def allowed(self) -> typing.List[ContentStatus]:
+    def get_all(self) -> typing.List[ContentStatus]:
         """ Get all status"""
         return [item for item in self._content_status]
 
@@ -139,7 +139,7 @@ thread_type = ContentType(
     hexcolor=thread.hexcolor,
     label='Thread',
     creation_label='Discuss about a topic',
-    available_statuses=CONTENT_STATUS.allowed(),
+    available_statuses=CONTENT_STATUS.get_all(),
 )
 
 file_type = ContentType(
@@ -148,7 +148,7 @@ file_type = ContentType(
     hexcolor=_file.hexcolor,
     label='File',
     creation_label='Upload a file',
-    available_statuses=CONTENT_STATUS.allowed(),
+    available_statuses=CONTENT_STATUS.get_all(),
 )
 
 markdownpluspage_type = ContentType(
@@ -157,7 +157,7 @@ markdownpluspage_type = ContentType(
     hexcolor=markdownpluspage.hexcolor,
     label='Rich Markdown File',
     creation_label='Create a Markdown document',
-    available_statuses=CONTENT_STATUS.allowed(),
+    available_statuses=CONTENT_STATUS.get_all(),
 )
 
 html_documents_type = ContentType(
@@ -166,7 +166,7 @@ html_documents_type = ContentType(
     hexcolor=html_documents.hexcolor,
     label='Text Document',
     creation_label='Write a document',
-    available_statuses=CONTENT_STATUS.allowed(),
+    available_statuses=CONTENT_STATUS.get_all(),
     slug_alias=['page']
 )
 
@@ -177,8 +177,7 @@ folder_type = ContentType(
     hexcolor=thread.hexcolor,
     label='Folder',
     creation_label='Create collection of any documents',
-    available_statuses=CONTENT_STATUS.allowed(),
-    allow_sub_content=True,
+    available_statuses=CONTENT_STATUS.get_all(),
 )
 
 
@@ -189,7 +188,7 @@ event_type = ContentType(
     hexcolor=thread.hexcolor,
     label='Event',
     creation_label='Event',
-    available_statuses=CONTENT_STATUS.allowed(),
+    available_statuses=CONTENT_STATUS.get_all(),
 )
 
 # TODO - G.M - 31-05-2018 - Set Better Event params
@@ -199,7 +198,7 @@ comment_type = ContentType(
     hexcolor=thread.hexcolor,
     label='Comment',
     creation_label='Comment',
-    available_statuses=CONTENT_STATUS.allowed(),
+    available_statuses=CONTENT_STATUS.get_all(),
 )
 
 

backend/tracim_backend/views/core_api/schemas.py

@@ -697,7 +697,7 @@ class ContentDigestSchema(marshmallow.Schema):
     )
     status = marshmallow.fields.Str(
         example='closed-deprecated',
-        validate=OneOf(CONTENT_STATUS.allowed_slugs_values()),
+        validate=OneOf(CONTENT_STATUS.get_all_slugs_values()),
         description='this slug is found in content_type available statuses',
         default=open_status
     )
@@ -858,7 +858,7 @@ class FileContentModifySchema(TextBasedContentModifySchema):
 class SetContentStatusSchema(marshmallow.Schema):
     status = marshmallow.fields.Str(
         example='closed-deprecated',
-        validate=OneOf(CONTENT_STATUS.allowed_slugs_values()),
+        validate=OneOf(CONTENT_STATUS.get_all_slugs_values()),
         description='this slug is found in content_type available statuses',
         default=open_status,
         required=True,

build_full_frontend.sh

@@ -53,6 +53,24 @@ log "cp i18next.scanner/fr/translation.json ../frontend/dist/app/thread_fr_trans
 cp i18next.scanner/fr/translation.json ../frontend/dist/app/thread_fr_translation.json
 cd -
 
+# app Workspace
+
+log "cd frontend_app_workspace"
+cd frontend_app_workspace
+
+log "npm run build$windoz # for frontend_app_workspace"
+npm run build$windoz
+
+log "cp dist/workspace.app.js"
+cp dist/workspace.app.js ../frontend/dist/app
+
+log "cp i18next.scanner/en/translation.json ../frontend/dist/app/workspace_en_translation.json"
+cp i18next.scanner/en/translation.json ../frontend/dist/app/workspace_en_translation.json
+
+log "cp i18next.scanner/fr/translation.json ../frontend/dist/app/workspace_fr_translation.json"
+cp i18next.scanner/fr/translation.json ../frontend/dist/app/workspace_fr_translation.json
+cd -
+
 # app Admin Workspace User
 
 log "cd frontend_app_admin_workspace_user"

frontend/dist/appInterface.js

@@ -3,6 +3,8 @@
 
   getSelectedApp = name => {
     switch (name) {
+      case 'workspace':
+        return appWorkspace
       case 'html-document':
         return appHtmlDocument
       case 'thread':

frontend/dist/index.html

@@ -51,6 +51,7 @@
     <script src='/tracim.vendor.bundle.js'></script>
     <script src='/tracim.app.entry.js'></script>
 
+    <script src='/app/workspace.app.js'></script>
     <script src='/app/html-document.app.js'></script>
     <script src='/app/thread.app.js'></script>
     <!-- <script src='/app/file.app.js'></script> -->

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/component/common/Input/SubDropdownCreateButton.jsx

@@ -10,7 +10,10 @@ const SubDropdownCreateButton = props => {
         <div className='subdropdown__link dropdown-item' onClick={e => props.onClickCreateContent(e, props.idFolder, app.slug)} key={app.slug}>
           <div className={`subdropdown__link__${app.slug} d-flex align-items-center`}>
             <div className={`subdropdown__link__${app.slug}__icon mr-3`}>
-              <i className={`fa fa-fw fa-${app.faIcon}`} />
+              <i
+                className={`fa fa-fw fa-${app.faIcon}`}
+                style={{color: app.hexcolor}}
+              />
             </div>
             <div className='subdropdown__link__folder__text'>
               {app.creationLabel}

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

@@ -3,6 +3,7 @@ import { connect } from 'react-redux'
 import { withRouter } from 'react-router'
 import classnames from 'classnames'
 import { translate } from 'react-i18next'
+import appFactory from '../appFactory.js'
 import WorkspaceListItem from '../component/Sidebar/WorkspaceListItem.jsx'
 import {
   setWorkspaceListIsOpenInSidebar,
@@ -12,7 +13,7 @@ import {
 import {
   getWorkspaceList
 } from '../action-creator.async.js'
-import { PAGE } from '../helper.js'
+import { PAGE, workspaceConfig } from '../helper.js'
 
 const qs = require('query-string')
 
@@ -23,22 +24,23 @@ class Sidebar extends React.Component {
       sidebarClose: false,
       workspaceIdInUrl: props.match.params.idws ? parseInt(props.match.params.idws) : null
     }
-  }
-
-  async componentDidMount () {
-    const { workspaceIdInUrl } = this.state
-    const { user, workspaceList, dispatch } = this.props
 
-    if (user.user_id !== -1 && workspaceList.length === 0) {
-      const fetchGetWorkspaceList = await dispatch(getWorkspaceList(user))
+    document.addEventListener('appCustomEvent', this.customEventReducer)
+  }
 
-      if (fetchGetWorkspaceList.status === 200) {
-        dispatch(updateWorkspaceListData(fetchGetWorkspaceList.json))
-        dispatch(setWorkspaceListIsOpenInSidebar(workspaceIdInUrl || fetchGetWorkspaceList.json[0].workspace_id, true))
-      }
+  customEventReducer = async ({ detail: { type, data } }) => {
+    switch (type) {
+      case 'refreshWorkspaceList':
+        console.log('%c<Sidebar> Custom event', 'color: #28a745', type, data)
+        this.loadWorkspaceList()
+        break
     }
   }
 
+  componentDidMount () {
+    this.loadWorkspaceList()
+  }
+
   componentDidUpdate (prevProps, prevState) {
     // console.log('%c<Sidebar> Did Update', 'color: #c17838')
     if (this.props.match.params.idws === undefined || isNaN(this.props.match.params.idws)) return
@@ -47,6 +49,20 @@ class Sidebar extends React.Component {
     if (prevState.workspaceIdInUrl !== newWorkspaceId) this.setState({workspaceIdInUrl: newWorkspaceId})
   }
 
+  loadWorkspaceList = async () => {
+    const { workspaceIdInUrl } = this.state
+    const { user, dispatch } = this.props
+
+    if (user.user_id !== -1) {
+      const fetchGetWorkspaceList = await dispatch(getWorkspaceList(user))
+
+      if (fetchGetWorkspaceList.status === 200) {
+        dispatch(updateWorkspaceListData(fetchGetWorkspaceList.json))
+        dispatch(setWorkspaceListIsOpenInSidebar(workspaceIdInUrl || fetchGetWorkspaceList.json[0].workspace_id, true))
+      }
+    }
+  }
+
   handleClickWorkspace = (idWs, newIsOpenInSidebar) => this.props.dispatch(setWorkspaceListIsOpenInSidebar(idWs, newIsOpenInSidebar))
 
   handleClickAllContent = idWs => {
@@ -63,13 +79,15 @@ 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: {} })
   }
 
   handleClickToggleSidebar = () => this.setState(prev => ({sidebarClose: !prev.sidebarClose}))
 
+  handleClickNewWorkspace = () => this.props.renderAppPopupCreation(workspaceConfig, this.props.user, null, null)
+
   render () {
     const { sidebarClose, workspaceIdInUrl } = this.state
     const { activeLang, workspaceList, t } = this.props
@@ -103,7 +121,10 @@ class Sidebar extends React.Component {
             </nav>
 
             <div className='sidebar__btnnewworkspace'>
-              <button className='sidebar__btnnewworkspace__btn btn btn-primary primaryColorBg primaryColorBorder primaryColorBorderDarkenHover mb-5'>
+              <button
+                className='sidebar__btnnewworkspace__btn btn btn-primary primaryColorBg primaryColorBorder primaryColorBorderDarkenHover mb-5'
+                onClick={this.handleClickNewWorkspace}
+              >
                 {t('Create a workspace')}
               </button>
             </div>
@@ -124,11 +145,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)))
+export default withRouter(connect(mapStateToProps)(appFactory(translate()(Sidebar))))

frontend/src/container/Tracim.jsx

@@ -16,16 +16,33 @@ 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'
 
 class Tracim extends React.Component {
+  constructor (props) {
+    super(props)
+
+    document.addEventListener('appCustomEvent', this.customEventReducer)
+  }
+
+  customEventReducer = async ({ detail: { type, data } }) => {
+    switch (type) {
+      case 'redirect':
+        console.log('%c<Tracim> Custom event', 'color: #28a745', type, data)
+        this.props.history.push(data.url)
+        break
+    }
+  }
+
   async componentDidMount () {
     const { dispatch } = this.props
 
@@ -47,6 +64,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
@@ -270,19 +256,19 @@ coloricon()
     justify-content space-between
     flexwrap wrap
     &__webdav
-      margin-bottom 40px
+      margin 0 15px 40px 0
       &__btn
         width 300px
       &__information
-        width 550px
+        width 300px
     &__calendar
       margin-bottom 100px
       &__wrapperBtn
-        margin-right 300px
+        margin-right 290px
       &__btn
         width 300px
       &__information
-        width 550px
+        width 300px
 
 /**** MEDIAQUERIES *****/
 

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

@@ -12,6 +12,15 @@ export const COOKIE = {
   USER_AUTH: 'user_auth'
 }
 
+// Côme - 2018/08/02 - shouldn't this come from api ?
+export const workspaceConfig = {
+  slug: 'workspace',
+  faIcon: 'space-shuttle',
+  hexcolor: '#7d4e24',
+  creationLabel: 'Create a workspace',
+  domContainer: 'appFeatureContainer'
+}
+
 export const PAGE = {
   HOME: '/',
   WORKSPACE: {
@@ -55,3 +64,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),

frontend_app_workspace/.editorconfig

@@ -0,0 +1,13 @@
+# doc here : https://github.com/editorconfig/editorconfig/wiki/EditorConfig-Properties
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.py]
+indent_size = 4

frontend_app_workspace/.gitignore

@@ -0,0 +1,8 @@
+# Created by .ignore support plugin (hsz.mobi)
+.idea/
+.git/
+node_modules/
+dist/workspace.app.js
+dist/workspace.app.js.map
+dist/workspace.app.dev.js
+dist/workspace.app.dev.js.map

frontend_app_workspace/README.md

@@ -0,0 +1,3 @@
+# App Workspace for Tracim
+
+This repo is an app loaded by Tracim.

frontend_app_workspace/build_workspace.sh

@@ -0,0 +1,17 @@
+#!/bin/bash
+
+. ../bash_library.sh # source bash_library.sh
+
+windoz=""
+if [[ $1 = "-w" ]]; then
+    windoz="windoz"
+fi
+
+log "npm run build$windoz"
+npm run build$windoz
+log "cp dist/workspace.app.js ../frontend/dist/app"
+cp dist/workspace.app.js ../frontend/dist/app
+log "cp i18next.scanner/en/translation.json ../frontend/dist/app/workspace_en_translation.json"
+cp i18next.scanner/en/translation.json ../frontend/dist/app/workspace_en_translation.json
+log "cp i18next.scanner/fr/translation.json ../frontend/dist/app/workspace_fr_translation.json"
+cp i18next.scanner/fr/translation.json ../frontend/dist/app/workspace_fr_translation.json

frontend_app_workspace/dist/asset

@@ -0,0 +1 @@
+../../frontend/dist/asset/

frontend_app_workspace/dist/dev

@@ -0,0 +1 @@
+../../frontend/dist/dev/

frontend_app_workspace/dist/font

@@ -0,0 +1 @@
+../../frontend/dist/font/

frontend_app_workspace/dist/index.html

@@ -0,0 +1,110 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset='utf-8' />
+  <meta name="viewport" content="width=device-width, user-scalable=no" />
+  <title>Workspace App Tracim</title>
+  <link rel='shortcut icon' href='favicon.ico'>
+
+  <link rel="stylesheet" type="text/css" href="./font/font-awesome-4.7.0/css/font-awesome.css">
+  <link href="https://fonts.googleapis.com/css?family=Quicksand:300,400,500,700" rel="stylesheet">
+  <link rel="stylesheet" type="text/css" href="./dev/bootstrap-4.0.0-beta.css">
+</head>
+
+<body>
+  <script src="./dev/jquery-3.2.1.js"></script>
+  <script src="./dev/popper-1.12.3.js"></script>
+  <script src="./dev/bootstrap-4.0.0-beta.2.js"></script>
+
+  <script type="text/javascript" src="/asset/tinymce/js/tinymce/jquery.tinymce.min.js"></script>
+  <script type="text/javascript" src="/asset/tinymce/js/tinymce/tinymce.min.js"></script>
+
+  <div id='content'></div>
+
+  <script type='text/javascript'>
+    (function () {
+      wysiwyg = function (selector, handleOnChange) {
+        function base64EncodeAndTinyMceInsert (files) {
+          for (var i = 0; i < files.length; i++) {
+            if (files[i].size > 1000000)
+              files[i].allowed = confirm(files[i].name + " fait plus de 1mo et peut prendre du temps à insérer, voulez-vous continuer ?")
+          }
+
+          for (var i = 0; i < files.length; i++) {
+            if (files[i].allowed !== false && files[i].type.match('image.*')) {
+              var img = document.createElement('img')
+
+              var fr = new FileReader()
+
+              fr.readAsDataURL(files[i])
+
+              fr.onloadend = function (e) {
+                img.src = e.target.result
+                tinymce.activeEditor.execCommand('mceInsertContent', false, img.outerHTML)
+              }
+            }
+          }
+        }
+
+        // HACK: The tiny mce source code modal contain a textarea, but we
+        // can't edit it (like it's readonly). The following solution
+        // solve the bug: https://stackoverflow.com/questions/36952148/tinymce-code-editor-is-readonly-in-jtable-grid
+        $(document).on('focusin', function(e) {
+          if ($(e.target).closest(".mce-window").length) {
+            e.stopImmediatePropagation();
+          }
+        });
+
+        tinymce.init({
+          selector: selector,
+          menubar: false,
+          resize: false,
+          skin: "lightgray",
+          plugins:'advlist autolink lists link image charmap print preview anchor textcolor searchreplace visualblocks code fullscreen insertdatetime media table contextmenu paste code help',
+          toolbar: 'insert | formatselect | bold italic underline strikethrough forecolor backcolor | link | alignleft aligncenter alignright alignjustify  | numlist bullist outdent indent  | table | code ',
+          content_style: "div {height: 100%;}",
+          setup: function ($editor) {
+            $editor.on('change', function(e) {
+              handleOnChange({target: {value: $editor.getContent()}}) // target.value to emulate a js event so the react handler can expect one
+            })
+
+            //////////////////////////////////////////////
+            // add custom btn to handle image by selecting them with system explorer
+            $editor.addButton('customInsertImage', {
+              icon: 'mce-ico mce-i-image',
+              title: 'Image',
+              onclick: function () {
+                if ($('#hidden_tinymce_fileinput').length > 0) $('#hidden_tinymce_fileinput').remove()
+
+                fileTag = document.createElement('input')
+                fileTag.id = 'hidden_tinymce_fileinput'
+                fileTag.type = 'file'
+                $('body').append(fileTag)
+
+                $('#hidden_tinymce_fileinput').on('change', function () {
+                  base64EncodeAndTinyMceInsert($(this)[0].files)
+                })
+
+                $('#hidden_tinymce_fileinput').click()
+              }
+            })
+
+            //////////////////////////////////////////////
+            // Handle drag & drop image into TinyMce by encoding them in base64 (to avoid uploading them somewhere and keep saving comment in string format)
+            $editor
+              .on('drag dragstart dragend dragover dragenter dragleave drop', function (e) {
+                e.preventDefault()
+                e.stopPropagation()
+              })
+              .on('drop', function(e) {
+                base64EncodeAndTinyMceInsert(e.dataTransfer.files)
+              })
+          }
+        })
+      }
+    })()
+  </script>
+
+  <script src='./workspace.app.dev.js'></script>
+</body>
+</html>

frontend_app_workspace/i18next.scanner.js

@@ -0,0 +1,14 @@
+const scanner = require('i18next-scanner')
+const vfs = require('vinyl-fs')
+
+const option = require('../i18next.option.js')
+
+// --------------------
+// 2018/07/27 - currently, last version is 2.6.5 but a bug is spaming log with errors. So I'm using 2.6.1
+// this issue seems related : https://github.com/i18next/i18next-scanner/issues/88
+// --------------------
+
+vfs.src(['./src/**/*.jsx'])
+// .pipe(sort()) // Sort files in stream by path
+  .pipe(scanner(option))
+  .pipe(vfs.dest('./i18next.scanner'))

frontend_app_workspace/i18next.scanner/en/translation.json

@@ -0,0 +1,6 @@
+{
+  "Last version": "Last version",
+  "Validate and create": "Validate and create",
+  "Document's title": "Document's title",
+  "New Document": "New Document"
+}

frontend_app_workspace/i18next.scanner/fr/translation.json

@@ -0,0 +1,6 @@
+{
+  "Last version": "Dernière version",
+  "Validate and create": "Valider et créer",
+  "Document's title": "Titre du document",
+  "New Document": "Nouveau document"
+}

frontend_app_workspace/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "tracim_app_workspace",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "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 9874 -- webpack-dev-server --watch --colors --inline --hot --progress",
+    "build": "NODE_ENV=production webpack -p",
+    "build-translation": "node i18next.scanner.js",
+    "buildwindoz": "set NODE_ENV=production&& webpack -p",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "babel-core": "^6.26.0",
+    "babel-eslint": "^8.2.1",
+    "babel-loader": "^7.1.2",
+    "babel-plugin-transform-class-properties": "^6.24.1",
+    "babel-plugin-transform-object-assign": "^6.22.0",
+    "babel-plugin-transform-object-rest-spread": "^6.26.0",
+    "babel-polyfill": "^6.26.0",
+    "babel-preset-env": "^1.6.1",
+    "babel-preset-react": "^6.24.1",
+    "classnames": "^2.2.5",
+    "css-loader": "^0.28.7",
+    "file-loader": "^1.1.5",
+    "i18next": "^10.5.0",
+    "prop-types": "^15.6.0",
+    "react": "^16.0.0",
+    "react-dom": "^16.0.0",
+    "react-i18next": "^7.5.0",
+    "standard": "^11.0.0",
+    "standard-loader": "^6.0.1",
+    "style-loader": "^0.19.0",
+    "stylus": "^0.54.5",
+    "stylus-loader": "^3.0.1",
+    "url-loader": "^0.6.2",
+    "webpack": "^3.8.1",
+    "whatwg-fetch": "^2.0.3"
+  },
+  "devDependencies": {
+    "i18next-scanner": "^2.6.1",
+    "webpack-dashboard": "^1.1.1",
+    "webpack-dev-server": "^2.9.2"
+  },
+  "standard": {
+    "globals": [
+      "fetch",
+      "history",
+      "btoa",
+      "wysiwyg",
+      "tinymce",
+      "GLOBAL_renderAppFeature",
+      "GLOBAL_unmountApp",
+      "GLOBAL_dispatchEvent"
+    ],
+    "parser": "babel-eslint",
+    "ignore": []
+  }
+}

frontend_app_workspace/src/action.async.js

@@ -0,0 +1,14 @@
+import { FETCH_CONFIG } from './helper.js'
+
+export const postWorkspace = (user, apiUrl, newWorkspaceName) =>
+  fetch(`${apiUrl}/workspaces`, {
+    headers: {
+      'Authorization': 'Basic ' + user.auth,
+      ...FETCH_CONFIG.headers
+    },
+    method: 'POST',
+    body: JSON.stringify({
+      label: newWorkspaceName,
+      description: ''
+    })
+  })

frontend_app_workspace/src/container/PopupCreateWorkspace.jsx

@@ -0,0 +1,121 @@
+import React from 'react'
+import { translate } from 'react-i18next'
+import {
+  CardPopupCreateContent,
+  handleFetchResult,
+  addAllResourceI18n
+} from 'tracim_frontend_lib'
+import { postWorkspace } from '../action.async.js'
+import i18n from '../i18n.js'
+
+const debug = { // outdated
+  config: {
+    slug: 'workspace',
+    faIcon: 'space-shuttle',
+    hexcolor: '#7d4e24',
+    creationLabel: 'Create a workspace',
+    domContainer: 'appFeatureContainer',
+    apiUrl: 'http://localhost:3001',
+    apiHeader: {
+      'Accept': 'application/json',
+      'Content-Type': 'application/json',
+      'Authorization': 'Basic ' + btoa(`${'admin@admin.admin'}:${'admin@admin.admin'}`)
+    },
+    translation: {
+      en: {},
+      fr: {}
+    }
+  },
+  loggedUser: {
+    id: 5,
+    username: 'Smoi',
+    firstname: 'Côme',
+    lastname: 'Stoilenom',
+    email: 'osef@algoo.fr',
+    avatar: 'https://avatars3.githubusercontent.com/u/11177014?s=460&v=4'
+  },
+  idWorkspace: 1,
+  idFolder: null
+}
+
+class PopupCreateWorkspace extends React.Component {
+  constructor (props) {
+    super(props)
+    this.state = {
+      appName: 'workspace',
+      config: props.data ? props.data.config : debug.config,
+      loggedUser: props.data ? props.data.loggedUser : debug.loggedUser,
+      newWorkspaceName: ''
+    }
+
+    // i18n has been init, add resources from frontend
+    addAllResourceI18n(i18n, this.state.config.translation)
+    i18n.changeLanguage(this.state.loggedUser.lang)
+
+    document.addEventListener('appCustomEvent', this.customEventReducer)
+  }
+
+  customEventReducer = ({ detail: { type, data } }) => { // action: { type: '', data: {} }
+    switch (type) {
+      case 'allApp_changeLang':
+        console.log('%c<PopupCreateWorkspace> Custom event', 'color: #28a745', type, data)
+        this.setState(prev => ({
+          loggedUser: {
+            ...prev.loggedUser,
+            lang: data
+          }
+        }))
+        i18n.changeLanguage(data)
+        break
+    }
+  }
+
+  handleChangeNewWorkspaceName = e => this.setState({newWorkspaceName: e.target.value})
+
+  handleClose = () => GLOBAL_dispatchEvent({
+    type: 'hide_popupCreateWorkspace', // handled by tracim_front:dist/index.html
+    data: {
+      name: this.state.appName
+    }
+  })
+
+  handleValidate = async () => {
+    const { loggedUser, config, newWorkspaceName } = this.state
+
+    const fetchSaveNewWorkspace = postWorkspace(loggedUser, config.apiUrl, newWorkspaceName)
+
+    handleFetchResult(await fetchSaveNewWorkspace)
+      .then(resSave => {
+        if (resSave.apiResponse.status === 200) {
+          this.handleClose()
+
+          GLOBAL_dispatchEvent({ type: 'refreshWorkspaceList', data: {} })
+
+          GLOBAL_dispatchEvent({
+            type: 'redirect',
+            data: {
+              url: `/workspaces/${resSave.body.workspace_id}/dashboard`
+            }
+          })
+        }
+      })
+  }
+
+  render () {
+    return (
+      <CardPopupCreateContent
+        onClose={this.handleClose}
+        onValidate={this.handleValidate}
+        label={this.props.t('New workspace')} // @TODO get the lang of user
+        customColor={this.state.config.hexcolor}
+        faIcon={this.state.config.faIcon}
+        contentName={this.state.newWorkspaceName}
+        onChangeContentName={this.handleChangeNewWorkspaceName}
+        btnValidateLabel={this.props.t('Validate and create')}
+        inputPlaceholder={this.props.t("Workspace's name")}
+      />
+    )
+  }
+}
+
+export default translate()(PopupCreateWorkspace)

frontend_app_workspace/src/container/Workspace.jsx

@@ -0,0 +1,401 @@
+import React from 'react'
+import { translate } from 'react-i18next'
+import i18n from '../i18n.js'
+import {
+  addAllResourceI18n,
+  handleFetchResult,
+  PopinFixed,
+  PopinFixedHeader,
+  PopinFixedOption,
+  PopinFixedContent,
+  Timeline,
+  NewVersionBtn,
+  ArchiveDeleteContent,
+  SelectStatus
+} from 'tracim_frontend_lib'
+import { MODE, debug } from '../helper.js'
+import {
+  getHtmlDocContent,
+  getHtmlDocComment,
+  getHtmlDocRevision,
+  postHtmlDocNewComment,
+  putHtmlDocContent,
+  putHtmlDocStatus
+} from '../action.async.js'
+
+class Workspace extends React.Component {
+  constructor (props) {
+    super(props)
+    this.state = {
+      appName: 'html-document',
+      isVisible: true,
+      config: props.data ? props.data.config : debug.config,
+      loggedUser: props.data ? props.data.loggedUser : debug.loggedUser,
+      content: props.data ? props.data.content : debug.content,
+      rawContentBeforeEdit: '',
+      timeline: props.data ? [] : [], // debug.timeline,
+      newComment: '',
+      timelineWysiwyg: false,
+      mode: MODE.VIEW
+    }
+
+    // i18n has been init, add resources from frontend
+    addAllResourceI18n(i18n, this.state.config.translation)
+    i18n.changeLanguage(this.state.loggedUser.lang)
+
+    document.addEventListener('appCustomEvent', this.customEventReducer)
+  }
+
+  customEventReducer = ({ detail: { type, data } }) => { // action: { type: '', data: {} }
+    switch (type) {
+      case 'html-document_showApp':
+        console.log('%c<Workspace> Custom event', 'color: #28a745', type, data)
+        this.setState({isVisible: true})
+        break
+      case 'html-document_hideApp':
+        console.log('%c<Workspace> Custom event', 'color: #28a745', type, data)
+        this.setState({isVisible: false})
+        break
+      case 'html-document_reloadContent':
+        console.log('%c<Workspace> Custom event', 'color: #28a745', type, data)
+        this.setState(prev => ({content: {...prev.content, ...data}, isVisible: true}))
+        break
+      case 'allApp_changeLang':
+        console.log('%c<Workspace> Custom event', 'color: #28a745', type, data)
+        this.setState(prev => ({
+          loggedUser: {
+            ...prev.loggedUser,
+            lang: data
+          }
+        }))
+        i18n.changeLanguage(data)
+        break
+    }
+  }
+
+  componentDidMount () {
+    console.log('%c<Workspace> did mount', `color: ${this.state.config.hexcolor}`)
+
+    this.loadContent()
+  }
+
+  componentDidUpdate (prevProps, prevState) {
+    const { state } = this
+
+    console.log('%c<Workspace> did update', `color: ${this.state.config.hexcolor}`, prevState, state)
+
+    if (!prevState.content || !state.content) return
+
+    if (prevState.content.content_id !== state.content.content_id) this.loadContent()
+
+    if (state.mode === MODE.EDIT && prevState.mode !== state.mode) {
+      tinymce.remove('#wysiwygNewVersion')
+      wysiwyg('#wysiwygNewVersion', this.handleChangeText)
+    }
+
+    if (!prevState.timelineWysiwyg && state.timelineWysiwyg) wysiwyg('#wysiwygTimelineComment', this.handleChangeNewComment)
+    else if (prevState.timelineWysiwyg && !state.timelineWysiwyg) tinymce.remove('#wysiwygTimelineComment')
+  }
+
+  componentWillUnmount () {
+    console.log('%c<Workspace> will Unmount', `color: ${this.state.config.hexcolor}`)
+    document.removeEventListener('appCustomEvent', this.customEventReducer)
+  }
+
+  loadContent = async () => {
+    const { loggedUser, content, config } = this.state
+
+    const fetchResultHtmlDocument = getHtmlDocContent(loggedUser, config.apiUrl, content.workspace_id, content.content_id)
+    const fetchResultComment = getHtmlDocComment(loggedUser, config.apiUrl, content.workspace_id, content.content_id)
+    const fetchResultRevision = getHtmlDocRevision(loggedUser, config.apiUrl, content.workspace_id, content.content_id)
+
+    handleFetchResult(await fetchResultHtmlDocument)
+      .then(resHtmlDocument => this.setState({content: resHtmlDocument.body}))
+      .catch(e => console.log('Error loading content.', e))
+
+    Promise.all([
+      handleFetchResult(await fetchResultComment),
+      handleFetchResult(await fetchResultRevision)
+    ])
+      .then(([resComment, resRevision]) => {
+        const resCommentWithProperDate = resComment.body.map(c => ({...c, created: (new Date(c.created)).toLocaleString()}))
+
+        const revisionWithComment = resRevision.body
+          .map((r, i) => ({
+            ...r,
+            created: (new Date(r.created)).toLocaleString(),
+            timelineType: 'revision',
+            commentList: r.comment_ids.map(ci => ({
+              timelineType: 'comment',
+              ...resCommentWithProperDate.find(c => c.content_id === ci)
+            })),
+            number: i + 1
+          }))
+          .reduce((acc, rev) => [
+            ...acc,
+            rev,
+            ...rev.commentList.map(comment => ({
+              ...comment,
+              customClass: '',
+              loggedUser: this.state.config.loggedUser
+            }))
+          ], [])
+
+        this.setState({
+          timeline: revisionWithComment,
+          mode: resRevision.body.length === 1 ? MODE.EDIT : MODE.VIEW // first time editing the doc, open in edit mode
+        })
+      })
+      .catch(e => {
+        console.log('Error loading Timeline.', e)
+        this.setState({timeline: []})
+      })
+  }
+
+  handleClickBtnCloseApp = () => {
+    this.setState({ isVisible: false })
+    GLOBAL_dispatchEvent({type: 'appClosed', data: {}}) // handled by tracim_front::src/container/WorkspaceContent.jsx
+  }
+
+  handleSaveEditTitle = async newTitle => {
+    const { loggedUser, config, content } = this.state
+
+    const fetchResultSaveHtmlDoc = putHtmlDocContent(loggedUser, config.apiUrl, content.workspace_id, content.content_id, newTitle, content.raw_content)
+
+    handleFetchResult(await fetchResultSaveHtmlDoc)
+      .then(resSave => {
+        if (resSave.apiResponse.status === 200) {
+          this.loadContent()
+          GLOBAL_dispatchEvent({ type: 'refreshContentList', data: {} })
+        } else {
+          console.warn('Error saving html-document. Result:', resSave, 'content:', content, 'config:', config)
+        }
+      })
+  }
+
+  handleClickNewVersion = () => this.setState(prev => ({
+    rawContentBeforeEdit: prev.content.raw_content,
+    mode: MODE.EDIT
+  }))
+
+  handleCloseNewVersion = () => {
+    tinymce.remove('#wysiwygNewVersion')
+    this.setState(prev => ({
+      content: {
+        ...prev.content,
+        raw_content: prev.rawContentBeforeEdit
+      },
+      mode: MODE.VIEW
+    }))
+  }
+
+  handleSaveHtmlDocument = async () => {
+    const { loggedUser, content, config } = this.state
+
+    const fetchResultSaveHtmlDoc = putHtmlDocContent(loggedUser, config.apiUrl, content.workspace_id, content.content_id, content.label, content.raw_content)
+
+    handleFetchResult(await fetchResultSaveHtmlDoc)
+      .then(resSave => {
+        if (resSave.apiResponse.status === 200) {
+          this.handleCloseNewVersion()
+          this.loadContent()
+        } else {
+          console.warn('Error saving html-document. Result:', resSave, 'content:', content, 'config:', config)
+        }
+      })
+  }
+
+  handleChangeText = e => {
+    const newText = e.target.value // because SyntheticEvent is pooled (react specificity)
+    this.setState(prev => ({content: {...prev.content, raw_content: newText}}))
+  }
+
+  handleChangeNewComment = e => {
+    const newComment = e.target.value
+    this.setState({newComment})
+  }
+
+  handleClickValidateNewCommentBtn = async () => {
+    const { loggedUser, config, content, newComment } = this.state
+
+    const fetchResultSaveNewComment = await postHtmlDocNewComment(loggedUser, config.apiUrl, content.workspace_id, content.content_id, newComment)
+
+    handleFetchResult(await fetchResultSaveNewComment)
+      .then(resSave => {
+        if (resSave.apiResponse.status === 200) {
+          this.setState({newComment: ''})
+          if (this.state.timelineWysiwyg) tinymce.get('wysiwygTimelineComment').setContent('')
+          this.loadContent()
+        } else {
+          console.warn('Error saving html-document comment. Result:', resSave, 'content:', content, 'config:', config)
+        }
+      })
+  }
+
+  handleToggleWysiwyg = () => this.setState(prev => ({timelineWysiwyg: !prev.timelineWysiwyg}))
+
+  handleChangeStatus = async newStatus => {
+    const { loggedUser, config, content } = this.state
+
+    const fetchResultSaveEditStatus = putHtmlDocStatus(loggedUser, config.apiUrl, content.workspace_id, content.content_id, newStatus)
+
+    handleFetchResult(await fetchResultSaveEditStatus)
+      .then(resSave => {
+        if (resSave.status !== 204) { // 204 no content so dont take status from resSave.apiResponse.status
+          console.warn('Error saving html-document comment. Result:', resSave, 'content:', content, 'config:', config)
+        } else {
+          this.loadContent()
+        }
+      })
+  }
+
+  handleClickArchive = async () => {
+    console.log('archive')
+    // const { config, content } = this.state
+    //
+    // const fetchResultArchive = await fetch(`${config.apiUrl}/workspaces/${content.workspace_id}/contents/${content.content_id}/archive`, {
+    //   ...FETCH_CONFIG,
+    //   method: 'PUT'
+    // })
+  }
+
+  handleClickDelete = async () => {
+    console.log('delete')
+    // const { config, content } = this.state
+    // const fetchResultDelete = await fetch(`${config.apiUrl}/workspaces/${content.workspace_id}/contents/${content.content_id}/delete`, {
+    //   ...FETCH_CONFIG,
+    //   method: 'PUT'
+    // })
+  }
+
+  handleClickShowRevision = revision => {
+    const { mode, timeline } = this.state
+
+    const revisionArray = timeline.filter(t => t.timelineType === 'revision')
+    const isLastRevision = revision.revision_id === revisionArray[revisionArray.length - 1].revision_id
+
+    if (mode === MODE.REVISION && isLastRevision) {
+      this.handleClickLastVersion()
+      return
+    }
+
+    if (mode === MODE.VIEW && isLastRevision) return
+
+    this.setState(prev => ({
+      content: {
+        ...prev.content,
+        label: revision.label,
+        raw_content: revision.raw_content,
+        number: revision.number,
+        status: revision.status
+      },
+      mode: MODE.REVISION
+    }))
+  }
+
+  handleClickLastVersion = () => {
+    this.loadContent()
+    this.setState({mode: MODE.VIEW})
+  }
+
+  render () {
+    const { isVisible, loggedUser, content, timeline, newComment, timelineWysiwyg, config, mode } = this.state
+    const { t } = this.props
+
+    if (!isVisible) return null
+
+    return (
+      <PopinFixed
+        customClass={`${config.slug}`}
+        customColor={config.hexcolor}
+      >
+        <PopinFixedHeader
+          customClass={`${config.slug}`}
+          customColor={config.hexcolor}
+          faIcon={config.faIcon}
+          title={content.label}
+          onClickCloseBtn={this.handleClickBtnCloseApp}
+          onValidateChangeTitle={this.handleSaveEditTitle}
+        />
+
+        <PopinFixedOption
+          customColor={config.hexcolor}
+          customClass={`${config.slug}`}
+          i18n={i18n}
+        >
+          <div /* this div in display flex, justify-content space-between */>
+            <div className='d-flex'>
+              <NewVersionBtn
+                customColor={config.hexcolor}
+                onClickNewVersionBtn={this.handleClickNewVersion}
+                disabled={mode !== MODE.VIEW}
+              />
+
+              {mode === MODE.REVISION &&
+                <button
+                  className='wsContentGeneric__option__menu__lastversion html-document__lastversionbtn btn'
+                  onClick={this.handleClickLastVersion}
+                  style={{backgroundColor: config.hexcolor, color: '#fdfdfd'}}
+                >
+                  <i className='fa fa-code-fork' />
+                  {t('Last version')}
+                </button>
+              }
+            </div>
+
+            <div className='d-flex'>
+              <SelectStatus
+                selectedStatus={config.availableStatuses.find(s => s.slug === content.status)}
+                availableStatus={config.availableStatuses}
+                onChangeStatus={this.handleChangeStatus}
+                disabled={mode === MODE.REVISION}
+              />
+
+              <ArchiveDeleteContent
+                customColor={config.hexcolor}
+                onClickArchiveBtn={this.handleClickArchive}
+                onClickDeleteBtn={this.handleClickDelete}
+                disabled={mode === MODE.REVISION}
+              />
+            </div>
+          </div>
+        </PopinFixedOption>
+
+        <PopinFixedContent
+          customClass={`${config.slug}__contentpage`}
+          showRightPartOnLoad={mode === MODE.VIEW}
+        >
+          <HtmlDocumentComponent
+            mode={mode}
+            customColor={config.hexcolor}
+            wysiwygNewVersion={'wysiwygNewVersion'}
+            onClickCloseEditMode={this.handleCloseNewVersion}
+            onClickValidateBtn={this.handleSaveHtmlDocument}
+            version={content.number}
+            lastVersion={timeline.filter(t => t.timelineType === 'revision').length}
+            text={content.raw_content}
+            onChangeText={this.handleChangeText}
+            key={'html-document'}
+          />
+
+          <Timeline
+            customClass={`${config.slug}__contentpage`}
+            customColor={config.hexcolor}
+            loggedUser={loggedUser}
+            timelineData={timeline}
+            newComment={newComment}
+            disableComment={mode === MODE.REVISION}
+            wysiwyg={timelineWysiwyg}
+            onChangeNewComment={this.handleChangeNewComment}
+            onClickValidateNewCommentBtn={this.handleClickValidateNewCommentBtn}
+            onClickWysiwygBtn={this.handleToggleWysiwyg}
+            onClickRevisionBtn={this.handleClickShowRevision}
+            shouldScrollToBottom={mode !== MODE.REVISION}
+          />
+        </PopinFixedContent>
+      </PopinFixed>
+    )
+  }
+}
+
+export default translate()(Workspace)

frontend_app_workspace/src/css/index.styl

@@ -0,0 +1,2 @@
+@import "../../node_modules/tracim_frontend_lib/src/css/Variable.styl"
+

frontend_app_workspace/src/helper.js

@@ -0,0 +1,97 @@
+export const FETCH_CONFIG = {
+  headers: {
+    'Accept': 'application/json',
+    'Content-Type': 'application/json'
+  }
+}
+
+export const debug = {
+  config: {
+    label: 'Workspace',
+    slug: 'workspace',
+    faIcon: 'file-text-o',
+    hexcolor: '#3f52e3',
+    creationLabel: 'Create a workspace',
+    domContainer: 'appFeatureContainer',
+    apiUrl: 'http://localhost:6543/api/v2',
+    apiHeader: {
+      'Accept': 'application/json',
+      'Content-Type': 'application/json'
+      // 'Authorization': 'Basic ' + btoa(`${'admin@admin.admin'}:${'admin@admin.admin'}`)
+    },
+    availableStatuses: [{
+      label: 'Open',
+      slug: 'open',
+      faIcon: 'square-o',
+      hexcolor: '#3f52e3',
+      globalStatus: 'open'
+    }, {
+      label: 'Validated',
+      slug: 'closed-validated',
+      faIcon: 'check-square-o',
+      hexcolor: '#008000',
+      globalStatus: 'closed'
+    }, {
+      label: 'Cancelled',
+      slug: 'closed-unvalidated',
+      faIcon: 'close',
+      hexcolor: '#f63434',
+      globalStatus: 'closed'
+    }, {
+      label: 'Deprecated',
+      slug: 'closed-deprecated',
+      faIcon: 'warning',
+      hexcolor: '#ababab',
+      globalStatus: 'closed'
+    }],
+    translation: {
+      en: {
+        translation: {
+          'Last version': 'Last version debug en'
+        }
+      },
+      fr: {
+        translation: {
+          'Last version': 'Dernière version debug fr'
+        }
+      }
+    }
+  },
+  loggedUser: { // @FIXME this object is outdated
+    user_id: 5,
+    username: 'Smoi',
+    firstname: 'Côme',
+    lastname: 'Stoilenom',
+    email: 'osef@algoo.fr',
+    lang: 'en',
+    avatar_url: 'https://avatars3.githubusercontent.com/u/11177014?s=460&v=4',
+    auth: btoa(`${'admin@admin.admin'}:${'admin@admin.admin'}`)
+  },
+  content: {
+    author: {
+      avatar_url: null,
+      public_name: 'Global manager',
+      user_id: 1 // -1 or 1 for debug
+    },
+    content_id: 22, // 1 or 22 for debug
+    content_type: 'html-document',
+    created: '2018-06-18T14:59:26Z',
+    current_revision_id: 11,
+    is_archived: false,
+    is_deleted: false,
+    label: 'Current Menu',
+    last_modifier: {
+      avatar_url: null,
+      public_name: 'Global manager',
+      user_id: 1
+    },
+    modified: '2018-06-18T14:59:26Z',
+    parent_id: 2,
+    raw_content: '<div>bonjour, je suis un lapin.</div>',
+    show_in_ui: true,
+    slug: 'current-menu',
+    status: 'open',
+    sub_content_types: ['thread', 'html-document', 'file', 'folder'],
+    workspace_id: 1
+  }
+}

frontend_app_workspace/src/i18n.js

@@ -0,0 +1,21 @@
+import i18n from 'i18next'
+import { reactI18nextModule } from 'react-i18next'
+
+i18n
+  .use(reactI18nextModule)
+  .init({
+    fallbackLng: 'fr',
+    // have a common namespace used around the full app
+    ns: ['translation'], // namespace
+    defaultNS: 'translation',
+    debug: true,
+    // interpolation: {
+    //   escapeValue: false, // not needed for react!!
+    // },
+    react: {
+      wait: true
+    },
+    resources: {} // init with empty resources, they will come from frontend in app constructor
+  })
+
+export default i18n

frontend_app_workspace/src/index.dev.js

@@ -0,0 +1,16 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+// import Workspace from './container/Workspace.jsx'
+import PopupCreateWorkspace from './container/PopupCreateWorkspace.jsx'
+
+require('./css/index.styl')
+
+// ReactDOM.render(
+//   <Workspace data={undefined} />
+//   , document.getElementById('content')
+// )
+
+ReactDOM.render(
+  <PopupCreateWorkspace />
+  , document.getElementById('content')
+)

frontend_app_workspace/src/index.js

@@ -0,0 +1,28 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+// import Workspace from './container/Workspace.jsx'
+import PopupCreateWorkspace from './container/PopupCreateWorkspace.jsx'
+
+require('./css/index.styl')
+
+const appInterface = {
+  name: 'html-document',
+  isRendered: false,
+  renderAppFeature: data => {
+    return ReactDOM.render(
+      null // <Workspace data={data} />
+      , document.getElementById(data.config.domContainer)
+    )
+  },
+  unmountApp: domId => {
+    return ReactDOM.unmountComponentAtNode(document.getElementById(domId)) // returns bool
+  },
+  renderAppPopupCreation: data => {
+    return ReactDOM.render(
+      <PopupCreateWorkspace data={data} />
+      , document.getElementById(data.config.domContainer)
+    )
+  }
+}
+
+module.exports = appInterface

frontend_app_workspace/webpack.config.js

@@ -0,0 +1,87 @@
+const webpack = require('webpack')
+const path = require('path')
+const isProduction = process.env.NODE_ENV === 'production'
+
+console.log('isProduction : ', isProduction)
+
+module.exports = {
+  entry: isProduction
+    ? './src/index.js' // only one instance of babel-polyfill is allowed
+    : ['babel-polyfill', './src/index.dev.js'],
+  output: {
+    path: path.resolve(__dirname, 'dist'),
+    filename: isProduction ? 'workspace.app.js' : 'workspace.app.dev.js',
+    pathinfo: !isProduction,
+    library: isProduction ? 'appWorkspace' : undefined,
+    libraryTarget: isProduction ? 'var' : undefined
+  },
+  externals: {},
+  // isProduction ? { // Côme - since plugins are imported through <script>, cannot externalize libraries
+  //   react: {commonjs: 'react', commonjs2: 'react', amd: 'react', root: '_'},
+  //   'react-dom': {commonjs: 'react-dom', commonjs2: 'react-dom', amd: 'react-dom', root: '_'},
+  //   classnames: {commonjs: 'classnames', commonjs2: 'classnames', amd: 'classnames', root: '_'},
+  //   'prop-types': {commonjs: 'prop-types', commonjs2: 'prop-types', amd: 'prop-types', root: '_'},
+  //   tracim_lib: {commonjs: 'tracim_lib', commonjs2: 'tracim_lib', amd: 'tracim_lib', root: '_'}
+  // }
+  // : {},
+  devServer: {
+    contentBase: path.join(__dirname, 'dist/'),
+    port: 8074,
+    hot: true,
+    noInfo: true,
+    overlay: {
+      warnings: false,
+      errors: true
+    },
+    historyApiFallback: true
+    // headers: {
+    //   'Access-Control-Allow-Origin': '*'
+    // }
+  },
+  devtool: isProduction ? false : 'cheap-module-source-map',
+  module: {
+    rules: [{
+      test: /\.jsx?$/,
+      enforce: 'pre',
+      use: 'standard-loader',
+      exclude: [/node_modules/]
+    }, {
+      test: [/\.js$/, /\.jsx$/],
+      loader: 'babel-loader',
+      options: {
+        presets: ['env', 'react'],
+        plugins: ['transform-object-rest-spread', 'transform-class-properties', 'transform-object-assign']
+      },
+      exclude: [/node_modules/]
+    }, {
+      test: /\.css$/,
+      use: ['style-loader', 'css-loader']
+    }, {
+      test: /\.styl$/,
+      use: ['style-loader', 'css-loader', 'stylus-loader']
+    }, {
+      test: /\.(jpg|png|svg)$/,
+      loader: 'url-loader',
+      options: {
+        limit: 25000
+      }
+    }]
+  },
+  resolve: {
+    extensions: ['.js', '.jsx']
+  },
+  plugins: [
+    ...[], // generic plugins always present
+    ...(isProduction
+      ? [ // production specific plugins
+        new webpack.DefinePlugin({
+          'process.env': { 'NODE_ENV': JSON.stringify('production') }
+        }),
+        new webpack.optimize.UglifyJsPlugin({
+          compress: { warnings: false }
+        })
+      ]
+      : [] // development specific plugins
+    )
+  ]
+}

frontend_lib/src/component/CardPopup/CardPopupCreateContent.jsx

@@ -27,7 +27,7 @@ const PopupCreateContent = props => {
           <input
             type='text'
             className='createcontent__form__input'
-            placeHolder={props.inputPlaceholder}
+            placeholder={props.inputPlaceholder}
             value={props.contentName}
             onChange={props.onChangeContentName}
           />