страница событий
This commit is contained in:
Denis
parent
d14c0160ed
commit
7ea4c52966
80
pages/components/Events/InnerMenu/index.js
Normal file
80
pages/components/Events/InnerMenu/index.js
Normal file
@ -0,0 +1,80 @@
|
||||
import React from "react";
|
||||
import Link from "next/link";
|
||||
|
||||
export default class InnerMenu extends React.Component
|
||||
{
|
||||
constructor(props)
|
||||
{
|
||||
super(props);
|
||||
this.menuRef = React.createRef();
|
||||
}
|
||||
|
||||
componentDidMount()
|
||||
{
|
||||
let l = 0;
|
||||
let m = 0;
|
||||
const menu = ["payments", "services", "agreement", "documents", "materials","events","change"];
|
||||
|
||||
for(let i in menu)
|
||||
{
|
||||
if(this.props.router.asPath.indexOf(menu[i]) > -1)
|
||||
{
|
||||
m = i;
|
||||
}
|
||||
}
|
||||
|
||||
for(let i = 0; i < m; i++)
|
||||
{
|
||||
l = l + this.menuRef.current.children[i].getBoundingClientRect().width;
|
||||
}
|
||||
|
||||
this.menuRef.current.scrollLeft = l - 50;
|
||||
}
|
||||
|
||||
render()
|
||||
{
|
||||
const { number } = this.props;
|
||||
|
||||
return (
|
||||
<aside>
|
||||
<ul className="aside_nav" ref={ this.menuRef }>
|
||||
<li>
|
||||
<Link href={`/contract/${ number }/events`} shallow>
|
||||
<a className={ this.props.router && this.props.router.asPath.indexOf("events") > -1 ? "active" : "" }>Все события</a>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href={`/contract/${ number }/change`} shallow>
|
||||
<a className={ this.props.router && this.props.router.asPath.indexOf("change") > -1 ? "active" : "" }>Ограничения</a>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href={`/contract/${ number }/services`} shallow>
|
||||
<a className={ this.props.router && this.props.router.asPath.indexOf("services") > -1 ? "active" : "" }>Платежи</a>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href={`/contract/${ number }/agreement`} shallow>
|
||||
<a className={ this.props.router && this.props.router.asPath.indexOf("agreement") > -1 ? "active" : "" }>Дополнительные услуги</a>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href={`/contract/${ number }/documents`} shallow>
|
||||
<a className={ this.props.router && this.props.router.asPath.indexOf("documents") > -1 ? "active" : "" }>Штрафы</a>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href={`/contract/${ number }/materials`} shallow>
|
||||
<a className={ this.props.router && this.props.router.asPath.indexOf("materials") > -1 ? "active" : "" }>Банки</a>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href={`/contract/${ number }/payments`} shallow>
|
||||
<a className={ this.props.router && this.props.router.asPath.indexOf("payments") > -1 ? "active" : "" }>ПТС</a>
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</aside>
|
||||
)
|
||||
}
|
||||
}
|
||||
210
pages/events.js
Normal file
210
pages/events.js
Normal file
@ -0,0 +1,210 @@
|
||||
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/Events/InnerMenu";
|
||||
|
||||
import {
|
||||
getContractInfo,
|
||||
getContractAgreement,
|
||||
getContractRules,
|
||||
getFile,
|
||||
} from "../actions";
|
||||
|
||||
class ContractPage extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
date: null,
|
||||
car: null,
|
||||
contract_date: null,
|
||||
agreement: null,
|
||||
rules: null,
|
||||
loading: false,
|
||||
search: ""
|
||||
};
|
||||
}
|
||||
|
||||
static getDerivedStateFromProps(nextProps, prevState) {
|
||||
return {
|
||||
date: nextProps.date,
|
||||
car: nextProps.car,
|
||||
contract_date: nextProps.contract_date,
|
||||
agreement: nextProps.agreement,
|
||||
rules: nextProps.rules,
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
if (!this.state.loading && this.props.number !== undefined) {
|
||||
this.setState({ loading: true }, () => {
|
||||
getContractInfo({
|
||||
dispatch: this.props.dispatch,
|
||||
number: this.props.number,
|
||||
})
|
||||
.then((info) => {
|
||||
console.log("info", info);
|
||||
|
||||
getContractRules({
|
||||
dispatch: this.props.dispatch,
|
||||
date: moment(info.date, "YYYY-MM-DD").format("DD.MM.YYYY"),
|
||||
})
|
||||
.then(() => {})
|
||||
.catch(() => {});
|
||||
})
|
||||
.catch(() => {});
|
||||
|
||||
getContractAgreement({
|
||||
dispatch: this.props.dispatch,
|
||||
number: this.props.number,
|
||||
})
|
||||
.then(() => {
|
||||
this.setState({ loading: false });
|
||||
})
|
||||
.catch(() => {});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const { loading, date, car, contract_date, agreement, rules, search } = this.state;
|
||||
const { number } = this.props;
|
||||
|
||||
console.log("rules", rules);
|
||||
|
||||
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" style={{ flexDirection: "column" }}>
|
||||
<h1 className="section_title">События</h1>
|
||||
<h5 style={{ fontSize: "14px" }}>
|
||||
{date !== undefined && date !== null && date !== null && (
|
||||
<> от {moment(date).format("DD.MM.YYYY")}</>
|
||||
)}
|
||||
{car !== undefined && car !== null
|
||||
? ` - ${car.brand.name} ${car.model.name} | ${
|
||||
car.reg_number !== null
|
||||
? car.reg_number
|
||||
: "без рег. номера"
|
||||
} | ${
|
||||
car.vin_number !== null
|
||||
? car.vin_number
|
||||
: "без VIN номера"
|
||||
}`
|
||||
: ""}
|
||||
</h5>
|
||||
</div>
|
||||
<Company />
|
||||
</div>
|
||||
<div className="aside_container about">
|
||||
<InnerMenu number={number} {...this.props} />
|
||||
<article>
|
||||
<div className="contract_search">
|
||||
<form onSubmit={ (event) => { event.preventDefault(); } }>
|
||||
<div className="form_field full">
|
||||
<input type="search" value={ search } placeholder="Поиск" onChange={ (event) => {
|
||||
this._handle_onChange_search(event.target.value);
|
||||
} }/>
|
||||
</div>
|
||||
<button className="button" disabled={ search !== "" ? false : true } onClick={ this._handle_onSearch }>Поиск</button>
|
||||
</form>
|
||||
</div>
|
||||
<ul className="list events-list">
|
||||
<li className="new">
|
||||
<p className="name">
|
||||
<b>
|
||||
Внимание! Просрочена дата возврата СТС по договору:
|
||||
ХХ.ХХ.ХХХХ
|
||||
</b>
|
||||
</p>
|
||||
<p className="type">Важное</p>
|
||||
<p className="date">10.01.2022</p>
|
||||
<p className="action">
|
||||
<a href="">Посмотрите порядок возврата СТС</a> или
|
||||
<a href="">Загрузите скан СТС</a>
|
||||
</p>
|
||||
</li>
|
||||
<li className="new">
|
||||
<p className="name">
|
||||
<b>
|
||||
Внимание! Просрочена дата возврата СТС по договору:
|
||||
ХХ.ХХ.ХХХХ
|
||||
</b>
|
||||
</p>
|
||||
<p className="date">10.01.2022</p>
|
||||
<p className="action">
|
||||
<a href="">Посмотрите порядок возврата СТС</a> или
|
||||
<a href="">Загрузите скан СТС</a>
|
||||
</p>
|
||||
</li>
|
||||
<li className="new">
|
||||
<p className="name">
|
||||
Внимание! Осталось ХХ дней до пролонгации КАСКО по
|
||||
договору №ХХХХ: ХХ.ХХ.ХХХХ. Не забудьте самостоятельно
|
||||
продлить полис ОСАГО
|
||||
</p>
|
||||
<p className="date">10.01.2022</p>
|
||||
<p className="action">
|
||||
<a href="">Подробнее</a>
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<Footer />
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
function mapStateToProps(state, ownProps) {
|
||||
return {
|
||||
contract_date: state.contract.date,
|
||||
date: state.contract.date,
|
||||
car: state.contract.car,
|
||||
agreement: state.contract.agreement,
|
||||
rules: state.contract.rules,
|
||||
};
|
||||
}
|
||||
|
||||
export const getServerSideProps = reduxWrapper.getServerSideProps(
|
||||
(store) =>
|
||||
async ({ req, res, query }) => {
|
||||
return {
|
||||
props: {
|
||||
//number: query.number,
|
||||
number: null,
|
||||
},
|
||||
};
|
||||
}
|
||||
);
|
||||
|
||||
export default withRouter(connect(mapStateToProps)(ContractPage));
|
||||
Loading…
x
Reference in New Issue
Block a user