calendar range days
This commit is contained in:
Mikola
parent
3a832cc78d
commit
b16888fdb4
@ -243,6 +243,26 @@
|
||||
}
|
||||
}
|
||||
|
||||
.selectDays {
|
||||
border-style: dashed !important;
|
||||
|
||||
&:hover {
|
||||
background-color: #edf1ff !important;
|
||||
}
|
||||
}
|
||||
|
||||
.selectedDay {
|
||||
background-color: #edf1ff !important;
|
||||
|
||||
&:hover {
|
||||
background-color: #edf1ff !important;
|
||||
}
|
||||
}
|
||||
|
||||
.disable {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.before {
|
||||
background-color: #e5f9b6 !important;
|
||||
}
|
||||
@ -272,66 +292,6 @@
|
||||
font-weight: 500;
|
||||
position: relative;
|
||||
|
||||
.react-datepicker-wrapper {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.react-datepicker__tab-loop {
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
}
|
||||
|
||||
.react-datepicker-popper {
|
||||
transform: none !important;
|
||||
}
|
||||
|
||||
.datePicker {
|
||||
visibility: hidden;
|
||||
height: 0;
|
||||
padding: 0;
|
||||
width: 0;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.react-datepicker {
|
||||
border: 1px solid #398208;
|
||||
}
|
||||
|
||||
.react-datepicker-popper {
|
||||
top: -15px !important;
|
||||
}
|
||||
|
||||
.react-datepicker__current-month {
|
||||
font-size: 14px;
|
||||
font-family: "LabGrotesque", sans-serif;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.react-datepicker__header {
|
||||
padding: 5px 0 10px;
|
||||
border-bottom: 1px solid #398208;
|
||||
}
|
||||
|
||||
.react-datepicker__day {
|
||||
font-size: 14px;
|
||||
width: 35px;
|
||||
font-family: "LabGrotesque", sans-serif;
|
||||
}
|
||||
|
||||
.react-datepicker__day-name {
|
||||
font-size: 14px;
|
||||
width: 35px;
|
||||
font-family: "LabGrotesque", sans-serif;
|
||||
}
|
||||
|
||||
.react-datepicker__triangle {
|
||||
transform: translate(140px, 0px) !important;
|
||||
|
||||
&:before {
|
||||
border-bottom-color: #398208 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.select {
|
||||
border-radius: 5px;
|
||||
border: 1px solid #c4c4c4;
|
||||
@ -341,4 +301,11 @@
|
||||
text-align: center;
|
||||
min-width: 350px;
|
||||
}
|
||||
|
||||
.close {
|
||||
cursor: pointer;
|
||||
margin-left: 8px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,9 +1,6 @@
|
||||
import ru from "date-fns/locale/ru";
|
||||
import moment from "moment";
|
||||
import "moment/locale/ru";
|
||||
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 { Link } from "react-router-dom";
|
||||
|
||||
@ -30,8 +27,7 @@ import ShortReport from "@components/ShortReport/ShortReport";
|
||||
import arrow from "assets/icons/arrows/arrowCalendar.png";
|
||||
import calendarIcon from "assets/icons/calendar.svg";
|
||||
import rectangle from "assets/images/rectangle__calendar.png";
|
||||
|
||||
registerLocale("ru", ru);
|
||||
import close from "assets/icons/closeProjectPersons.svg";
|
||||
|
||||
// eslint-disable-next-line react/display-name
|
||||
export const ProfileCalendarComponent = React.memo(
|
||||
@ -42,13 +38,17 @@ export const ProfileCalendarComponent = React.memo(
|
||||
const [calendar, setCalendar] = useState([]);
|
||||
const [month, setMonth] = useState("");
|
||||
const [shortReport, setShortReport] = useState(false);
|
||||
const [startDate, setStartDate] = useState(new Date());
|
||||
const [startDate, setStartDate] = useState(null);
|
||||
const [endDate, setEndDate] = useState(null);
|
||||
const [datePickerOpen, setDatePickerOpen] = useState(false);
|
||||
const [startRangeDays, setStartRangeDays] = useState(false)
|
||||
const [totalRangeHours, setTotalRangeHours] = useState(0);
|
||||
const [selectedRangeDays, setSelectedRangeDays] = useState({})
|
||||
|
||||
useEffect(() => {
|
||||
setCalendar(calendarHelper(value));
|
||||
calendarHelper(value).map((array) => {
|
||||
setSelectedRangeDays((prevState) => ({...prevState, [array[0]]: false}))
|
||||
})
|
||||
}, [value]);
|
||||
|
||||
useEffect(() => {
|
||||
@ -103,10 +103,8 @@ export const ProfileCalendarComponent = React.memo(
|
||||
return value.clone().add(1, "month");
|
||||
}
|
||||
|
||||
function reportsByDate(start, end) {
|
||||
const requestDates = `fromDate=${getCorrectYYMMDD(
|
||||
start
|
||||
)}&toDate=${getCorrectYYMMDD(end)}`;
|
||||
function reportsByDate(endDay) {
|
||||
const requestDates = `fromDate=${getCorrectYYMMDD(startDate._d)}&toDate=${getCorrectYYMMDD(endDay._d)}`;
|
||||
apiRequest(
|
||||
`/reports/reports-by-date?${requestDates}&user_card_id=${localStorage.getItem(
|
||||
"cardId"
|
||||
@ -124,6 +122,36 @@ export const ProfileCalendarComponent = React.memo(
|
||||
});
|
||||
}
|
||||
|
||||
function rangeDays (day) {
|
||||
if (!startDate) {
|
||||
setStartDate(day)
|
||||
} else {
|
||||
setEndDate(day)
|
||||
reportsByDate(day)
|
||||
}
|
||||
}
|
||||
|
||||
function onMouseRangeDays (day) {
|
||||
let selectRange = {}
|
||||
for (let curDay in selectedRangeDays) {
|
||||
if (day > startDate && new Date(curDay) > startDate && new Date(curDay) < day) {
|
||||
selectRange[curDay] = true
|
||||
} else {
|
||||
selectRange[curDay] = false
|
||||
}
|
||||
}
|
||||
setSelectedRangeDays(selectRange)
|
||||
}
|
||||
|
||||
function resetRangeDays () {
|
||||
setStartDate(null)
|
||||
setEndDate(null)
|
||||
setTotalRangeHours(0)
|
||||
calendarHelper(value).map((array) => {
|
||||
setSelectedRangeDays((prevState) => ({...prevState, [array[0]]: false}))
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="calendar-component">
|
||||
<div className="calendar-component__header">
|
||||
@ -183,16 +211,27 @@ export const ProfileCalendarComponent = React.memo(
|
||||
week.map((day) => (
|
||||
<button
|
||||
onClick={() => {
|
||||
if(startRangeDays) {
|
||||
rangeDays(day)
|
||||
} else {
|
||||
dispatch(setReportDate(day));
|
||||
setShortReport(true);
|
||||
dispatch(setSendRequest(true));
|
||||
}
|
||||
}}
|
||||
onMouseEnter={() => {
|
||||
if (startRangeDays && startDate && !endDate) {
|
||||
onMouseRangeDays(day)
|
||||
}
|
||||
}}
|
||||
key={day}
|
||||
className={dayStyles(day)}
|
||||
className={startRangeDays ?
|
||||
`selectDays ${startDate === day || endDate === day ? 'selectedDay' : ''} ${endDate ? 'disable' : ''} ${selectedRangeDays[day] ? 'selectedDay' : ''}`
|
||||
: dayStyles(day)}
|
||||
name={day.format("dddd")}
|
||||
id="btn"
|
||||
>
|
||||
<Link to={correctRoute(day)}>
|
||||
<Link to={startRangeDays ? '#' : correctRoute(day)}>
|
||||
<img
|
||||
className={"calendar__icon"}
|
||||
src={calendarIcon}
|
||||
@ -209,35 +248,24 @@ export const ProfileCalendarComponent = React.memo(
|
||||
<span
|
||||
className="select"
|
||||
onClick={() => {
|
||||
setDatePickerOpen(!datePickerOpen);
|
||||
if (startRangeDays) resetRangeDays()
|
||||
setStartRangeDays(!startRangeDays)
|
||||
}}
|
||||
>
|
||||
{endDate
|
||||
? `${getCorrectDate(startDate)} - ${getCorrectDate(endDate)}`
|
||||
: "Выбрать диапазон"}
|
||||
</span>
|
||||
<DatePicker
|
||||
selected={startDate}
|
||||
open={datePickerOpen}
|
||||
locale="ru"
|
||||
startDate={startDate}
|
||||
endDate={endDate}
|
||||
onChange={(dates) => {
|
||||
const [start, end] = dates;
|
||||
setStartDate(start);
|
||||
setEndDate(end);
|
||||
if (end) {
|
||||
setDatePickerOpen(false);
|
||||
reportsByDate(start, end);
|
||||
}
|
||||
}}
|
||||
selectsRange
|
||||
/>
|
||||
<span>
|
||||
{totalRangeHours
|
||||
? `${totalRangeHours} ${hourOfNum(totalRangeHours)}`
|
||||
: "0 часов"}
|
||||
</span>
|
||||
{endDate &&
|
||||
<img className='close' src={close} alt='close' onClick={() => {
|
||||
resetRangeDays()
|
||||
}} />
|
||||
}
|
||||
</div>
|
||||
{shortReport && <ShortReport />}
|
||||
</div>
|
||||
|
||||
@ -178,7 +178,8 @@ export const Tracker = () => {
|
||||
|
||||
{loader && <Loader style="green" />}
|
||||
|
||||
{projects && Boolean(projects.length) &&
|
||||
{projects &&
|
||||
Boolean(projects.length) &&
|
||||
!loader &&
|
||||
projects.map((project, index) => {
|
||||
return project.status !== 10 ? (
|
||||
@ -187,7 +188,8 @@ export const Tracker = () => {
|
||||
""
|
||||
);
|
||||
})}
|
||||
{typeof projects === "object" && (!Boolean(projects.length) ||
|
||||
{typeof projects === "object" &&
|
||||
(!Boolean(projects.length) ||
|
||||
!Boolean(
|
||||
projects.filter((project) => project.status !== 10).length
|
||||
)) &&
|
||||
|
||||
@ -65,9 +65,9 @@ export function getCorrectRequestDate(date) {
|
||||
}
|
||||
|
||||
export function getCorrectYYMMDD(date) {
|
||||
const yyyy = String(date.getUTCFullYear());
|
||||
const mm = String(date.getUTCMonth() + 1).padStart(2, "0");
|
||||
const dd = String(date.getUTCDate()).padStart(2, "0");
|
||||
const yyyy = String(date.getFullYear());
|
||||
const mm = String(date.getMonth() + 1).padStart(2, "0");
|
||||
const dd = String(date.getDate()).padStart(2, "0");
|
||||
return `${yyyy}-${mm}-${dd}`;
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user