Public specification *
diff --git a/src/components/ChallengeEditor/SkillsField/index.js b/src/components/ChallengeEditor/SkillsField/index.js
new file mode 100644
index 00000000..8025519a
--- /dev/null
+++ b/src/components/ChallengeEditor/SkillsField/index.js
@@ -0,0 +1,82 @@
+import React, { useMemo } from 'react'
+import PropTypes from 'prop-types'
+import Select from '../../Select'
+import { searchSkills } from '../../../services/skills'
+import cn from 'classnames'
+import styles from './styles.module.scss'
+import { AUTOCOMPLETE_DEBOUNCE_TIME_MS } from '../../../config/constants'
+import _ from 'lodash'
+
+const fetchSkills = _.debounce((inputValue, callback) => {
+ searchSkills(inputValue).then(
+ (skills) => {
+ const suggestedOptions = skills.map((skillItem) => ({
+ label: skillItem.name,
+ value: skillItem.id
+ }))
+ return callback(suggestedOptions)
+ })
+ .catch(() => {
+ return callback(null)
+ })
+}, AUTOCOMPLETE_DEBOUNCE_TIME_MS)
+
+const SkillsField = ({ readOnly, challenge, onUpdateSkills }) => {
+ const selectedSkills = useMemo(() => (challenge.skills || []).map(skill => ({
+ label: skill.name,
+ value: skill.id
+ })), [challenge.skills])
+ const existingSkills = useMemo(() => selectedSkills.map(item => item.label).join(','), [selectedSkills])
+
+ return (
+ <>
+
+
+
+
+
+
+ {readOnly ? (
+ {existingSkills}
+ ) : (
+
+
+
+ { !readOnly && challenge.submitTriggered && (!selectedSkills || !selectedSkills.length) &&
+
+
+ Select at least one skill
+
+
}
+
+ )
+}
+
+SkillsField.defaultProps = {
+ readOnly: false,
+ onUpdateSkills: () => { }
+}
+
+SkillsField.propTypes = {
+ readOnly: PropTypes.bool,
+ challenge: PropTypes.shape().isRequired,
+ onUpdateSkills: PropTypes.func
+}
+
+export default SkillsField
diff --git a/src/components/ChallengeEditor/TagsField/Tags-Field.module.scss b/src/components/ChallengeEditor/SkillsField/styles.module.scss
similarity index 100%
rename from src/components/ChallengeEditor/TagsField/Tags-Field.module.scss
rename to src/components/ChallengeEditor/SkillsField/styles.module.scss
diff --git a/src/components/ChallengeEditor/SpecialChallengeField/index.js b/src/components/ChallengeEditor/SpecialChallengeField/index.js
new file mode 100644
index 00000000..246ed4c3
--- /dev/null
+++ b/src/components/ChallengeEditor/SpecialChallengeField/index.js
@@ -0,0 +1,71 @@
+import React, { useMemo } from 'react'
+import PropTypes from 'prop-types'
+import Select from '../../Select'
+import cn from 'classnames'
+import styles from './styles.module.scss'
+import { SPECIAL_CHALLENGE_TAGS } from '../../../config/constants'
+import _ from 'lodash'
+
+const options = [
+ {
+ label: 'No',
+ value: ''
+ },
+ ...SPECIAL_CHALLENGE_TAGS.map(tag => ({
+ label: tag,
+ value: tag
+ }))
+]
+
+const SpecialChallengeField = ({ challenge, onUpdateMultiSelect, readOnly }) => {
+ const selectedValue = useMemo(() => {
+ const selectedTag = _.filter(challenge.tags, (tag) => SPECIAL_CHALLENGE_TAGS.indexOf(tag) >= 0)[0]
+ return _.find(options, {
+ value: selectedTag || ''
+ })
+ }, [challenge.tags])
+ return (
+ <>
+
+
+
+
+
+
+ {readOnly ? (
+ {selectedValue.label}
+ ) : (
+
+
+
+ )
+}
+
+SpecialChallengeField.defaultProps = {
+ readOnly: false
+}
+
+SpecialChallengeField.propTypes = {
+ challenge: PropTypes.shape().isRequired,
+ onUpdateMultiSelect: PropTypes.func.isRequired,
+ readOnly: PropTypes.bool
+}
+
+export default SpecialChallengeField
diff --git a/src/components/ChallengeEditor/SpecialChallengeField/styles.module.scss b/src/components/ChallengeEditor/SpecialChallengeField/styles.module.scss
new file mode 100644
index 00000000..877b75fc
--- /dev/null
+++ b/src/components/ChallengeEditor/SpecialChallengeField/styles.module.scss
@@ -0,0 +1,52 @@
+@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;
+
+ .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;
+ white-space: nowrap;
+ display: flex;
+ align-items: center;
+
+ span {
+ color: $tc-red;
+ }
+ }
+
+ &.col2.error {
+ color: $tc-red;
+ margin-top: -25px;
+ }
+ &.col2 {
+ align-self: flex-end;
+ margin-bottom: auto;
+ margin-top: auto;
+ display: flex;
+ flex-direction: row;
+ width: 600px;
+ }
+ }
+}
diff --git a/src/components/ChallengeEditor/TagsField/index.js b/src/components/ChallengeEditor/TagsField/index.js
index 7dcdfb88..b1ffaf9c 100644
--- a/src/components/ChallengeEditor/TagsField/index.js
+++ b/src/components/ChallengeEditor/TagsField/index.js
@@ -1,51 +1,63 @@
-import React from 'react'
+import React, { useMemo } from 'react'
import PropTypes from 'prop-types'
import Select from '../../Select'
import cn from 'classnames'
-import styles from './Tags-Field.module.scss'
+import styles from './styles.module.scss'
+import { SPECIAL_CHALLENGE_TAGS } from '../../../config/constants'
+import _ from 'lodash'
+
+const TagsField = ({ challenge, onUpdateMultiSelect, readOnly }) => {
+ const selectedTags = useMemo(() => {
+ return (challenge.tags || []).map(
+ tag => ({ label: tag, value: tag })
+ )
+ }, [challenge.tags])
+
+ const selectedValues = useMemo(() => {
+ return _.filter(selectedTags, (tag) => SPECIAL_CHALLENGE_TAGS.indexOf(tag.value) < 0)
+ }, [selectedTags])
+
+ const existingTags = useMemo(() => {
+ return selectedValues.length ? selectedValues.map(item => item.value).join(',') : ''
+ }, [selectedValues])
+
+ const selectedSpecialChallengeValues = useMemo(() => {
+ return _.filter(selectedTags, (tag) => SPECIAL_CHALLENGE_TAGS.indexOf(tag.value) >= 0)
+ }, [challenge.tags])
-const TagsField = ({ challengeTags, challenge, onUpdateMultiSelect, readOnly }) => {
- const mapOps = item => ({ label: item.name, value: item.id })
- const existingTags = (challenge.tags && challenge.tags.length) ? challenge.tags.join(',') : ''
return (
- <>
-
-
-
-
-
-
- {readOnly ? (
-
{existingTags}
- ) : (
-
- { !readOnly && challenge.submitTriggered && (!challenge.tags || !challenge.tags.length) &&
-
-
- Select at least one tag
-
-
}
-
+
)
}
TagsField.defaultProps = {
- challengeTags: [],
readOnly: false
}
TagsField.propTypes = {
challenge: PropTypes.shape().isRequired,
- challengeTags: PropTypes.arrayOf(PropTypes.object).isRequired,
onUpdateMultiSelect: PropTypes.func.isRequired,
readOnly: PropTypes.bool
}
diff --git a/src/components/ChallengeEditor/TagsField/styles.module.scss b/src/components/ChallengeEditor/TagsField/styles.module.scss
new file mode 100644
index 00000000..877b75fc
--- /dev/null
+++ b/src/components/ChallengeEditor/TagsField/styles.module.scss
@@ -0,0 +1,52 @@
+@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;
+
+ .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;
+ white-space: nowrap;
+ display: flex;
+ align-items: center;
+
+ span {
+ color: $tc-red;
+ }
+ }
+
+ &.col2.error {
+ color: $tc-red;
+ margin-top: -25px;
+ }
+ &.col2 {
+ align-self: flex-end;
+ margin-bottom: auto;
+ margin-top: auto;
+ display: flex;
+ flex-direction: row;
+ width: 600px;
+ }
+ }
+}
diff --git a/src/components/ChallengeEditor/TextEditor-Field/index.js b/src/components/ChallengeEditor/TextEditor-Field/index.js
index bd3f8b40..6a90a139 100644
--- a/src/components/ChallengeEditor/TextEditor-Field/index.js
+++ b/src/components/ChallengeEditor/TextEditor-Field/index.js
@@ -1,5 +1,7 @@
import React, { Component } from 'react'
+import SpecialChallengeField from '../SpecialChallengeField'
import TagsField from '../TagsField'
+import SkillsField from '../SkillsField'
import FinalDeliverablesField from '../FinalDeliverables-Field'
import StockArtsField from '../StockArts-Field'
import SubmssionVisibility from '../SubmissionVisibility-Field'
@@ -25,21 +27,18 @@ class TextEditorField extends Component {
render () {
const {
- challengeTags,
challenge,
onUpdateCheckbox,
addFileType,
removeFileType,
onUpdateDescription,
+ onUpdateSkills,
onUpdateMultiSelect,
shouldShowPrivateDescription,
onUpdateMetadata,
readOnly
} = this.props
const { addedNewPrivateDescription } = this.state
- const challengeTagsFiltered = challengeTags.map(function (tag) {
- return { id: tag.name, name: tag.name }
- })
const showShowPrivateDescriptionField = addedNewPrivateDescription || (challenge.privateDescription !== null && challenge.privateDescription !== undefined)
return (
@@ -79,12 +78,21 @@ class TextEditorField extends Component {
/>
)}
+