added app Admin Workspace User + refactor for app Fullscreen

build_full_frontend.sh

 log "cp i18next.scanner/fr/translation.json ../frontend/dist/app/thread_fr_translation.json"
 cp i18next.scanner/fr/translation.json ../frontend/dist/app/thread_fr_translation.json
 cd -
+
+# app Admin Workspace User
+
+log "cd frontend_app_admin_workspace_user"
+cd frontend_app_admin_workspace_user
+
+log "npm run build$windoz # for frontend_app_thread"
+npm run build$windoz
+
+log "cp dist/admin_workspace_user.app.js"
+cp dist/admin_workspace_user.app.js ../frontend/dist/app
+
+log "cp i18next.scanner/en/translation.json ../frontend/dist/app/admin_workspace_user_en_translation.json"
+cp i18next.scanner/en/translation.json ../frontend/dist/app/admin_workspace_user_en_translation.json
+
+log "cp i18next.scanner/fr/translation.json ../frontend/dist/app/admin_workspace_user_fr_translation.json"
+cp i18next.scanner/fr/translation.json ../frontend/dist/app/admin_workspace_user_fr_translation.json
+cd -

frontend/README.md

 You also need to make the mock api able to tell tracim_frontend that it handle you app :
 - add an entry for you App in tracim_frontend/jsonserver/static_db.json in the `app_config` property
 - reload your mock api server
-- add the source of your app in tracim_frontend/dist/index.html and an entry to the switch case of the function `GLOBAL_renderAppFull`. All of this will be handled by backend later on, this is all work in progress stuffs.
+- add the source of your app in tracim_frontend/dist/index.html and an entry to the switch case of the function `GLOBAL_renderAppFeature`. All of this will be handled by backend later on, this is all work in progress stuffs.
 
 
 #### Urls list

frontend/dist/appInterface.js

         return appThread
       case 'file':
         return appFile
+      case 'admin_workspace_user':
+        return appAdminWorkspaceUser
       default:
         return null
     }
   // use module.export and require
   // doesn't work, cant resolve a file outside of the build dir
 
