From 992afead808a75eee9fad68f1013910b9c2c9d69 Mon Sep 17 00:00:00 2001 From: Mikola Date: Tue, 13 Feb 2024 15:32:32 +0300 Subject: [PATCH 1/5] loaders, outSelectClose, notifications --- .../Tracker/TrackerModal/TrackerModal.jsx | 13 ++++++++-- src/components/Notification/notification.scss | 2 +- .../PartnerAddRequest/PartnerAddRequest.js | 26 +++++++++++++++++++ 3 files changed, 38 insertions(+), 3 deletions(-) diff --git a/src/components/Modal/Tracker/TrackerModal/TrackerModal.jsx b/src/components/Modal/Tracker/TrackerModal/TrackerModal.jsx index 8da9f485..5e23fdca 100644 --- a/src/components/Modal/Tracker/TrackerModal/TrackerModal.jsx +++ b/src/components/Modal/Tracker/TrackerModal/TrackerModal.jsx @@ -40,6 +40,7 @@ import crossWhite from "assets/icons/crossWhite.svg"; import avatarMok from "assets/images/avatarMok.png"; import "./trackerModal.scss"; +import { Loader } from "@components/Common/Loader/Loader"; registerLocale("ru", ru); @@ -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)); @@ -702,9 +709,11 @@ export const TrackerModal = ({ - + {loader ? : + Создать - + + } )} diff --git a/src/components/Notification/notification.scss b/src/components/Notification/notification.scss index 7bf0b0fd..9cdba5ce 100644 --- a/src/components/Notification/notification.scss +++ b/src/components/Notification/notification.scss @@ -5,7 +5,7 @@ position: fixed; bottom: 25px; right: 25px; - z-index: 20; + z-index: 10000; &__info { display: flex; diff --git a/src/pages/PartnerAddRequest/PartnerAddRequest.js b/src/pages/PartnerAddRequest/PartnerAddRequest.js index d56f0f94..6b34fc99 100644 --- a/src/pages/PartnerAddRequest/PartnerAddRequest.js +++ b/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 (
From 3a7929689dd4416fe680f400fc039ef153e17d96 Mon Sep 17 00:00:00 2001 From: Mikola Date: Tue, 13 Feb 2024 15:32:48 +0300 Subject: [PATCH 2/5] loaders, outSelectClose, notifications --- .../Tracker/TrackerModal/TrackerModal.jsx | 20 ++++++++++--------- .../PartnerAddRequest/PartnerAddRequest.js | 12 +++++------ 2 files changed, 17 insertions(+), 15 deletions(-) diff --git a/src/components/Modal/Tracker/TrackerModal/TrackerModal.jsx b/src/components/Modal/Tracker/TrackerModal/TrackerModal.jsx index 5e23fdca..f8063ff3 100644 --- a/src/components/Modal/Tracker/TrackerModal/TrackerModal.jsx +++ b/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"; @@ -40,7 +41,6 @@ import crossWhite from "assets/icons/crossWhite.svg"; import avatarMok from "assets/images/avatarMok.png"; import "./trackerModal.scss"; -import { Loader } from "@components/Common/Loader/Loader"; registerLocale("ru", ru); @@ -91,7 +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 [loader, setLoader] = useState(false); const priority = [ { @@ -140,7 +140,7 @@ export const TrackerModal = ({ return; } - setLoader(true) + setLoader(true); apiRequest("/task/create-task", { method: "POST", @@ -162,7 +162,7 @@ export const TrackerModal = ({ text: "Задача с таким именем уже существует", type: "error" }); - setLoader(false) + setLoader(false); } else { for (let i = 0; i < taskTags.length; i++) { apiRequest("/mark/attach", { @@ -190,11 +190,11 @@ export const TrackerModal = ({ setDescriptionTicket(""); setSelectedExecutorTask("Выберите исполнителя"); setSelectedPriority(null); - setLoader(false) + setLoader(false); }); } else { setActive(false); - setLoader(false) + setLoader(false); setValueTicket(""); setDescriptionTicket(""); dispatch(setProjectBoardFetch(projectBoard.id)); @@ -709,11 +709,13 @@ export const TrackerModal = ({
- {loader ? : + {loader ? ( + + ) : ( - Создать + Создать - } + )} )} diff --git a/src/pages/PartnerAddRequest/PartnerAddRequest.js b/src/pages/PartnerAddRequest/PartnerAddRequest.js index 6b34fc99..bef0d353 100644 --- a/src/pages/PartnerAddRequest/PartnerAddRequest.js +++ b/src/pages/PartnerAddRequest/PartnerAddRequest.js @@ -155,15 +155,15 @@ export const PartnerAddRequest = () => { (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__dropDown") || + div.classList.contains("form__block__skills") || div.classList.contains("form__block__section__select")) ) ) { - setOpenSkillsSelect(false) - setOpenSpecializationListOpen(false) - setOpenLevelList(false) - setOpenCountList(false) + setOpenSkillsSelect(false); + setOpenSpecializationListOpen(false); + setOpenLevelList(false); + setOpenCountList(false); } }; From 183659459ab78675ad0c83895c548491454c34fd Mon Sep 17 00:00:00 2001 From: Mikola Date: Wed, 14 Feb 2024 14:54:45 +0300 Subject: [PATCH 3/5] loaders, outSelectClose, notifications --- src/components/Common/Loader/Loader.jsx | 2 +- src/components/Common/Loader/loader.scss | 1 - src/pages/Quiz/QuizPage.js | 10 ++++++++-- src/pages/Quiz/QuizReportPage.js | 25 ++++++++++++++++-------- 4 files changed, 26 insertions(+), 12 deletions(-) diff --git a/src/components/Common/Loader/Loader.jsx b/src/components/Common/Loader/Loader.jsx index d61acb83..7a956f32 100644 --- a/src/components/Common/Loader/Loader.jsx +++ b/src/components/Common/Loader/Loader.jsx @@ -8,7 +8,7 @@ export const Loader = ({ width = 50, height = 50, style }) => {
diff --git a/src/components/Common/Loader/loader.scss b/src/components/Common/Loader/loader.scss index 980447e7..610c1161 100644 --- a/src/components/Common/Loader/loader.scss +++ b/src/components/Common/Loader/loader.scss @@ -5,7 +5,6 @@ justify-content: center; align-items: center; position: relative; - //&:hover { // path { // fill: #6aaf5c; diff --git a/src/pages/Quiz/QuizPage.js b/src/pages/Quiz/QuizPage.js index 3778f4f8..a6cad3e5 100644 --- a/src/pages/Quiz/QuizPage.js +++ b/src/pages/Quiz/QuizPage.js @@ -25,9 +25,11 @@ import TestImg from "assets/images/partnerProfile/PersonalTesters.svg"; import BackEndImg from "assets/images/partnerProfile/personalBackEnd.svg"; import "./quiz-page.scss"; +import { Loader } from "@components/Common/Loader/Loader"; export const QuizPage = () => { 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,7 @@ export const QuizPage = () => {
{!selectedCategory ? "Тестирование" : "Замена специализации"}
- {!selectedCategory && ( + {loader ? : ( <> {/*
*/} {/* */} diff --git a/src/pages/Quiz/QuizReportPage.js b/src/pages/Quiz/QuizReportPage.js index 7a30b1e8..a1c2948f 100644 --- a/src/pages/Quiz/QuizReportPage.js +++ b/src/pages/Quiz/QuizReportPage.js @@ -13,6 +13,7 @@ import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader"; // import { HeadBottom } from "@components/features/Candidate-lk/HeadBottom"; import { AlertResult } from "@components/features/quiz/AlertResult"; import { QuizReport } from "@components/features/quiz/QuizReport"; +import { Loader } from "@components/Common/Loader/Loader"; export const QuizReportPage = () => { const test = useSelector(selectedTest); @@ -23,15 +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 (
@@ -46,13 +51,17 @@ export const QuizReportPage = () => { { name: "Отчет по тестированию", link: "/profile/quiz" } ]} /> -
- Отчет по тестированию позиции {testInfo.questionnaire_title} -
-
- -
- + {loader ? : + <> +
+ Отчет по тестированию позиции {testInfo.questionnaire_title} +
+
+ +
+ + + }
From 6ec0264bbf72b57f963612b1db55eaa81a86fe8a Mon Sep 17 00:00:00 2001 From: Mikola Date: Wed, 14 Feb 2024 14:55:25 +0300 Subject: [PATCH 4/5] loaders, outSelectClose, notifications --- src/pages/Quiz/QuizPage.js | 14 ++++++++------ src/pages/Quiz/QuizReportPage.js | 15 ++++++++------- 2 files changed, 16 insertions(+), 13 deletions(-) diff --git a/src/pages/Quiz/QuizPage.js b/src/pages/Quiz/QuizPage.js index a6cad3e5..83fe9e39 100644 --- a/src/pages/Quiz/QuizPage.js +++ b/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"; @@ -25,11 +26,10 @@ import TestImg from "assets/images/partnerProfile/PersonalTesters.svg"; import BackEndImg from "assets/images/partnerProfile/personalBackEnd.svg"; import "./quiz-page.scss"; -import { Loader } from "@components/Common/Loader/Loader"; export const QuizPage = () => { const [questionnaires, setQuestionnaires] = useState([]); - const [loader, setLoader] = useState(false) + const [loader, setLoader] = useState(false); const dispatch = useDispatch(); const [personalInfoItems] = useState([ { @@ -104,11 +104,11 @@ export const QuizPage = () => { const [selectedCategory, setSetSelectedCategory] = useState(false); useEffect(() => { - setLoader(true) + setLoader(true); apiRequest(`/user-questionnaire/questionnaires-list?user_id=${userId}`) .then((res) => { - setQuestionnaires(res) - setLoader(false) + setQuestionnaires(res); + setLoader(false); }) .catch((e) => console.log(e)); }, []); @@ -128,7 +128,9 @@ export const QuizPage = () => {
{!selectedCategory ? "Тестирование" : "Замена специализации"}
- {loader ? : ( + {loader ? ( + + ) : ( <> {/*
*/} {/* */} diff --git a/src/pages/Quiz/QuizReportPage.js b/src/pages/Quiz/QuizReportPage.js index a1c2948f..79c7a6c8 100644 --- a/src/pages/Quiz/QuizReportPage.js +++ b/src/pages/Quiz/QuizReportPage.js @@ -7,13 +7,13 @@ 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"; // import { HeadBottom } from "@components/features/Candidate-lk/HeadBottom"; import { AlertResult } from "@components/features/quiz/AlertResult"; import { QuizReport } from "@components/features/quiz/QuizReport"; -import { Loader } from "@components/Common/Loader/Loader"; export const QuizReportPage = () => { const test = useSelector(selectedTest); @@ -25,19 +25,18 @@ export const QuizReportPage = () => { } const [testInfo, setTestInfo] = useState({}); - const [loader, setLoader] = useState(false) + const [loader, setLoader] = useState(false); useEffect(() => { - setLoader(true) + setLoader(true); apiRequest( `/user-questionnaire/questionnaire-completed?user_questionnaire_uuid=${params.uuid}` ).then((res) => { setTestInfo(res); - setLoader(false) + setLoader(false); }); }, []); - return (
@@ -51,7 +50,9 @@ export const QuizReportPage = () => { { name: "Отчет по тестированию", link: "/profile/quiz" } ]} /> - {loader ? : + {loader ? ( + + ) : ( <>
Отчет по тестированию позиции {testInfo.questionnaire_title} @@ -61,7 +62,7 @@ export const QuizReportPage = () => {
- } + )}
From 47fccf9a9f1e370cb7a6e004295f05f2d6fe8d75 Mon Sep 17 00:00:00 2001 From: Mikola Date: Wed, 14 Feb 2024 15:00:07 +0300 Subject: [PATCH 5/5] loaders, outSelectClose, notifications --- .../ProfileCalendar/ProfileCalendarComponent.jsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/ProfileCalendar/ProfileCalendarComponent.jsx b/src/components/ProfileCalendar/ProfileCalendarComponent.jsx index 6899f2c8..a1a0a580 100644 --- a/src/components/ProfileCalendar/ProfileCalendarComponent.jsx +++ b/src/components/ProfileCalendar/ProfileCalendarComponent.jsx @@ -286,15 +286,15 @@ export const ProfileCalendarComponent = React.memo( ? `${getCorrectDate(startDate)} - ${getCorrectDate(endDate)}` : `${getCorrectDate(endDate)} - ${getCorrectDate(startDate)}` : activePeriod - ? "Выберите диапазон на календаре" - : "Выбрать диапазон"} + ? "Выберите диапазон на календаре" + : "Выбрать диапазон"} {totalRangeHours ? `${totalRangeHours} ${hourOfNum(totalRangeHours)}` : endDate - ? "0 часов" - : ""} + ? "0 часов" + : ""} {endDate && (