98 lines
3.3 KiB
JavaScript
98 lines
3.3 KiB
JavaScript
import React from "react";
|
|
import Slider from "react-slick";
|
|
import numeral from "numeral";
|
|
|
|
function NextArrow(props)
|
|
{
|
|
const { className, style, onClick } = props;
|
|
|
|
return (
|
|
<button className={ className } style={{ ...style }} onClick={ onClick } >
|
|
<svg width={ 8 } height={ 12 } fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="m1 1 6 5-5.25 5" stroke="#fff" strokeWidth={ 2 } strokeLinecap="round" strokeLinejoin="round" />
|
|
</svg>
|
|
</button>
|
|
)
|
|
}
|
|
|
|
function PrevArrow(props)
|
|
{
|
|
const { className, style, onClick } = props;
|
|
|
|
return (
|
|
<button className={ className } style={{ ...style }} onClick={ onClick } >
|
|
<svg width={ 8 } height={ 12 } fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M7 11 1 6l5.25-5" stroke="#fff" strokeWidth={ 2 } strokeLinecap="round" strokeLinejoin="round" />
|
|
</svg>
|
|
</button>
|
|
)
|
|
}
|
|
|
|
export default class CalculationsList extends React.Component
|
|
{
|
|
constructor(props)
|
|
{
|
|
super(props);
|
|
this.state = {
|
|
company: {},
|
|
width: 1920
|
|
};
|
|
}
|
|
|
|
componentDidMount()
|
|
{
|
|
this.setState({
|
|
width: window.innerWidth
|
|
})
|
|
}
|
|
|
|
_handle_onCalculation = (calculation_id) =>
|
|
{
|
|
//href={ `/contract/${ number }/change/#${ calculation.addcontract_number }` }
|
|
this.props.onCalculation(calculation_id);
|
|
}
|
|
|
|
render()
|
|
{
|
|
const settings = {
|
|
dots: false,
|
|
infinite: false,
|
|
speed: 500,
|
|
slidesToShow: this.state.width < 1279 ? 1 : 2.3,
|
|
centerMode: false,
|
|
variableWidth: this.state.width < 1279 ? true : false,
|
|
dragFree: this.state.width < 1279 ? true : false,
|
|
nextArrow: <NextArrow />,
|
|
prevArrow: <PrevArrow />,
|
|
};
|
|
|
|
const { number, calculations } = this.props;
|
|
|
|
//console.log("\x1B[31m calculations \x1B[34m", calculations);
|
|
|
|
|
|
return (
|
|
<div className="feed">
|
|
<div className="feed_list">
|
|
<Slider { ...settings }>
|
|
{ calculations !== undefined && calculations !== null && calculations.map((calculation, index) =>
|
|
(
|
|
<div className="feed_item" key={ index }>
|
|
<p className="item_title">Расчет № { calculation.label }</p>
|
|
<p className="item_desc">
|
|
{ calculation.date_offset_type_comment !== null && (<>{ `${ calculation.date_offset_type_comment.label }: ${ calculation.date_offset_type_comment.value }` }<br/></>) }
|
|
{ calculation.number_paydate_comment !== null && (<>{ `${ calculation.number_paydate_comment.label }: ${ calculation.number_paydate_comment.value }` }<br/></>) }
|
|
{ calculation.insurance_price_result_comment !== null && (<>{ calculation.insurance_price_result_comment.label }: <span>{ calculation.insurance_price_result_comment.value }</span><br/></>) }
|
|
{ calculation.fix_last_payment_available_comment !== null && (<>{ `${ calculation.fix_last_payment_available_comment.label }: ${ calculation.fix_last_payment_available_comment.value ? "да" : "нет" }` }<br/></>) }
|
|
{ calculation.period_new_comment !== null && (<>{ `${ calculation.period_new_comment.label }: ${ calculation.period_new_comment.value }` }<br/></>) }
|
|
{ calculation.sum_comment !== null && (<>{ calculation.sum_comment.label }: <span>{ calculation.sum_comment.value }</span><br/></>) }
|
|
</p>
|
|
<a className="item_link interactive" onClick={ () => this._handle_onCalculation(calculation.addcontract_number) }>Подробнее</a>
|
|
</div>
|
|
)) }
|
|
</Slider>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
} |