From a3ff812b8ad50d1941c9b1796b0cef1412e9918b Mon Sep 17 00:00:00 2001
From: Mikola <ko1907@mail.ru>
Date: Wed, 13 Sep 2023 17:46:56 +0300
Subject: [PATCH] tracker tasks create modal

---
 .../Common/ModalLayout/ModalLayout.jsx        |   4 +-
 .../Tracker/TrackerModal/TrackerModal.jsx     | 211 +++++++++---------
 2 files changed, 113 insertions(+), 102 deletions(-)

diff --git a/src/components/Common/ModalLayout/ModalLayout.jsx b/src/components/Common/ModalLayout/ModalLayout.jsx
index 542e2967..3c7d2872 100644
--- a/src/components/Common/ModalLayout/ModalLayout.jsx
+++ b/src/components/Common/ModalLayout/ModalLayout.jsx
@@ -18,7 +18,9 @@ export const ModalLayout = ({
     >
       <div
         className={
-          styles ? `modal-layout__content ${styles}` : `modal-layout__content ${type}`
+          styles
+            ? `modal-layout__content ${styles}`
+            : `modal-layout__content ${type}`
         }
         onClick={(e) => e.stopPropagation()}
       >
diff --git a/src/components/Modal/Tracker/TrackerModal/TrackerModal.jsx b/src/components/Modal/Tracker/TrackerModal/TrackerModal.jsx
index fb0497a5..efddad92 100644
--- a/src/components/Modal/Tracker/TrackerModal/TrackerModal.jsx
+++ b/src/components/Modal/Tracker/TrackerModal/TrackerModal.jsx
@@ -1,11 +1,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, { useEffect, useState } from "react";
+import DatePicker, { registerLocale } from "react-datepicker";
 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 {
@@ -23,22 +22,24 @@ import {
   setProjectBoardFetch,
 } from "@redux/projectsTrackerSlice";
 
-import {getCorrectRequestDate, urlForLocal} from "@utils/helper";
+import { getCorrectRequestDate, urlForLocal } from "@utils/helper";
 
 import { apiRequest } from "@api/request";
 
 import { useNotification } from "@hooks/useNotification";
 
+import { getCorrectDate } from "@components/Calendar/calendarHelper";
 import BaseButton from "@components/Common/BaseButton/BaseButton";
 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 calendarImg from "assets/icons/createTaskCalendar.svg";
 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 = ({
@@ -78,8 +79,8 @@ export const TrackerModal = ({
   const [selectColumnPriorityOpen, setSelectColumnPriorityOpen] =
     useState(false);
   const { showNotification } = useNotification();
-  const [deadLineDate, setDeadLineDate] = useState('')
-  const [datePickerOpen, setDatePickerOpen] = useState(false)
+  const [deadLineDate, setDeadLineDate] = useState("");
+  const [datePickerOpen, setDatePickerOpen] = useState(false);
   const [startDate, setStartDate] = useState(new Date());
 
   function createTab() {
@@ -124,7 +125,7 @@ export const TrackerModal = ({
         user_id: localStorage.getItem("id"),
         column_id: selectedTab,
         priority: priorityTask,
-        dead_line: deadLineDate ? getCorrectRequestDate(deadLineDate) : ''
+        dead_line: deadLineDate ? getCorrectRequestDate(deadLineDate) : "",
       },
     }).then((res) => {
       if (res.status === 500) {
@@ -154,7 +155,7 @@ export const TrackerModal = ({
           setDescriptionTicket("");
           dispatch(setProjectBoardFetch(projectBoard.id));
         }
-        setDeadLineDate('')
+        setDeadLineDate("");
         showNotification({
           show: true,
           text: "Задача создана",
@@ -402,124 +403,132 @@ export const TrackerModal = ({
       {modalType === "createTiketProject" && (
         <>
           <div className="title-project">
-            <div className='createTaskHead'>
+            <div className="createTaskHead">
               <span>Этап</span>
-              <div className='createTaskHead__selectColumn'>
+              <div className="createTaskHead__selectColumn">
                 <span>Backlog</span>
-                <img src={arrowCreateTask} alt='arrow' />
+                <img src={arrowCreateTask} alt="arrow" />
               </div>
             </div>
-            <div className='createTaskBody'>
-              <div className='createTaskBody__left'>
+            <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="Название задачи"
+                    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);
-                    }}
+                  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'>
+              <div className="createTaskBody__right">
+                <div className="createTaskBody__right__owner">
                   <p>Создатель : {profileInfo?.fio}</p>
                   <img
-                      src={
-                        profileInfo.photo ? urlForLocal(profileInfo.photo) : avatarMok
-                      }
-                      alt="avatar"
+                    src={
+                      profileInfo.photo
+                        ? urlForLocal(profileInfo.photo)
+                        : avatarMok
+                    }
+                    alt="avatar"
                   />
                 </div>
                 <div
-                    onClick={() => setSelectExecutorTaskOpen(!selectExecutorTaskOpen)}
-                    className={
-                      selectExecutorTaskOpen
-                          ? "select__executor select__executor--open"
-                          : "select__executor"
-                    }
+                  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.user.fio}</span>
+                        <img
+                          className="avatar"
+                          src={urlForLocal(selectedExecutorTask.user.avatar)}
+                          alt="avatar"
+                        />
+                      </>
                     ) : (
-                        <span>{selectedExecutorTask}</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 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' />
+                <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>
+                  <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);
-                      }}
+                    className="datePicker"
+                    open={datePickerOpen}
+                    locale="ru"
+                    selected={startDate}
+                    onChange={(date) => {
+                      setDatePickerOpen(false);
+                      setStartDate(date);
+                      setDeadLineDate(date);
+                    }}
                   />
                 </div>
                 <BaseButton styles={"button-add"} onClick={createTiket}>