Merge pull request 'trackerTask' (#15) from trackerTask into main

Reviewed-on: #15
This commit is contained in:
Николай Полтщук 2024-02-02 18:46:03 +03:00
commit 4a81441d35
9 changed files with 342 additions and 103 deletions

View File

@ -42,6 +42,7 @@ import { PartnerEmployees } from "@pages/PartnerEmployees/PartnerEmployees";
import { AuthForCandidate } from "@pages/AuthForCandidate/AuthForCandidate"; import { AuthForCandidate } from "@pages/AuthForCandidate/AuthForCandidate";
import { RegistrationForCandidate } from "@pages/RegistrationForCandidate/RegistrationForCandidate"; import { RegistrationForCandidate } from "@pages/RegistrationForCandidate/RegistrationForCandidate";
import { ProfileCandidate } from "@pages/ProfileCandidate/ProfileCandidate"; import { ProfileCandidate } from "@pages/ProfileCandidate/ProfileCandidate";
import { PartnerEmployeeReport } from "@pages/PartnerEmployeeReport/PartnerEmployeeReport";
import { PassingTests } from "@pages/Quiz/PassingTests"; import { PassingTests } from "@pages/Quiz/PassingTests";
import Blog from "./pages/Blog/Blog"; import Blog from "./pages/Blog/Blog";
import Statistics from "@pages/Statistics/Statistics"; import Statistics from "@pages/Statistics/Statistics";
@ -120,7 +121,7 @@ const App = () => {
<Route exact path="calendar" element={<ProfileCalendar />} /> <Route exact path="calendar" element={<ProfileCalendar />} />
<Route exact path="calendar/view/" element={<ProfileCalendar />} /> <Route exact path="calendar/view/" element={<ProfileCalendar />} />
<Route exact path="summary" element={<Summary />} /> <Route exact path="summary" element={<Summary />} />
<Route exact path="view/:id" element={<ViewReport />} /> <Route exact path="view/:date/:id" element={<ViewReport />} />
<Route exact path="tracker" element={<Tracker />} /> <Route exact path="tracker" element={<Tracker />} />
<Route exact path="statistics/:id" element={<Statistics/>}/> <Route exact path="statistics/:id" element={<Statistics/>}/>
<Route exact path="payouts" element={<Payouts />} /> <Route exact path="payouts" element={<Payouts />} />
@ -129,8 +130,10 @@ const App = () => {
<Route exact path="add-request" element={<PartnerAddRequest />} /> <Route exact path="add-request" element={<PartnerAddRequest />} />
<Route exact path="edit-request" element={<PartnerAddRequest />} /> <Route exact path="edit-request" element={<PartnerAddRequest />} />
<Route exact path="bid" element={<PartnerBid />} /> <Route exact path="bid" element={<PartnerBid />} />
<Route exact path="categories" element={<PartnerCategories />} /> <Route exact path="employees" element={<PartnerCategories />} />
<Route exact path="employees/report/:uuid" element={<PartnerEmployeeReport />} />
<Route exact path="treaties" element={<PartnerTreaties />} /> <Route exact path="treaties" element={<PartnerTreaties />} />
<Route <Route
exact exact
path="categories/employees" path="categories/employees"

View File

@ -53,7 +53,7 @@ export const Navigation = () => {
name: "Запросы" name: "Запросы"
}, },
{ {
path: "/categories", path: "/employees",
name: "Персонал" name: "Персонал"
}, },
{ {

View File

@ -15,7 +15,10 @@ export const PartnerPersonCard = ({ name, img, userId }) => {
</div> </div>
<div className="partnerPersonCard__info"> <div className="partnerPersonCard__info">
<h2 className="partnerPersonCard__name">{name}</h2> <h2 className="partnerPersonCard__name">{name}</h2>
<Link className="partnerPersonCard__report" to={`calendar/${userId}`}> <Link
className="partnerPersonCard__report"
to={`/profile/employees/report/${userId}`}
>
Подробный отчет Подробный отчет
<div className="partnerPersonCard__more"> <div className="partnerPersonCard__more">
<img src={rightArrow} alt="arrow" /> <img src={rightArrow} alt="arrow" />

View File

@ -32,6 +32,7 @@ import rectangle from "assets/images/rectangle__calendar.png";
export const ProfileCalendarComponent = React.memo( export const ProfileCalendarComponent = React.memo(
({ ({
userId,
value, value,
setValueHandler, setValueHandler,
reports, reports,
@ -94,9 +95,17 @@ 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 `../view/${date.created_at}`; if (userId) {
return `../view/${date.created_at}/${userId}`;
}
return `../view/${date.created_at}/${localStorage.getItem("id")}`;
} }
} }
if (userId) {
return "#";
}
return "../../report"; return "../../report";
} }
@ -114,7 +123,9 @@ export const ProfileCalendarComponent = React.memo(
startDate._d startDate._d
)}`; )}`;
apiRequest( apiRequest(
`/reports/index?${requestDates}&user_id =${localStorage.getItem("id")}` `/reports/index?${requestDates}&user_id=${
userId ? userId : localStorage.getItem("id")
}`
).then((reports) => { ).then((reports) => {
let spendTime = 0; let spendTime = 0;
reports.map((report) => { reports.map((report) => {
@ -163,7 +174,7 @@ export const ProfileCalendarComponent = React.memo(
<div className="calendar-component"> <div className="calendar-component">
<div className="calendar-component__header"> <div className="calendar-component__header">
<div className="calendar-component__header-info"> <div className="calendar-component__header-info">
<h3>Мои отчеты за </h3> {!userId && <h3>Мои отчеты за </h3>}
<p className="calendar__hours"> <p className="calendar__hours">
{month}&nbsp; {month}&nbsp;
<span> <span>

View File

@ -0,0 +1,131 @@
import moment from "moment/moment";
import React, { useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { Navigate, useParams } from "react-router-dom";
import { getRequestDates, setRequestDate } from "@redux/reportSlice";
import { apiRequest } from "@api/request";
import { getReports } from "@components/Calendar/calendarHelper";
import { Footer } from "@components/Common/Footer/Footer";
import { Loader } from "@components/Common/Loader/Loader";
import { Navigation } from "@components/Navigation/Navigation";
import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
import { ProfileCalendarComponent } from "@components/ProfileCalendar/ProfileCalendarComponent";
import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
import "./partnerEmployeeReport.scss";
export const PartnerEmployeeReport = () => {
// if (
// localStorage.getItem("role_status") !== "18"
// ) {
// return <Navigate to="/profile/categories" replace />;
// }
const params = useParams();
const dispatch = useDispatch();
const [userInfo, setUserInfo] = useState({});
const [value, setValue] = useState(moment());
const [reports, setReports] = useState([]);
const [totalHours, setTotalHours] = useState(0);
const requestDates = useSelector(getRequestDates);
const [startRangeDays, setStartRangeDays] = useState(false);
const [startDate, setStartDate] = useState(null);
const [loader, setLoader] = useState(true);
useEffect(() => {
dispatch(setRequestDate(getReports(moment())));
}, []);
useEffect(() => {
apiRequest(`/resume?userId=${params.uuid}`).then((res) => {
setUserInfo(res);
});
}, []);
useEffect(() => {
setLoader(true);
if (!requestDates) {
return;
}
apiRequest(`/reports/index?${requestDates}&user_id=${params.uuid}`).then(
(reports) => {
let spendTime = 0;
reports
.filter(
(item) => new Date(item.created_at).getMonth() === value.month()
)
.map((report) => {
spendTime += report.task.reduce(
(acc, task) => acc + task.hours_spent,
0
);
});
setTotalHours(Math.floor(spendTime));
setReports(reports);
setLoader(false);
}
);
}, [requestDates]);
return (
<div className="employeeReport">
<ProfileHeader />
<Navigation />
<div className="container">
<ProfileBreadcrumbs
links={[
{ name: "Главная", link: "/profile" },
{ name: "Данные моего персонала", link: "/profile/employees" }
]}
/>
{!Object.keys(userInfo).length ? (
<div className="employeeReport__loader">
<Loader style={"green"} height={80} width={80} />
</div>
) : (
<>
<div className="employeeReport__info">
<div className="employeeReport__name">
<h2>{userInfo.fio}</h2>
<p>{userInfo.position}</p>
</div>
<div className="employeeReport__skills">
{userInfo?.stack &&
userInfo.stack.map((skill, index) => {
return <span key={index}>{skill}</span>;
})}
</div>
</div>
<div className="employeeReport__wrapper">
{loader ? (
<div className="employeeReport__loader">
<Loader style={"green"} height={80} width={80} />
</div>
) : (
<div className="employeeReport__calendar ">
<ProfileCalendarComponent
userId={params.uuid}
setValueHandler={(value) => setValue(value)}
value={value}
reports={reports}
totalHours={totalHours}
startRangeDays={startRangeDays}
toggleRangeDays={() => setStartRangeDays(!startRangeDays)}
startDate={startDate}
setStartDateRange={(date) => setStartDate(date)}
/>
</div>
)}
</div>
</>
)}
</div>
<Footer />
</div>
);
};

View File

@ -0,0 +1,70 @@
.employeeReport {
background: #F1F1F1;
height: 100%;
min-height: 100vh;
font-family: "LabGrotesque", sans-serif;
.container {
margin-top: 23px;
}
&__info {
padding: 10px 15px;
background: white;
display: flex;
border-radius: 15px;
column-gap: 15px;
align-items: center;
}
&__name {
display: flex;
flex-direction: column;
row-gap: 10px;
width: 100%;
h2 {
font-size: 20px;
margin-bottom: 0;
}
p {
font-size: 15px;
}
}
&__skills {
display: flex;
flex-wrap: wrap;
gap: 7px;
width: 100%;
span {
font-size: 12px;
line-height: 14px;
color: #263238;
background: #8DC63F;
border-radius: 12px;
padding: 5px;
max-width: 130px;
height: 24px;
display: flex;
align-items: center;
padding: 0 10px;
}
}
&__calendar {
width: 100%;
}
&__wrapper {
display: flex;
align-items: center;
justify-content: center;
min-height: 620px;
}
&__loader {
margin: 20px;
}
}

View File

@ -7,6 +7,7 @@ import { apiRequest } from "@api/request";
// import { setPartnerEmployees } from "@redux/outstaffingSlice"; // import { setPartnerEmployees } from "@redux/outstaffingSlice";
import { Footer } from "@components/Common/Footer/Footer"; import { Footer } from "@components/Common/Footer/Footer";
import { Loader } from "@components/Common/Loader/Loader";
import { Navigation } from "@components/Navigation/Navigation"; import { Navigation } from "@components/Navigation/Navigation";
import PartnerPersonCard from "@components/PartnerPersonCard/PartnerPersonCard"; import PartnerPersonCard from "@components/PartnerPersonCard/PartnerPersonCard";
import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs"; import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
@ -32,9 +33,12 @@ export const PartnerCategories = () => {
} }
const [staff, setStaff] = useState([]); const [staff, setStaff] = useState([]);
const [loader, setLoader] = useState(false);
useEffect(() => { useEffect(() => {
setLoader(true);
apiRequest("/project/my-employee").then((el) => { apiRequest("/project/my-employee").then((el) => {
setLoader(false);
setStaff(el.managerEmployees); setStaff(el.managerEmployees);
}); });
}, []); }, []);
@ -149,55 +153,59 @@ export const PartnerCategories = () => {
<ProfileBreadcrumbs <ProfileBreadcrumbs
links={[ links={[
{ name: "Главная", link: "/profile" }, { name: "Главная", link: "/profile" },
{ name: "Данные моего персонала", link: "/profile/categories" } { name: "Данные моего персонала", link: "/profile/employees" }
]} ]}
/> />
<h2 className="partnerCategories__title">Данные персонала</h2> <h2 className="partnerCategories__title">Данные персонала</h2>
<div className="partnerCategories__items"> {loader ? (
{staff.map((card) => { <Loader style={"green"} height={80} width={80} />
return ( ) : (
<PartnerPersonCard <div className="partnerCategories__items">
key={card.id} {staff.map((card) => {
name={card.employee.fio} return (
img={card.employee.avatar} <PartnerPersonCard
userId={card.user_id} key={card.id}
/> name={card.employee.fio}
); img={card.employee.avatar}
})} userId={card.user_id}
{/*{personalInfoItems.map((item, index) => {*/} />
{/* return (*/} );
{/* <Link*/} })}
{/* to={item.link}*/} {/*{personalInfoItems.map((item, index) => {*/}
{/* key={index}*/} {/* return (*/}
{/* className={*/} {/* <Link*/}
{/* item.available*/} {/* to={item.link}*/}
{/* ? "partnerCategories__item item"*/} {/* key={index}*/}
{/* : "partnerCategories__item item item__disable"*/} {/* className={*/}
{/* }*/} {/* item.available*/}
{/* onClick={() => {*/} {/* ? "partnerCategories__item item"*/}
{/* dispatch(setPartnerEmployees(mokPersons));*/} {/* : "partnerCategories__item item item__disable"*/}
{/* }}*/} {/* }*/}
{/* >*/} {/* onClick={() => {*/}
{/* <div className="item__title">*/} {/* dispatch(setPartnerEmployees(mokPersons));*/}
{/* <img src={item.img} alt={item.title} />*/} {/* }}*/}
{/* <h4>{item.title}</h4>*/} {/* >*/}
{/* </div>*/} {/* <div className="item__title">*/}
{/* <div className="item__info">*/} {/* <img src={item.img} alt={item.title} />*/}
{/* <p>{item.description}</p>*/} {/* <h4>{item.title}</h4>*/}
{/* <div className="more">*/} {/* </div>*/}
{/* <img src={rightArrow} alt="arrow" />*/} {/* <div className="item__info">*/}
{/* </div>*/} {/* <p>{item.description}</p>*/}
{/* </div>*/} {/* <div className="more">*/}
{/* {!item.available && (*/} {/* <img src={rightArrow} alt="arrow" />*/}
{/* <div className="item__disableHover">*/} {/* </div>*/}
{/* <p>У вас нет персонала из категории</p>*/} {/* </div>*/}
{/* <button>Подобрать</button>*/} {/* {!item.available && (*/}
{/* </div>*/} {/* <div className="item__disableHover">*/}
{/* )}*/} {/* <p>У вас нет персонала из категории</p>*/}
{/* </Link>*/} {/* <button>Подобрать</button>*/}
{/* );*/} {/* </div>*/}
{/*})}*/} {/* )}*/}
</div> {/* </Link>*/}
{/* );*/}
{/*})}*/}
</div>
)}
</div> </div>
<Footer /> <Footer />
</div> </div>

View File

@ -973,7 +973,7 @@ export const ProjectTracker = () => {
<div className="tasks__board__item__info__more"> <div className="tasks__board__item__info__more">
<img src={filesBoard} alt="filesImg" /> <img src={filesBoard} alt="filesImg" />
<span> <span>
{task.files ? task.files : 0}{" "} {task.file_count ? task.file_count : 0}{" "}
{/* {caseOfNum(0, "files")} */} {/* {caseOfNum(0, "files")} */}
</span> </span>
</div> </div>

View File

@ -20,13 +20,9 @@ import arrow from "assets/icons/arrows/left-arrow.png";
import "./viewReport.scss"; import "./viewReport.scss";
export const ViewReport = () => { export const ViewReport = () => {
if (localStorage.getItem("role_status") === "18") { const params = useParams();
return <Navigate to="/profile" replace />; const [previousReportDay] = useState(new Date(params.date));
} const [nextReportDay] = useState(new Date(params.date));
const dateReport = useParams();
const [previousReportDay] = useState(new Date(dateReport.id));
const [nextReportDay] = useState(new Date(dateReport.id));
const [taskText, setTaskText] = useState([]); const [taskText, setTaskText] = useState([]);
const [difficulties, setDifficulties] = useState([]); const [difficulties, setDifficulties] = useState([]);
@ -40,31 +36,31 @@ export const ViewReport = () => {
setTaskText([]); setTaskText([]);
setDifficulties([]); setDifficulties([]);
setTomorrowTask([]); setTomorrowTask([]);
apiRequest( apiRequest(`reports/find-by-date?user_id=${params.id}&date=${day}`).then(
`reports/find-by-date?user_id=${localStorage.getItem("id")}&date=${day}` (res) => {
).then((res) => { let spendTime = 0;
let spendTime = 0; for (const item of res) {
for (const item of res) { if (item.difficulties) {
if (item.difficulties) { setDifficulties((prevArray) => [...prevArray, item.difficulties]);
setDifficulties((prevArray) => [...prevArray, item.difficulties]); }
} if (item.tomorrow) {
if (item.tomorrow) { setTomorrowTask((prevArray) => [...prevArray, item.tomorrow]);
setTomorrowTask((prevArray) => [...prevArray, item.tomorrow]); }
} item.task.map((task) => {
item.task.map((task) => { const taskInfo = {
const taskInfo = { hours: task.hours_spent,
hours: task.hours_spent, task: task.task,
task: task.task, id: task.id
id: task.id };
}; spendTime += Math.floor(task.hours_spent);
spendTime += Math.floor(task.hours_spent);
setTaskText((prevArray) => [...prevArray, taskInfo]); setTaskText((prevArray) => [...prevArray, taskInfo]);
}); });
}
setTotalHours(Math.floor(spendTime));
setLoader(false);
} }
setTotalHours(Math.floor(spendTime)); );
setLoader(false);
});
previousReportDay.setDate(previousReportDay.getDate() - 1); previousReportDay.setDate(previousReportDay.getDate() - 1);
nextReportDay.setDate(nextReportDay.getDate() + 1); nextReportDay.setDate(nextReportDay.getDate() + 1);
} }
@ -80,7 +76,7 @@ export const ViewReport = () => {
} }
useEffect(() => { useEffect(() => {
getReportFromDate(dateReport.id); getReportFromDate(params.date);
}, []); }, []);
return ( return (
@ -89,17 +85,28 @@ export const ViewReport = () => {
<Navigation /> <Navigation />
<div className="container"> <div className="container">
<div className="viewReport__info"> <div className="viewReport__info">
<ProfileBreadcrumbs {localStorage.getItem("role_status") !== "18" && (
links={[ <>
{ name: "Главная", link: "/profile" }, <ProfileBreadcrumbs
{ name: "Ваша отчетность", link: "/profile/calendar" }, links={[
{ name: "Просмотр отчета за день", link: "/profile/view" } { name: "Главная", link: "/profile" },
]} { name: "Ваша отчетность", link: "/profile/calendar" },
/> { name: "Просмотр отчета за день", link: "/profile/view" }
<h2 className="viewReport__title"> ]}
Ваши отчеты - <span>просмотр отчета за день</span> />
</h2> <h2 className="viewReport__title">
<Link className="viewReport__back" to={`/profile/calendar`}> Ваши отчеты - <span>просмотр отчета за день</span>
</h2>
</>
)}
<Link
className="viewReport__back"
to={
localStorage.getItem("role_status") === "18"
? `/profile/employees/report/${params.id}`
: `/profile/calendar`
}
>
<img src={arrow} alt="#" /> <img src={arrow} alt="#" />
<p>Вернуться</p> <p>Вернуться</p>
</Link> </Link>
@ -117,22 +124,24 @@ export const ViewReport = () => {
</div> </div>
<div className="viewReport__switch-date"> <div className="viewReport__switch-date">
<div onClick={() => previousDay()}> <div onClick={() => previousDay()}>
<Link to={`../view/${getCreatedDate(previousReportDay)}`}> <Link
to={`../view/${getCreatedDate(previousReportDay)}/${params.id}`}
>
<div className="viewReport__switch-date__prev switch-date"> <div className="viewReport__switch-date__prev switch-date">
<img src={arrowSwitchDate} alt="arrow" /> <img src={arrowSwitchDate} alt="arrow" />
</div> </div>
</Link> </Link>
</div> </div>
<p>{getCorrectDate(dateReport.id)}</p> <p>{getCorrectDate(params.date)}</p>
<div <div
onClick={() => nextDay()} onClick={() => nextDay()}
className={`${ className={`${
getCreatedDate(currentDay) === dateReport.id ? "disable" : "" getCreatedDate(currentDay) === params.date ? "disable" : ""
}`} }`}
> >
<Link to={`../view/${getCreatedDate(nextReportDay)}`}> <Link to={`../view/${getCreatedDate(nextReportDay)}/${params.id}`}>
<div className={`viewReport__switch-date__next switch-date`}> <div className={`viewReport__switch-date__next switch-date`}>
<img src={arrowSwitchDate} alt="arrow" /> <img src={arrowSwitchDate} alt="arrow" />
</div> </div>
@ -206,9 +215,13 @@ export const ViewReport = () => {
)} )}
{!Boolean(taskText.length) && !loader && ( {!Boolean(taskText.length) && !loader && (
<div className="viewReport__noTask"> <div className="viewReport__noTask">
<p> {localStorage.getItem("role_status") === "4" ? (
В этот день вы <span>не заполняли</span> отчет <p>
</p> В этот день вы <span>не заполняли</span> отчет
</p>
) : (
<p>Отчет за день не заполнен</p>
)}
</div> </div>
)} )}
<Footer /> <Footer />