-  GLOBAL_renderAppFull = app => {
-    console.log('%cGLOBAL_renderAppFull', 'color: #5cebeb', app)
+  GLOBAL_renderAppFeature = app => {
+    console.log('%cGLOBAL_renderAppFeature', 'color: #5cebeb', app)
 
     const selectedApp = getSelectedApp(app.config.slug)
 
     if (selectedApp.isRendered) {
-      GLOBAL_dispatchEvent({type: `${app.config.slug}_showApp`, data: app}) // handled by html-documents:src/container/HtmlDocument.jsx
+      GLOBAL_dispatchEvent({type: `${app.config.slug}_showApp`, data: app}) // handled by html-documents:src/container/AdminWorkspaceUser.jsx
     } else {
-      selectedApp.renderAppFull(app)
+      selectedApp.renderAppFeature(app)
+      selectedApp.isRendered = true
+      prevSelectedApp.isRendered = false
+      prevSelectedApp = selectedApp
+    }
+  }
+
+  GLOBAL_renderAppFullscreen = app => {
+    console.log('%cGLOBAL_renderAppFullscreen', 'color: #5cebeb', app)
+
+    const selectedApp = getSelectedApp(app.config.slug)
+
+    if (selectedApp.isRendered) {
+      GLOBAL_dispatchEvent({type: `${app.config.slug}_showApp`, data: app}) // handled by html-documents:src/container/AdminWorkspaceUser.jsx
+    } else {
+      selectedApp.renderAppFullscreen(app)
       selectedApp.isRendered = true
       prevSelectedApp.isRendered = false
       prevSelectedApp = selectedApp
         console.log('%cGLOBAL_eventReducer Custom Event', 'color: #28a745', type, data)
         if (prevSelectedApp.name === '') return
 
-        prevSelectedApp.unmountApp('appContainer')
+        prevSelectedApp.unmountApp('appFeatureContainer')
         prevSelectedApp.unmountApp('popupCreateContentContainer')
         prevSelectedApp.isRendered = false
         break

frontend/dist/index.html

     <script src='/app/html-document.app.js'></script>
     <script src='/app/thread.app.js'></script>
     <!-- <script src='/app/file.app.js'></script> -->
+    <script src='/app/admin_workspace_user.app.js'></script>
 
     <script src="/dev/jquery-3.2.1.js"></script>
     <script src="/dev/popper-1.12.3.js"></script>

frontend/jsonserver/static_db.json

     "customClass": "wsContentPageHtml",
     "icon": "fa fa-fw fa-file-text-o",
     "color": "#3f52e3",
-    "domContainer": "appContainer"
+    "domContainer": "appFeatureContainer"
   }, {
     "name": "PageMarkdown",
     "label": {
     "customClass": "wsContentPageMarkdown",
     "icon": "fa fa-fw fa-file-code-o",
     "color": "#e0082b",
-    "domContainer": "appContainer"
+    "domContainer": "appFeatureContainer"
   }, {
     "name": "File",
     "label": {
     "customClass": "wsContentFile",
     "icon": "fa fa-fw fa-file-image-o",
     "color": "#263462",
-    "domContainer": "appContainer"
+    "domContainer": "appFeatureContainer"
   }, {
     "name": "Thread",
     "label": {
     "customClass": "wsContentThread",
     "icon": "fa fa-fw fa-comments-o",
     "color": "#2674d3",
-    "domContainer": "appContainer"
+    "domContainer": "appFeatureContainer"
   }, {
     "name": "Task",
     "label": {
     "customClass": "wsContentTask",
     "icon": "fa fa-fw fa-list-ul",
     "color": "#2d5a88",
-    "domContainer": "appContainer"
+    "domContainer": "appFeatureContainer"
   }, {
     "name": "Issue",
     "label": {
     "customClass": "wsContentIssue",
     "icon": "fa fa-fw fa-ticket",
     "color": "#a4835e",
-    "domContainer": "appContainer"
+    "domContainer": "appFeatureContainer"
   }],
   "workspace_detail": {
     "id": 1,

frontend/package.json

       "fetch",
       "btoa",
       "history",
-      "GLOBAL_renderAppFull",
+      "GLOBAL_renderAppFeature",
+      "GLOBAL_renderAppFullscreen",
       "GLOBAL_renderAppPopupCreation",
       "GLOBAL_dispatchEvent",
       "GLOBAL_hideApp"

frontend/src/appFactory.js

 
 export function appFactory (WrappedComponent) {
   return class AppFactory extends React.Component {
-    renderAppFull = (appConfig, user, content) => GLOBAL_renderAppFull({
+    renderAppFeature = (appConfig, user, content) => GLOBAL_renderAppFeature({
       loggedUser: user.logged ? user : {},
       config: {
         ...appConfig,
-        domContainer: 'appContainer',
+        domContainer: 'appFeatureContainer',
+        apiUrl: FETCH_CONFIG.apiUrl,
+        mockApiUrl: FETCH_CONFIG.mockApiUrl, // Côme - 2018/07/31 - this should not be used, I deprecate it
+        apiHeader: FETCH_CONFIG.headers,
+        translation: i18n.store.data
+      },
+      content
+    })
+
+    renderAppFullscreen = (appConfig, user, content) => GLOBAL_renderAppFullscreen({
+      loggedUser: user.logged ? user : {},
+      config: {
+        ...appConfig,
+        domContainer: 'appFullscreenContainer',
         apiUrl: FETCH_CONFIG.apiUrl,
-        mockApiUrl: FETCH_CONFIG.mockApiUrl,
         apiHeader: FETCH_CONFIG.headers,
         translation: i18n.store.data
       },
       idFolder: idFolder === 'null' ? null : idFolder
     })
 
-    emitEventApp = (type, data) => GLOBAL_dispatchEvent({ type, data })
+    dispatchCustomEvent = (type, data) => GLOBAL_dispatchEvent({ type, data })
 
     render () {
       return (
         <WrappedComponent
           {...this.props}
-          renderAppFull={this.renderAppFull}
+          renderAppFeature={this.renderAppFeature}
+          renderAppFullscreen={this.renderAppFullscreen}
           renderAppPopupCreation={this.renderAppPopupCreation}
-          emitEventApp={this.emitEventApp}
+          dispatchCustomEvent={this.dispatchCustomEvent}
           // hideApp={this.hideApp}
         />
       )

frontend/src/component/Workspace/OpenContentApp.jsx

 import { withRouter } from 'react-router'
 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, renderAppFull, match } = this.props
+    const { idWorkspace, appOpenedType, user, workspaceContent, contentType, renderAppFeature, dispatchCustomEvent, match } = this.props
 
     if (isNaN(idWorkspace) || idWorkspace === -1) return
 
       console.log('%c<OpenContentApp> contentToOpen', 'color: #dcae84', contentToOpen)
 
       if (appOpenedType === contentToOpen.type) { // app already open
-        GLOBAL_dispatchEvent({
-          type: `${contentToOpen.type}_reloadContent`, // handled by html-document:src/container/HtmlDocument.jsx
+        dispatchCustomEvent({
+          type: `${contentToOpen.type}_reloadContent`, // handled by html-document:src/container/AdminWorkspaceUser.jsx
           data: contentToOpen
         })
       } else { // open another app
         // if another app is already visible, hide it
-        if (appOpenedType !== false) GLOBAL_dispatchEvent({type: `${appOpenedType}_hideApp`})
+        if (appOpenedType !== false) dispatchCustomEvent({type: `${appOpenedType}_hideApp`})
         // open app
-        renderAppFull(
+        renderAppFeature(
           contentType.find(ct => ct.slug === contentToOpen.type),
           user,
           contentToOpen

frontend/src/component/Workspace/OpenCreateContentApp.jsx

 
 const qs = require('query-string')
 
+// @FIXME Côme - 2018/07/31 - should this be in a component like AppFeatureManager ? (or AppCreateContentManager)
 export class OpenCreateContentApp extends React.Component {
   openCreateContentApp = () => {
     const { idWorkspace, user, contentType, renderAppPopupCreation, match, location } = this.props

frontend/src/container/Account.jsx

 import React from 'react'
 import { connect } from 'react-redux'
 import Sidebar from './Sidebar.jsx'
-import PageWrapper from '../component/common/layout/PageWrapper.jsx'
-import PageTitle from '../component/common/layout/PageTitle.jsx'
-import PageContent from '../component/common/layout/PageContent.jsx'
 import UserInfo from '../component/Account/UserInfo.jsx'
 import MenuSubComponent from '../component/Account/MenuSubComponent.jsx'
 import PersonalData from '../component/Account/PersonalData.jsx'
 import Notification from '../component/Account/Notification.jsx'
 import Password from '../component/Account/Password.jsx'
 import Timezone from '../component/Account/Timezone.jsx'
-import { Delimiter } from 'tracim_frontend_lib'
+import {
+  Delimiter,
+  PageWrapper,
+  PageTitle,
+  PageContent
+} from 'tracim_frontend_lib'
 import { updateUserWorkspaceSubscriptionNotif } from '../action-creator.sync.js'
 import {
   getTimezone,

frontend/src/container/AppFullscreenManager.jsx

+import React from 'react'
+import { connect } from 'react-redux'
+import { withRouter } from 'react-router'
+import { Route } from 'react-router-dom'
+import { PAGE } from '../helper.js'
+import appFactory from '../appFactory.js'
+import Sidebar from './Sidebar.jsx'
+
+class AppFullscreenManager extends React.Component {
+  constructor (props) {
+    super(props)
+    this.state = {
+      AmIMounted: false
+    }
+  }
+
+  componentDidMount = () => this.setState({AmIMounted: true})
+
+  render () {
+    const { user, renderAppFullscreen } = this.props
+
+    return (
+      <div className='sidebarpagecontainer'>
+        <Sidebar />
+
+        <div id='appFullscreenContainer' />
+
+        {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, {})
+              return null
+            }} />
+
+            <Route path={PAGE.ADMIN.USER} render={() => {
+              renderAppFullscreen({slug: 'admin_workspace_user', hexcolor: '#7d4e24', type: 'user'}, user, {})
+              return null
+            }} />
+          </div>
+        )}
+      </div>
+    )
+  }
+}
+
+const mapStateToProps = ({ user }) => ({ user })
+export default connect(mapStateToProps)(withRouter(appFactory(AppFullscreenManager)))

frontend/src/container/Header.jsx

   handleChangeLang = idLang => {
     this.props.dispatch(setUserLang(idLang))
     i18n.changeLanguage(idLang)
-    this.props.emitEventApp('allApp_changeLang', idLang)
+    this.props.dispatchCustomEvent('allApp_changeLang', idLang)
   }
 
   handleClickHelp = () => {}

frontend/src/container/Sidebar.jsx

 import WorkspaceListItem from '../component/Sidebar/WorkspaceListItem.jsx'
 import {
   setWorkspaceListIsOpenInSidebar,
-  updateWorkspaceFilter
+  updateWorkspaceFilter,
+  updateWorkspaceListData
 } from '../action-creator.sync.js'
+import {
+  getWorkspaceList
+} from '../action-creator.async.js'
 import { PAGE } from '../helper.js'
 
 const qs = require('query-string')
     }
   }
 
+  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))
+
+      if (fetchGetWorkspaceList.status === 200) {
+        dispatch(updateWorkspaceListData(fetchGetWorkspaceList.json))
+        dispatch(setWorkspaceListIsOpenInSidebar(workspaceIdInUrl || fetchGetWorkspaceList.json[0].workspace_id, true))
+      }
+    }
+  }
+
   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

frontend/src/container/Tracim.jsx

 import Login from './Login.jsx'
 import Dashboard from './Dashboard.jsx'
 import Account from './Account.jsx'
+import AppFullscreenManager from './AppFullscreenManager.jsx'
 import FlashMessage from '../component/FlashMessage.jsx'
 import WorkspaceContent from './WorkspaceContent.jsx'
 import WIPcomponent from './WIPcomponent.jsx'
 import PrivateRoute from './PrivateRoute.jsx'
 import { COOKIE, PAGE } from '../helper.js'
 import {
+  getAppList,
   getUserIsConnected
 } from '../action-creator.async.js'
 import {
   removeFlashMessage,
+  setAppList,
   setUserConnected
 } from '../action-creator.sync.js'
 import Cookies from 'js-cookie'
     const fetchGetUserIsConnected = await dispatch(getUserIsConnected(userFromCookies))
     switch (fetchGetUserIsConnected.status) {
       case 200:
-        dispatch(setUserConnected({
+        const userLogged = {
           ...fetchGetUserIsConnected.json,
           auth: userFromCookies.auth,
           logged: true
-        }))
+        }
+
+        dispatch(setUserConnected(userLogged))
+
+        const fetchGetAppList = await dispatch(getAppList(userLogged))
+        if (fetchGetAppList.status === 200) dispatch(setAppList(fetchGetAppList.json))
         break
+
       case 401:
         dispatch(setUserConnected({logged: false})); break
+
       default:
         dispatch(setUserConnected({logged: null})); break
     }
           </Switch>
 
           <PrivateRoute path={PAGE.ACCOUNT} component={Account} />
+          <PrivateRoute path={PAGE.ADMIN.ROOT} component={AppFullscreenManager} />
           <PrivateRoute path={'/wip/:cp'} component={WIPcomponent} /> {/* for testing purpose only */}
+
+          <div id='appFeatureContainer' />
         </div>
 
       </div>
   }
 }
 
-const mapStateToProps = ({ flashMessage, user }) => ({ flashMessage, user })
+const mapStateToProps = ({ flashMessage }) => ({ flashMessage })
 export default withRouter(connect(mapStateToProps)(translate()(Tracim)))

frontend/src/container/WorkspaceContent.jsx

 import Folder from '../component/Workspace/Folder.jsx'
 import ContentItem from '../component/Workspace/ContentItem.jsx'
 import ContentItemHeader from '../component/Workspace/ContentItemHeader.jsx'
-import PageWrapper from '../component/common/layout/PageWrapper.jsx'
-import PageTitle from '../component/common/layout/PageTitle.jsx'
-import PageContent from '../component/common/layout/PageContent.jsx'
 import DropdownCreateButton from '../component/common/Input/DropdownCreateButton.jsx'
 import OpenContentApp from '../component/Workspace/OpenContentApp.jsx'
 import OpenCreateContentApp from '../component/Workspace/OpenCreateContentApp.jsx'
 import {
-  getAppList,
+  PageWrapper,
+  PageTitle,
+  PageContent
+} from 'tracim_frontend_lib'
+import {
   getContentTypeList,
   getWorkspaceContentList,
-  getFolderContent,
-  getWorkspaceList
+  getFolderContent
 } from '../action-creator.async.js'
 import {
   newFlashMessage,
-  setAppList,
   setContentTypeList,
-  setWorkspaceContent,
-  setWorkspaceListIsOpenInSidebar,
-  updateWorkspaceListData
+  setWorkspaceContent
 } from '../action-creator.sync.js'
 
 const qs = require('query-string')
   constructor (props) {
     super(props)
     this.state = {
-      popupCreateContent: {
-        display: false,
-        type: undefined,
-        folder: undefined
-      },
       workspaceIdInUrl: props.match.params.idws ? parseInt(props.match.params.idws) : null, // this is used to avoid handling the parseInt every time
       appOpenedType: false
     }
   }
 
   async componentDidMount () {
-    const { workspaceIdInUrl } = this.state
-    const { user, workspaceList, app, contentType, match, dispatch } = this.props
+    const { user, workspaceList, contentType, match, dispatch } = this.props
 
     console.log('%c<WorkspaceContent> componentDidMount', 'color: #c17838')
 
-    if (app.length === 0) { // @fixme shouldn't this be done by <Sidebar> ?
-      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))
     }
 
     let wsToLoad = null
-    if (match.params.idws !== undefined) wsToLoad = match.params.idws
 
-    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))
-
-        if (match.params.idws === undefined && fetchGetWorkspaceList.json.length > 0) {
-          wsToLoad = fetchGetWorkspaceList.json[0].workspace_id // load first ws if none specified
-        }
-      }
-    }
-
-    if (wsToLoad === null) return // ws already loaded
+    if (match.params.idws === undefined) {
+      if (workspaceList.length > 0) wsToLoad = workspaceList[0].id
+      else return
+    } else wsToLoad = match.params.idws
 
     this.loadContentList(wsToLoad)
   }
     if (this.state.workspaceIdInUrl === null) return
 
     const idWorkspace = parseInt(this.props.match.params.idws)
-
     if (isNaN(idWorkspace)) return
 
     const prevFilter = qs.parse(prevProps.location.search).type
   }
 
   componentWillUnmount () {
-    this.props.emitEventApp('unmount_app')
+    this.props.dispatchCustomEvent('unmount_app')
     document.removeEventListener('appCustomEvent', this.customEventReducer)
   }
 
           <PageTitle
             parentClass='workspace__header'
             customClass='justify-content-between'
