bug #3273 Show Created By for files and links list in Assets Library 3

Author: jacky-zhangjb

src/components/AssetsLibrary/FilesGridView.jsx

@@ -29,6 +29,7 @@ const FilesGridView = ({
   title,
   selectedUsers,
   onAddAttachment,
+  assetsMembers,
   isSharingAttachment,
   discardAttachments,
   onChangePermissions,
@@ -79,7 +80,7 @@ const FilesGridView = ({
           link={ subFolderContent }
           renderLink={ renderLink }
           goBack={goBack}
-          projectMembers={projectMembers}
+          assetsMembers={assetsMembers}
           onDeletePostAttachment={onDeletePostAttachment}
           loggedInUser={loggedInUser}
           formatModifyDate={formatModifyDate}
@@ -122,7 +123,7 @@ const FilesGridView = ({
               const canEdit = `${link.createdBy}` === `${loggedInUser.userId}`
 
               const changeSubFolder = () => onChangeSubFolder(link)
-              const owner = _.find(projectMembers, m => m.userId === _.parseInt(link.createdBy))
+              const owner = _.find(assetsMembers, m => m.userId === _.parseInt(link.createdBy))
 
               if (Array.isArray(link.children) && link.children.length > 0) {
                 return (

src/components/AssetsLibrary/LinksGridView.jsx

@@ -29,7 +29,7 @@ const LinksGridView = ({
   title,
   formatModifyDate,
   formatFolderTitle,
-  projectMembers,
+  assetsMembers,
 }) => {
   const renderLink = (link) => {
     if (link.onClick) {
@@ -61,7 +61,7 @@ const LinksGridView = ({
           renderLink={ renderLink }
           goBack={goBack}
           formatModifyDate={formatModifyDate}
-          projectMembers={projectMembers}
+          assetsMembers={assetsMembers}
           isLinkSubFolder
         />)}
       {(!subFolderContent) && (
@@ -91,7 +91,7 @@ const LinksGridView = ({
               const onEditCancel = () => onEditIntent(-1)
               const handleEditClick = () => onEditIntent(idx)
               const changeSubFolder = () => onChangeSubFolder(link)
-              const owner = _.find(projectMembers, m => m.userId === _.parseInt(link.createdBy))
+              const owner = _.find(assetsMembers, m => m.userId === _.parseInt(link.createdBy))
 
               if (Array.isArray(link.children) && link.children.length > 0) {
                 return (

src/components/AssetsLibrary/SubFolder.jsx

@@ -56,7 +56,7 @@ class SubFolder extends React.Component {
   }
 
   render() {
-    const { link, renderLink, goBack, formatModifyDate, isLinkSubFolder, projectMembers } = this.props
+    const { link, renderLink, goBack, formatModifyDate, isLinkSubFolder, assetsMembers } = this.props
     const { linkToDelete } = this.state
     return (
       <div styleName={cn({'assets-gridview-container-active': (linkToDelete >= 0)}, '')}>
@@ -79,7 +79,7 @@ class SubFolder extends React.Component {
           </li>
           {
             link.children.map((childLink, i) => {
-              const owner = _.find(projectMembers, m => m.userId === _.parseInt(childLink.createdBy))
+              const owner = _.find(assetsMembers, m => m.userId === _.parseInt(childLink.createdBy))
               if (linkToDelete === i) {
                 return (
                   <li styleName="delete-confirmation-modal" key={'delete-confirmation-post-attachment-' + i}>

src/config/constants.js

@@ -328,6 +328,11 @@ export const LOAD_MEMBERS_PENDING     = 'LOAD_MEMBERS_PENDING'
 export const LOAD_MEMBERS_SUCCESS     = 'LOAD_MEMBERS_SUCCESS'
 export const LOAD_MEMBERS_FAILURE     = 'LOAD_MEMBERS_FAILURE'
 
+export const LOAD_ASSETS_MEMBERS             = 'LOAD_ASSETS_MEMBERS'
+export const LOAD_ASSETS_MEMBERS_PENDING     = 'LOAD_ASSETS_MEMBERS_PENDING'
+export const LOAD_ASSETS_MEMBERS_SUCCESS     = 'LOAD_ASSETS_MEMBERS_SUCCESS'
+export const LOAD_ASSETS_MEMBERS_FAILURE     = 'LOAD_ASSETS_MEMBERS_FAILURE'
+
 export const LOAD_MEMBER_SUGGESTIONS             = 'LOAD_MEMBER_SUGGESTIONS'
 export const LOAD_MEMBER_SUGGESTIONS_PENDING     = 'LOAD_MEMBER_SUGGESTIONS_PENDING'
 export const LOAD_MEMBER_SUGGESTIONS_SUCCESS     = 'LOAD_MEMBER_SUGGESTIONS_SUCCESS'

src/projects/actions/project.js

@@ -21,6 +21,7 @@ import {
 import {
   createTimeline,
 } from '../../api/timelines'
+import { getMembersById } from '../../api/projectMembers'
 // import { loadProductTimelineWithMilestones } from './productsTimelines'
 import {
   LOAD_PROJECT,
@@ -44,6 +45,7 @@ import {
   PHASE_STATUS_ACTIVE,
   PHASE_DIRTY,
   PHASE_DIRTY_UNDO,
+  LOAD_ASSETS_MEMBERS,
   PROJECT_STATUS_IN_REVIEW,
   PHASE_STATUS_REVIEWED,
   PROJECT_STATUS_REVIEWED,
@@ -331,6 +333,25 @@ export function updateProject(projectId, updatedProps, updateExisting = false) {
   }
 }
 
+export function loadAssetsMembers(userIds) {
+  return (dispatch, getState) => {
+    // check if we need to request data from server
+    const assetsMembers = getState().projectState.assetsMembers
+    // this returns ids from userIds that are not in store (members)
+    const missingUsers = _.difference(userIds, _.keys(assetsMembers))
+    // dispatch request to load members if we are missing data
+    if (missingUsers.length) {
+      return dispatch({
+        type: LOAD_ASSETS_MEMBERS,
+        payload: getMembersById(userIds)
+      })
+    } else {
+      // returns empty resolved promise to avoid error when we call then on this action
+      return Promise.resolve()
+    }
+  }
+}
+
 export function createScopeChangeRequest(projectId, request) {
   const flatNewScope = flatten(request.newScope, { safe: true })
   const emptyKeys = _.keys(flatNewScope).filter(key => {

src/projects/detail/containers/AssetsInfoContainer.jsx

@@ -9,7 +9,7 @@ import moment from 'moment'
 import LinksGridView from '../../../components/AssetsLibrary/LinksGridView'
 import FilesGridView from '../../../components/AssetsLibrary/FilesGridView'
 import AssetsStatistics from '../../../components/AssetsLibrary/AssetsStatistics'
-import { updateProject, deleteProject } from '../../actions/project'
+import { updateProject, deleteProject, loadAssetsMembers } from '../../actions/project'
 import { loadDashboardFeeds, loadProjectMessages } from '../../actions/projectTopics'
 import { loadTopic } from '../../../actions/topics'
 import { loadProjectPlan } from '../../actions/projectPlan'
@@ -397,7 +397,7 @@ class AssetsInfoContainer extends React.Component {
     const { project, currentMemberRole, isSuperUser, phases, feeds,
       isManageUser, phasesTopics, projectTemplates, hideLinks,
       attachmentsAwaitingPermission, addProjectAttachment, discardAttachments, attachmentPermissions,
-      changeAttachmentPermission, projectMembers, loggedInUser, isSharingAttachment, canAccessPrivatePosts } = this.props
+      changeAttachmentPermission, projectMembers, loggedInUser, isSharingAttachment, canAccessPrivatePosts, loadAssetsMembers, assetsMembers } = this.props
     const { ifModalOpen } = this.state
 
     const canManageLinks = !!currentMemberRole || isSuperUser
@@ -486,6 +486,25 @@ class AssetsInfoContainer extends React.Component {
       ...this.extractAttachmentLinksFromPosts(phaseFeeds)
     ]
 
+    let tmpUserIds = []
+    let userIds = []
+    _.forEach(links, link => {
+      tmpUserIds = _.union(tmpUserIds, _.map(link.children, 'createdBy'))
+      tmpUserIds = _.union(tmpUserIds, [link.createdBy])
+      tmpUserIds = _.union(tmpUserIds, [link.updatedBy])
+    })
+
+    _.forEach(attachments, attachment => {
+      tmpUserIds = _.union(tmpUserIds, _.map(attachment.children, 'createdBy'))
+      tmpUserIds = _.union(tmpUserIds, [attachment.createdBy])
+    })
+
+    _.forEach(tmpUserIds, userId => {
+      userIds = _.union(userIds, [_.parseInt(userId)])
+    })
+    _.remove(userIds, i => !i)
+    loadAssetsMembers(userIds)
+
     const assetsData = []
     enableFileUpload && assetsData.push({name: 'Files', total: _.toString(attachments.length)})
     !hideLinks && assetsData.push({name: 'Links', total: _.toString(links.length)})
@@ -608,6 +627,7 @@ class AssetsInfoContainer extends React.Component {
               onChangePermissions={changeAttachmentPermission}
               selectedUsers={attachmentPermissions}
               projectMembers={projectMembers}
+              assetsMembers={assetsMembers}
               pendingAttachments={attachmentsAwaitingPermission}
               loggedInUser={loggedInUser}
               attachmentsStorePath={attachmentsStorePath}
@@ -618,7 +638,7 @@ class AssetsInfoContainer extends React.Component {
           {(!hideLinks && activeAssetsType === 'Links') &&
             <LinksGridView
               links={links}
-              projectMembers={projectMembers}
+              assetsMembers={assetsMembers}
               canDelete={canManageLinks}
               canEdit={canManageLinks}
               onDelete={this.onDeleteLink}
@@ -653,12 +673,13 @@ const mapStateToProps = ({ templates, projectState, members, loadUser }) => {
     attachmentPermissions: projectState.attachmentPermissions,
     isSharingAttachment: projectState.processingAttachments,
     projectMembers:  _.keyBy(projectMembers, 'userId'),
+    assetsMembers: _.keyBy(projectState.assetsMembers, 'userId'),
     loggedInUser: loadUser.user,
     canAccessPrivatePosts
   })
 }
 
-const mapDispatchToProps = { updateProject, deleteProject, addProjectAttachment, updateProjectAttachment,
+const mapDispatchToProps = { updateProject, deleteProject, loadAssetsMembers, addProjectAttachment, updateProjectAttachment,
   loadProjectMessages, discardAttachments, uploadProjectAttachments, loadDashboardFeeds, loadTopic, changeAttachmentPermission,
   removeProjectAttachment, loadProjectPlan, saveFeedComment }
 

src/projects/reducers/project.js

@@ -23,6 +23,7 @@ import {
   ACCEPT_OR_REFUSE_INVITE_SUCCESS, ACCEPT_OR_REFUSE_INVITE_FAILURE, ACCEPT_OR_REFUSE_INVITE_PENDING, RELOAD_PROJECT_MEMBERS_SUCCESS,
   UPLOAD_PROJECT_ATTACHMENT_FILES, DISCARD_PROJECT_ATTACHMENT, CHANGE_ATTACHMENT_PERMISSION,
   CREATE_SCOPE_CHANGE_REQUEST_SUCCESS, APPROVE_SCOPE_CHANGE_SUCCESS, REJECT_SCOPE_CHANGE_SUCCESS, CANCEL_SCOPE_CHANGE_SUCCESS, ACTIVATE_SCOPE_CHANGE_SUCCESS,
+  LOAD_ASSETS_MEMBERS_SUCCESS, LOAD_ASSETS_MEMBERS_PENDING, LOAD_ASSETS_MEMBERS_FAILURE, CONNECT_USER, CONNECT_USER_HANDLE
 } from '../../config/constants'
 import _ from 'lodash'
 import update from 'react-addons-update'
@@ -40,6 +41,7 @@ const initialState = {
   project: {
     invites: [] // invites are pushed directly into it hence need to declare first
   },
+  assetsMembers: {},
   projectNonDirty: {},
   updateExisting: false,
   phases: null,
@@ -439,6 +441,25 @@ export const projectState = function (state=initialState, action) {
     })
   }
 
+  case LOAD_ASSETS_MEMBERS_SUCCESS: {
+    const _members = _.map(_.filter(action.payload, m => m.userId), m => {
+      if (m.handle) {
+        return m
+      }
+      return { userId: m.userId, ...CONNECT_USER, handle: CONNECT_USER_HANDLE }
+    })
+    const userMap = _.keyBy(_members, 'userId')
+    // merge the 2 data sets
+    return Object.assign({}, state, {
+      processing: false,
+      assetsMembers: update(state.assetsMembers, {$merge: userMap}),
+    })
+  }
+
+  case LOAD_ASSETS_MEMBERS_PENDING:
+  case LOAD_ASSETS_MEMBERS_FAILURE:
+    return state
+
   case DELETE_PROJECT_PHASE_SUCCESS: {
     const { phaseId } = action.payload