308 lines
12 KiB
JavaScript
308 lines
12 KiB
JavaScript
import React from "react";
|
||
import Head from "next/head";
|
||
import Image from "next/image";
|
||
import moment from "moment";
|
||
import 'moment/locale/ru';
|
||
import numeral from "numeral";
|
||
import { SpinnerCircular } from "spinners-react";
|
||
import Link from "next/link";
|
||
|
||
export default class Comparison extends React.Component
|
||
{
|
||
constructor(props)
|
||
{
|
||
super(props);
|
||
this.state = {
|
||
date: null,
|
||
loading: false,
|
||
calculation: null,
|
||
today: moment(),
|
||
show_previous: false,
|
||
mixed_index: 0,
|
||
signatories_show_all: false,
|
||
};
|
||
}
|
||
|
||
componentDidMount()
|
||
{
|
||
if(this.props.signer === undefined)
|
||
{
|
||
if(this.props.signatories !== undefined && this.props.signatories !== null)
|
||
{
|
||
this._handle_onSigner(this.props.signatories[0].signatoryid);
|
||
}
|
||
}
|
||
|
||
const { calculations, calculation_id, } = this.props;
|
||
let calculation = null;
|
||
|
||
for(let i in calculations)
|
||
{
|
||
if(calculations[i].addcontract_number === calculation_id)
|
||
{
|
||
calculation = calculations[i];
|
||
break;
|
||
}
|
||
}
|
||
|
||
this.setState({ calculation : calculation });
|
||
}
|
||
|
||
componentDidUpdate(prevProps, prevState)
|
||
{
|
||
if(prevProps.signatories === undefined || prevProps.signatories === null)
|
||
{
|
||
if(this.props.signer === undefined && this.props.signatories !== undefined && this.props.signatories !== null)
|
||
{
|
||
this._handle_onSigner(this.props.signatories[0].signatoryid);
|
||
}
|
||
}
|
||
}
|
||
|
||
_handle_onSigner = (signer_id) =>
|
||
{
|
||
this.props.onSigner(signer_id);
|
||
}
|
||
|
||
_handle_onOptions = () =>
|
||
{
|
||
if(this.props.editable)
|
||
{
|
||
this.props.onOptions();
|
||
}
|
||
else
|
||
{
|
||
this.props.onBack();
|
||
}
|
||
}
|
||
|
||
_handle_onSignPaper = () =>
|
||
{
|
||
this.props.onSign(0);
|
||
}
|
||
|
||
_handle_onSignEDO = () =>
|
||
{
|
||
this.props.onSign(1);
|
||
}
|
||
|
||
_handle_onMixedPayment = (index) =>
|
||
{
|
||
this.setState({ mixed_index: index });
|
||
}
|
||
|
||
_handle_onShowPrevious = () =>
|
||
{
|
||
this.setState({ show_previous: true });
|
||
}
|
||
|
||
render()
|
||
{
|
||
const { calculation, mixed_index, today, show_previous, signatories_show_all } = this.state;
|
||
const { number, signer, signatories, current, calculated } = this.props;
|
||
|
||
return (
|
||
<article className="compare">
|
||
<div className="compare_top">
|
||
<p>
|
||
Выбранный(ые) варианты изменения графика
|
||
<a className="interactive" onClick={ this._handle_onOptions }>Вернуться к параметрам изменения графика</a>
|
||
</p>
|
||
<button className="button button-blue">Скачать PDF</button>
|
||
</div>
|
||
<div className="compare_data">
|
||
{ calculation !== undefined && calculation !== null && calculation.fix_last_payment_available_comment !== null && (
|
||
<div className="form_field">
|
||
<input type="checkbox" hidden id="" name="" checked={ calculation.fix_last_payment_available_comment.value ? true : false } disabled style={ calculation.fix_last_payment_available_comment.value ? {} : { background: "unset"} } />
|
||
<label htmlFor="">{ calculation.fix_last_payment_available_comment.label }</label>
|
||
</div>
|
||
) }
|
||
{ calculation !== undefined && calculation !== null && calculation.date_offset_type_comment !== null && (
|
||
<div className="form_field">
|
||
<input type="checkbox" hidden id="" name="" checked={ calculation.date_offset_type_comment.value ? true : false } disabled style={ calculation.date_offset_type_comment.value ? {} : { background: "unset"} } />
|
||
<label htmlFor="">{ calculation.date_offset_type_comment.label }</label>
|
||
</div>
|
||
) }
|
||
{ calculation !== undefined && calculation !== null && calculation.insurance_price_result_comment !== null && (
|
||
<div className="form_field">
|
||
<p><span>{ calculation.insurance_price_result_comment.label }:</span> { numeral(calculation.insurance_price_result_comment.value).format(' ., ') } ₽</p>
|
||
</div>
|
||
) }
|
||
{ calculation !== undefined && calculation !== null && calculation.number_paydate_comment !== null && (
|
||
<div className="form_field">
|
||
<p><span>{ calculation.number_paydate_comment.label }:</span> { calculation.number_paydate_comment.value }</p>
|
||
</div>
|
||
) }
|
||
{ calculation !== undefined && calculation !== null && calculation.period_new_comment !== null && (
|
||
<div className="form_field">
|
||
<p><span>{ calculation.period_new_comment.label }:</span> { calculation.period_new_comment.value }</p>
|
||
</div>
|
||
) }
|
||
{ calculation !== undefined && calculation !== null && calculation.sum_comment !== null && (
|
||
<div className="form_field">
|
||
<p><span>{ calculation.sum_comment.label }</span> { numeral(calculation.sum_comment.value).format(' ., ') } ₽</p>
|
||
</div>
|
||
) }
|
||
{/*}
|
||
<div className="form_field">
|
||
<input type="checkbox" hidden id="" name="" checked disabled />
|
||
<label htmlFor="">Изменить дату платежа</label>
|
||
</div>
|
||
<div className="form_field">
|
||
<input type="checkbox" hidden id="" name="" checked disabled />
|
||
<label htmlFor="">Изменение кол-ва платежей</label>
|
||
</div>
|
||
<div className="form_field">
|
||
<p>
|
||
<span>Дата платежа:</span> 1 месяц (37 платежей)
|
||
</p>
|
||
</div>
|
||
<div className="form_field">
|
||
<p>
|
||
<span>Тип каникул:</span> С увеличением срока
|
||
</p>
|
||
</div>
|
||
{*/}
|
||
</div>
|
||
<div className="compare_tables">
|
||
<div className="compare_table">
|
||
<p className="table_title">Текущий график</p>
|
||
<div className="table_body">
|
||
<div className="table_row table_header">
|
||
<div>№</div>
|
||
<div>Дата лизингового платежа</div>{/* className="sortable" */}
|
||
<div>Лизинговый платеж с НДС ₽</div>{/* className="sortable" */}
|
||
<div>Сумма досрочного выкупа</div>{/* className="sortable" */}
|
||
</div>
|
||
{ !show_previous && (
|
||
<div className="table_row row-button" >
|
||
<button className="button button-gray" onClick={ this._handle_onShowPrevious }>
|
||
Показать прошедшие платежи
|
||
</button>
|
||
</div>
|
||
) }
|
||
{ current !== undefined &&
|
||
current !== null &&
|
||
current.map((payment, index) =>
|
||
{
|
||
if(!show_previous && moment(payment.plandate) < today) { return null; }
|
||
return (
|
||
<div key={ `current_${ index }` } className="table_row" >
|
||
<div>{ payment.name }</div>
|
||
<div>{ moment(payment.plandate, "YYYY.MM.DD").format("DD.MM.YYYY") }</div>
|
||
<div>{ numeral(payment.sum).format(' ., ') } ₽</div>
|
||
<div>{ numeral(payment.early_repayment_sum).format(' ., ') } ₽</div>
|
||
</div>
|
||
)
|
||
})
|
||
}
|
||
</div>
|
||
</div>
|
||
<div className="compare_table">
|
||
{ calculation !== undefined && calculation !== null && (
|
||
<p className="table_title">
|
||
Изменения с платежа №{ calculation.label }
|
||
</p>
|
||
) }
|
||
<div className="table_body" >
|
||
<div className="table_row table_header">
|
||
<div>№</div>
|
||
<div>Дата лизингового платежа</div>{/* className="sortable" */}
|
||
<div>Лизинговый платеж с НДС ₽</div>{/* className="sortable" */}
|
||
<div>Сумма досрочного выкупа</div>{/* className="sortable" */}
|
||
</div>
|
||
{ !show_previous && (
|
||
<div className="table_row row-button">
|
||
<button className="button button-gray" onClick={ this._handle_onShowPrevious }>
|
||
Показать прошедшие платежи
|
||
</button>
|
||
</div>
|
||
) }
|
||
{ calculated !== undefined &&
|
||
calculated !== null &&
|
||
calculated.map((payment, index) =>
|
||
{
|
||
if(!show_previous && moment(payment.plandate) < today) { return null; }
|
||
return (
|
||
<div key={ `current_${ index }` } className="table_row">
|
||
<div>{ payment.name }</div>
|
||
<div>{ moment(payment.plandate, "YYYY.MM.DD").format("DD.MM.YYYY") }</div>
|
||
<div>{ numeral(payment.sum).format(' ., ') } ₽</div>
|
||
<div>{ numeral(payment.early_repayment_sum).format(' ., ') } ₽</div>
|
||
</div>
|
||
)
|
||
})
|
||
}
|
||
</div>
|
||
</div>
|
||
<div className="compare_table touchable">
|
||
<div className="table_body">
|
||
{ !show_previous && (
|
||
<button className="button button-gray" style={{ position: "relative" }} onClick={ this._handle_onShowPrevious }>
|
||
Показать прошедшие платежи
|
||
</button>
|
||
) }
|
||
{ current !== undefined &&
|
||
current !== null &&
|
||
calculated !== undefined &&
|
||
calculated !== null &&
|
||
current.map((payment, index) =>
|
||
{
|
||
if(!show_previous && moment(payment.plandate) < today) { return null; }
|
||
return (
|
||
<div key={ `mixed_${ index }` } className={ `table_row ${ index === mixed_index && "opened" }` } onClick={ () => this._handle_onMixedPayment(index) }>
|
||
<p className="row_title">Платеж №{ payment.name }</p>
|
||
<div className="table_group">
|
||
<div className="table_cell">
|
||
<div><span>Текущий график</span> { moment(payment.plandate, "YYYY.MM.DD").format("DD.MM.YYYY") }</div>
|
||
<div><span>На сумму</span> { numeral(payment.sum).format(' ., ') } ₽</div>
|
||
<div><span>Сумма досрочного выкупа</span> { numeral(payment.early_repayment_sum).format(' ., ') } ₽</div>
|
||
</div>
|
||
<div className="table_cell">
|
||
<div><span>Новый график</span> { calculated[index] !== undefined ? moment(calculated[index].plandate, "YYYY.MM.DD").format("DD.MM.YYYY") : (`-`) }</div>
|
||
<div><span>На сумму</span> { calculated[index] !== undefined ? (<>{ numeral(calculated[index].sum).format(' ., ') } ₽</>) : (`-`) }</div>
|
||
<div><span>Сумма досрочного выкупа</span> { calculated[index] !== undefined ? (<>{ numeral(calculated[index].early_repayment_sum).format(' ., ') } ₽</>) : (`-`) }</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
})
|
||
}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="compare_suscr">
|
||
<p className="block_title">
|
||
Подписанты
|
||
{ signatories.length > 3 && (
|
||
<a className="interactive" onClick={() => { this.setState({ signatories_show_all: true })}}>Все</a>
|
||
)}
|
||
</p>
|
||
<div className="feed static">
|
||
{ signatories.slice(0, signatories_show_all ? signatories.length : 3).map((person, index) => (
|
||
<div className="feed_item user" key={ person.signatoryid }>
|
||
<input type="radio" hidden id={ `user_${ person.signatoryid }` } name={ `user_${ person.signatoryid }` } checked={ person.signatoryid === signer } onChange={ () => this._handle_onSigner(person.signatoryid) }/>
|
||
<label htmlFor={ `user_${ person.signatoryid }` }></label>
|
||
<img src="/assets/images/icons/avatar.svg" alt="" />
|
||
<div>
|
||
<p className="item_title">{ `${ person.lastname } ${ person.firstname } ${ person.middlename }` }</p>
|
||
<p className="item_desc">{ person.jobtitle }</p>
|
||
</div>
|
||
</div>
|
||
)) }
|
||
</div>
|
||
</div>
|
||
<div className="btn_group">
|
||
<button className="button button-blue" onClick={ this._handle_onSignPaper }>
|
||
Согласовать и подписать в бумажном виде
|
||
</button>
|
||
{/*}
|
||
<button className="button button-blue" onClick={ this._handle_onSignEDO }>
|
||
Согласовать и подписать по ЭДО
|
||
</button>
|
||
{*/}
|
||
</div>
|
||
</article>
|
||
);
|
||
}
|
||
} |