-            title={workspaceContent.label ? workspaceContent.label : ''}
+            title='Liste des Contenus'
+            subtitle={workspaceContent.label ? workspaceContent.label : ''}
           >
             <DropdownCreateButton
               parentClass='workspace__header__btnaddworkspace'
               onClickCreateContent={this.handleClickCreateContent}
               availableApp={contentType}
             />
-
-            <div id='appContainer' />
           </PageContent>
 
         </PageWrapper>

frontend/src/helper.js

     ADMIN: (idws = ':idws') => `/workspaces/${idws}/admin`
   },
   LOGIN: '/login',
-  ACCOUNT: '/account'
+  ACCOUNT: '/account',
+  ADMIN: {
+    ROOT: '/admin',
+    WORKSPACE: '/admin/workspace',
+    USEr: '/admin/user'
+  }
 }
 
 export const ROLE = [{

frontend_app_admin_workspace_user/.editorconfig

+# 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_admin_workspace_user/.gitignore

+# Created by .ignore support plugin (hsz.mobi)
+.idea/
+.git/
+dist/admin_workspace_user.app.js
+node_modules/

frontend_app_admin_workspace_user/README.md

+# app Admin Workspace User

frontend_app_admin_workspace_user/build_admin_workspace_user.sh

+#!/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/admin_workspace_user.app.js ../frontend/dist/app"
+cp dist/admin_workspace_user.app.js ../frontend/dist/app
+log "cp i18next.scanner/en/translation.json ../frontend/dist/app/admin_workspace_user_en_translation.json"
+cp i18next.scanner/en/translation.json ../frontend/dist/app/admin_workspace_user_en_translation.json
+log "cp i18next.scanner/fr/translation.json ../frontend/dist/app/admin_workspace_user_fr_translation.json"
+cp i18next.scanner/fr/translation.json ../frontend/dist/app/admin_workspace_user_fr_translation.json

frontend_app_admin_workspace_user/dist/index.html

+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset='utf-8' />
+  <meta name="viewport" content="width=device-width, user-scalable=no" />
+  <title>Html-document 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>
+
+  <div id='content'></div>
+
+  <script src='./admin_workspace_user.app.dev.js'></script>
+</body>
+</html>

frontend_app_admin_workspace_user/i18next.scanner.js

+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_admin_workspace_user/i18next.scanner/en/translation.json

+{}

frontend_app_admin_workspace_user/i18next.scanner/fr/translation.json

+{}

frontend_app_admin_workspace_user/package.json

+{
+  "name": "tracim_app_admin_workspace_user",
+  "version": "1.1.2",
+  "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 9873 -- 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_admin_workspace_user/src/action.async.js

+// import { FETCH_CONFIG } from './helper.js'

frontend_app_admin_workspace_user/src/container/AdminWorkspaceUser.jsx

+import React from 'react'
+import { translate } from 'react-i18next'
+import i18n from '../i18n.js'
+import {
+  addAllResourceI18n,
+  // handleFetchResult,
+  PageWrapper,
+  PageTitle,
+  PageContent
+} from 'tracim_frontend_lib'
+import { debug } from '../helper.js'
+import {
+} from '../action.async.js'
+
+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
+    }
+
+    // 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) {
+      // console.log('%c<AdminWorkspaceUser> Custom event', 'color: #28a745', type, data)
+      default:
+        break
+    }
+  }
+
+  componentDidMount () {
+    console.log('%c<AdminWorkspaceUser> did mount', `color: ${this.state.config.hexcolor}`)
+
+    this.loadContent()
+  }
+
+  componentDidUpdate (prevProps, prevState) {
+    const { state } = this
+
+    console.log('%c<AdminWorkspaceUser> did update', `color: ${this.state.config.hexcolor}`, prevState, state)
+  }
+
+  componentWillUnmount () {
+    console.log('%c<AdminWorkspaceUser> will Unmount', `color: ${this.state.config.hexcolor}`)
+    document.removeEventListener('appCustomEvent', this.customEventReducer)
+  }
+
+  loadContent = () => {
+    return null
+  }
+
+  render () {
+    const { isVisible } = this.state
+    // const { t } = this.props
+
+    if (!isVisible) return null
+
+    return (
+      <div>
+        <PageWrapper customeClass='admin'>
+          <PageTitle
+            parentClass='admin__header'
+            customClass='justify-content-between'
+            title={'Admin'}
+          />
+
+          <PageContent parentClass='workspace__content'>
+            woot { this.state.config.type }
+          </PageContent>
+        </PageWrapper>
+      </div>
+    )
+  }
+}
+
+export default translate()(AdminWorkspaceUser)

