Skip to content

Commit adbd5d4

Browse files
youtionyoution
committed
fix: issue #1174 add CancelDropDown
1 parent 7402fb4 commit adbd5d4

File tree

7 files changed

+238
-2
lines changed

7 files changed

+238
-2
lines changed

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,7 @@
6363
"prop-types": "^15.6.2",
6464
"qs": "^6.7.0",
6565
"query-string": "^6.12.1",
66+
"rc-dropdown": "^3.2.0",
6667
"rc-time-picker": "^3.6.4",
6768
"react": "^16.7.0",
6869
"react-app-polyfill": "^0.2.0",

‎src/components/ChallengeEditor/Cancel-Dropdown/Cancel-DropDown.module.scss

Lines changed: 137 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,137 @@
1+
@import "../../../styles/includes";
2+
3+
.menus {
4+
outline: none;
5+
position: relative;
6+
list-style-type: none;
7+
padding: 0;
8+
margin: 2px 0 0 0;
9+
text-align: left;
10+
background-color: #fff;
11+
border-radius: 3px;
12+
box-shadow: 0 1px 5px #ccc;
13+
background-clip: padding-box;
14+
border: 1px solid #ccc;
15+
16+
.menu {
17+
height: 30px;
18+
line-height: 30px;
19+
padding: 0 10px;
20+
&:hover {
21+
background-color: #d5d5d5;
22+
}
23+
}
24+
}
25+
26+
.modalContainer {
27+
padding: 0;
28+
position: fixed;
29+
overflow: auto;
30+
z-index: 10000;
31+
top: 0;
32+
right: 0;
33+
bottom: 0;
34+
left: 0;
35+
box-sizing: border-box;
36+
width: auto;
37+
max-width: none;
38+
transform: none;
39+
background: transparent;
40+
color: $text-color;
41+
opacity: 1;
42+
display: flex;
43+
justify-content: center;
44+
align-items: center;
45+
46+
.contentContainer {
47+
box-sizing: border-box;
48+
background: red;
49+
opacity: 1;
50+
position: relative;
51+
display: flex;
52+
flex-direction: column;
53+
justify-content: flex-start;
54+
align-items: center;
55+
border-radius: 6px;
56+
margin: 0 auto;
57+
width: 600px;
58+
padding: 30px;
59+
60+
.content {
61+
padding: 30px;
62+
width: 100%;
63+
height: 100%;
64+
}
65+
66+
.title {
67+
@include roboto-bold();
68+
69+
font-size: 30px;
70+
line-height: 36px;
71+
margin-bottom: 30px;
72+
margin-top: 0;
73+
74+
}
75+
76+
span {
77+
@include roboto;
78+
79+
font-size: 22px;
80+
font-weight: 400;
81+
line-height: 26px;
82+
}
83+
84+
&.confirm {
85+
width: 999px;
86+
87+
.buttonGroup {
88+
display: flex;
89+
justify-content: space-between;
90+
margin-top: 30px;
91+
92+
.buttonSizeA {
93+
width: 193px;
94+
height: 40px;
95+
margin-right: 33px;
96+
97+
span {
98+
font-size: 18px;
99+
font-weight: 500;
100+
}
101+
}
102+
103+
.buttonSizeB{
104+
width: 160px;
105+
height: 40px;
106+
107+
span {
108+
font-size: 18px;
109+
font-weight: 500;
110+
line-height: 22px;
111+
}
112+
}
113+
}
114+
}
115+
116+
.buttonGroup {
117+
display: flex;
118+
justify-content: space-between;
119+
margin-top: 30px;
120+
121+
.button {
122+
width: 135px;
123+
height: 40px;
124+
margin-right: 66px;
125+
126+
span {
127+
font-size: 18px;
128+
font-weight: 500;
129+
}
130+
}
131+
132+
.button:last-child {
133+
margin-right: 0;
134+
}
135+
}
136+
}
137+
}

