Skip to content

Commit 8cc67c0

Browse files
SleepyZenitsuSleepyZenitsu
committed
add default terms and refractor nda input
1 parent af8b59b commit 8cc67c0

File tree

5 files changed

+237
-34
lines changed

5 files changed

+237
-34
lines changed

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

Lines changed: 25 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,9 @@ const ChallengeView = ({
3737
assignedMemberDetails,
3838
enableEdit,
3939
onLaunchChallenge,
40-
onCloseTask }) => {
40+
onCloseTask,
41+
location }) => {
42+
const params = new URLSearchParams(location.search)
4143
const selectedType = _.find(metadata.challengeTypes, { id: challenge.typeId })
4244
const challengeTrack = _.find(metadata.challengeTracks, { id: challenge.trackId })
4345

@@ -148,7 +150,6 @@ const ChallengeView = ({
148150
<span><span className={styles.fieldTitle}>Challenge Name:</span> {challenge.name}</span>
149151
</div>
150152
</div>
151-
<NDAField challenge={challenge} readOnly />
152153
{isTask && <AssignedMemberField challenge={challenge} assignedMemberDetails={assignedMemberDetails} readOnly /> }
153154
<CopilotField challenge={{
154155
copilot
@@ -179,11 +180,26 @@ const ChallengeView = ({
179180
</label>
180181
</div>
181182
</div>
182-
{openAdvanceSettings && (<div className={cn(styles.row, styles.topRow)}>
183-
<div className={styles.col}>
184-
<span><span className={styles.fieldTitle}>Groups:</span> {groups}</span>
185-
</div>
186-
</div>)}
183+
{openAdvanceSettings && (
184+
<>
185+
<NDAField beta challenge={challenge} readOnly />
186+
{params.get('beta') === 'true' && (
187+
<div className={styles.row}>
188+
<div className={styles.col}>
189+
<span>
190+
<span className={styles.fieldTitle}>Terms:</span>
191+
{challenge.terms.map(term => term.id).join(', ')}
192+
</span>
193+
</div>
194+
</div>
195+
)}
196+
<div className={cn(styles.row, styles.topRow)}>
197+
<div className={styles.col}>
198+
<span><span className={styles.fieldTitle}>Groups:</span> {groups}</span>
199+
</div>
200+
</div>
201+
</>
202+
)}
187203
{
188204
<div className={styles.PhaseRow}>
189205
<PhaseInput
@@ -267,7 +283,8 @@ ChallengeView.propTypes = {
267283
assignedMemberDetails: PropTypes.shape(),
268284
enableEdit: PropTypes.bool,
269285
onLaunchChallenge: PropTypes.func,
270-
onCloseTask: PropTypes.func
286+
onCloseTask: PropTypes.func,
287+
location: PropTypes.object
271288
}
272289

273290
export default withRouter(ChallengeView)

‎src/components/ChallengeEditor/NDAField/NDAField.module.scss

Lines changed: 159 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -81,4 +81,163 @@
8181
border-color: $white;
8282
}
8383
}
84+
85+
.field {
86+
@include upto-sm {
87+
display: block;
88+
padding-bottom: 10px;
89+
}
90+
91+
label {
92+
@include roboto-bold();
93+
94+
font-size: 16px;
95+
line-height: 19px;
96+
font-weight: 500;
97+
color: $tc-gray-80;
98+
}
99+
100+
&.col1 {
101+
max-width: 185px;
102+
min-width: 185px;
103+
margin-right: 14px;
104+
margin-bottom: auto;
105+
margin-top: auto;
106+
padding-top: 10px;
107+
white-space: nowrap;
108+
display: flex;
109+
align-items: center;
110+
111+
span {
112+
color: $tc-red;
113+
}
114+
}
115+
116+
&.col2 {
117+
align-self: flex-end;
118+
width: 80%;
119+
margin-bottom: auto;
120+
margin-top: auto;
121+
display: flex;
122+
flex-direction: row;
123+
max-width: 600px;
124+
min-width: 600px;
125+
}
126+
}
127+
128+
.col1 {
129+
display: flex;
130+
flex-grow: 1;
131+
align-items: center;
132+
max-width: 0;
133+
min-width: 0;
134+
margin-right: 0;
135+
width: auto;
136+
margin-top: 0 !important;
137+
margin-bottom: 0 !important;
138+
padding-top: 0 !important;
139+
}
140+
141+
.col2 {
142+
width: auto;
143+
144+
.subGroup {
145+
width: 100%;
146+
display: flex;
147+
flex-direction: column;
148+
149+
.subRow {
150+
display: flex;
151+
align-items: center;
152+
margin-bottom: 18px;
153+
}
154+
155+
.subRow:last-of-type {
156+
margin-bottom: 0;
157+
}
158+
}
159+
}
160+
161+
.tcRadioButton {
162+
.tc-radioButton-label {
163+
@include roboto-light();
164+
165+
line-height: 17px;
166+
font-weight: 300;
167+
margin-left: 21px;
168+
user-select: none;
169+
cursor: pointer;
170+
width: 195px;
171+
font-size: 14px;
172+
color: #3d3d3d;
173+
}
174+
175+
height: 18px;
176+
width: 210px;
177+
margin: 0;
178+
padding: 0;
179+
vertical-align: bottom;
180+
position: relative;
181+
display: inline-block;
182+
183+
input[type=radio] {
184+
display: none;
185+
}
186+
187+
label {
188+
@include roboto-light();
189+
190+
line-height: 17px;
191+
font-weight: 300;
192+
cursor: pointer;
193+
position: absolute;
194+
display: inline-block;
195+
width: 16px;
196+
height: 16px;
197+
border-radius: 8px;
198+
top: 0;
199+
left: 0;
200+
border: none;
201+
box-shadow: none;
202+
background: $tc-gray-30;
203+
transition: all 0.15s ease-in-out;
204+
205+
&::after {
206+
opacity: 0;
207+
content: '';
208+
position: absolute;
209+
width: 8px;
210+
height: 8px;
211+
background: transparent;
212+
top: 4px;
213+
left: 4px;
214+
border: 4px solid $tc-blue-20;
215+
border-radius: 4px;
216+
transition: all 0.15s ease-in-out;
217+
}
218+
219+
&:hover::after {
220+
opacity: 0.3;
221+
}
222+
223+
div {
224+
margin-left: 24px;
225+
width: 300px;
226+
}
227+
}
228+
229+
input[type=radio]:checked ~ label {
230+
background: $tc-blue-20;
231+
}
232+
233+
input[type=radio]:checked + label::after {
234+
opacity: 1;
235+
border-color: $white;
236+
}
237+
}
238+
239+
&.error {
240+
color: $tc-red;
241+
margin-top: -25px;
242+
}
84243
}

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

Lines changed: 30 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,43 @@
11
import _ from 'lodash'
22
import React from 'react'
33
import PropTypes from 'prop-types'
4+
import cn from 'classnames'
45
import styles from './NDAField.module.scss'
56
import { DEFAULT_NDA_UUID } from '../../../config/constants'
67

78
const NDAField = ({ challenge, toggleNdaRequire, readOnly }) => {
89
const isRequiredNda = challenge.terms && _.some(challenge.terms, { id: DEFAULT_NDA_UUID })
10+
911
return (
1012
<div className={styles.row}>
11-
<div className={styles.tcCheckbox}>
12-
<input
13-
name='isRequiredNda'
14-
type='checkbox'
15-
id='isRequiredNda'
16-
checked={isRequiredNda}
17-
onChange={toggleNdaRequire}
18-
readOnly={readOnly}
19-
/>
20-
<label htmlFor='isRequiredNda' className={readOnly ? styles.readOnly : ''}>
21-
<div>NDA Required</div>
22-
<input type='hidden' />
23-
</label>
13+
<div className={cn(styles.field, styles.col1, styles.fieldTitle)}>NDA Required :</div>
14+
<div className={cn(styles.field, styles.col2)}>
15+
<div className={styles.tcRadioButton}>
16+
<input
17+
name='nda'
18+
type='radio'
19+
id='nda-yes'
20+
checked={isRequiredNda}
21+
onChange={!readOnly && toggleNdaRequire}
22+
/>
23+
<label className={styles['tc-RadioButton-label']} htmlFor='nda-yes'>
24+
<div>yes</div>
25+
<input type='hidden' />
26+
</label>
27+
</div>
28+
<div className={styles.tcRadioButton}>
29+
<input
30+
name='nda'
31+
type='radio'
32+
id='nda-no'
33+
checked={!isRequiredNda}
34+
onChange={!readOnly && toggleNdaRequire}
35+
/>
36+
<label className={styles['tc-RadioButton-label']} htmlFor='nda-no'>
37+
<div>No</div>
38+
<input type='hidden' />
39+
</label>
40+
</div>
2441
</div>
2542
</div>
2643
)

‎src/components/ChallengeEditor/Terms-Field/index.js

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,17 +4,16 @@ import Select from '../../Select'
44
import cn from 'classnames'
55
import styles from './Terms-Field.module.scss'
66

7-
const TermsField = ({ terms, challenge, onUpdateMultiSelect }) => {
8-
const mapOps = item => ({ label: item.title, value: item.id })
7+
const TermsField = ({ terms, projectTerms, challenge, onUpdateMultiSelect }) => {
8+
const mapOps = item => ({ label: item, value: item })
99

1010
const [currTerms, setCurrTerms] = React.useState([])
1111

1212
React.useEffect(() => {
13-
const challengeTerms = new Set(challenge.terms)
14-
const defaultValue = terms
15-
.filter(term => challengeTerms.has(term.id))
13+
const challengeTermsIds = challenge.terms.map(({ id }) => id)
14+
const allTerms = [...new Set([...projectTerms, ...challengeTermsIds])]
1615
.map(mapOps)
17-
setCurrTerms(defaultValue)
16+
setCurrTerms(allTerms)
1817
}, [])
1918

2019
return (
@@ -32,7 +31,7 @@ const TermsField = ({ terms, challenge, onUpdateMultiSelect }) => {
3231
value={currTerms}
3332
onChange={(value) => {
3433
onUpdateMultiSelect(value, 'terms')
35-
setCurrTerms(setCurrTerms(terms))
34+
setCurrTerms(value)
3635
}}
3736
/>
3837
</div>
@@ -47,7 +46,8 @@ TermsField.defaultProps = {
4746
TermsField.propTypes = {
4847
challenge: PropTypes.shape().isRequired,
4948
terms: PropTypes.arrayOf(PropTypes.shape()).isRequired,
50-
onUpdateMultiSelect: PropTypes.func.isRequired
49+
onUpdateMultiSelect: PropTypes.func.isRequired,
50+
projectTerms: PropTypes.array
5151
}
5252

5353
export default TermsField

‎src/components/ChallengeEditor/index.js

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -195,7 +195,8 @@ class ChallengeEditor extends Component {
195195
challengeData.copilot = copilot || copilotFromResources
196196
challengeData.reviewer = reviewer || reviewerFromResources
197197
const challengeDetail = { ...challengeData }
198-
const isOpenAdvanceSettings = challengeDetail.groups.length > 0
198+
const isRequiredNda = challengeDetail.terms && _.some(challengeDetail.terms, { id: DEFAULT_NDA_UUID })
199+
const isOpenAdvanceSettings = challengeDetail.groups.length > 0 || isRequiredNda
199200
setState({
200201
challenge: challengeDetail,
201202
assignedMemberDetails,
@@ -1116,6 +1117,8 @@ class ChallengeEditor extends Component {
11161117
}
11171118

11181119
render () {
1120+
const params = new URLSearchParams(this.props.location.search)
1121+
11191122
const {
11201123
isLaunch,
11211124
isConfirm,
@@ -1359,7 +1362,6 @@ class ChallengeEditor extends Component {
13591362
</div>
13601363
</div>
13611364
<ChallengeNameField challenge={challenge} onUpdateInput={this.onUpdateInput} />
1362-
<NDAField challenge={challenge} toggleNdaRequire={this.toggleNdaRequire} />
13631365
{isTask && (
13641366
<AssignedMemberField
13651367
challenge={challenge}
@@ -1392,8 +1394,15 @@ class ChallengeEditor extends Component {
13921394
</div>
13931395
{ isOpenAdvanceSettings && (
13941396
<React.Fragment>
1395-
{/* remove terms field and use default term */}
1396-
{false && (<TermsField terms={metadata.challengeTerms} challenge={challenge} onUpdateMultiSelect={this.onUpdateMultiSelect} />)}
1397+
<NDAField challenge={challenge} toggleNdaRequire={this.toggleNdaRequire} />
1398+
{params.get('beta') && (
1399+
<TermsField
1400+
terms={metadata.challengeTerms}
1401+
projectTerms={projectDetail.terms}
1402+
challenge={challenge}
1403+
onUpdateMultiSelect={this.onUpdateMultiSelect}
1404+
/>
1405+
)}
13971406
<GroupsField onUpdateMultiSelect={this.onUpdateMultiSelect} challenge={challenge} />
13981407
</React.Fragment>
13991408
)}
@@ -1526,7 +1535,8 @@ ChallengeEditor.propTypes = {
15261535
replaceResourceInRole: PropTypes.func,
15271536
partiallyUpdateChallengeDetails: PropTypes.func.isRequired,
15281537
deleteChallenge: PropTypes.func.isRequired,
1529-
loggedInUser: PropTypes.shape().isRequired
1538+
loggedInUser: PropTypes.shape().isRequired,
1539+
location: PropTypes.object
15301540
}
15311541

15321542
export default withRouter(ChallengeEditor)

0 commit comments

Comments
 (0)