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

Reviewed-on: #15
2024-02-02 18:46:03 +03:00 · 2024-02-02 18:46:03 +03:00 · 4a81441d35
commit 4a81441d35
parent cdba3b4112 8a2876e30b
9 changed files with 342 additions and 103 deletions
--- a/src/App.js
+++ b/src/App.js
@ -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"
--- a/src/components/Navigation/Navigation.jsx
+++ b/src/components/Navigation/Navigation.jsx
@ -53,7 +53,7 @@ export const Navigation = () => {
        name: "Запросы"
      },
      {
-        path: "/categories",
+        path: "/employees",
        name: "Персонал"
      },
      {
--- a/src/components/PartnerPersonCard/PartnerPersonCard.jsx
+++ b/src/components/PartnerPersonCard/PartnerPersonCard.jsx
@ -15,7 +15,10 @@ 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" />
--- a/src/components/ProfileCalendar/ProfileCalendarComponent.jsx
+++ b/src/components/ProfileCalendar/ProfileCalendarComponent.jsx
@ -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,9 @@ 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 +174,7 @@ export const ProfileCalendarComponent = React.memo(
      <div className="calendar-component">
        <div className="calendar-component__header">
          <div className="calendar-component__header-info">
-            <h3>Мои отчеты за </h3>
+            {!userId && <h3>Мои отчеты за </h3>}
            <p className="calendar__hours">
              {month}&nbsp;
              <span>
--- a/src/pages/PartnerEmployeeReport/PartnerEmployeeReport.jsx
+++ b/src/pages/PartnerEmployeeReport/PartnerEmployeeReport.jsx
@ -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>
+  );
+};
--- a/src/pages/PartnerEmployeeReport/partnerEmployeeReport.scss
+++ b/src/pages/PartnerEmployeeReport/partnerEmployeeReport.scss
@ -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;
+  }
+}
--- a/src/pages/PartnerСategories/PartnerСategories.jsx
+++ b/src/pages/PartnerСategories/PartnerСategories.jsx
@ -7,6 +7,7 @@ import { apiRequest } from "@api/request";

 // import { setPartnerEmployees } from "@redux/outstaffingSlice";
 import { Footer } from "@components/Common/Footer/Footer";
+import { Loader } from "@components/Common/Loader/Loader";
 import { Navigation } from "@components/Navigation/Navigation";
 import PartnerPersonCard from "@components/PartnerPersonCard/PartnerPersonCard";
 import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
@ -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>
--- a/src/pages/ProjectTracker/ProjectTracker.js
+++ b/src/pages/ProjectTracker/ProjectTracker.js
@ -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>
--- a/src/pages/ViewReport/ViewReport.jsx
+++ b/src/pages/ViewReport/ViewReport.jsx
@ -20,13 +20,9 @@ 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([]);
@ -40,9 +36,8 @@ export const ViewReport = () => {
    setTaskText([]);
    setDifficulties([]);
    setTomorrowTask([]);
-    apiRequest(
-      `reports/find-by-date?user_id=${localStorage.getItem("id")}&date=${day}`
-    ).then((res) => {
+    apiRequest(`reports/find-by-date?user_id=${params.id}&date=${day}`).then(
+      (res) => {
        let spendTime = 0;
        for (const item of res) {
          if (item.difficulties) {
@ -64,7 +59,8 @@ export const ViewReport = () => {
        }
        setTotalHours(Math.floor(spendTime));
        setLoader(false);
-    });
+      }
+    );
    previousReportDay.setDate(previousReportDay.getDate() - 1);
    nextReportDay.setDate(nextReportDay.getDate() + 1);
  }
@ -80,7 +76,7 @@ export const ViewReport = () => {
  }

  useEffect(() => {
-    getReportFromDate(dateReport.id);
+    getReportFromDate(params.date);
  }, []);

  return (
@ -89,6 +85,8 @@ export const ViewReport = () => {
      <Navigation />
      <div className="container">
        <div className="viewReport__info">
+          {localStorage.getItem("role_status") !== "18" && (
+            <>
              <ProfileBreadcrumbs
                links={[
                  { name: "Главная", link: "/profile" },
@ -99,7 +97,16 @@ 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 +124,24 @@ 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 +215,13 @@ export const ViewReport = () => {
        )}
        {!Boolean(taskText.length) && !loader && (
          <div className="viewReport__noTask">
+            {localStorage.getItem("role_status") === "4" ? (
              <p>
                В этот день вы <span>не заполняли</span> отчет
              </p>
+            ) : (
+              <p>Отчет за день не заполнен</p>
+            )}
          </div>
        )}
        <Footer />