Merge pull request #4425 from nqviet/feature/new-milestone-concept

Fix issue #4422, #4424

Author: elkhawajah

src/projects/detail/components/SimplePlan/CreateSimplePlan/CreateSimpleplan.scss

@@ -30,6 +30,7 @@ class ManageMilestones extends React.Component {
     const index = milestones.findIndex(m => m.id === updatedMilestone.id)
 
     const updatedMilestones = [...milestones]
+    updatedMilestones.forEach(milestone => milestone.editting = false)
     updatedMilestones.splice(index, 1, updatedMilestone)
     onChangeMilestones(updatedMilestones)
   }
@@ -97,18 +98,22 @@ class ManageMilestones extends React.Component {
           <Formsy.Form>
             <table styleName="milestones-table">
               <colgroup>
-                <col style={{width: '20px'}} />{/* CHECKBOX */}
-                <col style={{width: '10%'}} />{/* MILESTONE */}
-                <col style={{minWidth: '140px'}} />{/* DESCRIPTION */}
-                <col style={{width: '10%', minWidth: '80px'}} />{/* START DATE */}
-                <col style={{width: '10%', minWidth: '80px'}} />{/* END DATE */}
-                <col style={{width: '10%'}} />{/* STATUS */}
-                <col style={{width: '15%'}} />{/* BUDGET */}
-                {/* <col style={{width: '10%'}} /> */}{/* COPILOTS */}
-                <col style={{width: '80px'}} />{/* ACTION */}
+                <col style={{ width: '20px' }} />{/* CHECKBOX */}
+                <col style={{ width: '8%' }} />{/* MILESTONE */}
+                <col />{/* DESCRIPTION */}
+                <col style={{ width: '12%' }} />{/* START DATE */}
+                <col style={{ width: '11%' }} />{/* END DATE */}
+                <col style={{ width: '10%' }} />{/* STATUS */}
+                <col style={{ width: '12%' }} />{/* BUDGET */}
+                <col style={{ width: '13%' }} />{/* COPILOTS */}
+                {isUpdatable && (<col style={{ width: '80px' }} />)}{/* ACTION */}
               </colgroup>
               <thead>
-                <MilestoneHeaderRow milestones={milestones} onChangeMilestones={onChangeMilestones} />
+                <MilestoneHeaderRow
+                  milestones={milestones}
+                  onChangeMilestones={onChangeMilestones}
+                  isUpdatable={isUpdatable}
+                />
               </thead>
               <tbody>
                 {milestones.map((milestone) => (

src/projects/detail/components/SimplePlan/ManageMilestones/ManageMilestones.jsx

@@ -47,8 +47,73 @@
     text-align: left;
     vertical-align: middle;
 
-    &:not(:first-child) {
-      padding-left: 5px;
+    // checkbox
+    &:nth-child(1) {}
+    // milestone
+    &:nth-child(2) { padding-left: 5px; }
+    // description
+    &:nth-child(3) { padding-left: 15px; }
+    // start date
+    &:nth-child(4) { padding-left: 25px; }
+    // end date
+    &:nth-child(5) { padding-left: 15px; }
+    // status
+    &:nth-child(6) { padding-left: 20px; }
+    // budget
+    &:nth-child(7) {
+      padding-left: 20px;
+      :global(.milestone-budget-prefix-icon) { left: 25px; }
+    }
+    // copilot
+    &:nth-child(8) { padding-left: 25px; }
+  }
+
+  :global(.edit-milestone-row) {
+    th,
+    td {
+      // description
+      &:nth-child(3) { padding-left: 10px; }
+      // end date
+      &:nth-child(5) {  padding-left: 10px; }
+    }
+  }
+
+  @media screen and (max-width: 1024px - 1px) {
+    th,
+    td {
+      // description
+      &:nth-child(3) { padding-left: 5px; }
+      // start date
+      &:nth-child(4) { padding-left: 10px; }
+      // end date
+      &:nth-child(5) { padding-left: 5px; }
+      // status
+      &:nth-child(6) { padding-left: 10px; }
+      // budget
+      &:nth-child(7) {
+        padding-left: 10px;
+        :global {
+          .milestone-budget-prefix-icon {
+            left: 15px;
+          }
+          .tc-file-field__inputs {
+            min-width: 64px;
+            padding-left: 10px;
+          }
+        }
+      }
+      // copilot
+      &:nth-child(8) { padding-left: 15px; }
+    }
+
+    :global(.edit-milestone-row) {
+      th,
+      td {
+        // description
+        &:nth-child(3) { padding-left: 5px; }
+        // end date
+        &:nth-child(5) {  padding-left: 5px; }
+      }
     }
   }
 

src/projects/detail/components/SimplePlan/ManageMilestones/ManageMilestones.scss

@@ -9,7 +9,7 @@ import './MilestoneHeaderRow.scss'
 
 const TCFormFields = FormsyForm.Fields
 
-function MilestoneHeaderRow ({ milestones, onChangeMilestones }) {
+function MilestoneHeaderRow ({ milestones, onChangeMilestones, isUpdatable }) {
   const checked = milestones.reduce(
     (selected, milestone) => selected = selected && milestone.selected,
     milestones.length > 0
@@ -47,7 +47,7 @@ function MilestoneHeaderRow ({ milestones, onChangeMilestones }) {
       <th>STATUS</th>
       <th>BUDGET</th>
       {/* <th>COPILOTS</th> */}
-      <th>ACTION</th>
+      {isUpdatable && (<th>ACTION</th>)}
     </tr>
   )
 }

src/projects/detail/components/SimplePlan/components/MilestoneHeaderRow/MilestoneHeaderRow.jsx

@@ -6,6 +6,7 @@ import PT from 'prop-types'
 import moment from 'moment'
 import FormsyForm from 'appirio-tech-react-components/components/Formsy'
 import _ from 'lodash'
+import { components } from 'react-select'
 import { isValidStartEndDates } from '../../../../../../helpers/utils'
 import FormsySelect from '../../../../../../components/Select/FormsySelect'
 // import MilestoneCopilots from '../MilestoneCopilots'
@@ -16,8 +17,8 @@ import { PHASE_STATUS_OPTIONS } from '../../../../../../config/constants'
 import IconCheck from '../../../../../../assets/icons/icon-check-thin.svg'
 import IconXMark from '../../../../../../assets/icons/icon-x-mark-thin.svg'
 import IconPencil from '../../../../../../assets/icons/icon-ui-pencil.svg'
-
 import IconDots from '../../../../../../assets/icons/icon-dots.svg'
+import IconArrowDown from '../../../../../../assets/icons/arrow-6px-carret-down-normal.svg'
 
 import styles from './MilestoneRow.scss'
 
@@ -47,14 +48,13 @@ function MilestoneRow({
     copilots = copilots.concat(missingCopilots)
   }
 
-
   let milestoneRef
   let startDateRef
   let endDateRef
   let budgetRef
 
   return edit ? (
-    <tr styleName="milestone-row">
+    <tr styleName="milestone-row" className="edit-milestone-row">
       <td styleName="checkbox">
         <TCFormFields.Checkbox
           name={`select-${rowId}`}
@@ -69,10 +69,13 @@ function MilestoneRow({
           validations={{
             isRequired: true,
             checkDuplicatedTitles(values) {
+              if (!milestone.editting) {
+                return true
+              }
               const existingTitles = allMilestones
                 .filter(i => i.id !== milestone.id)
-                .map(i => i.name.toLowerCase())
-              const inputtingTitle = values[`title-${rowId}`].toLowerCase()
+                .map(i => i.name.toLowerCase().trim())
+              const inputtingTitle = values[`title-${rowId}`].toLowerCase().trim()
               return existingTitles.indexOf(inputtingTitle) === -1
             }
           }}
@@ -89,10 +92,11 @@ function MilestoneRow({
             if (!milestone.origin) {
               milestone.origin = {...milestone }
             }
-            onChange({...milestone, name: value })
+            onChange({...milestone, name: value, editting: true, editted: true })
           }}
           wrapperClass={styles.textInput}
           innerRef={ref => milestoneRef = ref}
+          isPristine={() => !milestone.editted}
         />
       </td>
       <td styleName="description">
@@ -181,14 +185,28 @@ function MilestoneRow({
           }}
           value={phaseStatusOptions.find(option => option.value === milestone.status)}
           isSearchable={false}
+          components={{
+            DropdownIndicator: (props) => (
+              <components.DropdownIndicator {...props}>
+                <IconArrowDown />
+              </components.DropdownIndicator>
+            )
+          }}
         />
       </td>
       <td styleName="budget">
+        <span styleName="prefix-icon" className="milestone-budget-prefix-icon">$</span>
         <TCFormFields.TextInput
           validations={{
             isRequired: true,
+            isPositive(values) {
+              return !(values[`budget-${rowId}`] < 0)
+            }
           }}
           validationError={'Please, enter budget'}
+          validationErrors={{
+            isPositive: 'Budget cannot be negative'
+          }}
           required
           type="number"
           name={`budget-${rowId}`}
@@ -233,6 +251,8 @@ function MilestoneRow({
             className="tc-btn tc-btn-link"
             styleName="icon-button"
             onClick={() => {
+              milestone.editted = true
+              milestone.editting = true
               if (milestoneRef.props.isValid()
                 && startDateRef.props.isValid()
                 && endDateRef.props.isValid()
@@ -272,18 +292,30 @@ function MilestoneRow({
           }}
         />
       </td>
-      <td styleName="milestone">{milestone.name}</td>
-      <td styleName="description">{milestone.description}</td>
-      <td styleName="start-date">{moment(milestone.startDate).format('MM-DD-YYYY')}</td>
-      <td styleName="end-date">{moment(milestone.endDate).format('MM-DD-YYYY')}</td>
-      <td styleName="status"><MilestoneStatus status={milestone.status} /></td>
-      <td styleName="budget"><MilestoneBudget spent={milestone.spentBudget} budget={milestone.budget} /></td>
+      <td styleName="milestone">
+        {milestone.name}
+      </td>
+      <td styleName="description">
+        {milestone.description}
+      </td>
+      <td styleName="start-date">
+        {moment(milestone.startDate).format('MM-DD-YYYY')}
+      </td>
+      <td styleName="end-date">
+        {moment(milestone.endDate).format('MM-DD-YYYY')}
+      </td>
+      <td styleName="status">
+        <MilestoneStatus status={milestone.status} />
+      </td>
+      <td styleName="budget">
+        <MilestoneBudget spent={milestone.spentBudget} budget={milestone.budget} />
+      </td>
       {/* <td styleName="copilots">
         <MilestoneCopilots copilots={copilots} />
       </td> */}
-      <td styleName="action">
-        <div styleName="inline-menu">
-          {isUpdatable && (
+      {isUpdatable && (
+        <td styleName="action">
+          <div styleName="inline-menu">
             <button
               type="button"
               className="tc-btn tc-btn-link"
@@ -294,19 +326,17 @@ function MilestoneRow({
             >
               <IconPencil />
             </button>
-          )}
-          {isUpdatable && (
             <MilestoneDeleteButton
               onDelete={() => {
                 onRemove(milestone.id)
               }}
             />
-          )}
-          <button type="button" className="tc-btn tc-btn-link" styleName="icon-button">
-            <IconDots />
-          </button>
-        </div>
-      </td>
+            <button type="button" className="tc-btn tc-btn-link" styleName="icon-button">
+              <IconDots />
+            </button>
+          </div>
+        </td>
+      )}
     </tr>
   )
 }