calendar range days
This commit is contained in:
parent
b16888fdb4
commit
644c89f376
@ -26,8 +26,8 @@ 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 close from "assets/icons/closeProjectPersons.svg";
|
import close from "assets/icons/closeProjectPersons.svg";
|
||||||
|
import rectangle from "assets/images/rectangle__calendar.png";
|
||||||
|
|
||||||
// eslint-disable-next-line react/display-name
|
// eslint-disable-next-line react/display-name
|
||||||
export const ProfileCalendarComponent = React.memo(
|
export const ProfileCalendarComponent = React.memo(
|
||||||
@ -40,15 +40,18 @@ export const ProfileCalendarComponent = React.memo(
|
|||||||
const [shortReport, setShortReport] = useState(false);
|
const [shortReport, setShortReport] = useState(false);
|
||||||
const [startDate, setStartDate] = useState(null);
|
const [startDate, setStartDate] = useState(null);
|
||||||
const [endDate, setEndDate] = useState(null);
|
const [endDate, setEndDate] = useState(null);
|
||||||
const [startRangeDays, setStartRangeDays] = useState(false)
|
const [startRangeDays, setStartRangeDays] = useState(false);
|
||||||
const [totalRangeHours, setTotalRangeHours] = useState(0);
|
const [totalRangeHours, setTotalRangeHours] = useState(0);
|
||||||
const [selectedRangeDays, setSelectedRangeDays] = useState({})
|
const [selectedRangeDays, setSelectedRangeDays] = useState({});
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
setCalendar(calendarHelper(value));
|
setCalendar(calendarHelper(value));
|
||||||
calendarHelper(value).map((array) => {
|
calendarHelper(value).map((array) => {
|
||||||
setSelectedRangeDays((prevState) => ({...prevState, [array[0]]: false}))
|
setSelectedRangeDays((prevState) => ({
|
||||||
})
|
...prevState,
|
||||||
|
[array[0]]: false,
|
||||||
|
}));
|
||||||
|
});
|
||||||
}, [value]);
|
}, [value]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@ -104,7 +107,9 @@ export const ProfileCalendarComponent = React.memo(
|
|||||||
}
|
}
|
||||||
|
|
||||||
function reportsByDate(endDay) {
|
function reportsByDate(endDay) {
|
||||||
const requestDates = `fromDate=${getCorrectYYMMDD(startDate._d)}&toDate=${getCorrectYYMMDD(endDay._d)}`;
|
const requestDates = `fromDate=${getCorrectYYMMDD(
|
||||||
|
startDate._d
|
||||||
|
)}&toDate=${getCorrectYYMMDD(endDay._d)}`;
|
||||||
apiRequest(
|
apiRequest(
|
||||||
`/reports/reports-by-date?${requestDates}&user_card_id=${localStorage.getItem(
|
`/reports/reports-by-date?${requestDates}&user_card_id=${localStorage.getItem(
|
||||||
"cardId"
|
"cardId"
|
||||||
@ -124,32 +129,39 @@ export const ProfileCalendarComponent = React.memo(
|
|||||||
|
|
||||||
function rangeDays(day) {
|
function rangeDays(day) {
|
||||||
if (!startDate) {
|
if (!startDate) {
|
||||||
setStartDate(day)
|
setStartDate(day);
|
||||||
} else {
|
} else {
|
||||||
setEndDate(day)
|
setEndDate(day);
|
||||||
reportsByDate(day)
|
reportsByDate(day);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function onMouseRangeDays(day) {
|
function onMouseRangeDays(day) {
|
||||||
let selectRange = {}
|
let selectRange = {};
|
||||||
for (let curDay in selectedRangeDays) {
|
for (let curDay in selectedRangeDays) {
|
||||||
if (day > startDate && new Date(curDay) > startDate && new Date(curDay) < day) {
|
if (
|
||||||
selectRange[curDay] = true
|
day > startDate &&
|
||||||
|
new Date(curDay) > startDate &&
|
||||||
|
new Date(curDay) < day
|
||||||
|
) {
|
||||||
|
selectRange[curDay] = true;
|
||||||
} else {
|
} else {
|
||||||
selectRange[curDay] = false
|
selectRange[curDay] = false;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
setSelectedRangeDays(selectRange)
|
setSelectedRangeDays(selectRange);
|
||||||
}
|
}
|
||||||
|
|
||||||
function resetRangeDays() {
|
function resetRangeDays() {
|
||||||
setStartDate(null)
|
setStartDate(null);
|
||||||
setEndDate(null)
|
setEndDate(null);
|
||||||
setTotalRangeHours(0)
|
setTotalRangeHours(0);
|
||||||
calendarHelper(value).map((array) => {
|
calendarHelper(value).map((array) => {
|
||||||
setSelectedRangeDays((prevState) => ({...prevState, [array[0]]: false}))
|
setSelectedRangeDays((prevState) => ({
|
||||||
})
|
...prevState,
|
||||||
|
[array[0]]: false,
|
||||||
|
}));
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@ -212,7 +224,7 @@ export const ProfileCalendarComponent = React.memo(
|
|||||||
<button
|
<button
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
if (startRangeDays) {
|
if (startRangeDays) {
|
||||||
rangeDays(day)
|
rangeDays(day);
|
||||||
} else {
|
} else {
|
||||||
dispatch(setReportDate(day));
|
dispatch(setReportDate(day));
|
||||||
setShortReport(true);
|
setShortReport(true);
|
||||||
@ -221,17 +233,25 @@ export const ProfileCalendarComponent = React.memo(
|
|||||||
}}
|
}}
|
||||||
onMouseEnter={() => {
|
onMouseEnter={() => {
|
||||||
if (startRangeDays && startDate && !endDate) {
|
if (startRangeDays && startDate && !endDate) {
|
||||||
onMouseRangeDays(day)
|
onMouseRangeDays(day);
|
||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
key={day}
|
key={day}
|
||||||
className={startRangeDays ?
|
className={
|
||||||
`selectDays ${startDate === day || endDate === day ? 'selectedDay' : ''} ${endDate ? 'disable' : ''} ${selectedRangeDays[day] ? 'selectedDay' : ''}`
|
startRangeDays
|
||||||
: dayStyles(day)}
|
? `selectDays ${
|
||||||
|
startDate === day || endDate === day
|
||||||
|
? "selectedDay"
|
||||||
|
: ""
|
||||||
|
} ${endDate ? "disable" : ""} ${
|
||||||
|
selectedRangeDays[day] ? "selectedDay" : ""
|
||||||
|
}`
|
||||||
|
: dayStyles(day)
|
||||||
|
}
|
||||||
name={day.format("dddd")}
|
name={day.format("dddd")}
|
||||||
id="btn"
|
id="btn"
|
||||||
>
|
>
|
||||||
<Link to={startRangeDays ? '#' : correctRoute(day)}>
|
<Link to={startRangeDays ? "#" : correctRoute(day)}>
|
||||||
<img
|
<img
|
||||||
className={"calendar__icon"}
|
className={"calendar__icon"}
|
||||||
src={calendarIcon}
|
src={calendarIcon}
|
||||||
@ -248,8 +268,8 @@ export const ProfileCalendarComponent = React.memo(
|
|||||||
<span
|
<span
|
||||||
className="select"
|
className="select"
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
if (startRangeDays) resetRangeDays()
|
if (startRangeDays) resetRangeDays();
|
||||||
setStartRangeDays(!startRangeDays)
|
setStartRangeDays(!startRangeDays);
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{endDate
|
{endDate
|
||||||
@ -261,11 +281,16 @@ export const ProfileCalendarComponent = React.memo(
|
|||||||
? `${totalRangeHours} ${hourOfNum(totalRangeHours)}`
|
? `${totalRangeHours} ${hourOfNum(totalRangeHours)}`
|
||||||
: "0 часов"}
|
: "0 часов"}
|
||||||
</span>
|
</span>
|
||||||
{endDate &&
|
{endDate && (
|
||||||
<img className='close' src={close} alt='close' onClick={() => {
|
<img
|
||||||
resetRangeDays()
|
className="close"
|
||||||
}} />
|
src={close}
|
||||||
}
|
alt="close"
|
||||||
|
onClick={() => {
|
||||||
|
resetRangeDays();
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
{shortReport && <ShortReport />}
|
{shortReport && <ShortReport />}
|
||||||
</div>
|
</div>
|
||||||
|
Loading…
Reference in New Issue
Block a user