HtmlDocument.jsx 13KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391
  1. import React from 'react'
  2. import HtmlDocumentComponent from '../component/HtmlDocument.jsx'
  3. import { translate } from 'react-i18next'
  4. import i18n from '../i18n.js'
  5. import {
  6. addAllResourceI18n,
  7. handleFetchResult,
  8. PopinFixed,
  9. PopinFixedHeader,
  10. PopinFixedOption,
  11. PopinFixedContent,
  12. Timeline,
  13. NewVersionBtn,
  14. ArchiveDeleteContent,
  15. SelectStatus
  16. } from 'tracim_frontend_lib'
  17. import { MODE, debug } from '../helper.js'
  18. import {
  19. getHtmlDocContent,
  20. getHtmlDocComment,
  21. getHtmlDocRevision,
  22. postHtmlDocNewComment,
  23. putHtmlDocContent,
  24. putHtmlDocStatus
  25. } from '../action.async.js'
  26. class HtmlDocument extends React.Component {
  27. constructor (props) {
  28. super(props)
  29. this.state = {
  30. appName: 'html-document',
  31. isVisible: true,
  32. config: props.data ? props.data.config : debug.config,
  33. loggedUser: props.data ? props.data.loggedUser : debug.loggedUser,
  34. content: props.data ? props.data.content : debug.content,
  35. rawContentBeforeEdit: '',
  36. timeline: props.data ? [] : [], // debug.timeline,
  37. newComment: '',
  38. timelineWysiwyg: false,
  39. mode: MODE.VIEW
  40. }
  41. // i18n has been init, add resources from frontend
  42. addAllResourceI18n(i18n, props.data ? props.data.config.translation : debug.config.translation)
  43. document.addEventListener('appCustomEvent', this.customEventReducer)
  44. }
  45. customEventReducer = ({ detail: { type, data } }) => { // action: { type: '', data: {} }
  46. switch (type) {
  47. case 'html-documents_showApp':
  48. console.log('%c<HtmlDocument> Custom event', 'color: #28a745', type, data)
  49. this.setState({isVisible: true})
  50. break
  51. case 'html-documents_hideApp':
  52. console.log('%c<HtmlDocument> Custom event', 'color: #28a745', type, data)
  53. this.setState({isVisible: false})
  54. break
  55. case 'html-documents_reloadContent':
  56. console.log('%c<HtmlDocument> Custom event', 'color: #28a745', type, data)
  57. this.setState(prev => ({content: {...prev.content, ...data}, isVisible: true}))
  58. }
  59. }
  60. componentDidMount () {
  61. console.log('%c<HtmlDocument> did mount', `color: ${this.state.config.hexcolor}`)
  62. this.loadContent()
  63. }
  64. componentDidUpdate (prevProps, prevState) {
  65. const { state } = this
  66. console.log('%c<HtmlDocument> did update', `color: ${this.state.config.hexcolor}`, prevState, state)
  67. if (!prevState.content || !state.content) return
  68. if (prevState.content.content_id !== state.content.content_id) this.loadContent()
  69. if (state.mode === MODE.EDIT && prevState.mode !== state.mode) {
  70. tinymce.remove('#wysiwygNewVersion')
  71. wysiwyg('#wysiwygNewVersion', this.handleChangeText)
  72. }
  73. if (!prevState.timelineWysiwyg && state.timelineWysiwyg) wysiwyg('#wysiwygTimelineComment', this.handleChangeNewComment)
  74. else if (prevState.timelineWysiwyg && !state.timelineWysiwyg) tinymce.remove('#wysiwygTimelineComment')
  75. }
  76. componentWillUnmount () {
  77. console.log('%c<HtmlDocument> will Unmount', `color: ${this.state.config.hexcolor}`)
  78. document.removeEventListener('appCustomEvent', this.customEventReducer)
  79. }
  80. loadContent = async () => {
  81. const { loggedUser, content, config } = this.state
  82. const fetchResultHtmlDocument = getHtmlDocContent(loggedUser, config.apiUrl, content.workspace_id, content.content_id)
  83. const fetchResultComment = getHtmlDocComment(loggedUser, config.apiUrl, content.workspace_id, content.content_id)
  84. const fetchResultRevision = getHtmlDocRevision(loggedUser, config.apiUrl, content.workspace_id, content.content_id)
  85. handleFetchResult(await fetchResultHtmlDocument)
  86. .then(resHtmlDocument => this.setState({content: resHtmlDocument.body}))
  87. .catch(e => console.log('Error loading content.', e))
  88. Promise.all([
  89. handleFetchResult(await fetchResultComment),
  90. handleFetchResult(await fetchResultRevision)
  91. ])
  92. .then(([resComment, resRevision]) => {
  93. const resCommentWithProperDate = resComment.body.map(c => ({...c, created: (new Date(c.created)).toLocaleString()}))
  94. const revisionWithComment = resRevision.body
  95. .map((r, i) => ({
  96. ...r,
  97. created: (new Date(r.created)).toLocaleString(),
  98. timelineType: 'revision',
  99. commentList: r.comment_ids.map(ci => ({
  100. timelineType: 'comment',
  101. ...resCommentWithProperDate.find(c => c.content_id === ci)
  102. })),
  103. number: i + 1
  104. }))
  105. .reduce((acc, rev) => [
  106. ...acc,
  107. rev,
  108. ...rev.commentList.map(comment => ({
  109. ...comment,
  110. customClass: '',
  111. loggedUser: this.state.config.loggedUser
  112. }))
  113. ], [])
  114. this.setState({
  115. timeline: revisionWithComment,
  116. mode: resRevision.body.length === 1 ? MODE.EDIT : MODE.VIEW // first time editing the doc, open in edit mode
  117. })
  118. })
  119. .catch(e => {
  120. console.log('Error loading Timeline.', e)
  121. this.setState({timeline: []})
  122. })
  123. }
  124. handleClickBtnCloseApp = () => {
  125. this.setState({ isVisible: false })
  126. GLOBAL_dispatchEvent({type: 'appClosed', data: {}}) // handled by tracim_front::src/container/WorkspaceContent.jsx
  127. }
  128. handleSaveEditTitle = async newTitle => {
  129. const { loggedUser, config, content } = this.state
  130. const fetchResultSaveHtmlDoc = putHtmlDocContent(loggedUser, config.apiUrl, content.workspace_id, content.content_id, newTitle, content.raw_content)
  131. handleFetchResult(await fetchResultSaveHtmlDoc)
  132. .then(resSave => {
  133. if (resSave.apiResponse.status === 200) {
  134. this.loadContent()
  135. GLOBAL_dispatchEvent({ type: 'refreshContentList', data: {} })
  136. } else {
  137. console.warn('Error saving html-document. Result:', resSave, 'content:', content, 'config:', config)
  138. }
  139. })
  140. }
  141. handleClickNewVersion = () => this.setState(prev => ({
  142. rawContentBeforeEdit: prev.content.raw_content,
  143. mode: MODE.EDIT
  144. }))
  145. handleCloseNewVersion = () => {
  146. tinymce.remove('#wysiwygNewVersion')
  147. this.setState(prev => ({
  148. content: {
  149. ...prev.content,
  150. raw_content: prev.rawContentBeforeEdit
  151. },
  152. mode: MODE.VIEW
  153. }))
  154. }
  155. handleSaveHtmlDocument = async () => {
  156. const { loggedUser, content, config } = this.state
  157. const fetchResultSaveHtmlDoc = putHtmlDocContent(loggedUser, config.apiUrl, content.workspace_id, content.content_id, content.label, content.raw_content)
  158. handleFetchResult(await fetchResultSaveHtmlDoc)
  159. .then(resSave => {
  160. if (resSave.apiResponse.status === 200) {
  161. this.handleCloseNewVersion()
  162. this.loadContent()
  163. } else {
  164. console.warn('Error saving html-document. Result:', resSave, 'content:', content, 'config:', config)
  165. }
  166. })
  167. }
  168. handleChangeText = e => {
  169. const newText = e.target.value // because SyntheticEvent is pooled (react specificity)
  170. this.setState(prev => ({content: {...prev.content, raw_content: newText}}))
  171. }
  172. handleChangeNewComment = e => {
  173. const newComment = e.target.value
  174. this.setState({newComment})
  175. }
  176. handleClickValidateNewCommentBtn = async () => {
  177. const { loggedUser, config, content, newComment } = this.state
  178. const fetchResultSaveNewComment = await postHtmlDocNewComment(loggedUser, config.apiUrl, content.workspace_id, content.content_id, newComment)
  179. handleFetchResult(await fetchResultSaveNewComment)
  180. .then(resSave => {
  181. if (resSave.apiResponse.status === 200) {
  182. this.setState({newComment: ''})
  183. if (this.state.timelineWysiwyg) tinymce.get('wysiwygTimelineComment').setContent('')
  184. this.loadContent()
  185. } else {
  186. console.warn('Error saving html-document comment. Result:', resSave, 'content:', content, 'config:', config)
  187. }
  188. })
  189. }
  190. handleToggleWysiwyg = () => this.setState(prev => ({timelineWysiwyg: !prev.timelineWysiwyg}))
  191. handleChangeStatus = async newStatus => {
  192. const { loggedUser, config, content } = this.state
  193. const fetchResultSaveEditStatus = putHtmlDocStatus(loggedUser, config.apiUrl, content.workspace_id, content.content_id, newStatus)
  194. handleFetchResult(await fetchResultSaveEditStatus)
  195. .then(resSave => {
  196. if (resSave.status !== 204) { // 204 no content so dont take status from resSave.apiResponse.status
  197. console.warn('Error saving html-document comment. Result:', resSave, 'content:', content, 'config:', config)
  198. } else {
  199. this.loadContent()
  200. }
  201. })
  202. }
  203. handleClickArchive = async () => {
  204. console.log('archive')
  205. // const { config, content } = this.state
  206. //
  207. // const fetchResultArchive = await fetch(`${config.apiUrl}/workspaces/${content.workspace_id}/contents/${content.content_id}/archive`, {
  208. // ...FETCH_CONFIG,
  209. // method: 'PUT'
  210. // })
  211. }
  212. handleClickDelete = async () => {
  213. console.log('delete')
  214. // const { config, content } = this.state
  215. // const fetchResultDelete = await fetch(`${config.apiUrl}/workspaces/${content.workspace_id}/contents/${content.content_id}/delete`, {
  216. // ...FETCH_CONFIG,
  217. // method: 'PUT'
  218. // })
  219. }
  220. handleClickShowRevision = revision => {
  221. const { mode, timeline } = this.state
  222. const revisionArray = timeline.filter(t => t.timelineType === 'revision')
  223. const isLastRevision = revision.revision_id === revisionArray[revisionArray.length - 1].revision_id
  224. if (mode === MODE.REVISION && isLastRevision) {
  225. this.handleClickLastVersion()
  226. return
  227. }
  228. if (mode === MODE.VIEW && isLastRevision) return
  229. this.setState(prev => ({
  230. content: {
  231. ...prev.content,
  232. label: revision.label,
  233. raw_content: revision.raw_content,
  234. number: revision.number,
  235. status: revision.status
  236. },
  237. mode: MODE.REVISION
  238. }))
  239. }
  240. handleClickLastVersion = () => {
  241. this.loadContent()
  242. this.setState({mode: MODE.VIEW})
  243. }
  244. render () {
  245. const { isVisible, loggedUser, content, timeline, newComment, timelineWysiwyg, config, mode } = this.state
  246. const { t } = this.props
  247. if (!isVisible) return null
  248. return (
  249. <PopinFixed
  250. customClass={`${config.slug}`}
  251. customColor={config.hexcolor}
  252. >
  253. <PopinFixedHeader
  254. customClass={`${config.slug}`}
  255. customColor={config.hexcolor}
  256. faIcon={config.faIcon}
  257. title={content.label}
  258. onClickCloseBtn={this.handleClickBtnCloseApp}
  259. onValidateChangeTitle={this.handleSaveEditTitle}
  260. />
  261. <PopinFixedOption
  262. customColor={config.hexcolor}
  263. customClass={`${config.slug}`}
  264. i18n={i18n}
  265. >
  266. <div /* this div in display flex, justify-content space-between */>
  267. <div className='d-flex'>
  268. <NewVersionBtn
  269. customColor={config.hexcolor}
  270. onClickNewVersionBtn={this.handleClickNewVersion}
  271. disabled={mode !== MODE.VIEW}
  272. />
  273. {mode === MODE.REVISION &&
  274. <button
  275. className='wsContentGeneric__option__menu__lastversion html-documents__lastversionbtn btn'
  276. onClick={this.handleClickLastVersion}
  277. style={{backgroundColor: config.hexcolor, color: '#fdfdfd'}}
  278. >
  279. <i className='fa fa-code-fork' />
  280. {t('Last version')}
  281. </button>
  282. }
  283. </div>
  284. <div className='d-flex'>
  285. <SelectStatus
  286. selectedStatus={config.availableStatuses.find(s => s.slug === content.status)}
  287. availableStatus={config.availableStatuses}
  288. onChangeStatus={this.handleChangeStatus}
  289. disabled={mode === MODE.REVISION}
  290. />
  291. <ArchiveDeleteContent
  292. customColor={config.hexcolor}
  293. onClickArchiveBtn={this.handleClickArchive}
  294. onClickDeleteBtn={this.handleClickDelete}
  295. disabled={mode === MODE.REVISION}
  296. />
  297. </div>
  298. </div>
  299. </PopinFixedOption>
  300. <PopinFixedContent
  301. customClass={`${config.slug}__contentpage`}
  302. showRightPartOnLoad={mode === MODE.VIEW}
  303. >
  304. <HtmlDocumentComponent
  305. mode={mode}
  306. customColor={config.hexcolor}
  307. wysiwygNewVersion={'wysiwygNewVersion'}
  308. onClickCloseEditMode={this.handleCloseNewVersion}
  309. onClickValidateBtn={this.handleSaveHtmlDocument}
  310. version={content.number}
  311. lastVersion={timeline.filter(t => t.timelineType === 'revision').length}
  312. text={content.raw_content}
  313. onChangeText={this.handleChangeText}
  314. key={'html-documents'}
  315. />
  316. <Timeline
  317. customClass={`${config.slug}__contentpage`}
  318. customColor={config.hexcolor}
  319. loggedUser={loggedUser}
  320. timelineData={timeline}
  321. newComment={newComment}
  322. disableComment={mode === MODE.REVISION}
  323. wysiwyg={timelineWysiwyg}
  324. onChangeNewComment={this.handleChangeNewComment}
  325. onClickValidateNewCommentBtn={this.handleClickValidateNewCommentBtn}
  326. onClickWysiwygBtn={this.handleToggleWysiwyg}
  327. onClickRevisionBtn={this.handleClickShowRevision}
  328. shouldScrollToBottom={mode !== MODE.REVISION}
  329. />
  330. </PopinFixedContent>
  331. </PopinFixed>
  332. )
  333. }
  334. }
  335. export default translate()(HtmlDocument)