141 lines
4.0 KiB
JavaScript
141 lines
4.0 KiB
JavaScript
import React from "react";
|
|
import Head from 'next/head';
|
|
import Image from 'next/image';
|
|
import { connect } from "react-redux";
|
|
import { withRouter } from 'next/router';
|
|
import moment from "moment";
|
|
import { SpinnerCircular } from 'spinners-react';
|
|
|
|
import { reduxWrapper } from '../../store';
|
|
|
|
import Header from '../components/Header';
|
|
import Footer from '../components/Footer';
|
|
import Company from "../components/Company";
|
|
import InnerMenu from "./components/InnerMenu";
|
|
import DownloadPdfButton from "../components/DownloadPdfButton";
|
|
|
|
import { getContractInfo, getContractAgreement, getFile } from "../../actions";
|
|
|
|
class ContractPage extends React.Component
|
|
{
|
|
constructor(props)
|
|
{
|
|
super(props);
|
|
this.state = {
|
|
contract_date: null,
|
|
agreement: null,
|
|
loading: false,
|
|
}
|
|
}
|
|
|
|
static getDerivedStateFromProps(nextProps, prevState)
|
|
{
|
|
return {
|
|
contract_date: nextProps.contract_date,
|
|
agreement: nextProps.agreement,
|
|
};
|
|
}
|
|
|
|
componentDidMount()
|
|
{
|
|
if(!this.state.loading && this.props.number !== undefined)
|
|
{
|
|
this.setState({ loading: true }, () =>
|
|
{
|
|
getContractInfo({ dispatch: this.props.dispatch, number: this.props.number });
|
|
|
|
getContractAgreement({ dispatch: this.props.dispatch, number: this.props.number }).then(() => {
|
|
this.setState({ loading: false });
|
|
}).catch(() => {});
|
|
});
|
|
}
|
|
}
|
|
|
|
render()
|
|
{
|
|
const { loading, contract_date, agreement, } = this.state;
|
|
const { number } = this.props;
|
|
|
|
const types = {
|
|
contracts: "Договор",
|
|
redemptions: "Выкупные документы",
|
|
agreements: "Дополнительное соглашение",
|
|
assignments: "Договор цессии",
|
|
};
|
|
|
|
return (
|
|
<React.Fragment>
|
|
<Head>
|
|
<title>ЛК Эволюция автолизинга</title>
|
|
<meta
|
|
name="description"
|
|
content="ЛК Эволюция автолизинга"
|
|
/>
|
|
</Head>
|
|
<Header { ...this.props }/>
|
|
<main>
|
|
<section>
|
|
<div className="clear"></div>
|
|
<div className="container">
|
|
<div className="title_wrapper">
|
|
<div className="left">
|
|
<h1 className="section_title">Договор №{ number }{ contract_date !== null && (<> от { moment(contract_date).format("DD.MM.YYYY") }</>)}</h1>
|
|
</div>
|
|
<Company/>
|
|
</div>
|
|
<div className="aside_container about">
|
|
<InnerMenu number={ number } { ...this.props }/>
|
|
<article>
|
|
{ loading ? (
|
|
<div className="table_row table_header" style={{ minHeight: 300, display: "flex", justifyContent: "center", alignItems: "center" }}>
|
|
<SpinnerCircular size={90} thickness={51} speed={100} color="rgba(28, 1, 169, 1)" secondaryColor="rgba(236, 239, 244, 1)" />
|
|
</div>
|
|
) : (
|
|
<div className="dosc_list">
|
|
{ agreement !== undefined && agreement !== null && agreement.map((document, index) => (
|
|
<React.Fragment key={ index }>
|
|
{ document.documents !== undefined && document.documents !== null && document.documents.map((file, file_index) => (
|
|
<div className="row" key={ file_index }>
|
|
<p className="doc_name i-pdf">
|
|
{ types[document.type] }
|
|
<span style={{ width: "100%"}}>{ file.number } от { file.date }</span>
|
|
{ file.type !== undefined && <span>{ file.type }</span> }
|
|
</p>
|
|
<DownloadPdfButton id={ file.url } filename={ `${ file.url }.pdf` }/>
|
|
</div>
|
|
)) }
|
|
</React.Fragment>
|
|
)) }
|
|
</div>
|
|
) }
|
|
</article>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
<Footer/>
|
|
</React.Fragment>
|
|
);
|
|
}
|
|
}
|
|
|
|
function mapStateToProps(state, ownProps)
|
|
{
|
|
return {
|
|
contract_date: state.contract.date,
|
|
agreement: state.contract.agreement,
|
|
}
|
|
}
|
|
|
|
export const getServerSideProps = reduxWrapper.getServerSideProps(store =>
|
|
async ({ req, res, query }) =>
|
|
{
|
|
return {
|
|
props: {
|
|
number: query.number,
|
|
}
|
|
}
|
|
}
|
|
);
|
|
|
|
export default withRouter(connect(mapStateToProps)(ContractPage)); |