diff --git a/src/components/Calendar/calendarComponent.scss b/src/components/Calendar/calendarComponent.scss index 8f980833..ec3f0358 100644 --- a/src/components/Calendar/calendarComponent.scss +++ b/src/components/Calendar/calendarComponent.scss @@ -263,3 +263,82 @@ .block { pointer-events: none; } + +.selectDateRange { + display: flex; + align-items: center; + column-gap: 8px; + font-size: 16px; + 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; + box-shadow: 0 0 59px rgba(44, 44, 44, 0.05); + padding: 5px 8px; + cursor: pointer; + text-align: center; + min-width: 350px; + } +} diff --git a/src/components/ProfileCalendar/ProfileCalendarComponent.jsx b/src/components/ProfileCalendar/ProfileCalendarComponent.jsx index beb61052..33551f85 100644 --- a/src/components/ProfileCalendar/ProfileCalendarComponent.jsx +++ b/src/components/ProfileCalendar/ProfileCalendarComponent.jsx @@ -9,19 +9,26 @@ import { setRequestDate, setSendRequest, } from "@redux/reportSlice"; +import DatePicker, { registerLocale } from "react-datepicker"; +import ru from "date-fns/locale/ru"; +import "react-datepicker/dist/react-datepicker.css"; import "@components/Calendar/calendarComponent.scss"; import { + getCorrectDate, calendarHelper, currentMonthAndDay, getReports, hourOfNum, } from "@components/Calendar/calendarHelper"; +import { getCorrectYYMMDD } from "@utils/helper"; import ShortReport from "@components/ShortReport/ShortReport"; import arrow from "assets/icons/arrows/arrowCalendar.png"; import calendarIcon from "assets/icons/calendar.svg"; import rectangle from "assets/images/rectangle__calendar.png"; +import { apiRequest } from "@api/request"; +registerLocale("ru", ru); // eslint-disable-next-line react/display-name export const ProfileCalendarComponent = React.memo( @@ -32,6 +39,11 @@ export const ProfileCalendarComponent = React.memo( const [calendar, setCalendar] = useState([]); const [month, setMonth] = useState(""); const [shortReport, setShortReport] = useState(false); + const [startDate, setStartDate] = useState(new Date()); + const [endDate, setEndDate] = useState(null); + const [datePickerOpen, setDatePickerOpen] = useState(false); + const [totalRangeHours, setTotalRangeHours] = useState(0) + useEffect(() => { setCalendar(calendarHelper(value)); @@ -89,6 +101,25 @@ export const ProfileCalendarComponent = React.memo( return value.clone().add(1, "month"); } + function reportsByDate(start, end) { + const requestDates = `fromDate=${getCorrectYYMMDD(start)}&toDate=${getCorrectYYMMDD(end)}` + apiRequest( + `/reports/reports-by-date?${requestDates}&user_card_id=${localStorage.getItem( + "cardId" + )}` + ).then((reports) => { + let spendTime = 0; + for (const report of reports) { + report.task.map((task) => { + if (task.hours_spent) { + spendTime += Number(task.hours_spent); + } + }); + } + setTotalRangeHours(spendTime) + }) + } + return (