147 lines
4.7 KiB
React
Raw Normal View History

2018-04-30 20:08:18 +02:00
import React from 'react'
import { Helmet } from 'react-helmet'
import { connect } from 'react-redux'
2018-04-30 21:38:09 +02:00
import { deleteData, updateData } from '../../../actions/index'
2018-05-01 13:03:40 +02:00
import { history } from '../../../index'
2018-04-30 20:08:18 +02:00
class AdminDetail extends React.Component {
constructor(props, context) {
super(props, context)
this.state = {
isInEdition: false,
}
}
render() {
const {
message,
onDataUpdate,
2018-04-30 21:38:09 +02:00
onDataDelete,
2018-04-30 20:08:18 +02:00
results,
target,
} = this.props
const { isInEdition } = this.state
const title = target.charAt(0).toUpperCase() + target.slice(1)
return (
<div>
<Helmet>
<title>mpwo - Admin</title>
</Helmet>
<h1 className="page-title">
Administration - {title}
</h1>
{message ? (
<code>{message}</code>
) : (
results.length === 1 && (
<div className="container">
<div className="row">
<div className="col-md-2" />
<div className="col-md-8 card">
<div className="card-body">
<form onSubmit={event =>
event.preventDefault()}
>
{ Object.keys(results[0])
.filter(key => key.charAt(0) !== '_')
.map(key => (
2018-04-30 20:08:18 +02:00
<div className="form-group" key={key}>
<label>
{key}:
<input
className="form-control input-lg"
name={key}
readOnly={key === 'id' || !isInEdition}
defaultValue={results[0][key]}
2018-04-30 20:08:18 +02:00
/>
</label>
</div>
))
}
2018-04-30 20:08:18 +02:00
{isInEdition ? (
<div>
<input
type="submit"
className="btn btn-primary btn-lg btn-block"
onClick={event => {
onDataUpdate(event, target)
this.setState({ isInEdition: false })
}
}
value="Submit"
/>
<input
type="submit"
className="btn btn-secondary btn-lg btn-block"
onClick={event => {
event.target.form.reset()
this.setState({ isInEdition: false })
}}
value="Cancel"
/>
</div>
) : (
<div>
<input
type="submit"
className="btn btn-primary btn-lg btn-block"
onClick={() => this.setState({ isInEdition: true })}
value="Edit"
/>
<input
type="submit"
className="btn btn-danger btn-lg btn-block"
disabled={!results[0]._can_be_deleted}
2018-04-30 21:38:09 +02:00
onClick={event => onDataDelete(event, target)}
title={results[0]._can_be_deleted
? ''
: 'Can\'t be deleted, associated data exist'}
2018-04-30 20:08:18 +02:00
value="Delete"
/>
2018-05-01 13:03:40 +02:00
<input
type="submit"
className="btn btn-secondary btn-lg btn-block"
onClick={() => history.push(`/admin/${target}`)}
value="Back to the list"
/>
2018-04-30 20:08:18 +02:00
</div>
)}
</form>
</div>
</div>
<div className="col-md-2" />
</div>
</div>
)
)}
</div>
)
}
}
export default connect(
state => ({
message: state.message,
}),
dispatch => ({
2018-04-30 21:38:09 +02:00
onDataDelete: (e, target) => {
const id = e.target.form.id.value
dispatch(deleteData(target, id))
},
2018-04-30 20:08:18 +02:00
onDataUpdate: (e, target) => {
const data = [].slice
.call(e.target.form.elements)
.reduce(function(map, obj) {
if (obj.name) {
map[obj.name] = obj.value
}
return map
}, {})
dispatch(updateData(target, data))
},
})
)(AdminDetail)