#18 improvements/additions to activity descriptions

app/components/activity/ActivityDetails.jsx

@@ -4,7 +4,7 @@ import { th } from '@pubsweet/ui-toolkit'
 import styled from 'styled-components'
 import moment from 'moment'
 import { Table } from '../ui'
-import { obtainEventDescription } from './helpers'
+import EventDescription from './EventDescription'
 import Mailer from '../mailer'
 
 const DetailsTable = styled(Table)`
@@ -13,6 +13,8 @@ const DetailsTable = styled(Table)`
 
 const TdDate = styled.td`
   vertical-align: top;
+  white-space: nowrap;
+  font-size: ${th('fontSizeBaseSmall')};
 `
 
 const TdPerson = TdDate
@@ -25,9 +27,11 @@ const ActivityList = ({ manuscript }) =>
     }, [])
     .map(audit => (
       <tr key={audit.id}>
-        <TdDate>{moment(audit.created).format('DD/MM/YYYY HH:mm:ss')}</TdDate>
+        <TdDate>{moment(audit.created).format('DD/MM/YYYY HH:mm')}</TdDate>
         <TdPerson>{`${audit.user.givenNames} ${audit.user.surname}`}</TdPerson>
-        <td>{obtainEventDescription(audit, manuscript)}</td>
+        <td>
+          <EventDescription audit={audit} manuscript={manuscript} />
+        </td>
       </tr>
     ))
 
@@ -40,14 +44,6 @@ const DetailsHeading = styled.div`
   align-items: baseline;
   justify-content: space-between;
 `
-
-const DataColumn = styled.th`
-  width: 20%;
-`
-
-const PersonColumn = styled.th`
-  width: 20%;
-`
 class ActivityDetails extends React.Component {
   state = { sendingMail: false }
   render() {
@@ -77,8 +73,8 @@ class ActivityDetails extends React.Component {
         <DetailsTable>
           <tbody>
             <tr>
-              <DataColumn>Date</DataColumn>
-              <PersonColumn>Person</PersonColumn>
+              <th>Date</th>
+              <th>Person</th>
               <th>Event</th>
             </tr>
             <ActivityList manuscript={this.props.manuscript} />

app/components/activity/ActivityPage.jsx

@@ -10,7 +10,7 @@ import QuickView from './QuickView'
 const ActivityPage = props => (
   <Page>
     <H1>Manuscript activity</H1>
-    <QuickView {...props} />
+    <QuickView manuscript={props.manuscript} />
     <ActivityDetails {...props} />
   </Page>
 )
@@ -27,13 +27,7 @@ const ActivityPageContainer = ({ match, ...props }) => (
           </Loading>
         )
       }
-      return (
-        <ActivityPageWithHeader
-          manuscript={data.activities}
-          match={match}
-          {...props}
-        />
-      )
+      return <ActivityPageWithHeader manuscript={data.activities} {...props} />
     }}
   </Query>
 )

app/components/activity/helpers/events.jsx → app/components/activity/EventDescription.jsx

 import React from 'react'
+import { capitalize } from 'lodash'
 import styled from 'styled-components'
 import { Icon } from '@pubsweet/ui'
 import { th } from '@pubsweet/ui-toolkit'
+import { AllTypes } from '../upload-files'
 
 const NoteEvent = styled.div`
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
 `
-
 const NoteTo = styled.div`
   font-weight: bold;
   width: 100%;
 `
-
 const NoteSubject = styled.div`
   font-weight: bold;
   width: 90%;
 `
-
 const NoteBodyControl = styled.div`
   width: 10%;
   text-align: right;
   align-self: flex-end;
 `
-
 const MetaContent = styled.span`
   font-weight: normal;
 `
-
 const EmailBody = styled.div`
   white-space: pre-wrap;
   font-style: italic;
   width: 100%;
   padding-top: calc(${th('gridUnit')} * 2);
 `
-
-const capitalizeFirstLetter = string =>
-  string.charAt(0).toUpperCase() + string.slice(1)
-
 const toWho = (manuscript, userId) => {
   const who = manuscript.teams.reduce((who, team) => {
     if (
@@ -50,9 +43,9 @@ const toWho = (manuscript, userId) => {
       team.teamMembers[0].alias.name
     ) {
       const { name } = team.teamMembers[0].alias
-      who = `${who && `${who}, `} ${capitalizeFirstLetter(team.role)} ${
-        name.givenNames
-      } ${name.surname}`
+      who = `${who && `${who}, `} ${capitalize(team.role)} ${name.givenNames} ${
+        name.surname
+      }`
     }
     return who
   }, '')
@@ -65,38 +58,17 @@ const toggleHidden = elements => {
   })
 }
 
