evoleasing-account/pages/contract/components/ReconciliationForm/index.js

import React from "react";
import moment from "moment";
import { SpinnerCircular } from "spinners-react";

import DateInput from "../../../components/DatePicker";

import { getReconciliationFile } from "../../../../actions";

export default class ReconciliationForm extends React.Component 
{
	constructor(props) 
	{
		super(props);
		this.state = {
			loading: false, 
			valid_date_start: null, 
			valid_date_end: null, 
			period_date_start: null, 
			period_date_end: null, 
			reconciliation_requested: false, 
			reconciliation_disabled: false, 
		};
	}

	componentDidMount() 
	{
		const de = moment().toDate();
		this.setState( { period_date_end: de, valid_date_end: de }, );
	}

	componentDidUpdate(prevProps, prevState) 
	{
		if (this.state.period_date_start === null && this.props.contract_date !== null) 
		{
			const ds = moment(this.props.contract_date).toDate();
			this.setState({ period_date_start: ds, valid_date_start: ds });
		}
	}

	_handle_onReconciliationFileRequest = () => 
	{
		const { number } = this.props;
		const { reconciliation_requested, period_date_start, period_date_end } = this.state;

		if (!reconciliation_requested) 
		{
			this.setState({ reconciliation_requested: true }, () => 
			{
				const date_from = moment(period_date_start).format("YYYY-MM-DD");
				const date_to = moment(period_date_end).format("YYYY-MM-DD");

				getReconciliationFile({
					contract: number,
					date_from: date_from,
					date_to: date_to,
					filename: `${ number }_reconciliation_${ date_from }_${ date_to }.pdf`,
				})
				.then(() => {
					this.setState({ reconciliation_requested: false });
				})
				.catch(() => {
					this.setState({ reconciliation_requested: false });
				});
			});
		}
	};

	_handle_onPeriodDate_start = (date) => 
	{
		const {
			valid_date_start,
			valid_date_end,
			period_date_start,
			period_date_end,
		} = this.state;

		const md = moment(date, "DD.MM.YYYY");

		if (md.isValid()) 
		{
			if (date >= valid_date_start && date <= valid_date_end) 
			{
				if (date < period_date_end) 
				{
					this.setState({
						period_date_start: date,
						reconciliation_disabled: false,
					});
				} 
				else 
				{
					this.setState({
						period_date_start: date,
						reconciliation_disabled: true,
					});
				}
			} 
			else 
			{
				this.setState({
					period_date_start: date,
					reconciliation_disabled: true,
				});
			}
		} 
		else 
		{
			this.setState({ reconciliation_disabled: true });
		}
	};

	_handle_onPeriodDate_end = (date) => 
	{
		const {
			valid_date_start,
			valid_date_end,
			period_date_start,
			period_date_end,
		} = this.state;

		if (moment(date).isValid()) 
		{
			if (date >= valid_date_start && date <= valid_date_end) 
			{
				if (date > period_date_start) 
				{
					this.setState({
						period_date_end: date,
						reconciliation_disabled: false,
					});
				} 
				else 
				{
					this.setState({
						period_date_end: date,
						reconciliation_disabled: true,
					});
				}
			} 
			else 
			{
				this.setState({ period_date_end: date, reconciliation_disabled: true });
			}
		} 
		else 
		{
			this.setState({ reconciliation_disabled: true });
		}
	};

	render() 
	{
		const {
			period_date_start,
			period_date_end,
			valid_date_start,
			valid_date_end,
			reconciliation_requested,
			reconciliation_disabled,
		} = this.state;

		return (
			<div className="reconciliation_form">
				<p>Акт сверки</p>
				<div className="form_group">
					<div className="form_field">
						<DateInput 
							placeholder="Дата начала периода" 
							value={ period_date_start } 
							min={ valid_date_start } 
							max={ valid_date_end } 
							onChange={ this._handle_onPeriodDate_start } 
						/>
					</div>
					<div className="form_field">
						<DateInput 
							placeholder="Дата окончания периода" 
							value={ period_date_end } 
							min={ valid_date_start } 
							max={ valid_date_end } 
							onChange={ this._handle_onPeriodDate_end } 
						/>
					</div>
				</div>
				<div className="form_group">
					<button
						className="button button-blue"
						disabled={ reconciliation_disabled }
						onClick={ () => { this._handle_onReconciliationFileRequest(); }}
					>
						<>
							{ reconciliation_requested ? (
								<SpinnerCircular size={ 24 } thickness={ 100 } speed={ 100 } color="rgba(255, 255, 255, 1)" secondaryColor="rgba(255, 255, 255, 0.5)"/>
							) : (
								"Скачать"
							) }
						</>
					</button>
					{/*<button className="button button-blue">Отправить в ЭДО</button>*/}
				</div>
			</div>
		);
	}
}