[https://github.com/tracim/tracim/issues/639 and https://github.com/tracim/tracim/issues/640] added archive and delete feature

frontend/src/action-creator.sync.js

@@ -11,7 +11,7 @@ export const newFlashMessage = (msgText = '', msgType = 'info', msgDelay = 5000)
   msgDelay !== 0 && window.setTimeout(() => dispatch(removeFlashMessage(msgText)), msgDelay)
   return dispatch(addFlashMessage({message: msgText, type: msgType}))
 }
-export const addFlashMessage = msg => ({ type: `${ADD}/${FLASH_MESSAGE}`, msg })
+const addFlashMessage = msg => ({ type: `${ADD}/${FLASH_MESSAGE}`, msg }) // only newFlashMsg should be used by component and app so dont export this
 export const removeFlashMessage = msg => ({ type: `${REMOVE}/${FLASH_MESSAGE}`, msg })
 
 export const USER = 'User'

frontend/src/container/Tracim.jsx

@@ -18,6 +18,7 @@ import {
   getUserIsConnected
 } from '../action-creator.async.js'
 import {
+  newFlashMessage,
   removeFlashMessage,
   setUserConnected
 } from '../action-creator.sync.js'
@@ -37,6 +38,10 @@ class Tracim extends React.Component {
         console.log('%c<Tracim> Custom event', 'color: #28a745', type, data)
         this.props.history.push(data.url)
         break
+      case 'addFlashMsg':
+        console.log('%c<Tracim> Custom event', 'color: #28a745', type, data)
+        this.props.dispatch(newFlashMessage(data.msg, data.type, data.delay))
+        break
     }
   }
 

frontend_app_html-document/src/action.async.js

@@ -77,3 +77,43 @@ export const postHtmlDocContent = (user, apiUrl, idWorkspace, idFolder, contentT
       label: newContentName
     })
   })
+
+export const putHtmlDocIsArchived = (user, apiUrl, idWorkspace, idContent) => {
+  return fetch(`${apiUrl}/workspaces/${idWorkspace}/contents/${idContent}/archive`, {
+    headers: {
+      'Authorization': 'Basic ' + user.auth,
+      ...FETCH_CONFIG.headers
+    },
+    method: 'PUT'
+  })
+}
+
+export const putHtmlDocIsDeleted = (user, apiUrl, idWorkspace, idContent) => {
+  return fetch(`${apiUrl}/workspaces/${idWorkspace}/contents/${idContent}/delete`, {
+    headers: {
+      'Authorization': 'Basic ' + user.auth,
+      ...FETCH_CONFIG.headers
+    },
+    method: 'PUT'
+  })
+}
+
+export const putHtmlDocRestoreArchived = (user, apiUrl, idWorkspace, idContent) => {
+  return fetch(`${apiUrl}/workspaces/${idWorkspace}/contents/${idContent}/unarchive`, {
+    headers: {
+      'Authorization': 'Basic ' + user.auth,
+      ...FETCH_CONFIG.headers
+    },
+    method: 'PUT'
+  })
+}
+
+export const putHtmlDocRestoreDeleted = (user, apiUrl, idWorkspace, idContent) => {
+  return fetch(`${apiUrl}/workspaces/${idWorkspace}/contents/${idContent}/undelete`, {
+    headers: {
+      'Authorization': 'Basic ' + user.auth,
+      ...FETCH_CONFIG.headers
+    },
+    method: 'PUT'
+  })
+}

frontend_app_html-document/src/component/HtmlDocument.jsx

