calendar range days

This commit is contained in:
Mikola 2023-10-10 16:32:30 +03:00
parent b16888fdb4
commit 644c89f376

View File

@ -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>