Merge pull request #150 from scientist-softserv/134-show-attachments

134 show attachments

Author: summer-cook

src/assets/fontawesome.js

@@ -3,9 +3,11 @@ import {
   faArrowDown,
   faArrowUp,
   faEnvelope,
+  faFileLines,
   faListCheck,
   faPaperclip,
   faSquareCheck,
+  faUpload,
   faVial,
   faVialCircleCheck,
 } from '@fortawesome/free-solid-svg-icons'
@@ -18,11 +20,13 @@ library.add(
   faArrowDown,
   faArrowUp,
   faEnvelope,
+  faFileLines,
   faListCheck,
   faMinusSquare,
+  faPaperclip,
   faPlusSquare,
   faSquareCheck,
-  faPaperclip,
+  faUpload,
   faVial,
   faVialCircleCheck,
 )

src/components/FilesTable/FilesTable.jsx

@@ -0,0 +1,64 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import {
+  // Button,
+  Table,
+} from 'react-bootstrap'
+import { allowNull } from '../../resources/utilityFunctions'
+
+const FilesTable = ({ addClass, files }) => {
+  if (files.length === 0) {
+    return (
+      <h6 className='mt-3'>You do not have this type of document yet.</h6>
+    )
+  }
+
+  return (
+    <Table striped bordered hover size='sm' className={`${addClass}`}>
+      <thead>
+        <tr>
+          <th>File Name</th>
+          <th>Uploaded By</th>
+          <th>Size</th>
+          <th>Created At</th>
+        </tr>
+      </thead>
+      <tbody>
+        {files.map((file) => {
+          const { uuid, fileName, uploadedBy, contentLength, createdAt } = file
+          return (
+            <tr key={uuid} className='small'>
+              <td>{fileName}</td>
+              <td>{uploadedBy}</td>
+              <td>{contentLength}</td>
+              <td>{createdAt}</td>
+            </tr>
+          )
+        })}
+      </tbody>
+    </Table>
+  )
+}
+
+FilesTable.propTypes = {
+  addClass: PropTypes.string,
+  files: PropTypes.arrayOf(
+    PropTypes.shape({
+      contentLength: PropTypes.string.isRequired,
+      contentType: PropTypes.string.isRequired,
+      createdAt: PropTypes.string.isRequired,
+      download: PropTypes.string.isRequired,
+      fileName: PropTypes.string.isRequired,
+      href: PropTypes.string.isRequired,
+      status: allowNull(PropTypes.string.isRequired),
+      uploadedBy: PropTypes.string.isRequired,
+      uuid: PropTypes.string.isRequired,
+    }),
+  ).isRequired,
+}
+
+FilesTable.defaultProps = {
+  addClass: '',
+}
+
+export default FilesTable

src/components/FilesTable/FilesTable.stories.jsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import FilesTable from './FilesTable'
+
+export default {
+  title: 'Components/FilesTable',
+  component: FilesTable,
+}
+
+const Template = (args) => <FilesTable {...args} />
+
+export const Default = Template.bind({})
+Default.args = {
+  files: [{
+    contentLength: '938.57 KB',
+    contentType: 'image/png',
+    createdAt: ' Dec 22 2022 at 12:56:48 PM',
+    download: '/quote_groups/10bd825f-c7e0-4c07-bd9e-f7982b21f435/attachments/nepal5.png',
+    fileName: 'nepal5.png',
+    href: 'https://acme.scientist.com/secure_attachments/4611434c-ba99-481e-84ee-37e1fdbd203e',
+    status: null,
+    uploadedBy: 'Summer Cook',
+    uuid: '4611434c-ba99-481e-84ee-37e1fdbd203e',
+  }],
+}

src/compounds/ActionsGroup/ActionsGroup.jsx

@@ -2,10 +2,13 @@ import React, { useState } from 'react'
 import PropTypes from 'prop-types'
 import { ListGroup } from 'react-bootstrap'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import SendMessage from './actions/SendMessage'
+// import SendMessage from './actions/SendMessage'
+import ViewFiles from './actions/ViewFiles'
+import { allowNull } from '../../resources/utilityFunctions'
 import './actions-group.scss'
 
