Merge pull request #1295 from maxceem/files-date

issue #1289 - added date and user tooltip to FileListItem component

Author: gondzo

src/components/FileList/FileList.scss

@@ -59,6 +59,17 @@
       font-size: 15px;
       color: $tc-gray-60;
       margin-left: auto;
+      text-align: right;
+
+      .Tooltip {
+        line-height: 100%;
+      }
+
+      .date {
+        font-size: 9px;
+        line-height: normal;
+        margin-top: 5px;
+      }
     }
 
     .edit-icons {

src/components/FileList/FileListItem.jsx

@@ -1,7 +1,10 @@
 import _ from 'lodash'
 import React, {PropTypes} from 'react'
 import filesize from 'filesize'
-import { Icons } from 'appirio-tech-react-components'
+import moment from 'moment'
+import { Icons, Tooltip } from 'appirio-tech-react-components'
+import UserWithName from '../User/UserWithName'
+import { TOOLTIP_DEFAULT_DELAY } from '../../config/constants'
 
 const { TrashIcon, CloseIcon, EditIcon, SaveIcon } = Icons
 
@@ -88,13 +91,22 @@ export default class FileListItem extends React.Component {
   }
 
   renderReadOnly() {
-    const {title, downloadUrl, description, size, isEditable} = this.props
+    const {title, downloadUrl, description, size, isEditable, updatedAt, createdAt, createdByUser, updatedByUser} = this.props
+
     return (
       <div>
         <div className="title">
           <h4><a href={downloadUrl} target="_blank" rel="noopener noreferrer">{title}</a></h4>
           <div className="size">
             {filesize(size)}
+            <Tooltip theme="light" tooltipDelay={TOOLTIP_DEFAULT_DELAY}>
+              <div className="tooltip-target">
+                <p className="date">{moment(updatedAt || createdAt).format('MMM DD, YYYY')}</p>
+              </div>
+              <div className="tooltip-body">
+                <UserWithName {...(updatedByUser || createdByUser)} />
+              </div>
+            </Tooltip>
           </div>
           {isEditable && <div className="edit-icons">
             <i className="icon-edit" onClick={this.startEdit}><EditIcon /></i>
@@ -136,6 +148,10 @@ FileListItem.propTypes = {
   size: PropTypes.number.isRequired,
   contentType: PropTypes.string,
   isEditable: PropTypes.bool,
+  updatedAt: PropTypes.string,
+  createdAt: PropTypes.string.isRequired,
+  updatedByUser: PropTypes.object,
+  createdByUser: PropTypes.object.isRequired,
 
   /**
    * Callback fired when a save button is clicked

src/config/constants.js

@@ -264,4 +264,7 @@ export const NEW_PROJECT_PATH = '/new-project'
 
 // Analytics constants
 export const GA_CLICK_ID  = '_gclid'
-export const GA_CLIENT_ID = '_gacid'
+export const GA_CLIENT_ID = '_gacid'
+
+// ToolTip
+export const TOOLTIP_DEFAULT_DELAY = 300 // in ms

src/projects/detail/components/FileListContainer.jsx

@@ -38,8 +38,18 @@ class FileListContainer extends Component {
   }
 
   render() {
-    const { files, projectId } = this.props
+    const { files, projectId, allMembers } = this.props
     const storePath = `${PROJECT_ATTACHMENTS_FOLDER}/${projectId}/`
+    files.forEach(file => {
+      if (allMembers[file.updatedBy]) {
+        file.updatedByUser = allMembers[file.updatedBy]
+      }
+
+      if (allMembers[file.createdBy]) {
+        file.createdByUser = allMembers[file.createdBy]
+      }
+    })
+
     return (
       <div>
         <FileList files={files} onDelete={ this.deleteFile } onSave={ this.updateFile } />
@@ -51,10 +61,16 @@ class FileListContainer extends Component {
 
 const mapDispatchToProps = {addProjectAttachment, updateProjectAttachment, removeProjectAttachment}
 
+const mapStateToProps = ({ members }) => {
+  return {
+    allMembers     : members.members
+  }
+}
 
 FileListContainer.propTypes = {
   projectId: PropTypes.number.isRequired,
-  files: PropTypes.arrayOf(PropTypes.object).isRequired
+  files: PropTypes.arrayOf(PropTypes.object).isRequired,
+  allMembers: PropTypes.object.isRequired
 }
 
-export default connect(null, mapDispatchToProps)(FileListContainer)
+export default connect(mapStateToProps, mapDispatchToProps)(FileListContainer)