import React, { Component } from 'react'
import Header from '../header/Header'
import Subheader from '../subheader/Subheader'
import { Redirect, Link } from 'react-router-dom'
import './Superuser.css'
import getTranslation from '../../i18n/'
import Cookies from 'universal-cookie';
import Rte from './Rte'
const cookies = new Cookies();
/**
* Form to add content to a page on the landing pages
*/
class SiteContentForm extends Component {
constructor(props) {
super(props);
let id = 0;
let title = '';
let title_de = '';
let title_cz = '';
let title_sl = '';
let title_sk = '';
let title_pl = '';
let text = '';
let text_de = '';
let text_cz = '';
let text_pl = '';
let text_sk = '';
let text_sl = '';
let position = 1;
let activated = 1;
if(Number(props.id) !== 0) {
let filter = props.sitecontent.filter(content => content.id === Number(props.id));
if(filter.length > 0) {
filter = filter[0];
id = filter.id;
title = filter.title;
title_de = filter.title_de;
title_cz = filter.title_cz;
title_pl = filter.title_pl;
title_sk = filter.title_sk;
title_sl = filter.title_sl;
text = filter.text;
text_de = filter.text_de;
text_cz = filter.text_cz;
text_pl = filter.text_pl;
text_sk = filter.text_sk;
text_sl = filter.text_sl;
position = filter.position;
activated = filter.activated;
}
}
this.state = {
redirect: false,
activated: activated,
id: id,
title: title,
title_de: title_de,
title_cz: title_cz,
title_pl: title_pl,
title_sk: title_sk,
title_sl: title_sl,
text: text,
text_de: text_de,
text_cz: text_cz,
text_pl: text_pl,
text_sk: text_sk,
text_sl: text_sl,
position: position,
errors: [],
required: [
"title", "text", "position"
],
deleteButton: false,
deleteButtonExpanded: false
}
}
componentDidMount() {
if(!this.props.user.superuser) {
this.setState({redirect: true})
}
}
/**
* Update the field state on input
* @param {} event
*/
updateField(event) {
const target = event.target;
const name = target.name;
const value = target.type === 'checkbox' ? target.checked : target.value;
let errors = this.state.errors;
if(this.state.required.indexOf(name) !== -1) {
if(value === '') {
errors[name] = true;
} else {
errors[name] = false;
}
}
this.setState({ [name] : value, errors: errors });
}
/**
* Submit the form by dispatching the saveSiteContent action with the form state + JWT token
*/
submitForm() {
let errorMessages = [];
let errors = this.state.errors;
let required = [];
this.state.required.map(field => {
if(this.state[field] === '') {
required.push(field);
errors[field] = true;
}
})
if(required.length > 0) {
errorMessages.push("forms.general.error.message.fields_required");
}
let redirect = false;
if(errorMessages.length === 0) {
let token = cookies.get('token');
redirect = true;
this.props.saveSiteContent(
this.state.id,
this.state.activated,
this.props.page,
this.state.title,
this.state.title_de,
this.state.title_cz,
this.state.title_pl,
this.state.title_sk,
this.state.title_sl,
this.state.text,
this.state.text_de,
this.state.text_cz,
this.state.text_pl,
this.state.text_sk,
this.state.text_sl,
this.state.position,
token)
this.setState({redirect: redirect, errors: errors, errorMessages: errorMessages })
}
}
/**
* Update the description field (RTE)
* @param {} input
* @param {} language
*/
updateText(input, language) {
if(language)
{
this.setState({[language]: input});
} else {
this.setState({text: input});
}
}
/**
* Toggle the delete buttons
*/
toggleDelete() {
this.setState({deleteButtonExpanded: !this.state.deleteButtonExpanded})
}
removeGlossary() {
let token = cookies.get('token');
this.props.removePage(this.props.id, token);
this.setState({redirect: true})
}
render() {
return(
<div>
{this.state.redirect &&
<Redirect to="/experts/superuser" />
}
<Header />
<div className="container container-small">
<Subheader title="expert.subheader.title.contribute" />
<div className="default-element">
<div className="default-element-content">
<h4><i className="fa fa-calendar" aria-hidden="true"></i> Web-portal Page</h4>
<div className="user-profile form-container">
<div className="form-item">
<label className="centered">Title:{this.state.errors.title && <span className="validation-error">{getTranslation('forms.general.error.hints.field_required')}</span>}</label>
<input className={(this.state.errors.title ? 'v-error' : 'v-check')} name="title" type="text" value={this.state.title} placeholder="Enter the title here.." onChange={(event) => this.updateField(event)} />
</div>
<div className="form-item">
<label className="centered">Title DE:</label>
<input name="title_de" type="text" value={this.state.title_de} placeholder="Enter the title here.." onChange={(event) => this.updateField(event)} />
</div>
<div className="form-item">
<label className="centered">Title CZ:</label>
<input name="title_cz" type="text" value={this.state.title_cz} placeholder="Enter the title here.." onChange={(event) => this.updateField(event)} />
</div>
<div className="form-item">
<label className="centered">Title PL:</label>
<input name="title_pl" type="text" value={this.state.title_pl} placeholder="Enter the title here.." onChange={(event) => this.updateField(event)} />
</div>
<div className="form-item">
<label className="centered">Title SK:</label>
<input name="title_sk" type="text" value={this.state.title_sk} placeholder="Enter the title here.." onChange={(event) => this.updateField(event)} />
</div>
<div className="form-item">
<label className="centered">Title SL:</label>
<input name="title_sl" type="text" value={this.state.title_sl} placeholder="Enter the title here.." onChange={(event) => this.updateField(event)} />
</div>
<div className="form-item">
<label className="centered">Position on page:{this.state.errors.position && <span className="validation-error">{getTranslation('forms.general.error.hints.field_required')}</span>}</label>
<input className={(this.state.errors.position ? 'v-error' : 'v-check')} name="position" type="text" value={this.state.position} placeholder="Enter the title here.." onChange={(event) => this.updateField(event)} />
</div>
<div className="form-item">
<label className="centered">Text:{this.state.errors.text && <span className="validation-error">{getTranslation('forms.general.error.hints.field_required')}</span>}</label>
<Rte content={this.state.text} updateText={(input) => this.updateText(input)} />
</div>
<div className="form-item">
<label className="centered">Text: DE</label>
<Rte content={this.state.text_de} updateText={(input) => this.updateText(input, "text_de")} />
</div>
<div className="form-item">
<label className="centered">Text: CZ</label>
<Rte content={this.state.text_cz} updateText={(input) => this.updateText(input, "text_cz")} />
</div>
<div className="form-item">
<label className="centered">Text: PL</label>
<Rte content={this.state.text_pl} updateText={(input) => this.updateText(input, "text_pl")} />
</div>
<div className="form-item">
<label className="centered">Text: SK</label>
<Rte content={this.state.text_sk} updateText={(input) => this.updateText(input, "text_sk")} />
</div>
<div className="form-item">
<label className="centered">Text: SL</label>
<Rte content={this.state.text_sl} updateText={(input) => this.updateText(input, "text_sl")} />
</div>
<div className="user-profile-item">
<button className="btn btn-green btn-icon btn-save" onClick={() => this.submitForm()}>Save text</button>
<Link to="/experts/superuser"><button className="btn btn-gray btn-icon btn-cancel">{getTranslation("forms.general.button.cancel")}</button></Link>
{((!this.state.deleteButtonExpanded) && (this.state.deleteButton)) &&
<button className="btn btn-red btn-icon btn-delete" onClick={() => this.toggleDelete()}>{getTranslation("forms.general.button.delete")}</button>
}
{this.state.deleteButtonExpanded &&
<span>
<button className="btn btn-red btn-icon btn-delete" onClick={() => this.removeGlossary()}>{getTranslation("forms.general.button.confirm_delete")}</button>
<button className="btn btn-gray btn-icon btn-cancel" onClick={() => this.toggleDelete()}>{getTranslation("forms.general.button.cancel_delete")}</button>
</span>
}
</div>
</div>
</div>
</div>
</div>
</div>
)
}
}
export default SiteContentForm