‎src/components/ChallengeEditor/Cancel-Dropdown/index.js

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
import React, { useState } from 'react'
2+
import PropTypes from 'prop-types'
3+
import { withRouter } from 'react-router-dom'
4+
import Dropdown from 'rc-dropdown'
5+
import styles from './Cancel-DropDown.module.scss'
6+
import { CANCEL_REASONS } from '../../../config/constants'
7+
import cn from 'classnames'
8+
import 'rc-dropdown/assets/index.css'
9+
import { PrimaryButton } from '../../Buttons'
10+
import ConfirmationModal from '../../Modal/ConfirmationModal'
11+
import { patchChallenge } from '../../../services/challenges'
12+
import _ from 'lodash'
13+
14+
const theme = {
15+
container: styles.modalContainer
16+
}
17+
const CancelDropDown = ({ challenge, history }) => {
18+
const [cancelReason, setCancelReason] = useState('')
19+
const [showModal, setShowModal] = useState(false)
20+
21+
const onSelect = v => {
22+
setCancelReason(v)
23+
setShowModal(true)
24+
}
25+
const onConfirm = async () => {
26+
await patchChallenge(challenge.id, {
27+
status: cancelReason
28+
})
29+
30+
history.push(`/projects/${challenge.projectId}/challenges`)
31+
}
32+
33+
const menu = (
34+
<div className={cn(styles['menus'])}>
35+
{_.map(CANCEL_REASONS, r => {
36+
return (
37+
<div
38+
className={styles.menu}
39+
onClick={() => {
40+
onSelect(r)
41+
}}
42+
>
43+
{r}
44+
</div>
45+
)
46+
})}
47+
</div>
48+
)
49+
50+
return (
51+
<>
52+
<Dropdown trigger={['click']} overlay={menu} animation='slide-up'>
53+
<PrimaryButton text={'Cancel'} type={'info'} />
54+
</Dropdown>
55+
{showModal && (
56+
<ConfirmationModal
57+
// title='Reminder'
58+
message={'Do you want to cancel the challenge ?'}
59+
theme={theme}
60+
cancelText='Cancel'
61+
confirmText='Continue'
62+
onCancel={() => {
63+
setShowModal(false)
64+
}}
65+
onConfirm={onConfirm}
66+
/>
67+
)}
68+
</>
69+
)
70+
}
71+
72+
CancelDropDown.defaultProps = {}
73+
74+
CancelDropDown.propTypes = {
75+
challenge: PropTypes.shape().isRequired,
76+
history: PropTypes.shape()
77+
}
78+
79+
export default withRouter(CancelDropDown)

‎src/components/ChallengeEditor/ChallengeViewTabs/index.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import Submissions from '../Submissions'
1515
import { getResourceRoleByName } from '../../../util/tc'
1616
import { MESSAGE } from '../../../config/constants'
1717
import Tooltip from '../../Tooltip'
18+
import CancelDropDown from '../Cancel-Dropdown'
1819
import 'react-tabs/style/react-tabs.css'
1920
import styles from './ChallengeViewTabs.module.scss'
2021

@@ -98,6 +99,7 @@ const ChallengeViewTabs = ({
9899
styles.actionButtonsRight
99100
)}
100101
>
102+
{(challenge.status === 'Draft' || challenge.status === 'New') && <CancelDropDown challenge={challenge} />}
101103
{challenge.status === 'Draft' && (
102104
<div className={styles.button}>
103105
{challenge.legacyId || isTask ? (

‎src/components/ChallengeEditor/index.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,7 @@ import PhaseInput from '../PhaseInput'
5050
import LegacyLinks from '../LegacyLinks'
5151
import AssignedMemberField from './AssignedMember-Field'
5252
import Tooltip from '../Tooltip'
53+
import CancelDropDown from './Cancel-Dropdown'
5354
import UseSchedulingAPIField from './UseSchedulingAPIField'
5455
import { getResourceRoleByName } from '../../util/tc'
5556
import { isBetaMode } from '../../util/cookie'
@@ -1406,6 +1407,9 @@ class ChallengeEditor extends Component {
14061407
)}
14071408
</div>
14081409
)}
1410+
<div className={styles.button}>
1411+
<CancelDropDown challenge={challenge} />
1412+
</div>
14091413
</div>}
14101414
{!isLoading && isActive && <div className={styles.buttonContainer}>
14111415
<div className={styles.button}>

‎src/config/constants.js

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -233,3 +233,16 @@ export const MESSAGE = {
233233
INTERNAL_REVIEW_DISABLED: 'Internal review is NOT available for QA challenges',
234234
MARK_COMPLETE: 'This will close the task and generate a payment for the assignee and copilot.'
235235
}
236+
237+
/**
238+
* Challenge cancel reasons
239+
*/
240+
export const CANCEL_REASONS = [
241+
'Cancelled - Failed Review',
242+
'Cancelled - Failed Screening',
243+
'Cancelled - Zero Submissions',
244+
'Cancelled - Winner Unresponsive',
245+
'Cancelled - Client Request',
246+
'Cancelled - Requirements Infeasible',
247+
'Cancelled - Zero Registrations'
248+
]

‎src/containers/ChallengeEditor/index.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -112,14 +112,14 @@ class ChallengeEditor extends Component {
112112

113113
componentWillReceiveProps (nextProps) {
114114
const { match } = this.props
115-
const { match: newMatch, loadChallengeDetails, loadResources } = nextProps
115+
const { match: newMatch, loadChallengeDetails, loadResources, loadSubmissions } = nextProps
116116
const projectId = _.get(newMatch.params, 'projectId', null)
117117
const challengeId = _.get(newMatch.params, 'challengeId', null)
118118
if (
119119
_.get(match.params, 'projectId', null) !== projectId ||
120120
_.get(match.params, 'challengeId', null) !== challengeId
121121
) {
122-
this.fetchChallengeDetails(newMatch, loadChallengeDetails, loadResources)
122+
this.fetchChallengeDetails(newMatch, loadChallengeDetails, loadResources, loadSubmissions)
123123
} else {
124124
this.setState({ challengeDetails: nextProps.challengeDetails })
125125
}

0 commit comments

Comments
 (0)