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

tracker tasks create modal

Browse Source
This commit is contained in:
Mikola 2023-09-13 17:45:31 +03:00
parent 8ed1859e93
commit a84672f76f
9 changed files with 407 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/assets/icons/arrows/arrowCreateTask.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="7" height="4" viewBox="0 0 7 4" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3.625 3.59082L0.485659 0.079101L6.76434 0.0791015L3.625 3.59082Z" fill="#6F6F6F"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 192 B

10
src/assets/icons/arrows/arrowRightCreateTask.svg Normal file
View File

@ -0,0 +1,10 @@
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_1685_1274)">
<path d="M14.6575 7.35159L11.4757 4.16982C11.3614 4.03635 11.1606 4.0208 11.0271 4.13512C10.8936 4.24941 10.8781 4.45028 10.9924 4.58374C11.0031 4.59618 11.0147 4.6078 11.0271 4.61844L13.6648 7.25931H1.06817C0.892458 7.25931 0.75 7.40176 0.75 7.5775C0.75 7.75323 0.892458 7.89567 1.06817 7.89567H13.6648L11.0271 10.5333C10.8936 10.6476 10.8781 10.8485 10.9924 10.982C11.1067 11.1154 11.3076 11.131 11.441 11.0167C11.4535 11.006 11.4651 10.9944 11.4757 10.982L14.6575 7.80018C14.7808 7.67613 14.7808 7.4757 14.6575 7.35159Z" fill="black"/>
</g>
<defs>
<clipPath id="clip0_1685_1274">
<rect width="14" height="14" fill="white" transform="translate(0.75 0.576172)"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 825 B

17
src/assets/icons/createTaskCalendar.svg Normal file
View File

@ -0,0 +1,17 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_1685_1261)">
<path d="M21.1356 2.64549H17.7042V1.28906C17.7042 0.892136 17.3823 0.570312 16.9854 0.570312C16.5885 0.570312 16.2667 0.892136 16.2667 1.28906V2.64549H10.3263V1.28906C10.3263 0.892136 10.0045 0.570312 9.60753 0.570312C9.2106 0.570312 8.88878 0.892136 8.88878 1.28906V2.64549H5.45734C4.55259 2.64549 3.81647 3.38161 3.81647 4.28637V13.2309C3.81647 13.2641 3.80822 13.2971 3.79225 13.3269L1.39841 17.8079C1.12396 18.3213 1.13888 18.9258 1.43806 19.4249C1.73743 19.9241 2.2635 20.2222 2.84556 20.2222H3.12474V21.3904C3.12474 22.2951 3.86086 23.0312 4.76579 23.0312H20.6745C21.5794 23.0312 22.3155 22.2951 22.3155 21.3904V14.5683L22.6087 13.9707C22.7184 13.7472 22.7765 13.4971 22.7765 13.2478V4.28637C22.7765 3.38161 22.0404 2.64549 21.1356 2.64549ZM2.67096 18.6859C2.64411 18.6408 2.6213 18.5694 2.66622 18.4854L5.05989 14.0048C5.18693 13.7677 5.25397 13.5001 5.25397 13.2309V4.28637C5.25397 4.17424 5.34521 4.08299 5.45734 4.08299H8.88878V4.74752C8.88878 5.14445 9.2106 5.46627 9.60753 5.46627C10.0045 5.46627 10.3263 5.14445 10.3263 4.74752V4.08299H16.2667V4.74752C16.2667 5.14445 16.5885 5.46627 16.9854 5.46627C17.3823 5.46627 17.7042 5.14445 17.7042 4.74752V4.08299H21.1356C21.2477 4.08299 21.339 4.17424 21.339 4.28637V13.2478C21.339 13.2792 21.332 13.3093 21.3183 13.3374L18.7014 18.6708C18.6674 18.74 18.5958 18.7847 18.5187 18.7847H2.84556C2.75027 18.7847 2.69816 18.731 2.67096 18.6859ZM20.878 21.3904C20.878 21.5025 20.7868 21.5938 20.6745 21.5938H4.76579C4.65349 21.5938 4.56224 21.5025 4.56224 21.3904V20.2222H18.5187C19.1401 20.2222 19.7183 19.8618 19.9919 19.304L20.878 17.498V21.3904Z" fill="black"/>
<path d="M9.37711 10.7148H7.99365C7.59673 10.7148 7.2749 11.0367 7.2749 11.4336C7.2749 11.8305 7.59673 12.1523 7.99365 12.1523H9.37711C9.77403 12.1523 10.0959 11.8305 10.0959 11.4336C10.0959 11.0367 9.77403 10.7148 9.37711 10.7148Z" fill="black"/>
<path d="M13.9883 10.7148H12.605C12.2081 10.7148 11.8862 11.0367 11.8862 11.4336C11.8862 11.8305 12.2081 12.1523 12.605 12.1523H13.9883C14.3852 12.1523 14.707 11.8305 14.707 11.4336C14.707 11.0367 14.3852 10.7148 13.9883 10.7148Z" fill="black"/>
<path d="M18.5993 10.7148H17.2158C16.8189 10.7148 16.4971 11.0367 16.4971 11.4336C16.4971 11.8305 16.8189 12.1523 17.2158 12.1523H18.5993C18.9962 12.1523 19.318 11.8305 19.318 11.4336C19.318 11.0367 18.9962 10.7148 18.5993 10.7148Z" fill="black"/>
<path d="M8.2241 15.0957H6.84082C6.44389 15.0957 6.12207 15.4175 6.12207 15.8145C6.12207 16.2114 6.44389 16.5332 6.84082 16.5332H8.2241C8.62103 16.5332 8.94285 16.2114 8.94285 15.8145C8.94285 15.4175 8.62103 15.0957 8.2241 15.0957Z" fill="black"/>
<path d="M12.8356 15.0957H11.4521C11.0552 15.0957 10.7334 15.4175 10.7334 15.8145C10.7334 16.2114 11.0552 16.5332 11.4521 16.5332H12.8356C13.2325 16.5332 13.5544 16.2114 13.5544 15.8145C13.5544 15.4175 13.2325 15.0957 12.8356 15.0957Z" fill="black"/>
<path d="M17.4468 15.0957H16.0635C15.6665 15.0957 15.3447 15.4175 15.3447 15.8145C15.3447 16.2114 15.6665 16.5332 16.0635 16.5332H17.4468C17.8437 16.5332 18.1655 16.2114 18.1655 15.8145C18.1655 15.4175 17.8437 15.0957 17.4468 15.0957Z" fill="black"/>
<path d="M7.7627 8.46387H18.8298C19.2267 8.46387 19.5485 8.14204 19.5485 7.74512C19.5485 7.34819 19.2267 7.02637 18.8298 7.02637H7.7627C7.36577 7.02637 7.04395 7.34819 7.04395 7.74512C7.04395 8.14204 7.36577 8.46387 7.7627 8.46387Z" fill="black"/>
</g>
<defs>
<clipPath id="clip0_1685_1261">
<rect width="23" height="23" fill="white" transform="translate(0.75 0.5)"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.6 KiB

