Final Fixes - new milestone concept

Author: tasqat

src/assets/icons/icon-check-thin.svg

@@ -18,7 +18,7 @@ const Themes = {
 
 const ProjectProgress = ({type, percent, children, viewType=ViewTypes.HBAR }) => (
   <div className="project-progress">
-    { viewType === ViewTypes.HBAR && 
+    { viewType === ViewTypes.HBAR &&
       <div className="progress-bar">
         <div className={cn('progress', type)} style={{width: percent + '%'}} />
       </div>
@@ -35,14 +35,13 @@ ProjectProgress.ViewTypes = ViewTypes
 ProjectProgress.Themes = Themes
 
 ProjectProgress.defaultProps = {
-  type: Themes.BLUE 
+  type: Themes.BLUE
 }
 
 ProjectProgress.propTypes = {
-  title: PropTypes.string.isRequired,
   type: PropTypes.oneOf(_.values(Themes)),
   percent: PropTypes.number.isRequired,
-  children: PropTypes.any.isRequired
+  children: PropTypes.any
 }
 
 export default ProjectProgress

src/assets/icons/icon-dots.svg

@@ -27,7 +27,7 @@ TwoColsLayout.Sidebar = ({ children, wrapperClass }) => (
 
 TwoColsLayout.Content = ({ children }) => (
   <div styleName="content">
-    <div styleName="content-inner">
+    <div styleName="content-inner" className="twoColsLayout-contentInner">
       {children}
     </div>
   </div>

src/assets/icons/icon-gnatt-gray.svg

@@ -632,6 +632,16 @@ export const PHASE_STATUS = [
   // {color: 'red', name: 'Paused', fullName: 'Phase is paused', value: PHASE_STATUS_PAUSED, order: 7, dropDownOrder: 7 }
 ]
 
+export const PHASE_STATUS_OPTIONS = [
+  { label: 'Draft', value: PHASE_STATUS_DRAFT },
+  { label: 'In Review', value: PHASE_STATUS_IN_REVIEW },
+  { label: 'Reviewed', value: PHASE_STATUS_REVIEWED },
+  { label: 'Active', value: PHASE_STATUS_ACTIVE },
+  { label: 'Completed', value: PHASE_STATUS_COMPLETED },
+  { label: 'Cancelled', value: PHASE_STATUS_CANCELLED },
+  { label: 'Phased', value: PHASE_STATUS_PAUSED },
+]
+
 // this defines default criteria to filter projects for projects list
 export const PROJECT_LIST_DEFAULT_CRITERIA = {
   sort: 'lastActivityAt desc'
@@ -1228,4 +1238,4 @@ export const DEFAULT_NDA_UUID = process.env.DEFAULT_NDA_UUID
 /**
  * The minimal duration of a TaaS Job in weeks
  */
-export const TAAS_MIN_JOB_DURATION = 4
+export const TAAS_MIN_JOB_DURATION = 4

src/assets/icons/icon-x-mark-thin.svg

@@ -7,11 +7,15 @@ import { hasPermission } from '../../../../helpers/permissions'
 
 import './ProjectPlanEmpty.scss'
 
-const ProjectPlanEmpty = () => {
+const ProjectPlanEmpty = ({ version }) => {
   return hasPermission(PERMISSIONS.MANAGE_PROJECT_PLAN) ? (
     <div styleName="container">
       <h2>Build Your Project Plan</h2>
-      <p>Build your project plan in Connect to reflect delivery progress to the customer. Begin by clicking the "Add Phase" button, select the template that best matches your need, and modify the phase title and milestone dates prior to publishing to the customer.</p>
+      {version === 'v4' ? (
+        <p>Build your project plan in Connect to reflect delivery progress to the customer. Begin by clicking the "Add Milestone" button, and modify the milestone attributes prior to publishing to the customer.</p>
+      ) : (
+        <p>Build your project plan in Connect to reflect delivery progress to the customer. Begin by clicking the "Add Phase" button, select the template that best matches your need, and modify the phase title and milestone dates prior to publishing to the customer.</p>
+      )}
       <p><b>Important Note:</b> To move the project into <i>'Active'</i> status, you must set at least one phase in Connect's Project Plan to be in 'Planned' status, which signifies to customers that delivery planning and execution has begun.</p>
       <p>If you feel like you have more things to send over, or want to reach out to us, please drop us a line at support@topcoder.com. Thanks!</p>
     </div>

src/assets/icons/x-mark-thin.svg

@@ -3,11 +3,13 @@
  */
 import React from 'react'
 import PT from 'prop-types'
+import _ from 'lodash'
 import GenericMenu from '../../../../../components/GenericMenu'
 import ProjectDetailsWidget from '../ProjectDetailsWidget'
 import ManageMilestones from '../ManageMilestones'
+import * as milestoneHelper from '../components/helpers/milestone'
 
-import './CreateSimpleplan.scss'
+import styles from './CreateSimplePlan.scss'
 
 const createTabs = ({ onClick } ) => ([
   {
@@ -17,44 +19,92 @@ const createTabs = ({ onClick } ) => ([
   }
 ])
 
-function CreateSimpleplan({
-  project,
-  phases,
-  milestones,
-  onChangeMilestones,
-  onSaveMilestone,
-  onRemoveMilestone,
-  isProjectLive
-})  {
-  const onClickMilestonesTab = () => {}
-
-  return (
-    <div styleName="container">
-      <ProjectDetailsWidget project={project} phases={phases} />
-      <div styleName="milestones-container">
-        <div styleName="tabs-header">
-          <GenericMenu navLinks={createTabs(onClickMilestonesTab)} />
+class CreateSimplePlan extends React.Component {
+  componentDidMount() {
+    const { project, milestones, loadMembers } = this.props
+
+    let copilotIds = []
+    milestones.forEach((milestone) => {
+      copilotIds = copilotIds.concat(_.get(milestone, 'details.copilots', []))
+    })
+
+    const projectMemberIds = project.members.map(member => member.userId)
+    const missingMemberIds = _.difference(copilotIds, projectMemberIds)
+    if (missingMemberIds.length) {
+      loadMembers(missingMemberIds)
+    }
+
+    const contentInnerElement = document.querySelector('.twoColsLayout-contentInner')
+    contentInnerElement.classList.add(styles['twoColsLayout-contentInner'])
+  }
+
+  componentWillUnmount() {
+    const contentInnerElement = document.querySelector('.twoColsLayout-contentInner')
+    contentInnerElement.classList.remove(styles['twoColsLayout-contentInner'])
+  }
+
+  render () {
+    const {
+      project,
+      phases,
+      milestones,
+      onChangeMilestones,
+      onSaveMilestone,
+      onRemoveMilestone,
+      isProjectLive,
+      members,
+      isCustomer,
+    } = this.props
+    const onClickMilestonesTab = () => {}
+
+    if (milestones.length === 0) {
+      return isCustomer ? null : (
+        <div styleName="add-new-milestone">
+          <button
+            className="tc-btn tc-btn-primary tc-btn-sm action-btn"
+            onClick={() => {
+              const newMilestone = milestoneHelper.createEmptyMilestone(new Date())
+              newMilestone.edit = true
+              onChangeMilestones([newMilestone])
+            }}
+          >
+            Add New Milestone
+          </button>
+        </div>
+      )
+    }
+
+    return (
+      <div>
+        <ProjectDetailsWidget project={project} phases={phases} />
+        <div styleName="milestones-container">
+          <div styleName="tabs-header">
+            <GenericMenu navLinks={createTabs(onClickMilestonesTab)} />
+          </div>
+          <ManageMilestones
+            milestones={milestones}
+            onChangeMilestones={onChangeMilestones}
+            onSaveMilestone={onSaveMilestone}
+            onRemoveMilestone={onRemoveMilestone}
+            projectMembers={project.members}
+            isUpdatable={isProjectLive && !isCustomer}
+            members={members}
+          />
         </div>
-        <ManageMilestones
-          milestones={milestones}
-          onChangeMilestones={onChangeMilestones}
-          onSaveMilestone={onSaveMilestone}
-          onRemoveMilestone={onRemoveMilestone}
-          projectMembers={project.members}
-          isProjectLive={isProjectLive}
-        />
       </div>
-    </div>
-  )
+    )
+  }
 }
 
-CreateSimpleplan.propTypes = {
+CreateSimplePlan.propTypes = {
   project: PT.shape(),
   phases: PT.arrayOf(PT.shape()),
   milestones: PT.arrayOf(PT.shape()),
   onChangeMilestones: PT.func,
   onSaveMilestone: PT.func,
   onRemoveMilestone: PT.func,
+  members: PT.object,
+  isCustomer: PT.bool,
 }
 
-export default CreateSimpleplan
+export default CreateSimplePlan