-const ActionsGroup = ({ handleSendingMessages }) => {
+// TODO: add back handleSendingMessagesOrFiles into the props, removing for now to avoid console error. see below TODO.
+const ActionsGroup = ({ initialFiles }) => {
   const [show, setShow] = useState(false)
   const [action, setAction] = useState(null)
 
@@ -18,28 +21,59 @@ const ActionsGroup = ({ handleSendingMessages }) => {
     setAction(null)
     setShow(false)
   }
-
   return (
     <>
       <ListGroup className='actions-group'>
-        <ListGroup.Item action variant='primary' onClick={() => handleShow('SendMessage')}>
+        {/* TODO(@summercook): return this and the below commented code
+        once we are able to refactor posting messages & attachments */}
+        {/* <ListGroup.Item action variant='primary' onClick={() => handleShow('SendMessage')}>
           <FontAwesomeIcon icon='fa-envelope' />
           Send Message
+        </ListGroup.Item> */}
+        <ListGroup.Item
+          action
+          variant='primary'
+          onClick={() => handleShow('ViewFiles')}
+          role='presentation'
+        >
+          <FontAwesomeIcon icon='fa-file-lines' />
+          View Files
         </ListGroup.Item>
       </ListGroup>
-      {(action === 'SendMessage' && show)
+      {/* {(action === 'SendMessage' && show)
         && (
           <SendMessage
             handleClose={handleClose}
-            onSubmit={handleSendingMessages}
+            onSubmit={handleSendingMessagesOrFiles}
+          />
+        )} */}
+      {(action === 'ViewFiles' && show)
+        && (
+          <ViewFiles
+            handleClose={handleClose}
+            initialFiles={initialFiles}
+            // onSubmit={handleSendingMessagesOrFiles}
           />
         )}
     </>
   )
 }
 
 ActionsGroup.propTypes = {
-  handleSendingMessages: PropTypes.func.isRequired,
+  handleSendingMessagesOrFiles: PropTypes.func.isRequired,
+  initialFiles: PropTypes.arrayOf(
+    PropTypes.shape({
+      contentLength: PropTypes.string.isRequired,
+      contentType: PropTypes.string.isRequired,
+      createdAt: PropTypes.string.isRequired,
+      download: PropTypes.string.isRequired,
+      fileName: PropTypes.string.isRequired,
+      href: PropTypes.string.isRequired,
+      status: allowNull(PropTypes.string.isRequired),
+      uploadedBy: PropTypes.string.isRequired,
+      uuid: PropTypes.string.isRequired,
+    }),
+  ).isRequired,
 }
 
 export default ActionsGroup

src/compounds/ActionsGroup/ActionsGroup.stories.jsx

@@ -15,4 +15,15 @@ Default.args = {
     console.log('the message is:', message)
     console.log(`attached file(s): ${files.map((file) => file.split('name=')[1])}`)
   },
+  initialFiles: [{
+    contentLength: '938.57 KB',
+    contentType: 'image/png',
+    createdAt: ' Dec 22 2022 at 12:56:48 PM',
+    download: '/quote_groups/10bd825f-c7e0-4c07-bd9e-f7982b21f435/attachments/nepal5.png',
+    fileName: 'nepal5.png',
+    href: 'https://acme.scientist.com/secure_attachments/4611434c-ba99-481e-84ee-37e1fdbd203e',
+    status: null,
+    uploadedBy: 'Summer Cook',
+    uuid: '4611434c-ba99-481e-84ee-37e1fdbd203e',
+  }],
 }

src/compounds/ActionsGroup/actions/ViewFiles.jsx

@@ -0,0 +1,73 @@
+import React
+  from 'react'
+import PropTypes from 'prop-types'
+import {
+  Offcanvas,
+  Tab,
+  Tabs,
+} from 'react-bootstrap'
+import FilesTable from '../../../components/FilesTable/FilesTable'
+import { allowNull } from '../../../resources/utilityFunctions'
+
+const ViewFiles = ({ initialFiles, handleClose }) => {
+  const documentTabs = [
+    {
+      eventKey: 'files',
+      title: 'Attachments',
+      status: 'Other File',
+    },
+    {
+      eventKey: 'status-updates',
+      title: 'Status Updates',
+      status: 'Status Update',
+    },
+  ]
+
+  return (
+    <Offcanvas show onHide={handleClose} placement='end' scroll='true'>
+      <Offcanvas.Header className='d-flex border-bottom px-3 py-2 bg-light' closeButton>
+        <Offcanvas.Title>Documents</Offcanvas.Title>
+      </Offcanvas.Header>
+      <Offcanvas.Body className='border rounded p-2 m-3'>
+        <Tabs defaultActiveKey='files' id='document-tabs' justify fill>
+          {documentTabs && documentTabs.map((tab) => {
+            const { eventKey, title, status } = tab
+            const filteredFiles = initialFiles.filter((f) => (status === f.status) || (status === 'Other File' && f.status === null))
+            return (
+              <Tab
+                eventKey={eventKey}
+                title={title}
+                className='p-2'
+                key={eventKey}
+              >
+                <FilesTable
+                  files={filteredFiles}
+                  status={status}
+                />
+              </Tab>
+            )
+          })}
+        </Tabs>
+      </Offcanvas.Body>
+    </Offcanvas>
+  )
+}
+
+ViewFiles.propTypes = {
+  initialFiles: PropTypes.arrayOf(
+    PropTypes.shape({
+      contentLength: PropTypes.string.isRequired,
+      contentType: PropTypes.string.isRequired,
+      createdAt: PropTypes.string.isRequired,
+      download: PropTypes.string.isRequired,
+      fileName: PropTypes.string.isRequired,
+      href: PropTypes.string.isRequired,
+      status: allowNull(PropTypes.string.isRequired),
+      uploadedBy: PropTypes.string.isRequired,
+      uuid: PropTypes.string.isRequired,
+    }),
+  ).isRequired,
+  handleClose: PropTypes.func.isRequired,
+}
+
+export default ViewFiles

src/resources/utilityFunctions.js

@@ -15,3 +15,10 @@ export const addDays = (date, days) => {
   date.setDate(date.getDate() + days)
   return date
 }
+
+export const allowNull = (wrappedPropTypes) => {
+  return (props, propName, ...rest) => {
+    if (props[propName] === null) return null
+    return wrappedPropTypes(props, propName, ...rest)
+  }
+}