[wip] integration of PopupCreateContent

src/component/PopupContent/FileContent.jsx

@@ -1,44 +0,0 @@
-import React, { Component } from 'react'
-
-class fileContent extends Component {
-  render () {
-    return (
-      <div className='filecontent p-3'>
-        <div className='filecontent__close d-flex justify-content-end'>
-          <i className='fa fa-times' />
-        </div>
-        <div className='filecontent__contentname d-flex align-items-center mb-4'>
-          <div className='filecontent__contentname__icon mr-3'>
-            <i className='fa fa-file-text-o' />
-          </div>
-          <div className='filecontent__contentname__title'>
-            Fichier de prévisualisation
-          </div>
-        </div>
-
-        <div className='filecontent__text'>Importer votre fichier :</div>
-        <div className='filecontent__form mb-4' drop='true'>
-          <div className='filecontent__form__icon d-flex justify-content-center'>
-            <label htmlFor='filecontentUpload' type='file'>
-              <i className='fa fa-download' />
-            </label>
-            <input type='file' className='d-none' id='filecontentUpload' />
-          </div>
-          <div className='filecontent__form__instruction text-center'>
-            Glisser votre fichier ici
-          </div>
-          <div className='filecontent__form__text text-center'>
-            Vous pouvez également importer votre fichier en cliquant sur l'icon
-          </div>
-        </div>
-        <div className='filecontent__button d-flex justify-content-end'>
-          <button className='filecontent__form__button btn btn-outline-primary'>
-            Créer et Valider
-          </button>
-        </div>
-      </div>
-    )
-  }
-}
-
-export default fileContent

src/component/PopupContent/GenericContent.jsx

@@ -1,33 +0,0 @@
-import React, { Component } from 'react'
-
-class GenericContent extends Component {
-  render () {
-    return (
-      <div className='genericcontent p-3'>
-        <div className='genericcontent__close d-flex justify-content-end'>
-          <i className='fa fa-times' />
-        </div>
-        <div className='genericcontent__contentname d-flex align-items-center mb-4'>
-          <div className='genericcontent__contentname__icon mr-3'>
-            <i className='fa fa-file-word-o' />
-          </div>
-          <div className='genericcontent__contentname__title'>
-            Fichier Texte
-          </div>
-        </div>
-        <form className='genericcontent__form'>
-          <div className='genericcontent__form__input mb-2'>
-            <input type='text' placeholder='Titre du document' />
-          </div>
-          <div className='genericcontent__form__button d-flex justify-content-end p-3'>
-            <button className='genericcontent__form__button btn btn-outline-primary' type='submit'>
-              Créer et Valider
-            </button>
-          </div>
-        </form>
-      </div>
-    )
-  }
-}
-
-export default GenericContent

src/component/PopupContent/WksContent.jsx

@@ -1,30 +0,0 @@
-import React, { Component } from 'react'
-
-class wksContent extends Component {
-  render () {
-    return (
-      <div className='wkscontent p-3'>
-        <div className='wkscontent__close d-flex justify-content-end'>
-          <i className='fa fa-times' />
-        </div>
-        <div className='wkscontent__contentname d-flex align-items-center mb-4'>
-          <div className='wkscontent__contentname__title'>
-            Création d'un espace de travail
-          </div>
-        </div>
-        <form className='wkscontent__form'>
-          <div className='wkscontent__form__input mb-2'>
-            <input type='text' placeholder='Titre du document' />
-          </div>
-          <div className='wkscontent__form__button d-flex justify-content-end p-3'>
-            <button className='wkscontent__form__button btn btn-outline-primary' type='submit'>
-              Créer et Valider
-            </button>
-          </div>
-        </form>
-      </div>
-    )
-  }
-}
-
-export default wksContent

src/component/PopupCreateContent/ContentType/FileContent.jsx

