Skip to content

Add Forum option for Task type #1237

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
merged 4 commits into from
Oct 6, 2021
Merged

Add Forum option for Task type #1237

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
b23b116
Add Forum option for Task type
dedywahyudi Sep 21, 2021
c7a0fef
fixes based on feedback
dedywahyudi Sep 23, 2021
da5aa3b
Deployable feature branch
Sep 24, 2021
7a1609d
change to useTasks
dedywahyudi Sep 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
2 changes: 1 addition & 1 deletion config/constants/development.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ module.exports = {
QA_TRACK_ID: '36e6a8d0-7e1e-4608-a673-64279d99c115',
CHALLENGE_TYPE_ID: '927abff4-7af9-4145-8ba1-577c16e64e2e',
SEGMENT_API_KEY: 'QBtLgV8vCiuRX1lDikbMjcoe9aCHkF6n',
CREATE_FORUM_TYPE_IDS: ['927abff4-7af9-4145-8ba1-577c16e64e2e', 'dc876fa4-ef2d-4eee-b701-b555fcc6544c'],
CREATE_FORUM_TYPE_IDS: ['927abff4-7af9-4145-8ba1-577c16e64e2e', 'dc876fa4-ef2d-4eee-b701-b555fcc6544c', 'ecd58c69-238f-43a4-a4bb-d172719b9f31'],
FILE_PICKER_API_KEY: process.env.FILE_PICKER_API_KEY,
FILE_PICKER_CONTAINER_NAME: 'tc-challenge-v5-dev',
FILE_PICKER_REGION: 'us-east-1',
Expand Down
2 changes: 1 addition & 1 deletion config/constants/production.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ module.exports = {
QA_TRACK_ID: '36e6a8d0-7e1e-4608-a673-64279d99c115',
CHALLENGE_TYPE_ID: '927abff4-7af9-4145-8ba1-577c16e64e2e',
SEGMENT_API_KEY: 'QSQAW5BWmZfLoKFNRgNKaqHvLDLJoGqF',
CREATE_FORUM_TYPE_IDS: ['927abff4-7af9-4145-8ba1-577c16e64e2e', 'dc876fa4-ef2d-4eee-b701-b555fcc6544c'],
CREATE_FORUM_TYPE_IDS: ['927abff4-7af9-4145-8ba1-577c16e64e2e', 'dc876fa4-ef2d-4eee-b701-b555fcc6544c', 'ecd58c69-238f-43a4-a4bb-d172719b9f31'],
FILE_PICKER_API_KEY: process.env.FILE_PICKER_API_KEY,
FILE_PICKER_CONTAINER_NAME: 'tc-challenge-v5-prod',
FILE_PICKER_REGION: 'us-east-1',
Expand Down
25 changes: 14 additions & 11 deletions src/components/ChallengeEditor/ChallengeViewTabs/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import _ from 'lodash'
import ChallengeViewComponent from '../ChallengeView'
import { PrimaryButton } from '../../Buttons'
import LegacyLinks from '../../LegacyLinks'
import ForumLink from '../../ForumLink'
import Registrants from '../Registrants'
import Submissions from '../Submissions'
import { getResourceRoleByName } from '../../../util/tc'
Expand Down Expand Up @@ -85,17 +86,19 @@ const ChallengeViewTabs = ({
<div className={styles.topContainer}>
<div className={styles.leftContainer}>
<div className={styles.title}>{challenge.name}</div>
{!isTask && (
<div
className={cn(
styles.actionButtons,
styles.button,
styles.actionButtonsLeft
)}
>
<LegacyLinks challenge={challenge} challengeView />
</div>
)}

<div
className={cn(
styles.actionButtons,
styles.button,
styles.actionButtonsLeft
)}
>
{ isTask ? (<ForumLink challenge={challenge} />)
: (<LegacyLinks challenge={challenge} challengeView />)
}
</div>

</div>
<div
className={cn(
Expand Down
178 changes: 178 additions & 0 deletions src/components/ChallengeEditor/Discussion-Field/Discussion-Field.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,178 @@
@import '../../../styles/includes';

.row {
box-sizing: border-box;
display: flex;
flex-direction: row;
margin: 30px 30px 0 30px;
align-content: space-between;
justify-content: flex-start;

.fieldTitle {
@include roboto-bold();
font-size: 16px;
line-height: 19px;
font-weight: 500;
color: $tc-gray-80;
margin-right: 10px;
}

.field {
@include upto-sm {
display: block;
padding-bottom: 10px;
}

label {
@include roboto-bold();

font-size: 16px;
line-height: 19px;
font-weight: 500;
color: $tc-gray-80;
}

&.col1 {
max-width: 185px;
min-width: 185px;
margin-right: 14px;
margin-bottom: auto;
margin-top: auto;
padding-top: 10px;
white-space: nowrap;
display: flex;
align-items: center;

span {
color: $tc-red;
}
}

&.col2 {
align-self: flex-end;
width: 80%;
margin-bottom: auto;
margin-top: auto;
display: flex;
flex-direction: row;
max-width: 600px;
min-width: 600px;
}
}

.col1 {
display: flex;
flex-grow: 1;
align-items: center;
max-width: 0;
min-width: 0;
margin-right: 0;
width: auto;
margin-top: 0 !important;
margin-bottom: 0 !important;
padding-top: 0 !important;
}

.col2 {
width: auto;

.subGroup {
width: 100%;
display: flex;
flex-direction: column;

.subRow {
display: flex;
align-items: center;
margin-bottom: 18px;
}

.subRow:last-of-type {
margin-bottom: 0;
}
}
}

.tcRadioButton {
.tc-radioButton-label {
@include roboto-light();

line-height: 17px;
font-weight: 300;
margin-left: 21px;
user-select: none;
cursor: pointer;
width: 195px;
font-size: 14px;
color: #3d3d3d;
}

height: 18px;
width: 80px;
margin: 0;
padding: 0;
vertical-align: bottom;
position: relative;
display: inline-block;

input[type=radio] {
display: none;
}

label {
@include roboto-light();

line-height: 17px;
font-weight: 300;
cursor: pointer;
position: absolute;
display: inline-block;
width: 16px;
height: 16px;
border-radius: 8px;
top: 0;
left: 0;
border: none;
box-shadow: none;
background: $tc-gray-30;
transition: all 0.15s ease-in-out;

&::after {
opacity: 0;
content: '';
position: absolute;
width: 8px;
height: 8px;
background: transparent;
top: 4px;
left: 4px;
border: 4px solid $tc-blue-20;
border-radius: 4px;
transition: all 0.15s ease-in-out;
}

&:hover::after {
opacity: 0.3;
}

div {
margin-left: 24px;
width: 300px;
}
}

input[type=radio]:checked ~ label {
background: $tc-blue-20;
}

input[type=radio]:checked + label::after {
opacity: 1;
border-color: $white;
}
}

&.error {
color: $tc-red;
margin-top: -25px;
}
}
62 changes: 62 additions & 0 deletions src/components/ChallengeEditor/Discussion-Field/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
import React from 'react'
import PropTypes from 'prop-types'
import cn from 'classnames'
import styles from './Discussion-Field.module.scss'

const DiscussionField = ({ hasForum, toggleForum, readOnly }) => {
console.log('hasForummm ' + hasForum)
if (readOnly) {
return (
<div className={styles.row}>
<div className={cn(styles.field, styles.col1, styles.fieldTitle)}>Forum Discussion :</div>
<div className={cn(styles.field, styles.col2)}>
{ hasForum ? 'On' : 'Off' }
</div>
</div>
)
}

return (
<div className={styles.row}>
<div className={cn(styles.field, styles.col1, styles.fieldTitle)}>Forum Discussion :</div>
<div className={cn(styles.field, styles.col2)}>
<div className={styles.tcRadioButton}>
<input
name='forum'
type='radio'
id='forum-on'
checked={hasForum}
onChange={toggleForum}
/>
<label className={styles['tc-RadioButton-label']} htmlFor='forum-on'>
<div>On</div>
</label>
</div>
<div className={styles.tcRadioButton}>
<input
name='forum'
type='radio'
id='forum-off'
checked={!hasForum}
onChange={toggleForum}
/>
<label className={styles['tc-RadioButton-label']} htmlFor='forum-off'>
<div>Off</div>
</label>
</div>
</div>
</div>
)
}

DiscussionField.defaultProps = {
readOnly: false
}

DiscussionField.propTypes = {
hasForum: PropTypes.bool,
toggleForum: PropTypes.func,
readOnly: PropTypes.bool
}

export default DiscussionField
23 changes: 19 additions & 4 deletions src/components/ChallengeEditor/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,7 @@ import UseSchedulingAPIField from './UseSchedulingAPIField'
import { getResourceRoleByName } from '../../util/tc'
import { isBetaMode } from '../../util/cookie'
import MilestoneField from './Milestone-Field'
import DiscussionField from './Discussion-Field'

const theme = {
container: styles.modalContainer
Expand All @@ -78,6 +79,7 @@ class ChallengeEditor extends Component {
isDeleteLaunch: false,
isConfirm: false,
isClose: false,
hasForum: false,
isOpenAdvanceSettings: false,
isLoading: false,
isSaving: false,
Expand Down Expand Up @@ -135,6 +137,7 @@ class ChallengeEditor extends Component {
this.updateResource = this.updateResource.bind(this)
this.onDeleteChallenge = this.onDeleteChallenge.bind(this)
this.deleteModalLaunch = this.deleteModalLaunch.bind(this)
this.toggleForumOnCreate = this.toggleForumOnCreate.bind(this)
}

componentDidMount () {
Expand Down Expand Up @@ -583,6 +586,11 @@ class ChallengeEditor extends Component {
this.setState({ challenge: newChallenge })
}

toggleForumOnCreate () {
const { hasForum } = this.state
this.setState({ hasForum: !hasForum })
}

toggleAdvanceSettings () {
const { isOpenAdvanceSettings } = this.state
this.setState({ isOpenAdvanceSettings: !isOpenAdvanceSettings })
Expand Down Expand Up @@ -817,7 +825,9 @@ class ChallengeEditor extends Component {
'terms',
'prizeSets',
'winners',
'milestoneId'
'milestoneId',
'discussions',
'task'
], this.state.challenge)
const isTask = _.find(metadata.challengeTypes, { id: challenge.typeId, isTask: true })
challenge.legacy = _.assign(this.state.challenge.legacy, {
Expand Down Expand Up @@ -913,9 +923,11 @@ class ChallengeEditor extends Component {
if (projectDetail.groups) {
newChallenge.groups.push(...projectDetail.groups)
}
const discussions = this.getDiscussionsConfig(newChallenge)
if (discussions) {
newChallenge.discussions = discussions
if (!isTask || this.state.hasForum) {
const discussions = this.getDiscussionsConfig(newChallenge)
if (discussions) {
newChallenge.discussions = discussions
}
}
try {
const action = await createChallenge(newChallenge, projectDetail.id)
Expand Down Expand Up @@ -1197,6 +1209,7 @@ class ChallengeEditor extends Component {
showDesignChallengeWarningModel,
challenge,
draftChallenge,
hasForum,
isOpenAdvanceSettings,
isSaving,
isCloseTask
Expand Down Expand Up @@ -1435,6 +1448,7 @@ class ChallengeEditor extends Component {
)
}
</React.Fragment>
// const useTask = _.find(metadata.challengeTypes, { id: challenge.typeId, isTask: true })
const selectedType = _.find(metadata.challengeTypes, { id: challenge.typeId })
const challengeTrack = _.find(metadata.challengeTracks, { id: challenge.trackId })
const selectedMilestone = _.find(projectPhases,
Expand All @@ -1454,6 +1468,7 @@ class ChallengeEditor extends Component {
<TypeField types={metadata.challengeTypes} onUpdateSelect={this.onUpdateSelect} challenge={challenge} />
<ChallengeNameField challenge={challenge} onUpdateInput={this.onUpdateInput} />
{projectDetail.version === 'v4' && <MilestoneField milestones={activeProjectMilestones} onUpdateSelect={this.onUpdateSelect} projectId={projectDetail.id} selectedMilestoneId={selectedMilestoneId} />}
{ isTask && (<DiscussionField hasForum={hasForum} toggleForum={this.toggleForumOnCreate} />) }
</div>
{showDesignChallengeWarningModel && designChallengeModal}
{ errorContainer }
Expand Down
Loading