84 lines
2.8 KiB
JavaScript
84 lines
2.8 KiB
JavaScript
import {createStructuredSelector} from "reselect";
|
|
import {selectBodyshop} from "../../redux/user/user.selectors";
|
|
import {connect} from "react-redux";
|
|
import {useEffect, useState} from "react";
|
|
import axios from "axios";
|
|
import {Card, Space, Table, Timeline} from "antd";
|
|
|
|
const mapStateToProps = createStructuredSelector({
|
|
bodyshop: selectBodyshop,
|
|
});
|
|
const mapDispatchToProps = (dispatch) => ({
|
|
//setUserLanguage: language => dispatch(setUserLanguage(language))
|
|
});
|
|
|
|
export function JobLifecycleComponent({bodyshop, job, ...rest}) {
|
|
const [loading, setLoading] = useState(true);
|
|
const [lifecycleData, setLifecycleData] = useState(null);
|
|
|
|
|
|
useEffect(() => {
|
|
async function getLifecycleData() {
|
|
if (job && job.id) {
|
|
setLoading(true);
|
|
const response = await axios.post("/job/lifecycle", {
|
|
jobids: job.id,
|
|
});
|
|
console.dir(response.data.data.transitions, {depth: null});
|
|
setLifecycleData(response.data.data.transitions);
|
|
setLoading(false);
|
|
}
|
|
}
|
|
|
|
getLifecycleData().catch((err) => {
|
|
console.log(`Something went wrong getting Job Lifecycle Data: ${err.message}`);
|
|
setLoading(false);
|
|
});
|
|
}, [job]);
|
|
|
|
const columnKeys = [
|
|
'start',
|
|
'end',
|
|
'value',
|
|
'prev_value',
|
|
'next_value',
|
|
'duration',
|
|
'type',
|
|
'created_at',
|
|
'updated_at'
|
|
];
|
|
|
|
const columns = columnKeys.map(key => ({
|
|
title: key.charAt(0).toUpperCase() + key.slice(1), // Capitalize the first letter for the title
|
|
dataIndex: key,
|
|
key: key,
|
|
}));
|
|
|
|
return (
|
|
<Card loading={loading} title='Job Lifecycle Component'>
|
|
{!loading ? (
|
|
<Space direction='vertical' style={{width: '100%'}}>
|
|
<Card type='inner' title='Table Format'>
|
|
<Table columns={columns} dataSource={lifecycleData} />
|
|
</Card>
|
|
<Card type='inner' title='Timeline Format'>
|
|
<Timeline>
|
|
{lifecycleData.map((item, index) => (
|
|
<Timeline.Item key={index} color={item.value === 'Open' ? 'green' : item.value === 'Scheduled' ? 'yellow' : 'red'}>
|
|
{item.value} - {new Date(item.start).toLocaleString()}
|
|
</Timeline.Item>
|
|
))}
|
|
</Timeline>
|
|
</Card>
|
|
</Space>
|
|
) : (
|
|
<Card type='inner' title='Loading'>
|
|
Loading Job Timelines....
|
|
</Card>
|
|
)}
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
export default connect(mapStateToProps, mapDispatchToProps)(JobLifecycleComponent);
|