Skip to content

fix: issue about pagination and gap line #4446

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 2 commits into from
Aug 5, 2021
Merged

fix: issue about pagination and gap line #4446

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
56ae5f1
fix: issue about pagination and gap line
yoution Aug 5, 2021
88dbdb5
fix: issue about no challenges
yoution Aug 5, 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
23 changes: 12 additions & 11 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 @@ -118,12 +118,11 @@ class ManageMilestones extends React.Component {

let challengeIds = _.map(milestone.products, `details.${CHALLENGE_ID_MAPPING}`).slice(0, 6)
challengeIds = _.filter(challengeIds)
if (!challengeIds.length) {
return
}

if (isExpand) {
onGetChallenges(milestone.id, challengeIds)
if (challengeIds.length) {
onGetChallenges(milestone.id, challengeIds)
}
expandList.push(milestone.id)
this.setState({expandList})
} else {
Expand Down Expand Up @@ -192,26 +191,27 @@ class ManageMilestones extends React.Component {
// no challenges
if (!challengeIds.length) {
return [
<MilestoneChallengeHeader isUpdatable={isUpdatable}/>,
<MilestoneChallengeRow isEmpty isUpdatable={isUpdatable}/>
<MilestoneChallengeHeader key="header" isUpdatable={isUpdatable}/>,
<MilestoneChallengeRow isEmpty key="row" isUpdatable={isUpdatable}/>
]
}

// loading challenges
if (milestone.isLoadingChallenges) {
return [
<MilestoneChallengeHeader isUpdatable={isUpdatable}/>,
<MilestoneChallengeRow isLoading isUpdatable={isUpdatable}/>
<MilestoneChallengeHeader key="header" isUpdatable={isUpdatable}/>,
<MilestoneChallengeRow isLoading key="row" isUpdatable={isUpdatable}/>,
<MilestoneChallengeFooter isLoading key="footer" onLoadChallengesByPage={this.onLoadChallengesByPage} isUpdatable={isUpdatable}/>
]
}

const rows = _.map(milestone.challenges, (c) => {
return <MilestoneChallengeRow challenge={c} isUpdatable={isUpdatable}/>
return <MilestoneChallengeRow key={c.id} challenge={c} isUpdatable={isUpdatable}/>
})
return [
<MilestoneChallengeHeader isUpdatable={isUpdatable}/>,
<MilestoneChallengeHeader key="header" isUpdatable={isUpdatable}/>,
...rows,
<MilestoneChallengeFooter milestone={milestone} onLoadChallengesByPage={this.onLoadChallengesByPage} isUpdatable={isUpdatable}/>
<MilestoneChallengeFooter milestone={milestone} key="footer" onLoadChallengesByPage={this.onLoadChallengesByPage} isUpdatable={isUpdatable}/>
]
}
getSelectCount() {
Expand Down Expand Up @@ -262,6 +262,7 @@ class ManageMilestones extends React.Component {
{canEdit ? <div styleName="unselect-bottom" onClick={this.onUnselectAll}>
<IconUnselect /> {this.getSelectCount()} PROJECTS SELECTED
</div>: null }
{canEdit ? <div styleName="line"/>: null}
{ canEdit ? <div styleName="delete-button">
<MilestoneDeleteButton onDelete={this.onDeleteAll}/>
</div>: null }
Expand Down
8 changes: 7 additions & 1 deletion 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 @@ -17,14 +17,20 @@
font-size: 12px;
padding: 0 5px;
cursor: pointer;

svg {
margin-right: 4px;
height: 13px;
width: 13px;
}
margin-right: 20px;
}
.line {
width: 1px;
height: 20px;
display: inline-block;
border: 1px solid #C4C4C4;
margin-right: 10px;
}
.delete-button {
cursor: pointer;
margin: 0 10px;
Expand Down
14 changes: 10 additions & 4 deletions ...il/components/SimplePlan/components/MilestoneChallengeFooter/MilestoneChallengeFooter.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ class MilestoneChallengeFooter extends React.Component {
if (this.state.curPage === page) {
return
}
this.state.curPage = page
this.setState({curPage: page})
onLoadChallengesByPage(page, milestone)
}
renderPagination() {
Expand Down Expand Up @@ -60,10 +60,15 @@ class MilestoneChallengeFooter extends React.Component {
render() {
const {
isUpdatable,
milestone
milestone,
isLoading,
} = this.props
const url = `${WORK_MANAGER_APP}/${milestone.projectId}/challenges`

if (isLoading) {
return null
}

const url = `${WORK_MANAGER_APP}/${milestone.projectId}/challenges`

return (
<tr styleName="challenge-table-row-wrap">
Expand All @@ -88,7 +93,8 @@ class MilestoneChallengeFooter extends React.Component {
MilestoneChallengeFooter.propTypes = {
onLoadChallengesByPage: PT.func,
milestone: PT.shape(),
isUpdatable: PT.bool
isUpdatable: PT.bool,
isLoading: PT.bool
}

export default MilestoneChallengeFooter
1 change: 1 addition & 0 deletions .../detail/components/SimplePlan/components/MilestoneChallengeRow/MilestoneChallengeRow.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@
&.Registration { background-color: $tc-orange-100; }
&.Appeals { background-color: $tc-orange-100; }
&.AppealsResponse { background-color: $tc-orange-100; }
&.Post-Mortem { background-color: $tc-orange-100; }
&.Draft { background-color: $tc-gray-20; }
&.Stalled { background-color: $tc-gray-20; }
&.Completed { background-color: $tc-green-100; }
Expand Down