Final Fixes for Challenge Milstone Listing

Author: tasqat

config/constants/dev.js

@@ -57,6 +57,7 @@ module.exports = {
   DASHBOARD_FAQ_CONTENT_ID : process.env.DASHBOARD_FAQ_CONTENT_ID,
   CONTENTFUL_DELIVERY_KEY : process.env.CONTENTFUL_DELIVERY_KEY,
   CONTENTFUL_SPACE_ID : process.env.CONTENTFUL_SPACE_ID,
+  CHALLENGE_ID_MAPPING: process.env.CHALLENGE_ID_MAPPING,
 
   TAAS_APP_URL: 'https://platform.topcoder-dev.com/taas',
   DEFAULT_NDA_UUID: 'e5811a7b-43d1-407a-a064-69e5015b4900'

config/constants/master.js

@@ -57,6 +57,7 @@ module.exports = {
   DASHBOARD_FAQ_CONTENT_ID : process.env.DASHBOARD_FAQ_CONTENT_ID,
   CONTENTFUL_DELIVERY_KEY : process.env.CONTENTFUL_DELIVERY_KEY,
   CONTENTFUL_SPACE_ID : process.env.CONTENTFUL_SPACE_ID,
+  CHALLENGE_ID_MAPPING: process.env.CHALLENGE_ID_MAPPING,
 
   TAAS_APP_URL: 'https://platform.topcoder.com/taas',
   DEFAULT_NDA_UUID: 'c41e90e5-4d0e-4811-bd09-38ff72674490'

src/assets/icons/icon-calendar2.svg

@@ -758,6 +758,8 @@ export const PROJECT_ATTACHMENTS_FOLDER = process.env.PROJECT_ATTACHMENTS_FOLDER
 export const FILE_PICKER_ACCEPT = process.env.FILE_PICKER_ACCEPT || ['.bmp', '.gif', '.jpg', '.tex', '.xls', '.xlsx', '.doc', '.docx', '.zip', '.txt', '.pdf', '.png', '.ppt', '.pptx', '.rtf', '.csv']
 
 export const SEGMENT_KEY = process.env.CONNECT_SEGMENT_KEY
+
+export const CHALLENGE_ID_MAPPING = process.env.CHALLENGE_ID_MAPPING || 'challengeId'
 /*
  * URLs
  */

src/assets/icons/icon-copilot.svg

@@ -3,6 +3,7 @@
  */
 import React from 'react'
 import PT from 'prop-types'
+import moment from 'moment'
 import FormsyForm from 'appirio-tech-react-components/components/Formsy'
 import MilestoneRow from '../components/MilestoneRow'
 import MilestoneChallengeHeader from '../components/MilestoneChallengeHeader'
@@ -11,10 +12,12 @@ import MilestoneChallengeFooter from '../components/MilestoneChallengeFooter'
 import MilestoneHeaderRow from '../components/MilestoneHeaderRow'
 import MilestoneDeleteButton from '../components/MilestoneDeleteButton'
 import MilestoneCopilots from '../components/MilestoneCopilots'
+import MilestoneMoveDateButton from '../components/MilestoneMoveDateButton'
+
 import * as milestoneHelper from '../components/helpers/milestone'
 import IconUnselect from '../../../../../assets/icons/icon-disselect.svg'
 import IconCopilot from '../../../../../assets/icons/icon-copilot.svg'
-import IconCalendar from '../../../../../assets/icons/calendar.svg'
+import { CHALLENGE_ID_MAPPING } from '../../../../../config/constants'
 // import IconGridView from '../../../../../assets/icons/ui-16px-2_grid-45-gray.svg'
 // import IconGnattView from '../../../../../assets/icons/icon-gnatt-gray.svg'
 
@@ -38,8 +41,26 @@ class ManageMilestones extends React.Component {
     this.onUnselectAll = this.onUnselectAll.bind(this)
     this.onDeleteAll = this.onDeleteAll.bind(this)
     this.onAddCopilotAll = this.onAddCopilotAll.bind(this)
+    this.onMoveMilestoneDates = this.onMoveMilestoneDates.bind(this)
+    this.onLoadChallengesByPage = this.onLoadChallengesByPage.bind(this)
   }
+  onMoveMilestoneDates(days) {
+    const {
+      milestones,
+      onSaveMilestone
+    } = this.props
 
+    
+    if (days > 0) {
+      const seletedMilestones = _.filter(milestones, m => m.selected)
+      _.forEach(seletedMilestones, m => {
+        m.startDate = moment(m.startDate).add(days, 'days')
+        m.endDate = moment(m.endDate).add(days, 'days')
+        this.onChange(m)
+        onSaveMilestone(m.id)
+      })
+    }
+  }
   onAddCopilotAll(member, isAdd) {
     const { milestones, onSaveMilestone } = this.props
     const seletedMilestones = _.filter(milestones, m => m.selected)
@@ -81,11 +102,21 @@ class ManageMilestones extends React.Component {
     }))
     onChangeMilestones(milestonesUnselected)
   }
