Skip to content

Fix issue #4422, #4424 #4425

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
elkhawajah merged 3 commits into from
Jul 25, 2021
Merged

Fix issue #4422, #4424 #4425

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
379f24c
Delete CreateSimpleplan.scss
nqviet Jul 24, 2021
744c1ea
fix issue 4422, 4424
nqviet Jul 24, 2021
cb1d758
fix alert message typo
nqviet Jul 24, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 0 additions & 41 deletions src/projects/detail/components/SimplePlan/CreateSimplePlan/CreateSimpleplan.scss
View file
Open in desktop

This file was deleted.

25 changes: 15 additions & 10 deletions src/projects/detail/components/SimplePlan/ManageMilestones/ManageMilestones.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
}
Expand Down Expand Up @@ -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) => (
Expand Down
69 changes: 67 additions & 2 deletions src/projects/detail/components/SimplePlan/ManageMilestones/ManageMilestones.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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; }
}
}
}

Expand Down
4 changes: 2 additions & 2 deletions ...rojects/detail/components/SimplePlan/components/MilestoneHeaderRow/MilestoneHeaderRow.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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>
)
}
Expand Down
76 changes: 53 additions & 23 deletions src/projects/detail/components/SimplePlan/components/MilestoneRow/MilestoneRow.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand All @@ -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'

Expand Down Expand Up @@ -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}`}
Expand All @@ -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
}
}}
Expand All @@ -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">
Expand Down Expand Up @@ -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}`}
Expand Down Expand Up @@ -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()
Expand Down Expand Up @@ -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"
Expand All @@ -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>
)
}
Expand Down
Loading