Merge pull request #131 from apuc/tracker-fix

Tracker fix
2023-10-10 16:33:11 +03:00 · 2023-10-10 16:33:11 +03:00 · cc3b79e6fa
commit cc3b79e6fa
parent fe2c45cb22 644c89f376
8 changed files with 135 additions and 113 deletions
--- 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;
+  }
 }
--- a/src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx
+++ b/src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx
@ -536,9 +536,6 @@ export const TicketFullScreen = () => {
                  ></TrackerModal>

                  <div className="tasks__head__persons">
-                    {projectInfo.projectUsers?.length > 3 && (
-                      <span className="countPersons">+1...</span>
-                    )}
                    <div className="projectPersons">
                      {projectInfo.projectUsers?.length &&
                        projectInfo.projectUsers.slice(0, 3).map((person) => {
@ -555,6 +552,9 @@ export const TicketFullScreen = () => {
                          );
                        })}
                    </div>
+                    {projectInfo.projectUsers?.length > 3 && (
+                      <span className="countPersons">+1</span>
+                    )}
                    <span
                      className="addPerson"
                      onClick={() => {
--- 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;
--- 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,10 +26,9 @@ 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 }) => {
@ -42,13 +38,20 @@ 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 [startDate, setStartDate] = useState(null);
    const [endDate, setEndDate] = useState(null);
-    const [datePickerOpen, setDatePickerOpen] = useState(false);
+    const [startRangeDays, setStartRangeDays] = 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 +106,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 +127,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 (
      <div className="calendar-component">
        <div className="calendar-component__header">
@ -183,16 +223,35 @@ export const ProfileCalendarComponent = React.memo(
              week.map((day) => (
                <button
                  onClick={() => {
-                    dispatch(setReportDate(day));
-                    setShortReport(true);
-                    dispatch(setSendRequest(true));
+                    if (startRangeDays) {
+                      rangeDays(day);
+                    } else {
+                      dispatch(setReportDate(day));
+                      setShortReport(true);
+                      dispatch(setSendRequest(true));
+                    }
+                  }}
+                  onMouseEnter={() => {
+                    if (startRangeDays && startDate && !endDate) {
+                      onMouseRangeDays(day);
+                    }
                  }}
                  key={day}
-                  className={dayStyles(day)}
+                  className={
+                    startRangeDays
+                      ? `selectDays ${
+                          startDate === day || endDate === day
+                            ? "selectedDay"
+                            : ""
+                        } ${endDate ? "disable" : ""} ${
+                          selectedRangeDays[day] ? "selectedDay" : ""
+                        }`
+                      : dayStyles(day)
+                  }
                  name={day.format("dddd")}
                  id="btn"
                >
-                  <Link to={correctRoute(day)}>
+                  <Link to={startRangeDays ? "#" : correctRoute(day)}>
                    <img
                      className={"calendar__icon"}
                      src={calendarIcon}
@ -209,35 +268,29 @@ export const ProfileCalendarComponent = React.memo(
          <span
            className="select"
            onClick={() => {
-              setDatePickerOpen(!datePickerOpen);
+              if (startRangeDays) resetRangeDays();
+              setStartRangeDays(!startRangeDays);
            }}
          >
            {endDate
              ? `${getCorrectDate(startDate)} - ${getCorrectDate(endDate)}`
              : "Выбрать диапазон"}
          </span>
-          <DatePicker
-            selected={startDate}
-            open={datePickerOpen}
-            locale="ru"
-            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>
+          {endDate && (
+            <img
+              className="close"
+              src={close}
+              alt="close"
+              onClick={() => {
+                resetRangeDays();
+              }}
+            />
+          )}
        </div>
        {shortReport && <ShortReport />}
      </div>
--- 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 && (
-                      <span className="countPersons">+1...</span>
-                    )}
                    {Boolean(projectBoard.projectUsers?.length) && (
                      <div className="projectPersons">
                        {projectBoard.projectUsers.slice(0, 3).map((person) => {
@ -388,6 +385,9 @@ export const ProjectTracker = () => {
                        })}
                      </div>
                    )}
+                    {projectBoard.projectUsers?.length > 3 && (
+                      <span className="countPersons">+1</span>
+                    )}
                    <span
                      className="addPerson"
                      onClick={() => {
--- a/src/pages/Tracker/Tracker.js
+++ b/src/pages/Tracker/Tracker.js
@ -70,8 +70,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);
@ -178,7 +178,8 @@ export const Tracker = () => {

            {loader && <Loader style="green" />}

-            {Boolean(projects.length) &&
+            {projects &&
+              Boolean(projects.length) &&
              !loader &&
              projects.map((project, index) => {
                return project.status !== 10 ? (
@ -187,10 +188,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 && (
                <div className="no-projects">
                  <div className="no-projects__createNew">
@ -215,7 +217,7 @@ export const Tracker = () => {
                  </div>
                </div>
              )}
-            {Boolean(projects.length) && !loader && (
+            {projects && Boolean(projects.length) && !loader && (
              <>
                <BaseButton
                  styles="createProjectBtn"
--- a/src/pages/Tracker/tracker.scss
+++ b/src/pages/Tracker/tracker.scss
@ -321,7 +321,7 @@
            .projectPersons {
              display: flex;
              position: relative;
-              left: -10px;
+              left: 5px;
              img {
                position: relative;
                display: flex;
@ -358,7 +358,7 @@
              color: #252c32;
              border: 1px solid #dde2e4;
              background: white;
-              left: -6px;
+              left: -20px;
            }

            .addPerson {
--- a/src/utils/helper.js
+++ b/src/utils/helper.js
@ -65,9 +65,9 @@ export function getCorrectRequestDate(date) {
 }

 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");
+  const yyyy = String(date.getFullYear());
+  const mm = String(date.getMonth() + 1).padStart(2, "0");
+  const dd = String(date.getDate()).padStart(2, "0");
  return `${yyyy}-${mm}-${dd}`;
 }