87 lines
2.3 KiB
JavaScript
87 lines
2.3 KiB
JavaScript
import React, { Component } from "react";
|
||
import Link from "next/link";
|
||
import numeral from "numeral";
|
||
import moment from "moment";
|
||
|
||
class CalendarCellModal extends Component
|
||
{
|
||
constructor(props)
|
||
{
|
||
super(props);
|
||
this.state = {
|
||
menuOpened: false,
|
||
activeLink: ""
|
||
};
|
||
}
|
||
|
||
toggleMenu = () => {
|
||
this.setState({
|
||
menuOpened: !this.state.menuOpened
|
||
});
|
||
};
|
||
|
||
selected = (text) => {
|
||
this.toggleMenu();
|
||
this.setState({
|
||
activeLink: text
|
||
})
|
||
}
|
||
|
||
render()
|
||
{
|
||
const {menuOpened, activeLink} = this.state;
|
||
const { selected_payment } = this.props;
|
||
|
||
const types = {
|
||
leasing: "Платеж",
|
||
kasko: "КАСКО",
|
||
osago: "ОСАГО",
|
||
fingap: "Safe Finance",
|
||
};
|
||
console.log("selected_payment", selected_payment);
|
||
|
||
return (
|
||
<div className={this.props.open ? "fade opened" : "fade"}>
|
||
<div className="modal">
|
||
<div className="calendar_payment">
|
||
<div className="day">
|
||
{ selected_payment && (
|
||
<>
|
||
<span>{ moment(selected_payment.date, "YYYY-MM-DD").format("DD") }</span> { moment(selected_payment.date).format("MMM") }
|
||
</>
|
||
) }
|
||
</div>
|
||
<div className="payment_table">
|
||
<div className="table_row table_header">
|
||
<div className="table_cell">Договор</div>
|
||
<div className="table_cell">Тип платежа</div>
|
||
<div className="table_cell">Платеж</div>
|
||
</div>
|
||
{ selected_payment && selected_payment.payments.map((payment, index) => (
|
||
<div className="table_row" key={ index }>
|
||
<div className="table_cell">
|
||
<Link href={`/contract/${ payment.contract.number }/payments`}>
|
||
<a>№{ payment.contract.number } от { moment(payment.contract.date, "DD-MM-YYYY").format("DD.MM.YYYY") }</a>
|
||
</Link>
|
||
</div>
|
||
<div className="table_cell">
|
||
{ types[payment.type] }
|
||
</div>
|
||
<div className="table_cell">
|
||
<b style={{ whiteSpace: "nowrap" }}>{ numeral(payment.total_amount).format(' ., ') } ₽</b>
|
||
</div>
|
||
</div>
|
||
)) }
|
||
</div>
|
||
</div>
|
||
<div className="modal_footer">
|
||
<button className="button button-blue" onClick={() => this.props.close()}>Закрыть</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
}
|
||
|
||
export default CalendarCellModal;
|