frontend_app_admin_workspace_user/src/css/index.styl

+@import "../../node_modules/tracim_frontend_lib/src/css/Variable.styl"

frontend_app_admin_workspace_user/src/helper.js

+export const FETCH_CONFIG = {
+  headers: {
+    'Accept': 'application/json',
+    'Content-Type': 'application/json'
+  }
+}
+
+export const debug = {
+  config: {
+    label: 'Admin workspace user',
+    slug: 'admin_workspace_user',
+    faIcon: 'file-text-o',
+    hexcolor: '#7d4e24',
+    type: 'workspace'
+  },
+  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_admin_workspace_user/src/i18n.js

+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_admin_workspace_user/src/index.dev.js

+import React from 'react'
+import ReactDOM from 'react-dom'
+import AdminWorkspaceUser from './container/AdminWorkspaceUser.jsx'
+// import PopupCreateHtmlDocument from './container/PopupCreateHtmlDocument.jsx'
+
+require('./css/index.styl')
+
+ReactDOM.render(
+  <AdminWorkspaceUser data={undefined} />
+  , document.getElementById('content')
+)
+
+// ReactDOM.render(
+//   <PopupCreateHtmlDocument />
+//   , document.getElementById('content')
+// )

frontend_app_admin_workspace_user/src/index.js

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

frontend_app_admin_workspace_user/webpack.config.js

+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 ? 'admin_workspace_user.app.js' : 'admin_workspace_user.app.dev.js',
+    pathinfo: !isProduction,
+    library: isProduction ? 'appAdminWorkspaceUser' : 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: 8073,
+    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_app_html-document/package.json

       "btoa",
       "wysiwyg",
       "tinymce",
-      "GLOBAL_renderAppFull",
+      "GLOBAL_renderAppFeature",
       "GLOBAL_unmountApp",
       "GLOBAL_dispatchEvent"
     ],

