diff --git a/src/components/Calendar/calendarComponent.scss b/src/components/Calendar/calendarComponent.scss
index ec3f0358..3e43059f 100644
--- 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;
+ }
}
diff --git a/src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx b/src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx
index bc5162e8..7a7f38e6 100644
--- a/src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx
+++ b/src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx
@@ -536,9 +536,6 @@ export const TicketFullScreen = () => {
>
- {projectInfo.projectUsers?.length > 3 && (
-
+1...
- )}
{projectInfo.projectUsers?.length &&
projectInfo.projectUsers.slice(0, 3).map((person) => {
@@ -555,6 +552,9 @@ export const TicketFullScreen = () => {
);
})}
+ {projectInfo.projectUsers?.length > 3 && (
+
+1
+ )}
{
diff --git a/src/components/Modal/Tracker/TrackerModal/trackerModal.scss b/src/components/Modal/Tracker/TrackerModal/trackerModal.scss
index 8ff8f335..76e26246 100644
--- 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;
diff --git a/src/components/ProfileCalendar/ProfileCalendar.jsx b/src/components/ProfileCalendar/ProfileCalendar.jsx
index 52a863ad..e29d46c0 100644
--- a/src/components/ProfileCalendar/ProfileCalendar.jsx
+++ b/src/components/ProfileCalendar/ProfileCalendar.jsx
@@ -36,11 +36,16 @@ export const ProfileCalendar = () => {
const [reports, setReports] = useState([]);
const [totalHours, setTotalHours] = useState(0);
const [loader, setLoader] = useState(true);
+ const [startRangeDays, setStartRangeDays] = useState(false);
function setValueHandler(value) {
setValue(value);
}
+ function toggleStartRangeDays() {
+ setStartRangeDays(!startRangeDays);
+ }
+
useEffect(() => {
dispatch(setRequestDate(getReports(moment())));
}, []);
@@ -115,6 +120,8 @@ export const ProfileCalendar = () => {
value={value}
reports={reports}
totalHours={totalHours}
+ startRangeDays={startRangeDays}
+ toggleRangeDays={toggleStartRangeDays}
/>
diff --git a/src/components/ProfileCalendar/ProfileCalendarComponent.jsx b/src/components/ProfileCalendar/ProfileCalendarComponent.jsx
index cdef8180..7d1b5229 100644
--- 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,26 +26,38 @@ 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 }) => {
+ ({
+ value,
+ setValueHandler,
+ reports,
+ totalHours,
+ startRangeDays,
+ toggleRangeDays,
+ }) => {
const dispatch = useDispatch();
const [currentDay] = useState(moment());
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 [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 +112,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 +133,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 (
@@ -183,16 +229,35 @@ export const ProfileCalendarComponent = React.memo(
week.map((day) => (
{shortReport &&
}
diff --git a/src/pages/ProjectTracker/ProjectTracker.js b/src/pages/ProjectTracker/ProjectTracker.js
index e7313046..19764778 100644
--- 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 && (
- +1...
- )}
{Boolean(projectBoard.projectUsers?.length) && (
{projectBoard.projectUsers.slice(0, 3).map((person) => {
@@ -388,6 +385,9 @@ export const ProjectTracker = () => {
})}
)}
+ {projectBoard.projectUsers?.length > 3 && (
+ +1
+ )}
{
diff --git a/src/pages/Tracker/Tracker.js b/src/pages/Tracker/Tracker.js
index 6f958505..e0dbdbb8 100644
--- a/src/pages/Tracker/Tracker.js
+++ b/src/pages/Tracker/Tracker.js
@@ -71,8 +71,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);
@@ -179,7 +179,8 @@ export const Tracker = () => {
{loader && }
- {Boolean(projects.length) &&
+ {projects &&
+ Boolean(projects.length) &&
!loader &&
projects.map((project, index) => {
return project.status !== 10 ? (
@@ -188,10 +189,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 && (
@@ -216,7 +218,7 @@ export const Tracker = () => {
)}
- {Boolean(projects.length) && !loader && (
+ {projects && Boolean(projects.length) && !loader && (
<>