Files
bodyshop/client/src/components/job-close-ro-guard/job-close-ro-guard.container.jsx
2024-03-25 15:38:38 -07:00

98 lines
3.5 KiB
JavaScript

import React, { useCallback, useState } from 'react';
import { Badge, Card, Col, Collapse, Row, Space } from 'antd';
import { useTranslation } from 'react-i18next';
import { connect } from 'react-redux';
import { createStructuredSelector } from 'reselect';
import { selectJobReadOnly } from '../../redux/application/application.selectors';
import { selectBodyshop } from '../../redux/user/user.selectors';
import JobCloseRoGuardLabor from './job-close-ro-gaurd.labor';
import JobCloseRoGuardAr from './job-close-ro-guard.ar';
import JobCloseRoGuardBills from './job-close-ro-guard.bills';
import JobCloseRoGuardPpd from './job-close-ro-guard.ppd';
import JobCloseRoGuardProfit from './job-close-ro-guard.profit';
import './job-close-ro-guard.styles.scss';
import JobCloseRoGuardSublet from './job-close-ro-guard.sublet';
import JobCloseRoGuardTtLifecycle from './job-close-ro-guard.tt-lifecycle';
const mapStateToProps = createStructuredSelector({
//currentUser: selectCurrentUser
bodyshop: selectBodyshop,
jobRO: selectJobReadOnly,
});
const mapDispatchToProps = (dispatch) => ({
//setUserLanguage: language => dispatch(setUserLanguage(language))
});
export default connect(mapStateToProps, mapDispatchToProps)(JobCloseRoGuardContainer);
const colSpans = {
md: 24,
lg: 12,
xl: 8,
};
export function JobCloseRoGuardContainer({ job, jobRO, bodyshop, form }) {
const { t } = useTranslation();
const [warnings, setWarnings] = useState([]);
const warningCallback = useCallback((warning) => setWarnings((state) => [...state, warning]), []);
return (
<>
{warnings.length > 0 && (
<Card
title={
<Space size="small">
<Badge count={warnings.length} />
{t('jobs.labels.roguardwarnings')}
</Space>
}
>
<ul>
{warnings.map((warning, index) => (
<li key={index}>{warning}</li>
))}
</ul>
</Card>
)}
<Collapse>
<Collapse.Panel forceRender key="roguard" header={t('jobs.labels.roguard')}>
<Row gutter={[32, 32]}>
<JobCloseRoGuardBills job={job} form={form} warningCallback={warningCallback} />
<Col className="ro-guard-col-multiple" md={24} lg={6}>
<Row gutter={[32, 32]} style={{ height: '100%' }}>
<Col span={24}>
<JobCloseRoGuardProfit
job={job}
form={form} //warningCallback={warningCallback}
/>
</Col>
<Col span={24}>
<JobCloseRoGuardAr job={job} form={form} warningCallback={warningCallback} />
</Col>
</Row>
</Col>
<Col className="ro-guard-col" md={24} lg={8}>
<JobCloseRoGuardSublet job={job} warningCallback={warningCallback} />
</Col>
<Col className="ro-guard-col" md={24} lg={10}>
<JobCloseRoGuardLabor job={job} form={form} warningCallback={warningCallback} />
</Col>
<Col className="ro-guard-col" {...colSpans}>
<JobCloseRoGuardPpd job={job} warningCallback={warningCallback} />
</Col>
</Row>
</Collapse.Panel>
<Collapse.Panel header={t('jobs.labels.performance')}>
<Row gutter={[32, 32]}>
<Col className="ro-guard-col" span={24}>
<JobCloseRoGuardTtLifecycle job={job} />
</Col>
</Row>
</Collapse.Panel>
</Collapse>
</>
);
}