From 38586b52098c7d9687d48cc9bae1f8f31e65826b Mon Sep 17 00:00:00 2001 From: Mikola Date: Fri, 6 Oct 2023 17:40:53 +0300 Subject: [PATCH] reports date range --- .../Calendar/calendarComponent.scss | 79 +++++++++++++++++++ .../ProfileCalendarComponent.jsx | 54 ++++++++++++- src/utils/helper.js | 45 ++++++----- 3 files changed, 158 insertions(+), 20 deletions(-) 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 (
@@ -170,7 +201,28 @@ export const ProfileCalendarComponent = React.memo( )}
- +
+ {setDatePickerOpen(!datePickerOpen)}}> + {endDate ? `${getCorrectDate(startDate)} - ${getCorrectDate(endDate)}` : 'Выбрать диапазон'} + + { + const [start, end] = dates; + setStartDate(start); + setEndDate(end); + if (end) { + setDatePickerOpen(false) + reportsByDate(start, end) + } + }} + selectsRange + /> + {totalRangeHours ? `${totalRangeHours} ${hourOfNum(totalRangeHours)}` : '0 часов'} +
{shortReport && } ); diff --git a/src/utils/helper.js b/src/utils/helper.js index c4547a65..a1bd4fe3 100644 --- a/src/utils/helper.js +++ b/src/utils/helper.js @@ -2,25 +2,25 @@ export function createMarkup(text) { return { __html: text.split("

").join("

") }; } -export function transformHtml(text) { - let startHtml = { - __html: text.split("

||

").join("

").split("
"), - }; - startHtml = startHtml.__html.filter( - (el) => (el !== null && el !== "") || el === 0 - ); - const finalHtml = startHtml.map( - (item) => - `
-
-

Описание опыта работы

- -
-
${item.split("

")[0]}

-
` - ); - return { __html: finalHtml.join("") }; -} +// export function transformHtml(text) { +// let startHtml = { +// __html: text.split("

||

").join("

").split("
"), +// }; +// startHtml = startHtml.__html.filter( +// (el) => (el !== null && el !== "") || el === 0 +// ); +// const finalHtml = startHtml.map( +// (item) => +// `
+//
+//

Описание опыта работы

+// +//
+//
${item.split("

")[0]}

+//
` +// ); +// return { __html: finalHtml.join("") }; +// } // // export const setToken = () => { // const url = new URL(window.location.href); @@ -64,6 +64,13 @@ export function getCorrectRequestDate(date) { return `${yyyy}-${mm}-${dd} ${hh}:${min}:${sec}`; } +export function getCorrectYYMMDD(date) { + const yyyy = String(date.getUTCFullYear()); + const mm = String(date.getUTCMonth() + 1).padStart(2, "0"); + const dd = String(date.getUTCDate()).padStart(2, "0"); + return `${yyyy}-${mm}-${dd}`; +} + export function caseOfNum(number, type) { const allTypes = { comments: ["коментарий", "комментария", " коментариев"],