employeeReport
This commit is contained in:
parent
dafb05619d
commit
5825015706
@ -42,6 +42,7 @@ import { PartnerEmployees } from "@pages/PartnerEmployees/PartnerEmployees";
|
||||
import { AuthForCandidate } from "@pages/AuthForCandidate/AuthForCandidate";
|
||||
import { RegistrationForCandidate } from "@pages/RegistrationForCandidate/RegistrationForCandidate";
|
||||
import { ProfileCandidate } from "@pages/ProfileCandidate/ProfileCandidate";
|
||||
import { PartnerEmployeeReport } from "@pages/PartnerEmployeeReport/PartnerEmployeeReport";
|
||||
import { PassingTests } from "@pages/Quiz/PassingTests";
|
||||
import Blog from "./pages/Blog/Blog";
|
||||
import Statistics from "@pages/Statistics/Statistics";
|
||||
@ -120,7 +121,7 @@ const App = () => {
|
||||
<Route exact path="calendar" element={<ProfileCalendar />} />
|
||||
<Route exact path="calendar/view/" element={<ProfileCalendar />} />
|
||||
<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="statistics/:id" element={<Statistics/>}/>
|
||||
<Route exact path="payouts" element={<Payouts />} />
|
||||
@ -129,8 +130,10 @@ const App = () => {
|
||||
<Route exact path="add-request" element={<PartnerAddRequest />} />
|
||||
<Route exact path="edit-request" element={<PartnerAddRequest />} />
|
||||
<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="categories/employees"
|
||||
|
@ -53,7 +53,7 @@ export const Navigation = () => {
|
||||
name: "Запросы"
|
||||
},
|
||||
{
|
||||
path: "/categories",
|
||||
path: "/employees",
|
||||
name: "Персонал"
|
||||
},
|
||||
{
|
||||
|
@ -15,7 +15,7 @@ export const PartnerPersonCard = ({ name, img, userId }) => {
|
||||
</div>
|
||||
<div className="partnerPersonCard__info">
|
||||
<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">
|
||||
<img src={rightArrow} alt="arrow" />
|
||||
|
@ -32,6 +32,7 @@ import rectangle from "assets/images/rectangle__calendar.png";
|
||||
|
||||
export const ProfileCalendarComponent = React.memo(
|
||||
({
|
||||
userId,
|
||||
value,
|
||||
setValueHandler,
|
||||
reports,
|
||||
@ -94,9 +95,17 @@ export const ProfileCalendarComponent = React.memo(
|
||||
new Date(day).getMonth() + 1
|
||||
)}-${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";
|
||||
}
|
||||
|
||||
@ -114,7 +123,7 @@ export const ProfileCalendarComponent = React.memo(
|
||||
startDate._d
|
||||
)}`;
|
||||
apiRequest(
|
||||
`/reports/index?${requestDates}&user_id =${localStorage.getItem("id")}`
|
||||
`/reports/index?${requestDates}&user_id=${userId ? userId : localStorage.getItem("id")}`
|
||||
).then((reports) => {
|
||||
let spendTime = 0;
|
||||
reports.map((report) => {
|
||||
@ -163,7 +172,9 @@ export const ProfileCalendarComponent = React.memo(
|
||||
<div className="calendar-component">
|
||||
<div className="calendar-component__header">
|
||||
<div className="calendar-component__header-info">
|
||||
{!userId &&
|
||||
<h3>Мои отчеты за </h3>
|
||||
}
|
||||
<p className="calendar__hours">
|
||||
{month}
|
||||
<span>
|
||||
|
131
src/pages/PartnerEmployeeReport/PartnerEmployeeReport.jsx
Normal file
131
src/pages/PartnerEmployeeReport/PartnerEmployeeReport.jsx
Normal file
@ -0,0 +1,131 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { Navigate, useParams } from "react-router-dom";
|
||||
|
||||
import { Footer } from "@components/Common/Footer/Footer";
|
||||
import { Navigation } from "@components/Navigation/Navigation";
|
||||
import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
|
||||
import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
|
||||
import { ProfileCalendarComponent } from "@components/ProfileCalendar/ProfileCalendarComponent";
|
||||
|
||||
import { apiRequest } from "@api/request";
|
||||
|
||||
import "./partnerEmployeeReport.scss";
|
||||
import moment from "moment/moment";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import { getRequestDates, setRequestDate } from "@redux/reportSlice";
|
||||
import { getReports } from "@components/Calendar/calendarHelper";
|
||||
import { Loader } from "@components/Common/Loader/Loader";
|
||||
|
||||
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>
|
||||
);
|
||||
};
|
70
src/pages/PartnerEmployeeReport/partnerEmployeeReport.scss
Normal file
70
src/pages/PartnerEmployeeReport/partnerEmployeeReport.scss
Normal 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;
|
||||
}
|
||||
}
|
@ -24,6 +24,7 @@ import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
|
||||
// import TestImg from "assets/images/partnerProfile/PersonalTesters.svg";
|
||||
// import BackEndImg from "assets/images/partnerProfile/personalBackEnd.svg";
|
||||
import "./partnerСategories.scss";
|
||||
import { Loader } from "@components/Common/Loader/Loader";
|
||||
|
||||
export const PartnerCategories = () => {
|
||||
// const dispatch = useDispatch();
|
||||
@ -32,9 +33,12 @@ export const PartnerCategories = () => {
|
||||
}
|
||||
|
||||
const [staff, setStaff] = useState([]);
|
||||
const [loader, setLoader] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
setLoader(true)
|
||||
apiRequest("/project/my-employee").then((el) => {
|
||||
setLoader(false)
|
||||
setStaff(el.managerEmployees);
|
||||
});
|
||||
}, []);
|
||||
@ -149,10 +153,13 @@ export const PartnerCategories = () => {
|
||||
<ProfileBreadcrumbs
|
||||
links={[
|
||||
{ name: "Главная", link: "/profile" },
|
||||
{ name: "Данные моего персонала", link: "/profile/categories" }
|
||||
{ name: "Данные моего персонала", link: "/profile/employees" }
|
||||
]}
|
||||
/>
|
||||
<h2 className="partnerCategories__title">Данные персонала</h2>
|
||||
{loader ?
|
||||
<Loader style={'green'} height={80} width={80} />
|
||||
:
|
||||
<div className="partnerCategories__items">
|
||||
{staff.map((card) => {
|
||||
return (
|
||||
@ -198,6 +205,7 @@ export const PartnerCategories = () => {
|
||||
{/* );*/}
|
||||
{/*})}*/}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
<Footer />
|
||||
</div>
|
||||
|
@ -973,7 +973,7 @@ export const ProjectTracker = () => {
|
||||
<div className="tasks__board__item__info__more">
|
||||
<img src={filesBoard} alt="filesImg" />
|
||||
<span>
|
||||
{task.files ? task.files : 0}{" "}
|
||||
{task.file_count ? task.file_count : 0}{" "}
|
||||
{/* {caseOfNum(0, "files")} */}
|
||||
</span>
|
||||
</div>
|
||||
|
@ -20,13 +20,10 @@ import arrow from "assets/icons/arrows/left-arrow.png";
|
||||
import "./viewReport.scss";
|
||||
|
||||
export const ViewReport = () => {
|
||||
if (localStorage.getItem("role_status") === "18") {
|
||||
return <Navigate to="/profile" replace />;
|
||||
}
|
||||
|
||||
const dateReport = useParams();
|
||||
const [previousReportDay] = useState(new Date(dateReport.id));
|
||||
const [nextReportDay] = useState(new Date(dateReport.id));
|
||||
const params = useParams();
|
||||
const [previousReportDay] = useState(new Date(params.date));
|
||||
const [nextReportDay] = useState(new Date(params.date));
|
||||
|
||||
const [taskText, setTaskText] = useState([]);
|
||||
const [difficulties, setDifficulties] = useState([]);
|
||||
@ -41,7 +38,7 @@ export const ViewReport = () => {
|
||||
setDifficulties([]);
|
||||
setTomorrowTask([]);
|
||||
apiRequest(
|
||||
`reports/find-by-date?user_id=${localStorage.getItem("id")}&date=${day}`
|
||||
`reports/find-by-date?user_id=${params.id}&date=${day}`
|
||||
).then((res) => {
|
||||
let spendTime = 0;
|
||||
for (const item of res) {
|
||||
@ -80,7 +77,7 @@ export const ViewReport = () => {
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
getReportFromDate(dateReport.id);
|
||||
getReportFromDate(params.date);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
@ -89,6 +86,8 @@ export const ViewReport = () => {
|
||||
<Navigation />
|
||||
<div className="container">
|
||||
<div className="viewReport__info">
|
||||
{localStorage.getItem("role_status") !== "18" &&
|
||||
<>
|
||||
<ProfileBreadcrumbs
|
||||
links={[
|
||||
{ name: "Главная", link: "/profile" },
|
||||
@ -99,7 +98,10 @@ export const ViewReport = () => {
|
||||
<h2 className="viewReport__title">
|
||||
Ваши отчеты - <span>просмотр отчета за день</span>
|
||||
</h2>
|
||||
<Link className="viewReport__back" to={`/profile/calendar`}>
|
||||
</>
|
||||
}
|
||||
<Link className="viewReport__back"
|
||||
to={localStorage.getItem("role_status") === "18" ? `/profile/employees/report/${params.id}` :`/profile/calendar`}>
|
||||
<img src={arrow} alt="#" />
|
||||
<p>Вернуться</p>
|
||||
</Link>
|
||||
@ -117,22 +119,22 @@ export const ViewReport = () => {
|
||||
</div>
|
||||
<div className="viewReport__switch-date">
|
||||
<div onClick={() => previousDay()}>
|
||||
<Link to={`../view/${getCreatedDate(previousReportDay)}`}>
|
||||
<Link to={`../view/${getCreatedDate(previousReportDay)}/${params.id}`}>
|
||||
<div className="viewReport__switch-date__prev switch-date">
|
||||
<img src={arrowSwitchDate} alt="arrow" />
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<p>{getCorrectDate(dateReport.id)}</p>
|
||||
<p>{getCorrectDate(params.date)}</p>
|
||||
|
||||
<div
|
||||
onClick={() => nextDay()}
|
||||
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`}>
|
||||
<img src={arrowSwitchDate} alt="arrow" />
|
||||
</div>
|
||||
@ -206,9 +208,12 @@ export const ViewReport = () => {
|
||||
)}
|
||||
{!Boolean(taskText.length) && !loader && (
|
||||
<div className="viewReport__noTask">
|
||||
{localStorage.getItem("role_status") === "4" ?
|
||||
<p>
|
||||
В этот день вы <span>не заполняли</span> отчет
|
||||
</p>
|
||||
</p> :
|
||||
<p>Отчет за день не заполнен</p>
|
||||
}
|
||||
</div>
|
||||
)}
|
||||
<Footer />
|
||||
|
Loading…
Reference in New Issue
Block a user