@@ -5,6 +5,34 @@ import { MODE } from '../helper.js'
 const HtmlDocument = props => {
   return (
     <div className='wsContentHtmlDocument__contentpage__textnote html-document__contentpage__textnote'>
+      {props.isArchived &&
+        <div className='html-document__contentpage__textnote__state'>
+          <div className='html-document__contentpage__textnote__state__msg'>
+            <i className='fa fa-fw fa-archive' />
+            This content is archived.
+          </div>
+
+          <button className='html-document__contentpage__textnote__state__btnrestore btn' onClick={props.onClickRestoreArchived}>
+            <i className='fa fa-fw fa-archive' />
+            Restore
+          </button>
+        </div>
+      }
+
+      {props.isDeleted &&
+        <div className='html-document__contentpage__textnote__state'>
+          <div className='html-document__contentpage__textnote__state__msg'>
+            <i className='fa fa-fw fa-trash' />
+            Ce contenu est supprimé.
+          </div>
+
+          <button className='html-document__contentpage__textnote__state__btnrestore btn' onClick={props.onClickRestoreDeleted}>
+            <i className='fa fa-fw fa-trash' />
+            Restore
+          </button>
+        </div>
+      }
+
       {(props.mode === MODE.VIEW || props.mode === MODE.REVISION) &&
         <div>
           <div className='html-document__contentpage__textnote__version'>

frontend_app_html-document/src/container/HtmlDocument.jsx

@@ -22,7 +22,11 @@ import {
   getHtmlDocRevision,
   postHtmlDocNewComment,
   putHtmlDocContent,
-  putHtmlDocStatus
+  putHtmlDocStatus,
+  putHtmlDocIsArchived,
+  putHtmlDocIsDeleted,
+  putHtmlDocRestoreArchived,
+  putHtmlDocRestoreDeleted
 } from '../action.async.js'
 
 class HtmlDocument extends React.Component {
@@ -261,22 +265,71 @@ class HtmlDocument extends React.Component {
   }
 
   handleClickArchive = async () => {
-    console.log('archive')
-    // const { config, content } = this.state
-    //
-    // const fetchResultArchive = await fetch(`${config.apiUrl}/workspaces/${content.workspace_id}/contents/${content.content_id}/archive`, {
-    //   ...FETCH_CONFIG,
-    //   method: 'PUT'
-    // })
+    const { loggedUser, config, content } = this.state
+
+    const fetchResultArchive = await putHtmlDocIsArchived(loggedUser, config.apiUrl, content.workspace_id, content.content_id)
+    switch (fetchResultArchive.status) {
+      case 204: this.setState(prev => ({content: {...prev.content, is_archived: true}})); break
+      default: GLOBAL_dispatchEvent({
+        type: 'addFlashMsg',
+        data: {
+          msg: this.props.t('Error while archiving document'),
+          type: 'warning',
+          delay: undefined
+        }
+      })
+    }
   }
 
   handleClickDelete = async () => {
-    console.log('delete')
-    // const { config, content } = this.state
-    // const fetchResultDelete = await fetch(`${config.apiUrl}/workspaces/${content.workspace_id}/contents/${content.content_id}/delete`, {
-    //   ...FETCH_CONFIG,
-    //   method: 'PUT'
-    // })
+    const { loggedUser, config, content } = this.state
+
+    const fetchResultArchive = await putHtmlDocIsDeleted(loggedUser, config.apiUrl, content.workspace_id, content.content_id)
+    switch (fetchResultArchive.status) {
+      case 204: this.setState(prev => ({content: {...prev.content, is_deleted: true}})); break
+      default: GLOBAL_dispatchEvent({
+        type: 'addFlashMsg',
+        data: {
+          msg: this.props.t('Error while deleting document'),
+          type: 'warning',
+          delay: undefined
+        }
+      })
+    }
+  }
+
+  handleClickRestoreArchived = async () => {
+    const { loggedUser, config, content } = this.state
+
+    const fetchResultRestore = await putHtmlDocRestoreArchived(loggedUser, config.apiUrl, content.workspace_id, content.content_id)
+    switch (fetchResultRestore.status) {
+      case 204: this.setState(prev => ({content: {...prev.content, is_archived: false}})); break
+      default: GLOBAL_dispatchEvent({
+        type: 'addFlashMsg',
+        data: {
+          msg: this.props.t('Error while restoring document'),
+          type: 'warning',
+          delay: undefined
+        }
+      })
+    }
+  }
+
+  handleClickRestoreDeleted = async () => {
+    const { loggedUser, config, content } = this.state
+
+    const fetchResultRestore = await putHtmlDocRestoreDeleted(loggedUser, config.apiUrl, content.workspace_id, content.content_id)
+    switch (fetchResultRestore.status) {
+      case 204: this.setState(prev => ({content: {...prev.content, is_deleted: false}})); break
+      default: GLOBAL_dispatchEvent({
+        type: 'addFlashMsg',
+        data: {
+          msg: this.props.t('Error while restoring document'),
+          type: 'warning',
+          delay: undefined
+        }
+      })
+    }
   }
 
   handleClickShowRevision = revision => {
@@ -298,7 +351,9 @@ class HtmlDocument extends React.Component {
         label: revision.label,
         raw_content: revision.raw_content,
         number: revision.number,
-        status: revision.status
+        status: revision.status,
+        is_archived: prev.is_archived, // archived and delete should always be taken from last version
+        is_deleted: prev.is_deleted
       },
       mode: MODE.REVISION
     }))
@@ -386,6 +441,10 @@ class HtmlDocument extends React.Component {
             lastVersion={timeline.filter(t => t.timelineType === 'revision').length}
             text={content.raw_content}
             onChangeText={this.handleChangeText}
+            isArchived={content.is_archived}
+            isDeleted={content.is_deleted}
+            onClickRestoreArchived={this.handleClickRestoreArchived}
+            onClickRestoreDeleted={this.handleClickRestoreDeleted}
             key={'html-document'}
           />
 

frontend_app_html-document/src/css/index.styl

@@ -21,6 +21,20 @@
       height 100%
       overflow-y auto
       background-color off-white
+      &__state
+        display flex
+        align-items center
+        justify-content space-between
+        margin-bottom 15px
+        padding 5px 15px
+        background-color #fee498
+        border-radius 10px
+        &__msg > i
+          margin-right 8px
+        &__btnrestore
+          cursor pointer
+          & > i
+            margin-right 8px
       &__version
         display flex
         justify-content flex-end

frontend_app_thread/src/action.async.js

@@ -68,3 +68,43 @@ export const putThreadContent = (user, apiUrl, idWorkspace, idContent, label) =>
       raw_content: '' // threads have no content
     })
   })
