reports date range

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;
+  }
+}

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 (
       <div className="calendar-component">
         <div className="calendar-component__header">
@@ -170,7 +201,28 @@ export const ProfileCalendarComponent = React.memo(
             )}
           </div>
         </div>
-
+        <div className='selectDateRange'>
+            <span className='select' onClick={() => {setDatePickerOpen(!datePickerOpen)}}>
+                {endDate ? `${getCorrectDate(startDate)} - ${getCorrectDate(endDate)}` : 'Выбрать диапазон'}
+            </span>
+            <DatePicker
+                selected={startDate}
+                open={datePickerOpen}
+                startDate={startDate}
+                endDate={endDate}
+                onChange={(dates) => {
+                    const [start, end] = dates;
+                    setStartDate(start);
+                    setEndDate(end);
+                    if (end) {
+                        setDatePickerOpen(false)
+                        reportsByDate(start, end)
+                    }
+                }}
+                selectsRange
+            />
+            <span>{totalRangeHours ? `${totalRangeHours} ${hourOfNum(totalRangeHours)}` : '0 часов'}</span>
+        </div>
         {shortReport && <ShortReport />}
       </div>
     );

src/utils/helper.js

@@ -2,25 +2,25 @@ export function createMarkup(text) {
   return { __html: text.split("</p>").join("</p>") };
 }
 
-export function transformHtml(text) {
-  let startHtml = {
-    __html: text.split("<h3> || <h2>").join("<br><h2>").split("<br>"),
-  };
-  startHtml = startHtml.__html.filter(
-    (el) => (el !== null && el !== "") || el === 0
-  );
-  const finalHtml = startHtml.map(
-    (item) =>
-      `<div class='experience__block'>
-        <div class="summary__sections__head">
-            <h3>Описание опыта работы</h3>
-            <button>Редактировать раздел</button>
-        </div>
-        <div class="experience__content">${item.split("<h3>")[0]}</div>
-       </div>`
-  );
-  return { __html: finalHtml.join("") };
-}
+// export function transformHtml(text) {
+//   let startHtml = {
+//     __html: text.split("<h3> || <h2>").join("<br><h2>").split("<br>"),
+//   };
+//   startHtml = startHtml.__html.filter(
+//     (el) => (el !== null && el !== "") || el === 0
+//   );
+//   const finalHtml = startHtml.map(
+//     (item) =>
+//       `<div class='experience__block'>
+//         <div class="summary__sections__head">
+//             <h3>Описание опыта работы</h3>
+//             <button>Редактировать раздел</button>
+//         </div>
+//         <div class="experience__content">${item.split("<h3>")[0]}</div>
+//        </div>`
+//   );
+//   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: ["коментарий", "комментария", " коментариев"],