75 lines
1.9 KiB
JavaScript
75 lines
1.9 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;
|
|
|
|
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>
|
|
{ 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">
|
|
<b>{ 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;
|