@@ -0,0 +1,51 @@
+import React from 'react'
+
+require('./FileContent.styl')
+
+const FileContent = props => {
+  return (
+    <div className='filecontent p-3'>
+      <div className='filecontent__close d-flex justify-content-end'>
+        <i className='fa fa-times' />
+      </div>
+
+      <div className='filecontent__contentname d-flex align-items-center mb-4'>
+        <div className='filecontent__contentname__icon mr-3'>
+          <i className='fa fa-file-text-o' />
+        </div>
+
+        <div className='filecontent__contentname__title'>
+          Fichier de prévisualisation
+        </div>
+      </div>
+
+      <div className='filecontent__text'>Importer votre fichier :</div>
+
+      <div className='filecontent__form mb-4' drop='true'>
+        <div className='filecontent__form__icon d-flex justify-content-center'>
+          <label htmlFor='filecontentUpload' type='file'>
+            <i className='fa fa-download' />
+          </label>
+
+          <input type='file' className='d-none' id='filecontentUpload' />
+        </div>
+
+        <div className='filecontent__form__instruction text-center'>
+          Glisser votre fichier ici
+        </div>
+
+        <div className='filecontent__form__text text-center'>
+          Vous pouvez également importer votre fichier en cliquant sur l'icon
+        </div>
+      </div>
+
+      <div className='filecontent__button d-flex justify-content-end'>
+        <button className='filecontent__form__button btn btn-outline-primary'>
+          Créer et Valider
+        </button>
+      </div>
+    </div>
+  )
+}
+
+export default FileContent

src/component/PopupCreateContent/ContentType/GenericContent.jsx

@@ -0,0 +1,37 @@
+import React from 'react'
+
+require('./GenericContent.styl')
+
+const GenericContent = props => {
+  return (
+    <div className='genericcontent p-3'>
+      <div className='genericcontent__close d-flex justify-content-end'>
+        <i className='fa fa-times' />
+      </div>
+
+      <div className='genericcontent__contentname d-flex align-items-center mb-4'>
+        <div className='genericcontent__contentname__icon mr-3'>
+          <i className='fa fa-file-word-o' />
+        </div>
+
+        <div className='genericcontent__contentname__title'>
+          Fichier Texte
+        </div>
+      </div>
+
+      <form className='genericcontent__form'>
+        <div className='genericcontent__form__input mb-2'>
+          <input type='text' placeholder='Titre du document' />
+        </div>
+
+        <div className='genericcontent__form__button d-flex justify-content-end p-3'>
+          <button className='genericcontent__form__button btn btn-outline-primary' type='submit'>
+            Créer et Valider
+          </button>
+        </div>
+      </form>
+    </div>
+  )
+}
+
+export default GenericContent

src/component/PopupCreateContent/ContentType/GenericContent.styl

@@ -0,0 +1,16 @@
+.genericcontent
+  &__close
+    cursor pointer
+  &__contentname
+    &__icon
+      font-size 30px
+    &__title
+      font-size 20px
+      color htmlColor
+  &__form
+    &__input
+      & > input
+        border: 1px solid grey;
+        border-radius: 5px;
+        padding: 5px;
+        width: 353PX;

src/component/PopupCreateContent/ContentType/WsContent.jsx

@@ -0,0 +1,33 @@
+import React from 'react'
+
+require('./WsContent.styl')
+
+const WsContent = props => {
+  return (
+    <div className='wscontent p-3'>
+      <div className='wscontent__close d-flex justify-content-end'>
+        <i className='fa fa-times' />
+      </div>
+
+      <div className='wscontent__contentname d-flex align-items-center mb-4'>
+        <div className='wscontent__contentname__title'>
+          Création d'un espace de travail
+        </div>
+      </div>
+
+      <form className='wscontent__form'>
+        <div className='wscontent__form__input mb-2'>
+          <input type='text' placeholder='Titre du document' />
+        </div>
+
+        <div className='wscontent__form__button d-flex justify-content-end p-3'>
+          <button className='wscontent__form__button btn btn-outline-primary' type='submit'>
+            Créer et Valider
+          </button>
+        </div>
+      </form>
+    </div>
+  )
+}
+
+export default WsContent

src/css/WksContent.styl → src/component/PopupCreateContent/ContentType/WsContent.styl

