apuc/guild_front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

calendar range days

Browse Source
This commit is contained in:
Mikola 2023-10-12 12:50:02 +03:00
parent ff2bd020e8
commit 8b49a3a7c2
2 changed files with 41 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/ProfileCalendar/ProfileCalendar.jsx
View File

@ -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}
/>
</div>
</div>

48
src/components/ProfileCalendar/ProfileCalendarComponent.jsx
View File

@ -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)}`
: "Выбрать диапазон"}
</span>
<span>