pluged in admin pages

frontend/src/action-creator.async.js

@@ -73,6 +73,7 @@ const fetchWrapper = async ({url, param, actionName, dispatch, debug = false}) =
       dispatch({type: `${param.method}/${actionName}/SUCCESS`, data: fetchResult.json})
       break
     case 400:
+    case 401:
     case 404:
     case 500:
       dispatch({type: `${param.method}/${actionName}/FAILED`, data: fetchResult.json})

frontend/src/container/Account.jsx

@@ -98,7 +98,7 @@ class Account extends React.Component {
       switch (fetchPutUserName.status) {
         case 200:
           props.dispatch(updateUserName(newName))
-          if (newEmail === '' )props.dispatch(newFlashMessage(props.t('Your name has been changed'), 'info'))
+          if (newEmail === '') props.dispatch(newFlashMessage(props.t('Your name has been changed'), 'info'))
           // else, if email also has been changed, flash msg is handled bellow to not display 2 flash msg
           break
         default: props.dispatch(newFlashMessage(props.t('Error while changing name'), 'warning')); break

frontend/src/container/AppFullscreenRouter.jsx

@@ -25,16 +25,27 @@ class AppFullscreenRouter extends React.Component {
         {this.state.isMounted && (// we must wait for the component to be fully mounted to be sure the div#appFullscreenContainer exists in DOM
           <div className='emptyDivForRoute'>
             <Route path={PAGE.ADMIN.WORKSPACE} render={() => {
-              if (props.user.profile !== PROFILE.ADMINISTRATOR) return <Redirect to={{pathname: '/'}} />
+              if (props.user.profile !== PROFILE.ADMINISTRATOR.slug) return <Redirect to={{pathname: '/'}} />
 
-              props.renderAppFullscreen({slug: 'admin_workspace_user', hexcolor: '#7d4e24', type: 'workspace'}, props.user, {})
+              const content = {
+                workspaceList: [],
+                userList: []
+              }
+
+              props.renderAppFullscreen({slug: 'admin_workspace_user', hexcolor: '#7d4e24', type: 'workspace'}, props.user, content)
               return null
             }} />
 
             <Route path={PAGE.ADMIN.USER} render={() => {
-              if (props.user.profile !== PROFILE.ADMINISTRATOR) return <Redirect to={{pathname: '/'}} />
+              if (props.user.profile !== PROFILE.ADMINISTRATOR.slug) return <Redirect to={{pathname: '/'}} />
+
+              const content = {
+                profile: PROFILE,
+                workspaceList: [],
+                userList: []
+              }
 
-              props.renderAppFullscreen({slug: 'admin_workspace_user', hexcolor: '#7d4e24', type: 'user'}, props.user, {})
+              props.renderAppFullscreen({slug: 'admin_workspace_user', hexcolor: '#7d4e24', type: 'user'}, props.user, content)
               return null
             }} />
           </div>

frontend/src/container/Header.jsx

@@ -87,7 +87,7 @@ class Header extends React.Component {
                 onClickSubmit={this.handleClickSubmit}
               />
 
-              {user.profile === PROFILE.ADMINISTRATOR &&
+              {user.profile === PROFILE.ADMINISTRATOR.slug &&
                 <MenuActionListAdminLink t={this.props.t} />
               }
 

frontend/src/container/Sidebar.jsx

@@ -26,10 +26,8 @@ class Sidebar extends React.Component {
 
   customEventReducer = async ({ detail: { type, data } }) => {
     switch (type) {
-      case 'refreshWorkspaceList':
-        console.log('%c<Sidebar> Custom event', 'color: #28a745', type, data)
-        this.loadAppConfigAndWorkspaceList()
-        break
+      default:
+        return
     }
   }
 

frontend/src/container/Tracim.jsx

@@ -47,6 +47,10 @@ class Tracim extends React.Component {
         console.log('%c<Tracim> Custom event', 'color: #28a745', type, data)
         this.props.dispatch(newFlashMessage(data.msg, data.type, data.delay))
         break
+      case 'refreshWorkspaceList':
+        console.log('%c<Tracim> Custom event', 'color: #28a745', type, data)
+        this.loadWorkspaceList()
+        break
     }
   }
 

frontend/src/helper.js

@@ -123,9 +123,27 @@ export const ROLE2 = {
 }
 
 export const PROFILE = {
-  ADMINISTRATOR: 'administrators',
-  MANAGER: 'managers',
-  USER: 'users'
+  ADMINISTRATOR: {
+    id: 1,
+    slug: 'administrators',
+    faIcon: 'rocket',
+    hexcolor: '#123456',
+    label: i18n.t('Administrator')
+  },
+  MANAGER: {
+    id: 2,
+    slug: 'managers',
+    faIcon: 'car',
+    hexcolor: '#654321',
+    label: i18n.t('Manager')
+  },
+  USER: {
+    id: 4,
+    slug: 'users',
+    faIcon: 'bicycle',
+    hexcolor: '#123123',
+    label: i18n.t('User')
+  }
 }
 
 export const handleRouteFromApi = route => route.startsWith('/#') ? route.slice(2) : route

frontend_app_admin_workspace_user/src/action.async.js

@@ -1 +1,91 @@
-// import { FETCH_CONFIG } from './helper.js'
+import { FETCH_CONFIG } from './helper.js'
+
+export const getWorkspaceList = (user, apiUrl) =>
+  // @FIXME - Côme - 2018/08/23 - wrong end point, this one only returns workspaces of logged user
+  fetch(`${apiUrl}/users/${user.user_id}/workspaces`, {
+    headers: {
+      'Authorization': 'Basic ' + user.auth,
+      ...FETCH_CONFIG.headers
+    },
+    method: 'GET'
+  })
+
+export const getWorkspaceMemberList = (user, apiUrl, idWorkspace) =>
+  fetch(`${apiUrl}/workspaces/${idWorkspace}/members`, {
+    headers: {
+      'Authorization': 'Basic ' + user.auth,
+      ...FETCH_CONFIG.headers
+    },
+    method: 'GET'
+  })
+
+export const deleteWorkspace = (user, apiUrl, idWorkspace) =>
+  fetch(`${apiUrl}/workspaces/${idWorkspace}/delete`, {
+    headers: {
+      'Authorization': 'Basic ' + user.auth,
+      ...FETCH_CONFIG.headers
+    },
+    method: 'PUT'
+  })
+
+export const getUserList = (user, apiUrl) =>
+  fetch(`${apiUrl}/users`, {
+    headers: {
+      'Authorization': 'Basic ' + user.auth,
+      ...FETCH_CONFIG.headers
+    },
+    method: 'GET'
+  })
+
+export const getUserDetail = (user, apiUrl, idUser) =>
+  fetch(`${apiUrl}/users/${idUser}`, {
+    headers: {
+      'Authorization': 'Basic ' + user.auth,
+      ...FETCH_CONFIG.headers
+    },
+    method: 'GET'
+  })
+
+export const putUserDisable = (user, apiUrl, idUser) =>
+  fetch(`${apiUrl}/users/${idUser}/disable`, {
+    headers: {
+      'Authorization': 'Basic ' + user.auth,
+      ...FETCH_CONFIG.headers
+    },
+    method: 'PUT'
+  })
+
+export const putUserEnable = (user, apiUrl, idUser) =>
+  fetch(`${apiUrl}/users/${idUser}/enable`, {
+    headers: {
+      'Authorization': 'Basic ' + user.auth,
+      ...FETCH_CONFIG.headers
+    },
+    method: 'PUT'
+  })
+
+export const putUserProfile = (user, apiUrl, idUser, newProfile) =>
+  fetch(`${apiUrl}/users/${idUser}/profile`, {
+    headers: {
+      'Authorization': 'Basic ' + user.auth,
+      ...FETCH_CONFIG.headers
+    },
+    body: JSON.stringify({
+      profile: newProfile
+    }),
+    method: 'PUT'
+  })
+
+export const postAddUser = (user, apiUrl, email, profile) =>
+  fetch(`${apiUrl}/users`, {
+    headers: {
+      'Authorization': 'Basic ' + user.auth,
+      ...FETCH_CONFIG.headers
+    },
+    body: JSON.stringify({
+      email,
+      email_notification: false,
+      profile
+    }),
+    method: 'POST'
+  })

frontend_app_admin_workspace_user/src/component/AddMemberForm.jsx

@@ -1,74 +1,108 @@
 import React from 'react'
+import { translate } from 'react-i18next'
 
-export const AddMemberForm = props =>
-  <form className='adminUserPage__adduser__form'>
-    <div className='adminUserPage__adduser__form__username'>
-      <label className='username__text' htmlFor='adduser'>
-        Ajouter un membre
-      </label>
+export class AddMemberForm extends React.Component {
+  constructor (props) {
+    super(props)
 
-      <input
-        type='text'
-        className='username__input form-control'
-        id='adduser'
-        placeholder='Nom ou Email'
-      />
+    this.state = {
+      newUserEmail: '',
+      newUserProfile: ''
+    }
+  }
 
-      <div className='username__createaccount'>
-        <input type='radio' id='createuseraccount' />
-        <label className='ml-2' htmlFor='createuseraccount'>Create an account for this member</label>
-      </div>
-    </div>
+  handleChangeNewUserEmail = e => this.setState({newUserEmail: e.target.value})
 
-    <div className='adminUserPage__adduser__form__userrole'>
-      <div className='userrole__text'>
-        Choose the role of the member
-      </div>
+  handleChangeNewUserProfile = e => this.setState({newUserProfile: e.currentTarget.value})
 
-      <div className='userrole__role'>
-        <div className='userrole__role__workspacemanager mt-3 d-flex align-items-center'>
-          <input type='radio' name='adminuser' />
-          <div className='d-flex align-items-center'>
-            <div className='userrole__role__icon mx-2'>
-              <i className='fa fa-fw fa-gavel' />
-            </div>
-            Workspace manager
+  handleClickAddUser = () => {
+    const { props, state } = this
+
+    if (state.newUserEmail === '' || state.newUserProfile === '') {
+      GLOBAL_dispatchEvent({
+        type: 'addFlashMsg',
+        data: {
+          msg: props.t('Please type a name and select a profile'),
+          type: 'warning',
+          delay: undefined
+        }
+      })
+      return
+    }
+
+    props.onClickAddUser(state.newUserEmail, state.newUserProfile)
+  }
+
+  render () {
+    const { props, state } = this
+
+    return (
+      <form className='adminUserPage__adduser__form'>
+        <div className='adminUserPage__adduser__form__username'>
+          <label className='username__text' htmlFor='adduser'>
+            {props.t('Add a user')}
+          </label>
+
+          <input
+            type='text'
+            className='username__input form-control'
+            id='adduser'
+            placeholder={props.t('Email')}
+            value={state.newUserEmail}
+            onChange={this.handleChangeNewUserEmail}
+          />
+
+          {/*
+          <div className='username__createaccount'>
+            <input type='radio' id='createuseraccount' />
+            <label className='ml-2' htmlFor='createuseraccount'>Create an account for this member</label>
           </div>
+          */}
         </div>
-        <div className='userrole__role__contentmanager mt-3 d-flex align-items-center'>
-          <input type='radio' name='adminuser' />
-          <div className='d-flex align-items-center'>
-            <div className='userrole__role__icon mx-2'>
-              <i className='fa fa-fw fa-graduation-cap' />
-            </div>
-            Content manager
+
+        <div className='adminUserPage__adduser__form__profile'>
+          <div className='profile__text'>
+            {props.t('Choose the profile of the user')}
           </div>
-        </div>
-        <div className='userrole__role__contributor mt-3 d-flex align-items-center'>
-          <input type='radio' name='adminuser' />
-          <div className='d-flex align-items-center'>
-            <div className='userrole__role__icon mx-2'>
-              <i className='fa fa-fw fa-pencil' />
-            </div>
-            Contributor
+
+          <div className='profile__list'>
+            {Object.keys(props.profile).map(p => props.profile[p]).map(p =>
+              <label
+                className='profile__list__item'
+                htmlFor={p.slug}
+                key={p.id}
+              >
+                <input
+                  type='radio'
+                  name='newUserProfile'
+                  id={p.slug}
+                  value={p.slug}
+                  checked={state.newUserProfile === p.slug}
+                  onChange={this.handleChangeNewUserProfile}
+                />
+
+                <div className='d-flex align-items-center'>
+                  <div className='userrole__role__icon mx-2' style={{color: p.hexcolor}}>
+                    <i className={`fa fa-fw fa-${p.faIcon}`} />
+                  </div>
+                  {p.label}
+                </div>
+              </label>
+            )}
           </div>
         </div>
-        <div className='userrole__role__reader mt-3 d-flex align-items-center'>
-          <input type='radio' name='adminuser' />
-          <div className='d-flex align-items-center'>
-            <div className='userrole__role__icon mx-2'>
-              <i className='fa fa-fw fa-eye' />
-            </div>
-            Reader
-          </div>
+        <div className='adminUserPage__adduser__form__submit'>
+          <button
+            type='button'
+            className='btn'
+            onClick={this.handleClickAddUser}
+          >
+            {props.t('Add the user')}
+          </button>
         </div>
-      </div>
-    </div>
-    <div className='adminUserPage__adduser__form__submit'>
-      <button className='btn'>
-        Add the member
-      </button>
-    </div>
-  </form>
+      </form>
+    )
+  }
+}
 
-export default AddMemberForm
+export default translate()(AddMemberForm)

frontend_app_admin_workspace_user/src/component/AdminUser.jsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import { translate } from 'react-i18next'
 import {
   Delimiter,
   PageWrapper,
@@ -22,7 +23,50 @@ export class AdminUser extends React.Component {
     displayAddMember: !prevState.displayAddMember
   }))
 
+  handleToggleUser = (e, idUser, toggle) => {
+    e.preventDefault()
+    e.stopPropagation()
+    this.props.onClickToggleUserBtn(idUser, toggle)
+  }
+
+  handleToggleProfileManager = (e, idUser, toggle) => {
+    e.preventDefault()
+    e.stopPropagation()
+
+    const { props } = this
+
+    if (props.userList.find(u => u.user_id === idUser).profile === 'administrators') {
+      GLOBAL_dispatchEvent({
+        type: 'addFlashMsg',
+        data: {
+          msg: props.t('An administrator can always create workspaces'),
+          type: 'warning',
+          delay: undefined
+        }
+      })
+      return
+    }
+
+    if (toggle) props.onChangeProfile(idUser, 'managers')
+    else props.onChangeProfile(idUser, 'users')
+  }
+
+  handleToggleProfileAdministrator = (e, idUser, toggle) => {
+    e.preventDefault()
+    e.stopPropagation()
+
+    if (toggle) this.props.onChangeProfile(idUser, 'administrators')
+    else this.props.onChangeProfile(idUser, 'managers')
+  }
+
+  handleClickAddUser = (email, profile) => {
+    this.props.onClickAddUser(email, profile)
+    this.handleToggleAddMember()
+  }
+
   render () {
+    const { props } = this
+
     return (
       <PageWrapper customClass='adminUserPage'>
         <PageTitle
@@ -33,16 +77,19 @@ export class AdminUser extends React.Component {
         <PageContent parentClass='adminUserPage'>
 
           <div className='adminUserPage__description'>
-            On this page you can manage the members of your instance Tracim.
+            {props.t('On this page you can manage the members of your Tracim instance.')}
           </div>
 
           <div className='adminUserPage__adduser'>
             <button className='adminUserPage__adduser__button btn' onClick={this.handleToggleAddMember}>
-              Add a member
+              {props.t('Add a member')}
             </button>
 
             {this.state.displayAddMember &&
-              <AddMemberForm />
+              <AddMemberForm
+                profile={props.profile}
+                onClickAddUser={this.handleClickAddUser}
+              />
             }
           </div>
 
@@ -52,92 +99,36 @@ export class AdminUser extends React.Component {
             <table className='table'>
               <thead>
                 <tr>
-                  <th scope='col'>Active</th>
-                  <th scope='col'>Member</th>
-                  <th scope='col'>Email</th>
-                  <th scope='col'>Member can create workspace</th>
-                  <th scope='col'>Administrator</th>
+                  <th scope='col'>{props.t('Active')}</th>
+                  <th scope='col'>{props.t('Member')}</th>
+                  <th scope='col'>{props.t('Email')}</th>
+                  <th scope='col'>{props.t('Can create workspace')}</th>
+                  <th scope='col'>{props.t('Administrator')}</th>
                 </tr>
               </thead>
+
               <tbody>
-                <tr>
-                  <td>
-                    <BtnSwitch />
-                  </td>
-                  <th scope='row'>Joe Delavaiga</th>
-                  <td><a href='#'>joedelavaiga@mail.com</a></td>
-                  <td>
-                    <BtnSwitch />
-                  </td>
-                  <td>
-                    <BtnSwitch />
-                  </td>
-                </tr>
-                <tr>
-                  <td>
-                    <BtnSwitch />
-                  </td>
-                  <th scope='row'>Susie Washington</th>
-                  <td><a href='#'>susiewash@mail.com</a></td>
-                  <td>
-                    <BtnSwitch />
-                  </td>
-                  <td>
-                    <BtnSwitch />
-                  </td>
-                </tr>
-                <tr>
-                  <td>
-                    <BtnSwitch />
-                  </td>
-                  <th scope='row'>Marty MacJoe</th>
-                  <td><a href='#'>martymac@mail.com</a></td>
-                  <td>
-                    <BtnSwitch />
-                  </td>
-                  <td>
-                    <BtnSwitch />
-                  </td>
-                </tr>
-                <tr>
-                  <td>
-                    <BtnSwitch />
-                  </td>
-                  <th scope='row'>Joe Delavaiga</th>
-                  <td><a href='#'>joedelavaiga@mail.com</a></td>
-                  <td>
-                    <BtnSwitch />
-                  </td>
-                  <td>
-                    <BtnSwitch />
-                  </td>
-                </tr>
-                <tr>
-                  <td>
-                    <BtnSwitch />
-                  </td>
-                  <th scope='row'>Susie Washington</th>
-                  <td><a href='#'>susiewash@mail.com</a></td>
-                  <td>
-                    <BtnSwitch />
-                  </td>
-                  <td>
-                    <BtnSwitch />
-                  </td>
-                </tr>
-                <tr>
-                  <td>
-                    <BtnSwitch />
-                  </td>
-                  <th scope='row'>Marty MacJoe</th>
-                  <td><a href='#'>martymac@mail.com</a></td>
-                  <td>
-                    <BtnSwitch />
-                  </td>
-                  <td>
-                    <BtnSwitch />
-                  </td>
-                </tr>
+                {props.userList.map(u =>
+                  <tr key={u.user_id}>
+                    <td>
+                      <BtnSwitch checked={u.is_active} onChange={e => this.handleToggleUser(e, u.user_id, !u.is_active)} />
+                    </td>
+                    <th scope='row'>{u.public_name}</th>
+                    <td>{u.email}</td>
+                    <td>
+                      <BtnSwitch
+                        checked={u.profile === 'managers' || u.profile === 'administrators'}
+                        onChange={e => this.handleToggleProfileManager(e, u.user_id, !(u.profile === 'managers' || u.profile === 'administrators'))}
+                      />
+                    </td>
+                    <td>
+                      <BtnSwitch
+                        checked={u.profile === 'administrators'}
+                        onChange={e => this.handleToggleProfileAdministrator(e, u.user_id, !(u.profile === 'administrators'))}
+                      />
+                    </td>
+                  </tr>
+                )}
               </tbody>
             </table>
           </div>
@@ -149,4 +140,4 @@ export class AdminUser extends React.Component {
   }
 }
 
-export default AdminUser
+export default translate()(AdminUser)

frontend_app_admin_workspace_user/src/component/AdminWorkspace.jsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import { translate } from 'react-i18next'
 import {
   Delimiter,
   PageWrapper,
@@ -6,189 +7,66 @@ import {
   PageContent
 } from 'tracim_frontend_lib'
 
-export class AdminWorkspace extends React.Component {
-  render () {
-    return (
-      <PageWrapper customClass='adminWorkspacePage'>
-        <PageTitle
-          parentClass={'adminWorkspacePage'}
-          title={'Workspace management'}
-        />
+const AdminWorkspace = props =>
+  <PageWrapper customClass='adminWorkspacePage'>
+    <PageTitle
+      parentClass={'adminWorkspacePage'}
+      title={'Workspace management'}
+    />
 
-        <PageContent parentClass='adminWorkspacePage'>
+    <PageContent parentClass='adminWorkspacePage'>
+      <div className='adminWorkspacePage__description'>
+        {props.t('List of every workspaces')}
+      </div>
 
-          <div className='adminWorkspacePage__description'>
-            List of every workspaces
-          </div>
+      <Delimiter customClass={'adminWorkspacePage__delimiter'} />
 
-          { /*
-            Alexi Cauvin 08/08/2018 => desactivate create workspace button due to redundancy
+      <div className='adminWorkspacePage__workspaceTable'>
 
-            <div className='adminWorkspacePage__createworkspace'>
-              <button className='adminWorkspacePage__createworkspace__btncreate btn btn-primary primaryColorBg primaryColorBorder primaryColorBorderDarkenHover'>
-                {this.props.t('Create a workspace')}
-              </button>
-            </div>
-          */ }
+        <table className='table'>
+          <thead>
+            <tr>
+              <th scope='col'>Id</th>
+              <th scope='col'>{props.t('Workspace')}</th>
+              <th scope='col'>{props.t('Description')}</th>
+              <th scope='col'>{props.t('Member count')}</th>
+              {/* <th scope='col'>Calendar</th> */}
+              <th scope='col'>{props.t('Delete workspace')}</th>
+            </tr>
+          </thead>
 
-          <Delimiter customClass={'adminWorkspacePage__delimiter'} />
-
-          <div className='adminWorkspacePage__workspaceTable'>
-
-            <table className='table'>
-              <thead>
-                <tr>
-                  <th scope='col'>ID</th>
-                  <th scope='col'>Workspace</th>
-                  <th scope='col'>Description</th>
-                  <th scope='col'>Member count</th>
-                  { /*
-                      <th scope='col'>Calendar</th>
-                    */ }
-                  <th scope='col'>Delete workspace</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr>
-                  <th>1</th>
-                  <td>Design v_2</td>
-                  <td>Workspace about tracim v2 design</td>
-                  { /*
-                      <td className='d-flex align-items-center flex-wrap'>
-                        <div className='adminWorkspacePage__workspaceTable__calendaricon mr-2'>
-                          <i className='fa fa-fw fa-check-square-o' />
-                        </div>
-                        Enable
-                      </td>
-                    */ }
-                  <td>8</td>
-                  <td>
-                    <div className='adminWorkspacePage__workspaceTable__deleteworkspace primaryColorFont primaryColorFontDarkenHover'>
-                      <div className='adminWorkspacePage__workspaceTable__deleteworkspace__removalicon mr-3'>
-                        <i className='fa fa-fw fa-trash-o' />
-                      </div>
-                      Delete
-                    </div>
-                  </td>
-                </tr>
-                <tr>
-                  <th>2</th>
-                  <td>New features</td>
-                  <td>Add a new features : Annotated files</td>
-                  { /*
-                      <td className='d-flex align-items-center flex-wrap'>
-                        <div className='adminWorkspacePage__workspaceTable__calendaricon mr-2'>
-                          <i className='fa fa-fw fa-square-o' />
-                        </div>
-                        Disable
-                      </td>
-                    */ }
-                  <td>5</td>
-                  <td>
-                    <div className='adminWorkspacePage__workspaceTable__deleteworkspace primaryColorFont primaryColorFontDarkenHover'>
-                      <div className='adminWorkspacePage__workspaceTable__deleteworkspace__removalicon mr-3'>
-                        <i className='fa fa-fw fa-trash-o' />
-                      </div>
-                      Delete
+          <tbody>
+            {props.workspaceList/* .sort((a, b) => a.workspace_id > b.workspace_id) */.map(ws =>
+              <tr key={ws.slug}>
+                <th>{ws.workspace_id}</th>
+                <td>{ws.label}</td>
+                <td>"(nyi) blocked by backend"</td>
+                {/*
+                  <td className='d-flex align-items-center flex-wrap'>
+                    <div className='adminWorkspacePage__workspaceTable__calendaricon mr-2'>
+                      <i className='fa fa-fw fa-check-square-o' />
                     </div>
+                    Enable
                   </td>
-                </tr>
-                <tr>
-                  <th>3</th>
-                  <td>Fix Backend</td>
-                  <td>workspace referring to multiple issues on the backend </td>
-                  { /*
-                      <td className='d-flex align-items-center flex-wrap'>
-                        <div className='adminWorkspacePage__workspaceTable__calendaricon mr-2'>
-                          <i className='fa fa-fw fa-check-square-o' />
-                        </div>
-                        Enable
-                      </td>
-                    */ }
-                  <td>3</td>
-                  <td>
-                    <div className='adminWorkspacePage__workspaceTable__deleteworkspace primaryColorFont primaryColorFontDarkenHover'>
-                      <div className='adminWorkspacePage__workspaceTable__deleteworkspace__removalicon mr-3'>
-                        <i className='fa fa-fw fa-trash-o' />
-                      </div>
-                      Delete
-                    </div>
-                  </td>
-                </tr>
-                <tr>
-                  <th>4</th>
-                  <td>Design v_2</td>
-                  <td>Workspace about tracim v2 design</td>
-                  { /*
-                      <td className='d-flex align-items-center flex-wrap'>
-                        <div className='adminWorkspacePage__workspaceTable__calendaricon mr-2'>
-                          <i className='fa fa-fw fa-square-o' />
-                        </div>
-                        Disable
-                      </td>
-                    */ }
-                  <td>8</td>
-                  <td>
-                    <div className='adminWorkspacePage__workspaceTable__deleteworkspace primaryColorFont primaryColorFontDarkenHover'>
-                      <div className='adminWorkspacePage__workspaceTable__deleteworkspace__removalicon mr-3'>
-                        <i className='fa fa-fw fa-trash-o' />
-                      </div>
-                      Delete
-                    </div>
-                  </td>
-                </tr>
-                <tr>
-                  <th>5</th>
-                  <td>New features</td>
-                  <td>Add a new features : Annotated files</td>
-                  { /*
-                      <td className='d-flex align-items-center flex-wrap'>
-                        <div className='adminWorkspacePage__workspaceTable__calendaricon mr-2'>
-                          <i className='fa fa-fw fa-square-o' />
-                        </div>
-                        Disable
-                      </td>
-                    */ }
-                  <td>5</td>
-                  <td>
-                    <div className='adminWorkspacePage__workspaceTable__deleteworkspace primaryColorFont primaryColorFontDarkenHover'>
-                      <div className='adminWorkspacePage__workspaceTable__deleteworkspace__removalicon mr-3'>
-                        <i className='fa fa-fw fa-trash-o' />
-                      </div>
-                      Delete
-                    </div>
-                  </td>
-                </tr>
-                <tr>
-                  <th>6</th>
-                  <td>Fix Backend</td>
-                  <td>workspace referring to multiple issues on the backend </td>
-                  { /*
-                      <td className='d-flex align-items-center flex-wrap'>
-                        <div className='adminWorkspacePage__workspaceTable__calendaricon mr-2'>
-                          <i className='fa fa-fw fa-check-square-o' />
-                        </div>
-                        Enable
-                      </td>
-                    */ }
-                  <td>3</td>
-                  <td>
-                    <div className='adminWorkspacePage__workspaceTable__deleteworkspace primaryColorFont primaryColorFontDarkenHover'>
-                      <div className='adminWorkspacePage__workspaceTable__deleteworkspace__removalicon mr-3'>
-                        <i className='fa fa-fw fa-trash-o' />
-                      </div>
-                      Delete
-                    </div>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-
-        </PageContent>
-      </PageWrapper>
-    )
-  }
-}
+                */}
+                <td>{ws.memberList.length}</td>
+                <td>
+                  <div className='adminWorkspacePage__table__delete primaryColorFont primaryColorFontDarkenHover'>
+                    <button
+                      type='button'
+                      className='adminWorkspacePage__table__delete__icon btn mr-3'
+                      onClick={() => props.onClickDeleteWorkspace(ws.workspace_id)}
+                    >
+                      <i className='fa fa-fw fa-trash-o' />
+                    </button>
+                  </div>
+                </td>
+              </tr>
+            )}
+          </tbody>
+        </table>
+      </div>
+    </PageContent>
+  </PageWrapper>
 
-export default AdminWorkspace
+export default translate()(AdminWorkspace)

frontend_app_admin_workspace_user/src/container/AdminWorkspaceUser.jsx

@@ -2,11 +2,21 @@ import React from 'react'
 import { translate } from 'react-i18next'
 import i18n from '../i18n.js'
 import {
-  addAllResourceI18n
-  // handleFetchResult
+  addAllResourceI18n,
+  handleFetchResult,
+  CardPopup
 } from 'tracim_frontend_lib'
 import { debug } from '../helper.js'
 import {
+  getWorkspaceList,
+  getWorkspaceMemberList,
+  deleteWorkspace,
+  getUserList,
+  getUserDetail,
+  putUserDisable,
+  putUserEnable,
+  putUserProfile,
+  postAddUser
 } from '../action.async.js'
 import AdminWorkspace from '../component/AdminWorkspace.jsx'
 import AdminUser from '../component/AdminUser.jsx'
@@ -16,12 +26,15 @@ require('../css/index.styl')
 class AdminWorkspaceUser extends React.Component {
   constructor (props) {
     super(props)
+
     this.state = {
       appName: 'admin_workspace_user',
       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
+      content: props.data ? props.data.content : debug.content,
+      popupDeleteWorkspaceDisplay: false,
+      workspaceToDelete: null
     }
 
     // i18n has been init, add resources from frontend
@@ -45,14 +58,18 @@ class AdminWorkspaceUser extends React.Component {
   componentDidMount () {
     console.log('%c<AdminWorkspaceUser> did mount', `color: ${this.state.config.hexcolor}`)
 
-    this.loadContent()
+    if (this.state.config.type === 'workspace') this.loadWorkspaceContent()
+    else if (this.state.config.type === 'user') this.loadUserContent()
   }
 
   componentDidUpdate (prevProps, prevState) {
     const { state } = this
 
     console.log('%c<AdminWorkspaceUser> did update', `color: ${this.state.config.hexcolor}`, prevState, state)
-    if (prevState.config.type !== state.config.type) this.loadContent()
+    if (prevState.config.type !== state.config.type) {
+      if (state.config.type === 'workspace') this.loadWorkspaceContent()
+      else if (state.config.type === 'user') this.loadUserContent()
+    }
   }
 
   componentWillUnmount () {
@@ -60,24 +77,210 @@ class AdminWorkspaceUser extends React.Component {
     document.removeEventListener('appCustomEvent', this.customEventReducer)
   }
 
-  loadContent = () => {
-    return null
+  loadWorkspaceContent = async () => {
+    const { props, state } = this
+
+    const fetchWorkspaceList = getWorkspaceList(state.loggedUser, state.config.apiUrl)
+    const workspaceList = await handleFetchResult(await fetchWorkspaceList)
+
+    switch (workspaceList.apiResponse.status) {
+      case 200:
+        const fetchWorkspaceListMemberList = await Promise.all(
+          workspaceList.body.map(async ws =>
+            handleFetchResult(await getWorkspaceMemberList(state.loggedUser, state.config.apiUrl, ws.workspace_id))
+          )
+        )
+        this.setState(prev => ({
+          content: {
+            ...prev.content,
+            workspaceList: workspaceList.body.map(ws => ({
+              ...ws,
+              memberList: (fetchWorkspaceListMemberList.find(fws => fws.body[0].workspace_id === ws.workspace_id) || {body: []}).body
+            }))
+          }
+        }))
+        break
+
+      default: GLOBAL_dispatchEvent({
+        type: 'addFlashMsg',
+        data: {
+          msg: props.t('Error while loading workspaces list'),
+          type: 'warning',
+          delay: undefined
+        }
+      })
+    }
+  }
+
+  loadUserContent = async () => {
+    const { props, state } = this
+
+    const userList = await handleFetchResult(await getUserList(state.loggedUser, state.config.apiUrl))
+
+    switch (userList.apiResponse.status) {
+      case 200:
+        const fetchUserDetailList = await Promise.all(
+          userList.body.map(async u =>
+            handleFetchResult(await getUserDetail(state.loggedUser, state.config.apiUrl, u.user_id))
+          )
+        )
+        this.setState(prev => ({
+          content: {
+            ...prev.content,
+            userList: fetchUserDetailList.map(fu => fu.body)
+          }
+        }))
+        break
+
+      default: GLOBAL_dispatchEvent({
+        type: 'addFlashMsg',
+        data: {
+          msg: props.t('Error while loading users list'),
+          type: 'warning',
+          delay: undefined
+        }
+      })
+    }
+  }
+
+  handleDeleteWorkspace = async () => {
+    const { props, state } = this
+
+    const deleteWorkspaceResponse = await handleFetchResult(await deleteWorkspace(state.loggedUser, state.config.apiUrl, state.workspaceToDelete))
+    switch (deleteWorkspaceResponse.status) {
+      case 204:
+        this.loadWorkspaceContent()
+        GLOBAL_dispatchEvent({
+          type: 'refreshWorkspaceList',
+          data: {}
+        })
+        break
+      default: GLOBAL_dispatchEvent({
+        type: 'addFlashMsg',
+        data: {
+          msg: props.t('Error while deleting workspace'),
+          type: 'warning',
+          delay: undefined
+        }
+      })
+    }
+    this.handleClosePopupDeleteWorkspace()
+  }
+
+  handleOpenPopupDeleteWorkspace = idWorkspace => this.setState({
+    popupDeleteWorkspaceDisplay: true,
+    workspaceToDelete: idWorkspace
+  })
+
+  handleClosePopupDeleteWorkspace = () => this.setState({popupDeleteWorkspaceDisplay: false})
+
+  handleToggleUser = async (idUser, toggle) => {
+    const { props, state } = this
+
+    const activateOrDelete = toggle ? putUserEnable : putUserDisable
+
+    const toggleUser = await handleFetchResult(await activateOrDelete(state.loggedUser, state.config.apiUrl, idUser))
+    switch (toggleUser.status) {
+      case 204: this.loadUserContent(); break
+      default: GLOBAL_dispatchEvent({
+        type: 'addFlashMsg',
+        data: {
+          msg: props.t('Error while enabling or disabling user'),
+          type: 'warning',
+          delay: undefined
+        }
+      })
+    }
+  }
+
+  handleUpdateProfile = async (idUser, newProfile) => {
+    const { props, state } = this
+
+    const toggleManager = await handleFetchResult(await putUserProfile(state.loggedUser, state.config.apiUrl, idUser, newProfile))
+    switch (toggleManager.status) {
+      case 204: this.loadUserContent(); break
+      default: GLOBAL_dispatchEvent({
+        type: 'addFlashMsg',
+        data: {
+          msg: props.t('Error while saving new profile'),
+          type: 'warning',
+          delay: undefined
+        }
+      })
+    }
+  }
+
+  handleClickAddUser = async (email, profile) => {
+    const { props, state } = this
+
+    const newUserResult = await handleFetchResult(await postAddUser(state.loggedUser, state.config.apiUrl, email, profile))
+    switch (newUserResult.apiResponse.status) {
+      case 200:
+        this.loadUserContent()
+
+        break
+      default: GLOBAL_dispatchEvent({
+        type: 'addFlashMsg',
+        data: {
+          msg: props.t('Error while saving new user'),
+          type: 'warning',
+          delay: undefined
+        }
+      })
+    }
   }
 
   render () {
-    const { isVisible } = this.state
-    // const { t } = this.props
+    const { props, state } = this
 
-    if (!isVisible) return null
+    if (!state.isVisible) return null
 
     return (
       <div>
-        {this.state.config.type === 'workspace' &&
-          <AdminWorkspace />
+        {state.config.type === 'workspace' &&
+          <AdminWorkspace
+            workspaceList={state.content.workspaceList}
+            onClickDeleteWorkspace={this.handleOpenPopupDeleteWorkspace}
+          />
         }
 
-        {this.state.config.type === 'user' &&
-          <AdminUser />
+        {state.config.type === 'user' &&
+          <AdminUser
+            userList={state.content.userList}
+            profile={state.content.profile}
+            onClickToggleUserBtn={this.handleToggleUser}
+            onChangeProfile={this.handleUpdateProfile}
+            onClickAddUser={this.handleClickAddUser}
+          />
+        }
+
+        {state.popupDeleteWorkspaceDisplay &&
+          <CardPopup
+            customClass='adminworkspaceuser__popup'
+            customHeaderClass='primaryColorBg'
+            onClose={this.handleClosePopupDeleteWorkspace}
+          >
+            <div className='adminworkspaceuser__popup__body'>
+              <div className='adminworkspaceuser__popup__body__msg'>{props.t('Are you sure ?')}</div>
+              <div className='adminworkspaceuser__popup__body__btn'>
+                <button
+                  type='button'
+                  className='btn'
+                  onClick={this.handleClosePopupDeleteWorkspace}
+                >
+                  {props.t('Cancel')}
+                </button>
+
+                <button
+                  type='button'
+                  className='btn'
+                  onClick={this.handleDeleteWorkspace}
+                >
+                  {props.t('Delete')}
+                </button>
+              </div>
+            </div>
+          </CardPopup>
         }
       </div>
     )

frontend_app_admin_workspace_user/src/css/index.styl

@@ -15,9 +15,9 @@
     font-size 20px
   &__delimiter
     margin 65px auto
-  &__workspaceTable
+  &__table
     margin 25px 15px
-    &__deleteworkspace
+    &__delete
       display flex
       align-items center
       flex-wrap wrap
@@ -41,14 +41,31 @@
         &__input
           margin 15px 0 20px 0
           width 40%
-      &__userrole
-        .userrole
-        &__text
-          margin 20px 0
-          font-weight bold
-        &__role
-          margin 25px 0
+      &__profile
+        .profile
+          &__text
+            margin 20px 0
+            font-weight bold
+          &__list
+            margin 25px 0
+            &__item
+              display flex
+              align-items center
+              margin-top 10px
+              cursor pointer
   &__delimiter
     margin 50px auto
   &__table
     margin-bottom 100px
+
+.adminworkspaceuser__popup
+  top 0
+  .cardPopup__container
+    width 400px
+  &__body
+    width 100%
+    &__btn
+      display flex
+      justify-content flex-end
+      .btn:first-child
+        margin-right 15px

frontend_app_admin_workspace_user/src/helper.js

@@ -1,3 +1,5 @@
+import i18n from '../../frontend/src/i18n.js'
+
 export const FETCH_CONFIG = {
   headers: {
     'Accept': 'application/json',
@@ -11,44 +13,48 @@ export const debug = {
     slug: 'admin_workspace_user',
     faIcon: 'file-text-o',
     hexcolor: '#7d4e24',
-    type: 'user',
-    translation: {en: {}, fr: {}}
+    type: 'user', // 'user' or 'workspace'
+    translation: {en: {}, fr: {}},
+    apiUrl: 'http://localhost:6543/api/v2',
+    apiHeader: {
+      'Accept': 'application/json',
+      'Content-Type': 'application/json'
+      // 'Authorization': 'Basic ' + btoa(`${'admin@admin.admin'}:${'admin@admin.admin'}`)
+    }
   },
-  loggedUser: { // @FIXME this object is outdated
-    user_id: 5,
-    username: 'Smoi',
-    firstname: 'Côme',
-    lastname: 'Stoilenom',
+  loggedUser: {
+    user_id: 1,
+    public_name: 'Global Manager',
     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
+    profile: {
+      ADMINISTRATOR: {
+        id: 1,
+        slug: 'administrators',
+        faIcon: 'rocket',
+        hexcolor: '#123456',
+        label: i18n.t('Administrator')
+      },
+      MANAGER: {
+        id: 2,
+        slug: 'managers',
+        faIcon: 'car',
+        hexcolor: '#654321',
+        label: i18n.t('Manager')
+      },
+      USER: {
+        id: 4,
+        slug: 'users',
+        faIcon: 'bicycle',
+        hexcolor: '#123123',
+        label: i18n.t('User')
+      }
     },
-    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
+    workspaceList: [],
+    userList: []
   }
 }

frontend_app_html-document/src/helper.js

@@ -22,11 +22,6 @@ export const debug = {
     creationLabel: 'Write a document',
     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',

frontend_lib/src/component/CardPopup/CardPopup.jsx

@@ -8,7 +8,7 @@ const CardPopup = props => {
   return (
     <div className={classnames(props.customClass, 'cardPopup')}>
       <div className='cardPopup__container'>
-        <div className='cardPopup__header' style={{backgroundColor: props.customColor}} />
+        <div className={classnames(props.customHeaderClass, 'cardPopup__header')} style={{backgroundColor: props.customColor}} />
 
         <div className='cardPopup__close' onClick={props.onClose}>
           <i className='fa fa-times' />
@@ -26,12 +26,14 @@ export default CardPopup
 
 CardPopup.propTypes = {
   customClass: PropTypes.string,
+  customHeaderClass: PropTypes.string,
   customColor: PropTypes.string,
   onClose: PropTypes.func
 }
 
 CardPopup.defaultProps = {
   customClass: 'defaultCustomClass',
+  customHeaderClass: '',
   customColor: '',
   onClose: () => {}
 }

frontend_lib/src/component/CardPopup/CardPopup.styl

@@ -2,6 +2,9 @@
 
 .cardPopup
   position fixed
+  top 0
+  left 0
+  margin-top 120px
   display flex
   justify-content center
   width 100%