From 369b77c1aad0e3216f2eecaa30195e3760a8bd41 Mon Sep 17 00:00:00 2001 From: MaxOvs19 Date: Tue, 19 Dec 2023 20:42:46 +0300 Subject: [PATCH] Added new modal in tracker --- .../Tracker/ListEmployees/ListEmployees.jsx | 97 +++++++ .../Tracker/ListEmployees/listEmployees.scss | 254 ++++++++++++++++++ src/pages/ProjectTracker/ProjectTracker.js | 89 +----- src/pages/Tracker/tracker.scss | 251 ----------------- 4 files changed, 360 insertions(+), 331 deletions(-) create mode 100644 src/components/Modal/Tracker/ListEmployees/ListEmployees.jsx create mode 100644 src/components/Modal/Tracker/ListEmployees/listEmployees.scss diff --git a/src/components/Modal/Tracker/ListEmployees/ListEmployees.jsx b/src/components/Modal/Tracker/ListEmployees/ListEmployees.jsx new file mode 100644 index 00000000..005caae4 --- /dev/null +++ b/src/components/Modal/Tracker/ListEmployees/ListEmployees.jsx @@ -0,0 +1,97 @@ +import React from "react"; +import { useDispatch } from "react-redux"; + +import { + deletePersonOnProject, + modalToggle +} from "@redux/projectsTrackerSlice"; + +import { caseOfNum, urlForLocal } from "@utils/helper"; + +import { apiRequest } from "@api/request"; + +import ModalLayout from "@components/Common/ModalLayout/ModalLayout"; + +import close from "assets/icons/close.png"; +import avatarMok from "assets/images/avatarMok.png"; + +import "./listEmployees.scss"; + +const ListEmployees = ({ + active, + setActiveListEmpl, + projectBoard, + setModalAdd +}) => { + const dispatch = useDispatch(); + + function deletePerson(userId) { + apiRequest("/project/del-user", { + method: "DELETE", + data: { + project_id: projectBoard.id, + user_id: userId + } + }).then(() => { + dispatch(deletePersonOnProject(userId)); + }); + } + + return ( + +
+ close setActiveListEmpl(false)} + /> +
+ {projectBoard.projectUsers?.length} + {caseOfNum(projectBoard.projectUsers?.length, "persons")} +
+
+ В проекте - +

“{projectBoard.name}”

+
+
+ {projectBoard.projectUsers?.map((person) => { + return ( +
+ avatar + {person.user.fio} + delete deletePerson(person.user_id)} + /> +
+ ); + })} +
+
{ + dispatch(modalToggle("addWorker")); + setModalAdd(true); + setActiveListEmpl(false); + }} + > + + +

Добавить участников

