From 3a832cc78d60ae2fe6dca82039f7e0bbd4563f02 Mon Sep 17 00:00:00 2001 From: Mikola Date: Tue, 10 Oct 2023 14:22:43 +0300 Subject: [PATCH 1/3] tracker fix --- .../Tracker/TicketFullScreen/TicketFullScreen.jsx | 6 +++--- .../Modal/Tracker/TrackerModal/trackerModal.scss | 2 +- src/pages/ProjectTracker/ProjectTracker.js | 6 +++--- src/pages/Tracker/Tracker.js | 10 +++++----- src/pages/Tracker/tracker.scss | 4 ++-- 5 files changed, 14 insertions(+), 14 deletions(-) diff --git a/src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx b/src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx index bc5162e8..fd50c8be 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/pages/ProjectTracker/ProjectTracker.js b/src/pages/ProjectTracker/ProjectTracker.js index e7313046..99a7ff16 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 84b95e3a..8b99fc5e 100644 --- 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,7 @@ export const Tracker = () => { {loader && } - {Boolean(projects.length) && + {projects && Boolean(projects.length) && !loader && projects.map((project, index) => { return project.status !== 10 ? ( @@ -187,7 +187,7 @@ export const Tracker = () => { "" ); })} - {(!Boolean(projects.length) || + {typeof projects === "object" && (!Boolean(projects.length) || !Boolean( projects.filter((project) => project.status !== 10).length )) && @@ -215,7 +215,7 @@ export const Tracker = () => {
)} - {Boolean(projects.length) && !loader && ( + {projects && Boolean(projects.length) && !loader && ( <> Date: Tue, 10 Oct 2023 16:31:40 +0300 Subject: [PATCH 2/3] calendar range days --- .../Calendar/calendarComponent.scss | 87 ++++++----------- .../TicketFullScreen/TicketFullScreen.jsx | 2 +- .../ProfileCalendarComponent.jsx | 96 ++++++++++++------- src/pages/ProjectTracker/ProjectTracker.js | 2 +- src/pages/Tracker/Tracker.js | 12 ++- src/utils/helper.js | 6 +- 6 files changed, 101 insertions(+), 104 deletions(-) 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 fd50c8be..7a7f38e6 100644 --- a/src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx +++ b/src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx @@ -553,7 +553,7 @@ export const TicketFullScreen = () => { })} {projectInfo.projectUsers?.length > 3 && ( - +1 + +1 )} { setCalendar(calendarHelper(value)); + calendarHelper(value).map((array) => { + setSelectedRangeDays((prevState) => ({...prevState, [array[0]]: false})) + }) }, [value]); useEffect(() => { @@ -103,10 +103,8 @@ export const ProfileCalendarComponent = React.memo( return value.clone().add(1, "month"); } - function reportsByDate(start, end) { - const requestDates = `fromDate=${getCorrectYYMMDD( - start - )}&toDate=${getCorrectYYMMDD(end)}`; + function reportsByDate(endDay) { + const requestDates = `fromDate=${getCorrectYYMMDD(startDate._d)}&toDate=${getCorrectYYMMDD(endDay._d)}`; apiRequest( `/reports/reports-by-date?${requestDates}&user_card_id=${localStorage.getItem( "cardId" @@ -124,6 +122,36 @@ 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 +211,27 @@ export const ProfileCalendarComponent = React.memo( week.map((day) => (
{shortReport && }
diff --git a/src/pages/ProjectTracker/ProjectTracker.js b/src/pages/ProjectTracker/ProjectTracker.js index 99a7ff16..19764778 100644 --- a/src/pages/ProjectTracker/ProjectTracker.js +++ b/src/pages/ProjectTracker/ProjectTracker.js @@ -386,7 +386,7 @@ export const ProjectTracker = () => { )} {projectBoard.projectUsers?.length > 3 && ( - +1 + +1 )} { {loader && } - {projects && Boolean(projects.length) && + {projects && + Boolean(projects.length) && !loader && projects.map((project, index) => { return project.status !== 10 ? ( @@ -187,10 +188,11 @@ export const Tracker = () => { "" ); })} - {typeof projects === "object" && (!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 && (
diff --git a/src/utils/helper.js b/src/utils/helper.js index a1bd4fe3..aff836ec 100644 --- 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}`; } From 644c89f3765dc7dae83ef8c08eddd878f6801e5f Mon Sep 17 00:00:00 2001 From: Mikola Date: Tue, 10 Oct 2023 16:32:30 +0300 Subject: [PATCH 3/3] calendar range days --- .../ProfileCalendarComponent.jsx | 123 +++++++++++------- 1 file changed, 74 insertions(+), 49 deletions(-) diff --git a/src/components/ProfileCalendar/ProfileCalendarComponent.jsx b/src/components/ProfileCalendar/ProfileCalendarComponent.jsx index 52e6a4a9..abdf03f2 100644 --- a/src/components/ProfileCalendar/ProfileCalendarComponent.jsx +++ b/src/components/ProfileCalendar/ProfileCalendarComponent.jsx @@ -26,8 +26,8 @@ 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 close from "assets/icons/closeProjectPersons.svg"; +import rectangle from "assets/images/rectangle__calendar.png"; // eslint-disable-next-line react/display-name export const ProfileCalendarComponent = React.memo( @@ -40,15 +40,18 @@ export const ProfileCalendarComponent = React.memo( const [shortReport, setShortReport] = useState(false); const [startDate, setStartDate] = useState(null); const [endDate, setEndDate] = useState(null); - const [startRangeDays, setStartRangeDays] = useState(false) + const [startRangeDays, setStartRangeDays] = useState(false); const [totalRangeHours, setTotalRangeHours] = useState(0); - const [selectedRangeDays, setSelectedRangeDays] = useState({}) + const [selectedRangeDays, setSelectedRangeDays] = useState({}); useEffect(() => { setCalendar(calendarHelper(value)); calendarHelper(value).map((array) => { - setSelectedRangeDays((prevState) => ({...prevState, [array[0]]: false})) - }) + setSelectedRangeDays((prevState) => ({ + ...prevState, + [array[0]]: false, + })); + }); }, [value]); useEffect(() => { @@ -104,7 +107,9 @@ export const ProfileCalendarComponent = React.memo( } function reportsByDate(endDay) { - const requestDates = `fromDate=${getCorrectYYMMDD(startDate._d)}&toDate=${getCorrectYYMMDD(endDay._d)}`; + const requestDates = `fromDate=${getCorrectYYMMDD( + startDate._d + )}&toDate=${getCorrectYYMMDD(endDay._d)}`; apiRequest( `/reports/reports-by-date?${requestDates}&user_card_id=${localStorage.getItem( "cardId" @@ -122,34 +127,41 @@ export const ProfileCalendarComponent = React.memo( }); } - function rangeDays (day) { - if (!startDate) { - setStartDate(day) + 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 { - setEndDate(day) - reportsByDate(day) + selectRange[curDay] = false; } + } + setSelectedRangeDays(selectRange); } - 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})) - }) + function resetRangeDays() { + setStartDate(null); + setEndDate(null); + setTotalRangeHours(0); + calendarHelper(value).map((array) => { + setSelectedRangeDays((prevState) => ({ + ...prevState, + [array[0]]: false, + })); + }); } return ( @@ -211,27 +223,35 @@ export const ProfileCalendarComponent = React.memo( week.map((day) => (
{shortReport && }