From 76b2c4622f8d20de600e87b1c67ad6662a55dfb9 Mon Sep 17 00:00:00 2001
From: MaxOvs19 <gshk3669@gmail.com>
Date: Tue, 24 Oct 2023 19:41:59 +0300
Subject: [PATCH] fixed calendar periods

---
 .../Calendar/calendarComponent.scss           |  2 +-
 .../ProfileCalendarComponent.jsx              | 25 ++++++++++++++-----
 .../ProfileCalendar/profileCalendar.scss      |  9 +++++++
 3 files changed, 29 insertions(+), 7 deletions(-)

diff --git a/src/components/Calendar/calendarComponent.scss b/src/components/Calendar/calendarComponent.scss
index 3e43059f..58edbb11 100644
--- a/src/components/Calendar/calendarComponent.scss
+++ b/src/components/Calendar/calendarComponent.scss
@@ -287,7 +287,7 @@
 .selectDateRange {
   display: flex;
   align-items: center;
-  column-gap: 8px;
+  column-gap: 16px;
   font-size: 16px;
   font-weight: 500;
   position: relative;
diff --git a/src/components/ProfileCalendar/ProfileCalendarComponent.jsx b/src/components/ProfileCalendar/ProfileCalendarComponent.jsx
index 07676f45..3a862508 100644
--- a/src/components/ProfileCalendar/ProfileCalendarComponent.jsx
+++ b/src/components/ProfileCalendar/ProfileCalendarComponent.jsx
@@ -22,11 +22,12 @@ import {
   getReports,
   hourOfNum,
 } from "@components/Calendar/calendarHelper";
+import BaseButton from "@components/Common/BaseButton/BaseButton";
 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 close from "assets/icons/closeProjectPersons.svg";
 import rectangle from "assets/images/rectangle__calendar.png";
 
 // eslint-disable-next-line react/display-name
@@ -50,6 +51,7 @@ export const ProfileCalendarComponent = React.memo(
     const [endDate, setEndDate] = useState(null);
     const [totalRangeHours, setTotalRangeHours] = useState(0);
     const [selectedRangeDays, setSelectedRangeDays] = useState({});
+    const [activePeriod, setActivePeriod] = useState(false);
 
     useEffect(() => {
       setCalendar(calendarHelper(value));
@@ -142,6 +144,14 @@ export const ProfileCalendarComponent = React.memo(
       });
     }
 
+    function toggleActivePeriod() {
+      if (!activePeriod) {
+        setActivePeriod(true);
+      } else {
+        setActivePeriod(false);
+      }
+    }
+
     function rangeDays(day) {
       if (!startDate) {
         setStartDateRange(day);
@@ -298,12 +308,15 @@ export const ProfileCalendarComponent = React.memo(
             onClick={() => {
               if (startRangeDays) resetRangeDays();
               toggleRangeDays();
+              toggleActivePeriod();
             }}
           >
             {endDate
               ? startDate < endDate
                 ? `${getCorrectDate(startDate)} - ${getCorrectDate(endDate)}`
                 : `${getCorrectDate(endDate)} - ${getCorrectDate(startDate)}`
+              : activePeriod
+              ? "Выберите начало диапазона"
               : "Выбрать диапазон"}
           </span>
           <span>
@@ -312,14 +325,14 @@ export const ProfileCalendarComponent = React.memo(
               : "0 часов"}
           </span>
           {endDate && (
-            <img
-              className="close"
-              src={close}
-              alt="close"
+            <BaseButton
+              styles={"clear-days"}
               onClick={() => {
                 resetRangeDays();
               }}
-            />
+            >
+              Сбросить
+            </BaseButton>
           )}
         </div>
         {shortReport && <ShortReport />}
diff --git a/src/components/ProfileCalendar/profileCalendar.scss b/src/components/ProfileCalendar/profileCalendar.scss
index 3d766296..7c31ebac 100644
--- a/src/components/ProfileCalendar/profileCalendar.scss
+++ b/src/components/ProfileCalendar/profileCalendar.scss
@@ -90,3 +90,12 @@
     }
   }
 }
+.clear-days {
+  background: red;
+  padding: 5px 20px;
+  font-size: 14px;
+
+  &:hover {
+    background: rgba(255, 0, 0, 0.637);
+  }
+}