From 5fa069d84d32f25ceb5afd0b2f0075c0207ed4ee Mon Sep 17 00:00:00 2001 From: M1kola Date: Wed, 30 Aug 2023 17:02:32 +0300 Subject: [PATCH] tracker tasks --- src/components/AuthBox/authBox.scss | 23 ++- .../Modal/Tracker/ModalTicket/ModalTicket.jsx | 5 + .../Tracker/ModalTicket/modalTicket.scss | 23 +-- .../TicketFullScreen/TicketFullScreen.jsx | 11 +- src/components/SideBar/sidebar.scss | 1 - .../SliderWorkers/sliderWorkers.scss | 9 + .../AuthForDevelopers/authForDevelopers.scss | 16 ++ .../AuthForPartners/authForPartners.scss | 18 +- src/pages/CompanyInfo/companyInfo.scss | 92 ++++++++++ src/pages/ProjectTracker/ProjectTracker.js | 166 +++++++++--------- src/pages/Tracker/Tracker.js | 13 +- src/pages/Tracker/tracker.scss | 40 +++-- src/utils/helper.js | 35 ++-- 13 files changed, 307 insertions(+), 145 deletions(-) diff --git a/src/components/AuthBox/authBox.scss b/src/components/AuthBox/authBox.scss index 73c2f1d3..4e950806 100644 --- a/src/components/AuthBox/authBox.scss +++ b/src/components/AuthBox/authBox.scss @@ -4,6 +4,10 @@ align-self: center; margin-bottom: 194px; + @media (max-width: 1200px) { + margin-bottom: 100px; + } + &__header { font-family: "GT Eesti Pro Display"; font-size: 5.3em; @@ -19,6 +23,15 @@ letter-spacing: 0.56px; line-height: normal; } + + @media (max-width: 1024px) { + margin-top: 25px; + } + + @media (max-width: 450px) { + font-size: 4em; + text-align: center; + } } &__sign-in { @@ -63,6 +76,14 @@ width: 6px; height: 6px; margin-left: 120px; + + @media (max-width: 700px) { + margin-left: 0; + } + } + + @media (max-width: 1024px) { + margin-bottom: 25px; } } @@ -175,7 +196,6 @@ margin-bottom: 0px; &__header { - margin-top: 120px; line-height: 20px; } @@ -196,6 +216,7 @@ height: 45px; border-radius: 22.5px; padding-left: 22px; + max-width: none; } &-btn { diff --git a/src/components/Modal/Tracker/ModalTicket/ModalTicket.jsx b/src/components/Modal/Tracker/ModalTicket/ModalTicket.jsx index 09965951..5547e1cc 100644 --- a/src/components/Modal/Tracker/ModalTicket/ModalTicket.jsx +++ b/src/components/Modal/Tracker/ModalTicket/ModalTicket.jsx @@ -120,6 +120,11 @@ export const ModalTiсket = ({ }, }).then((res) => { dispatch(setProjectBoardFetch(projectId)); + showNotification({ + show: true, + text: "Изменения сохранены", + type: "success", + }); }); } diff --git a/src/components/Modal/Tracker/ModalTicket/modalTicket.scss b/src/components/Modal/Tracker/ModalTicket/modalTicket.scss index cabdc30f..3d1397d4 100644 --- a/src/components/Modal/Tracker/ModalTicket/modalTicket.scss +++ b/src/components/Modal/Tracker/ModalTicket/modalTicket.scss @@ -20,6 +20,7 @@ border-radius: 8px; display: flex; flex-direction: row; + max-height: 750px; .content { position: relative; @@ -116,45 +117,35 @@ } .taskName { + display: -webkit-box; max-width: 550px; overflow: hidden; - white-space: nowrap; text-overflow: ellipsis; - -webkit-line-clamp: 5; + -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .taskDescription { + display: -webkit-box; max-width: 550px; overflow: hidden; - white-space: nowrap; text-overflow: ellipsis; - -webkit-line-clamp: 5; + -webkit-line-clamp: 4; -webkit-box-orient: vertical; } .fullName { max-width: 800px; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - -webkit-line-clamp: 5; - -webkit-box-orient: vertical; } .fullDescription { max-width: 800px; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - -webkit-line-clamp: 5; - -webkit-box-orient: vertical; } .comments__list { display: flex; flex-direction: column; - max-height: 300px; + max-height: 215px; overflow: auto; &::-webkit-scrollbar { @@ -357,7 +348,7 @@ column-gap: 25px; row-gap: 20px; margin-top: 33px; - max-height: 350px; + max-height: 170px; overflow-y: auto; &::-webkit-scrollbar { diff --git a/src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx b/src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx index 5d0aa341..4ef24ca6 100644 --- a/src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx +++ b/src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx @@ -21,6 +21,8 @@ import { urlForLocal, } from "@utils/helper"; +import { useNotification } from "@hooks/useNotification"; + import { apiRequest } from "@api/request"; import { getCorrectDate } from "@components/Calendar/calendarHelper"; @@ -84,6 +86,7 @@ export const TicketFullScreen = () => { const [uploadedFile, setUploadedFile] = useState(null); const [taskFiles, setTaskFiles] = useState([]); const [acceptModalOpen, setAcceptModalOpen] = useState(false); + const { showNotification } = useNotification(); useEffect(() => { apiRequest(`/task/get-task?task_id=${ticketId.id}`).then((taskInfo) => { @@ -175,7 +178,13 @@ export const TicketFullScreen = () => { title: inputsValue.title, description: inputsValue.description, }, - }).then(() => {}); + }).then(() => { + showNotification({ + show: true, + text: "Изменения сохранены", + type: "success", + }); + }); } function createComment() { diff --git a/src/components/SideBar/sidebar.scss b/src/components/SideBar/sidebar.scss index 8a0d6705..6af9b83e 100644 --- a/src/components/SideBar/sidebar.scss +++ b/src/components/SideBar/sidebar.scss @@ -11,7 +11,6 @@ position: fixed; width: 100% !important; height: 80px; - margin-bottom: 50px; } @media (max-width: 1440px) { diff --git a/src/components/SliderWorkers/sliderWorkers.scss b/src/components/SliderWorkers/sliderWorkers.scss index 5bc7f9a6..9b538b3d 100644 --- a/src/components/SliderWorkers/sliderWorkers.scss +++ b/src/components/SliderWorkers/sliderWorkers.scss @@ -32,6 +32,15 @@ line-height: 22px; color: #000000; } + + @media (max-width: 1024px) { + text-align: center; + margin-top: 20px; + + p { + margin-top: 15px; + } + } } .slick-list { diff --git a/src/pages/AuthForDevelopers/authForDevelopers.scss b/src/pages/AuthForDevelopers/authForDevelopers.scss index 06607e33..b81b2e1d 100644 --- a/src/pages/AuthForDevelopers/authForDevelopers.scss +++ b/src/pages/AuthForDevelopers/authForDevelopers.scss @@ -21,11 +21,23 @@ &__vector-black { top: 460px; right: -224px; + + @media (max-width: 1200px) { + top: 370px; + } + + @media (max-width: 1024px) { + top: 180px; + } } &__arrow { margin-top: 360px; z-index: 99; + + @media (max-width: 1200px) { + display: none; + } } @media (max-width: 575.98px) { @@ -42,6 +54,10 @@ padding-top: 30px; position: relative; padding-bottom: 310px; + + @media (max-width: 1200px) { + display: none; + } } &__info-box { diff --git a/src/pages/AuthForPartners/authForPartners.scss b/src/pages/AuthForPartners/authForPartners.scss index 13c9e23e..17216e58 100644 --- a/src/pages/AuthForPartners/authForPartners.scss +++ b/src/pages/AuthForPartners/authForPartners.scss @@ -21,11 +21,23 @@ &__vector-black { top: 460px; right: -224px; + + @media (max-width: 1200px) { + top: 370px; + } + + @media (max-width: 1024px) { + top: 180px; + } } &__arrow { margin-top: 360px; cursor: pointer; + + @media (max-width: 1200px) { + display: none; + } } @media (max-width: 575.98px) { @@ -43,6 +55,10 @@ padding-top: 30px; position: relative; padding-bottom: 310px; + + @media (max-width: 1200px) { + display: none; + } } @media (max-width: 575.98px) { @@ -305,7 +321,7 @@ transform: rotate(90deg); } - @media (max-width: 660px) { + @media (max-width: 1024px) { margin: 15px 0; } } diff --git a/src/pages/CompanyInfo/companyInfo.scss b/src/pages/CompanyInfo/companyInfo.scss index fbac5743..f5992751 100644 --- a/src/pages/CompanyInfo/companyInfo.scss +++ b/src/pages/CompanyInfo/companyInfo.scss @@ -3,6 +3,10 @@ font-family: "LabGrotesque", sans-serif; background-color: #F1F1F1; padding-top: 60px; + + @media (max-width: 1375px) { + padding-top: 120px; + } } &__title { @@ -17,6 +21,10 @@ color: #52B709; font-weight: 700; } + + @media (max-width: 500px) { + font-size: 35px; + } } &__subTitle { @@ -25,6 +33,10 @@ text-align: center; font-size: 22px; line-height: 32px; + + @media (max-width: 500px) { + font-size: 18px; + } } .arrowElement { @@ -35,6 +47,10 @@ display: flex; justify-content: center; align-items: center; + + @media (max-width: 850px) { + display: none; + } } .arrowDown { @@ -42,6 +58,10 @@ img { transform: rotate(90deg); } + + @media (max-width: 500px) { + margin: 15px auto; + } } &__info { @@ -68,6 +88,19 @@ ul { padding-left: 18px; } + + @media (max-width: 700px) { + width: 100%; + } + + @media (max-width: 600px) { + padding: 15px; + } + } + + @media (max-width: 700px) { + flex-direction: column; + row-gap: 10px; } } @@ -78,6 +111,12 @@ margin: 20px auto 70px; max-width: 1000px; + @media (max-width: 700px) { + margin: 10px auto 30px; + text-align: center; + row-gap: 5px; + } + span { color: #52B709; font-weight: 700; @@ -94,8 +133,16 @@ font-size: 18px; line-height: 22px; row-gap: 20px; + + @media (max-width: 700px) { + row-gap: 8px; + } } } + + @media (max-width: 500px) { + padding-top: 30px; + } } &__countingBlock { @@ -108,10 +155,34 @@ row-gap: 16px; position: relative; + @media (max-width: 1125px) { + padding-right: 45px; + } + + @media (max-width: 850px) { + padding: 20px 25px; + } + + @media (max-width: 780px) { + row-gap: 5px; + padding: 15px; + } + &__head { display: flex; justify-content: space-between; align-items: center; + + @media (max-width: 850px) { + justify-content: space-evenly; + } + + @media (max-width: 750px) { + text-align: center; + img { + display: none; + } + } } &__bottom { @@ -135,12 +206,21 @@ span { color: #52B709; } + + @media (max-width: 780px) { + text-align: center; + row-gap: 5px; + } } .countingBlock__info { display: flex; flex-direction: column; row-gap: 12px; + + @media (max-width: 850px) { + row-gap: 5px; + } } .countingBlock { @@ -162,6 +242,18 @@ position: absolute; right: -140px; top: -55px; + + @media (max-width: 1440px) { + right: -25px; + } + + @media (max-width: 1210px) { + right: 25px; + } + + @media (max-width: 1125px) { + display: none; + } } } } diff --git a/src/pages/ProjectTracker/ProjectTracker.js b/src/pages/ProjectTracker/ProjectTracker.js index 32a73399..95c84f84 100644 --- a/src/pages/ProjectTracker/ProjectTracker.js +++ b/src/pages/ProjectTracker/ProjectTracker.js @@ -621,96 +621,98 @@ export const ProjectTracker = () => { )} - {column.tasks.map((task) => { - return ( -
- dragStartHandler(e, task, column.id) - } - onDragOver={(e) => dragOverTaskHandler(e, task)} - onDragLeave={(e) => dragLeaveTaskHandler(e)} - onDragEnd={() => dragEndTaskHandler()} - onDrop={(e) => - dragDropTaskHandler(e, task, column) - } - onClick={(e) => openTicket(e, task)} - > +
+ {column.tasks.map((task) => { + return (
{ - if (window.innerWidth < 985) { - window.location.replace( - `/tracker/task/${task.id}` - ); - } - }} + key={task.id} + className={`tasks__board__item ${ + taskHover[task.id] ? "task__hover" : "" + }`} + draggable={true} + onDragStart={(e) => + dragStartHandler(e, task, column.id) + } + onDragOver={(e) => dragOverTaskHandler(e, task)} + onDragLeave={(e) => dragLeaveTaskHandler(e)} + onDragEnd={() => dragEndTaskHandler()} + onDrop={(e) => + dragDropTaskHandler(e, task, column) + } + onClick={(e) => openTicket(e, task)} > -

- {task.title} -

-
-

-
- - {task.executor?.fio - ? task.executor?.fio - : "Исполнитель не назначен"} - - {task.executor?.avatar && ( - { + if (window.innerWidth < 985) { + window.location.replace( + `/tracker/task/${task.id}` + ); } - alt="avatar" - /> - )} -
-
-

Срок исполнения:

- - {task.dead_line - ? getCorrectDate(task.dead_line) - : "Не выбран"} - -
-
-
- commentsImg - - {task.comment_count}{" "} - {caseOfNum(task.comment_count, "comments")} - + }} + > +

+ {task.title} +

-
- filesImg +

+
- {task.files ? task.files : 0}{" "} - {caseOfNum(0, "files")} + {task.executor?.fio + ? task.executor?.fio + : "Исполнитель не назначен"} + {task.executor?.avatar && ( + avatar + )}
+ {task.dead_line && +
+

Срок исполнения:

+ + {getCorrectDate(task.dead_line)} + +
+ } +
+
+ commentsImg + + {task.comment_count}{" "} + {caseOfNum(task.comment_count, "comments")} + +
+
+ filesImg + + {task.files ? task.files : 0}{" "} + {caseOfNum(0, "files")} + +
+
+ item.id !== column.id + )} + currentColumn={column} + task={task} + />
- item.id !== column.id - )} - currentColumn={column} - task={task} - /> -
- ); - })} + ); + })} +
); })} diff --git a/src/pages/Tracker/Tracker.js b/src/pages/Tracker/Tracker.js index 2ca8e8be..9f43ab15 100644 --- a/src/pages/Tracker/Tracker.js +++ b/src/pages/Tracker/Tracker.js @@ -9,7 +9,7 @@ import { setToggleTab, } from "@redux/projectsTrackerSlice"; -import { urlForLocal } from "@utils/helper"; +import {caseOfNum, urlForLocal} from "@utils/helper"; import { apiRequest } from "@api/request"; @@ -295,7 +295,11 @@ export const Tracker = () => {

Архив задач:

-

{filterCompleteTasks.length} задач(а)

+

+ { + `${filterCompleteTasks.length} + ${caseOfNum(filterCompleteTasks.length, "tasks")}` + }

search {

Архив проектов:

- {projects.filter((project) => project.status === 10).length}{" "} - проект(ов) + { + `${projects.filter((project) => project.status === 10).length} + ${caseOfNum(projects.filter((project) => project.status === 10).length, "projects")}`}

diff --git a/src/pages/Tracker/tracker.scss b/src/pages/Tracker/tracker.scss index 6a5b48b9..5a8e1896 100644 --- a/src/pages/Tracker/tracker.scss +++ b/src/pages/Tracker/tracker.scss @@ -801,16 +801,17 @@ 0px 0px 0px 1px rgba(60, 66, 87, 0.08), 0px 1px 1px rgba(0, 0, 0, 0.06); border-radius: 8px; - padding: 16px 14px 16px 8px; - min-width: 353px; - max-width: 353px; + padding: 12px 10px 12px 8px; + min-width: 365px; + max-width: 380px; display: flex; flex-direction: column; - row-gap: 16px; + row-gap: 10px; height: fit-content; position: relative; transition: all 0.3s ease; transform: scaleY(-1); + min-height: 815px; @media (max-width: 900px) { min-width: auto; @@ -819,19 +820,28 @@ transform: scaleX(1); } - &::-webkit-scrollbar { - width: 3px; - border-radius: 10px; - } + .tasksContainer { + display: flex; + flex-direction: column; + row-gap: 16px; + max-height: 750px; + overflow: auto; + padding: 8px; - &::-webkit-scrollbar-thumb { - background: #cbd9f9; - border-radius: 20px; - } + &::-webkit-scrollbar { + width: 3px; + border-radius: 10px; + } - &::-webkit-scrollbar-track { - background: #c5c0c6; - border-radius: 20px; + &::-webkit-scrollbar-thumb { + background: #cbd9f9; + border-radius: 20px; + } + + &::-webkit-scrollbar-track { + background: #c5c0c6; + border-radius: 20px; + } } &__hover { diff --git a/src/utils/helper.js b/src/utils/helper.js index eccfa1a7..15ad0602 100644 --- a/src/utils/helper.js +++ b/src/utils/helper.js @@ -65,30 +65,17 @@ export function getCorrectRequestDate(date) { } export function caseOfNum(number, type) { - const comments = ["коментарий", "комментария", " коментариев"]; - const files = ["файл", "файла", "файлов"]; - const persons = ["участник", "участника", "участников"]; + const allTypes = { + comments: ["коментарий", "комментария", " коментариев"], + files: ["файл", "файла", "файлов"], + persons: ["участник", "участника", "участников"], + tasks: ["задача", "задачи", "задач"], + projects: ["проект", "проекта", "проектов"] + } const cases = [2, 0, 1, 1, 1, 2]; - if (type === "comments") { - return comments[ + return allTypes[type][ number % 100 > 4 && number % 100 < 20 - ? 2 - : cases[number % 10 < 5 ? number % 10 : 5] - ]; - } - if (type === "files") { - return files[ - number % 100 > 4 && number % 100 < 20 - ? 2 - : cases[number % 10 < 5 ? number % 10 : 5] - ]; - } - - if (type === "persons") { - return persons[ - number % 100 > 4 && number % 100 < 20 - ? 2 - : cases[number % 10 < 5 ? number % 10 : 5] - ]; - } + ? 2 + : cases[number % 10 < 5 ? number % 10 : 5] + ]; }