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

Reviewed-on: #15

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"

src/components/Navigation/Navigation.jsx

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

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" />

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>

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>
+  );
+};

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;
+  }
+}

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,55 +153,59 @@ export const PartnerCategories = () => {
         <ProfileBreadcrumbs
           links={[
             { name: "Главная", link: "/profile" },
-            { name: "Данные моего персонала", link: "/profile/categories" }
+            { name: "Данные моего персонала", link: "/profile/employees" }
           ]}
         />
         <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>
       <Footer />
     </div>

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>

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") {
+  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 [difficulties, setDifficulties] = useState([]);
@@ -40,31 +36,31 @@ export const ViewReport = () => {
     setTaskText([]);
     setDifficulties([]);
     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);
     nextReportDay.setDate(nextReportDay.getDate() + 1);
   }
@@ -80,7 +76,7 @@ export const ViewReport = () => {
   }
 
   useEffect(() => {
-    getReportFromDate(dateReport.id);
+    getReportFromDate(params.date);
   }, []);
 
   return (
@@ -89,17 +85,28 @@ export const ViewReport = () => {
       <Navigation />
       <div className="container">
         <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="#" />
             <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">
-            <p>
+            {localStorage.getItem("role_status") === "4" ? (
-              В этот день вы <span>не заполняли</span> отчет
+              <p>
-            </p>
+                В этот день вы <span>не заполняли</span> отчет
+              </p>
+            ) : (
+              <p>Отчет за день не заполнен</p>
+            )}
           </div>
         )}
         <Footer />