definig specific error in step component
This commit is contained in:
Delucse
parent
b03ef6b54a
commit
e20a40aaf5
@ -245,7 +245,9 @@ export const readJSON = (json) => (dispatch, getState) => {
|
||||
dispatch(resetTutorial());
|
||||
dispatch({
|
||||
type: BUILDER_ERROR,
|
||||
payload: {steps: [{},{}]}
|
||||
payload: {
|
||||
steps: new Array(json.steps.length).fill({})
|
||||
}
|
||||
});
|
||||
dispatch(tutorialTitle(json.title));
|
||||
dispatch(tutorialId(json.id));
|
||||
|
||||
@ -45,9 +45,10 @@ class BlocklyExample extends Component {
|
||||
}
|
||||
|
||||
componentDidMount(){
|
||||
if(this.props.task){
|
||||
this.props.setError(this.props.index, 'xml');
|
||||
}
|
||||
this.isError();
|
||||
// if(this.props.task){
|
||||
// this.props.setError(this.props.index, 'xml');
|
||||
// }
|
||||
}
|
||||
|
||||
componentDidUpdate(props, state){
|
||||
@ -95,9 +96,9 @@ class BlocklyExample extends Component {
|
||||
}
|
||||
/>
|
||||
: <FormLabel style={{color: 'black'}}>Musterlösung</FormLabel>}
|
||||
{this.state.checked ? !this.props.value || !this.props.error.steps[this.props.index].xml ?
|
||||
<FormHelperText style={{lineHeight: 'initial', marginBottom: '10px'}} className={this.props.classes.errorColor}>Reiche deine Blöcke ein, indem du auf den rot gefärbten Button klickst.</FormHelperText>
|
||||
: <FormHelperText style={{lineHeight: 'initial', marginBottom: '10px'}}>Die letzte Einreichung erfolgte um {this.state.input} Uhr.</FormHelperText>
|
||||
{this.state.checked ? !this.props.value || this.props.error ?
|
||||
<FormHelperText style={{lineHeight: 'initial'}} className={this.props.classes.errorColor}>Reiche deine Blöcke ein, indem du auf den rot gefärbten Button klickst.</FormHelperText>
|
||||
: this.state.input ? <FormHelperText style={{lineHeight: 'initial'}}>Die letzte Einreichung erfolgte um {this.state.input} Uhr.</FormHelperText> : null
|
||||
: null}
|
||||
{this.state.checked ? (() => {
|
||||
var initialXml = this.props.value;
|
||||
@ -109,19 +110,15 @@ class BlocklyExample extends Component {
|
||||
initialXml = null;
|
||||
this.props.setError(this.props.index, 'xml');
|
||||
}
|
||||
console.log(!this.props.value);
|
||||
console.log(this.props.value);
|
||||
console.log(this.props.error.steps[this.props.index].xml);
|
||||
console.log(!this.props.value || this.props.error.steps[this.props.index].xml);
|
||||
return (
|
||||
<div>
|
||||
<Grid container className={!this.props.value || !this.props.error.steps[this.props.index].xml ? this.props.classes.errorBorder : null}>
|
||||
<div style={{marginTop: '10px'}}>
|
||||
<Grid container className={!this.props.value || this.props.error ? this.props.classes.errorBorder : null}>
|
||||
<Grid item xs={12}>
|
||||
<BlocklyWindow initialXml={initialXml}/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Button
|
||||
className={!this.props.value || !this.props.error.steps[this.props.index].xml ? this.props.classes.errorButton : null }
|
||||
className={!this.props.value || this.props.error ? this.props.classes.errorButton : null }
|
||||
style={{marginTop: '5px', height: '40px'}}
|
||||
variant='contained'
|
||||
color='primary'
|
||||
|
||||
@ -130,8 +130,8 @@ class Builder extends Component {
|
||||
<Divider variant='fullWidth' style={{margin: '10px 0 30px 0'}}/>
|
||||
|
||||
{/*Tutorial-Builder-Form*/}
|
||||
<Id error={this.props.error} value={this.props.id}/>
|
||||
<Textfield value={this.props.title} property={'title'} label={'Titel'} error={this.props.error}/>
|
||||
<Id error={this.props.error.id} value={this.props.id}/>
|
||||
<Textfield value={this.props.title} property={'title'} label={'Titel'} error={this.props.error.title}/>
|
||||
|
||||
{this.props.steps.map((step, i) =>
|
||||
<Step step={step} index={i} />
|
||||
@ -165,7 +165,7 @@ class Builder extends Component {
|
||||
}
|
||||
>
|
||||
{this.state.string ?
|
||||
<Textfield value={this.props.json} property={'json'} label={'JSON'} multiline error={this.props.error}/>
|
||||
<Textfield value={this.props.json} property={'json'} label={'JSON'} multiline error={this.props.error.json}/>
|
||||
: null}
|
||||
</Dialog>
|
||||
|
||||
|
||||
@ -52,7 +52,7 @@ class Requirements extends Component {
|
||||
}
|
||||
else {
|
||||
hardwareArray.push(hardware);
|
||||
if(this.props.error.steps[this.props.index].hardware){
|
||||
if(this.props.error){
|
||||
this.props.deleteError(this.props.index, 'hardware');
|
||||
}
|
||||
}
|
||||
@ -67,8 +67,8 @@ class Requirements extends Component {
|
||||
return (
|
||||
<div style={{marginBottom: '10px', padding: '18.5px 14px', borderRadius: '25px', border: '1px solid lightgrey', width: 'calc(100% - 28px)'}}>
|
||||
<FormLabel style={{color: 'black'}}>Hardware</FormLabel>
|
||||
<FormHelperText style={this.props.error.steps[this.props.index].hardware ? {lineHeight: 'initial', marginTop: '5px'} : {marginTop: '5px', lineHeight: 'initial', marginBottom: '10px'}}>Beachte, dass die Reihenfolge des Auswählens maßgebend ist.</FormHelperText>
|
||||
{this.props.error.steps[this.props.index].hardware ? <FormHelperText className={this.props.classes.errorColor}>Wähle mindestens eine Hardware aus.</FormHelperText> : null}
|
||||
<FormHelperText style={this.props.error ? {lineHeight: 'initial', marginTop: '5px'} : {marginTop: '5px', lineHeight: 'initial', marginBottom: '10px'}}>Beachte, dass die Reihenfolge des Auswählens maßgebend ist.</FormHelperText>
|
||||
{this.props.error ? <FormHelperText className={this.props.classes.errorColor}>Wähle mindestens eine Hardware aus.</FormHelperText> : null}
|
||||
<GridList cellHeight={100} cols={cols} spacing={10}>
|
||||
{hardware.map((picture,i) => (
|
||||
<GridListTile key={i} onClick={() => this.onChange(picture.id)} classes={{tile: this.props.value.filter(value => value === picture.id).length > 0 ? this.props.classes.active : this.props.classes.border}}>
|
||||
|
||||
@ -25,7 +25,7 @@ class Id extends Component {
|
||||
var value = parseInt(e.target.value);
|
||||
if(Number.isInteger(value) && value > 0){
|
||||
this.props.tutorialId(value);
|
||||
if(this.props.error.id){
|
||||
if(this.props.error){
|
||||
this.props.deleteError(undefined, 'id');
|
||||
}
|
||||
}
|
||||
@ -39,7 +39,7 @@ class Id extends Component {
|
||||
if(this.props.value+step < 1){
|
||||
this.props.setError(undefined,'id');
|
||||
}
|
||||
else if(this.props.error.id){
|
||||
else if(this.props.error){
|
||||
this.props.deleteError(undefined, 'id');
|
||||
}
|
||||
if(!this.props.value){
|
||||
@ -57,7 +57,7 @@ class Id extends Component {
|
||||
<InputLabel htmlFor="id">ID</InputLabel>
|
||||
<OutlinedInput
|
||||
style={{borderRadius: '25px', padding: '0 0 0 10px', width: '200px'}}
|
||||
error={this.props.error.id}
|
||||
error={this.props.error}
|
||||
value={this.props.value}
|
||||
name='id'
|
||||
label='ID'
|
||||
@ -88,7 +88,7 @@ class Id extends Component {
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
{this.props.error.id ? <FormHelperText className={this.props.classes.errorColor}>Gib eine positive ganzzahlige Zahl ein.</FormHelperText> : null}
|
||||
{this.props.error ? <FormHelperText className={this.props.classes.errorColor}>Gib eine positive ganzzahlige Zahl ein.</FormHelperText> : null}
|
||||
</FormControl>
|
||||
<FormHelperText style={{marginLeft: '10px', marginTop: '5px', lineHeight: 'initial', marginBottom: '10px', width: '200px'}}>Beachte, dass die ID eindeutig sein muss. Sie muss sich also zu den anderen Tutorials unterscheiden.</FormHelperText>
|
||||
</div>
|
||||
|
||||
@ -85,15 +85,15 @@ class Step extends Component {
|
||||
</div>
|
||||
<div style={{width: '100%', marginLeft: '54px'}}>
|
||||
<StepType value={this.props.step.type} index={index} />
|
||||
<Textfield value={this.props.step.headline} property={'headline'} label={'Überschrift'} index={index} error={this.props.error} errorText={`Gib eine Überschrift für die ${this.props.step.type === 'task' ? 'Aufgabe' : 'Anleitung'} ein.`} />
|
||||
<Textfield value={this.props.step.text} property={'text'} label={this.props.step.type === 'task' ? 'Aufgabenstellung' : 'Instruktionen'} index={index} multiline error={this.props.error} errorText={`Gib Instruktionen für die ${this.props.step.type === 'task' ? 'Aufgabe' : 'Anleitung'} ein.`}/>
|
||||
<Textfield value={this.props.step.headline} property={'headline'} label={'Überschrift'} index={index} error={this.props.error.steps[index].headline} errorText={`Gib eine Überschrift für die ${this.props.step.type === 'task' ? 'Aufgabe' : 'Anleitung'} ein.`} />
|
||||
<Textfield value={this.props.step.text} property={'text'} label={this.props.step.type === 'task' ? 'Aufgabenstellung' : 'Instruktionen'} index={index} multiline error={this.props.error.steps[index].text} errorText={`Gib Instruktionen für die ${this.props.step.type === 'task' ? 'Aufgabe' : 'Anleitung'} ein.`}/>
|
||||
{index === 0 ?
|
||||
<div>
|
||||
<Requirements value={this.props.step.requirements ? this.props.step.requirements : []} index={index}/>
|
||||
<Hardware value={this.props.step.hardware ? this.props.step.hardware : []} index={index} error={this.props.error}/>
|
||||
<Hardware value={this.props.step.hardware ? this.props.step.hardware : []} index={index} error={this.props.error.steps[index].hardware}/>
|
||||
</div>
|
||||
: null}
|
||||
<BlocklyExample value={this.props.step.xml} index={index} task={this.props.step.type === 'task'} error={this.props.error}/>
|
||||
<BlocklyExample value={this.props.step.xml} index={index} task={this.props.step.type === 'task'} error={this.props.error.steps[index].xml ? true : false}/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -20,6 +20,12 @@ const styles = theme => ({
|
||||
|
||||
class Textfield extends Component {
|
||||
|
||||
componentDidMount(){
|
||||
if(this.props.error){
|
||||
this.props.deleteError(this.props.index, this.props.property);
|
||||
}
|
||||
}
|
||||
|
||||
handleChange = (e) => {
|
||||
var value = e.target.value;
|
||||
if(this.props.property === 'title'){
|
||||
@ -46,7 +52,7 @@ class Textfield extends Component {
|
||||
<OutlinedInput
|
||||
style={{borderRadius: '25px'}}
|
||||
classes={{multiline: this.props.classes.multiline}}
|
||||
error={this.props.index !== undefined ? this.props.error.steps[this.props.index][this.props.property] : this.props.error[this.props.property]}
|
||||
error={this.props.error}
|
||||
value={this.props.value}
|
||||
label={this.props.label}
|
||||
id={this.props.property}
|
||||
@ -55,12 +61,10 @@ class Textfield extends Component {
|
||||
rowsMax={10}
|
||||
onChange={(e) => this.handleChange(e)}
|
||||
/>
|
||||
{this.props.index !== undefined ?
|
||||
this.props.error.steps[this.props.index][this.props.property] ? <FormHelperText className={this.props.classes.errorColor}>{this.props.errorText}</FormHelperText>
|
||||
: null
|
||||
: this.props.error[this.props.property] ?
|
||||
this.props.property === 'title' ? <FormHelperText className={this.props.classes.errorColor}>Gib einen Titel für das Tutorial ein.</FormHelperText>
|
||||
: <FormHelperText className={this.props.classes.errorColor}>Gib einen JSON-String ein und bestätige diesen mit einem Klick auf den entsprechenden Button</FormHelperText>
|
||||
{this.props.error ?
|
||||
this.props.property === 'title' ? <FormHelperText className={this.props.classes.errorColor}>Gib einen Titel für das Tutorial ein.</FormHelperText>
|
||||
: this.props.property === 'json' ? <FormHelperText className={this.props.classes.errorColor}>Gib einen JSON-String ein und bestätige diesen mit einem Klick auf den entsprechenden Button</FormHelperText>
|
||||
: <FormHelperText className={this.props.classes.errorColor}>{this.props.errorText}</FormHelperText>
|
||||
: null}
|
||||
</FormControl>
|
||||
);
|
||||
@ -71,13 +75,6 @@ Textfield.propTypes = {
|
||||
tutorialTitle: PropTypes.func.isRequired,
|
||||
jsonString: PropTypes.func.isRequired,
|
||||
changeContent: PropTypes.func.isRequired,
|
||||
error: PropTypes.object.isRequired,
|
||||
change: PropTypes.number.isRequired
|
||||
};
|
||||
|
||||
const mapStateToProps = state => ({
|
||||
error: state.builder.error,
|
||||
change: state.builder.change
|
||||
});
|
||||
|
||||
export default connect(mapStateToProps, { tutorialTitle, jsonString, changeContent, setError, deleteError })(withStyles(styles, { withTheme: true })(Textfield));
|
||||
export default connect(null, { tutorialTitle, jsonString, changeContent, setError, deleteError })(withStyles(styles, { withTheme: true })(Textfield));
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user