Skip to content

Commit d97ca42

Browse files
RishiRajSahuRishiRajSahu
authored
Merge pull request #4047 from appirio-tech/feature/Add_project_type_icon_in_leftNavigation_for_project
Feature/add project type icon in left navigation for project
2 parents 31e4a3b + 70cad97 commit d97ca42

File tree

5 files changed

+72
-25
lines changed

5 files changed

+72
-25
lines changed

‎src/components/ProjectInfo/ProjectInfo.jsx‎

Lines changed: 41 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,9 @@ import { SCREEN_BREAKPOINT_MD, PROJECT_STATUS_ACTIVE, PHASE_STATUS_ACTIVE, PHASE
1111
import ReviewProjectButton from '../../projects/detail/components/ReviewProjectButton'
1212
import Tooltip from 'appirio-tech-react-components/components/Tooltip/Tooltip'
1313
import { TOOLTIP_DEFAULT_DELAY } from '../../config/constants'
14+
import { getProjectTemplateByKey } from '../../helpers/templates'
1415

16+
import ProjectTypeIcon from '../../components/ProjectTypeIcon'
1517
import './ProjectInfo.scss'
1618

1719
class 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

‎src/components/ProjectInfo/ProjectInfo.scss‎

Lines changed: 23 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,26 @@
1818
margin-top: 4 * $base_unit;
1919
padding-bottom: 0;
2020
}
21+
.icon-and-status {
22+
display: flex;
23+
flex-direction: row;
24+
align-items: inherit;
25+
.item-icon {
26+
display: flex;
27+
flex-direction: column;
28+
min-width: 52px;
29+
width: 52px;
30+
padding-left: 4 * $base-unit;
31+
margin-bottom: 2 * $base-unit;
32+
33+
.spacing {
34+
margin-top: 5 * $base-unit;
35+
}
36+
.project-type-icon > svg > path {
37+
fill: $tc-dark-blue-110;
38+
}
39+
}
40+
}
2141

2242
.project-info-review {
2343
> p {
@@ -42,7 +62,7 @@
4262

4363
.project-status {
4464
margin-bottom: 10px;
45-
padding-left: 4 * $base_unit;
65+
padding-left: 2 * $base_unit;
4666
padding-right: 4 * $base_unit;
4767
display: flex;
4868
flex-direction: column;
@@ -124,6 +144,8 @@
124144
.project-status-bottom {
125145
display: flex;
126146
justify-content: space-between;
147+
padding-left: 4 * $base_unit;
148+
padding-right: 4 * $base_unit;
127149
}
128150

129151
.tooltip-target-container {

‎src/projects/components/projectsCard/ProjectCardHeader.jsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,13 +18,15 @@ function ProjectCardHeader({ project, onClick, projectTemplates, unreadMentionsC
1818
: getProjectTemplateByKey(projectTemplates, projectTemplateKey)
1919
// icon for the product, use default generic work project icon for categories which no longer exist now
2020
const productIcon = _.get(projectTemplate, 'icon', 'tech-32px-outline-work-project')
21+
const templateName = _.get(projectTemplate, 'name', null)
22+
const projectType = project.type !== undefined ? project.type[0].toUpperCase() + project.type.substr(1).replace(/_/g, ' ') : null
2123
return (
2224
<div className="project-card-header" onClick={onClick}>
2325
<div className="project-header">
2426
<span className="badge-wrapper">
2527
{ unreadMentionsCount > 0 && <NotificationBadge count={unreadMentionsCount} /> }
2628
</span>
27-
<div className="project-type-icon" title={project.type !== undefined ? project.type[0].toUpperCase() + project.type.substr(1).replace(/_/g, ' ') : null}>
29+
<div className="project-type-icon" title={templateName ? templateName : projectType}>
2830
<ProjectTypeIcon type={productIcon} />
2931
</div>
3032
<div className="project-header-details">

‎src/projects/detail/containers/ProjectInfoContainer.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -423,7 +423,7 @@ class ProjectInfoContainer extends React.Component {
423423
render() {
424424
const { showDeleteConfirm } = this.state
425425
const { project, currentMemberRole, isSuperUser, phases, hideInfo, hideMembers,
426-
productsTimelines, isProjectProcessing, notifications } = this.props
426+
productsTimelines, isProjectProcessing, notifications, projectTemplates } = this.props
427427
let directLinks = null
428428
// check if direct links need to be added
429429
const isMemberOrCopilot = _.indexOf([
@@ -519,6 +519,7 @@ class ProjectInfoContainer extends React.Component {
519519
toggleProjectDelete={this.toggleProjectDelete}
520520
onConfirmDelete={this.onConfirmDelete}
521521
showDeleteConfirm={showDeleteConfirm}
522+
projectTemplates={projectTemplates}
522523
/>
523524
}
524525

‎src/projects/list/components/Projects/ProjectsGridView.jsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -74,9 +74,11 @@ const ProjectsGridView = props => {
7474
: getProjectTemplateByKey(projectTemplates, projectTemplateKey)
7575
// icon for the product, use default generic work project icon for categories which no longer exist now
7676
const productIcon = _.get(projectTemplate, 'icon', 'tech-32px-outline-work-project')
77+
const templateName = _.get(projectTemplate, 'name', null)
78+
const projectType = item.type !== undefined ? item.type[0].toUpperCase() + item.type.substr(1).replace(/_/g, ' ') : null
7779
return (
7880
<Link to={url} className="spacing">
79-
<div className="project-type-icon" title={item.type !== undefined ? item.type[0].toUpperCase() + item.type.substr(1).replace(/_/g, ' ') : null}>
81+
<div className="project-type-icon" title={templateName ? templateName : projectType}>
8082
<ProjectTypeIcon type={productIcon} />
8183
</div>
8284
</Link>

0 commit comments

Comments
 (0)