partner reg, fix employers bug, edit report

src/components/Modal/ModalRegistration/ModalRegistration.jsx

@@ -10,17 +10,19 @@ 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: "",
     email: "",
     password: "",
-    secondPassword: ""
+    secondPassword: "",
   };
   const closeModal = () => {
     setActive(false);
@@ -56,7 +58,7 @@ export const ModalRegistration = ({ active, setActive }) => {
     fields,
     showNotificationError,
     showNotificationTrue,
-    closeModal
+    isPartner
   );
 
   return (
@@ -123,6 +125,12 @@ 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 ? (

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;

src/components/ProfileCalendar/ProfileCalendar.jsx

@@ -8,7 +8,8 @@ import { getProfileInfo } from "@redux/outstaffingSlice";
 import {
   getRequestDates,
   setReportDate,
-  setRequestDate
+  setRequestDate,
+  setEditReport
 } from "@redux/reportSlice";
 
 import { urlForLocal } from "@utils/helper";
@@ -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>

src/components/ProfileCalendar/ProfileCalendarComponent.jsx

@@ -7,7 +7,8 @@ import { Link } from "react-router-dom";
 import {
   setReportDate,
   setRequestDate,
-  setSendRequest
+  setSendRequest,
+  setEditReport
 } from "@redux/reportSlice";
 
 import { getCorrectYYMMDD } from "@utils/helper";
@@ -235,6 +236,7 @@ export const ProfileCalendarComponent = React.memo(
                     else {
                       dispatch(setReportDate(day));
                       dispatch(setSendRequest(true));
+                      dispatch(setEditReport(""))
                     }
                   }}
                   onMouseEnter={() => {

src/components/ReportForm/ReportForm.jsx

@@ -5,7 +5,9 @@ import "react-datepicker/dist/react-datepicker.css";
 import { useSelector } from "react-redux";
 import { Link, Navigate, useNavigate } from "react-router-dom";
 
-import { getReportDate } from "@redux/reportSlice";
+import { getReportDate, getEditReport } from "@redux/reportSlice";
+import { setEditReport } from "@redux/reportSlice";
+import { useDispatch } from "react-redux";
 
 import { apiRequest } from "@api/request";
 
@@ -35,6 +37,9 @@ const ReportForm = () => {
   }
   const navigate = useNavigate();
   const reportDate = useSelector(getReportDate);
+  const editReport = useSelector(getEditReport)
+  const dispatch = useDispatch();
+
 
   useEffect(() => {
     initListeners();
@@ -43,15 +48,15 @@ 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([
+  const [inputs, setInputs] = useState(editReport ? editReport.task : [
     { task: "", hours_spent: "", minutes_spent: 0 }
   ]);
-  const [troublesInputValue, setTroublesInputValue] = useState("");
+  const [troublesInputValue, setTroublesInputValue] = useState(editReport ? editReport.difficulties :"");
-  const [scheduledInputValue, setScheduledInputValue] = useState("");
+  const [scheduledInputValue, setScheduledInputValue] = useState(editReport ? editReport.tomorrow : "");
 
   const addInput = () => {
     setInputs((prev) => [
@@ -112,13 +117,48 @@ const ReportForm = () => {
         setReportSuccess("");
         navigate("/profile/calendar");
       }, 1000);
+      setIsFetching(false);
+      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("");
-      setIsFetching(false);
     setInputs(() => [{ task: "", hours_spent: "", minutes_spent: 0 }]);
-    });
+  }
-  };
 
   return (
     <section className="report-form">
@@ -133,7 +173,7 @@ const ReportForm = () => {
           ]}
         />
         <h2 className="summary__title">
-          Ваши отчеты - <span>добавить отчет</span>
+          Ваши отчеты - <span>{editReport ? "редактировать отчет" : "добавить отчет"}</span>
         </h2>
         <div>
           <div className="report__head">
@@ -147,12 +187,11 @@ 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)}
             >
               <img
                 className="report-form__calendar-icon"
@@ -299,9 +338,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">

src/hooks/useFormValidation.js

@@ -6,11 +6,13 @@ export const useFormValidation = (
   apiEndpoint,
   fields,
   showNotificationError,
-  showNotificationTrue
+  showNotificationTrue,
+  isPartner
 ) => {
   // Состояние формы, содержащее значения полей
   const [formData, setFormData] = useState(fields);
 
+
   // Состояние ошибок валидации
   const [validationErrors, setValidationErrors] = useState({});
 
@@ -84,7 +86,7 @@ export const useFormValidation = (
     e.preventDefault();
     // Проверка валидации формы
     if (validateForm()) {
-      let newformData = { ...formData };
+      let newformData = { ...formData, is_partner: isPartner ? 1 : 0 };
       delete newformData.secondPassword;
 
       try {

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,7 +161,7 @@ export const PartnerCategories = () => {
           <Loader style={"green"} height={80} width={80} />
         ) : (
           <div className="partnerCategories__items">
-            {staff.map((card) => {
+            {Boolean(staff) ? staff.map((card) => {
               return (
                 <PartnerPersonCard
                   key={card.id}
@@ -170,7 +170,7 @@ export const PartnerCategories = () => {
                   userId={card.user_id}
                 />
               );
-            })}
+            }) : <span className="partnerCategories__empty">У вас нет нанятого персонала</span>}
             {/*{personalInfoItems.map((item, index) => {*/}
             {/*  return (*/}
             {/*    <Link*/}

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;

src/pages/ViewReport/ViewReport.jsx

@@ -2,6 +2,8 @@ import React, { useEffect, useState } from "react";
 import { Link, useParams } from "react-router-dom";
 
 import { apiRequest } from "@api/request";
+import { setEditReport } from "@redux/reportSlice";
+import { useDispatch } from "react-redux";
 
 import {
   getCorrectDate,
@@ -20,6 +22,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 +35,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 +45,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 +132,7 @@ 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"} />
               ) : (

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 {

src/redux/reportSlice.js

@@ -4,7 +4,8 @@ const initialState = {
   dateSelected: "",
   reportDate: "",
   requestDates: "",
-  sendRequest: ""
+  sendRequest: "",
+  editReport: ""
 };
 
 export const reportSlice = createSlice({
@@ -22,11 +23,14 @@ export const reportSlice = createSlice({
     },
     setSendRequest: (state, action) => {
       state.sendRequest = action.payload;
+    },
+    setEditReport: (state, action) => {
+      state.editReport = action.payload
     }
   }
 });
 
-export const { dateSelected, setReportDate, setRequestDate, setSendRequest } =
+export const { dateSelected, setReportDate, setRequestDate, setSendRequest, setEditReport } =
   reportSlice.actions;
 
 export const selectDate = (state) => state.report.dateSelected;
@@ -37,4 +41,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;