384 lines
11 KiB
JavaScript
384 lines
11 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 cookie from 'cookie';
|
||
|
||
import { connect } from "react-redux";
|
||
import { withRouter } from 'next/router';
|
||
import { reduxWrapper } from '../../store';
|
||
|
||
import Header from '../components/Header';
|
||
import Footer from '../components/Footer';
|
||
import InnerMenu from "./components/InnerMenu";
|
||
import Company from "../components/Company";
|
||
import CalendarCellModal from "../components/Modal/calendar";
|
||
|
||
import { getCalendar } from '../../actions';
|
||
|
||
class CalendarPage extends React.Component
|
||
{
|
||
constructor(props)
|
||
{
|
||
super(props);
|
||
this.state = {
|
||
modalOpened: false,
|
||
payments: null,
|
||
periods: null,
|
||
selected_period: moment().format("YYYYMM"),
|
||
selected_payment: undefined,
|
||
};
|
||
}
|
||
|
||
static getDerivedStateFromProps(nextProps, prevState)
|
||
{
|
||
return {
|
||
company: nextProps.company,
|
||
payments: nextProps.payments,
|
||
periods: nextProps.periods,
|
||
};
|
||
}
|
||
|
||
componentDidMount()
|
||
{
|
||
const date_from = moment().startOf("month").toDate();
|
||
const date_to = moment().endOf("month").toDate();
|
||
|
||
getCalendar({ dispatch: this.props.dispatch, date_from, date_to }).then().catch();
|
||
}
|
||
|
||
toggleModal = () =>
|
||
{
|
||
this.setState({
|
||
modalOpened: !this.state.modalOpened
|
||
})
|
||
}
|
||
|
||
getPayments = (date) =>
|
||
{
|
||
const { payments } = this.state;
|
||
|
||
for(let i in payments)
|
||
{
|
||
if(payments[i].date === date)
|
||
{
|
||
return payments[i];
|
||
}
|
||
}
|
||
return undefined;
|
||
}
|
||
|
||
_handle_onDayClick = (day) =>
|
||
{
|
||
this.setState({ selected_payment: day.payment });
|
||
this.toggleModal();
|
||
}
|
||
|
||
_handle_onChangePeriod = (period) =>
|
||
{
|
||
this.setState({ selected_period: period }, () =>
|
||
{
|
||
const date_from = moment(period, "YYYYMM").startOf("month").toDate();
|
||
const date_to = moment(period, "YYYYMM").endOf("month").toDate();
|
||
|
||
getCalendar({ dispatch: this.props.dispatch, date_from, date_to }).then().catch();
|
||
});
|
||
}
|
||
|
||
render()
|
||
{
|
||
const { selected_period, selected_payment, periods, payments } = this.state;
|
||
if(payments === null) { return null; }
|
||
|
||
let month = moment(selected_period, "YYYYMM").format("M") - 1;
|
||
|
||
//console.log("periodsperiodsperiodsperiodsperiods");
|
||
//console.log(periods);
|
||
|
||
const dates = [];
|
||
const date_sm = moment(selected_period, 'YYYYMM').startOf("month");
|
||
const date_em = moment(selected_period, 'YYYYMM').endOf("month");
|
||
|
||
//console.log("date_sm", date_sm.format("YYYY-MM-DD"));
|
||
//console.log("date_em", date_em.format("YYYY-MM-DD"));
|
||
//console.log("date_sm.day()", date_sm.day());
|
||
//console.log("date_em.day()", date_em.day());
|
||
|
||
let date_s = null;
|
||
if(date_sm.day() !== 1)
|
||
{ date_s = date_sm.subtract(date_sm.day() - 1, "days"); }
|
||
else
|
||
{ date_s = date_sm; }
|
||
|
||
let date_e = null;
|
||
if(date_em.day() !== 0)
|
||
{ date_e = date_em.add(7 - date_em.day(), "days"); }
|
||
else
|
||
{ date_e = date_em; }
|
||
|
||
const date = moment();
|
||
//console.log(date_sm.format("YYYY-MM-DD"));
|
||
//console.log(date_sm.day());
|
||
//console.log("date_s", date_s.format("YYYY-MM-DD"))
|
||
//console.log("date_e", date_e.format("YYYY-MM-DD"))
|
||
|
||
let d = date_s;
|
||
let payment = this.getPayments(date_s.format("YYYY-MM-DD"));
|
||
dates.push({
|
||
date: date_s.clone(),
|
||
payment: payment,
|
||
});
|
||
|
||
while(d.add(1, 'days').diff(date_e) < 0)
|
||
{
|
||
//console.log(d.toDate());
|
||
let payment = this.getPayments(d.format("YYYY-MM-DD"));
|
||
dates.push({
|
||
date: d.clone(),
|
||
payment: payment,
|
||
});
|
||
}
|
||
|
||
const dow = date.day();
|
||
//console.log(dow);
|
||
//console.log("date.month())", date.month());
|
||
|
||
const weeks = dates.reduce(function(result, value, index, array) {
|
||
if (index % 7 === 0)
|
||
result.push(array.slice(index, index +7));
|
||
return result;
|
||
}, []);
|
||
|
||
return (
|
||
<React.Fragment>
|
||
<Head>
|
||
<title>ЛК Эволюция автолизинга</title>
|
||
<meta
|
||
name="description"
|
||
content="ЛК Эволюция автолизинга"
|
||
/>
|
||
</Head>
|
||
<Header { ...this.props }/>
|
||
<main>
|
||
<section>
|
||
<div className="clear"></div>
|
||
<div className="container">
|
||
<div className="title_wrapper">
|
||
<div className="left">
|
||
<h1 className="section_title">Календарь оплат</h1>
|
||
</div>
|
||
<Company/>
|
||
</div>
|
||
<div className="aside_container about">
|
||
<InnerMenu { ...this.props }/>
|
||
<article>
|
||
<div className="calendar_wrapper">
|
||
<div className="form_field">
|
||
<select id="calendar_month" defaultValue={ selected_period } onChange={ (event) => this._handle_onChangePeriod(event.target.value) }>
|
||
{ periods !== null && Object.values(periods).map((period, index) => (
|
||
<option key={ index } value={ period }>{ moment(period, "YYYYMM").format('MMMM YYYY') }</option>
|
||
)) }
|
||
</select>
|
||
</div>
|
||
<div className="calendar_nav">
|
||
<button>Предыдущая неделя</button>
|
||
<button>Следующая неделя</button>
|
||
</div>
|
||
<div className="calendar_grid">
|
||
<div className="grid_header">
|
||
<div className="grid_cell">Пн</div>
|
||
<div className="grid_cell">Вт</div>
|
||
<div className="grid_cell">Ср</div>
|
||
<div className="grid_cell">Чт</div>
|
||
<div className="grid_cell">Пт</div>
|
||
<div className="grid_cell">Сб</div>
|
||
<div className="grid_cell">Вс</div>
|
||
</div>
|
||
<div className="grid_body">
|
||
{ weeks.map((week, index) =>
|
||
{
|
||
return (
|
||
<div className={index == 0 ? "grid_week active" : "grid_week"} key={"week_" + index}>
|
||
{ week.map((day, index) => {
|
||
return (
|
||
<div key={ index } className={`grid_cell ${ day.date.month() !== month ? 'disabled' : '' } ${ day.date.format("YYYYMMDD") === moment().format("YYYYMMDD") ? 'current' : '' } `}>
|
||
<div className="cell_header">
|
||
<p><span>{ day.date.format("DD") }</span> { day.date.format("MMM").toLocaleLowerCase() } { day.date.format("Y").toLocaleLowerCase() }</p>
|
||
</div>
|
||
<div className="cell_body">{ day.payment && (
|
||
<p onClick={ () => this._handle_onDayClick(day) }>
|
||
Общий платеж
|
||
<span>{ numeral(day.payment.total).format('') } р.</span>
|
||
</p>
|
||
)}
|
||
</div>
|
||
</div>
|
||
)
|
||
}) }
|
||
</div>
|
||
)
|
||
}) }
|
||
{/*}
|
||
<div className="grid_cell disabled">
|
||
<div className="cell_header">
|
||
<p><span>30</span> мая</p>
|
||
</div>
|
||
<div className="cell_body"></div>
|
||
</div>
|
||
|
||
<div className="grid_cell disabled">
|
||
<div className="cell_header">
|
||
<p><span>31</span> мая</p>
|
||
</div>
|
||
<div className="cell_body"></div>
|
||
</div>
|
||
|
||
<div className="grid_cell">
|
||
<div className="cell_header">
|
||
<p><span>01</span> июня</p>
|
||
</div>
|
||
<div className="cell_body"></div>
|
||
</div>
|
||
|
||
<div className="grid_cell">
|
||
<div className="cell_header">
|
||
<p><span>02</span> июня</p>
|
||
</div>
|
||
<div className="cell_body"></div>
|
||
</div>
|
||
|
||
<div className="grid_cell current">
|
||
<div className="cell_header">
|
||
<p><span>03</span> июня</p>
|
||
</div>
|
||
<div className="cell_body"></div>
|
||
</div>
|
||
|
||
<div className="grid_cell">
|
||
<div className="cell_header">
|
||
<p><span>04</span> июня</p>
|
||
</div>
|
||
<div className="cell_body"></div>
|
||
</div>
|
||
|
||
<div className="grid_cell">
|
||
<div className="cell_header">
|
||
<p><span>05</span> июня</p>
|
||
</div>
|
||
<div className="cell_body"></div>
|
||
</div>
|
||
<div className="grid_cell">
|
||
<div className="cell_header">
|
||
<p><span>30</span> мая</p>
|
||
</div>
|
||
<div className="cell_body"></div>
|
||
</div>
|
||
|
||
<div className="grid_cell">
|
||
<div className="cell_header">
|
||
<p><span>31</span> мая</p>
|
||
</div>
|
||
<div className="cell_body">
|
||
<p>
|
||
Общий платеж
|
||
<span>239 400,00 р.</span>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="grid_cell">
|
||
<div className="cell_header">
|
||
<p><span>01</span> июня</p>
|
||
</div>
|
||
<div className="cell_body"></div>
|
||
</div>
|
||
|
||
<div className="grid_cell">
|
||
<div className="cell_header">
|
||
<p><span>02</span> июня</p>
|
||
</div>
|
||
<div className="cell_body"></div>
|
||
</div>
|
||
|
||
<div className="grid_cell">
|
||
<div className="cell_header">
|
||
<p><span>03</span> июня</p>
|
||
</div>
|
||
<div className="cell_body"></div>
|
||
</div>
|
||
|
||
<div className="grid_cell">
|
||
<div className="cell_header">
|
||
<p><span>04</span> июня</p>
|
||
</div>
|
||
<div className="cell_body"></div>
|
||
</div>
|
||
|
||
<div className="grid_cell">
|
||
<div className="cell_header">
|
||
<p><span>05</span> июня</p>
|
||
</div>
|
||
<div className="cell_body"></div>
|
||
</div>
|
||
{*/}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<CalendarCellModal open={ this.state.modalOpened } selected_payment={ selected_payment } close={ () => this.toggleModal() }/>
|
||
</main>
|
||
<Footer/>
|
||
</React.Fragment>
|
||
)
|
||
}
|
||
}
|
||
|
||
function mapStateToProps(state, ownProps)
|
||
{
|
||
return {
|
||
company: state.company,
|
||
payments: state.calendar.payments,
|
||
periods: state.calendar.periods,
|
||
}
|
||
}
|
||
|
||
export const getServerSideProps = reduxWrapper.getServerSideProps(store =>
|
||
async ({ req, res, query }) =>
|
||
{
|
||
let props = {};
|
||
|
||
if(req.headers.cookie !== undefined)
|
||
{
|
||
const cookies = cookie.parse(req.headers?.cookie ? req.headers?.cookie : "");
|
||
|
||
if(cookies.jwt === undefined || cookies.jwt === null)
|
||
{
|
||
res.statusCode = 302;
|
||
res.setHeader('Location', `/login`);
|
||
}
|
||
else
|
||
{
|
||
const tokenValid = true;
|
||
if(!tokenValid)
|
||
{
|
||
res.statusCode = 302;
|
||
res.setHeader('Location', `/login`);
|
||
}
|
||
}
|
||
}
|
||
else
|
||
{
|
||
res.statusCode = 302;
|
||
res.setHeader('Location', `/login`);
|
||
}
|
||
|
||
return { props: props };
|
||
}
|
||
);
|
||
|
||
export default withRouter(connect(mapStateToProps)(CalendarPage)); |