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()}
|
|
|
|
>
|
2018-05-09 20:10:23 +02:00
|
|
|
{ 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}
|
2018-05-09 20:10:23 +02:00
|
|
|
defaultValue={results[0][key]}
|
2018-04-30 20:08:18 +02:00
|
|
|
/>
|
|
|
|
</label>
|
|
|
|
</div>
|
|
|
|
))
|
2018-05-09 20:10:23 +02:00
|
|
|
}
|
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"
|
2018-05-09 20:10:23 +02:00
|
|
|
disabled={!results[0]._can_be_deleted}
|
2018-04-30 21:38:09 +02:00
|
|
|
onClick={event => onDataDelete(event, target)}
|
2018-05-09 20:10:23 +02:00
|
|
|
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)
|