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

Reviewed-on: #18

src/components/Common/Loader/Loader.jsx

@@ -8,7 +8,7 @@ export const Loader = ({ width = 50, height = 50, style }) => {
     <div className="loader">
       <SVGLoader
         type="Circles"
-        color={style ? style : `#fff`}
+        color={style ? style : `green`}
         height={height}
         width={width}
       />

src/components/Common/Loader/loader.scss

@@ -5,7 +5,6 @@
   justify-content: center;
   align-items: center;
   position: relative;
-
   //&:hover {
   //  path {
   //    fill: #6aaf5c;

src/components/Modal/Tracker/TrackerModal/TrackerModal.jsx

@@ -30,6 +30,7 @@ import { useNotification } from "@hooks/useNotification";
 
 import { getCorrectDate } from "@components/Calendar/calendarHelper";
 import BaseButton from "@components/Common/BaseButton/BaseButton";
+import { Loader } from "@components/Common/Loader/Loader";
 import ModalLayout from "@components/Common/ModalLayout/ModalLayout";
 
 import arrowRight from "assets/icons/arrows/arrowRightCreateTask.svg";
@@ -90,6 +91,7 @@ export const TrackerModal = ({
   const [deadLineDate, setDeadLineDate] = useState("");
   const [datePickerOpen, setDatePickerOpen] = useState(false);
   const [startDate, setStartDate] = useState(new Date());
+  const [loader, setLoader] = useState(false);
 
   const priority = [
     {
@@ -138,6 +140,8 @@ export const TrackerModal = ({
       return;
     }
 
+    setLoader(true);
+
     apiRequest("/task/create-task", {
       method: "POST",
       data: {
@@ -158,6 +162,7 @@ export const TrackerModal = ({
           text: "Задача с таким именем уже существует",
           type: "error"
         });
+        setLoader(false);
       } else {
         for (let i = 0; i < taskTags.length; i++) {
           apiRequest("/mark/attach", {
@@ -185,9 +190,11 @@ export const TrackerModal = ({
             setDescriptionTicket("");
             setSelectedExecutorTask("Выберите исполнителя");
             setSelectedPriority(null);
+            setLoader(false);
           });
         } else {
           setActive(false);
+          setLoader(false);
           setValueTicket("");
           setDescriptionTicket("");
           dispatch(setProjectBoardFetch(projectBoard.id));
@@ -703,9 +710,13 @@ export const TrackerModal = ({
                 </div>
               </div>
             </div>
-            <BaseButton styles={"button-add"} onClick={createTicket}>
+            {loader ? (
-              Создать
+              <Loader style={"green"} />
-            </BaseButton>
+            ) : (
+              <BaseButton styles={"button-add"} onClick={createTicket}>
+                Создать
+              </BaseButton>
+            )}
           </div>
         </>
       )}

src/components/Notification/notification.scss

@@ -5,7 +5,7 @@
   position: fixed;
   bottom: 25px;
   right: 25px;
-  z-index: 20;
+  z-index: 10000;
 
   &__info {
     display: flex;

src/components/ProfileCalendar/ProfileCalendarComponent.jsx

@@ -286,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

src/pages/PartnerAddRequest/PartnerAddRequest.js

@@ -56,6 +56,7 @@ export const PartnerAddRequest = () => {
   }
 
   useEffect(() => {
+    initListeners();
     apiRequest(`/profile/positions-list`).then((el) =>
       setSpecializationList(el)
     );
@@ -141,6 +142,31 @@ export const PartnerAddRequest = () => {
     }
   };
 
+  const initListeners = () => {
+    document.addEventListener("click", closeByClickingOut);
+  };
+
+  const closeByClickingOut = (event) => {
+    const path = event.path || (event.composedPath && event.composedPath());
+
+    if (
+      event &&
+      !path.find(
+        (div) =>
+          div.classList &&
+          (div.classList.contains("form__block__section__selects") ||
+            div.classList.contains("form__block__dropDown") ||
+            div.classList.contains("form__block__skills") ||
+            div.classList.contains("form__block__section__select"))
+      )
+    ) {
+      setOpenSkillsSelect(false);
+      setOpenSpecializationListOpen(false);
+      setOpenLevelList(false);
+      setOpenCountList(false);
+    }
+  };
+
   return (
     <div className="partner-add-request">
       <ProfileHeader />

src/pages/Quiz/QuizPage.js

@@ -7,6 +7,7 @@ import { apiRequest } from "@api/request";
 
 import CategoriesItem from "@components/CategoriesItem/CategoriesItem";
 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 { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
@@ -27,7 +28,8 @@ import BackEndImg from "assets/images/partnerProfile/personalBackEnd.svg";
 import "./quiz-page.scss";
 
 export const QuizPage = () => {
-  const [questionnaires, setQuestionnaires] = useState(null);
+  const [questionnaires, setQuestionnaires] = useState([]);
+  const [loader, setLoader] = useState(false);
   const dispatch = useDispatch();
   const [personalInfoItems] = useState([
     {
@@ -102,8 +104,12 @@ export const QuizPage = () => {
   const [selectedCategory, setSetSelectedCategory] = useState(false);
 
   useEffect(() => {
+    setLoader(true);
     apiRequest(`/user-questionnaire/questionnaires-list?user_id=${userId}`)
-      .then((res) => setQuestionnaires(res))
+      .then((res) => {
+        setQuestionnaires(res);
+        setLoader(false);
+      })
       .catch((e) => console.log(e));
   }, []);
 
@@ -122,7 +128,9 @@ export const QuizPage = () => {
         <div className="quiz-page__title main-title">
           {!selectedCategory ? "Тестирование" : "Замена специализации"}
         </div>
-        {!selectedCategory && (
+        {loader ? (
+          <Loader />
+        ) : (
           <>
             {/*<div className="quiz-page__specialization">*/}
             {/*  <SelectedCategory setSelectedCategory={setSetSelectedCategory} />*/}

src/pages/Quiz/QuizReportPage.js

@@ -7,6 +7,7 @@ import { selectedTest } from "@redux/quizSlice";
 import { apiRequest } from "@api/request";
 
 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 { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
@@ -23,16 +24,19 @@ export const QuizReportPage = () => {
     navigate("/Quiz");
   }
 
+  const [testInfo, setTestInfo] = useState({});
+  const [loader, setLoader] = useState(false);
+
   useEffect(() => {
+    setLoader(true);
     apiRequest(
       `/user-questionnaire/questionnaire-completed?user_questionnaire_uuid=${params.uuid}`
     ).then((res) => {
       setTestInfo(res);
+      setLoader(false);
     });
   }, []);
 
-  const [testInfo, setTestInfo] = useState({});
-
   return (
     <div className="quiz-report-page">
       <ProfileHeader />
@@ -46,13 +50,19 @@ export const QuizReportPage = () => {
             { name: "Отчет по тестированию", link: "/profile/quiz" }
           ]}
         />
-        <div className="quiz-report-page__title main-title">
+        {loader ? (
-          Отчет по тестированию позиции {testInfo.questionnaire_title}
+          <Loader />
-        </div>
+        ) : (
-        <div className="quiz-report-page__report-quiz">
+          <>
-          <QuizReport info={testInfo} />
+            <div className="quiz-report-page__title main-title">
-        </div>
+              Отчет по тестированию позиции {testInfo.questionnaire_title}
-        <AlertResult info={testInfo} />
+            </div>
+            <div className="quiz-report-page__report-quiz">
+              <QuizReport info={testInfo} />
+            </div>
+            <AlertResult info={testInfo} />
+          </>
+        )}
       </div>
       <Footer />
     </div>