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} /> <img src={tg} alt="tg" width={24} />
</a> </a>
</div> </div>
<p>Войти в команду</p> <p>Присоединиться к команде</p>
</div> </div>
<div className="footer__info"> <div className="footer__info">
<div className="footer__mail"> <div className="footer__mail">

View File

@ -24,7 +24,6 @@ import {
hourOfNum hourOfNum
} from "@components/Calendar/calendarHelper"; } from "@components/Calendar/calendarHelper";
import BaseButton from "@components/Common/BaseButton/BaseButton"; import BaseButton from "@components/Common/BaseButton/BaseButton";
import ShortReport from "@components/ShortReport/ShortReport";
import arrow from "assets/icons/arrows/arrowCalendar.png"; import arrow from "assets/icons/arrows/arrowCalendar.png";
import calendarIcon from "assets/icons/calendar.svg"; import calendarIcon from "assets/icons/calendar.svg";
@ -46,7 +45,6 @@ export const ProfileCalendarComponent = React.memo(
const [calendar, setCalendar] = useState([]); const [calendar, setCalendar] = useState([]);
const [month, setMonth] = useState(""); const [month, setMonth] = useState("");
const [shortReport, setShortReport] = useState(false);
const [endDate, setEndDate] = useState(null); const [endDate, setEndDate] = useState(null);
const [totalRangeHours, setTotalRangeHours] = useState(0); const [totalRangeHours, setTotalRangeHours] = useState(0);
const [selectedRangeDays, setSelectedRangeDays] = useState({}); const [selectedRangeDays, setSelectedRangeDays] = useState({});
@ -96,7 +94,7 @@ export const ProfileCalendarComponent = React.memo(
new Date(day).getMonth() + 1 new Date(day).getMonth() + 1
)}-${correctDay(new Date(day).getDate())}` === date.created_at )}-${correctDay(new Date(day).getDate())}` === date.created_at
) { ) {
return "#"; return `../view/${date.created_at}`;
} }
} }
return "../../report"; return "../../report";
@ -142,29 +140,12 @@ export const ProfileCalendarComponent = React.memo(
function onMouseRangeDays(day) { function onMouseRangeDays(day) {
let selectRange = {}; let selectRange = {};
for (let curDay in selectedRangeDays) { for (let curDay in selectedRangeDays)
if (day > startDate) { selectRange[curDay] =
if ( day > startDate
day > startDate && ? new Date(curDay) > startDate && new Date(curDay) < day
new Date(curDay) > startDate && : new Date(curDay) < startDate && new Date(curDay) > day;
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;
}
}
}
setSelectedRangeDays(selectRange); setSelectedRangeDays(selectRange);
} }
@ -239,18 +220,15 @@ export const ProfileCalendarComponent = React.memo(
week.map((day) => ( week.map((day) => (
<button <button
onClick={() => { onClick={() => {
if (startRangeDays) { if (startRangeDays) rangeDays(day);
rangeDays(day); else {
} else {
dispatch(setReportDate(day)); dispatch(setReportDate(day));
setShortReport(true);
dispatch(setSendRequest(true)); dispatch(setSendRequest(true));
} }
}} }}
onMouseEnter={() => { onMouseEnter={() => {
if (startRangeDays && startDate && !endDate) { if (startRangeDays && startDate && !endDate)
onMouseRangeDays(day); onMouseRangeDays(day);
}
}} }}
key={day} key={day}
className={ className={
@ -318,7 +296,6 @@ export const ProfileCalendarComponent = React.memo(
</BaseButton> </BaseButton>
)} )}
</div> </div>
{shortReport && <ShortReport />}
</div> </div>
); );
} }

View File

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

View File

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

View File

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

View File

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