3
src/components/Common/ModalLayout/ModalLayout.jsx
View File

@ -7,6 +7,7 @@ export const ModalLayout = ({
setActive,
children,
styles,
type,
...props
}) => {
return (
@ -17,7 +18,7 @@ export const ModalLayout = ({
>
<div
className={
styles ? `modal-layout__content ${styles}` : "modal-layout__content"
styles ? `modal-layout__content ${styles}` : `modal-layout__content ${type}`
}
onClick={(e) => e.stopPropagation()}
>

7
src/components/Common/ModalLayout/modalLayout.scss
View File

@ -2,7 +2,7 @@
z-index: 9;
height: 100%;
width: 100%;
background-color: rgba(0, 0, 0, 0.11);
background-color: rgba(0, 0, 0, 0.8);
position: fixed;
top: 0;
left: 0;
@ -104,6 +104,11 @@
}
}
.createTiketProject {
padding: 0;
background: white;
}
.ck-editor {
width: 100% !important;
}

2
src/components/Modal/AcceptModal/acceptModal.scss
View File

@ -1,7 +1,7 @@
.backDrop {
height: 100%;
width: 100%;
background-color: rgba(0, 0, 0, 0.11);
background-color: rgba(0, 0, 0, 0.8);
position: fixed;
top: 0;
left: 0;

55
src/components/Modal/Tracker/TrackerModal/TrackerModal.jsx
View File

@ -2,6 +2,10 @@ import ClassicEditor from "@ckeditor/ckeditor5-build-classic";
import { CKEditor } from "@ckeditor/ckeditor5-react";
import React, { useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import ru from "date-fns/locale/ru";
import DatePicker, {registerLocale} from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
import {getCorrectDate} from "@components/Calendar/calendarHelper";
import { getProfileInfo } from "@redux/outstaffingSlice";
import {
@ -19,7 +23,7 @@ import {
setProjectBoardFetch,
} from "@redux/projectsTrackerSlice";
import { urlForLocal } from "@utils/helper";
import {getCorrectRequestDate, urlForLocal} from "@utils/helper";
import { apiRequest } from "@api/request";
@ -30,8 +34,12 @@ import ModalLayout from "@components/Common/ModalLayout/ModalLayout";
import arrowDown from "assets/icons/arrows/selectArrow.png";
import avatarMok from "assets/images/avatarMok.png";
import arrowCreateTask from "assets/icons/arrows/arrowCreateTask.svg"
import calendarImg from "assets/icons/createTaskCalendar.svg"
import arrowRight from "assets/icons/arrows/arrowRightCreateTask.svg"
import "./trackerModal.scss";
registerLocale("ru", ru);
export const TrackerModal = ({
active,
@ -70,6 +78,9 @@ export const TrackerModal = ({
const [selectColumnPriorityOpen, setSelectColumnPriorityOpen] =
useState(false);
const { showNotification } = useNotification();
const [deadLineDate, setDeadLineDate] = useState('')
const [datePickerOpen, setDatePickerOpen] = useState(false)
const [startDate, setStartDate] = useState(new Date());
function createTab() {
if (!valueColumn) {
@ -113,6 +124,7 @@ export const TrackerModal = ({
user_id: localStorage.getItem("id"),
column_id: selectedTab,
priority: priorityTask,
dead_line: deadLineDate ? getCorrectRequestDate(deadLineDate) : ''
},
}).then((res) => {
if (res.status === 500) {
@ -142,6 +154,7 @@ export const TrackerModal = ({
setDescriptionTicket("");
dispatch(setProjectBoardFetch(projectBoard.id));
}
setDeadLineDate('')
showNotification({
show: true,
text: "Задача создана",
@ -296,6 +309,7 @@ export const TrackerModal = ({
<ModalLayout
active={active}
setActive={setActive}
type={modalType}
// onClick={() => {
// setSelectWorkersOpen(false);
// }}
@ -388,6 +402,15 @@ export const TrackerModal = ({
{modalType === "createTiketProject" && (
<>
<div className="title-project">
<div className='createTaskHead'>
<span>Этап</span>
<div className='createTaskHead__selectColumn'>
<span>Backlog</span>
<img src={arrowCreateTask} alt='arrow' />
</div>
</div>
<div className='createTaskBody'>
<div className='createTaskBody__left'>
<h4>Введите название и описание задачи</h4>
<div className="input-container">
<input
@ -419,6 +442,17 @@ export const TrackerModal = ({
setDescriptionTicket(data);
}}
/>
</div>
<div className='createTaskBody__right'>
<div className='createTaskBody__right__owner'>
<p>Создатель : {profileInfo?.fio}</p>
<img
src={
profileInfo.photo ? urlForLocal(profileInfo.photo) : avatarMok
}
alt="avatar"
/>
</div>
<div
onClick={() => setSelectExecutorTaskOpen(!selectExecutorTaskOpen)}
className={
@ -471,10 +505,29 @@ export const TrackerModal = ({
</div>
)}
</div>
<div className='createTaskBody__right__deadLine'>
<img src={calendarImg} alt='calendar' />
<span>Срок исполнения</span>
<img src={arrowRight} className='arrow' alt='arrow' />
<p onClick={() => setDatePickerOpen(!datePickerOpen)}>{deadLineDate ? getCorrectDate(deadLineDate) : "Дата не выбрана"}</p>
<DatePicker
className="datePicker"
open={datePickerOpen}
locale="ru"
selected={startDate}
onChange={(date) => {
setDatePickerOpen(false);
setStartDate(date);
setDeadLineDate(date);
}}
/>
</div>
<BaseButton styles={"button-add"} onClick={createTiket}>
Создать
</BaseButton>
</div>
</div>
</div>
</>
)}
{modalType === "editProject" && (

237
src/components/Modal/Tracker/TrackerModal/trackerModal.scss
View File

@ -3,7 +3,7 @@
z-index: 9;
height: 100%;
width: 100%;
background-color: rgba(0, 0, 0, 0.11);
background-color: rgba(0, 0, 0, 0.8);
position: fixed;
top: 0;
left: 0;
@ -145,7 +145,7 @@
align-items: center;
span {
max-width: 205px;
max-width: 250px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
@ -162,9 +162,9 @@
&__dropDown {
position: absolute;
background: white;
background: #F1F1F1;
border-radius: 8px;
top: 50px;
top: 55px;
left: 0;
width: 100%;
padding: 9.5px 12px;
@ -275,6 +275,235 @@
transform: rotate(180deg);
}
}
.createTaskHead {
width: 100%;
padding: 30px 42px 18px;
display: flex;
column-gap: 9.5px;
align-items: center;
background: #F1F1F1;
border-radius: 22px 22px 0 0;
span {
font-size: 15px;
color: #000000;
}
&__selectColumn {
display: flex;
column-gap: 8px;
cursor: pointer;
span {
padding: 3.75px 16.25px 5.75px;
color: #FFFFFF;
font-size: 12px;
font-weight: 500;
background: #52B709;
border-radius: 12px;
}
}
}
.createTaskBody {
padding: 13px 43px 46px 42px;
display: flex;
column-gap: 55px;
&__left {
display: flex;
flex-direction: column;
h4 {
color: #263238 !important;
font-size: 16px;
line-height: 19.2px;
margin-bottom: 25px;
}
.input-container {
background: #F1F1F1;
margin: 0 0 17px;
width: 393px;
height: 47px;
input {
background: #F1F1F1;
color: #000000;
font-size: 15px;
line-height: 18px;
font-weight: 300;
}
}
.ck-editor {
border: 1px solid #DDDDDD;
border-radius: 8px;
}
.ck-editor__editable.ck-rounded-corners {
min-height: 110px;
max-height: 110px;
}
}
&__right {
display: flex;
flex-direction: column;
align-items: start;
justify-content: end;
&__owner {
display: flex;
align-items: center;
column-gap: 9.5px;
margin-bottom: 30px;
p {
color: #2D4A17;
font-size: 14px;
font-weight: 500;
line-height: 32px;
}
img {
width: 22px;
height: 22px;
}
}
.select__executor {
background: #F1F1F1;
width: 393px;
height: 47px;
font-weight: 300;
line-height: 18px;
font-size: 15px;
margin-bottom: 17.5px;
z-index: 100;
}
.button-add {
margin: 0;
width: 185px;
height: 42px;
color: #FFFFFF;
font-weight: 500;
font-size: 16px;
}
&__deadLine {
display: flex;
align-items: center;
column-gap: 18px;
font-weight: 300;
line-height: 18px;
font-size: 15px;
position: relative;
margin-bottom: 22px;
span {
color: #6F6F6F;
}
p {
cursor: pointer;
color: #000000;
}
.datePicker {
visibility: hidden;
height: 0;
padding: 0;
width: 0;
position: absolute;
}
.react-datepicker-wrapper {
position: absolute;
top: -15px;
max-width: 120px;
right: 0;
}
.react-datepicker {
border: 1px solid #e8ede4;
border-radius: 8px;
}
.react-datepicker-popper {
top: 20px !important;
left: -110px !important;
z-index: 10;
}
.react-datepicker__current-month {
font-size: 18px;
font-family: "LabGrotesque", sans-serif;
text-transform: capitalize;
padding-bottom: 8px;
}
.react-datepicker__navigation-icon {
width: 20px;
height: 20px;
border-radius: 50px;
border: 2px solid #cbd1d2;
display: flex;
justify-content: center;
align-items: center;
font-size: 0;
&:hover {
background-color: white;
}
}
.react-datepicker__navigation-icon--next::before {
border-width: 2px 2px 0 0;
top: auto;
left: 4px;
height: 6px;
width: 6px;
}
.react-datepicker__navigation-icon--previous::before {
border-width: 2px 2px 0 0;
top: 5px;
left: 7px;
height: 6px;
width: 6px;
}
.react-datepicker__header {
padding: 5px 0 10px;
border-bottom: 1px solid #baacc0;
}
.react-datepicker__day {
font-size: 16px;
width: 35px;
font-family: "LabGrotesque", sans-serif;
border-radius: 50px;
padding: 7px;
}
.react-datepicker__day-name {
font-size: 18px;
width: 35px;
font-weight: 500;
font-family: "LabGrotesque", sans-serif;
}
.react-datepicker__triangle {
left: 85px !important;
&:before {
border: 1px solid #e8ede4;
}
}
}
}
}
}
.name-project {

2
src/components/Modal/TrackerModal/trackerModal.scss
View File

@ -2,7 +2,7 @@
z-index: 9;
height: 100%;
width: 100%;
background-color: rgba(0, 0, 0, 0.11);
background-color: rgba(0, 0, 0, 0.8);
position: fixed;
top: 0;
left: 0;