310 lines
9.2 KiB
JavaScript
310 lines
9.2 KiB
JavaScript
import React from "react";
|
|
import Link from "next/link";
|
|
import { connect } from "react-redux";
|
|
import { getContractEvents, getContractFines, getContractInfo, } from "../../../../actions";
|
|
|
|
class InnerMenu extends React.Component
|
|
{
|
|
constructor(props)
|
|
{
|
|
super(props);
|
|
this.menuRef = React.createRef();
|
|
|
|
this.state = {
|
|
loaded: false,
|
|
loading: true,
|
|
menuOpened: false,
|
|
contracts_info: {},
|
|
contract_events: {},
|
|
contract_fines: {},
|
|
};
|
|
}
|
|
|
|
static getDerivedStateFromProps(nextProps, prevState)
|
|
{
|
|
return {
|
|
contracts_info: nextProps.contracts_info,
|
|
contract_events: nextProps.contract_events,
|
|
contract_fines: nextProps.contract_fines,
|
|
};
|
|
}
|
|
|
|
componentDidMount()
|
|
{
|
|
console.log("Contact", "InnerMenu", "componentDidMount()");
|
|
|
|
const { loaded, loading, contracts_info, contract_events, contract_fines } = this.state;
|
|
|
|
console.log("CDM", "\n\n");
|
|
console.log("CDM", "contracts_info", contracts_info);
|
|
console.log("CDM", "!".repeat(10));
|
|
console.log("CDM", "contract_events", contract_events);
|
|
console.log("CDM", "!".repeat(10));
|
|
console.log("CDM", "contract_fines", contract_fines);
|
|
console.log("CDM", "!".repeat(10));
|
|
|
|
if(!loaded &&
|
|
contracts_info !== undefined && Object.keys(contracts_info).length > 0 &&
|
|
contract_events !== undefined && Object.keys(contract_events).length > 0 &&
|
|
contract_fines !== undefined && Object.keys(contract_fines).length > 0
|
|
) {
|
|
this.setState({ loaded: true }, () =>
|
|
{
|
|
this._loadMenu();
|
|
});
|
|
}
|
|
}
|
|
|
|
componentDidUpdate(prevProps, prevState)
|
|
{
|
|
const { loaded, contracts_info, contract_events, contract_fines } = this.state;
|
|
|
|
console.log("CDU", "\n\n");
|
|
console.log("CDU", "contracts_info", contracts_info);
|
|
console.log("CDU", "?".repeat(10));
|
|
console.log("CDU", "contract_events", contract_events);
|
|
console.log("CDU", "?".repeat(10));
|
|
console.log("CDU", "contract_fines", contract_fines);
|
|
console.log("CDU", "?".repeat(10));
|
|
|
|
if(!loaded &&
|
|
contracts_info !== undefined && Object.keys(contracts_info).length > 0 &&
|
|
contract_events !== undefined && Object.keys(contract_events).length > 0 &&
|
|
contract_fines !== undefined && Object.keys(contract_fines).length > 0
|
|
) {
|
|
this.setState({ loaded: true }, () =>
|
|
{
|
|
this._loadMenu();
|
|
});
|
|
}
|
|
}
|
|
|
|
_loadMenu = () =>
|
|
{
|
|
console.log("Contract", "InnerMenu", "_loadMenu()");
|
|
|
|
const { number, dispatch } = this.props;
|
|
const { contracts_info, contract_events, contract_fines } = this.state;
|
|
|
|
Promise.all([
|
|
new Promise((resolve) =>
|
|
{
|
|
console.log(11111);
|
|
if(contracts_info[ number ] === undefined)
|
|
{
|
|
console.log(10);
|
|
getContractInfo({ dispatch, number })
|
|
.then(() => { console.log(11); resolve(); })
|
|
.catch(() => { console.log(12); resolve(); });
|
|
}
|
|
else
|
|
{
|
|
console.log(13);
|
|
resolve();
|
|
}
|
|
}),
|
|
new Promise((resolve) =>
|
|
{
|
|
console.log(22222);
|
|
if(contract_events[ number ] === undefined)
|
|
{
|
|
console.log(20);
|
|
getContractEvents({ dispatch, contract: number })
|
|
.then(() => { console.log(21); resolve(); })
|
|
.catch(() => { console.log(22); resolve(); });
|
|
}
|
|
else
|
|
{
|
|
console.log(23);
|
|
resolve();
|
|
}
|
|
}),
|
|
new Promise((resolve) =>
|
|
{
|
|
console.log(33333);
|
|
if(contract_fines[ number ] === undefined)
|
|
{
|
|
console.log(30);
|
|
getContractFines({ dispatch, contract: number })
|
|
.then(() => { console.log(31); resolve(); })
|
|
.catch(() => { console.log(32); resolve(); });
|
|
}
|
|
else
|
|
{
|
|
console.log(33);
|
|
resolve();
|
|
}
|
|
}),
|
|
])
|
|
.then(() =>
|
|
{
|
|
console.log("******************************");
|
|
let l = 0;
|
|
let m = 0;
|
|
const menu = [ "payments", "change", "services", "agreement", "documents", "materials", "events", "fines" ];
|
|
|
|
for(let i in menu)
|
|
{
|
|
if(this.props.router.asPath.indexOf(menu[i]) > -1)
|
|
{
|
|
m = i;
|
|
}
|
|
}
|
|
|
|
//setTimeout(() =>
|
|
//{
|
|
this.setState({ loading: false }, () =>
|
|
{
|
|
if(this.menuRef.current !== null)
|
|
{
|
|
console.log("-".repeat(30));
|
|
console.log(this.menuRef.current);
|
|
console.log("-".repeat(30));
|
|
|
|
for(let i = 0; i < m; i++)
|
|
{
|
|
//console.log("-----", this.menuRef.current.children[i]);
|
|
if(this.menuRef.current.children[i] !== undefined)
|
|
{
|
|
console.log("this.menuRef.current.children[i]", this.menuRef.current.children[i]);
|
|
console.log(".".repeat(30));
|
|
|
|
l = l + this.menuRef.current.children[i].getBoundingClientRect().width;
|
|
console.log("W", this.menuRef.current.children[i].getBoundingClientRect().width, l);
|
|
}
|
|
}
|
|
|
|
//setTimeout(() =>
|
|
//{
|
|
if(this.menuRef.current !== null)
|
|
{
|
|
this.menuRef.current.scrollLeft = l - 50;
|
|
}
|
|
//}, 10);
|
|
}
|
|
});
|
|
//}, 50);
|
|
});
|
|
}
|
|
|
|
_handle_onToggleMenu = () =>
|
|
{
|
|
this.setState({
|
|
menuOpened: !this.state.menuOpened,
|
|
});
|
|
}
|
|
|
|
_getActiveLink = (route) =>
|
|
{
|
|
if (route.indexOf("/payments") > -1) return "График платежей";
|
|
if (route.indexOf("/change") > -1) return "Изменить график";
|
|
if (route.indexOf("/services") > -1) return "Дополнительные услуги";
|
|
if (route.indexOf("/agreement") > -1) return "Документы по договору";
|
|
if (route.indexOf("/documents") > -1) return "Закрывающие документы";
|
|
if (route.indexOf("/materials") > -1) return "Документы по ФСБУ 25/2018";
|
|
if (route.indexOf("/events") > -1) return "События по договору";
|
|
if (route.indexOf("/fines") > -1) return "Штрафы ГИБДД";
|
|
|
|
return null;
|
|
}
|
|
|
|
_getFinesCount = () =>
|
|
{
|
|
const { number, } = this.props;
|
|
const { contract_fines } = this.state;
|
|
let c = 0;
|
|
|
|
if(contract_fines[number] !== undefined && contract_fines[number] !== null)
|
|
{
|
|
for(let i in contract_fines[number])
|
|
{
|
|
if(contract_fines[number][i].status_code === "NotPaid")
|
|
{
|
|
c++;
|
|
}
|
|
}
|
|
}
|
|
|
|
return c;
|
|
}
|
|
|
|
render()
|
|
{
|
|
const { number, status } = this.props;
|
|
const { loading, menuOpened, contracts_info, contract_events, contract_fines } = this.state;
|
|
const count_events = contract_events[number] !== undefined && contract_events[number] !== null ? Object.keys(contract_events[number]).length : 0;
|
|
const count_fines = this._getFinesCount();
|
|
|
|
if(!loading)
|
|
{
|
|
console.log("contracts_info", contracts_info);
|
|
}
|
|
|
|
return (
|
|
<aside>
|
|
<button className="nav_toggle" onClick={ this._handle_onToggleMenu }>
|
|
{ this.props.router && this._getActiveLink(this.props.router.asPath) }
|
|
</button>
|
|
{ !loading && (
|
|
<ul className={ menuOpened ? "aside_nav open" : "aside_nav" } ref={ this.menuRef }>
|
|
<li>
|
|
<Link href={`/contract/${ number }/payments`} shallow>
|
|
<a className={ this.props.router && this.props.router.asPath.indexOf("payments") > -1 ? "active" : "" }>График платежей</a>
|
|
</Link>
|
|
</li>
|
|
{ contracts_info[ number ].status !== undefined && contracts_info[ number ].status !== null && [46, 36, 37, 35].indexOf(contracts_info[ number ].status) > -1 && (
|
|
<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" : "" }>Документы по ФСБУ 25/2018</a>
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link href={`/contract/${ number }/events`} shallow>
|
|
<a className={ this.props.router && this.props.router.asPath.indexOf("events") > -1 ? "active" : "" }>События по договору { count_events > 0 && (<span>{ count_events }</span>) }</a>
|
|
</Link>
|
|
</li>
|
|
{ contract_fines[number] !== undefined && contract_fines[number] !== null && count_fines > 0 && (
|
|
<li>
|
|
<Link href={`/contract/${ number }/fines`} shallow>
|
|
<a className={ this.props.router && this.props.router.asPath.indexOf("fines") > -1 ? "active" : "" }>Штрафы ГИБДД{ count_fines > 0 && (<span>{ count_fines }</span>) }</a>
|
|
</Link>
|
|
</li>
|
|
) }
|
|
</ul>
|
|
) }
|
|
</aside>
|
|
)
|
|
}
|
|
}
|
|
|
|
function mapStateToProps(state, ownProps)
|
|
{
|
|
return {
|
|
contracts_info: state.contracts_info,
|
|
contract_events: state.contract_events,
|
|
contract_fines: state.contract_fines,
|
|
};
|
|
}
|
|
|
|
export default connect(mapStateToProps)(InnerMenu); |