-
{budget > 0 ? `$${spent} of $${budget}` : `$${budget}`}
-
-
0 ? spent/budget : 0})`}}/>
-
- )
-}
-
-
-MilestoneBudget.propTypes = {
- spent: PT.number,
- budget: PT.number,
-}
-
-export default MilestoneBudget
diff --git a/src/projects/detail/components/SimplePlan/components/MilestoneBudget/MilestoneBudget.scss b/src/projects/detail/components/SimplePlan/components/MilestoneBudget/MilestoneBudget.scss
deleted file mode 100644
index 308256d79..000000000
--- a/src/projects/detail/components/SimplePlan/components/MilestoneBudget/MilestoneBudget.scss
+++ /dev/null
@@ -1,35 +0,0 @@
-@import '~styles/variables';
-
-.progress-bar {
- position: relative;
- padding-bottom: 6px;
-
- .text {
- @include roboto;
- font-size: 9px;
- line-height: 12px;
- color: $tc-gray-20;
- }
-
- .background,
- .progress {
- position: absolute;
- left: 0;
- bottom: 0;
- width: 100%;
- border-width: 3px;
- border-style: solid;
- border-radius: 6px;
- }
-
- .background {
- background-color: $tc-gray-20;
- border-color: $tc-gray-20;
- }
-
- .progress {
- background-color: $tc-green-110;
- border-color: $tc-green-110;
- transform-origin: left;
- }
-}
diff --git a/src/projects/detail/components/SimplePlan/components/MilestoneBudget/index.js b/src/projects/detail/components/SimplePlan/components/MilestoneBudget/index.js
deleted file mode 100644
index d76b13aa7..000000000
--- a/src/projects/detail/components/SimplePlan/components/MilestoneBudget/index.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import MilestoneBudget from './MilestoneBudget'
-export default MilestoneBudget
diff --git a/src/projects/detail/components/SimplePlan/components/MilestoneHeaderRow/MilestoneHeaderRow.jsx b/src/projects/detail/components/SimplePlan/components/MilestoneHeaderRow/MilestoneHeaderRow.jsx
index 813f4c795..ddbded24f 100644
--- a/src/projects/detail/components/SimplePlan/components/MilestoneHeaderRow/MilestoneHeaderRow.jsx
+++ b/src/projects/detail/components/SimplePlan/components/MilestoneHeaderRow/MilestoneHeaderRow.jsx
@@ -45,7 +45,6 @@ function MilestoneHeaderRow ({ milestones, onChangeMilestones, isUpdatable }) {
START DATE |
END DATE |
STATUS |
-
BUDGET |
COPILOTS |
{isUpdatable && (
ACTION | )}
diff --git a/src/projects/detail/components/SimplePlan/components/MilestoneRow/MilestoneRow.jsx b/src/projects/detail/components/SimplePlan/components/MilestoneRow/MilestoneRow.jsx
index 1f64e409f..abccfb59b 100644
--- a/src/projects/detail/components/SimplePlan/components/MilestoneRow/MilestoneRow.jsx
+++ b/src/projects/detail/components/SimplePlan/components/MilestoneRow/MilestoneRow.jsx
@@ -10,7 +10,6 @@ import { isValidStartEndDates } from '../../../../../../helpers/utils'
import FormsySelect from '../../../../../../components/Select/FormsySelect'
import MilestoneCopilots from '../MilestoneCopilots'
import MilestoneStatus from '../MilestoneStatus'
-import MilestoneBudget from '../MilestoneBudget'
import MilestoneDeleteButton from '../MilestoneDeleteButton'
import { PHASE_STATUS_OPTIONS } from '../../../../../../config/constants'
import IconCheck from '../../../../../../assets/icons/icon-check-thin.svg'
@@ -44,7 +43,6 @@ function MilestoneRow({
let milestoneRef
let startDateRef
let endDateRef
- let budgetRef
return edit ? (
@@ -187,33 +185,6 @@ function MilestoneRow({
}}
/>
- |
- $
- {
- if (!milestone.origin) {
- milestone.origin = {...milestone}
- }
- onChange({...milestone, budget: value })
- }}
- wrapperClass={styles.textInput}
- innerRef={ref => budgetRef = ref}
- />
- |
|
-
-
- |
|
diff --git a/src/projects/detail/components/SimplePlan/components/MilestoneRow/MilestoneRow.scss b/src/projects/detail/components/SimplePlan/components/MilestoneRow/MilestoneRow.scss
index ce1e1f152..de75484a0 100644
--- a/src/projects/detail/components/SimplePlan/components/MilestoneRow/MilestoneRow.scss
+++ b/src/projects/detail/components/SimplePlan/components/MilestoneRow/MilestoneRow.scss
@@ -30,12 +30,12 @@
white-space: nowrap;
}
- .budget {
- padding-right: 10px;
+ .copilots {
+ &:not(:last-child) {
+ padding-right: 10px;
+ }
}
- .copilots {}
-
.action {}
}
@@ -141,24 +141,6 @@
}
}
-.budget {
- position: relative;
-
- .prefix-icon {
- position: absolute;
- left: 0;
- top: calc(50% - 6px);
- z-index: 1;
- }
-
- :global {
- .tc-file-field__inputs {
- padding-right: 0;
- padding-left: 20px;
- }
- }
-}
-
.action {
.inline-menu {
display: flex;
diff --git a/src/projects/detail/containers/DashboardContainer.jsx b/src/projects/detail/containers/DashboardContainer.jsx
index bf943f674..2ac46759d 100644
--- a/src/projects/detail/containers/DashboardContainer.jsx
+++ b/src/projects/detail/containers/DashboardContainer.jsx
@@ -87,6 +87,9 @@ class DashboardContainer extends React.Component {
this.onNotificationRead = this.onNotificationRead.bind(this)
this.toggleDrawer = this.toggleDrawer.bind(this)
this.onFormSubmit = this.onFormSubmit.bind(this)
+ this.onChangeMilestones = this.onChangeMilestones.bind(this)
+ this.onSaveMilestone = this.onSaveMilestone.bind(this)
+ this.onRemoveMilestone = this.onRemoveMilestone.bind(this)
}
onNotificationRead(notification) {
@@ -137,6 +140,148 @@ class DashboardContainer extends React.Component {
}
}
+ onChangeMilestones(milestones) {
+ this.setState({createGameplanPhases: milestones})
+ }
+
+ onSaveMilestone(id) {
+ const { project, createPhaseWithoutTimeline, updatePhase } = this.props
+ const { createGameplanPhases } = this.state
+ const index = createGameplanPhases.findIndex(phase => phase.id === id)
+ const phase = createGameplanPhases[index]
+
+ /*
+ * @return {Promise} The updated phase members
+ */
+ const updatePhaseMembers = (projectId, phaseId) => {
+ const phaseMembers = _.get(phase, 'members', [])
+ const oldPhaseMembers = _.get(phase, 'origin.members', [])
+ if (phaseMembers.length !== oldPhaseMembers.length ||
+ _.differenceBy(phaseMembers, oldPhaseMembers, member => member.userId).length !== 0) {
+ return this.props.updatePhaseMembers(
+ projectId,
+ phaseId,
+ phaseMembers.map(member => member.userId)
+ ).then(() => phaseMembers) // ignore the result from backend
+ }
+
+ return Promise.resolve([])
+ }
+
+ if (`${phase.id}`.startsWith('new-milestone')) {
+ const productTemplate = {
+ name: phase.name,
+ id: PHASE_PRODUCT_TEMPLATE_ID,
+ }
+
+ if (phase.description && phase.description.trim()) {
+ productTemplate.description = phase.description.trim()
+ }
+
+ const projectId = project.id
+ let phaseId
+ createPhaseWithoutTimeline(
+ project,
+ productTemplate,
+ phase.status,
+ moment.utc(phase.startDate),
+ moment.utc(phase.endDate)
+ ).then(({ action }) => {
+ phaseId = action.payload.phase.id
+ // reload phase
+ const updatedCreateGameplanPhases = [...this.state.createGameplanPhases]
+ updatedCreateGameplanPhases.splice(index, 1, {
+ ...action.payload.phase,
+ selected: phase.selected,
+ })
+ this.setState({ createGameplanPhases: updatedCreateGameplanPhases }, () => {
+ updatePhaseMembers(projectId, phaseId)
+ .then((members) => {
+ // reload members
+ const updatedPhases = [...this.state.createGameplanPhases]
+ updatedPhases.splice(index, 1, {
+ ...updatedPhases[index],
+ members
+ })
+ this.setState({ createGameplanPhases: updatedPhases })
+ })
+ })
+
+ })
+ } else {
+ const updateParam = {
+ name: phase.name,
+ startDate: moment.utc(phase.startDate),
+ endDate: moment.utc(phase.endDate),
+ status: phase.status,
+ }
+
+ if (phase.description && phase.description.trim()) {
+ updateParam.description = phase.description.trim()
+ }
+
+ Promise.all([
+ updatePhase(
+ phase.projectId,
+ phase.id,
+ updateParam
+ ),
+ updatePhaseMembers(phase.projectId, phase.id)
+ ]).then(([{ action }, members]) => {
+ const updatedCreateGameplanPhases = [...this.state.createGameplanPhases]
+ const idx = updatedCreateGameplanPhases.findIndex(phase => phase.id === action.payload.id)
+
+ // reload phase
+ updatedCreateGameplanPhases.splice(idx, 1, {
+ ...action.payload,
+ edit: this.state.createGameplanPhases[idx].edit,
+ selected: this.state.createGameplanPhases[idx].selected,
+ members
+ })
+ this.setState({ createGameplanPhases: updatedCreateGameplanPhases })
+ })
+
+ // toggle edit
+ const updatedCreateGameplanPhases = [...this.state.createGameplanPhases]
+ updatedCreateGameplanPhases.splice(index, 1, {
+ ...phase,
+ edit: false,
+ selected: phase.selected
+ })
+ this.setState({ createGameplanPhases: updatedCreateGameplanPhases })
+ }
+ }
+
+ onRemoveMilestone(id) {
+ const { phases } = this.props
+ const { createGameplanPhases } = this.state
+ let index
+ let projectId
+
+ if (createGameplanPhases) {
+ index = createGameplanPhases.findIndex(phase => phase.id === id)
+ projectId = createGameplanPhases[index].projectId
+ } else {
+ index = phases.findIndex(phase => phase.id === id)
+ projectId = phases[index].projectId
+ }
+
+ this.props.deleteProjectPhase(
+ projectId,
+ id
+ ).then(() => {
+ if (!this.state.createGameplanPhases) {
+ return
+ }
+
+ // remove phase
+ const index = this.state.createGameplanPhases.findIndex(phase => phase.id === id)
+ const newGameplanPhases = [...this.state.createGameplanPhases]
+ newGameplanPhases.splice(index, 1)
+ this.setState({createGameplanPhases: newGameplanPhases})
+ })
+ }
+
render() {
const {
@@ -330,124 +475,9 @@ class DashboardContainer extends React.Component {
project={project}
phases={phases}
milestones={this.state.createGameplanPhases || visiblePhases || []}
- onChangeMilestones={(milestones) => {
- this.setState({createGameplanPhases: milestones})
- }}
- onSaveMilestone={(id) => {
- const { createGameplanPhases } = this.state
- const index = createGameplanPhases.findIndex(phase => phase.id === id)
- const phase = createGameplanPhases[index]
-
- const updatePhaseMembers = (projectId, phaseId) => {
- const phaseMembers = _.get(phase, 'members', [])
- const oldPhaseMembers = _.get(phase, 'origin.members', [])
- if (phaseMembers.length !== oldPhaseMembers.length ||
- _.differenceBy(phaseMembers, oldPhaseMembers, member => member.userId).length !== 0) {
- this.props.updatePhaseMembers(
- projectId,
- phaseId,
- phaseMembers.map(member => member.userId)
- )
- }
- }
-
- if (`${phase.id}`.startsWith('new-milestone')) {
- const productTemplate = {
- name: phase.name,
- id: PHASE_PRODUCT_TEMPLATE_ID,
- }
-
- if (phase.description && phase.description.trim()) {
- productTemplate.description = phase.description.trim()
- }
-
- const projectId = project.id
- let phaseId
- this.props.createPhaseWithoutTimeline(
- project,
- productTemplate,
- phase.status,
- moment.utc(phase.startDate),
- moment.utc(phase.endDate),
- phase.budget
- ).then(({ action }) => {
- phaseId = action.payload.phase.id
- // reload phase
- const updatedCreateGameplanPhases = [...createGameplanPhases]
- updatedCreateGameplanPhases.splice(index, 1, {
- ...action.payload.phase,
- selected: phase.selected
- })
- this.setState({ createGameplanPhases: updatedCreateGameplanPhases })
- }).then(() => updatePhaseMembers(projectId, phaseId))
- } else {
- const updateParam = {
- name: phase.name,
- startDate: moment.utc(phase.startDate),
- endDate: moment.utc(phase.endDate),
- status: phase.status,
- budget: phase.budget,
- }
-
- if (phase.description && phase.description.trim()) {
- updateParam.description = phase.description.trim()
- }
-
- this.props.updatePhase(
- phase.projectId,
- phase.id,
- updateParam
- ).then(({ action }) => {
- const updatedCreateGameplanPhases = [...this.state.createGameplanPhases]
- const idx = updatedCreateGameplanPhases.findIndex(phase => phase.id === action.payload.id)
-
- // reload phase
- updatedCreateGameplanPhases.splice(idx, 1, {
- ...action.payload,
- edit: this.state.createGameplanPhases[idx].edit,
- selected: this.state.createGameplanPhases[idx].selected,
- })
- this.setState({ createGameplanPhases: updatedCreateGameplanPhases })
- }).then(() => updatePhaseMembers(phase.projectId, phase.id))
-
- // toggle edit
- const updatedCreateGameplanPhases = [...this.state.createGameplanPhases]
- updatedCreateGameplanPhases.splice(index, 1, {
- ...phase,
- edit: false,
- selected: phase.selected
- })
- this.setState({ createGameplanPhases: updatedCreateGameplanPhases })
- }
- }}
- onRemoveMilestone={(id) => {
- const { createGameplanPhases } = this.state
- let index
- let projectId
-
- if (createGameplanPhases) {
- index = createGameplanPhases.findIndex(phase => phase.id === id)
- projectId = createGameplanPhases[index].projectId
- } else {
- index = phases.findIndex(phase => phase.id === id)
- projectId = phases[index].projectId
- }
-
- this.props.deleteProjectPhase(
- projectId,
- id
- ).then(() => {
- if (!this.state.createGameplanPhases) {
- return
- }
-
- // remove phase
- const index = this.state.createGameplanPhases.findIndex(phase => phase.id === id)
- const newGameplanPhases = [...this.state.createGameplanPhases]
- newGameplanPhases.splice(index, 1)
- this.setState({createGameplanPhases: newGameplanPhases})
- })
- }}
+ onChangeMilestones={this.onChangeMilestones}
+ onSaveMilestone={this.onSaveMilestone}
+ onRemoveMilestone={this.onRemoveMilestone}
/>
)
})()}