tracker tasks create modal
This commit is contained in:
Mikola
@ -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;
|
||||
|
||||
@ -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,93 +402,132 @@ export const TrackerModal = ({
|
||||
{modalType === "createTiketProject" && (
|
||||
<>
|
||||
<div className="title-project">
|
||||
<h4>Введите название и описание задачи</h4>
|
||||
<div className="input-container">
|
||||
<input
|
||||
maxLength="100"
|
||||
className="name-project"
|
||||
value={valueTiket}
|
||||
onChange={(e) => setValueTiket(e.target.value)}
|
||||
placeholder="Название задачи"
|
||||
/>
|
||||
</div>
|
||||
<CKEditor
|
||||
editor={ClassicEditor}
|
||||
data={descriptionTicket}
|
||||
config={{
|
||||
toolbar: [
|
||||
"heading",
|
||||
"|",
|
||||
"bold",
|
||||
"italic",
|
||||
"link",
|
||||
"bulletedList",
|
||||
"numberedList",
|
||||
],
|
||||
removePlugins: ["BlockQuote"],
|
||||
placeholder: "Описание задачи",
|
||||
}}
|
||||
onChange={(event, editor) => {
|
||||
const data = editor.getData();
|
||||
setDescriptionTicket(data);
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
onClick={() => setSelectExecutorTaskOpen(!selectExecutorTaskOpen)}
|
||||
className={
|
||||
selectExecutorTaskOpen
|
||||
? "select__executor select__executor--open"
|
||||
: "select__executor"
|
||||
}
|
||||
>
|
||||
<div className="selected__executor">
|
||||
{selectedExecutorTask.user_id ? (
|
||||
<>
|
||||
<span>{selectedExecutorTask.user.fio}</span>
|
||||
<img
|
||||
className="avatar"
|
||||
src={urlForLocal(selectedExecutorTask.user.avatar)}
|
||||
alt="avatar"
|
||||
/>
|
||||
</>
|
||||
) : (
|
||||
<span>{selectedExecutorTask}</span>
|
||||
)}
|
||||
<div className='createTaskHead'>
|
||||
<span>Этап</span>
|
||||
<div className='createTaskHead__selectColumn'>
|
||||
<span>Backlog</span>
|
||||
<img src={arrowCreateTask} alt='arrow' />
|
||||
</div>
|
||||
<img className="arrow" src={arrowDown} alt="arrow" />
|
||||
{selectExecutorTaskOpen && (
|
||||
<div className="select__executor__dropDown">
|
||||
{correctProjectUsers.length ? (
|
||||
correctProjectUsers.map((person) => {
|
||||
return (
|
||||
<div
|
||||
onClick={() => setSelectedExecutorTask(person)}
|
||||
className="executor"
|
||||
key={person.user_id}
|
||||
>
|
||||
<span>{person.user.fio}</span>
|
||||
</div>
|
||||
<div className='createTaskBody'>
|
||||
<div className='createTaskBody__left'>
|
||||
<h4>Введите название и описание задачи</h4>
|
||||
<div className="input-container">
|
||||
<input
|
||||
maxLength="100"
|
||||
className="name-project"
|
||||
value={valueTiket}
|
||||
onChange={(e) => setValueTiket(e.target.value)}
|
||||
placeholder="Название задачи"
|
||||
/>
|
||||
</div>
|
||||
<CKEditor
|
||||
editor={ClassicEditor}
|
||||
data={descriptionTicket}
|
||||
config={{
|
||||
toolbar: [
|
||||
"heading",
|
||||
"|",
|
||||
"bold",
|
||||
"italic",
|
||||
"link",
|
||||
"bulletedList",
|
||||
"numberedList",
|
||||
],
|
||||
removePlugins: ["BlockQuote"],
|
||||
placeholder: "Описание задачи",
|
||||
}}
|
||||
onChange={(event, editor) => {
|
||||
const data = editor.getData();
|
||||
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={
|
||||
selectExecutorTaskOpen
|
||||
? "select__executor select__executor--open"
|
||||
: "select__executor"
|
||||
}
|
||||
>
|
||||
<div className="selected__executor">
|
||||
{selectedExecutorTask.user_id ? (
|
||||
<>
|
||||
<span>{selectedExecutorTask.user.fio}</span>
|
||||
<img
|
||||
className="avatar"
|
||||
src={
|
||||
person.user?.avatar
|
||||
? urlForLocal(person.user.avatar)
|
||||
: avatarMok
|
||||
}
|
||||
alt="avatar"
|
||||
className="avatar"
|
||||
src={urlForLocal(selectedExecutorTask.user.avatar)}
|
||||
alt="avatar"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
})
|
||||
) : (
|
||||
<span>Нет пользователей</span>
|
||||
</>
|
||||
) : (
|
||||
<span>{selectedExecutorTask}</span>
|
||||
)}
|
||||
</div>
|
||||
<img className="arrow" src={arrowDown} alt="arrow" />
|
||||
{selectExecutorTaskOpen && (
|
||||
<div className="select__executor__dropDown">
|
||||
{correctProjectUsers.length ? (
|
||||
correctProjectUsers.map((person) => {
|
||||
return (
|
||||
<div
|
||||
onClick={() => setSelectedExecutorTask(person)}
|
||||
className="executor"
|
||||
key={person.user_id}
|
||||
>
|
||||
<span>{person.user.fio}</span>
|
||||
<img
|
||||
className="avatar"
|
||||
src={
|
||||
person.user?.avatar
|
||||
? urlForLocal(person.user.avatar)
|
||||
: avatarMok
|
||||
}
|
||||
alt="avatar"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
})
|
||||
) : (
|
||||
<span>Нет пользователей</span>
|
||||
)}
|
||||
</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>
|
||||
<BaseButton styles={"button-add"} onClick={createTiket}>
|
||||
Создать
|
||||
</BaseButton>
|
||||
</>
|
||||
)}
|
||||
{modalType === "editProject" && (
|
||||
|
||||
@ -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,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;
|
||||
|
||||
Reference in New Issue
Block a user