@@ -11,7 +11,9 @@ import { SCREEN_BREAKPOINT_MD, PROJECT_STATUS_ACTIVE, PHASE_STATUS_ACTIVE, PHASE
1111import ReviewProjectButton from '../../projects/detail/components/ReviewProjectButton'
1212import Tooltip from 'appirio-tech-react-components/components/Tooltip/Tooltip'
1313import { TOOLTIP_DEFAULT_DELAY } from '../../config/constants'
14+ import { getProjectTemplateByKey } from '../../helpers/templates'
1415
16+ import ProjectTypeIcon from '../../components/ProjectTypeIcon'
1517import './ProjectInfo.scss'
1618
1719class ProjectInfo extends Component {
@@ -23,7 +25,7 @@ class ProjectInfo extends Component {
2325 render ( ) {
2426 const { project, currentMemberRole,
2527 onChangeStatus, isSuperUser, phases, onSubmitForReview, isProjectProcessing,
26- showDeleteConfirm, toggleProjectDelete, onConfirmDelete } = this . props
28+ showDeleteConfirm, toggleProjectDelete, onConfirmDelete, projectTemplates } = this . props
2729
2830 const code = _ . get ( project , 'details.utm.code' , '' )
2931
@@ -50,29 +52,47 @@ class ProjectInfo extends Component {
5052 </ div >
5153 )
5254
55+ const url = `/projects/${ project . id } `
56+ const projectTemplateId = project . templateId
57+ const projectTemplateKey = _ . get ( project , 'details.products[0]' )
58+ const projectTemplate = projectTemplateId
59+ ? _ . find ( projectTemplates , pt => pt . id === projectTemplateId )
60+ : getProjectTemplateByKey ( projectTemplates , projectTemplateKey )
61+ // icon for the product, use default generic work project icon for categories which no longer exist now
62+ const productIcon = _ . get ( projectTemplate , 'icon' , 'tech-32px-outline-work-project' )
63+ const templateName = _ . get ( projectTemplate , 'name' , null )
64+ const projectType = project . type !== undefined ? project . type [ 0 ] . toUpperCase ( ) + project . type . substr ( 1 ) . replace ( / _ / g, ' ' ) : null
5365 return (
5466 < div className = "project-info" >
55- < div className = "project-status" >
56- < div styleName = "project-name" > { _ . unescape ( project . name ) } </ div >
57-
58- < div styleName = "project-status-bottom" >
59- < div className = "project-status-time" >
60- Created { moment ( project . createdAt ) . format ( 'MMM DD, YYYY' ) }
61- </ div >
62- { ! ! code &&
63- < div styleName = "tooltip-target-container" >
64- < Tooltip styleName = "tooltip" theme = "light" tooltipDelay = { TOOLTIP_DEFAULT_DELAY } >
65- < div className = "tooltip-target" >
66- < div className = "project-status-ref" > { _ . unescape ( code ) } </ div >
67- </ div >
68- < div className = "tooltip-body" >
69- < div > { _ . unescape ( code ) } </ div >
70- </ div >
71- </ Tooltip >
72- </ div >
73-
74- }
67+ < div className = "icon-and-status" >
68+ < div className = "item-icon" >
69+ < Link to = { url } className = "spacing" >
70+ < div className = "project-type-icon" title = { templateName ? templateName : projectType } >
71+ < ProjectTypeIcon type = { productIcon } />
72+ </ div >
73+ </ Link >
7574 </ div >
75+ < div className = "project-status" >
76+ < div styleName = "project-name" > { _ . unescape ( project . name ) } </ div >
77+ </ div >
78+ </ div >
79+ < div styleName = "project-status-bottom" >
80+ < div className = "project-status-time" >
81+ Created { moment ( project . createdAt ) . format ( 'MMM DD, YYYY' ) }
82+ </ div >
83+ { ! ! code &&
84+ < div styleName = "tooltip-target-container" >
85+ < Tooltip styleName = "tooltip" theme = "light" tooltipDelay = { TOOLTIP_DEFAULT_DELAY } >
86+ < div className = "tooltip-target" >
87+ < div className = "project-status-ref" > { _ . unescape ( code ) } </ div >
88+ </ div >
89+ < div className = "tooltip-body" >
90+ < div > { _ . unescape ( code ) } </ div >
91+ </ div >
92+ </ Tooltip >
93+ </ div >
94+
95+ }
7696 </ div >
7797 { showDeleteConfirm && (
7898 < DeleteProjectModal
0 commit comments