+
+export const putThreadIsArchived = (user, apiUrl, idWorkspace, idContent) => {
+  return fetch(`${apiUrl}/workspaces/${idWorkspace}/contents/${idContent}/archive`, {
+    headers: {
+      'Authorization': 'Basic ' + user.auth,
+      ...FETCH_CONFIG.headers
+    },
+    method: 'PUT'
+  })
+}
+
+export const putThreadIsDeleted = (user, apiUrl, idWorkspace, idContent) => {
+  return fetch(`${apiUrl}/workspaces/${idWorkspace}/contents/${idContent}/delete`, {
+    headers: {
+      'Authorization': 'Basic ' + user.auth,
+      ...FETCH_CONFIG.headers
+    },
+    method: 'PUT'
+  })
+}
+
+export const putThreadRestoreArchived = (user, apiUrl, idWorkspace, idContent) => {
+  return fetch(`${apiUrl}/workspaces/${idWorkspace}/contents/${idContent}/unarchive`, {
+    headers: {
+      'Authorization': 'Basic ' + user.auth,
+      ...FETCH_CONFIG.headers
+    },
+    method: 'PUT'
+  })
+}
+
+export const putThreadRestoreDeleted = (user, apiUrl, idWorkspace, idContent) => {
+  return fetch(`${apiUrl}/workspaces/${idWorkspace}/contents/${idContent}/undelete`, {
+    headers: {
+      'Authorization': 'Basic ' + user.auth,
+      ...FETCH_CONFIG.headers
+    },
+    method: 'PUT'
+  })
+}

frontend_app_thread/src/container/Thread.jsx

