2017-04-10 16:28:30 +02:00
|
|
|
/**
|
|
|
|
*
|
|
|
|
* TableRow
|
|
|
|
*
|
|
|
|
*/
|
|
|
|
|
|
|
|
import React from 'react';
|
2017-09-18 09:34:29 +02:00
|
|
|
import PropTypes from 'prop-types';
|
2017-09-19 08:34:52 +02:00
|
|
|
import { isEmpty } from 'lodash';
|
2017-04-11 11:34:59 +02:00
|
|
|
|
2017-04-10 16:28:30 +02:00
|
|
|
import styles from './styles.scss';
|
|
|
|
|
2017-05-11 10:54:44 +02:00
|
|
|
class TableRow extends React.Component {
|
2017-04-11 15:38:15 +02:00
|
|
|
constructor(props) {
|
|
|
|
super(props);
|
2017-08-30 17:56:52 +02:00
|
|
|
|
|
|
|
this.handleClick = this.handleClick.bind(this);
|
2017-04-11 15:38:15 +02:00
|
|
|
}
|
|
|
|
|
2017-04-11 18:02:55 +02:00
|
|
|
/**
|
|
|
|
* Return a formatted value according to the
|
|
|
|
* data type and value stored in database
|
|
|
|
*
|
|
|
|
* @param type {String} Data type
|
|
|
|
* @param value {*} Value stored in database
|
|
|
|
* @returns {*}
|
|
|
|
*/
|
|
|
|
getDisplayedValue(type, value) {
|
2017-09-19 13:56:51 +02:00
|
|
|
switch (type.toLowerCase()) {
|
2017-04-11 18:02:55 +02:00
|
|
|
case 'string':
|
2017-09-19 13:56:51 +02:00
|
|
|
return value && !isEmpty(value.toString()) ? value.toString() : '-';
|
2017-04-11 18:02:55 +02:00
|
|
|
case 'integer':
|
2017-09-19 13:56:51 +02:00
|
|
|
return value && !isEmpty(value.toString()) ? value.toString() : '-';
|
2017-06-20 19:19:10 +02:00
|
|
|
case 'boolean':
|
2017-09-19 13:56:51 +02:00
|
|
|
return value && !isEmpty(value.toString()) ? value.toString() : '-';
|
2017-04-11 18:02:55 +02:00
|
|
|
default:
|
|
|
|
return '-';
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2017-08-30 17:56:52 +02:00
|
|
|
// Redirect to the edit page
|
|
|
|
handleClick() {
|
|
|
|
this.context.router.history.push(this.props.destination);
|
2017-05-11 10:54:44 +02:00
|
|
|
}
|
|
|
|
|
2017-04-10 16:28:30 +02:00
|
|
|
render() {
|
2017-04-11 18:02:55 +02:00
|
|
|
// Generate cells
|
2017-08-30 17:56:52 +02:00
|
|
|
const cells = this.props.headers.map((header, i) => (
|
|
|
|
<td key={i}>
|
|
|
|
{this.getDisplayedValue(
|
|
|
|
header.type,
|
|
|
|
this.props.record[header.name]
|
|
|
|
)}
|
|
|
|
</td>
|
|
|
|
));
|
2017-04-11 18:02:55 +02:00
|
|
|
|
2017-08-30 17:56:52 +02:00
|
|
|
// Add actions cell.
|
|
|
|
cells.push(
|
|
|
|
<td key='action' className={styles.actions}>
|
|
|
|
<i className="fa fa-pencil" aria-hidden="true"></i>
|
2017-08-31 17:26:44 +02:00
|
|
|
<i onClick={this.props.handleDelete} id={this.props.record.id} className="fa fa-trash" aria-hidden="true"></i>
|
2017-08-30 17:56:52 +02:00
|
|
|
</td>
|
|
|
|
);
|
2017-04-10 16:28:30 +02:00
|
|
|
|
|
|
|
return (
|
2017-08-30 17:56:52 +02:00
|
|
|
<tr className={styles.tableRow} onClick={() => this.handleClick(this.props.destination)}>
|
2017-04-10 16:28:30 +02:00
|
|
|
{cells}
|
|
|
|
</tr>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2017-04-11 15:38:15 +02:00
|
|
|
TableRow.contextTypes = {
|
2017-09-18 09:34:29 +02:00
|
|
|
router: PropTypes.object.isRequired,
|
2017-04-11 15:38:15 +02:00
|
|
|
};
|
|
|
|
|
2017-04-10 16:28:30 +02:00
|
|
|
TableRow.propTypes = {
|
2017-09-18 09:34:29 +02:00
|
|
|
destination: PropTypes.string.isRequired,
|
|
|
|
handleDelete: PropTypes.func,
|
|
|
|
headers: PropTypes.array.isRequired,
|
|
|
|
record: PropTypes.object.isRequired,
|
2017-04-10 16:28:30 +02:00
|
|
|
};
|
|
|
|
|
2017-08-31 17:26:44 +02:00
|
|
|
TableRow.defaultProps = {
|
|
|
|
handleDelete: () => {},
|
|
|
|
};
|
|
|
|
|
2017-04-10 16:28:30 +02:00
|
|
|
export default TableRow;
|