remove mybadges integration
This commit is contained in:
Mario Pesch
@@ -1,189 +0,0 @@
|
||||
import React, { Component } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { connect } from 'react-redux';
|
||||
import { tutorialBadge, deleteProperty, setError, deleteError } from '../../../actions/tutorialBuilderActions';
|
||||
|
||||
import axios from 'axios';
|
||||
|
||||
import { withStyles } from '@material-ui/core/styles';
|
||||
import Switch from '@material-ui/core/Switch';
|
||||
import FormControlLabel from '@material-ui/core/FormControlLabel';
|
||||
import FormHelperText from '@material-ui/core/FormHelperText';
|
||||
import List from '@material-ui/core/List';
|
||||
import ListItem from '@material-ui/core/ListItem';
|
||||
import ListItemText from '@material-ui/core/ListItemText';
|
||||
import IconButton from '@material-ui/core/IconButton';
|
||||
import OutlinedInput from '@material-ui/core/OutlinedInput';
|
||||
import InputLabel from '@material-ui/core/InputLabel';
|
||||
import FormControl from '@material-ui/core/FormControl';
|
||||
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { faTimes } from "@fortawesome/free-solid-svg-icons";
|
||||
|
||||
const styles = (theme) => ({
|
||||
errorColor: {
|
||||
color: `${theme.palette.error.dark} !important`
|
||||
},
|
||||
errorColorShrink: {
|
||||
color: `rgba(0, 0, 0, 0.54) !important`
|
||||
},
|
||||
errorBorder: {
|
||||
borderColor: `${theme.palette.error.dark} !important`
|
||||
}
|
||||
});
|
||||
|
||||
class Badge extends Component {
|
||||
|
||||
constructor(props){
|
||||
super(props);
|
||||
this.state={
|
||||
checked: props.badge ? true : false,
|
||||
badgeName: '',
|
||||
filteredBadges: [],
|
||||
badges: []
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount(){
|
||||
this.getBadges();
|
||||
}
|
||||
|
||||
componentDidUpdate(props){
|
||||
if(props.badge !== this.props.badge){
|
||||
this.setState({ checked: this.props.badge !== undefined ? true : false, badgeName: this.props.badge ? this.state.badges.filter(badge => badge._id === this.props.badge)[0].name : '' });
|
||||
}
|
||||
}
|
||||
|
||||
getBadges = () => {
|
||||
axios.get(`${process.env.REACT_APP_MYBADGES_API}/badge`)
|
||||
.then(res => {
|
||||
this.setState({badges: res.data.badges, badgeName: this.props.badge ? res.data.badges.filter(badge => badge._id === this.props.badge)[0].name : '' });
|
||||
})
|
||||
.catch(err => {
|
||||
});
|
||||
};
|
||||
|
||||
deleteBadge = () => {
|
||||
this.setState({ filteredBadges: [], badgeName: '' });
|
||||
this.props.tutorialBadge(null);
|
||||
this.props.setError(this.props.index, 'badge');
|
||||
};
|
||||
|
||||
setBadge = (badge) => {
|
||||
this.setState({ filteredBadges: [] });
|
||||
this.props.tutorialBadge(badge._id);
|
||||
this.props.deleteError(this.props.index, 'badge');
|
||||
};
|
||||
|
||||
onChange = e => {
|
||||
this.setState({ badgeName: e.target.value });
|
||||
};
|
||||
|
||||
onChangeBadge = e => {
|
||||
if(e.target.value && this.props.badge === null){
|
||||
var filteredBadges = this.state.badges.filter(badge => new RegExp(e.target.value, 'i').test(badge.name));
|
||||
if(filteredBadges.length < 1){
|
||||
filteredBadges = ['Keine Übereinstimmung gefunden.'];
|
||||
}
|
||||
this.setState({filteredBadges: filteredBadges});
|
||||
}
|
||||
else {
|
||||
this.setState({filteredBadges: []});
|
||||
}
|
||||
};
|
||||
|
||||
onChangeSwitch = (value) => {
|
||||
var oldValue = this.state.checked;
|
||||
this.setState({checked: value});
|
||||
if(oldValue !== value){
|
||||
if(value){
|
||||
this.props.setError(this.props.index, 'badge');
|
||||
this.props.tutorialBadge(null);
|
||||
} else {
|
||||
this.props.deleteError(this.props.index, 'badge');
|
||||
this.props.tutorialBadge(undefined);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div style={{marginBottom: '10px', padding: '18.5px 14px', borderRadius: '25px', border: '1px solid lightgrey', width: 'calc(100% - 28px)'}}>
|
||||
<FormControlLabel
|
||||
labelPlacement="end"
|
||||
label={"Badge"}
|
||||
control={
|
||||
<Switch
|
||||
checked={this.state.checked}
|
||||
onChange={(e) => this.onChangeSwitch(e.target.checked)}
|
||||
color="primary"
|
||||
/>
|
||||
}
|
||||
/>
|
||||
{this.state.checked ?
|
||||
<div style={{marginTop: '10px'}}>
|
||||
<FormControl variant="outlined" fullWidth>
|
||||
<InputLabel
|
||||
htmlFor={'badge'}
|
||||
classes={{shrink: this.props.error ? this.props.classes.errorColorShrink : null}}
|
||||
>
|
||||
{'Badge'}
|
||||
</InputLabel>
|
||||
<OutlinedInput
|
||||
style={{borderRadius: '25px'}}
|
||||
classes={{notchedOutline: this.props.error ? this.props.classes.errorBorder : null}}
|
||||
error={this.props.error}
|
||||
value={this.state.badgeName}
|
||||
label={'Badge'}
|
||||
id={'badge'}
|
||||
disabled={this.props.badge}
|
||||
onChange={(e) => this.onChange(e)}
|
||||
onInput={(e) => this.onChangeBadge(e)}
|
||||
fullWidth={true}
|
||||
endAdornment={
|
||||
<IconButton
|
||||
onClick={this.deleteBadge}
|
||||
edge="end"
|
||||
>
|
||||
<FontAwesomeIcon size='xs' icon={faTimes} />
|
||||
</IconButton>
|
||||
}
|
||||
/>
|
||||
{this.props.error && this.state.filteredBadges.length === 0 ?
|
||||
<FormHelperText className={this.props.classes.errorColor}>Wähle ein Badge aus.</FormHelperText>
|
||||
: null}
|
||||
</FormControl>
|
||||
<List style={{paddingTop: 0}}>
|
||||
{this.state.filteredBadges.map((badge, i) => (
|
||||
badge === 'Keine Übereinstimmung gefunden.' ?
|
||||
<ListItem button key={i} onClick={this.deleteBadge} style={{border: '1px solid rgba(0, 0, 0, 0.23)', borderRadius: '25px'}}>
|
||||
<ListItemText>{badge}</ListItemText>
|
||||
</ListItem>
|
||||
:
|
||||
<ListItem button key={i} onClick={() => {this.setBadge(badge)}} style={{border: '1px solid rgba(0, 0, 0, 0.23)', borderRadius: '25px'}}>
|
||||
<ListItemText>{`${badge.name}`}</ListItemText>
|
||||
</ListItem>
|
||||
))}
|
||||
</List>
|
||||
</div>
|
||||
: null}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
Badge.propTypes = {
|
||||
tutorialBadge: PropTypes.func.isRequired,
|
||||
deleteProperty: PropTypes.func.isRequired,
|
||||
setError: PropTypes.func.isRequired,
|
||||
deleteError: PropTypes.func.isRequired,
|
||||
badge: PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
const mapStateToProps = state => ({
|
||||
badge: state.builder.badge,
|
||||
change: state.builder.change
|
||||
});
|
||||
|
||||
|
||||
export default connect(mapStateToProps, { tutorialBadge, deleteProperty, setError, deleteError })(withStyles(styles, {withTheme: true})(Badge));
|
||||
@@ -1,67 +1,75 @@
|
||||
import React, { Component } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { connect } from 'react-redux';
|
||||
import { checkError, readJSON, jsonString, progress, tutorialId, resetTutorial as resetTutorialBuilder} from '../../../actions/tutorialBuilderActions';
|
||||
import { getTutorials, resetTutorial, deleteTutorial, tutorialProgress } from '../../../actions/tutorialActions';
|
||||
import { clearMessages } from '../../../actions/messageActions';
|
||||
import React, { Component } from "react";
|
||||
import PropTypes from "prop-types";
|
||||
import { connect } from "react-redux";
|
||||
import {
|
||||
checkError,
|
||||
readJSON,
|
||||
jsonString,
|
||||
progress,
|
||||
tutorialId,
|
||||
resetTutorial as resetTutorialBuilder,
|
||||
} from "../../../actions/tutorialBuilderActions";
|
||||
import {
|
||||
getTutorials,
|
||||
resetTutorial,
|
||||
deleteTutorial,
|
||||
tutorialProgress,
|
||||
} from "../../../actions/tutorialActions";
|
||||
import { clearMessages } from "../../../actions/messageActions";
|
||||
|
||||
import axios from 'axios';
|
||||
import { withRouter } from 'react-router-dom';
|
||||
import axios from "axios";
|
||||
import { withRouter } from "react-router-dom";
|
||||
|
||||
import Breadcrumbs from "../../Breadcrumbs";
|
||||
import Textfield from "./Textfield";
|
||||
import Step from "./Step";
|
||||
import Dialog from "../../Dialog";
|
||||
import Snackbar from "../../Snackbar";
|
||||
|
||||
import Breadcrumbs from '../../Breadcrumbs';
|
||||
import Badge from './Badge';
|
||||
import Textfield from './Textfield';
|
||||
import Step from './Step';
|
||||
import Dialog from '../../Dialog';
|
||||
import Snackbar from '../../Snackbar';
|
||||
|
||||
import { withStyles } from '@material-ui/core/styles';
|
||||
import Button from '@material-ui/core/Button';
|
||||
import Backdrop from '@material-ui/core/Backdrop';
|
||||
import CircularProgress from '@material-ui/core/CircularProgress';
|
||||
import Divider from '@material-ui/core/Divider';
|
||||
import FormHelperText from '@material-ui/core/FormHelperText';
|
||||
import Radio from '@material-ui/core/Radio';
|
||||
import RadioGroup from '@material-ui/core/RadioGroup';
|
||||
import FormControlLabel from '@material-ui/core/FormControlLabel';
|
||||
import InputLabel from '@material-ui/core/InputLabel';
|
||||
import MenuItem from '@material-ui/core/MenuItem';
|
||||
import FormControl from '@material-ui/core/FormControl';
|
||||
import Select from '@material-ui/core/Select';
|
||||
import { withStyles } from "@material-ui/core/styles";
|
||||
import Button from "@material-ui/core/Button";
|
||||
import Backdrop from "@material-ui/core/Backdrop";
|
||||
import CircularProgress from "@material-ui/core/CircularProgress";
|
||||
import Divider from "@material-ui/core/Divider";
|
||||
import FormHelperText from "@material-ui/core/FormHelperText";
|
||||
import Radio from "@material-ui/core/Radio";
|
||||
import RadioGroup from "@material-ui/core/RadioGroup";
|
||||
import FormControlLabel from "@material-ui/core/FormControlLabel";
|
||||
import InputLabel from "@material-ui/core/InputLabel";
|
||||
import MenuItem from "@material-ui/core/MenuItem";
|
||||
import FormControl from "@material-ui/core/FormControl";
|
||||
import Select from "@material-ui/core/Select";
|
||||
|
||||
const styles = (theme) => ({
|
||||
backdrop: {
|
||||
zIndex: theme.zIndex.drawer + 1,
|
||||
color: '#fff',
|
||||
color: "#fff",
|
||||
},
|
||||
errorColor: {
|
||||
color: theme.palette.error.dark
|
||||
color: theme.palette.error.dark,
|
||||
},
|
||||
errorButton: {
|
||||
marginTop: '5px',
|
||||
height: '40px',
|
||||
marginTop: "5px",
|
||||
height: "40px",
|
||||
backgroundColor: theme.palette.error.dark,
|
||||
'&:hover': {
|
||||
backgroundColor: theme.palette.error.dark
|
||||
}
|
||||
}
|
||||
"&:hover": {
|
||||
backgroundColor: theme.palette.error.dark,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
class Builder extends Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
tutorial: 'new',
|
||||
tutorial: "new",
|
||||
open: false,
|
||||
title: '',
|
||||
content: '',
|
||||
title: "",
|
||||
content: "",
|
||||
string: false,
|
||||
snackbar: false,
|
||||
key: '',
|
||||
message: ''
|
||||
key: "",
|
||||
message: "",
|
||||
};
|
||||
this.inputRef = React.createRef();
|
||||
}
|
||||
@@ -70,27 +78,38 @@ class Builder extends Component {
|
||||
this.props.tutorialProgress();
|
||||
// retrieve tutorials only if a potential user is loaded - authentication
|
||||
// is finished (success or failed)
|
||||
if(!this.props.authProgress){
|
||||
if (!this.props.authProgress) {
|
||||
this.props.getTutorials();
|
||||
}
|
||||
}
|
||||
|
||||
componentDidUpdate(props, state) {
|
||||
if(props.authProgress !== this.props.authProgress && !this.props.authProgress){
|
||||
if (
|
||||
props.authProgress !== this.props.authProgress &&
|
||||
!this.props.authProgress
|
||||
) {
|
||||
// authentication is completed
|
||||
this.props.getTutorials();
|
||||
}
|
||||
if(props.message !== this.props.message){
|
||||
if(this.props.message.id === 'GET_TUTORIALS_FAIL'){
|
||||
if (props.message !== this.props.message) {
|
||||
if (this.props.message.id === "GET_TUTORIALS_FAIL") {
|
||||
// alert(this.props.message.msg);
|
||||
this.props.clearMessages();
|
||||
}
|
||||
else if (this.props.message.id === 'TUTORIAL_DELETE_SUCCESS') {
|
||||
this.onChange('new');
|
||||
this.setState({ snackbar: true, key: Date.now(), message: `Das Tutorial wurde erfolgreich gelöscht.`, type: 'success' });
|
||||
}
|
||||
else if (this.props.message.id === 'TUTORIAL_DELETE_FAIL') {
|
||||
this.setState({ snackbar: true, key: Date.now(), message: `Fehler beim Löschen des Tutorials. Versuche es noch einmal.`, type: 'error' });
|
||||
} else if (this.props.message.id === "TUTORIAL_DELETE_SUCCESS") {
|
||||
this.onChange("new");
|
||||
this.setState({
|
||||
snackbar: true,
|
||||
key: Date.now(),
|
||||
message: `Das Tutorial wurde erfolgreich gelöscht.`,
|
||||
type: "success",
|
||||
});
|
||||
} else if (this.props.message.id === "TUTORIAL_DELETE_FAIL") {
|
||||
this.setState({
|
||||
snackbar: true,
|
||||
key: Date.now(),
|
||||
message: `Fehler beim Löschen des Tutorials. Versuche es noch einmal.`,
|
||||
type: "error",
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -105,22 +124,32 @@ class Builder extends Component {
|
||||
|
||||
uploadJsonFile = (jsonFile) => {
|
||||
this.props.progress(true);
|
||||
if (jsonFile.type !== 'application/json') {
|
||||
if (jsonFile.type !== "application/json") {
|
||||
this.props.progress(false);
|
||||
this.setState({ open: true, string: false, title: 'Unzulässiger Dateityp', content: 'Die übergebene Datei entspricht nicht dem geforderten Format. Es sind nur JSON-Dateien zulässig.' });
|
||||
}
|
||||
else {
|
||||
this.setState({
|
||||
open: true,
|
||||
string: false,
|
||||
title: "Unzulässiger Dateityp",
|
||||
content:
|
||||
"Die übergebene Datei entspricht nicht dem geforderten Format. Es sind nur JSON-Dateien zulässig.",
|
||||
});
|
||||
} else {
|
||||
var reader = new FileReader();
|
||||
reader.readAsText(jsonFile);
|
||||
reader.onloadend = () => {
|
||||
this.readJson(reader.result, true);
|
||||
};
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
uploadJsonString = () => {
|
||||
this.setState({ open: true, string: true, title: 'JSON-String einfügen', content: '' });
|
||||
}
|
||||
this.setState({
|
||||
open: true,
|
||||
string: true,
|
||||
title: "JSON-String einfügen",
|
||||
content: "",
|
||||
});
|
||||
};
|
||||
|
||||
readJson = (jsonString, isFile) => {
|
||||
try {
|
||||
@@ -129,173 +158,255 @@ class Builder extends Component {
|
||||
result.steps = [{}];
|
||||
}
|
||||
this.props.readJSON(result);
|
||||
this.setState({ snackbar: true, key: Date.now(), message: `${isFile ? 'Die übergebene JSON-Datei' : 'Der übergebene JSON-String'} wurde erfolgreich übernommen.`, type: 'success' });
|
||||
this.setState({
|
||||
snackbar: true,
|
||||
key: Date.now(),
|
||||
message: `${
|
||||
isFile ? "Die übergebene JSON-Datei" : "Der übergebene JSON-String"
|
||||
} wurde erfolgreich übernommen.`,
|
||||
type: "success",
|
||||
});
|
||||
} catch (err) {
|
||||
this.props.progress(false);
|
||||
this.props.jsonString('');
|
||||
this.setState({ open: true, string: false, title: 'Ungültiges JSON-Format', content: `${isFile ? 'Die übergebene Datei' : 'Der übergebene String'} enthält nicht valides JSON. Bitte überprüfe ${isFile ? 'die JSON-Datei' : 'den JSON-String'} und versuche es erneut.` });
|
||||
this.props.jsonString("");
|
||||
this.setState({
|
||||
open: true,
|
||||
string: false,
|
||||
title: "Ungültiges JSON-Format",
|
||||
content: `${
|
||||
isFile ? "Die übergebene Datei" : "Der übergebene String"
|
||||
} enthält nicht valides JSON. Bitte überprüfe ${
|
||||
isFile ? "die JSON-Datei" : "den JSON-String"
|
||||
} und versuche es erneut.`,
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
checkSteps = (steps) => {
|
||||
if (!(steps && steps.length > 0)) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
};
|
||||
|
||||
toggle = () => {
|
||||
this.setState({ open: !this.state });
|
||||
}
|
||||
};
|
||||
|
||||
onChange = (value) => {
|
||||
this.props.resetTutorialBuilder();
|
||||
this.props.tutorialId('');
|
||||
this.props.tutorialId("");
|
||||
this.setState({ tutorial: value });
|
||||
}
|
||||
};
|
||||
|
||||
onChangeId = (value) => {
|
||||
this.props.tutorialId(value);
|
||||
if (this.state.tutorial === 'change') {
|
||||
if (this.state.tutorial === "change") {
|
||||
this.props.progress(true);
|
||||
var tutorial = this.props.tutorials.filter(tutorial => tutorial._id === value)[0];
|
||||
var tutorial = this.props.tutorials.filter(
|
||||
(tutorial) => tutorial._id === value
|
||||
)[0];
|
||||
this.props.readJSON(tutorial);
|
||||
this.setState({ snackbar: true, key: Date.now(), message: `Das ausgewählte Tutorial "${tutorial.title}" wurde erfolgreich übernommen.`, type: 'success' });
|
||||
this.setState({
|
||||
snackbar: true,
|
||||
key: Date.now(),
|
||||
message: `Das ausgewählte Tutorial "${tutorial.title}" wurde erfolgreich übernommen.`,
|
||||
type: "success",
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
resetFull = () => {
|
||||
this.props.resetTutorialBuilder();
|
||||
this.setState({ snackbar: true, key: Date.now(), message: `Das Tutorial wurde erfolgreich zurückgesetzt.`, type: 'success' });
|
||||
this.setState({
|
||||
snackbar: true,
|
||||
key: Date.now(),
|
||||
message: `Das Tutorial wurde erfolgreich zurückgesetzt.`,
|
||||
type: "success",
|
||||
});
|
||||
window.scrollTo(0, 0);
|
||||
}
|
||||
};
|
||||
|
||||
resetTutorial = () => {
|
||||
var tutorial = this.props.tutorials.filter(tutorial => tutorial._id === this.props.id)[0];
|
||||
var tutorial = this.props.tutorials.filter(
|
||||
(tutorial) => tutorial._id === this.props.id
|
||||
)[0];
|
||||
this.props.readJSON(tutorial);
|
||||
this.setState({ snackbar: true, key: Date.now(), message: `Das Tutorial ${tutorial.title} wurde erfolgreich auf den ursprünglichen Stand zurückgesetzt.`, type: 'success' });
|
||||
this.setState({
|
||||
snackbar: true,
|
||||
key: Date.now(),
|
||||
message: `Das Tutorial ${tutorial.title} wurde erfolgreich auf den ursprünglichen Stand zurückgesetzt.`,
|
||||
type: "success",
|
||||
});
|
||||
window.scrollTo(0, 0);
|
||||
}
|
||||
};
|
||||
|
||||
submit = () => {
|
||||
var isError = this.props.checkError();
|
||||
if (isError) {
|
||||
this.setState({ snackbar: true, key: Date.now(), message: `Die Angaben für das Tutorial sind nicht vollständig.`, type: 'error' });
|
||||
this.setState({
|
||||
snackbar: true,
|
||||
key: Date.now(),
|
||||
message: `Die Angaben für das Tutorial sind nicht vollständig.`,
|
||||
type: "error",
|
||||
});
|
||||
window.scrollTo(0, 0);
|
||||
return false;
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
// export steps without attribute 'url'
|
||||
var steps = this.props.steps;
|
||||
var newTutorial = new FormData();
|
||||
newTutorial.append('title', this.props.title);
|
||||
if(this.props.badge){
|
||||
newTutorial.append('badge', this.props.badge);
|
||||
}
|
||||
newTutorial.append("title", this.props.title);
|
||||
steps.forEach((step, i) => {
|
||||
if(step._id){
|
||||
if (step._id) {
|
||||
newTutorial.append(`steps[${i}][_id]`, step._id);
|
||||
}
|
||||
newTutorial.append(`steps[${i}][type]`, step.type);
|
||||
newTutorial.append(`steps[${i}][headline]`, step.headline);
|
||||
newTutorial.append(`steps[${i}][text]`, step.text);
|
||||
if (i === 0 && step.type === 'instruction') {
|
||||
if (step.requirements) { // optional
|
||||
if (i === 0 && step.type === "instruction") {
|
||||
if (step.requirements) {
|
||||
// optional
|
||||
step.requirements.forEach((requirement, j) => {
|
||||
newTutorial.append(`steps[${i}][requirements][${j}]`, requirement);
|
||||
newTutorial.append(
|
||||
`steps[${i}][requirements][${j}]`,
|
||||
requirement
|
||||
);
|
||||
});
|
||||
}
|
||||
step.hardware.forEach((hardware, j) => {
|
||||
newTutorial.append(`steps[${i}][hardware][${j}]`, hardware);
|
||||
});
|
||||
}
|
||||
if (step.xml) { // optional
|
||||
if (step.xml) {
|
||||
// optional
|
||||
newTutorial.append(`steps[${i}][xml]`, step.xml);
|
||||
}
|
||||
if (step.media) { // optional
|
||||
if (step.media) {
|
||||
// optional
|
||||
if (step.media.youtube) {
|
||||
newTutorial.append(`steps[${i}][media][youtube]`, step.media.youtube);
|
||||
newTutorial.append(
|
||||
`steps[${i}][media][youtube]`,
|
||||
step.media.youtube
|
||||
);
|
||||
}
|
||||
if (step.media.picture) {
|
||||
newTutorial.append(`steps[${i}][media][picture]`, step.media.picture);
|
||||
newTutorial.append(
|
||||
`steps[${i}][media][picture]`,
|
||||
step.media.picture
|
||||
);
|
||||
}
|
||||
}
|
||||
});
|
||||
return newTutorial;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
submitNew = () => {
|
||||
var newTutorial = this.submit();
|
||||
if(newTutorial){
|
||||
if (newTutorial) {
|
||||
const config = {
|
||||
success: res => {
|
||||
success: (res) => {
|
||||
var tutorial = res.data.tutorial;
|
||||
this.props.history.push(`/tutorial/${tutorial._id}`);
|
||||
},
|
||||
error: err => {
|
||||
this.setState({ snackbar: true, key: Date.now(), message: `Fehler beim Erstellen des Tutorials. Versuche es noch einmal.`, type: 'error' });
|
||||
error: (err) => {
|
||||
this.setState({
|
||||
snackbar: true,
|
||||
key: Date.now(),
|
||||
message: `Fehler beim Erstellen des Tutorials. Versuche es noch einmal.`,
|
||||
type: "error",
|
||||
});
|
||||
window.scrollTo(0, 0);
|
||||
}
|
||||
},
|
||||
};
|
||||
axios.post(`${process.env.REACT_APP_BLOCKLY_API}/tutorial/`, newTutorial, config)
|
||||
.then(res => {
|
||||
axios
|
||||
.post(
|
||||
`${process.env.REACT_APP_BLOCKLY_API}/tutorial/`,
|
||||
newTutorial,
|
||||
config
|
||||
)
|
||||
.then((res) => {
|
||||
res.config.success(res);
|
||||
})
|
||||
.catch(err => {
|
||||
.catch((err) => {
|
||||
err.config.error(err);
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
submitUpdate = () => {
|
||||
var updatedTutorial = this.submit();
|
||||
if(updatedTutorial){
|
||||
if (updatedTutorial) {
|
||||
const config = {
|
||||
success: res => {
|
||||
success: (res) => {
|
||||
var tutorial = res.data.tutorial;
|
||||
this.props.history.push(`/tutorial/${tutorial._id}`);
|
||||
},
|
||||
error: err => {
|
||||
this.setState({ snackbar: true, key: Date.now(), message: `Fehler beim Ändern des Tutorials. Versuche es noch einmal.`, type: 'error' });
|
||||
error: (err) => {
|
||||
this.setState({
|
||||
snackbar: true,
|
||||
key: Date.now(),
|
||||
message: `Fehler beim Ändern des Tutorials. Versuche es noch einmal.`,
|
||||
type: "error",
|
||||
});
|
||||
window.scrollTo(0, 0);
|
||||
}
|
||||
},
|
||||
};
|
||||
axios.put(`${process.env.REACT_APP_BLOCKLY_API}/tutorial/${this.props.id}`, updatedTutorial, config)
|
||||
.then(res => {
|
||||
axios
|
||||
.put(
|
||||
`${process.env.REACT_APP_BLOCKLY_API}/tutorial/${this.props.id}`,
|
||||
updatedTutorial,
|
||||
config
|
||||
)
|
||||
.then((res) => {
|
||||
res.config.success(res);
|
||||
})
|
||||
.catch(err => {
|
||||
.catch((err) => {
|
||||
err.config.error(err);
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
var filteredTutorials = this.props.tutorials.filter(tutorial => tutorial.creator === this.props.user.email);
|
||||
var filteredTutorials = this.props.tutorials.filter(
|
||||
(tutorial) => tutorial.creator === this.props.user.email
|
||||
);
|
||||
return (
|
||||
<div>
|
||||
<Breadcrumbs content={[{ link: '/tutorial', title: 'Tutorial' }, { link: '/tutorial/builder', title: 'Builder' }]} />
|
||||
<Breadcrumbs
|
||||
content={[
|
||||
{ link: "/tutorial", title: "Tutorial" },
|
||||
{ link: "/tutorial/builder", title: "Builder" },
|
||||
]}
|
||||
/>
|
||||
|
||||
<h1>Tutorial-Builder</h1>
|
||||
|
||||
<RadioGroup row value={this.state.tutorial} onChange={(e) => this.onChange(e.target.value)}>
|
||||
<FormControlLabel style={{ color: 'black' }}
|
||||
<RadioGroup
|
||||
row
|
||||
value={this.state.tutorial}
|
||||
onChange={(e) => this.onChange(e.target.value)}
|
||||
>
|
||||
<FormControlLabel
|
||||
style={{ color: "black" }}
|
||||
value="new"
|
||||
control={<Radio color="primary" />}
|
||||
label="neues Tutorial erstellen"
|
||||
labelPlacement="end"
|
||||
/>
|
||||
{filteredTutorials.length > 0 ?
|
||||
{filteredTutorials.length > 0 ? (
|
||||
<div>
|
||||
<FormControlLabel style={{ color: 'black' }}
|
||||
<FormControlLabel
|
||||
style={{ color: "black" }}
|
||||
disabled={this.props.index === 0}
|
||||
value="change"
|
||||
control={<Radio color="primary" />}
|
||||
label="bestehendes Tutorial ändern"
|
||||
labelPlacement="end"
|
||||
/>
|
||||
<FormControlLabel style={{ color: 'black' }}
|
||||
<FormControlLabel
|
||||
style={{ color: "black" }}
|
||||
disabled={this.props.index === 0}
|
||||
value="delete"
|
||||
control={<Radio color="primary" />}
|
||||
@@ -303,110 +414,196 @@ class Builder extends Component {
|
||||
labelPlacement="end"
|
||||
/>
|
||||
</div>
|
||||
: null}
|
||||
) : null}
|
||||
</RadioGroup>
|
||||
|
||||
<Divider variant='fullWidth' style={{ margin: '10px 0 15px 0' }} />
|
||||
<Divider variant="fullWidth" style={{ margin: "10px 0 15px 0" }} />
|
||||
|
||||
{this.state.tutorial === 'new' ?
|
||||
{this.state.tutorial === "new" ? (
|
||||
/*upload JSON*/
|
||||
<div ref={this.inputRef}>
|
||||
<input
|
||||
style={{ display: 'none' }}
|
||||
style={{ display: "none" }}
|
||||
accept="application/json"
|
||||
onChange={(e) => { this.uploadJsonFile(e.target.files[0]) }}
|
||||
onChange={(e) => {
|
||||
this.uploadJsonFile(e.target.files[0]);
|
||||
}}
|
||||
id="open-json"
|
||||
type="file"
|
||||
/>
|
||||
<label htmlFor="open-json">
|
||||
<Button component="span" style={{ marginRight: '10px', marginBottom: '10px' }} variant='contained' color='primary'>Datei laden</Button>
|
||||
<Button
|
||||
component="span"
|
||||
style={{ marginRight: "10px", marginBottom: "10px" }}
|
||||
variant="contained"
|
||||
color="primary"
|
||||
>
|
||||
Datei laden
|
||||
</Button>
|
||||
</label>
|
||||
<Button style={{ marginRight: '10px', marginBottom: '10px' }} variant='contained' color='primary' onClick={() => this.uploadJsonString()}>String laden</Button>
|
||||
<Button
|
||||
style={{ marginRight: "10px", marginBottom: "10px" }}
|
||||
variant="contained"
|
||||
color="primary"
|
||||
onClick={() => this.uploadJsonString()}
|
||||
>
|
||||
String laden
|
||||
</Button>
|
||||
</div>
|
||||
: <FormControl variant="outlined" style={{ width: '100%' }}>
|
||||
) : (
|
||||
<FormControl variant="outlined" style={{ width: "100%" }}>
|
||||
<InputLabel id="select-outlined-label">Tutorial</InputLabel>
|
||||
<Select
|
||||
color='primary'
|
||||
color="primary"
|
||||
labelId="select-outlined-label"
|
||||
value={this.props.id}
|
||||
onChange={(e) => this.onChangeId(e.target.value)}
|
||||
label="Tutorial"
|
||||
>
|
||||
{filteredTutorials.map(tutorial =>
|
||||
{filteredTutorials.map((tutorial) => (
|
||||
<MenuItem value={tutorial._id}>{tutorial.title}</MenuItem>
|
||||
)}
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
}
|
||||
)}
|
||||
|
||||
<Divider variant='fullWidth' style={{ margin: '10px 0 15px 0' }} />
|
||||
<Divider variant="fullWidth" style={{ margin: "10px 0 15px 0" }} />
|
||||
|
||||
{this.state.tutorial === 'new' || (this.state.tutorial === 'change' && this.props.id !== '') ?
|
||||
/*Tutorial-Builder-Form*/
|
||||
<div>
|
||||
{this.props.error.type ?
|
||||
<FormHelperText style={{ lineHeight: 'initial' }} className={this.props.classes.errorColor}>{`Ein Tutorial muss mindestens jeweils eine Instruktion und eine Aufgabe enthalten.`}</FormHelperText>
|
||||
: null}
|
||||
{/* <Id error={this.props.error.id} value={this.props.id} /> */}
|
||||
<Textfield value={this.props.title} property={'title'} label={'Titel'} error={this.props.error.title} />
|
||||
<Badge error={this.props.error.badge}/>
|
||||
{this.state.tutorial === "new" ||
|
||||
(this.state.tutorial === "change" && this.props.id !== "") ? (
|
||||
/*Tutorial-Builder-Form*/
|
||||
<div>
|
||||
{this.props.error.type ? (
|
||||
<FormHelperText
|
||||
style={{ lineHeight: "initial" }}
|
||||
className={this.props.classes.errorColor}
|
||||
>{`Ein Tutorial muss mindestens jeweils eine Instruktion und eine Aufgabe enthalten.`}</FormHelperText>
|
||||
) : null}
|
||||
{/* <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} key={i} />
|
||||
)}
|
||||
{this.props.steps.map((step, i) => (
|
||||
<Step step={step} index={i} key={i} />
|
||||
))}
|
||||
|
||||
{/*submit or reset*/}
|
||||
{this.state.tutorial !== 'delete' ?
|
||||
<div>
|
||||
<Divider variant='fullWidth' style={{ margin: '30px 0 10px 0' }} />
|
||||
{this.state.tutorial === 'new' ?
|
||||
<div>
|
||||
<Button style={{ marginRight: '10px', marginTop: '10px' }} variant='contained' color='primary' onClick={() => this.submitNew()}>Tutorial erstellen</Button>
|
||||
<Button style={{ marginTop: '10px' }} variant='contained' onClick={() => this.resetFull()}>Zurücksetzen</Button>
|
||||
</div>
|
||||
: <div>
|
||||
<Button style={{ marginRight: '10px', marginTop: '10px' }} variant='contained' color='primary' onClick={() => this.submitUpdate()}>Tutorial ändern</Button>
|
||||
<Button style={{ marginTop: '10px' }} variant='contained' onClick={() => this.resetTutorial()}>Zurücksetzen</Button>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
: null}
|
||||
{/*submit or reset*/}
|
||||
{this.state.tutorial !== "delete" ? (
|
||||
<div>
|
||||
<Divider
|
||||
variant="fullWidth"
|
||||
style={{ margin: "30px 0 10px 0" }}
|
||||
/>
|
||||
{this.state.tutorial === "new" ? (
|
||||
<div>
|
||||
<Button
|
||||
style={{ marginRight: "10px", marginTop: "10px" }}
|
||||
variant="contained"
|
||||
color="primary"
|
||||
onClick={() => this.submitNew()}
|
||||
>
|
||||
Tutorial erstellen
|
||||
</Button>
|
||||
<Button
|
||||
style={{ marginTop: "10px" }}
|
||||
variant="contained"
|
||||
onClick={() => this.resetFull()}
|
||||
>
|
||||
Zurücksetzen
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
<div>
|
||||
<Button
|
||||
style={{ marginRight: "10px", marginTop: "10px" }}
|
||||
variant="contained"
|
||||
color="primary"
|
||||
onClick={() => this.submitUpdate()}
|
||||
>
|
||||
Tutorial ändern
|
||||
</Button>
|
||||
<Button
|
||||
style={{ marginTop: "10px" }}
|
||||
variant="contained"
|
||||
onClick={() => this.resetTutorial()}
|
||||
>
|
||||
Zurücksetzen
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<Backdrop className={this.props.classes.backdrop} open={this.props.isProgress}>
|
||||
<Backdrop
|
||||
className={this.props.classes.backdrop}
|
||||
open={this.props.isProgress}
|
||||
>
|
||||
<CircularProgress color="inherit" />
|
||||
</Backdrop>
|
||||
</div>
|
||||
: null}
|
||||
) : null}
|
||||
|
||||
{this.state.tutorial === 'delete' && this.props.id !== '' ?
|
||||
{this.state.tutorial === "delete" && this.props.id !== "" ? (
|
||||
<Button
|
||||
className={this.props.classes.errorButton}
|
||||
variant='contained'
|
||||
color='primary'
|
||||
onClick={() => this.props.deleteTutorial()}>Tutorial löschen</Button>
|
||||
: null}
|
||||
variant="contained"
|
||||
color="primary"
|
||||
onClick={() => this.props.deleteTutorial()}
|
||||
>
|
||||
Tutorial löschen
|
||||
</Button>
|
||||
) : null}
|
||||
|
||||
<Dialog
|
||||
open={this.state.open}
|
||||
maxWidth={this.state.string ? 'md' : 'sm'}
|
||||
maxWidth={this.state.string ? "md" : "sm"}
|
||||
fullWidth={this.state.string}
|
||||
title={this.state.title}
|
||||
content={this.state.content}
|
||||
onClose={this.toggle}
|
||||
onClick={this.toggle}
|
||||
button={'Schließen'}
|
||||
button={"Schließen"}
|
||||
actions={
|
||||
this.state.string ?
|
||||
this.state.string ? (
|
||||
<div>
|
||||
<Button disabled={this.props.error.json || this.props.json === ''} variant='contained' onClick={() => { this.toggle(); this.props.progress(true); this.readJson(this.props.json, false); }} color="primary">Bestätigen</Button>
|
||||
<Button onClick={() => { this.toggle(); this.props.jsonString(''); }} color="primary">Abbrechen</Button>
|
||||
<Button
|
||||
disabled={this.props.error.json || this.props.json === ""}
|
||||
variant="contained"
|
||||
onClick={() => {
|
||||
this.toggle();
|
||||
this.props.progress(true);
|
||||
this.readJson(this.props.json, false);
|
||||
}}
|
||||
color="primary"
|
||||
>
|
||||
Bestätigen
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => {
|
||||
this.toggle();
|
||||
this.props.jsonString("");
|
||||
}}
|
||||
color="primary"
|
||||
>
|
||||
Abbrechen
|
||||
</Button>
|
||||
</div>
|
||||
: null
|
||||
) : null
|
||||
}
|
||||
>
|
||||
{this.state.string ?
|
||||
<Textfield value={this.props.json} property={'json'} label={'JSON'} multiline error={this.props.error.json} />
|
||||
: null}
|
||||
{this.state.string ? (
|
||||
<Textfield
|
||||
value={this.props.json}
|
||||
property={"json"}
|
||||
label={"JSON"}
|
||||
multiline
|
||||
error={this.props.error.json}
|
||||
/>
|
||||
) : null}
|
||||
</Dialog>
|
||||
|
||||
<Snackbar
|
||||
@@ -415,10 +612,9 @@ class Builder extends Component {
|
||||
type={this.state.type}
|
||||
key={this.state.key}
|
||||
/>
|
||||
|
||||
</div>
|
||||
);
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
Builder.propTypes = {
|
||||
@@ -434,7 +630,6 @@ Builder.propTypes = {
|
||||
resetTutorialBuilder: PropTypes.func.isRequired,
|
||||
tutorialProgress: PropTypes.func.isRequired,
|
||||
title: PropTypes.string.isRequired,
|
||||
badge: PropTypes.string.isRequired,
|
||||
id: PropTypes.string.isRequired,
|
||||
steps: PropTypes.array.isRequired,
|
||||
change: PropTypes.number.isRequired,
|
||||
@@ -444,12 +639,11 @@ Builder.propTypes = {
|
||||
tutorials: PropTypes.array.isRequired,
|
||||
message: PropTypes.object.isRequired,
|
||||
user: PropTypes.object.isRequired,
|
||||
authProgress: PropTypes.bool.isRequired
|
||||
authProgress: PropTypes.bool.isRequired,
|
||||
};
|
||||
|
||||
const mapStateToProps = state => ({
|
||||
const mapStateToProps = (state) => ({
|
||||
title: state.builder.title,
|
||||
badge: state.builder.badge,
|
||||
id: state.builder.id,
|
||||
steps: state.builder.steps,
|
||||
change: state.builder.change,
|
||||
@@ -459,7 +653,19 @@ const mapStateToProps = state => ({
|
||||
tutorials: state.tutorial.tutorials,
|
||||
message: state.message,
|
||||
user: state.auth.user,
|
||||
authProgress: state.auth.progress
|
||||
authProgress: state.auth.progress,
|
||||
});
|
||||
|
||||
export default connect(mapStateToProps, { checkError, readJSON, jsonString, progress, tutorialId, resetTutorialBuilder, getTutorials, resetTutorial, tutorialProgress, clearMessages, deleteTutorial })(withStyles(styles, { withTheme: true })(withRouter(Builder)));
|
||||
export default connect(mapStateToProps, {
|
||||
checkError,
|
||||
readJSON,
|
||||
jsonString,
|
||||
progress,
|
||||
tutorialId,
|
||||
resetTutorialBuilder,
|
||||
getTutorials,
|
||||
resetTutorial,
|
||||
tutorialProgress,
|
||||
clearMessages,
|
||||
deleteTutorial,
|
||||
})(withStyles(styles, { withTheme: true })(withRouter(Builder)));
|
||||
|
||||
@@ -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));
|
||||
|
||||
Reference in New Issue
Block a user