apuc/guild_front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

tracker tasks

Browse Source
This commit is contained in:
Николай Полтщук 2023-08-30 17:02:32 +03:00
parent 433fc88f99
commit 5fa069d84d
13 changed files with 307 additions and 145 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/components/AuthBox/authBox.scss
View File

@ -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 {

5
src/components/Modal/Tracker/ModalTicket/ModalTicket.jsx
View File

@ -120,6 +120,11 @@ export const ModalTiсket = ({
},
}).then((res) => {
dispatch(setProjectBoardFetch(projectId));
showNotification({
show: true,
text: "Изменения сохранены",
type: "success",
});
});
}

23
src/components/Modal/Tracker/ModalTicket/modalTicket.scss
View File

@ -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 {

11
src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx
View File

@ -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() {

1
src/components/SideBar/sidebar.scss
View File

@ -11,7 +11,6 @@
position: fixed;
width: 100% !important;
height: 80px;
margin-bottom: 50px;
}
@media (max-width: 1440px) {

9
src/components/SliderWorkers/sliderWorkers.scss
View File

@ -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 {

16
src/pages/AuthForDevelopers/authForDevelopers.scss
View File

@ -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 {

18
src/pages/AuthForPartners/authForPartners.scss
View File

@ -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;
}
}

92
src/pages/CompanyInfo/companyInfo.scss
View File

@ -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;
}
}
}
}

166
src/pages/ProjectTracker/ProjectTracker.js
View File

@ -621,96 +621,98 @@ export const ProjectTracker = () => {
</div>
</div>
)}
{column.tasks.map((task) => {
return (
<div
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)}
>
<div className='tasksContainer'>
{column.tasks.map((task) => {
return (
<div
className="tasks__board__item__title"
onClick={() => {
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)}
>
<p className="task__board__item__title">
{task.title}
</p>
</div>
<p
dangerouslySetInnerHTML={{
__html: task.description,
}}
className="tasks__board__item__description"
></p>
<div className="tasks__board__item__executor">
<span>
{task.executor?.fio
? task.executor?.fio
: "Исполнитель не назначен"}
</span>
{task.executor?.avatar && (
<img
src={
task.executor?.avatar
? urlForLocal(task.executor?.avatar)
: avatarMok
<div
className="tasks__board__item__title"
onClick={() => {
if (window.innerWidth < 985) {
window.location.replace(
`/tracker/task/${task.id}`
);
}
alt="avatar"
/>
)}
</div>
<div className="tasks__board__item__deadLine">
<p>Срок исполнения:</p>
<span>
{task.dead_line
? getCorrectDate(task.dead_line)
: "Не выбран"}
</span>
</div>
<div className="tasks__board__item__info">
<div className="tasks__board__item__info__more">
<img src={commentsBoard} alt="commentsImg" />
<span>
{task.comment_count}{" "}
{caseOfNum(task.comment_count, "comments")}
</span>
}}
>
<p className="task__board__item__title">
{task.title}
</p>
</div>
<div className="tasks__board__item__info__more">
<img src={filesBoard} alt="filesImg" />
<p
dangerouslySetInnerHTML={{
__html: task.description,
}}
className="tasks__board__item__description"
></p>
<div className="tasks__board__item__executor">
<span>
{task.files ? task.files : 0}{" "}
{caseOfNum(0, "files")}
{task.executor?.fio
? task.executor?.fio
: "Исполнитель не назначен"}
</span>
{task.executor?.avatar && (
<img
src={
task.executor?.avatar
? urlForLocal(task.executor?.avatar)
: avatarMok
}
alt="avatar"
/>
)}
</div>
{task.dead_line &&
<div className="tasks__board__item__deadLine">
<p>Срок исполнения:</p>
<span>
{getCorrectDate(task.dead_line)}
</span>
</div>
}
<div className="tasks__board__item__info">
<div className="tasks__board__item__info__more">
<img src={commentsBoard} alt="commentsImg" />
<span>
{task.comment_count}{" "}
{caseOfNum(task.comment_count, "comments")}
</span>
</div>
<div className="tasks__board__item__info__more">
<img src={filesBoard} alt="filesImg" />
<span>
{task.files ? task.files : 0}{" "}
{caseOfNum(0, "files")}
</span>
</div>
</div>
<TrackerSelectColumn
columns={projectBoard.columns.filter(
(item) => item.id !== column.id
)}
currentColumn={column}
task={task}
/>
</div>
<TrackerSelectColumn
columns={projectBoard.columns.filter(
(item) => item.id !== column.id
)}
currentColumn={column}
task={task}
/>
</div>
);
})}
);
})}
</div>
</div>
);
})}

13
src/pages/Tracker/Tracker.js
View File

@ -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 = () => {
<div className="archive__tasks">
<div className="archive__title">
<h3>Архив задач:</h3>
<p>{filterCompleteTasks.length} задач(а)</p>
<p>
{
`${filterCompleteTasks.length}
${caseOfNum(filterCompleteTasks.length, "tasks")}`
}</p>
<div className="archive__tasks__search">
<img src={search} alt="search" />
<input
@ -354,8 +358,9 @@ export const Tracker = () => {
<div className="archive__title">
<h3>Архив проектов:</h3>
<p>
{projects.filter((project) => project.status === 10).length}{" "}
проект(ов)
{
`${projects.filter((project) => project.status === 10).length}
${caseOfNum(projects.filter((project) => project.status === 10).length, "projects")}`}
</p>
</div>
<div className="archive__tasksWrapper">

40
src/pages/Tracker/tracker.scss
View File

@ -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 {

35
src/utils/helper.js
View File

@ -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]
];
}