reports date range
This commit is contained in:
parent
38586b5209
commit
490c021ab2
@ -1,6 +1,9 @@
|
|||||||
|
import ru from "date-fns/locale/ru";
|
||||||
import moment from "moment";
|
import moment from "moment";
|
||||||
import "moment/locale/ru";
|
import "moment/locale/ru";
|
||||||
import React, { useEffect, useState } from "react";
|
import React, { useEffect, useState } from "react";
|
||||||
|
import DatePicker, { registerLocale } from "react-datepicker";
|
||||||
|
import "react-datepicker/dist/react-datepicker.css";
|
||||||
import { useDispatch } from "react-redux";
|
import { useDispatch } from "react-redux";
|
||||||
import { Link } from "react-router-dom";
|
import { Link } from "react-router-dom";
|
||||||
|
|
||||||
@ -9,25 +12,25 @@ import {
|
|||||||
setRequestDate,
|
setRequestDate,
|
||||||
setSendRequest,
|
setSendRequest,
|
||||||
} from "@redux/reportSlice";
|
} from "@redux/reportSlice";
|
||||||
import DatePicker, { registerLocale } from "react-datepicker";
|
|
||||||
import ru from "date-fns/locale/ru";
|
import { getCorrectYYMMDD } from "@utils/helper";
|
||||||
import "react-datepicker/dist/react-datepicker.css";
|
|
||||||
|
import { apiRequest } from "@api/request";
|
||||||
|
|
||||||
import "@components/Calendar/calendarComponent.scss";
|
import "@components/Calendar/calendarComponent.scss";
|
||||||
import {
|
import {
|
||||||
getCorrectDate,
|
|
||||||
calendarHelper,
|
calendarHelper,
|
||||||
currentMonthAndDay,
|
currentMonthAndDay,
|
||||||
|
getCorrectDate,
|
||||||
getReports,
|
getReports,
|
||||||
hourOfNum,
|
hourOfNum,
|
||||||
} from "@components/Calendar/calendarHelper";
|
} from "@components/Calendar/calendarHelper";
|
||||||
import { getCorrectYYMMDD } from "@utils/helper";
|
|
||||||
import ShortReport from "@components/ShortReport/ShortReport";
|
import ShortReport from "@components/ShortReport/ShortReport";
|
||||||
|
|
||||||
import arrow from "assets/icons/arrows/arrowCalendar.png";
|
import arrow from "assets/icons/arrows/arrowCalendar.png";
|
||||||
import calendarIcon from "assets/icons/calendar.svg";
|
import calendarIcon from "assets/icons/calendar.svg";
|
||||||
import rectangle from "assets/images/rectangle__calendar.png";
|
import rectangle from "assets/images/rectangle__calendar.png";
|
||||||
import { apiRequest } from "@api/request";
|
|
||||||
registerLocale("ru", ru);
|
registerLocale("ru", ru);
|
||||||
|
|
||||||
// eslint-disable-next-line react/display-name
|
// eslint-disable-next-line react/display-name
|
||||||
@ -42,8 +45,7 @@ export const ProfileCalendarComponent = React.memo(
|
|||||||
const [startDate, setStartDate] = useState(new Date());
|
const [startDate, setStartDate] = useState(new Date());
|
||||||
const [endDate, setEndDate] = useState(null);
|
const [endDate, setEndDate] = useState(null);
|
||||||
const [datePickerOpen, setDatePickerOpen] = useState(false);
|
const [datePickerOpen, setDatePickerOpen] = useState(false);
|
||||||
const [totalRangeHours, setTotalRangeHours] = useState(0)
|
const [totalRangeHours, setTotalRangeHours] = useState(0);
|
||||||
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
setCalendar(calendarHelper(value));
|
setCalendar(calendarHelper(value));
|
||||||
@ -102,7 +104,9 @@ export const ProfileCalendarComponent = React.memo(
|
|||||||
}
|
}
|
||||||
|
|
||||||
function reportsByDate(start, end) {
|
function reportsByDate(start, end) {
|
||||||
const requestDates = `fromDate=${getCorrectYYMMDD(start)}&toDate=${getCorrectYYMMDD(end)}`
|
const requestDates = `fromDate=${getCorrectYYMMDD(
|
||||||
|
start
|
||||||
|
)}&toDate=${getCorrectYYMMDD(end)}`;
|
||||||
apiRequest(
|
apiRequest(
|
||||||
`/reports/reports-by-date?${requestDates}&user_card_id=${localStorage.getItem(
|
`/reports/reports-by-date?${requestDates}&user_card_id=${localStorage.getItem(
|
||||||
"cardId"
|
"cardId"
|
||||||
@ -116,8 +120,8 @@ export const ProfileCalendarComponent = React.memo(
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
setTotalRangeHours(spendTime)
|
setTotalRangeHours(spendTime);
|
||||||
})
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@ -201,9 +205,16 @@ export const ProfileCalendarComponent = React.memo(
|
|||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className='selectDateRange'>
|
<div className="selectDateRange">
|
||||||
<span className='select' onClick={() => {setDatePickerOpen(!datePickerOpen)}}>
|
<span
|
||||||
{endDate ? `${getCorrectDate(startDate)} - ${getCorrectDate(endDate)}` : 'Выбрать диапазон'}
|
className="select"
|
||||||
|
onClick={() => {
|
||||||
|
setDatePickerOpen(!datePickerOpen);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{endDate
|
||||||
|
? `${getCorrectDate(startDate)} - ${getCorrectDate(endDate)}`
|
||||||
|
: "Выбрать диапазон"}
|
||||||
</span>
|
</span>
|
||||||
<DatePicker
|
<DatePicker
|
||||||
selected={startDate}
|
selected={startDate}
|
||||||
@ -215,13 +226,17 @@ export const ProfileCalendarComponent = React.memo(
|
|||||||
setStartDate(start);
|
setStartDate(start);
|
||||||
setEndDate(end);
|
setEndDate(end);
|
||||||
if (end) {
|
if (end) {
|
||||||
setDatePickerOpen(false)
|
setDatePickerOpen(false);
|
||||||
reportsByDate(start, end)
|
reportsByDate(start, end);
|
||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
selectsRange
|
selectsRange
|
||||||
/>
|
/>
|
||||||
<span>{totalRangeHours ? `${totalRangeHours} ${hourOfNum(totalRangeHours)}` : '0 часов'}</span>
|
<span>
|
||||||
|
{totalRangeHours
|
||||||
|
? `${totalRangeHours} ${hourOfNum(totalRangeHours)}`
|
||||||
|
: "0 часов"}
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
{shortReport && <ShortReport />}
|
{shortReport && <ShortReport />}
|
||||||
</div>
|
</div>
|
||||||
|
Loading…
Reference in New Issue
Block a user