react/src/pages/Instruments.js
import React, { } from 'react';
import { useDispatch } from 'react-redux'
import { Instrument } from '../actions'
import { Dashboard } from '../components/Dashboard'
import { AuthButton } from '../components/AuthButton'
import Button from '@material-ui/core/Button';
import ButtonGroup from '@material-ui/core/ButtonGroup';
import Chip from '@material-ui/core/Chip';
import { Link } from 'react-router-dom';
import { reverse as url } from 'named-urls'
import routes from '../routes'
import { DataTable } from '../components/DataTable'
const Instruments = () => {
const dispatch = useDispatch()
const actions = (row) => {
return (
<>
<ButtonGroup variant="outlined">
{ !row.signed_off && (
<AuthButton type="editor" to={url(routes.instruments.instrument.edit, { instrument_id: row.prefix })} label="Edit"></AuthButton>
)}
<AuthButton type="reader" to={url(routes.instruments.instrument.show, { instrument_id: row.prefix })} label="View"></AuthButton>
<AuthButton type="editor" to={url(routes.instruments.instrument.build.show, { instrument_id: row.prefix })} label="Build"></AuthButton>
<AuthButton type="editor" to={url(routes.instruments.instrument.map.show, { instrument_id: row.prefix })} label="Map"></AuthButton>
</ButtonGroup>
</>
)
}
const headers = ["ID", "Prefix", "Control Contructs", "Q-V Mappings", "Study"]
const rowRenderer = (row) => {
return [row.id, row.prefix, row.ccs, row.qvs, row.study]
}
return (
<div style={{ height: 500, width: '100%' }}>
<Dashboard title={'Instruments'}>
<DataTable actions={actions}
fetch={[dispatch(Instrument.all())]}
stateKey={'instruments'}
searchKeys={['id','prefix', 'label']}
headers={headers}
filters={[{ key: 'study', label: 'Study', options: [] }]}
sortKeys={[{ key: 'id', label: 'ID' }, { key: 'prefix', label: 'Prefix' }, { key: 'study', label: 'Study' }, { key: 'ccs', label: 'Control Constructs' }]}
rowRenderer={rowRenderer}
/>
</Dashboard>
</div>
);
}
export default Instruments;