-export const obtainEventDescription = (audit, manuscript) => {
+const cleanUp = column => column.replace('meta,', '').replace('_', ' ')
+
+const EventDescription = ({ audit, manuscript }) => {
   const { originalData, objectType, changes, user } = audit
-  if (objectType === 'manuscript') {
-    if (changes.status) {
-      return `Manuscript ${changes.status}`
-    }
-    if (changes.journal_id) {
-      return `Manuscript added journal information: ${
-        manuscript.journal.journalTitle
-      }`
-    }
-    if (changes.claimed_by) {
-      let claimedBy = ''
-      if (manuscript.claimedBy) {
-        claimedBy = `${manuscript.claimedBy.givenNames} ${
-          manuscript.claimedBy.surname
-        }`
-      }
-      return `Manuscript claimed by ${claimedBy}`
-    }
-    if (changes['meta,release_delay']) {
-      return `Manuscript added embargo period ${
-        changes['meta,release_delay']
-      } months`
+  const keys = Object.keys(changes)
+  const list = keys.reduce((l, k) => {
+    if (k !== 'updated_by') {
+      l.push(`${cleanUp(k)} to ${changes[k]}`)
     }
-    if (changes['meta,funding_group']) {
-      const funding = JSON.parse(changes['meta,funding_group'])
-        .map(funding => funding.title)
-        .join(', ')
-      return `Manuscript added funding ${funding}`
-    }
-  }
+    return l
+  }, [])
 
   if (objectType === 'note') {
     const content = JSON.parse(changes.content)
@@ -151,32 +123,60 @@ export const obtainEventDescription = (audit, manuscript) => {
 
   if (objectType === 'team') {
     if (changes.role_name === 'submitter') {
-      return `Manuscript submitted by ${user.givenNames} ${user.surname}`
+      return `Set submitter to ${user.givenNames} ${user.surname}`
     }
     if (changes.role_name === 'reviewer') {
-      return `Manuscript added reviewer`
+      return `Became reviewer`
     }
   }
 
   if (objectType === 'file') {
     if (changes.type === 'manuscript') {
-      return `Manuscript file uploaded: ${changes.filename}`
+      return `Uploaded manuscript file: ${changes.filename}`
     }
     if (changes.filename) {
-      return `File ${changes.filename} of mime type ${
-        changes.mime_type
-      } uploaded`
+      return `Uploaded ${changes.filename}`
     }
     if (changes.type) {
-      return `File ${originalData.filename}'s type set to ${changes.type}`
+      const type = AllTypes.find(t => t.value === changes.type).label
+      return (
+        <React.Fragment>
+          Made <em>{originalData.filename}</em> type: {type}
+        </React.Fragment>
+      )
     }
     if (changes.label) {
-      return `File ${originalData.filename}'s label set to ${changes.label}`
+      return (
+        <React.Fragment>
+          Gave <em>{originalData.filename}</em> label: {changes.label}
+        </React.Fragment>
+      )
     }
     if (changes.deleted) {
-      return `File ${originalData.filename} deleted`
+      return `Deleted ${originalData.filename}`
+    }
+  }
+
+  if (objectType === 'manuscript') {
+    if (changes.claimed_by) {
+      return `Claimed manuscript`
     }
   }
 
-  return ''
+  if (changes.id) {
+    return `Created ${objectType}`
+  }
+
+  return (
+    <React.Fragment>
+      {list.map(l => (
+        <React.Fragment>
+          Set {objectType} {l}
+          <br />
+        </React.Fragment>
+      ))}
+    </React.Fragment>
+  )
 }
+
+export default EventDescription

app/components/activity/QuickView.jsx

@@ -152,7 +152,7 @@ const MetaSec = ({ manuscript }) => {
   )
 }
 
-const QuickView = ({ manuscript, ...props }) => (
+const QuickView = ({ manuscript }) => (
   <React.Fragment>
     {manuscript.claimedBy && (
       <div style={{ float: 'right', marginTop: '1rem' }}>
@@ -160,7 +160,7 @@ const QuickView = ({ manuscript, ...props }) => (
       </div>
     )}
     <Heading>Quick view</Heading>
-    <MetaSec manuscript={manuscript} {...props} />
+    <MetaSec manuscript={manuscript} />
     <Checklist>
       <Col flex={1}>
         <div>Submitted</div>

app/components/activity/helpers/index.js

-export { lastAudit } from './last-audit'
-export { obtainEventDescription } from './events'

app/components/activity/helpers/last-audit.js

-import { obtainEventDescription } from './events'
-
-export const lastAudit = manuscript => {
-  const { audits } = manuscript
-
-  if (!audits || audits.length <= 0) {
-    return ''
-  }
-  const audit = audits[audits.length - 1]
-
-  return obtainEventDescription(audit, manuscript)
-}

app/components/review-wizard/ReviewPage.jsx

@@ -16,7 +16,11 @@ import {
   PanelContent,
   Toggle as Toggles,
 } from '../ui'
-import UploadFiles, { SubmissionTypes, ReviewTypes } from '../upload-files'
+import UploadFiles, {
+  SubmissionTypes,
+  ReviewTypes,
+  AllTypes,
+} from '../upload-files'
 import ManuscriptPreview from '../ManuscriptPreview'
 import PDFViewer from '../pdf-viewer'
 import { GET_MANUSCRIPT } from '../operations'
@@ -74,14 +78,6 @@ const PreviewError = styled.div`
 const AnnotatePDF = Annotator(PDFViewer)
 const AnnotateHTML = Annotator(HTMLPreview)
 
-const allFileTypes = SubmissionTypes.concat(
-  ReviewTypes.reduce((all, t) => {
-    if (!SubmissionTypes.some(existing => existing.value === t.value)) {
-      all.push(t)
-    }
-    return all
-  }, []),
-)
 class Review extends React.Component {
   state = {
     pane: this.props.currentUser.admin ? 'files' : 'web',
@@ -197,7 +193,7 @@ class Review extends React.Component {
                           checked
                           files={showAll ? allfiles : files}
                           manuscript={manuscript.id}
-                          types={showAll ? allFileTypes : ReviewTypes}
+                          types={showAll ? AllTypes : ReviewTypes}
                         />
                         {error && (
                           <Center>

app/components/upload-files/index.js

@@ -5,4 +5,5 @@ export {
   FileTypes,
   XMLTypes,
   ReviewTypes,
+  AllTypes,
 } from './uploadtypes'

app/components/upload-files/uploadtypes.js

@@ -132,3 +132,12 @@ export const ReviewTypes = [
     value: 'tempHTML',
   },
 ]
+
+export const AllTypes = SubmissionTypes.concat(
+  ReviewTypes.reduce((all, t) => {
+    if (!SubmissionTypes.some(existing => existing.value === t.value)) {
+      all.push(t)
+    }
+    return all
+  }, []),
+)