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

Reviewed-on: #17
2024-02-09 18:01:51 +03:00 · 2024-02-09 18:01:51 +03:00 · ab90e59880
commit ab90e59880
parent 2f61f7f130 4d2ccf91eb
12 changed files with 196 additions and 43 deletions
--- a/src/components/Modal/ModalRegistration/ModalRegistration.jsx
+++ b/src/components/Modal/ModalRegistration/ModalRegistration.jsx
@ -10,11 +10,13 @@ import ModalLayout from "@components/Common/ModalLayout/ModalLayout";
 import anyMoment from "assets/icons/anyMoment.svg";
 import doc from "assets/icons/doc.svg";
 import telegramLogo from "assets/icons/tgLogo.svg";
+import accept from "assets/images/accept.png";

 import "./modalRegistration.scss";

 export const ModalRegistration = ({ active, setActive }) => {
  const [loader, setLoader] = useState(false);
+  const [isPartner, setIsPartner] = useState(false);

  const fields = {
    username: "",
@ -56,7 +58,7 @@ export const ModalRegistration = ({ active, setActive }) => {
    fields,
    showNotificationError,
    showNotificationTrue,
-    closeModal
+    isPartner
  );

  return (
@ -123,6 +125,15 @@ export const ModalRegistration = ({ active, setActive }) => {
            </div>
          </div>
        </div>
+        <div
+          className="input_checkbox"
+          onClick={() => setIsPartner(!isPartner)}
+        >
+          <p>Партнер:</p>
+          <span className={isPartner ? "checkbox--active" : ""}>
+            {isPartner ? <img src={accept} alt="accept" /> : ""}
+          </span>
+        </div>

        <div className="button-box">
          {loader ? (
--- a/src/components/Modal/ModalRegistration/modalRegistration.scss
+++ b/src/components/Modal/ModalRegistration/modalRegistration.scss
@ -128,6 +128,38 @@
        }
      }

+      .input_checkbox {
+        display: flex;
+        width: 100%;
+        align-items: center;
+        cursor: pointer;
+
+        p {
+          font-size: 16px;
+          font-weight: 500;
+        }
+
+        span {
+          border: 1px solid gray;
+          border-radius: 4px;
+          width: 20px;
+          height: 20px;
+          margin-left: 10px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+
+          img {
+            width: 15px;
+            height: 15px;
+          }
+        }
+
+        .checkbox--active {
+          background: #f2f2f2;
+        }
+      }
+
      .button-box {
        display: flex;
        flex-direction: row;
--- a/src/components/ProfileCalendar/ProfileCalendar.jsx
+++ b/src/components/ProfileCalendar/ProfileCalendar.jsx
@ -7,6 +7,7 @@ import { Link, Navigate } from "react-router-dom";
 import { getProfileInfo } from "@redux/outstaffingSlice";
 import {
  getRequestDates,
+  setEditReport,
  setReportDate,
  setRequestDate
 } from "@redux/reportSlice";
@ -101,7 +102,10 @@ export const ProfileCalendar = () => {
          <Link to="/profile/calendar/report">
            <button
              className="calendar__btn"
-              onClick={() => dispatch(setReportDate(""))}
+              onClick={() => {
+                dispatch(setReportDate(""));
+                dispatch(setEditReport(""));
+              }}
            >
              Заполнить отчет
            </button>
--- a/src/components/ProfileCalendar/ProfileCalendarComponent.jsx
+++ b/src/components/ProfileCalendar/ProfileCalendarComponent.jsx
@ -5,6 +5,7 @@ import { useDispatch } from "react-redux";
 import { Link } from "react-router-dom";

 import {
+  setEditReport,
  setReportDate,
  setRequestDate,
  setSendRequest
@ -235,6 +236,7 @@ export const ProfileCalendarComponent = React.memo(
                    else {
                      dispatch(setReportDate(day));
                      dispatch(setSendRequest(true));
+                      dispatch(setEditReport(""));
                    }
                  }}
                  onMouseEnter={() => {
@ -284,15 +286,15 @@ export const ProfileCalendarComponent = React.memo(
                ? `${getCorrectDate(startDate)} - ${getCorrectDate(endDate)}`
                : `${getCorrectDate(endDate)} - ${getCorrectDate(startDate)}`
              : activePeriod
-                ? "Выберите диапазон на календаре"
-                : "Выбрать диапазон"}
+              ? "Выберите диапазон на календаре"
+              : "Выбрать диапазон"}
          </span>
          <span>
            {totalRangeHours
              ? `${totalRangeHours} ${hourOfNum(totalRangeHours)}`
              : endDate
-                ? "0 часов"
-                : ""}
+              ? "0 часов"
+              : ""}
          </span>
          {endDate && (
            <BaseButton
--- a/src/components/ReportForm/ReportForm.jsx
+++ b/src/components/ReportForm/ReportForm.jsx
@ -3,9 +3,11 @@ import React, { useEffect, useState } from "react";
 import DatePicker, { registerLocale } from "react-datepicker";
 import "react-datepicker/dist/react-datepicker.css";
 import { useSelector } from "react-redux";
+import { useDispatch } from "react-redux";
 import { Link, Navigate, useNavigate } from "react-router-dom";

-import { getReportDate } from "@redux/reportSlice";
+import { getEditReport, getReportDate } from "@redux/reportSlice";
+import { setEditReport } from "@redux/reportSlice";

 import { apiRequest } from "@api/request";

@ -35,6 +37,8 @@ const ReportForm = () => {
  }
  const navigate = useNavigate();
  const reportDate = useSelector(getReportDate);
+  const editReport = useSelector(getEditReport);
+  const dispatch = useDispatch();

  useEffect(() => {
    initListeners();
@ -43,15 +47,23 @@ const ReportForm = () => {
  const [isFetching, setIsFetching] = useState(false);
  const [reportSuccess, setReportSuccess] = useState("");
  const [startDate, setStartDate] = useState(
-    reportDate ? new Date(reportDate._d) : new Date()
+    reportDate || editReport
+      ? new Date(reportDate ? reportDate._d : editReport.created_at)
+      : new Date()
  );
  const [datePickerOpen, setDatePickerOpen] = useState(false);

-  const [inputs, setInputs] = useState([
-    { task: "", hours_spent: "", minutes_spent: 0 }
-  ]);
-  const [troublesInputValue, setTroublesInputValue] = useState("");
-  const [scheduledInputValue, setScheduledInputValue] = useState("");
+  const [inputs, setInputs] = useState(
+    editReport
+      ? editReport.task
+      : [{ task: "", hours_spent: "", minutes_spent: 0 }]
+  );
+  const [troublesInputValue, setTroublesInputValue] = useState(
+    editReport ? editReport.difficulties : ""
+  );
+  const [scheduledInputValue, setScheduledInputValue] = useState(
+    editReport ? editReport.tomorrow : ""
+  );

  const addInput = () => {
    setInputs((prev) => [
@ -112,14 +124,49 @@ const ReportForm = () => {
        setReportSuccess("");
        navigate("/profile/calendar");
      }, 1000);
-      setInputs(() => []);
-      setTroublesInputValue("");
-      setScheduledInputValue("");
      setIsFetching(false);
-      setInputs(() => [{ task: "", hours_spent: "", minutes_spent: 0 }]);
+      clearParams();
    });
  };

+  const handleEditReport = () => {
+    setIsFetching(true);
+    for (let input of inputs) {
+      if (!input.task || !input.hours_spent) {
+        setReportSuccess("Заполните задачи");
+        setTimeout(() => setReportSuccess(""), 2000);
+        setIsFetching(false);
+        return;
+      }
+    }
+    apiRequest(`/reports/update?id=${editReport.id}`, {
+      method: "PUT",
+      data: {
+        tasks: inputs,
+        difficulties: troublesInputValue,
+        tomorrow: scheduledInputValue,
+        created_at: getCreatedDate(startDate),
+        status: 1
+      }
+    }).then(() => {
+      setReportSuccess("Отчет изменён");
+      setTimeout(() => {
+        setReportSuccess("");
+        navigate("/profile/calendar");
+      }, 1000);
+      setIsFetching(false);
+      clearParams();
+      dispatch(setEditReport(""));
+    });
+  };
+
+  const clearParams = () => {
+    setInputs(() => []);
+    setTroublesInputValue("");
+    setScheduledInputValue("");
+    setInputs(() => [{ task: "", hours_spent: "", minutes_spent: 0 }]);
+  };
+
  return (
    <section className="report-form">
      <ProfileHeader />
@ -133,7 +180,8 @@ const ReportForm = () => {
          ]}
        />
        <h2 className="summary__title">
-          Ваши отчеты - <span>добавить отчет</span>
+          Ваши отчеты -{" "}
+          <span>{editReport ? "редактировать отчет" : "добавить отчет"}</span>
        </h2>
        <div>
          <div className="report__head">
@ -147,13 +195,14 @@ const ReportForm = () => {
        <div className="report-form__content">
          <div className="report-form__block">
            <div className="report-form__block-title">
-              <h2>Добавление отчета за день</h2>
+              <h2>
+                {editReport
+                  ? "Редактирование отчета за день"
+                  : "Добавление отчета за день"}
+              </h2>
              <h3>Дата заполнения отчета:</h3>
            </div>
-            <div
-              className="report-form__block-img"
-              onClick={() => setDatePickerOpen(true)}
-            >
+            <div className="report-form__block-img">
              <img
                className="report-form__calendar-icon"
                src={calendarIcon}
@ -299,9 +348,15 @@ const ReportForm = () => {
                ) : (
                  <button
                    className="report-form__footer-btn"
-                    onClick={() => handler()}
+                    onClick={() => {
+                      if (editReport) {
+                        handleEditReport();
+                      } else {
+                        handler();
+                      }
+                    }}
                  >
-                    Отправить
+                    {editReport ? "Редактировать" : "Отправить"}
                  </button>
                )}
                <p className="report-form__footer-text">
--- a/src/hooks/useFormValidation.js
+++ b/src/hooks/useFormValidation.js
@ -6,7 +6,8 @@ export const useFormValidation = (
  apiEndpoint,
  fields,
  showNotificationError,
-  showNotificationTrue
+  showNotificationTrue,
+  isPartner
 ) => {
  // Состояние формы, содержащее значения полей
  const [formData, setFormData] = useState(fields);
@ -84,7 +85,7 @@ export const useFormValidation = (
    e.preventDefault();
    // Проверка валидации формы
    if (validateForm()) {
-      let newformData = { ...formData };
+      let newformData = { ...formData, is_partner: isPartner ? 1 : 0 };
      delete newformData.secondPassword;

      try {
--- a/src/pages/PartnerСategories/PartnerСategories.jsx
+++ b/src/pages/PartnerСategories/PartnerСategories.jsx
@ -39,7 +39,7 @@ export const PartnerCategories = () => {
    setLoader(true);
    apiRequest("/project/my-employee").then((el) => {
      setLoader(false);
-      setStaff(el.managerEmployees);
+      setStaff(el?.managerEmployees);
    });
  }, []);

@ -161,16 +161,22 @@ export const PartnerCategories = () => {
          <Loader style={"green"} height={80} width={80} />
        ) : (
          <div className="partnerCategories__items">
-            {staff.map((card) => {
-              return (
-                <PartnerPersonCard
-                  key={card.id}
-                  name={card.employee.fio}
-                  img={card.employee.avatar}
-                  userId={card.user_id}
-                />
-              );
-            })}
+            {Boolean(staff) ? (
+              staff.map((card) => {
+                return (
+                  <PartnerPersonCard
+                    key={card.id}
+                    name={card.employee.fio}
+                    img={card.employee.avatar}
+                    userId={card.user_id}
+                  />
+                );
+              })
+            ) : (
+              <span className="partnerCategories__empty">
+                У вас нет нанятого персонала
+              </span>
+            )}
            {/*{personalInfoItems.map((item, index) => {*/}
            {/*  return (*/}
            {/*    <Link*/}
--- a/src/pages/PartnerСategories/partnerСategories.scss
+++ b/src/pages/PartnerСategories/partnerСategories.scss
@ -21,6 +21,12 @@
    //column-gap: 21px;
  }

+  &__empty {
+    font-size: 18px;
+    font-weight: 500;
+    margin-top: 20px;
+  }
+

  .item {
    display: flex;
--- a/src/pages/ProjectTracker/ProjectTracker.js
+++ b/src/pages/ProjectTracker/ProjectTracker.js
@ -43,6 +43,7 @@ import TrackerSelectColumn from "@components/TrackerSelectColumn/TrackerSelectCo

 import arrow from "assets/icons/arrows/arrowCalendar.png";
 import arrowDown from "assets/icons/arrows/selectArrow.png";
+import calendarIcon from "assets/icons/calendar.svg";
 import close from "assets/icons/close.png";
 import commentsBoard from "assets/icons/commentsBoard.svg";
 import del from "assets/icons/delete.svg";
@ -54,7 +55,6 @@ import tasks from "assets/icons/trackerTasks.svg";
 import accept from "assets/images/accept.png";
 import archive from "assets/images/archiveIcon.png";
 import avatarMok from "assets/images/avatarMok.png";
-import calendarIcon from "assets/icons/calendar.svg";

 import { getCorrectDate } from "../../components/Calendar/calendarHelper";

--- a/src/pages/ViewReport/ViewReport.jsx
+++ b/src/pages/ViewReport/ViewReport.jsx
@ -1,6 +1,9 @@
 import React, { useEffect, useState } from "react";
+import { useDispatch } from "react-redux";
 import { Link, useParams } from "react-router-dom";

+import { setEditReport } from "@redux/reportSlice";
+
 import { apiRequest } from "@api/request";

 import {
@ -20,6 +23,7 @@ import arrow from "assets/icons/arrows/left-arrow.png";
 import "./viewReport.scss";

 export const ViewReport = () => {
+  const dispatch = useDispatch();
  const params = useParams();
  const [previousReportDay] = useState(new Date(params.date));
  const [nextReportDay] = useState(new Date(params.date));
@ -32,6 +36,7 @@ export const ViewReport = () => {
  const [currentDay] = useState(new Date());
  const [loader, setLoader] = useState(false);
  const [deleteLoader, setDeleteLoader] = useState(false);
+  const [reportInfo, setReportInfo] = useState({});

  function getReportFromDate(day) {
    setLoader(true);
@ -41,6 +46,7 @@ export const ViewReport = () => {
    apiRequest(`reports/find-by-date?user_id=${params.id}&date=${day}`).then(
      (res) => {
        let spendTime = 0;
+        setReportInfo(res[0]);
        setTaskId(res[0]?.id);
        for (const item of res) {
          if (item.difficulties) {
@ -127,7 +133,17 @@ export const ViewReport = () => {
          </Link>
          {localStorage.getItem("role_status") !== "18" && (
            <div className="viewReport__bar">
-              <button className="viewReport__bar__edit">Редактировать</button>
+              <Link
+                to="/profile/calendar/report"
+                onClick={() => dispatch(setEditReport(reportInfo))}
+                className={
+                  taskText.length
+                    ? "viewReport__bar__edit"
+                    : "viewReport__bar__edit disable"
+                }
+              >
+                Редактировать
+              </Link>
              {deleteLoader ? (
                <Loader style={"green"} />
              ) : (
--- a/src/pages/ViewReport/viewReport.scss
+++ b/src/pages/ViewReport/viewReport.scss
@ -73,9 +73,18 @@
    }

    &__edit {
+      color: #000000;
+      font-size: 15px;
+      font-weight: 500;
+      line-height: 32px;
+      padding: 8px 24px;
      background: #E1FCCF;
      border-radius: 44px;
      border: none;
+
+      &:hover {
+        color: #000000;
+      }
    }

    &__delete {
--- a/src/redux/reportSlice.js
+++ b/src/redux/reportSlice.js
@ -4,7 +4,8 @@ const initialState = {
  dateSelected: "",
  reportDate: "",
  requestDates: "",
-  sendRequest: ""
+  sendRequest: "",
+  editReport: ""
 };

 export const reportSlice = createSlice({
@ -22,12 +23,20 @@ export const reportSlice = createSlice({
    },
    setSendRequest: (state, action) => {
      state.sendRequest = action.payload;
+    },
+    setEditReport: (state, action) => {
+      state.editReport = action.payload;
    }
  }
 });

-export const { dateSelected, setReportDate, setRequestDate, setSendRequest } =
-  reportSlice.actions;
+export const {
+  dateSelected,
+  setReportDate,
+  setRequestDate,
+  setSendRequest,
+  setEditReport
+} = reportSlice.actions;

 export const selectDate = (state) => state.report.dateSelected;

@ -37,4 +46,6 @@ export const getRequestDates = (state) => state.report.requestDates;

 export const getSendRequest = (state) => state.report.sendRequest;

+export const getEditReport = (state) => state.report.editReport;
+
 export default reportSlice.reducer;