From 8b49a3a7c28e3d5d0e10c336211bda817b3b5449 Mon Sep 17 00:00:00 2001 From: Mikola Date: Thu, 12 Oct 2023 12:50:02 +0300 Subject: [PATCH 1/2] calendar range days --- .../ProfileCalendar/ProfileCalendar.jsx | 7 +++ .../ProfileCalendarComponent.jsx | 48 +++++++++++++------ 2 files changed, 41 insertions(+), 14 deletions(-) diff --git a/src/components/ProfileCalendar/ProfileCalendar.jsx b/src/components/ProfileCalendar/ProfileCalendar.jsx index e29d46c0..21ad0f2d 100644 --- a/src/components/ProfileCalendar/ProfileCalendar.jsx +++ b/src/components/ProfileCalendar/ProfileCalendar.jsx @@ -37,11 +37,16 @@ export const ProfileCalendar = () => { const [totalHours, setTotalHours] = useState(0); const [loader, setLoader] = useState(true); const [startRangeDays, setStartRangeDays] = useState(false); + const [startDate, setStartDate] = useState(null); function setValueHandler(value) { setValue(value); } + function setStartDateRange (date) { + setStartDate(date) + } + function toggleStartRangeDays() { setStartRangeDays(!startRangeDays); } @@ -122,6 +127,8 @@ export const ProfileCalendar = () => { totalHours={totalHours} startRangeDays={startRangeDays} toggleRangeDays={toggleStartRangeDays} + startDate={startDate} + setStartDateRange={setStartDateRange} /> diff --git a/src/components/ProfileCalendar/ProfileCalendarComponent.jsx b/src/components/ProfileCalendar/ProfileCalendarComponent.jsx index 7d1b5229..52710d80 100644 --- a/src/components/ProfileCalendar/ProfileCalendarComponent.jsx +++ b/src/components/ProfileCalendar/ProfileCalendarComponent.jsx @@ -38,6 +38,8 @@ export const ProfileCalendarComponent = React.memo( totalHours, startRangeDays, toggleRangeDays, + startDate, + setStartDateRange }) => { const dispatch = useDispatch(); @@ -45,7 +47,6 @@ export const ProfileCalendarComponent = React.memo( const [calendar, setCalendar] = useState([]); const [month, setMonth] = useState(""); const [shortReport, setShortReport] = useState(false); - const [startDate, setStartDate] = useState(null); const [endDate, setEndDate] = useState(null); const [totalRangeHours, setTotalRangeHours] = useState(0); const [selectedRangeDays, setSelectedRangeDays] = useState({}); @@ -58,6 +59,9 @@ export const ProfileCalendarComponent = React.memo( [array[0]]: false, })); }); + if (endDate) { + resetRangeDays() + } }, [value]); useEffect(() => { @@ -113,9 +117,11 @@ export const ProfileCalendarComponent = React.memo( } function reportsByDate(endDay) { - const requestDates = `fromDate=${getCorrectYYMMDD( + const requestDates = startDate < endDay ? `fromDate=${getCorrectYYMMDD( startDate._d - )}&toDate=${getCorrectYYMMDD(endDay._d)}`; + )}&toDate=${getCorrectYYMMDD(endDay._d)}` : `fromDate=${getCorrectYYMMDD( + endDay._d + )}&toDate=${getCorrectYYMMDD(startDate._d)}`; apiRequest( `/reports/reports-by-date?${requestDates}&user_card_id=${localStorage.getItem( "cardId" @@ -135,7 +141,7 @@ export const ProfileCalendarComponent = React.memo( function rangeDays(day) { if (!startDate) { - setStartDate(day); + setStartDateRange(day); } else { setEndDate(day); reportsByDate(day); @@ -145,21 +151,35 @@ export const ProfileCalendarComponent = React.memo( function onMouseRangeDays(day) { let selectRange = {}; for (let curDay in selectedRangeDays) { - if ( - day > startDate && - new Date(curDay) > startDate && - new Date(curDay) < day - ) { - selectRange[curDay] = true; + if (day > startDate) { + if ( + day > startDate && + new Date(curDay) > startDate && + new Date(curDay) < day + ) { + selectRange[curDay] = true; + } + else { + selectRange[curDay] = false; + } } else { - selectRange[curDay] = false; + if ( + day < startDate && + new Date(curDay) < startDate && + new Date(curDay) > day + ) { + selectRange[curDay] = true; + } + else { + selectRange[curDay] = false; + } } } setSelectedRangeDays(selectRange); } function resetRangeDays() { - setStartDate(null); + setStartDateRange(null); setEndDate(null); setTotalRangeHours(0); calendarHelper(value).map((array) => { @@ -246,7 +266,7 @@ export const ProfileCalendarComponent = React.memo( className={ startRangeDays ? `selectDays ${ - startDate === day || endDate === day + String(startDate?._d) === String(day._d) || endDate === day ? "selectedDay" : "" } ${endDate ? "disable" : ""} ${ @@ -279,7 +299,7 @@ export const ProfileCalendarComponent = React.memo( }} > {endDate - ? `${getCorrectDate(startDate)} - ${getCorrectDate(endDate)}` + ? startDate < endDate ? `${getCorrectDate(startDate)} - ${getCorrectDate(endDate)}` : `${getCorrectDate(endDate)} - ${getCorrectDate(startDate)}` : "Выбрать диапазон"} From 95ba471e1f26bfaf0bd52510cb465a807cbc4b26 Mon Sep 17 00:00:00 2001 From: Mikola Date: Thu, 12 Oct 2023 12:50:17 +0300 Subject: [PATCH 2/2] calendar range days --- .../ProfileCalendar/ProfileCalendar.jsx | 4 +- .../ProfileCalendarComponent.jsx | 42 ++++++++++--------- 2 files changed, 25 insertions(+), 21 deletions(-) diff --git a/src/components/ProfileCalendar/ProfileCalendar.jsx b/src/components/ProfileCalendar/ProfileCalendar.jsx index 21ad0f2d..454ce05e 100644 --- a/src/components/ProfileCalendar/ProfileCalendar.jsx +++ b/src/components/ProfileCalendar/ProfileCalendar.jsx @@ -43,8 +43,8 @@ export const ProfileCalendar = () => { setValue(value); } - function setStartDateRange (date) { - setStartDate(date) + function setStartDateRange(date) { + setStartDate(date); } function toggleStartRangeDays() { diff --git a/src/components/ProfileCalendar/ProfileCalendarComponent.jsx b/src/components/ProfileCalendar/ProfileCalendarComponent.jsx index 52710d80..07676f45 100644 --- a/src/components/ProfileCalendar/ProfileCalendarComponent.jsx +++ b/src/components/ProfileCalendar/ProfileCalendarComponent.jsx @@ -39,7 +39,7 @@ export const ProfileCalendarComponent = React.memo( startRangeDays, toggleRangeDays, startDate, - setStartDateRange + setStartDateRange, }) => { const dispatch = useDispatch(); @@ -60,7 +60,7 @@ export const ProfileCalendarComponent = React.memo( })); }); if (endDate) { - resetRangeDays() + resetRangeDays(); } }, [value]); @@ -117,11 +117,14 @@ export const ProfileCalendarComponent = React.memo( } function reportsByDate(endDay) { - const requestDates = startDate < endDay ? `fromDate=${getCorrectYYMMDD( - startDate._d - )}&toDate=${getCorrectYYMMDD(endDay._d)}` : `fromDate=${getCorrectYYMMDD( - endDay._d - )}&toDate=${getCorrectYYMMDD(startDate._d)}`; + const requestDates = + startDate < endDay + ? `fromDate=${getCorrectYYMMDD( + startDate._d + )}&toDate=${getCorrectYYMMDD(endDay._d)}` + : `fromDate=${getCorrectYYMMDD(endDay._d)}&toDate=${getCorrectYYMMDD( + startDate._d + )}`; apiRequest( `/reports/reports-by-date?${requestDates}&user_card_id=${localStorage.getItem( "cardId" @@ -153,24 +156,22 @@ export const ProfileCalendarComponent = React.memo( for (let curDay in selectedRangeDays) { if (day > startDate) { if ( - day > startDate && - new Date(curDay) > startDate && - new Date(curDay) < day + day > startDate && + new Date(curDay) > startDate && + new Date(curDay) < day ) { selectRange[curDay] = true; - } - else { + } else { selectRange[curDay] = false; } } else { if ( - day < startDate && - new Date(curDay) < startDate && - new Date(curDay) > day + day < startDate && + new Date(curDay) < startDate && + new Date(curDay) > day ) { selectRange[curDay] = true; - } - else { + } else { selectRange[curDay] = false; } } @@ -266,7 +267,8 @@ export const ProfileCalendarComponent = React.memo( className={ startRangeDays ? `selectDays ${ - String(startDate?._d) === String(day._d) || endDate === day + String(startDate?._d) === String(day._d) || + endDate === day ? "selectedDay" : "" } ${endDate ? "disable" : ""} ${ @@ -299,7 +301,9 @@ export const ProfileCalendarComponent = React.memo( }} > {endDate - ? startDate < endDate ? `${getCorrectDate(startDate)} - ${getCorrectDate(endDate)}` : `${getCorrectDate(endDate)} - ${getCorrectDate(startDate)}` + ? startDate < endDate + ? `${getCorrectDate(startDate)} - ${getCorrectDate(endDate)}` + : `${getCorrectDate(endDate)} - ${getCorrectDate(startDate)}` : "Выбрать диапазон"}