+
+
+ + ); +}; + +export default ListEmployees; diff --git a/src/components/Modal/Tracker/ListEmployees/listEmployees.scss b/src/components/Modal/Tracker/ListEmployees/listEmployees.scss new file mode 100644 index 00000000..89a15450 --- /dev/null +++ b/src/components/Modal/Tracker/ListEmployees/listEmployees.scss @@ -0,0 +1,254 @@ +.tasks { + &__head { + &__persons { + position: relative; + display: flex; + align-items: center; + + @media (max-width: 700px) { + right: -15px; + } + + @media (max-width: 465px) { + width: 100%; + } + + .projectPersons { + display: flex; + position: relative; + left: 5px; + + img { + position: relative; + display: flex; + width: 32px; + height: 32px; + } + + img:nth-child(1) { + left: -5px; + } + + img:nth-child(2) { + left: -10px; + } + img:nth-child(3) { + left: -15px; + } + } + + .onePerson { + display: flex; + position: relative; + left: -15px; + + img { + position: relative; + display: flex; + width: 32px; + height: 32px; + } + } + + span { + width: 32px; + height: 32px; + font-weight: 500; + font-size: 12px; + line-height: 16px; + border-radius: 50px; + align-items: center; + justify-content: center; + position: relative; + display: flex; + } + + .countPersons { + color: #252c32; + border: 1px solid #dde2e4; + background: white; + left: -20px; + } + + .addPerson { + background: #00c5a8; + color: white; + font-size: 14px; + transition: all 0.15s ease; + left: -28px; + z-index: 2; + cursor: pointer; + + &:hover { + background: #10d5bb; + } + } + + p { + position: relative; + left: -25px; + font-weight: 300; + font-size: 14px; + line-height: 17px; + max-width: 125px; + } + + .persons__list { + position: absolute; + z-index: 8; + display: flex; + flex-direction: column; + background: linear-gradient(180deg, #ffffff 0%, #ebebeb 100%); + border-radius: 20px; + padding: 30px; + cursor: default; + width: 800px; + + &__close { + cursor: pointer; + position: absolute; + right: 25px; + top: 25px; + margin-left: auto; + width: 35px; + height: 35px; + } + + &__count { + display: flex; + align-items: end; + color: #1458dd; + font-size: 22px; + span { + font-size: 44px; + font-weight: 700; + line-height: 40px; + width: auto; + height: auto; + margin-right: 5px; + } + } + + &__info { + display: flex; + margin: 11px 0 35px; + align-items: center; + + span { + display: flex; + width: auto; + font-size: 18px; + line-height: 22px; + color: #263238; + font-weight: 500; + white-space: nowrap; + } + + p { + color: #1458dd; + font-weight: 600; + font-size: 18px; + line-height: 22px; + display: flex; + max-width: 250px; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + margin-left: 30px; + } + } + + &__items { + display: flex; + flex-wrap: wrap; + row-gap: 32px; + column-gap: 85px; + margin-bottom: 38px; + } + + &__item { + display: flex; + justify-content: space-between; + align-items: center; + max-width: 300px; + width: 100%; + + .avatar { + width: 38px; + height: 38px; + margin-right: 12px; + } + + span { + display: block; + font-weight: 400; + font-size: 15px; + line-height: initial; + color: #807777; + width: auto; + height: auto; + max-width: 215px; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } + + .delete { + cursor: pointer; + width: 20px; + height: 20px; + } + } + + &__add { + display: flex; + margin-left: 3px; + cursor: pointer; + + span { + background: #8bcc60; + left: 0; + } + + p { + margin-left: 17px; + color: #000000; + font-weight: 400; + font-size: 16px; + line-height: 32px; + position: initial; + max-width: none; + } + } + + @media (max-width: 1000px) { + width: 390px; + padding: 30px; + + .persons__list__info { + margin: 10px; + } + + .persons__list__items { + flex-direction: column; + margin-bottom: 20px; + row-gap: 15px; + + .persons__list__item { + max-width: none; + span { + max-width: none; + width: 100%; + } + } + } + } + + @media (max-width: 440px) { + width: 290px; + padding: 15px 20px; + } + } + } + } +} diff --git a/src/pages/ProjectTracker/ProjectTracker.js b/src/pages/ProjectTracker/ProjectTracker.js index e942d4fd..f73dfedb 100644 --- a/src/pages/ProjectTracker/ProjectTracker.js +++ b/src/pages/ProjectTracker/ProjectTracker.js @@ -6,7 +6,6 @@ import { Link, useParams } from "react-router-dom"; import { activeLoader, addNewTagToProject, - deletePersonOnProject, deleteTagProject, filterCreatedByMe, filteredExecutorTasks, @@ -34,6 +33,7 @@ import BaseButton from "@components/Common/BaseButton/BaseButton"; import { Footer } from "@components/Common/Footer/Footer"; import { Loader } from "@components/Common/Loader/Loader"; import AcceptModal from "@components/Modal/AcceptModal/AcceptModal"; +import ListEmployees from "@components/Modal/Tracker/ListEmployees/ListEmployees"; import ModalTicket from "@components/Modal/Tracker/ModalTicket/ModalTicket"; import TrackerModal from "@components/Modal/Tracker/TrackerModal/TrackerModal"; import { Navigation } from "@components/Navigation/Navigation"; @@ -261,18 +261,6 @@ export const ProjectTracker = () => { }); } - function deletePerson(userId) { - apiRequest("/project/del-user", { - method: "DELETE", - data: { - project_id: projectBoard.id, - user_id: userId - } - }).then(() => { - dispatch(deletePersonOnProject(userId)); - }); - } - function filterParticipateTasks() { if (!checkBoxParticipateTasks) { dispatch(filteredParticipateTasks(Number(localStorage.getItem("id")))); @@ -513,14 +501,7 @@ export const ProjectTracker = () => { > + - {/* { - dispatch(modalToggle("createColumn")); - setModalAdd(true); - }} - > - + - */} +

добавить колонку

{ +

добавить участника

- {personListOpen && ( -
- close setPersonListOpen(false)} - /> -
- {projectBoard.projectUsers?.length} - {caseOfNum( - projectBoard.projectUsers?.length, - "persons" - )} -
-
- В проекте - -

“{projectBoard.name}”

-
-
- {projectBoard.projectUsers?.map((person) => { - return ( -
- avatar - {person.user.fio} - delete deletePerson(person.user_id)} - /> -
- ); - })} -
-
{ - dispatch(modalToggle("addWorker")); - setModalAdd(true); - setPersonListOpen(false); - }} - > - + -

Добавить участников

-
-
- )} + +