schuelerlabor-cleverlab/smarti
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

remove mybadges integration

Browse Source
This commit is contained in:
Mario Pesch
2021-07-27 11:57:46 +02:00
parent ed36a27ac2
commit 5b2add4098
21 changed files with 12148 additions and 9820 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Tutorial/Builder/Textfield.js
+76 -43
View File
@@ -1,34 +1,39 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { tutorialTitle, tutorialBadge, jsonString, changeContent, setError, deleteError } from '../../../actions/tutorialBuilderActions';
import React, { Component } from "react";
import PropTypes from "prop-types";
import { connect } from "react-redux";
import {
tutorialTitle,
jsonString,
changeContent,
setError,
deleteError,
} from "../../../actions/tutorialBuilderActions";
import { withStyles } from '@material-ui/core/styles';
import OutlinedInput from '@material-ui/core/OutlinedInput';
import InputLabel from '@material-ui/core/InputLabel';
import FormControl from '@material-ui/core/FormControl';
import FormHelperText from '@material-ui/core/FormHelperText';
import { withStyles } from "@material-ui/core/styles";
import OutlinedInput from "@material-ui/core/OutlinedInput";
import InputLabel from "@material-ui/core/InputLabel";
import FormControl from "@material-ui/core/FormControl";
import FormHelperText from "@material-ui/core/FormHelperText";
const styles = theme => ({
const styles = (theme) => ({
multiline: {
padding: '18.5px 14px 18.5px 24px'
padding: "18.5px 14px 18.5px 24px",
},
errorColor: {
color: `${theme.palette.error.dark} !important`
color: `${theme.palette.error.dark} !important`,
},
errorColorShrink: {
color: `rgba(0, 0, 0, 0.54) !important`
color: `rgba(0, 0, 0, 0.54) !important`,
},
errorBorder: {
borderColor: `${theme.palette.error.dark} !important`
}
borderColor: `${theme.palette.error.dark} !important`,
},
});
class Textfield extends Component {
componentDidMount(){
if(this.props.error){
if(this.props.property !== 'media'){
componentDidMount() {
if (this.props.error) {
if (this.props.property !== "media") {
this.props.deleteError(this.props.index, this.props.property);
}
}
@@ -36,38 +41,50 @@ class Textfield extends Component {
handleChange = (e) => {
var value = e.target.value;
if(this.props.property === 'title'){
if (this.props.property === "title") {
this.props.tutorialTitle(value);
}
else if(this.props.property === 'json'){
} else if (this.props.property === "json") {
this.props.jsonString(value);
} else {
this.props.changeContent(
value,
this.props.index,
this.props.property,
this.props.property2
);
}
else if(this.props.property === 'badge'){
this.props.tutorialBadge(value);
}
else {
this.props.changeContent(value, this.props.index, this.props.property, this.props.property2);
}
if(value.replace(/\s/g,'') === ''){
if (value.replace(/\s/g, "") === "") {
this.props.setError(this.props.index, this.props.property);
}
else{
} else {
this.props.deleteError(this.props.index, this.props.property);
}
};
render() {
return (
<FormControl variant="outlined" fullWidth style={{marginBottom: '10px'}}>
<FormControl
variant="outlined"
fullWidth
style={{ marginBottom: "10px" }}
>
<InputLabel
htmlFor={this.props.property}
classes={{shrink: this.props.error ? this.props.classes.errorColorShrink : null}}
classes={{
shrink: this.props.error
? this.props.classes.errorColorShrink
: null,
}}
>
{this.props.label}
</InputLabel>
<OutlinedInput
style={{borderRadius: '25px'}}
classes={{multiline: this.props.classes.multiline, notchedOutline: this.props.error ? this.props.classes.errorBorder : null}}
style={{ borderRadius: "25px" }}
classes={{
multiline: this.props.classes.multiline,
notchedOutline: this.props.error
? this.props.classes.errorBorder
: null,
}}
error={this.props.error}
value={this.props.value}
label={this.props.label}
@@ -77,21 +94,37 @@ class Textfield extends Component {
rowsMax={10}
onChange={(e) => this.handleChange(e)}
/>
{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}
{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>
);
};
}
}
Textfield.propTypes = {
tutorialTitle: PropTypes.func.isRequired,
tutorialBadge: PropTypes.func.isRequired,
jsonString: PropTypes.func.isRequired,
changeContent: PropTypes.func.isRequired,
};
export default connect(null, { tutorialTitle, tutorialBadge, jsonString, changeContent, setError, deleteError })(withStyles(styles, { withTheme: true })(Textfield));
export default connect(null, {
tutorialTitle,
jsonString,
changeContent,
setError,
deleteError,
})(withStyles(styles, { withTheme: true })(Textfield));