diff --git a/src/components/Calendar/calendarComponent.scss b/src/components/Calendar/calendarComponent.scss index ec3f0358..3e43059f 100644 --- a/src/components/Calendar/calendarComponent.scss +++ b/src/components/Calendar/calendarComponent.scss @@ -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; + } } diff --git a/src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx b/src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx index bc5162e8..7a7f38e6 100644 --- a/src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx +++ b/src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx @@ -536,9 +536,6 @@ export const TicketFullScreen = () => { >
- {projectInfo.projectUsers?.length > 3 && ( - +1... - )}
{projectInfo.projectUsers?.length && projectInfo.projectUsers.slice(0, 3).map((person) => { @@ -555,6 +552,9 @@ export const TicketFullScreen = () => { ); })}
+ {projectInfo.projectUsers?.length > 3 && ( + +1 + )} { diff --git a/src/components/Modal/Tracker/TrackerModal/trackerModal.scss b/src/components/Modal/Tracker/TrackerModal/trackerModal.scss index 8ff8f335..76e26246 100644 --- a/src/components/Modal/Tracker/TrackerModal/trackerModal.scss +++ b/src/components/Modal/Tracker/TrackerModal/trackerModal.scss @@ -541,7 +541,7 @@ .exit { cursor: pointer; position: absolute; - top: 15px; + top: 36px; right: 20px; width: 13px; height: 13px; diff --git a/src/components/ProfileCalendar/ProfileCalendar.jsx b/src/components/ProfileCalendar/ProfileCalendar.jsx index 52a863ad..e29d46c0 100644 --- a/src/components/ProfileCalendar/ProfileCalendar.jsx +++ b/src/components/ProfileCalendar/ProfileCalendar.jsx @@ -36,11 +36,16 @@ export const ProfileCalendar = () => { const [reports, setReports] = useState([]); const [totalHours, setTotalHours] = useState(0); const [loader, setLoader] = useState(true); + const [startRangeDays, setStartRangeDays] = useState(false); function setValueHandler(value) { setValue(value); } + function toggleStartRangeDays() { + setStartRangeDays(!startRangeDays); + } + useEffect(() => { dispatch(setRequestDate(getReports(moment()))); }, []); @@ -115,6 +120,8 @@ export const ProfileCalendar = () => { value={value} reports={reports} totalHours={totalHours} + startRangeDays={startRangeDays} + toggleRangeDays={toggleStartRangeDays} />
diff --git a/src/components/ProfileCalendar/ProfileCalendarComponent.jsx b/src/components/ProfileCalendar/ProfileCalendarComponent.jsx index cdef8180..7d1b5229 100644 --- a/src/components/ProfileCalendar/ProfileCalendarComponent.jsx +++ b/src/components/ProfileCalendar/ProfileCalendarComponent.jsx @@ -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"; @@ -29,26 +26,38 @@ import ShortReport from "@components/ShortReport/ShortReport"; import arrow from "assets/icons/arrows/arrowCalendar.png"; import calendarIcon from "assets/icons/calendar.svg"; +import close from "assets/icons/closeProjectPersons.svg"; import rectangle from "assets/images/rectangle__calendar.png"; -registerLocale("ru", ru); - // eslint-disable-next-line react/display-name export const ProfileCalendarComponent = React.memo( - ({ value, setValueHandler, reports, totalHours }) => { + ({ + value, + setValueHandler, + reports, + totalHours, + startRangeDays, + toggleRangeDays, + }) => { const dispatch = useDispatch(); const [currentDay] = useState(moment()); 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 [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 +112,10 @@ export const ProfileCalendarComponent = React.memo( return value.clone().add(1, "month"); } - function reportsByDate(start, end) { + function reportsByDate(endDay) { const requestDates = `fromDate=${getCorrectYYMMDD( - start - )}&toDate=${getCorrectYYMMDD(end)}`; + startDate._d + )}&toDate=${getCorrectYYMMDD(endDay._d)}`; apiRequest( `/reports/reports-by-date?${requestDates}&user_card_id=${localStorage.getItem( "cardId" @@ -124,6 +133,43 @@ 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 (
@@ -183,16 +229,35 @@ export const ProfileCalendarComponent = React.memo( week.map((day) => (
{shortReport && }
diff --git a/src/pages/ProjectTracker/ProjectTracker.js b/src/pages/ProjectTracker/ProjectTracker.js index e7313046..19764778 100644 --- a/src/pages/ProjectTracker/ProjectTracker.js +++ b/src/pages/ProjectTracker/ProjectTracker.js @@ -368,9 +368,6 @@ export const ProjectTracker = () => { : "tasks__head__persons noProjectUsers" } > - {projectBoard.projectUsers?.length > 3 && ( - +1... - )} {Boolean(projectBoard.projectUsers?.length) && (
{projectBoard.projectUsers.slice(0, 3).map((person) => { @@ -388,6 +385,9 @@ export const ProjectTracker = () => { })}
)} + {projectBoard.projectUsers?.length > 3 && ( + +1 + )} { diff --git a/src/pages/Tracker/Tracker.js b/src/pages/Tracker/Tracker.js index 6f958505..e0dbdbb8 100644 --- a/src/pages/Tracker/Tracker.js +++ b/src/pages/Tracker/Tracker.js @@ -71,8 +71,8 @@ export const Tracker = () => { apiRequest( `/task/get-user-tasks?user_id=${localStorage.getItem("id")}` ).then((el) => { - const allTasks = el.filter((item) => item.status !== 0); - const completedTasks = el.filter((item) => item.status === 0); + const allTasks = el ? el.filter((item) => item.status !== 0) : []; + const completedTasks = el ? el.filter((item) => item.status === 0) : []; setAllTasks(allTasks); setFilteredAllTasks(allTasks); setAllCompletedTasks(completedTasks); @@ -179,7 +179,8 @@ export const Tracker = () => { {loader && } - {Boolean(projects.length) && + {projects && + Boolean(projects.length) && !loader && projects.map((project, index) => { return project.status !== 10 ? ( @@ -188,10 +189,11 @@ export const Tracker = () => { "" ); })} - {(!Boolean(projects.length) || - !Boolean( - projects.filter((project) => project.status !== 10).length - )) && + {typeof projects === "object" && + (!Boolean(projects.length) || + !Boolean( + projects.filter((project) => project.status !== 10).length + )) && !loader && (
@@ -216,7 +218,7 @@ export const Tracker = () => {
)} - {Boolean(projects.length) && !loader && ( + {projects && Boolean(projects.length) && !loader && ( <>