@@ -18,7 +18,11 @@ import {
   getThreadComment,
   postThreadNewComment,
   putThreadStatus,
-  putThreadContent
+  putThreadContent,
+  putThreadIsArchived,
+  putThreadIsDeleted,
+  putThreadRestoreArchived,
+  putThreadRestoreDeleted
 } from '../action.async.js'
 
 class Thread extends React.Component {
@@ -77,7 +81,7 @@ class Thread extends React.Component {
   componentDidUpdate (prevProps, prevState) {
     const { state } = this
 
-    console.log('%c<Thread> did Mount', `color: ${this.state.config.hexcolor}`, prevState, state)
+    console.log('%c<Thread> did Update', `color: ${this.state.config.hexcolor}`, prevState, state)
 
     if (!prevState.content || !state.content) return
 
@@ -173,17 +177,81 @@ class Thread extends React.Component {
 
     handleFetchResult(await fetchResultSaveEditStatus)
       .then(resSave => {
-        if (resSave.status !== 204) { // 204 no content so dont take status from resSave.apiResponse.status
-          console.warn('Error saving thread comment. Result:', resSave, 'content:', content, 'config:', config)
-        } else {
+        if (resSave.status === 204) { // 204 no content so dont take status from resSave.apiResponse.status
           this.loadContent()
+        } else {
+          console.warn('Error saving thread comment. Result:', resSave, 'content:', content, 'config:', config)
+        }
+      })
+  }
+
+  handleClickArchive = async () => {
+    const { loggedUser, config, content } = this.state
+
+    const fetchResultArchive = await putThreadIsArchived(loggedUser, config.apiUrl, content.workspace_id, content.content_id)
+    switch (fetchResultArchive.status) {
+      case 204: this.setState(prev => ({content: {...prev.content, is_archived: true}})); break
+      default: GLOBAL_dispatchEvent({
+        type: 'addFlashMsg',
+        data: {
+          msg: this.props.t('Error while archiving thread'),
+          type: 'warning',
+          delay: undefined
+        }
+      })
+    }
+  }
+
+  handleClickDelete = async () => {
+    const { loggedUser, config, content } = this.state
+
+    const fetchResultArchive = await putThreadIsDeleted(loggedUser, config.apiUrl, content.workspace_id, content.content_id)
+    switch (fetchResultArchive.status) {
+      case 204: this.setState(prev => ({content: {...prev.content, is_deleted: true}})); break
+      default: GLOBAL_dispatchEvent({
+        type: 'addFlashMsg',
+        data: {
+          msg: this.props.t('Error while deleting thread'),
+          type: 'warning',
+          delay: undefined
+        }
+      })
+    }
+  }
+
+  handleClickRestoreArchived = async () => {
+    const { loggedUser, config, content } = this.state
+
+    const fetchResultRestore = await putThreadRestoreArchived(loggedUser, config.apiUrl, content.workspace_id, content.content_id)
+    switch (fetchResultRestore.status) {
+      case 204: this.setState(prev => ({content: {...prev.content, is_archived: false}})); break
+      default: GLOBAL_dispatchEvent({
+        type: 'addFlashMsg',
+        data: {
+          msg: this.props.t('Error while restoring thread'),
+          type: 'warning',
+          delay: undefined
         }
       })
+    }
   }
 
-  handleClickArchive = () => console.log('archive nyi')
+  handleClickRestoreDeleted = async () => {
+    const { loggedUser, config, content } = this.state
 
-  handleClickDelete = () => console.log('delete nyi')
+    const fetchResultRestore = await putThreadRestoreDeleted(loggedUser, config.apiUrl, content.workspace_id, content.content_id)
+    switch (fetchResultRestore.status) {
+      case 204: this.setState(prev => ({content: {...prev.content, is_deleted: false}})); break
+      default: GLOBAL_dispatchEvent({
+        type: 'addFlashMsg',
+        data: {
+          msg: this.props.t('Error while restoring thread'),
+          type: 'warning',
+          delay: undefined
+        }
+      })
+    }
+  }
 
   render () {
     const { config, isVisible, loggedUser, content, listMessage, newComment, timelineWysiwyg } = this.state
@@ -191,10 +259,7 @@ class Thread extends React.Component {
     if (!isVisible) return null
 
     return (
-      <PopinFixed
-        customClass={config.slug}
-        customColor={config.hexcolor}
-      >
+      <PopinFixed customClass={config.slug} customColor={config.hexcolor}>
         <PopinFixedHeader
           customClass={`${config.slug}__contentpage`}
           customColor={config.hexcolor}
@@ -226,9 +291,7 @@ class Thread extends React.Component {
           </div>
         </PopinFixedOption>
 
-        <PopinFixedContent
-          customClass={`${config.slug}__contentpage`}
-        >
+        <PopinFixedContent customClass={`${config.slug}__contentpage`}>
           <Timeline
             customClass={`${config.slug}__contentpage`}
             customColor={config.hexcolor}
@@ -243,6 +306,10 @@ class Thread extends React.Component {
             onClickRevisionBtn={() => {}}
             shouldScrollToBottom
             showHeader={false}
+            isArchived={content.is_archived}
+            onClickRestoreArchived={this.handleClickRestoreArchived}
+            isDeleted={content.is_deleted}
+            onClickRestoreDeleted={this.handleClickRestoreDeleted}
           />
         </PopinFixedContent>
       </PopinFixed>

frontend_lib/src/component/PopinFixed/PopinFixed.styl

@@ -87,6 +87,11 @@
     // 209 = wsContentGeneric:top wsContentGeneric__header:height - wsContentGeneric__option:height
     width 200% // to allow transform translateX of right part
     height calc(100% - 209px)
+    &__state
+      width 100%
+      padding 5px 15px
+      border-radius 10px
+      background-color #fbe294
     &__left
       transition width 0.4s ease
       width 25%

frontend_lib/src/component/Timeline/Timeline.jsx

@@ -46,6 +46,34 @@ class Timeline extends React.Component {
           </div>
         }
 
+        {props.isArchived &&
+          <div className='timeline__info'>
+            <div className='timeline__info__msg'>
+              <i className='fa fa-fw fa-archive' />
+              This content is archived.
+            </div>
+
+            <button className='timeline__info__btnrestore btn' onClick={props.onClickRestoreArchived}>
+              <i className='fa fa-fw fa-archive' />
+              Restore
+            </button>
+          </div>
+        }
+
+        {props.isDeleted &&
+          <div className='timeline__info'>
+            <div className='timeline__info__msg'>
+              <i className='fa fa-fw fa-trash' />
+              This content is deleted.
+            </div>
+
+            <button className='timeline__info__btnrestore btn' onClick={props.onClickRestoreDeleted}>
+              <i className='fa fa-fw fa-trash' />
+              Restore
+            </button>
+          </div>
+        }
+
         <div className='timeline__body'>
           <ul className={classnames(`${props.customClass}__messagelist`, 'timeline__body__messagelist')}>
             {props.timelineData.map(content => {
@@ -157,7 +185,11 @@ Timeline.propTypes = {
   onClickRevisionBtn: PropTypes.func,
   shouldScrollToBottom: PropTypes.bool,
   showHeader: PropTypes.bool,
-  rightPartOpen: PropTypes.bool // irrelevent if showHeader in false
+  rightPartOpen: PropTypes.bool, // irrelevant if showHeader is false
+  isArchived: PropTypes.bool,
+  onClickRestoreArchived: PropTypes.func,
+  isDeleted: PropTypes.bool,
+  onClickRestoreDeleted: PropTypes.func,
 }
 
 Timeline.defaultProps = {
@@ -174,5 +206,7 @@ Timeline.defaultProps = {
   onClickWysiwygBtn: () => {},
   shouldScrollToBottom: true,
   showHeader: true,
-  rightPartOpen: false
+  rightPartOpen: false,
+  isArchived: false,
+  isDeleted: false
 }

frontend_lib/src/component/Timeline/Timeline.styl

@@ -20,6 +20,23 @@
       text-align center
     &__title
       transform rotate(-90deg)
+  &__info
+    position absolute
+    display flex
+    align-items center
+    justify-content space-between
+    margin 10px
+    padding 5px 15px
+    width calc(100% - 20px)
+    background-color #fee498
+    border-radius 10px
+    z-index 1
+    &__msg > i
+      margin-right 8px
+    &__btnrestore
+      cursor pointer
+      & > i
+        margin-right 8px
   &__body
     display flex
     flex-direction column

frontend_lib/src/index.dev.js

@@ -74,21 +74,9 @@ ReactDOM.render(
       />
 
       <PopinFixedContent customClass={`${'randomClass'}__contentpage`}>
-        <div>
-          <NewVersionButton customColor='#3f52e3' />
-          <ArchiveDeleteContent customColor='#3f52e3' />
-          <Delimiter />
-          <span>Here will be the app content. Style is handled by the app (obviously)</span>
-          <BtnSwitch />
-          {/* <TextAreaApp customClass={'randomClass'} text={'woot'} /> */}
-          <Checkbox
-            name='osef'
-            onClickCheckbox={() => {}}
-            checked
-          />
-        </div>
 
         <Timeline
+          showHeader={false}
           customClass={`${'randomClass'}__contentpage`}
           customColor={'#3f52e3'}
           loggedUser={{