WorkspaceContent.jsx 12KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301
  1. import React from 'react'
  2. import { connect } from 'react-redux'
  3. import { withRouter, Route } from 'react-router-dom'
  4. import appFactory from '../appFactory.js'
  5. import { PAGE, ROLE, findIdRoleUserWorkspace } from '../helper.js'
  6. import Folder from '../component/Workspace/Folder.jsx'
  7. import ContentItem from '../component/Workspace/ContentItem.jsx'
  8. import ContentItemHeader from '../component/Workspace/ContentItemHeader.jsx'
  9. import DropdownCreateButton from '../component/common/Input/DropdownCreateButton.jsx'
  10. import OpenContentApp from '../component/Workspace/OpenContentApp.jsx'
  11. import OpenCreateContentApp from '../component/Workspace/OpenCreateContentApp.jsx'
  12. import {
  13. PageWrapper,
  14. PageTitle,
  15. PageContent
  16. } from 'tracim_frontend_lib'
  17. import {
  18. getWorkspaceContentList,
  19. getWorkspaceMemberList,
  20. getFolderContent,
  21. putWorkspaceContentArchived,
  22. putWorkspaceContentDeleted
  23. } from '../action-creator.async.js'
  24. import {
  25. newFlashMessage,
  26. setWorkspaceContentList,
  27. setWorkspaceContentArchived,
  28. setWorkspaceContentDeleted,
  29. setWorkspaceMemberList
  30. } from '../action-creator.sync.js'
  31. const qs = require('query-string')
  32. class WorkspaceContent extends React.Component {
  33. constructor (props) {
  34. super(props)
  35. this.state = {
  36. workspaceIdInUrl: props.match.params.idws ? parseInt(props.match.params.idws) : null, // this is used to avoid handling the parseInt every time
  37. appOpenedType: false
  38. }
  39. document.addEventListener('appCustomEvent', this.customEventReducer)
  40. }
  41. customEventReducer = async ({ detail: { type, data } }) => {
  42. switch (type) {
  43. case 'refreshContentList':
  44. console.log('%c<WorkspaceContent> Custom event', 'color: #28a745', type, data)
  45. this.loadContentList(this.state.workspaceIdInUrl)
  46. break
  47. case 'openContentUrl':
  48. console.log('%c<WorkspaceContent> Custom event', 'color: #28a745', type, data)
  49. this.props.history.push(PAGE.WORKSPACE.CONTENT(data.idWorkspace, data.contentType, data.idContent))
  50. break
  51. case 'appClosed':
  52. case 'hide_popupCreateContent':
  53. console.log('%c<WorkspaceContent> Custom event', 'color: #28a745', type, data, this.state.workspaceIdInUrl)
  54. this.props.history.push(PAGE.WORKSPACE.CONTENT_LIST(this.state.workspaceIdInUrl))
  55. this.setState({appOpenedType: false})
  56. break
  57. }
  58. }
  59. async componentDidMount () {
  60. const { workspaceList, match } = this.props
  61. console.log('%c<WorkspaceContent> componentDidMount', 'color: #c17838')
  62. let wsToLoad = null
  63. if (match.params.idws === undefined) {
  64. if (workspaceList.length > 0) wsToLoad = workspaceList[0].id
  65. else return
  66. } else wsToLoad = match.params.idws
  67. this.loadContentList(wsToLoad)
  68. }
  69. async componentDidUpdate (prevProps, prevState) {
  70. console.log('%c<WorkspaceContent> componentDidUpdate', 'color: #c17838')
  71. if (this.state.workspaceIdInUrl === null) return
  72. const idWorkspace = parseInt(this.props.match.params.idws)
  73. if (isNaN(idWorkspace)) return
  74. const prevFilter = qs.parse(prevProps.location.search).type
  75. const currentFilter = qs.parse(this.props.location.search).type
  76. if (prevState.workspaceIdInUrl !== idWorkspace || prevFilter !== currentFilter) {
  77. this.setState({workspaceIdInUrl: idWorkspace})
  78. this.loadContentList(idWorkspace)
  79. }
  80. // if (user.user_id !== -1 && prevProps.user.id !== user.id) dispatch(getWorkspaceList(user.user_id, idWorkspace))
  81. }
  82. componentWillUnmount () {
  83. this.props.dispatchCustomEvent('unmount_app')
  84. document.removeEventListener('appCustomEvent', this.customEventReducer)
  85. }
  86. loadContentList = async idWorkspace => {
  87. const { user, dispatch } = this.props
  88. const wsContent = await dispatch(getWorkspaceContentList(user, idWorkspace, 0))
  89. const wsMember = await dispatch(getWorkspaceMemberList(user, idWorkspace))
  90. if (await wsContent.status === 200) dispatch(setWorkspaceContentList(wsContent.json))
  91. else dispatch(newFlashMessage('Error while loading workspace', 'danger'))
  92. if (await wsMember.status === 200) dispatch(setWorkspaceMemberList(wsMember.json))
  93. else dispatch(newFlashMessage('Error while loading members list', 'warning'))
  94. }
  95. handleClickContentItem = content => {
  96. console.log('%c<WorkspaceContent> content clicked', 'color: #c17838', content)
  97. this.props.history.push(PAGE.WORKSPACE.CONTENT(content.idWorkspace, content.type, content.id))
  98. }
  99. handleClickEditContentItem = (e, content) => {
  100. e.stopPropagation()
  101. console.log('%c<WorkspaceContent> edit nyi', 'color: #c17838', content)
  102. }
  103. handleClickMoveContentItem = (e, content) => {
  104. e.stopPropagation()
  105. console.log('%c<WorkspaceContent> move nyi', 'color: #c17838', content)
  106. }
  107. handleClickDownloadContentItem = (e, content) => {
  108. e.stopPropagation()
  109. console.log('%c<WorkspaceContent> download nyi', 'color: #c17838', content)
  110. }
  111. handleClickArchiveContentItem = async (e, content) => {
  112. const { props, state } = this
  113. e.stopPropagation()
  114. const fetchPutContentArchived = await props.dispatch(putWorkspaceContentArchived(props.user, content.idWorkspace, content.id))
  115. switch (fetchPutContentArchived.status) {
  116. case 204:
  117. props.dispatch(setWorkspaceContentArchived(content.idWorkspace, content.id))
  118. this.loadContentList(state.workspaceIdInUrl)
  119. break
  120. default: props.dispatch(newFlashMessage(props.t('Error while archiving document')))
  121. }
  122. }
  123. handleClickDeleteContentItem = async (e, content) => {
  124. const { props, state } = this
  125. e.stopPropagation()
  126. const fetchPutContentDeleted = await props.dispatch(putWorkspaceContentDeleted(props.user, content.idWorkspace, content.id))
  127. switch (fetchPutContentDeleted.status) {
  128. case 204:
  129. props.dispatch(setWorkspaceContentDeleted(content.idWorkspace, content.id))
  130. this.loadContentList(state.workspaceIdInUrl)
  131. break
  132. default: props.dispatch(newFlashMessage(props.t('Error while deleting document')))
  133. }
  134. }
  135. handleClickFolder = folderId => {
  136. this.props.dispatch(getFolderContent(this.props.workspace.id, folderId))
  137. }
  138. handleClickCreateContent = (e, idFolder, contentType) => {
  139. e.stopPropagation()
  140. this.props.history.push(`${PAGE.WORKSPACE.NEW(this.state.workspaceIdInUrl, contentType)}?parent_id=${idFolder}`)
  141. }
  142. handleUpdateAppOpenedType = openedAppType => this.setState({appOpenedType: openedAppType})
  143. render () {
  144. const { user, currentWorkspace, workspaceContentList, contentType } = this.props
  145. const filterWorkspaceContent = (contentList, filter) => {
  146. return filter.length === 0
  147. ? contentList
  148. : contentList.filter(c => c.type === 'folder' || filter.includes(c.type)) // keep unfiltered files and folders
  149. // @FIXME we need to filter subfolder too, but right now, we dont handle subfolder
  150. // .map(c => c.type !== 'folder' ? c : {...c, content: filterWorkspaceContent(c.content, filter)}) // recursively filter folder content
  151. }
  152. // .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
  153. const urlFilter = qs.parse(this.props.location.search).type
  154. const filteredWorkspaceContentList = workspaceContentList.length > 0
  155. ? filterWorkspaceContent(workspaceContentList, urlFilter ? [urlFilter] : [])
  156. : []
  157. const idRoleUserWorkspace = findIdRoleUserWorkspace(user.user_id, currentWorkspace.memberList, ROLE)
  158. return (
  159. <div className='WorkspaceContent' style={{width: '100%'}}>
  160. <OpenContentApp
  161. // automatically open the app for the idContent in url
  162. idWorkspace={this.state.workspaceIdInUrl}
  163. appOpenedType={this.state.appOpenedType}
  164. updateAppOpenedType={this.handleUpdateAppOpenedType}
  165. />
  166. <Route path={PAGE.WORKSPACE.NEW(':idws', ':type')} component={() =>
  167. <OpenCreateContentApp
  168. // automatically open the popup create content of the app in url
  169. idWorkspace={this.state.workspaceIdInUrl}
  170. appOpenedType={this.state.appOpenedType}
  171. />
  172. } />
  173. <PageWrapper customeClass='workspace'>
  174. <PageTitle
  175. parentClass='workspace__header'
  176. customClass='justify-content-between'
  177. title='Liste des Contenus'
  178. subtitle={workspaceContentList.label ? workspaceContentList.label : ''}
  179. >
  180. {idRoleUserWorkspace >= 2 &&
  181. <DropdownCreateButton
  182. parentClass='workspace__header__btnaddcontent'
  183. idFolder={null} // null because it is workspace root content
  184. onClickCreateContent={this.handleClickCreateContent}
  185. availableApp={contentType.filter(ct => ct.slug !== 'comment')} // @FIXME: Côme - 2018/08/21 - should use props.appList
  186. />
  187. }
  188. </PageTitle>
  189. <PageContent parentClass='workspace__content'>
  190. <div className='workspace__content__fileandfolder folder__content active'>
  191. <ContentItemHeader />
  192. { filteredWorkspaceContentList.map((c, i) => c.type === 'folder'
  193. ? (
  194. <Folder
  195. availableApp={contentType.filter(ct => ct.slug !== 'comment')} // @FIXME: Côme - 2018/08/21 - should use props.appList
  196. folderData={c}
  197. onClickItem={this.handleClickContentItem}
  198. idRoleUserWorkspace={idRoleUserWorkspace}
  199. onClickExtendedAction={{
  200. edit: this.handleClickEditContentItem,
  201. move: this.handleClickMoveContentItem,
  202. download: this.handleClickDownloadContentItem,
  203. archive: this.handleClickArchiveContentItem,
  204. delete: this.handleClickDeleteContentItem
  205. }}
  206. onClickFolder={this.handleClickFolder}
  207. onClickCreateContent={this.handleClickCreateContent}
  208. isLast={i === filteredWorkspaceContentList.length - 1}
  209. key={c.id}
  210. />
  211. )
  212. : (
  213. <ContentItem
  214. label={c.label}
  215. type={c.type}
  216. faIcon={contentType.length ? contentType.find(a => a.slug === c.type).faIcon : ''}
  217. statusSlug={c.statusSlug}
  218. contentType={contentType.length ? contentType.find(ct => ct.slug === c.type) : null}
  219. onClickItem={() => this.handleClickContentItem(c)}
  220. idRoleUserWorkspace={idRoleUserWorkspace}
  221. onClickExtendedAction={{
  222. edit: e => this.handleClickEditContentItem(e, c),
  223. move: e => this.handleClickMoveContentItem(e, c),
  224. download: e => this.handleClickDownloadContentItem(e, c),
  225. archive: e => this.handleClickArchiveContentItem(e, c),
  226. delete: e => this.handleClickDeleteContentItem(e, c)
  227. }}
  228. onClickCreateContent={this.handleClickCreateContent}
  229. isLast={i === filteredWorkspaceContentList.length - 1}
  230. key={c.id}
  231. />
  232. )
  233. )}
  234. </div>
  235. {idRoleUserWorkspace >= 2 &&
  236. <DropdownCreateButton
  237. customClass='workspace__content__button'
  238. idFolder={null}
  239. onClickCreateContent={this.handleClickCreateContent}
  240. availableApp={contentType.filter(ct => ct.slug !== 'comment')} // @FIXME: Côme - 2018/08/21 - should use props.appList
  241. />
  242. }
  243. </PageContent>
  244. </PageWrapper>
  245. </div>
  246. )
  247. }
  248. }
  249. const mapStateToProps = ({ user, currentWorkspace, workspaceContentList, workspaceList, contentType }) => ({
  250. user, currentWorkspace, workspaceContentList, workspaceList, contentType
  251. })
  252. export default withRouter(connect(mapStateToProps)(appFactory(WorkspaceContent)))