Github issue#2812, Enable file attachment edit from the left side bar

— Implemented basic feature of editing the file attachment title and permissions

Author: Vikas Agarwal

src/components/LinksMenu/EditFileAttachment.jsx

@@ -0,0 +1,76 @@
+import _ from 'lodash'
+import React from 'react'
+import PropTypes from 'prop-types'
+import UserAutoComplete from '../UserAutoComplete/UserAutoComplete'
+
+export class EditFileAttachment extends React.Component {
+  constructor(props) {
+    super(props)
+
+    this.state = {
+      title : props.attachment.title,
+      allowedUsers: props.attachment.allowedUsers
+    }
+    this.onUserIdChange = this.onUserIdChange.bind(this)
+    this.handlesToUserIds = this.handlesToUserIds.bind(this)
+    this.userIdsToHandles = this.userIdsToHandles.bind(this)
+  }
+
+  handleTitleChange(event) {
+    this.setState({title: event.target.value})
+  }
+
+  userIdsToHandles(allowedUsers) {
+    const { projectMembers } = this.props
+    allowedUsers = allowedUsers || []
+    return allowedUsers.map(userId => _.get(projectMembers[userId], 'handle'))
+  }
+
+  handlesToUserIds(handles) {
+    const { projectMembers } = this.props
+    const projectMembersByHandle = _.mapKeys(projectMembers, value => value.handle)
+    handles = handles || []
+    return handles.filter(handle => handle).map(handle => _.get(projectMembersByHandle[handle], 'userId'))
+  }
+
+  onUserIdChange(selectedHandles = '') {
+    this.setState({
+      allowedUsers: this.handlesToUserIds(selectedHandles.split(','))
+    })
+  }
+
+  render() {
+    const { onCancel, onConfirm, projectMembers, loggedInUser } = this.props
+    const { title, allowedUsers } = this.state
+    return (
+      <div className="modal delete-link-modal">
+        <div className="modal-title danger">
+        You're about to edit an attachment
+        </div>
+        <div className="modal-body">
+          <label for="title">Title:</label>
+          <input className="edit-input" type="text" value={title} onChange={this.handleTitleChange.bind(this)} name="title"/> 
+          <br />
+          <UserAutoComplete onUpdate={this.onUserIdChange} 
+            projectMembers={projectMembers}
+            loggedInUser={loggedInUser}
+            selectedUsers={this.userIdsToHandles(allowedUsers).join(',')}
+          />
+          <br />
+
+          <div className="button-area flex center">
+            <button className="tc-btn tc-btn-default tc-btn-sm btn-cancel" onClick={onCancel}>Cancel</button>
+            <button className="tc-btn tc-btn-warning tc-btn-sm" onClick={() => onConfirm(title, allowedUsers)}>Edit Attachment</button>
+          </div>
+        </div>
+      </div>
+    )}
+}
+
+EditFileAttachment.propTypes = {
+  onCancel: PropTypes.func.isRequired,
+  onConfirm: PropTypes.func.isRequired
+  // link: PropTypes.object.isRequired
+}
+
+export default EditFileAttachment

src/components/LinksMenu/FileLinksMenu.jsx

@@ -6,7 +6,7 @@ import Panel from '../Panel/Panel'
 import AddFiles from '../FileList/AddFiles'
 import AddFilePermission from '../FileList/AddFilePermissions'
 import DeleteLinkModal from './DeleteLinkModal'
-import EditLinkModal from './EditLinkModal'
+import EditFileAttachment from './EditFileAttachment'
 import uncontrollable from 'uncontrollable'
 import MobileExpandable from '../MobileExpandable/MobileExpandable'
 import cn from 'classnames'