+
+  onLoadChallengesByPage(index, milestone) {
+    const { onGetChallenges } = this.props
+    let challengeIds = _.map(milestone.products, `details.${CHALLENGE_ID_MAPPING}`).slice(6 * index, 7 * (index+1))
+    challengeIds = _.filter(challengeIds)
+    if (!challengeIds.length) {
+      return
+    }
+    onGetChallenges(milestone.id, challengeIds)
+  }
   onExpandChallenges(isExpand, milestone) {
     let expandList = this.state.expandList
     const { onGetChallenges } = this.props
 
-    let challengeIds = _.map(milestone.products, 'details.challengeId').slice(0, 6)
+    let challengeIds = _.map(milestone.products, `details.${CHALLENGE_ID_MAPPING}`).slice(0, 6)
     challengeIds = _.filter(challengeIds)
     if (!challengeIds.length) {
       return
@@ -141,24 +172,46 @@ class ManageMilestones extends React.Component {
 
   isExpandChallengeList(milestone) {
     const isExpand = _.find(this.state.expandList, (i) => i === milestone.id)
-    if (isExpand && milestone.challenges) {
+    if (isExpand) {
       return true
     } else {
       return false
     }
   }
 
   renderChallengeTable(milestone) {
+    const {
+      isUpdatable
+    } = this.props
     if (!this.isExpandChallengeList(milestone)) {
       return <tr />
     }
+
+    let challengeIds = _.map(milestone.products, `details.${CHALLENGE_ID_MAPPING}`).slice(0, 6)
+    challengeIds = _.filter(challengeIds)
+    // no challenges
+    if (!challengeIds.length) {
+      return [
+        <MilestoneChallengeHeader isUpdatable={isUpdatable}/>,
+        <MilestoneChallengeRow isEmpty isUpdatable={isUpdatable}/>
+      ]
+    }
+
+    // loading challenges
+    if (milestone.isLoadingChallenges) {
+      return [
+        <MilestoneChallengeHeader isUpdatable={isUpdatable}/>,
+        <MilestoneChallengeRow isLoading isUpdatable={isUpdatable}/>
+      ]
+    }
+
     const rows = _.map(milestone.challenges, (c) => {
-      return <MilestoneChallengeRow challenge={c}/>
+      return <MilestoneChallengeRow challenge={c} isUpdatable={isUpdatable}/>
     })
     return [
-      <MilestoneChallengeHeader />,
+      <MilestoneChallengeHeader isUpdatable={isUpdatable}/>,
       ...rows,
-      <MilestoneChallengeFooter milestone={milestone}/>
+      <MilestoneChallengeFooter milestone={milestone} onLoadChallengesByPage={this.onLoadChallengesByPage} isUpdatable={isUpdatable}/>
     ]
   }
   getSelectCount() {
@@ -170,19 +223,23 @@ class ManageMilestones extends React.Component {
   renderAddCopilot() {
     const {
       projectMembers,
+      milestones,
     } = this.props
 
+    const seletedMilestones = _.filter(milestones, m => m.selected)
+    const copilots = _.intersectionBy(..._.map(seletedMilestones, 'members'), 'userId')
     return (
       <MilestoneCopilots 
         edit 
-        customButton={<IconCopilot />} 
-        copilots={[]} 
+        customButton={<IconCopilot styleName="copilot-icon"/>} 
+        copilots={copilots} 
         projectMembers={projectMembers} 
         onAdd={(member) => this.onAddCopilotAll(member, true)}  
         onRemove={(member) => this.onAddCopilotAll(member, false)}  
       />
     )
   }
+
   render() {
     const {
       milestones,
@@ -191,6 +248,7 @@ class ManageMilestones extends React.Component {
       isUpdatable,
     } = this.props
 
+    const canEdit = isUpdatable && this.getSelectCount() > 0
     return (
       <div>
         <div styleName="toolbar">
@@ -201,18 +259,16 @@ class ManageMilestones extends React.Component {
             <IconGnattView />
           </button>
           <div styleName="separator" /> */}
-          <div styleName="unselect-bottom" onClick={this.onUnselectAll}>
+          {canEdit ? <div styleName="unselect-bottom" onClick={this.onUnselectAll}>
             <IconUnselect /> {this.getSelectCount()} PROJECTS SELECTED
-          </div>
-          <div styleName="delete-button">
+          </div>: null }
+          { canEdit ? <div styleName="delete-button">
             <MilestoneDeleteButton onDelete={this.onDeleteAll}/>
-          </div>
-          <div styleName="icon">
+          </div>: null }
+          { canEdit ? <div styleName="icon">
             {this.renderAddCopilot()}
-          </div>
-          <div styleName="icon">
-            <IconCalendar />
-          </div>
+          </div>: null }
+          { canEdit ? <MilestoneMoveDateButton onMove={this.onMoveMilestoneDates}/>: null}
           {isUpdatable && (
             <button className="tc-btn tc-btn-primary tc-btn-sm" styleName="primary-button" onClick={this.onAdd}>
               ADD
@@ -229,6 +285,7 @@ class ManageMilestones extends React.Component {
           <Formsy.Form>
             <table styleName="milestones-table">
               <colgroup>
+                <col style={{ width: '20px' }} />
                 <col style={{ width: '20px' }} />{/* CHECKBOX */}
                 <col style={{ width: '8%' }} />{/* MILESTONE */}
                 <col />{/* DESCRIPTION */}

src/assets/icons/icon-trash2.svg

@@ -27,9 +27,19 @@
   }
   .delete-button {
     cursor: pointer;
-
+    margin: 0 10px;
+
+    > span > button {
+      height: 20px;
+      width: 20px;
+      svg {
+        height: 20px;
+        width: 20px;
+      }
+    }
   }
   .icon {
+    margin: 0 10px;
     cursor: pointer;
     svg {
       margin: 0 8px;
@@ -53,6 +63,10 @@
   }
 }
 
+.copilot-icon {
+  width: 20px;
+}
+
 .view-mode {
   &.active {
     svg path {
@@ -76,54 +90,56 @@
     text-align: left;
     vertical-align: middle;
 
-    // checkbox
+    // expand arrow
     &:nth-child(1) {}
+    // checkbox
+    &:nth-child(2) {}
     // milestone
-    &:nth-child(2) { padding-left: 5px; }
+    &:nth-child(3) { padding-left: 5px; }
     // description
-    &:nth-child(3) { padding-left: 15px; }
+    &:nth-child(4) { padding-left: 15px; }
     // start date
-    &:nth-child(4) { padding-left: 25px; }
+    &:nth-child(5) { padding-left: 25px; }
     // end date
-    &:nth-child(5) { padding-left: 15px; }
+    &:nth-child(6) { padding-left: 15px; }
     // status
-    &:nth-child(6) { padding-left: 20px; }
+    &:nth-child(7) { padding-left: 20px; }
     // copilot
-    &:nth-child(7) { padding-left: 25px; }
+    &:nth-child(8) { padding-left: 25px; }
   }
 
   :global(.edit-milestone-row) {
     th,
     td {
       // description
-      &:nth-child(3) { padding-left: 10px; }
+      &:nth-child(4) { padding-left: 10px; }
       // end date
-      &:nth-child(5) {  padding-left: 10px; }
+      &:nth-child(6) {  padding-left: 10px; }
     }
   }
 
   @media screen and (max-width: 1024px - 1px) {
     th,
     td {
       // description
-      &:nth-child(3) { padding-left: 5px; }
+      &:nth-child(4) { padding-left: 5px; }
       // start date
-      &:nth-child(4) { padding-left: 10px; }
+      &:nth-child(5) { padding-left: 10px; }
       // end date
-      &:nth-child(5) { padding-left: 5px; }
+      &:nth-child(6) { padding-left: 5px; }
       // status
-      &:nth-child(6) { padding-left: 10px; }
+      &:nth-child(7) { padding-left: 10px; }
       // copilot
-      &:nth-child(7) { padding-left: 15px; }
+      &:nth-child(8) { padding-left: 15px; }
     }
 
     :global(.edit-milestone-row) {
       th,
       td {
         // description
-        &:nth-child(3) { padding-left: 5px; }
+        &:nth-child(4) { padding-left: 5px; }
         // end date
-        &:nth-child(5) {  padding-left: 5px; }
+        &:nth-child(6) {  padding-left: 5px; }
       }
     }
   }

src/config/constants.js

@@ -0,0 +1,50 @@
+import React from 'react'
+import PT from 'prop-types'
+import IconHelp from '../../../../../../assets/icons/help-me.svg'
+import './ConfirmMoveMilestoneDate.scss'
+
+
+class ConfirmMoveMilestoneDate extends React.Component {
+  constructor(props) {
+    super(props)
+
+    this.state = {
+      value: 0
+    }
+    this.onInputChange = this.onInputChange.bind(this)
+  }
+  onInputChange(e) {
+    this.setState({
+      value: e.target.value
+    })
+  }
+  render() {
+    const {
+      onClose
+    } = this.props
+    return (
+      <div styleName="confirm-delete-milestone">
+        <h3 styleName="title">
+          <IconHelp styleName="icon" />
+        Move Milestone Dates
+        </h3>
+        <p styleName="text">
+        Move selected milestone dates
+        </p>
+        <div styleName="input-row">
+          <input type="number" min={0} value={this.state.value} onChange={this.onInputChange}/> days
+        </div>
+        <div styleName="footer">
+          <button type="button" className="tc-btn tc-btn-primary tc-btn-sm" onClick={() => onClose(true, this.state.value)}>MOVE</button>
+          <button type="button" className="tc-btn tc-btn-warning tc-btn-sm" onClick={() => onClose()}>CANCEL</button>
+        </div>
+      </div>
+    )
+  }
+}
+
+ConfirmMoveMilestoneDate.propTypes = {
+  onClose: PT.func,
+}
+
+export default ConfirmMoveMilestoneDate