@@ -1,4 +1,4 @@
-.wkscontent
+.wscontent
   &__close
     cursor pointer
   &__contentname

src/component/PopupCreateContent/PopupCreateContainer.jsx

@@ -0,0 +1,47 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import CardPopup from '../common/CardPopup/CardPopup.jsx'
+import GenericContent from './ContentType/GenericContent.jsx'
+import FileContent from './ContentType/FileContent.jsx'
+import WsContent from './ContentType/WsContent.jsx'
+
+require('./PopupCreateContainer.styl')
+
+const PopupCreateContainer = props => {
+  const FormCreateContent = (() => {
+    switch (props.type) {
+      case 'Workspace':
+        return <WsContent />
+      case 'File':
+        return <FileContent />
+      case 'folder':
+        return <GenericContent />
+      default:
+        return <GenericContent />
+    }
+  })()
+
+  // return (
+  //   <div className='popupcontent'>
+  //     <div className='popupcontent__container card'>
+  //       <div className='popupcontent__container__header' />
+  //       <div className='card-body nopadding'>
+  //         { FormCreateContent }
+  //       </div>
+  //     </div>
+  //   </div>
+  // )
+  return (
+    <CardPopup customClass='popupCreateContent' onClose={props.onClose}>
+      { FormCreateContent }
+    </CardPopup>
+  )
+}
+
+export default PopupCreateContainer
+
+PopupCreateContainer.propTypes = {
+  type: PropTypes.string.isRequired,
+  folder: PropTypes.object,
+  onClose: PropTypes.func.isRequired
+}

src/component/PopupCreateContent/PopupCreateContainer.styl

@@ -0,0 +1,23 @@
+@import '../../css/Variable.styl'
+
+.popupCreateContent
+  position fixed
+  top 0
+  left 0
+  display flex
+  justify-content center
+  width 100%
+  z-index 5
+  .cardPopup__container
+    margin-top 120px
+    border 0
+    border-radius 10px
+    width 400px
+    background lightGrey
+    box-shadow shadow-all
+  &__header
+    border-top-right-radius 10px
+    border-top-left-radius 10px
+    width 100%
+    height 8px
+    background-color fileColor

src/component/Workspace/Folder.jsx

@@ -19,9 +19,9 @@ class Folder extends React.Component {
     this.setState({open: !this.state.open})
   }
 