@@ -18,7 +18,6 @@ import Modal from '../Modal/Modal'
 const FileLinksMenu = ({
   canAdd,
   canDelete,
-  canEdit,
   noDots,
   isAddingNewLink,
   limit,
@@ -154,12 +153,13 @@ const FileLinksMenu = ({
                 const onDeleteCancel = () => onDeleteIntent(-1)
                 const handleDeleteClick = () => onDeleteIntent(idx)
 
-                const onEditConfirm = (title, address) => {
-                  onEdit(idx, title, address)
+                const onEditConfirm = (title, allowedUsers) => {
+                  onEdit(idx, title, allowedUsers)
                   onEditIntent(-1)
                 }
                 const onEditCancel = () => onEditIntent(-1)
                 const handleEditClick = () => onEditIntent(idx)
+                const canEdit = `${link.createdBy}` === `${loggedInUser.userId}`
                 if (linkToDelete === idx) {
                   return (
                     <li className="delete-confirmation-modal" key={'delete-confirmation-' + idx}>
@@ -173,8 +173,10 @@ const FileLinksMenu = ({
                 } else if (linkToEdit === idx) {
                   return (
                     <li className="delete-confirmation-modal" key={'delete-confirmation-' + idx}>
-                      <EditLinkModal
-                        link={link}
+                      <EditFileAttachment
+                        attachment={link}
+                        projectMembers={projectMembers}
+                        loggedInUser={loggedInUser}
                         onCancel={onEditCancel}
                         onConfirm={onEditConfirm}
                       />

src/projects/detail/containers/ProjectInfoContainer.js

@@ -14,7 +14,9 @@ import { PROJECT_ROLE_OWNER, PROJECT_ROLE_COPILOT, PROJECT_ROLE_MANAGER,
   DIRECT_PROJECT_URL, SALESFORCE_PROJECT_LEAD_LINK, PROJECT_STATUS_CANCELLED, PROJECT_ATTACHMENTS_FOLDER,
   PROJECT_FEED_TYPE_PRIMARY, PHASE_STATUS_DRAFT } from '../../../config/constants'
 import ProjectInfo from '../../../components/ProjectInfo/ProjectInfo'
-import { addProjectAttachment, uploadProjectAttachments, discardAttachments, changeAttachmentPermission } from '../../actions/projectAttachment'
+import { 
+  addProjectAttachment, updateProjectAttachment, uploadProjectAttachments, discardAttachments, changeAttachmentPermission
+} from '../../actions/projectAttachment'
 
 class ProjectInfoContainer extends React.Component {
 
@@ -28,6 +30,7 @@ class ProjectInfoContainer extends React.Component {
     this.onAddNewLink = this.onAddNewLink.bind(this)
     this.onDeleteLink = this.onDeleteLink.bind(this)
     this.onEditLink = this.onEditLink.bind(this)
+    this.onEditAttachment = this.onEditAttachment.bind(this)
     this.onAddFile = this.onAddFile.bind(this)
     this.onUploadAttachment = this.onUploadAttachment.bind(this)
     this.onSubmitForReview = this.onSubmitForReview.bind(this)
@@ -109,6 +112,19 @@ class ProjectInfoContainer extends React.Component {
     })
   }
 
+  onEditAttachment(idx, title, allowedUsers) {
+    const { project, updateProjectAttachment } = this.props
+    const updatedAttachment = {
+      title,
+      allowedUsers
+    }
+    const attachment = project.attachments[idx]
+    updateProjectAttachment(project.id,
+      attachment.id,
+      updatedAttachment
+    )
+  }
+
   onDeleteProject() {
     const { deleteProject, project } = this.props
     deleteProject(project.id)
@@ -175,6 +191,8 @@ class ProjectInfoContainer extends React.Component {
       .map(attachment => ({
         title: attachment.title,
         address: attachment.downloadUrl,
+        allowedUsers: attachment.allowedUsers,
+        createdBy : attachment.createdBy
       }))
 
     // get list of phase topic in same order as phases
@@ -249,6 +267,7 @@ class ProjectInfoContainer extends React.Component {
             links={attachments}
             title="Files"
             canAdd={enableFileUpload}
+            onEdit={this.onEditAttachment}
             onAddNewLink={this.onAddFile}
             onAddAttachment={addProjectAttachment}
             onUploadAttachment={this.onUploadAttachment}
@@ -305,7 +324,7 @@ const mapStateToProps = ({ templates, projectState, members, loadUser }) => {
   })
 }
 
-const mapDispatchToProps = { updateProject, deleteProject, addProjectAttachment,
+const mapDispatchToProps = { updateProject, deleteProject, addProjectAttachment, updateProjectAttachment,
   discardAttachments, uploadProjectAttachments, loadDashboardFeeds, loadPhaseFeed, changeAttachmentPermission }
 
 export default connect(mapStateToProps, mapDispatchToProps)(ProjectInfoContainer)