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:46:56 +03:00
parent a84672f76f
commit a3ff812b8a
2 changed files with 113 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -18,7 +18,9 @@ export const ModalLayout = ({
> >
<div <div
className={ className={
styles ? `modal-layout__content ${styles}` : `modal-layout__content ${type}` styles
? `modal-layout__content ${styles}`
: `modal-layout__content ${type}`
} }
onClick={(e) => e.stopPropagation()} onClick={(e) => e.stopPropagation()}
> >

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

@ -1,11 +1,10 @@
import ClassicEditor from "@ckeditor/ckeditor5-build-classic"; import ClassicEditor from "@ckeditor/ckeditor5-build-classic";
import { CKEditor } from "@ckeditor/ckeditor5-react"; 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 ru from "date-fns/locale/ru";
import DatePicker, {registerLocale} from "react-datepicker"; import React, { useEffect, useState } from "react";
import DatePicker, { registerLocale } from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css"; import "react-datepicker/dist/react-datepicker.css";
import {getCorrectDate} from "@components/Calendar/calendarHelper"; import { useDispatch, useSelector } from "react-redux";
import { getProfileInfo } from "@redux/outstaffingSlice"; import { getProfileInfo } from "@redux/outstaffingSlice";
import { import {
@ -23,22 +22,24 @@ import {
setProjectBoardFetch, setProjectBoardFetch,
} from "@redux/projectsTrackerSlice"; } from "@redux/projectsTrackerSlice";
import {getCorrectRequestDate, urlForLocal} from "@utils/helper"; import { getCorrectRequestDate, urlForLocal } from "@utils/helper";
import { apiRequest } from "@api/request"; import { apiRequest } from "@api/request";
import { useNotification } from "@hooks/useNotification"; import { useNotification } from "@hooks/useNotification";
import { getCorrectDate } from "@components/Calendar/calendarHelper";
import BaseButton from "@components/Common/BaseButton/BaseButton"; import BaseButton from "@components/Common/BaseButton/BaseButton";
import ModalLayout from "@components/Common/ModalLayout/ModalLayout"; import ModalLayout from "@components/Common/ModalLayout/ModalLayout";
import arrowCreateTask from "assets/icons/arrows/arrowCreateTask.svg";
import arrowRight from "assets/icons/arrows/arrowRightCreateTask.svg";
import arrowDown from "assets/icons/arrows/selectArrow.png"; import arrowDown from "assets/icons/arrows/selectArrow.png";
import calendarImg from "assets/icons/createTaskCalendar.svg";
import avatarMok from "assets/images/avatarMok.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"; import "./trackerModal.scss";
registerLocale("ru", ru); registerLocale("ru", ru);
export const TrackerModal = ({ export const TrackerModal = ({
@ -78,8 +79,8 @@ export const TrackerModal = ({
const [selectColumnPriorityOpen, setSelectColumnPriorityOpen] = const [selectColumnPriorityOpen, setSelectColumnPriorityOpen] =
useState(false); useState(false);
const { showNotification } = useNotification(); const { showNotification } = useNotification();
const [deadLineDate, setDeadLineDate] = useState('') const [deadLineDate, setDeadLineDate] = useState("");
const [datePickerOpen, setDatePickerOpen] = useState(false) const [datePickerOpen, setDatePickerOpen] = useState(false);
const [startDate, setStartDate] = useState(new Date()); const [startDate, setStartDate] = useState(new Date());
function createTab() { function createTab() {
@ -124,7 +125,7 @@ export const TrackerModal = ({
user_id: localStorage.getItem("id"), user_id: localStorage.getItem("id"),
column_id: selectedTab, column_id: selectedTab,
priority: priorityTask, priority: priorityTask,
dead_line: deadLineDate ? getCorrectRequestDate(deadLineDate) : '' dead_line: deadLineDate ? getCorrectRequestDate(deadLineDate) : "",
}, },
}).then((res) => { }).then((res) => {
if (res.status === 500) { if (res.status === 500) {
@ -154,7 +155,7 @@ export const TrackerModal = ({
setDescriptionTicket(""); setDescriptionTicket("");
dispatch(setProjectBoardFetch(projectBoard.id)); dispatch(setProjectBoardFetch(projectBoard.id));
} }
setDeadLineDate('') setDeadLineDate("");
showNotification({ showNotification({
show: true, show: true,
text: "Задача создана", text: "Задача создана",
@ -402,124 +403,132 @@ export const TrackerModal = ({
{modalType === "createTiketProject" && ( {modalType === "createTiketProject" && (
<> <>
<div className="title-project"> <div className="title-project">
<div className='createTaskHead'> <div className="createTaskHead">
<span>Этап</span> <span>Этап</span>
<div className='createTaskHead__selectColumn'> <div className="createTaskHead__selectColumn">
<span>Backlog</span> <span>Backlog</span>
<img src={arrowCreateTask} alt='arrow' /> <img src={arrowCreateTask} alt="arrow" />
</div> </div>
</div> </div>
<div className='createTaskBody'> <div className="createTaskBody">
<div className='createTaskBody__left'> <div className="createTaskBody__left">
<h4>Введите название и описание задачи</h4> <h4>Введите название и описание задачи</h4>
<div className="input-container"> <div className="input-container">
<input <input
maxLength="100" maxLength="100"
className="name-project" className="name-project"
value={valueTiket} value={valueTiket}
onChange={(e) => setValueTiket(e.target.value)} onChange={(e) => setValueTiket(e.target.value)}
placeholder="Название задачи" placeholder="Название задачи"
/> />
</div> </div>
<CKEditor <CKEditor
editor={ClassicEditor} editor={ClassicEditor}
data={descriptionTicket} data={descriptionTicket}
config={{ config={{
toolbar: [ toolbar: [
"heading", "heading",
"|", "|",
"bold", "bold",
"italic", "italic",
"link", "link",
"bulletedList", "bulletedList",
"numberedList", "numberedList",
], ],
removePlugins: ["BlockQuote"], removePlugins: ["BlockQuote"],
placeholder: "Описание задачи", placeholder: "Описание задачи",
}} }}
onChange={(event, editor) => { onChange={(event, editor) => {
const data = editor.getData(); const data = editor.getData();
setDescriptionTicket(data); setDescriptionTicket(data);
}} }}
/> />
</div> </div>
<div className='createTaskBody__right'> <div className="createTaskBody__right">
<div className='createTaskBody__right__owner'> <div className="createTaskBody__right__owner">
<p>Создатель : {profileInfo?.fio}</p> <p>Создатель : {profileInfo?.fio}</p>
<img <img
src={ src={
profileInfo.photo ? urlForLocal(profileInfo.photo) : avatarMok profileInfo.photo
} ? urlForLocal(profileInfo.photo)
alt="avatar" : avatarMok
}
alt="avatar"
/> />
</div> </div>
<div <div
onClick={() => setSelectExecutorTaskOpen(!selectExecutorTaskOpen)} onClick={() =>
className={ setSelectExecutorTaskOpen(!selectExecutorTaskOpen)
selectExecutorTaskOpen }
? "select__executor select__executor--open" className={
: "select__executor" selectExecutorTaskOpen
} ? "select__executor select__executor--open"
: "select__executor"
}
> >
<div className="selected__executor"> <div className="selected__executor">
{selectedExecutorTask.user_id ? ( {selectedExecutorTask.user_id ? (
<> <>
<span>{selectedExecutorTask.user.fio}</span> <span>{selectedExecutorTask.user.fio}</span>
<img <img
className="avatar" className="avatar"
src={urlForLocal(selectedExecutorTask.user.avatar)} src={urlForLocal(selectedExecutorTask.user.avatar)}
alt="avatar" alt="avatar"
/> />
</> </>
) : ( ) : (
<span>{selectedExecutorTask}</span> <span>{selectedExecutorTask}</span>
)} )}
</div> </div>
<img className="arrow" src={arrowDown} alt="arrow" /> <img className="arrow" src={arrowDown} alt="arrow" />
{selectExecutorTaskOpen && ( {selectExecutorTaskOpen && (
<div className="select__executor__dropDown"> <div className="select__executor__dropDown">
{correctProjectUsers.length ? ( {correctProjectUsers.length ? (
correctProjectUsers.map((person) => { correctProjectUsers.map((person) => {
return ( return (
<div <div
onClick={() => setSelectedExecutorTask(person)} onClick={() => setSelectedExecutorTask(person)}
className="executor" className="executor"
key={person.user_id} key={person.user_id}
> >
<span>{person.user.fio}</span> <span>{person.user.fio}</span>
<img <img
className="avatar" className="avatar"
src={ src={
person.user?.avatar person.user?.avatar
? urlForLocal(person.user.avatar) ? urlForLocal(person.user.avatar)
: avatarMok : avatarMok
} }
alt="avatar" alt="avatar"
/> />
</div> </div>
); );
}) })
) : ( ) : (
<span>Нет пользователей</span> <span>Нет пользователей</span>
)} )}
</div> </div>
)} )}
</div> </div>
<div className='createTaskBody__right__deadLine'> <div className="createTaskBody__right__deadLine">
<img src={calendarImg} alt='calendar' /> <img src={calendarImg} alt="calendar" />
<span>Срок исполнения</span> <span>Срок исполнения</span>
<img src={arrowRight} className='arrow' alt='arrow' /> <img src={arrowRight} className="arrow" alt="arrow" />
<p onClick={() => setDatePickerOpen(!datePickerOpen)}>{deadLineDate ? getCorrectDate(deadLineDate) : "Дата не выбрана"}</p> <p onClick={() => setDatePickerOpen(!datePickerOpen)}>
{deadLineDate
? getCorrectDate(deadLineDate)
: "Дата не выбрана"}
</p>
<DatePicker <DatePicker
className="datePicker" className="datePicker"
open={datePickerOpen} open={datePickerOpen}
locale="ru" locale="ru"
selected={startDate} selected={startDate}
onChange={(date) => { onChange={(date) => {
setDatePickerOpen(false); setDatePickerOpen(false);
setStartDate(date); setStartDate(date);
setDeadLineDate(date); setDeadLineDate(date);
}} }}
/> />
</div> </div>
<BaseButton styles={"button-add"} onClick={createTiket}> <BaseButton styles={"button-add"} onClick={createTiket}>