-  handleClickNewFile = e => {
+  handleClickCreateContent = (e, folder, type) => {
     e.stopPropagation() // because we have a link inside a link (togler and newFile)
-    console.log('new file') // @TODO
+    this.props.onClickCreateContent(folder, type)
   }
 
   render () {
@@ -53,16 +53,15 @@ class Folder extends React.Component {
 
           <div className='folder__header__button'>
 
-            <div
-              className='folder__header__button__addbtn'
-              onClick={this.handleClickNewFile}
-            >
+            <div className='folder__header__button__addbtn'>
               <button className='addbtn__text btn btn-outline-primary dropdown-toggle' type='button' id='dropdownMenuButton' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>
                 {t('Folder.create')} ...
               </button>
 
+              {/* @TODO generate the subdropdown with available app from redux */}
+
               <div className='addbtn__subdropdown dropdown-menu' aria-labelledby='dropdownMenuButton'>
-                <div className='subdropdown__link dropdown-item'>
+                <div className='subdropdown__link dropdown-item' onClick={e => this.handleClickCreateContent(e, folderData, 'folder')}>
                   <div className='subdropdown__link__folder d-flex align-items-center'>
                     <div className='subdropdown__link__folder__icon mr-3'>
                       <i className='fa fa-fw fa-folder-o' />
@@ -72,7 +71,7 @@ class Folder extends React.Component {
                     </div>
                   </div>
                 </div>
-                <div className='subdropdown__link dropdown-item'>
+                <div className='subdropdown__link dropdown-item' onClick={e => this.handleClickCreateContent(e, folderData, 'PageHtml')}>
                   <div className='subdropdown__link__apphtml d-flex align-items-center'>
                     <div className='subdropdown__link__apphtml__icon mr-3'>
                       <i className='fa fa-fw fa-file-text-o' />
@@ -82,7 +81,7 @@ class Folder extends React.Component {
                     </div>
                   </div>
                 </div>
-                <div className='subdropdown__link dropdown-item'>
+                <div className='subdropdown__link dropdown-item' onClick={e => this.handleClickCreateContent(e, folderData, 'File')}>
                   <div className='subdropdown__link__appfile d-flex align-items-center'>
                     <div className='subdropdown__link__appfile__icon mr-3'>
                       <i className='fa fa-fw fa-file-image-o' />
@@ -92,7 +91,7 @@ class Folder extends React.Component {
                     </div>
                   </div>
                 </div>
-                <div className='subdropdown__link dropdown-item'>
+                <div className='subdropdown__link dropdown-item' onClick={e => this.handleClickCreateContent(e, folderData, 'PageMarkdown')}>
                   <div className='subdropdown__link__appmarkdown d-flex align-items-center'>
                     <div className='subdropdown__link__appmarkdown__icon mr-3'>
                       <i className='fa fa-fw fa-file-code-o' />
@@ -102,7 +101,7 @@ class Folder extends React.Component {
                     </div>
                   </div>
                 </div>
-                <div className='subdropdown__link dropdown-item'>
+                <div className='subdropdown__link dropdown-item' onClick={e => this.handleClickCreateContent(e, folderData, 'Thread')}>
                   <div className='subdropdown__link__appthread d-flex align-items-center'>
                     <div className='subdropdown__link__appthread__icon mr-3'>
                       <i className='fa fa-fw fa-comments-o' />
@@ -112,7 +111,7 @@ class Folder extends React.Component {
                     </div>
                   </div>
                 </div>
-                <div className='subdropdown__link dropdown-item'>
+                <div className='subdropdown__link dropdown-item' onClick={e => this.handleClickCreateContent(e, folderData, 'Task')}>
                   <div className='subdropdown__link__apptask d-flex align-items-center'>
                     <div className='subdropdown__link__apptask__icon mr-3'>
                       <i className='fa fa-fw fa-list-ul' />
@@ -122,7 +121,7 @@ class Folder extends React.Component {
                     </div>
                   </div>
                 </div>
-                <div className='subdropdown__link dropdown-item'>
+                <div className='subdropdown__link dropdown-item' onClick={e => this.handleClickCreateContent(e, folderData, 'Issue')}>
                   <div className='subdropdown__link__appissue d-flex align-items-center'>
                     <div className='subdropdown__link__appissue__icon mr-3'>
                       <i className='fa fa-fw fa-ticket' />

src/component/common/CardPopup/CardPopup.jsx

@@ -16,18 +16,7 @@ const CardPopup = props => {
           </div>
 
           <div className='cardPopup__body'>
-            <div className='cardPopup__body__icon'>
-              <i className={props.icon} />
-            </div>
-
-            <div className='cardPopup__body__text'>
-              <div className='cardPopup__body__text__title'>
-                {props.title}
-              </div>
-              <div className='cardPopup__body__text__message'>
-                {props.message}
-              </div>
-            </div>
+            { props.children }
           </div>
         </div>
       </div>
@@ -39,16 +28,10 @@ export default CardPopup
 
 CardPopup.propTypes = {
   customClass: PropTypes.string,
-  title: PropTypes.string,
-  message: PropTypes.string,
-  icon: PropTypes.string,
   onClose: PropTypes.func
 }
 
 CardPopup.defaultProps = {
   customClass: 'defaultCustomClass',
-  title: 'Default title',
-  message: 'Default message',
-  icon: 'fa fa-times-circle',
   onClose: () => {}
 }

src/container/PopupCreateContainer.jsx

@@ -1,54 +0,0 @@
-import React, { Component } from 'react'
-// import GenericContent from '../component/PopupContent/GenericContent.jsx'
-// import FileContent from '../component/PopupContent/FileContent.jsx'
-// import WksContent from '../component/PopupContent/WksContent.jsx'
-
-class PopupCreateContainer extends Component {
-  render () {
-    return (
-      <div className='popupcontent'>
-        <div className='popupcontent__container card'>
-          <div className='popupcontent__container__header' />
-          <div className='card-body nopadding'>
-            <div className='filecontent p-3'>
-              <div className='filecontent__close d-flex justify-content-end'>
-                <i className='fa fa-times' />
-              </div>
-              <div className='filecontent__contentname d-flex align-items-center mb-4'>
-                <div className='filecontent__contentname__icon mr-3'>
-                  <i className='fa fa-file-text-o' />
-                </div>
-                <div className='filecontent__contentname__title'>
-                  Fichier de prévisualisation
-                </div>
-              </div>
-
-              <div className='filecontent__text'>Importer votre fichier :</div>
-              <div className='filecontent__form mb-4' drop='true'>
-                <div className='filecontent__form__icon d-flex justify-content-center'>
-                  <label htmlFor='filecontentUpload' type='file'>
-                    <i className='fa fa-download' />
-                  </label>
-                  <input type='file' className='d-none' id='filecontentUpload' />
-                </div>
-                <div className='filecontent__form__instruction text-center'>
-                  Glisser votre fichier ici
-                </div>
-                <div className='filecontent__form__text text-center'>
-                  Vous pouvez également importer votre fichier en cliquant sur l'icon
-                </div>
-              </div>
-              <div className='filecontent__button d-flex justify-content-end'>
-                <button className='filecontent__form__button btn btn-outline-primary'>
-                  Créer et Valider
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    )
-  }
-}
-
-export default PopupCreateContainer

src/container/WIPcomponent.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { connect } from 'react-redux'
-import PopupCreateContainer from './PopupCreateContainer.jsx'
+import PopupCreateContainer from '../component/PopupCreateContent/PopupCreateContainer.jsx'
 import ProgressBar from './ProgressBar.jsx'
 import Home from './Home.jsx'
 import CardPopup from '../component/common/CardPopup/CardPopup.jsx'

src/container/WorkspaceContent.jsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import { connect } from 'react-redux'
 import appFactory from '../appFactory.js'
+import { PAGE } from '../helper.js'
 import Sidebar from './Sidebar.jsx'
 import Folder from '../component/Workspace/Folder.jsx'
 import ContentItem from '../component/Workspace/ContentItem.jsx'
@@ -9,29 +10,41 @@ 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 PopupCreateContent from '../component/PopupCreateContent/PopupCreateContainer.jsx'
 import {
   getAppList,
   getWorkspaceContent,
   getFolderContent
 } from '../action-creator.async.js'
-import {newFlashMessage, setWorkspaceData} from '../action-creator.sync.js'
-import { PAGE } from '../helper.js'
+import {
+  newFlashMessage,
+  setWorkspaceData
+} from '../action-creator.sync.js'
 
 const qs = require('query-string')
 
 class WorkspaceContent extends React.Component {
+  constructor (props) {
+    super(props)
+    this.state = {
+      popupCreateContent: {
+        display: false,
+        type: undefined,
+        folder: undefined
+      }
+    }
+  }
+
   async componentDidMount () {
     const { workspaceList, app, match, location, dispatch } = this.props
 
     if (Object.keys(app).length === 0) dispatch(getAppList()) // async but no need await
 
-    const wsToLoad = (() => {
-      if (match.params.idws !== undefined) return match.params.idws
-      if (workspaceList.length > 0) return workspaceList[0].id // load first ws if none specified
-      return null
-    })()
+    let wsToLoad = null
+    if (match.params.idws !== undefined) wsToLoad = match.params.idws
+    else if (workspaceList.length > 0) wsToLoad = workspaceList[0].id // load first ws if none specified
 
-    if (wsToLoad === null) return
+    if (wsToLoad === null) return // ws already loaded
 
     const wsContent = await dispatch(getWorkspaceContent(wsToLoad))
     if (wsContent.status === 200) {
@@ -80,16 +93,32 @@ class WorkspaceContent extends React.Component {
     this.props.dispatch(getFolderContent(this.props.workspace.id, folderId))
   }
 
-  filterWorkspaceContent = (contentList, filter) => filter.length === 0
-    ? contentList
-    : contentList.filter(c => c.type === 'folder' || filter.includes(c.type)) // keep unfiltered files and folders
-      .map(c => c.type !== 'folder' ? c : {...c, content: this.filterWorkspaceContent(c.content, filter)}) // recursively filter folder content
-      // .filter(c => c.type !== 'folder' || c.content.length > 0) // remove empty folder => 2018/05/21 - since we load only one lvl of content, don't remove empty folders
+  handleClickCreateContent = (folder, contentType) => this.setState({
+    popupCreateContent: {
+      display: true,
+      type: contentType,
+      folder: folder
+    }
+  })
+
+  handleClosePopupCreateContent = () => this.setState({
+    popupCreateContent: {
+      display: false,
+      type: undefined,
+      folder: undefined
+    }
+  })
 
   render () {
     const { workspace, app } = this.props
 
-    const filteredWorkspaceContent = this.filterWorkspaceContent(workspace.content, workspace.filter)
+    const filterWorkspaceContent = (contentList, filter) => filter.length === 0
+      ? contentList
+      : contentList.filter(c => c.type === 'folder' || filter.includes(c.type)) // keep unfiltered files and folders
+        .map(c => c.type !== 'folder' ? c : {...c, content: this.filterWorkspaceContent(c.content, filter)}) // recursively filter folder content
+    // .filter(c => c.type !== 'folder' || c.content.length > 0) // remove empty folder => 2018/05/21 - since we load only one lvl of content, don't remove empty folders
+
+    const filteredWorkspaceContent = filterWorkspaceContent(workspace.content, workspace.filter)
 
     return (
       <div className='sidebarpagecontainer'>
@@ -105,6 +134,14 @@ class WorkspaceContent extends React.Component {
           </PageTitle>
 
           <PageContent parentClass='workspace__content'>
+            { this.state.popupCreateContent.display &&
+              <PopupCreateContent
+                type={this.state.popupCreateContent.type}
+                folder={this.state.popupCreateContent.folder}
+                onClose={this.handleClosePopupCreateContent}
+              />
+            }
+
             <div className='workspace__content__fileandfolder folder__content active'>
               <ContentItemHeader />
 
@@ -122,6 +159,7 @@ class WorkspaceContent extends React.Component {
                       delete: this.handleClickDeleteContentItem
                     }}
                     onClickFolder={this.handleClickFolder}
+                    onClickCreateContent={this.handleClickCreateContent}
                     isLast={i === filteredWorkspaceContent.length - 1}
                     key={c.id}
                   />

src/css/Generic.styl

@@ -184,21 +184,3 @@
       border 1px solid grey
       border-radius 10px
       padding 15px 25px
-
-.genericcontent
-  &__close
-    cursor pointer
-  &__contentname
-    &__icon
-      font-size 30px
-    &__title
-      font-size 20px
-      color htmlColor
-  &__form
-    &__input
-      & > input
-        border: 1px solid grey;
-        border-radius: 5px;
-        padding: 5px;
-        width: 353PX;
-

src/css/PopupCreateContainer.styl

@@ -1,19 +0,0 @@
-.popupcontent
-  position fixed
-  display flex
-  justify-content center
-  width 100%
-  z-index 3
-  &__container
-    margin-top 120px
-    border 0
-    border-radius 10px
-    width 400px
-    background lightGrey
-    box-shadow shadow-all
-    &__header
-      border-top-right-radius 10px
-      border-top-left-radius 10px
-      width 100%
-      height 8px
-      background-color fileColor

src/css/index.styl

@@ -28,10 +28,6 @@ html, body, #content
 
 @import 'FlashMessage'
 
-@import 'PopupCreateContainer'
-@import 'FileContent'
-@import 'WksContent'
-
 @import 'Homepage'
 @import 'HomepageCard'