diff --git a/src/components/ExtendableList.js b/src/components/ExtendableList.js new file mode 100644 index 0000000..ec98b31 --- /dev/null +++ b/src/components/ExtendableList.js @@ -0,0 +1,33 @@ +import React from 'react'; +import Input from './Input'; + +const ExtendableList = props => { + return ( +
+

{props.childCategory} for {props.parentCategory}

+ + {props.items.map((value, index) => { + return ( +
+ +
+
+ props.updateInputList(newValue, `${props.childCategory}`, props.pIndex, index)} + text={value} + placeholder={props.placeholder} + helpBlock={props.helpBlock} + /> +
+
+
+ ) + })} + + {props.addItemList && } +
 
+
+ ) +} + +export default ExtendableList diff --git a/src/components/Input.js b/src/components/Input.js index 6073a6a..7a05ef2 100644 --- a/src/components/Input.js +++ b/src/components/Input.js @@ -49,7 +49,8 @@ export class Input extends Component { placeholder={this.props.placeholder} value={this.props.text} disabled={(this.props.type === 'disabled') ? true : false} - /> + /> + {(this.props.helpBlock) ? this.props.helpBlock : ``} ) } else if (valid === false && ((this.props.text === null || this.props.text === "") === false || this.props.submitted)) { @@ -63,7 +64,8 @@ export class Input extends Component { placeholder={this.props.placeholder} value={this.props.text} disabled={(this.props.type === 'disabled') ? true : false} - /> + /> + {(this.props.helpBlock) ? this.props.helpBlock : ``} {this.drawErrorMessage()} ) @@ -77,7 +79,8 @@ export class Input extends Component { className="form-control" placeholder={this.props.placeholder} value={this.props.text} - /> + /> + {(this.props.helpBlock) ? this.props.helpBlock : ``} ) } diff --git a/src/components/RubricEdit.js b/src/components/RubricEdit.js index 8254324..ff858de 100644 --- a/src/components/RubricEdit.js +++ b/src/components/RubricEdit.js @@ -6,13 +6,41 @@ import { connect } from 'react-redux'; import * as Actions from '../actions/rubric'; import mixpanel from 'mixpanel-browser'; import Input from './Input'; +import ExtendableList from './ExtendableList'; +import serverPath from '../paths'; class RubricEdit extends Component { + // Needed for this.state to correctly reference state when function is passed down + constructor(props) { + super(props) + this.state = { + needsNewRubric: false, + nameInput: "", + rubric: { + id: '', + name: '', + description: '', + userId: '', + levelOne: '', + levelTwo: '', + levelThree: '', + levelFour: '', + Competencies: [['']], + Skills: [['']], + Evaluations: [['', '', '', '']] + } + } - state = { - needsNewRubric: false, - nameInput: "", + this.componentWillMount = this.componentWillMount.bind(this) + this.componentDidMount = this.componentDidMount.bind(this) + this.redirect = this.redirect.bind(this) + this.goBack = this.goBack.bind(this) + this.updateNameInput = this.updateNameInput.bind(this) + this.updateInputList = this.updateInputList.bind(this) + this.addItemList = this.addItemList.bind(this) + this.submitForm = this.submitForm.bind(this) } + // 1. Check to see if it is in 'edit' or 'new' mode // 2. Map state to props // 3. Render the component @@ -28,12 +56,12 @@ class RubricEdit extends Component { name: `${firstName} ${lastName}'s New Roadmap` } - if (pathname.includes('rubric/new')) { - this.setState({needsNewRubric: true}) - createNewRubric(userId, newRubric) - } else { - getRubricById(rubricId); - } + // if (pathname.includes('rubric/new')) { + // this.setState({needsNewRubric: true}) + // createNewRubric(userId, newRubric) + // } else { + // getRubricById(rubricId); + // } } componentDidMount() { @@ -51,9 +79,70 @@ class RubricEdit extends Component { this.props.history.goBack() } - updateNameInput(e) { - e.preventDefault(); - this.props.updateNameInput(e.target.value); + updateNameInput(value, key) { + this.setState({...this.state, rubric: {...this.state.rubric, [key]: value}}) + } + + updateInputList(value, key, pIndex, cIndex) { + const updatedList = [...this.state.rubric[key]] + updatedList[pIndex][cIndex] = value + this.setState({...this.state, rubric: {...this.state.rubric, [key]: updatedList}}) + } + + addItemList(key, pIndex) { + const updatedList = [...this.state.rubric[key]] + updatedList[pIndex].push('') + this.setState({...this.state, rubric: {...this.state.rubric, [key]: updatedList}}) + + if (key === "Competencies") { + const skillList = [...this.state.rubric["Skills"], ['']] + const evalList = [...this.state.rubric["Evaluations"], ['', '', '', '']] + this.setState({...this.state, rubric: {...this.state.rubric, ["Skills"]: skillList, ["Evaluations"]: evalList}}) + } + if (key === "Skills") { + const evalList = [...this.state.rubric["Evaluations"], ['', '', '', '']] + this.setState({...this.state, rubric: {...this.state.rubric, ["Evaluations"]: evalList}}) + } + } + + submitForm(e) { + const rubric = { + rubric: { + name: this.state.rubric.name, + description: this.state.rubric.description, + levelOne: this.state.rubric.levelOne, + levelTwo: this.state.rubric.levelTwo, + levelThree: this.state.rubric.levelThree, + levelFour: this.state.rubric.levelFour, + }, + competencies: this.state.rubric.Competencies, + skills: this.state.rubric.Skills, + evaluations: this.state.rubric.Evaluations + } + + let config = { + method: 'POST', + body: JSON.stringify(rubric), + headers: { + 'Accept': 'application/json, text/plain, */*', + 'Content-Type': 'application/json', + 'Authorization': 'Bearer ' + localStorage.getItem('token') + } + } + + const userId = localStorage.getItem('userId') + fetch(`${serverPath}/users/${userId}/completeRubrics/create`, config).then((res) => { + if (res.status !== 200) { + return Promise.reject(`Could not save user`) + } + return res.json(); + }).then((json) => { + this.props.history.push(`/users/${userId}/rubrics`) + }).catch(err => { + console.log("There was an error: " + err) + }); + + e.preventDefault() } render() { @@ -62,10 +151,12 @@ class RubricEdit extends Component { const { name, id, userId, iconName, iconColor, description, levelOne, levelTwo, levelThree, levelFour } = rubric const firstName = localStorage.getItem('firstName') const lastName = localStorage.getItem('lastName') + const allSkills = this.state.rubric.Skills.reduce((acc, skillGroup) => [...acc, ...skillGroup]) + const evalLabels = [this.state.rubric.levelOne, this.state.rubric.levelTwo, this.state.rubric.levelThree, this.state.rubric.levelFour] return (
- {this.redirect(isFetching, needsNewRubric, userId, id)} -
@@ -76,71 +167,144 @@ class RubricEdit extends Component {

Edit {name} Roadmap...

- -

What skillset does this roadmap assess/achieve?

-
- -
-
- - What skillset does this roadmap assess/achieve? +
+

What skillset does this roadmap assess/achieve?

+
+ +
+
+ this.updateNameInput(newValue, "name")} + placeholder="e.g. Code Review..." + autoFocus={true} + helpBlock="What skillset does this roadmap assess/achieve?" + /> +
-
-
 
- -

How would you describe this roadmap in more detail?

-
- -
-
- - Enter any detailed information about you'd like to share about this roadmap. What inspired you to make it? Why are you're qualified to make it? What a person could expect to achieve by completing it? +
 
+ +

How would you describe this roadmap in more detail?

+
+ +
+
+ + Enter any detailed information about you'd like to share about this roadmap. What inspired you to make it? Why are you're qualified to make it? What a person could expect to achieve by completing it? +
-
-
 
- -

Describe the 4 different levels of skill for {name}

-
- -
-
- - How would you describe the initial level of mastery of your Roadmap? +
 
+ +

Describe the 4 different levels of skill for {name}

+
+ +
+
+ this.updateNameInput(newValue, "levelOne")} + text={this.state.rubric.levelOne} + placeholder="e.g. Unsatisfactory, Beginner, Initial..." + helpBlock="How would you describe the initial level of mastery of your Roadmap?" + /> +
-
-
- -
-
- - How would you describe the second level of mastery of your Roadmap? +
+ +
+
+ this.updateNameInput(newValue, "levelTwo")} + text={this.state.rubric.levelTwo} + placeholder="e.g. Competant, Intermediate, Approaching..." + helpBlock="How would you describe the second level of mastery of your Roadmap?" + /> +
-
-
- -
-
- - How would you describe the third level of mastery of your Roadmap? +
+ +
+
+ this.updateNameInput(newValue, "levelThree")} + text={this.state.rubric.levelThree} + placeholder="e.g. Proficient, Advanced, Overtaking..." + helpBlock="How would you describe the third level of mastery of your Roadmap?" + /> +
-
-
- -
-
- - How would you describe the last level of mastery of your Roadmap? +
+ +
+
+ this.updateNameInput(newValue, "levelFour")} + text={this.state.rubric.levelFour} + placeholder="e.g. Professional, Expert, Innovating..." + helpBlock="How would you describe the last level of mastery of your Roadmap?" + /> +
-
-
 
+ + + {this.state.rubric.Competencies[0].map((competency, index) => { + return ( + + ) + })} + + {allSkills.map((skill, index) => { + return ( + + ) + })} + +
+