frontend_app_html-document/src/container/PopupCreateHtmlDocument.jsx

     faIcon: 'file-text-o',
     hexcolor: '#3f52e3',
     creationLabel: 'Write a document',
-    domContainer: 'appContainer',
+    domContainer: 'appFeatureContainer',
     apiUrl: 'http://localhost:3001',
     apiHeader: {
       'Accept': 'application/json',

frontend_app_html-document/src/helper.js

     faIcon: 'file-text-o',
     hexcolor: '#3f52e3',
     creationLabel: 'Write a document',
-    domContainer: 'appContainer',
+    domContainer: 'appFeatureContainer',
     apiUrl: 'http://localhost:6543/api/v2',
     apiHeader: {
       'Accept': 'application/json',

frontend_app_html-document/src/index.js

 const appInterface = {
   name: 'html-document',
   isRendered: false,
-  renderAppFull: data => {
+  renderAppFeature: data => {
     return ReactDOM.render(
       <HtmlDocument data={data} />
       , document.getElementById(data.config.domContainer)

frontend_app_thread/package.json

       "btoa",
       "wysiwyg",
       "tinymce",
-      "GLOBAL_renderAppFull",
+      "GLOBAL_renderAppFeature",
       "GLOBAL_unmountApp",
       "GLOBAL_dispatchEvent"
     ],

frontend_app_thread/src/container/PopupCreateThread.jsx

     faIcon: 'file-text-o',
     hexcolor: '#ad4cf9',
     creationLabel: 'Write a thread',
-    domContainer: 'appContainer',
+    domContainer: 'appFeatureContainer',
     apiUrl: 'http://localhost:3001',
     mockApiUrl: 'http://localhost:8071',
     apiHeader: {

frontend_app_thread/src/helper.js

     faIcon: 'comments-o',
     hexcolor: '#ad4cf9',
     creationLabel: 'Write a thread',
-    domContainer: 'appContainer',
+    domContainer: 'appFeatureContainer',
     apiUrl: 'http://localhost:6543/api/v2',
     mockApiUrl: 'http://localhost:3001',
     apiHeader: {

frontend_app_thread/src/index.js

 const appInterface = {
   name: 'thread',
   isRendered: false,
-  renderAppFull: data => {
+  renderAppFeature: data => {
     return ReactDOM.render(
       <Thread data={data} />
       , document.getElementById(data.config.domContainer)

frontend/src/component/common/layout/PageTitle.jsx → frontend_lib/src/component/Layout/PageTitle.jsx

       <div className={classnames(`${props.parentClass}__title`, 'pageTitleGeneric__title d-flex align-items-center')}>
         <div className='pageTitleGeneric__title__icon mr-3'>
           <i className='fa fa-fw fa-th mr-3' />
-          Liste des Contenus
+          {props.title}
         </div>
-        {props.title}
+        {props.subtitle}
       </div>
       {props.children}
     </div>
 
 PageTitle.propTypes = {
   title: PropTypes.string.isRequired,
+  subtitle: PropTypes.string,
   parentClass: PropTypes.string,
   customClass: PropTypes.string
 }

frontend_lib/src/index.js

 import libTextAreaApp from './component/Input/TextAreaApp/TextAreaApp.jsx'
 import libBtnSwitch from './component/Input/BtnSwitch/BtnSwitch.jsx'
 
+import libPageWrapper from './component/Layout/PageWrapper.jsx'
+import libPageTitle from './component/Layout/PageTitle.jsx'
+import libPageContent from './component/Layout/PageContent.jsx'
+
 import libDelimiter from './component/Delimiter/Delimiter.jsx'
 
 import libCardPopup from './component/CardPopup/CardPopup.jsx'
 export const TextAreaApp = libTextAreaApp
 export const BtnSwitch = libBtnSwitch
 
+export const PageWrapper = libPageWrapper
+export const PageTitle = libPageTitle
+export const PageContent = libPageContent
+
 export const Delimiter = libDelimiter
 
 export const CardPopup = libCardPopup

install_frontend_dependencies.sh

 npm link tracim_frontend_lib
 cd -
 
+# install app Admin Workspace User
+
+log "cd frontend_app_admin_workspace_user"
+cd frontend_app_admin_workspace_user
+log "npm i"
+npm i
+log "npm link tracim_frontend_lib"
+npm link tracim_frontend_lib
+cd -
+
 # install Tracim Frontend
 
 log "cd frontend"