Compare commits

...

3 Commits

Author SHA1 Message Date
Victor Batischev
5e7c9dec79 prettier 2023-12-22 15:18:36 +03:00
Victor Batischev
fc5d67dc2d finished reports adaptive 2023-12-22 15:18:13 +03:00
Victor Batischev
72766efa39 remove short report, refactor range days 2023-12-22 14:47:55 +03:00
6 changed files with 37 additions and 77 deletions

View File

@ -34,7 +34,7 @@ export const Footer = () => {
<img src={tg} alt="tg" width={24} />
</a>
</div>
<p>Войти в команду</p>
<p>Присоединиться к команде</p>
</div>
<div className="footer__info">
<div className="footer__mail">

View File

@ -24,7 +24,6 @@ import {
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";
@ -46,7 +45,6 @@ export const ProfileCalendarComponent = React.memo(
const [calendar, setCalendar] = useState([]);
const [month, setMonth] = useState("");
const [shortReport, setShortReport] = useState(false);
const [endDate, setEndDate] = useState(null);
const [totalRangeHours, setTotalRangeHours] = useState(0);
const [selectedRangeDays, setSelectedRangeDays] = useState({});
@ -96,7 +94,7 @@ export const ProfileCalendarComponent = React.memo(
new Date(day).getMonth() + 1
)}-${correctDay(new Date(day).getDate())}` === date.created_at
) {
return "#";
return `../view/${date.created_at}`;
}
}
return "../../report";
@ -142,29 +140,12 @@ export const ProfileCalendarComponent = React.memo(
function onMouseRangeDays(day) {
let selectRange = {};
for (let curDay in selectedRangeDays) {
if (day > startDate) {
if (
day > startDate &&
new Date(curDay) > startDate &&
new Date(curDay) < day
) {
selectRange[curDay] = true;
} else {
selectRange[curDay] = false;
}
} else {
if (
day < startDate &&
new Date(curDay) < startDate &&
new Date(curDay) > day
) {
selectRange[curDay] = true;
} else {
selectRange[curDay] = false;
}
}
}
for (let curDay in selectedRangeDays)
selectRange[curDay] =
day > startDate
? new Date(curDay) > startDate && new Date(curDay) < day
: new Date(curDay) < startDate && new Date(curDay) > day;
setSelectedRangeDays(selectRange);
}
@ -239,18 +220,15 @@ export const ProfileCalendarComponent = React.memo(
week.map((day) => (
<button
onClick={() => {
if (startRangeDays) {
rangeDays(day);
} else {
if (startRangeDays) rangeDays(day);
else {
dispatch(setReportDate(day));
setShortReport(true);
dispatch(setSendRequest(true));
}
}}
onMouseEnter={() => {
if (startRangeDays && startDate && !endDate) {
if (startRangeDays && startDate && !endDate)
onMouseRangeDays(day);
}
}}
key={day}
className={
@ -295,15 +273,15 @@ export const ProfileCalendarComponent = React.memo(
? `${getCorrectDate(startDate)} - ${getCorrectDate(endDate)}`
: `${getCorrectDate(endDate)} - ${getCorrectDate(startDate)}`
: activePeriod
? "Выберите диапазон на календаре"
: "Выбрать диапазон"}
? "Выберите диапазон на календаре"
: "Выбрать диапазон"}
</span>
<span>
{totalRangeHours
? `${totalRangeHours} ${hourOfNum(totalRangeHours)}`
: endDate
? "0 часов"
: ""}
? "0 часов"
: ""}
</span>
{endDate && (
<BaseButton
@ -318,7 +296,6 @@ export const ProfileCalendarComponent = React.memo(
</BaseButton>
)}
</div>
{shortReport && <ShortReport />}
</div>
);
}

View File

@ -170,7 +170,7 @@ const ReportForm = () => {
/>
<div className="report-form__task-list">
<img src={ellipse} alt="" />
<span>Какие задачи были выполнены?</span>
<span>Какие задачи выполнены?</span>
</div>
</div>

View File

@ -166,7 +166,7 @@
}
@media (max-width: 610px) {
margin-left: 85px;
margin-left: 80px;
}
}
}
@ -472,12 +472,6 @@
max-width: 141px;
}
}
&-list {
img {
display: none;
}
}
}
}
}

View File

@ -59,13 +59,12 @@ export const ViewReport = () => {
task: task.task,
id: task.id
};
if (task.hours_spent) {
spendTime += Number(task.hours_spent);
}
spendTime += Math.floor(task.hours_spent);
setTaskText((prevArray) => [...prevArray, taskInfo]);
});
}
setTotalHours(spendTime);
setTotalHours(Math.floor(spendTime));
setLoader(false);
});
previousReportDay.setDate(previousReportDay.getDate() - 1);
@ -106,7 +105,7 @@ export const ViewReport = () => {
<img src={arrow} alt="#" />
<p>Вернуться</p>
</Link>
<div className="viewReport__bar">
{/* <div className="viewReport__bar">
<h3 className="viewReport__bar__date">
{getCorrectDate(dateReport.id)}
</h3>
@ -116,16 +115,12 @@ export const ViewReport = () => {
{totalHours} {hourOfNum(totalHours)}
</span>
</p>
</div>
</div> */}
</div>
<div className="viewReport__switchDate">
<div
onClick={() => {
previousDay();
}}
>
<div className="viewReport__switch-date">
<div onClick={() => previousDay()}>
<Link to={`../view/${getCreatedDate(previousReportDay)}`}>
<div className="viewReport__switchDate__prev switchDate">
<div className="viewReport__switch-date__prev switch-date">
<img src={arrowSwitchDate} alt="arrow" />
</div>
</Link>
@ -140,7 +135,7 @@ export const ViewReport = () => {
}`}
>
<Link to={`../view/${getCreatedDate(nextReportDay)}`}>
<div className={`viewReport__switchDate__next switchDate`}>
<div className={`viewReport__switch-date__next switch-date`}>
<img src={arrowSwitchDate} alt="arrow" />
</div>
</Link>
@ -154,7 +149,7 @@ export const ViewReport = () => {
<thead>
<tr>
<th>
<p>Какие задачи были выполнены?</p>
<p>Какие задачи выполнены?</p>
</th>
<th>
<p>Время</p>
@ -173,9 +168,9 @@ export const ViewReport = () => {
</td>
<td>
<div className="viewReport__done__hours__item">
<span>{task.hours}</span>
<span>{Math.floor(task.hours)}</span>
<p className="hours">
{hourOfNum(task.hours)} на задачу
{hourOfNum(Math.floor(task.hours))}
</p>
</div>
</td>

View File

@ -139,11 +139,11 @@
margin-bottom: 0;
}
&__switchDate {
&__switch-date {
display: flex;
margin: 30px 0;
margin: 20px 0;
justify-content: center;
column-gap: 140px;
column-gap: 30px;
align-items: center;
@media (max-width: 500px) {
@ -158,7 +158,7 @@
color: #000000;
}
.switchDate {
.switch-date {
width: 48px;
height: 48px;
background: #8DC63F;
@ -396,15 +396,11 @@
&__item {
display: flex;
flex-direction: column;
row-gap: 22px;
row-gap: 10px;
background: #FFFFFF;
border-radius: 12px;
margin: 25px 0;
padding: 25px 35px;
@media (max-width: 650px) {
padding: 15px 20px;
}
margin: 20px 0;
padding: 15px;
h3 {
font-weight: 500;
@ -420,11 +416,9 @@
p {
font-weight: 400;
font-size: 15px;
line-height: 20px;
@media (max-width: 650px) {
font-size: 10px;
line-height: 18px;
font-size: 13px;
}
}
}