Fixed full components

2023-05-24 19:23:24 +03:00
parent 70b3845755
commit f88b22cb84
40 changed files with 1362 additions and 1096 deletions
--- a/src/components/UI/CardArticle/CardArticle.jsx
+++ b/src/components/UI/CardArticle/CardArticle.jsx
@ -1,7 +1,8 @@
 import React from "react";
-import cardCalendar from "../../../images/cardCalendar.svg";
 import { Link } from "react-router-dom";

+import cardCalendar from "../../../images/cardCalendar.svg";
+
 import "./cardArticle.scss";

 export const CardArticle = ({ images, title, data, id }) => {
--- a/src/components/UI/ModalAspt/ModalAspt.jsx
+++ b/src/components/UI/ModalAspt/ModalAspt.jsx
@ -4,8 +4,8 @@ import { Link } from "react-router-dom";
 import ModalLayout from "../ModalLayout/ModalLayout";

 import avatar from "../../../images/mokPerson.png";
-import logoTg from "../../../images/TgLogo.svg";
-import arrow from "../../../images/right-arrow.png";
+import logoTg from "../../../images/tgLogo.svg";
+import arrow from "../../../images/left-arrow.png";
 import interview from "../../../images/interviewLogo.svg";

 import "./modalAspt.scss";
--- a/src/components/UI/ModalRegistration/ModalRegistration.jsx
+++ b/src/components/UI/ModalRegistration/ModalRegistration.jsx
@ -1,6 +1,6 @@
 import React from "react";

-import telegramLogo from "../../../images/TgLogo.svg";
+import telegramLogo from "../../../images/tgLogo.svg";
 import doc from "../../../images/doc.svg";
 import anyMoment from "../../../images/anyMoment.svg";

--- a/src/components/UI/ModalTicket/ModalTicket.jsx
+++ b/src/components/UI/ModalTicket/ModalTicket.jsx
@ -1,17 +1,18 @@
-import React, {useEffect, useState} from "react";
+import React, { useEffect, useState } from "react";
 import { Link } from "react-router-dom";
+
 import TrackerModal from "../TrackerModal/TrackerModal";
 import { apiRequest } from "../../../api/request";
 import { useDispatch } from "react-redux";
+import { urlForLocal } from "../../../helper";
 import {
  modalToggle,
  setProjectBoardFetch,
 } from "../../../redux/projectsTrackerSlice";
+import { getCorrectDate } from "../../../components/Calendar/calendarHelper";

-import {getCorrectDate} from '../../../components/Calendar/calendarHelper'
-
-import category from "../../../images/category.png";
-import watch from "../../../images/watch.png";
+import category from "../../../images/category.svg";
+import watch from "../../../images/watch.svg";
 import file from "../../../images/fileModal.svg";
 import arrow from "../../../images/arrowStart.png";
 import link from "../../../images/link.svg";
@ -24,7 +25,6 @@ import fullScreen from "../../../images/inFullScreen.svg";
 import close from "../../../images/closeProjectPersons.svg";

 import "./ModalTicket.scss";
-import {urlForLocal} from "../../../helper";

 export const ModalTiсket = ({
  active,
@ -32,20 +32,24 @@ export const ModalTiсket = ({
  task,
  projectId,
  projectName,
-  projectUsers
+  projectUsers,
 }) => {
  const dispatch = useDispatch();
  const [addSubtask, setAddSubtask] = useState(false);
  const [editOpen, setEditOpen] = useState(false);
-  const [inputsValue, setInputsValue] = useState({title: task.title, description: task.description, comment: ''});
+  const [inputsValue, setInputsValue] = useState({
+    title: task.title,
+    description: task.description,
+    comment: "",
+  });
  const [comments, setComments] = useState([]);
-  const [commentsEditOpen, setCommentsEditOpen] = useState({})
-  const [commentsEditText, setCommentsEditText] = useState({})
-  const [dropListOpen, setDropListOpen] = useState(false)
-  const [dropListMembersOpen, setDropListMembersOpen] = useState(false)
-  const [executor, setExecutor] = useState(task.executor)
-  const [members, setMembers] = useState(task.taskUsers)
-  const [users, setUsers] = useState([])
+  const [commentsEditOpen, setCommentsEditOpen] = useState({});
+  const [commentsEditText, setCommentsEditText] = useState({});
+  const [dropListOpen, setDropListOpen] = useState(false);
+  const [dropListMembersOpen, setDropListMembersOpen] = useState(false);
+  const [executor, setExecutor] = useState(task.executor);
+  const [members, setMembers] = useState(task.taskUsers);
+  const [users, setUsers] = useState([]);

  function deleteTask() {
    apiRequest("/task/update-task", {
@ -66,7 +70,7 @@ export const ModalTiсket = ({
      data: {
        task_id: task.id,
        title: inputsValue.title,
-        description: inputsValue.description
+        description: inputsValue.description,
      },
    }).then((res) => {
      dispatch(setProjectBoardFetch(projectId));
@ -79,39 +83,42 @@ export const ModalTiсket = ({
      data: {
        text: inputsValue.comment,
        entity_type: 2,
-        entity_id: task.id
-      }
+        entity_id: task.id,
+      },
    }).then((res) => {
-      let newComment = res
-      newComment.created_at = new Date()
-      setInputsValue((prevValue) => ({...prevValue, comment: ''}))
-      setComments((prevValue) => ([...prevValue, newComment]))
-      setCommentsEditOpen((prevValue) => ({...prevValue, [res.id]: false}))
-      setCommentsEditText((prevValue) => ({...prevValue, [res.id]: res.text}))
-    })
+      let newComment = res;
+      newComment.created_at = new Date();
+      setInputsValue((prevValue) => ({ ...prevValue, comment: "" }));
+      setComments((prevValue) => [...prevValue, newComment]);
+      setCommentsEditOpen((prevValue) => ({ ...prevValue, [res.id]: false }));
+      setCommentsEditText((prevValue) => ({
+        ...prevValue,
+        [res.id]: res.text,
+      }));
+    });
  }
  function deleteComment(commentId) {
    apiRequest("/comment/update", {
      method: "PUT",
      data: {
        comment_id: commentId,
-        status: 0
-      }
+        status: 0,
+      },
    }).then((res) => {
-      setComments((prevValue) => prevValue.filter((item) => item.id !== commentId))
-    })
+      setComments((prevValue) =>
+        prevValue.filter((item) => item.id !== commentId)
+      );
+    });
  }

  function editComment(commentId) {
-
    apiRequest("/comment/update", {
      method: "PUT",
      data: {
        comment_id: commentId,
-        text: commentsEditText[commentId]
-      }
-    }).then((res) => {
-    })
+        text: commentsEditText[commentId],
+      },
+    }).then((res) => {});
  }

  function taskExecutor(person) {
@ -119,11 +126,11 @@ export const ModalTiсket = ({
      method: "PUT",
      data: {
        task_id: task.id,
-        executor_id: person.user_id
+        executor_id: person.user_id,
      },
    }).then((res) => {
-      setDropListOpen(false)
-      setExecutor(res.executor)
+      setDropListOpen(false);
+      setExecutor(res.executor);
    });
  }

@ -132,10 +139,10 @@ export const ModalTiсket = ({
      method: "PUT",
      data: {
        task_id: task.id,
-        executor_id: 0
+        executor_id: 0,
      },
    }).then((res) => {
-      setExecutor(null)
+      setExecutor(null);
    });
  }

@ -144,11 +151,11 @@ export const ModalTiсket = ({
      method: "POST",
      data: {
        task_id: task.id,
-        user_id: person.user_id
+        user_id: person.user_id,
      },
    }).then((res) => {
-      setDropListMembersOpen(false)
-      setMembers((prevValue) => ([...prevValue, res]))
+      setDropListMembersOpen(false);
+      setMembers((prevValue) => [...prevValue, res]);
    });
  }

@ -157,31 +164,40 @@ export const ModalTiсket = ({
      method: "DELETE",
      data: {
        task_id: task.id,
-        user_id: person.user_id
+        user_id: person.user_id,
      },
    }).then((res) => {
-      setMembers(members.filter((item) => item.user_id !== person.user_id))
+      setMembers(members.filter((item) => item.user_id !== person.user_id));
    });
  }

  useEffect(() => {
-    apiRequest(`/comment/get-by-entity?entity_type=2&entity_id=${task.id}`).then((res) => {
-      setComments(res)
+    apiRequest(
+      `/comment/get-by-entity?entity_type=2&entity_id=${task.id}`
+    ).then((res) => {
+      setComments(res);
      res.forEach((item) => {
-        setCommentsEditOpen((prevValue) => ({...prevValue, [item.id]: false}))
-        setCommentsEditText((prevValue) => ({...prevValue, [item.id]: item.text}))
-      })
-    })
-  }, [])
+        setCommentsEditOpen((prevValue) => ({
+          ...prevValue,
+          [item.id]: false,
+        }));
+        setCommentsEditText((prevValue) => ({
+          ...prevValue,
+          [item.id]: item.text,
+        }));
+      });
+    });
+  }, []);

  useEffect(() => {
-    let ids = members.map((user) => user.user_id)
-    setUsers(projectUsers.reduce((acc, cur) => {
-      if (!ids.includes(cur.user_id)) acc.push(cur)
-      return acc
-    }, []))
-  }, [members])
-
+    let ids = members.map((user) => user.user_id);
+    setUsers(
+      projectUsers.reduce((acc, cur) => {
+        if (!ids.includes(cur.user_id)) acc.push(cur);
+        return acc;
+      }, [])
+    );
+  }, [members]);

  return (
    <div
@ -206,13 +222,33 @@ export const ModalTiсket = ({

          <div className="content__task">
            <span>Задача</span>
-            {editOpen ? <input value={inputsValue.title} onChange={(e) => {
-              setInputsValue((prevValue) => ({...prevValue, title: e.target.value}))
-            }} /> :<h5>{inputsValue.title}</h5>}
+            {editOpen ? (
+              <input
+                value={inputsValue.title}
+                onChange={(e) => {
+                  setInputsValue((prevValue) => ({
+                    ...prevValue,
+                    title: e.target.value,
+                  }));
+                }}
+              />
+            ) : (
+              <h5>{inputsValue.title}</h5>
+            )}
            <div className="content__description">
-              {editOpen ? <input value={inputsValue.description} onChange={(e) => {
-                setInputsValue((prevValue) => ({...prevValue, description: e.target.value}))
-              }}/> :<p>{inputsValue.description}</p>}
+              {editOpen ? (
+                <input
+                  value={inputsValue.description}
+                  onChange={(e) => {
+                    setInputsValue((prevValue) => ({
+                      ...prevValue,
+                      description: e.target.value,
+                    }));
+                  }}
+                />
+              ) : (
+                <p>{inputsValue.description}</p>
+              )}
              {/*<img src={taskImg} className="image-task"></img>*/}
            </div>
            <div className="content__communication">
@ -237,97 +273,163 @@ export const ModalTiсket = ({
              </p>
            </div>
            <div className="content__input">
-              <input placeholder="Оставить комментарий" value={inputsValue.comment} onChange={(e) => {
-                setInputsValue((prevValue) => ({...prevValue, comment: e.target.value}))
-              }} />
+              <input
+                placeholder="Оставить комментарий"
+                value={inputsValue.comment}
+                onChange={(e) => {
+                  setInputsValue((prevValue) => ({
+                    ...prevValue,
+                    comment: e.target.value,
+                  }));
+                }}
+              />
              <img src={send} onClick={createComment}></img>
            </div>
-            <div className='comments__list'>
+            <div className="comments__list">
              {comments.map((comment) => {
-                return <div className='comments__list__item' key={comment.id}>
-                  <div className='comments__list__item__info'>
-                    <span>{getCorrectDate(comment.created_at)}</span>
-                    <div className={commentsEditOpen[comment.id] ? 'edit edit__open' : 'edit'} >
-                      <img src={edit} alt='edit' onClick={() => {
-                        if (commentsEditOpen[comment.id]) {
-                          editComment(comment.id)
+                return (
+                  <div className="comments__list__item" key={comment.id}>
+                    <div className="comments__list__item__info">
+                      <span>{getCorrectDate(comment.created_at)}</span>
+                      <div
+                        className={
+                          commentsEditOpen[comment.id]
+                            ? "edit edit__open"
+                            : "edit"
                        }
-                        setCommentsEditOpen((prevValue) => ({...prevValue, [comment.id]: !prevValue[comment.id]}))
-                      }} />
+                      >
+                        <img
+                          src={edit}
+                          alt="edit"
+                          onClick={() => {
+                            if (commentsEditOpen[comment.id]) {
+                              editComment(comment.id);
+                            }
+                            setCommentsEditOpen((prevValue) => ({
+                              ...prevValue,
+                              [comment.id]: !prevValue[comment.id],
+                            }));
+                          }}
+                        />
+                      </div>
+                      <img
+                        src={del}
+                        alt="delete"
+                        onClick={() => deleteComment(comment.id)}
+                      />
                    </div>
-                    <img src={del} alt='delete' onClick={() => deleteComment(comment.id)} />
+                    {commentsEditOpen[comment.id] ? (
+                      <input
+                        value={commentsEditText[comment.id]}
+                        onChange={(e) => {
+                          setCommentsEditText((prevValue) => ({
+                            ...prevValue,
+                            [comment.id]: e.target.value,
+                          }));
+                        }}
+                      />
+                    ) : (
+                      <p>{commentsEditText[comment.id]}</p>
+                    )}
                  </div>
-                  {commentsEditOpen[comment.id] ? <input value={commentsEditText[comment.id]} onChange={(e) =>  {
-                    setCommentsEditText((prevValue) => ({...prevValue, [comment.id]: e.target.value}))
-                  }} /> : <p>{commentsEditText[comment.id]}</p>}
-                </div>
-              })
-
-              }
+                );
+              })}
            </div>
          </div>
        </div>
        <div className="workers">
          <div className="workers_box task__info">
            <span className="exit" onClick={() => setActive(false)}></span>
-            <span className='nameProject'>{task.title}</span>
+            <span className="nameProject">{task.title}</span>
            <p className="workers__creator">Создатель : {task.user?.fio}</p>

-            {executor ?
-              <div className='executor'>
+            {executor ? (
+              <div className="executor">
                <p>Исполнитель: {executor.fio}</p>
-                <img src={urlForLocal(executor.avatar)} alt='avatar' />
-                <img src={close} className='delete' onClick={() => deleteTaskExecutor()} />
-              </div> :
+                <img src={urlForLocal(executor.avatar)} alt="avatar" />
+                <img
+                  src={close}
+                  className="delete"
+                  onClick={() => deleteTaskExecutor()}
+                />
+              </div>
+            ) : (
              <div className="add-worker moreItems ">
                <button onClick={() => setDropListOpen(true)}>+</button>
                <span>Добавить исполнителя</span>
-                {dropListOpen &&
-                  <div className='dropdownList'>
-                    <img src={close} className='dropdownList__close' onClick={() => setDropListOpen(false)} />
+                {dropListOpen && (
+                  <div className="dropdownList">
+                    <img
+                      src={close}
+                      className="dropdownList__close"
+                      onClick={() => setDropListOpen(false)}
+                    />
                    {projectUsers.map((person) => {
-                      return <div className='dropdownList__person' key={person.user_id} onClick={() => taskExecutor(person)}>
-                        <span>{person.user.fio}</span>
-                        <img src={urlForLocal(person.user.avatar)} />
-                      </div>
-                    })
-                    }
+                      return (
+                        <div
+                          className="dropdownList__person"
+                          key={person.user_id}
+                          onClick={() => taskExecutor(person)}
+                        >
+                          <span>{person.user.fio}</span>
+                          <img src={urlForLocal(person.user.avatar)} />
+                        </div>
+                      );
+                    })}
                  </div>
-                }
+                )}
              </div>
-            }
+            )}

-            {Boolean(members.length) &&
-            <div className='members'>
-              <p>Участники:</p>
-                <div className='members__list'>
+            {Boolean(members.length) && (
+              <div className="members">
+                <p>Участники:</p>
+                <div className="members__list">
                  {members.map((member) => {
-                    return <div className='worker' key={member.user_id}>
-                      <p>{member.fio}</p>
-                      <img src={urlForLocal(member.avatar)} />
-                      <img src={close} className='delete' onClick={() => deleteMember(member)} />
-                    </div>
-                  })
-                  }
+                    return (
+                      <div className="worker" key={member.user_id}>
+                        <p>{member.fio}</p>
+                        <img src={urlForLocal(member.avatar)} />
+                        <img
+                          src={close}
+                          className="delete"
+                          onClick={() => deleteMember(member)}
+                        />
+                      </div>
+                    );
+                  })}
                </div>
-            </div>
-            }
+              </div>
+            )}

            <div className="add-worker moreItems">
              <button onClick={() => setDropListMembersOpen(true)}>+</button>
              <span>Добавить участников</span>
-              {dropListMembersOpen &&
-              <div className='dropdownList'>
-                <img src={close} className='dropdownList__close' onClick={() => setDropListMembersOpen(false)} />
-                {users.length ? users.map((person) => {
-                  return <div className='dropdownList__person' key={person.user_id} onClick={() => addMember(person)}>
-                    <span>{person.user.fio}</span>
-                    <img src={urlForLocal(person.user.avatar)} />
-                  </div>
-                }) : <p className='noUsers'>Нет пользователей</p>
-                }
-              </div>
-              }
+              {dropListMembersOpen && (
+                <div className="dropdownList">
+                  <img
+                    src={close}
+                    className="dropdownList__close"
+                    onClick={() => setDropListMembersOpen(false)}
+                  />
+                  {users.length ? (
+                    users.map((person) => {
+                      return (
+                        <div
+                          className="dropdownList__person"
+                          key={person.user_id}
+                          onClick={() => addMember(person)}
+                        >
+                          <span>{person.user.fio}</span>
+                          <img src={urlForLocal(person.user.avatar)} />
+                        </div>
+                      );
+                    })
+                  ) : (
+                    <p className="noUsers">Нет пользователей</p>
+                  )}
+                </div>
+              )}
            </div>
          </div>

@ -344,16 +446,19 @@ export const ModalTiсket = ({
          </div>

          <div className="workers_box-bottom">
-            <div className={editOpen ? 'edit' : ''} onClick={() => {
-              if(editOpen) {
-                setEditOpen(!editOpen)
-                editTask()
-              } else {
-                setEditOpen(!editOpen)
-              }
-            }}>
+            <div
+              className={editOpen ? "edit" : ""}
+              onClick={() => {
+                if (editOpen) {
+                  setEditOpen(!editOpen);
+                  editTask();
+                } else {
+                  setEditOpen(!editOpen);
+                }
+              }}
+            >
              <img src={edit}></img>
-              <p>{editOpen ? 'сохранить' : 'редактировать'}</p>
+              <p>{editOpen ? "сохранить" : "редактировать"}</p>
            </div>
            <div>
              <img src={link}></img>
--- a/src/components/UI/TicketFullScreen/TicketFullScreen.jsx
+++ b/src/components/UI/TicketFullScreen/TicketFullScreen.jsx
@ -6,23 +6,24 @@ import { Footer } from "../../Footer/Footer";
 import { Link, useParams, useNavigate } from "react-router-dom";
 import TrackerModal from "../TrackerModal/TrackerModal";
 import { Navigation } from "../../Navigation/Navigation";
-import {Loader} from "../../Loader/Loader";
+import { Loader } from "../../Loader/Loader";

-import {useDispatch, useSelector} from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 import {
  deletePersonOnProject,
  modalToggle,
  setProjectBoardFetch,
  setToggleTab,
  getProjectBoard,
-  getBoarderLoader
+  getBoarderLoader,
 } from "../../../redux/projectsTrackerSlice";
 import { apiRequest } from "../../../api/request";
+import { urlForLocal } from "../../../helper";
+import { getCorrectDate } from "../../Calendar/calendarHelper";

 import project from "../../../images/trackerProject.svg";
-import watch from "../../../images/watch.png";
+import watch from "../../../images/watch.svg";
 import file from "../../../images/fileModal.svg";
-import task from "../../../images/tasksMock.png";
 import send from "../../../images/send.svg";
 import arrow2 from "../../../images/arrowStart.png";
 import plus from "../../../images/plus.svg";
@ -34,11 +35,9 @@ import link from "../../../images/link.svg";
 import archive2 from "../../../images/archive.svg";
 import del from "../../../images/delete.svg";
 import edit from "../../../images/edit.svg";
+import close from "../../../images/closeProjectPersons.svg";

 import "./ticketFullScreen.scss";
-import close from "../../../images/closeProjectPersons.svg";
-import {urlForLocal} from "../../../helper";
-import {getCorrectDate} from "../../Calendar/calendarHelper";

 export const TicketFullScreen = ({}) => {
  const [modalAddWorker, setModalAddWorker] = useState(false);
@ -52,23 +51,35 @@ export const TicketFullScreen = ({}) => {
  const [inputsValue, setInputsValue] = useState({});
  const [loader, setLoader] = useState(true);
  const [comments, setComments] = useState([]);
-  const [commentsEditOpen, setCommentsEditOpen] = useState({})
-  const [commentsEditText, setCommentsEditText] = useState({})
-  const [personListOpen, setPersonListOpen] = useState(false)
+  const [commentsEditOpen, setCommentsEditOpen] = useState({});
+  const [commentsEditText, setCommentsEditText] = useState({});
+  const [personListOpen, setPersonListOpen] = useState(false);

  useEffect(() => {
    apiRequest(`/task/get-task?task_id=${ticketId.id}`).then((taskInfo) => {
      setTaskInfo(taskInfo);
-      setInputsValue({title: taskInfo.title, description: taskInfo.description, comment: ''})
-      apiRequest(`/comment/get-by-entity?entity_type=2&entity_id=${taskInfo.id}`).then((res) => {
-        setComments(res)
+      setInputsValue({
+        title: taskInfo.title,
+        description: taskInfo.description,
+        comment: "",
+      });
+      apiRequest(
+        `/comment/get-by-entity?entity_type=2&entity_id=${taskInfo.id}`
+      ).then((res) => {
+        setComments(res);
        res.forEach((item) => {
-          setCommentsEditOpen((prevValue) => ({...prevValue, [item.id]: false}))
-          setCommentsEditText((prevValue) => ({...prevValue, [item.id]: item.text}))
-        })
-      })
+          setCommentsEditOpen((prevValue) => ({
+            ...prevValue,
+            [item.id]: false,
+          }));
+          setCommentsEditText((prevValue) => ({
+            ...prevValue,
+            [item.id]: item.text,
+          }));
+        });
+      });
      dispatch(setProjectBoardFetch(taskInfo.project_id));
-      setLoader(boardLoader)
+      setLoader(boardLoader);
    });
  }, []);

@ -90,10 +101,9 @@ export const TicketFullScreen = ({}) => {
      data: {
        task_id: taskInfo.id,
        title: inputsValue.title,
-        description: inputsValue.description
+        description: inputsValue.description,
      },
-    }).then((res) => {
-    });
+    }).then((res) => {});
  }

  function createComment() {
@ -102,16 +112,19 @@ export const TicketFullScreen = ({}) => {
      data: {
        text: inputsValue.comment,
        entity_type: 2,
-        entity_id: taskInfo.id
-      }
+        entity_id: taskInfo.id,
+      },
    }).then((res) => {
-      let newComment = res
-      newComment.created_at = new Date()
-      setInputsValue((prevValue) => ({...prevValue, comment: ''}))
-      setComments((prevValue) => ([...prevValue, newComment]))
-      setCommentsEditOpen((prevValue) => ({...prevValue, [res.id]: false}))
-      setCommentsEditText((prevValue) => ({...prevValue, [res.id]: res.text}))
-    })
+      let newComment = res;
+      newComment.created_at = new Date();
+      setInputsValue((prevValue) => ({ ...prevValue, comment: "" }));
+      setComments((prevValue) => [...prevValue, newComment]);
+      setCommentsEditOpen((prevValue) => ({ ...prevValue, [res.id]: false }));
+      setCommentsEditText((prevValue) => ({
+        ...prevValue,
+        [res.id]: res.text,
+      }));
+    });
  }

  function deleteComment(commentId) {
@ -119,11 +132,13 @@ export const TicketFullScreen = ({}) => {
      method: "PUT",
      data: {
        comment_id: commentId,
-        status: 0
-      }
+        status: 0,
+      },
    }).then((res) => {
-      setComments((prevValue) => prevValue.filter((item) => item.id !== commentId))
-    })
+      setComments((prevValue) =>
+        prevValue.filter((item) => item.id !== commentId)
+      );
+    });
  }

  function editComment(commentId) {
@ -131,10 +146,9 @@ export const TicketFullScreen = ({}) => {
      method: "PUT",
      data: {
        comment_id: commentId,
-        text: commentsEditText[commentId]
-      }
-    }).then((res) => {
-    })
+        text: commentsEditText[commentId],
+      },
+    }).then((res) => {});
  }

  function deletePerson(userId) {
@ -142,10 +156,10 @@ export const TicketFullScreen = ({}) => {
      method: "DELETE",
      data: {
        project_id: projectBoard.id,
-        user_id: userId
+        user_id: userId,
      },
    }).then((res) => {
-      dispatch(deletePersonOnProject(userId))
+      dispatch(deletePersonOnProject(userId));
    });
  }

@ -195,223 +209,308 @@ export const TicketFullScreen = ({}) => {
            <p>Архив</p>
          </Link>
        </div>
-        {loader ? <Loader /> :
-        <>
-        <div className="tracker__tabs__content content-tabs">
-          <div className="tasks__head">
-            <div className="tasks__head__wrapper">
-              <h4>Проект : {projectBoard.name}</h4>
+        {loader ? (
+          <Loader />
+        ) : (
+          <>
+            <div className="tracker__tabs__content content-tabs">
+              <div className="tasks__head">
+                <div className="tasks__head__wrapper">
+                  <h4>Проект : {projectBoard.name}</h4>

-              <TrackerModal
-                active={modalAddWorker}
-                setActive={setModalAddWorker}
-              ></TrackerModal>
+                  <TrackerModal
+                    active={modalAddWorker}
+                    setActive={setModalAddWorker}
+                  ></TrackerModal>

-              <div className="tasks__head__persons">
-                {/*<img src={avatarTest} alt="avatar" />*/}
-                {/*<img src={avatarTest} alt="avatar" />*/}
-                <span className="countPersons">{projectBoard.projectUsers?.length}</span>
-                <span
-                  className="addPerson"
-                  onClick={() => {
-                    setPersonListOpen(true)
-                  }}
-                >
-                  +
-                </span>
-                <p>добавить участника</p>
-                {personListOpen &&
-                <div className='persons__list'>
-                  <img className='persons__list__close' src={close} alt='close' onClick={() => setPersonListOpen(false)} />
-                  <div className='persons__list__count'><span>{projectBoard.projectUsers?.length}</span>участник</div>
-                  <div className='persons__list__info'>В проекте - <span>“{projectBoard.name}”</span></div>
-                  <div className='persons__list__items'>
-                    {projectBoard.projectUsers?.map((person) => {
-                      return <div className='persons__list__item' key={person.user_id}>
-                        <img className='avatar' src={urlForLocal(person.user.avatar)} alt='avatar' />
-                        <span>{person.user.fio}</span>
-                        <img className='delete' src={close} alt='delete' onClick={() => deletePerson(person.user_id)}/>
+                  <div className="tasks__head__persons">
+                    {/*<img src={avatarTest} alt="avatar" />*/}
+                    {/*<img src={avatarTest} alt="avatar" />*/}
+                    <span className="countPersons">
+                      {projectBoard.projectUsers?.length}
+                    </span>
+                    <span
+                      className="addPerson"
+                      onClick={() => {
+                        setPersonListOpen(true);
+                      }}
+                    >
+                      +
+                    </span>
+                    <p>добавить участника</p>
+                    {personListOpen && (
+                      <div className="persons__list">
+                        <img
+                          className="persons__list__close"
+                          src={close}
+                          alt="close"
+                          onClick={() => setPersonListOpen(false)}
+                        />
+                        <div className="persons__list__count">
+                          <span>{projectBoard.projectUsers?.length}</span>
+                          участник
+                        </div>
+                        <div className="persons__list__info">
+                          В проекте - <span>“{projectBoard.name}”</span>
+                        </div>
+                        <div className="persons__list__items">
+                          {projectBoard.projectUsers?.map((person) => {
+                            return (
+                              <div
+                                className="persons__list__item"
+                                key={person.user_id}
+                              >
+                                <img
+                                  className="avatar"
+                                  src={urlForLocal(person.user.avatar)}
+                                  alt="avatar"
+                                />
+                                <span>{person.user.fio}</span>
+                                <img
+                                  className="delete"
+                                  src={close}
+                                  alt="delete"
+                                  onClick={() => deletePerson(person.user_id)}
+                                />
+                              </div>
+                            );
+                          })}
+                        </div>
+                        <div
+                          className="persons__list__add"
+                          onClick={() => {
+                            dispatch(modalToggle("addWorker"));
+                            setModalAddWorker(true);
+                            setPersonListOpen(false);
+                          }}
+                        >
+                          <span className="addPerson">+</span>
+                          <p>Добавить участников</p>
+                        </div>
                      </div>
-                    })
-                    }
+                    )}
                  </div>
-                  <div className='persons__list__add'
-                       onClick={() => {
-                         dispatch(modalToggle("addWorker"));
-                         setModalAddWorker(true);
-                         setPersonListOpen(false)
-                       }}
-                  >
-                    <span className='addPerson'>+</span>
-                    <p>Добавить участников</p>
+                  <div className="tasks__head__select">
+                    <span>Учавствую</span>
+                    <img src={selectArrow} alt="arrow" />
                  </div>
-                </div>
-                }
-              </div>
-              <div className="tasks__head__select">
-                <span>Учавствую</span>
-                <img src={selectArrow} alt="arrow" />
-              </div>
-              <div className="tasks__head__select">
-                <span>Мои</span>
-                <img src={selectArrow} alt="arrow" />
-              </div>
-              <Link to={`/profile/tracker`} className="link">
-                <div className="tasks__head__back">
-                  <p>Вернуться на проекты</p>
-                  <img src={arrow} alt="arrow" />
-                </div>
-              </Link>
-            </div>
-          </div>
-        </div>
-        <div className="modal-tiket__content ticket">
-          <div className="content ticket-whith">
-            <div className="content__task">
-              <span>Задача</span>
-              {editOpen ? <input value={inputsValue.title} onChange={(e) => {
-                setInputsValue((prevValue) => ({...prevValue, title: e.target.value}))
-              }} /> :<h5>{inputsValue.title}</h5>}
-              <div className="content__description">
-                {editOpen ? <input value={inputsValue.description} onChange={(e) => {
-                  setInputsValue((prevValue) => ({...prevValue, description: e.target.value}))
-                }}/> :<p>{inputsValue.description}</p>}
-                {/*<img src={task} className="image-task"></img>*/}
-              </div>
-              <div className="content__communication">
-                <p className="tasks">
-                  <button
-                    onClick={() => {
-                      dispatch(modalToggle("addSubtask"));
-                      setModalAddWorker(true);
-                    }}
-                  >
-                    <img src={plus}></img>
-                    Добавить под задачу
-                  </button>
-                </p>
-                <p className="file">
-                  <button>
-                    <img src={file}></img>
-                    Загрузить файл
-                  </button>
-                  <span>{0}</span>
-                  Файлов
-                </p>
-              </div>
-              <div className="content__input">
-                <input placeholder="Оставить комментарий" value={inputsValue.comment} onChange={(e) => {
-                  setInputsValue((prevValue) => ({...prevValue, comment: e.target.value}))
-                }} />
-                <img src={send} onClick={createComment}></img>
-              </div>
-              <div className='comments__list'>
-                {comments.map((comment) => {
-                  return <div className='comments__list__item' key={comment.id}>
-                    <div className='comments__list__item__info'>
-                      <span>{getCorrectDate(comment.created_at)}</span>
-                      <div className={commentsEditOpen[comment.id] ? 'edit edit__open' : 'edit'} >
-                        <img src={edit} alt='edit' onClick={() => {
-                          if (commentsEditOpen[comment.id]) {
-                            editComment(comment.id)
-                          }
-                          setCommentsEditOpen((prevValue) => ({...prevValue, [comment.id]: !prevValue[comment.id]}))
-                        }} />
-                      </div>
-                      <img src={del} alt='delete' onClick={() => deleteComment(comment.id)} />
+                  <div className="tasks__head__select">
+                    <span>Мои</span>
+                    <img src={selectArrow} alt="arrow" />
+                  </div>
+                  <Link to={`/profile/tracker`} className="link">
+                    <div className="tasks__head__back">
+                      <p>Вернуться на проекты</p>
+                      <img src={arrow} alt="arrow" />
                    </div>
-                    {commentsEditOpen[comment.id] ? <input value={commentsEditText[comment.id]} onChange={(e) =>  {
-                      setCommentsEditText((prevValue) => ({...prevValue, [comment.id]: e.target.value}))
-                    }} /> : <p>{commentsEditText[comment.id]}</p>}
+                  </Link>
+                </div>
+              </div>
+            </div>
+            <div className="modal-tiket__content ticket">
+              <div className="content ticket-whith">
+                <div className="content__task">
+                  <span>Задача</span>
+                  {editOpen ? (
+                    <input
+                      value={inputsValue.title}
+                      onChange={(e) => {
+                        setInputsValue((prevValue) => ({
+                          ...prevValue,
+                          title: e.target.value,
+                        }));
+                      }}
+                    />
+                  ) : (
+                    <h5>{inputsValue.title}</h5>
+                  )}
+                  <div className="content__description">
+                    {editOpen ? (
+                      <input
+                        value={inputsValue.description}
+                        onChange={(e) => {
+                          setInputsValue((prevValue) => ({
+                            ...prevValue,
+                            description: e.target.value,
+                          }));
+                        }}
+                      />
+                    ) : (
+                      <p>{inputsValue.description}</p>
+                    )}
+                    {/*<img src={task} className="image-task"></img>*/}
                  </div>
-                })
-
-                }
-              </div>
-            </div>
-          </div>
-          <div className="workers">
-            <div className="workers_box">
-              <p className="workers__creator">
-                Создатель : <span>{taskInfo.user?.fio}</span>
-              </p>
-              <div>
-                {Boolean(taskInfo.taskUsers?.length) &&
-                  taskInfo.taskUsers.map((worker, index) => {
-                    return (
-                      <div className="worker" key={index}>
-                        <img src={worker.avatar}></img>
-                        <p>{worker.name}</p>
-                      </div>
-                    );
-                  })}
+                  <div className="content__communication">
+                    <p className="tasks">
+                      <button
+                        onClick={() => {
+                          dispatch(modalToggle("addSubtask"));
+                          setModalAddWorker(true);
+                        }}
+                      >
+                        <img src={plus}></img>
+                        Добавить под задачу
+                      </button>
+                    </p>
+                    <p className="file">
+                      <button>
+                        <img src={file}></img>
+                        Загрузить файл
+                      </button>
+                      <span>{0}</span>
+                      Файлов
+                    </p>
+                  </div>
+                  <div className="content__input">
+                    <input
+                      placeholder="Оставить комментарий"
+                      value={inputsValue.comment}
+                      onChange={(e) => {
+                        setInputsValue((prevValue) => ({
+                          ...prevValue,
+                          comment: e.target.value,
+                        }));
+                      }}
+                    />
+                    <img src={send} onClick={createComment}></img>
+                  </div>
+                  <div className="comments__list">
+                    {comments.map((comment) => {
+                      return (
+                        <div className="comments__list__item" key={comment.id}>
+                          <div className="comments__list__item__info">
+                            <span>{getCorrectDate(comment.created_at)}</span>
+                            <div
+                              className={
+                                commentsEditOpen[comment.id]
+                                  ? "edit edit__open"
+                                  : "edit"
+                              }
+                            >
+                              <img
+                                src={edit}
+                                alt="edit"
+                                onClick={() => {
+                                  if (commentsEditOpen[comment.id]) {
+                                    editComment(comment.id);
+                                  }
+                                  setCommentsEditOpen((prevValue) => ({
+                                    ...prevValue,
+                                    [comment.id]: !prevValue[comment.id],
+                                  }));
+                                }}
+                              />
+                            </div>
+                            <img
+                              src={del}
+                              alt="delete"
+                              onClick={() => deleteComment(comment.id)}
+                            />
+                          </div>
+                          {commentsEditOpen[comment.id] ? (
+                            <input
+                              value={commentsEditText[comment.id]}
+                              onChange={(e) => {
+                                setCommentsEditText((prevValue) => ({
+                                  ...prevValue,
+                                  [comment.id]: e.target.value,
+                                }));
+                              }}
+                            />
+                          ) : (
+                            <p>{commentsEditText[comment.id]}</p>
+                          )}
+                        </div>
+                      );
+                    })}
+                  </div>
+                </div>
              </div>
+              <div className="workers">
+                <div className="workers_box">
+                  <p className="workers__creator">
+                    Создатель : <span>{taskInfo.user?.fio}</span>
+                  </p>
+                  <div>
+                    {Boolean(taskInfo.taskUsers?.length) &&
+                      taskInfo.taskUsers.map((worker, index) => {
+                        return (
+                          <div className="worker" key={index}>
+                            <img src={worker.avatar}></img>
+                            <p>{worker.name}</p>
+                          </div>
+                        );
+                      })}
+                  </div>

-              <div className="add-worker moreItems">
-                <button
+                  <div className="add-worker moreItems">
+                    <button
+                      onClick={() => {
+                        dispatch(modalToggle("addWorker"));
+                        setModalAddWorker(true);
+                      }}
+                    >
+                      +
+                    </button>
+                    <span>Добавить исполнителя</span>
+                  </div>
+                  <div className="add-worker moreItems">
+                    <button
+                      onClick={() => {
+                        dispatch(modalToggle("addWorker"));
+                        setModalAddWorker(true);
+                      }}
+                    >
+                      +
+                    </button>
+                    <span>Добавить участников</span>
+                  </div>
+                </div>
+
+                <div className="workers_box-middle">
+                  <div className="time">
+                    <img src={watch}></img>
+                    <span>Длительность : </span>
+                    <p>{"0:00:00"}</p>
+                  </div>
+
+                  <button className="start">
+                    Начать делать <img src={arrow2}></img>
+                  </button>
+                </div>
+
+                <div className="workers_box-bottom">
+                  <div
+                    className={editOpen ? "edit" : ""}
                    onClick={() => {
-                      dispatch(modalToggle("addWorker"));
-                      setModalAddWorker(true);
+                      if (editOpen) {
+                        setEditOpen(!editOpen);
+                        editTask();
+                      } else {
+                        setEditOpen(!editOpen);
+                      }
                    }}
-                >
-                  +
-                </button>
-                <span>Добавить исполнителя</span>
-              </div>
-              <div className="add-worker moreItems">
-                <button
-                  onClick={() => {
-                    dispatch(modalToggle("addWorker"));
-                    setModalAddWorker(true);
-                  }}
-                >
-                  +
-                </button>
-                <span>Добавить участников</span>
+                  >
+                    <img src={edit}></img>
+                    <p>{editOpen ? "сохранить" : "редактировать"}</p>
+                  </div>
+                  <div>
+                    <img src={link}></img>
+                    <p>ссылка на проект</p>
+                  </div>
+                  <div>
+                    <img src={archive2}></img>
+                    <p>в архив</p>
+                  </div>
+                  <div onClick={deleteTask}>
+                    <img src={del}></img>
+                    <p>удалить</p>
+                  </div>
+                </div>
              </div>
            </div>
-
-            <div className="workers_box-middle">
-              <div className="time">
-                <img src={watch}></img>
-                <span>Длительность : </span>
-                <p>{"0:00:00"}</p>
-              </div>
-
-              <button className="start">
-                Начать делать <img src={arrow2}></img>
-              </button>
-            </div>
-
-            <div className="workers_box-bottom">
-              <div className={editOpen ? 'edit' : ''} onClick={() => {
-                if(editOpen) {
-                  setEditOpen(!editOpen)
-                  editTask()
-                } else {
-                  setEditOpen(!editOpen)
-                }
-              }}>
-                <img src={edit}></img>
-                <p>{editOpen ? 'сохранить' : 'редактировать'}</p>
-              </div>
-              <div>
-                <img src={link}></img>
-                <p>ссылка на проект</p>
-              </div>
-              <div>
-                <img src={archive2}></img>
-                <p>в архив</p>
-              </div>
-              <div onClick={deleteTask}>
-                <img src={del}></img>
-                <p>удалить</p>
-              </div>
-            </div>
-          </div>
-        </div>
-        </>
-        }
+          </>
+        )}
      </div>
      <Footer />
    </section>
--- a/src/components/UI/TrackerModal/TrackerModal.jsx
+++ b/src/components/UI/TrackerModal/TrackerModal.jsx
@ -1,8 +1,8 @@
-import React, {useEffect, useState} from "react";
+import React, { useEffect, useState } from "react";

 import { useDispatch, useSelector } from "react-redux";
 import { apiRequest } from "../../../api/request";
-import { urlForLocal } from '../../../helper'
+import { urlForLocal } from "../../../helper";
 import {
  setColumnName,
  getProjectBoard,
@ -13,10 +13,10 @@ import {
  editColumnName,
  getColumnName,
  getColumnId,
-  addPersonToProject
+  addPersonToProject,
 } from "../../../redux/projectsTrackerSlice";

-import arrowDown from "../../../images/selectArrow.png"
+import arrowDown from "../../../images/selectArrow.png";

 import "./trackerModal.scss";

@ -27,12 +27,12 @@ export const TrackerModal = ({
  defautlInput,
  titleProject,
  projectId,
-  priorityTask
+  priorityTask,
 }) => {
  const dispatch = useDispatch();
  const projectBoard = useSelector(getProjectBoard);
  const columnName = useSelector(getColumnName);
-  const columnId = useSelector(getColumnId)
+  const columnId = useSelector(getColumnId);

  const modalType = useSelector(getValueModalType);
  const [projectName, setProjectName] = useState(defautlInput);
@ -40,9 +40,9 @@ export const TrackerModal = ({
  const [nameProject, setNameProject] = useState("");
  const [valueTiket, setValueTiket] = useState("");
  const [descriptionTicket, setDescriptionTicket] = useState("");
-  const [workers, setWorkers] = useState([])
-  const [selectWorkersOpen, setSelectWorkersOpen] = useState(false)
-  const [selectedWorker, setSelectedWorker] = useState(null)
+  const [workers, setWorkers] = useState([]);
+  const [selectWorkersOpen, setSelectWorkersOpen] = useState(false);
+  const [selectedWorker, setSelectedWorker] = useState(null);

  function createTab() {
    if (!valueColumn) {
@ -76,7 +76,7 @@ export const TrackerModal = ({
        status: 1,
        user_id: localStorage.getItem("id"),
        column_id: selectedTab,
-        priority: priorityTask
+        priority: priorityTask,
      },
    }).then((res) => {
      dispatch(setProjectBoardFetch(projectBoard.id));
@ -105,12 +105,12 @@ export const TrackerModal = ({
      method: "PUT",
      data: {
        column_id: columnId,
-        title: columnName
-      }
+        title: columnName,
+      },
    }).then((res) => {
      setActive(false);
-      dispatch(editColumnName({id: columnId, title: columnName}))
-    })
+      dispatch(editColumnName({ id: columnId, title: columnName }));
+    });
  }

  function createProject() {
@ -138,34 +138,37 @@ export const TrackerModal = ({
      method: "POST",
      data: {
        user_id: selectedWorker.user_id,
-        project_id: projectBoard.id
-      }
+        project_id: projectBoard.id,
+      },
    }).then((el) => {
-      dispatch(addPersonToProject(el))
+      dispatch(addPersonToProject(el));
      setActive(false);
-      setSelectedWorker('')
-      setSelectWorkersOpen(false)
-    })
+      setSelectedWorker("");
+      setSelectWorkersOpen(false);
+    });
  }

  useEffect(() => {
-    modalType === "addWorker" ? apiRequest('/project/my-employee').then((el) => {
-      let persons = el.managerEmployees
-      let ids = projectBoard.projectUsers.map((user) => user.user_id)
-      setWorkers(persons.reduce((acc, cur) => {
-        if (!ids.includes(cur.user_id)) acc.push(cur)
-        return acc
-      }, []))
-    }) : ''
-  }, [active])
-
+    modalType === "addWorker"
+      ? apiRequest("/project/my-employee").then((el) => {
+          let persons = el.managerEmployees;
+          let ids = projectBoard.projectUsers.map((user) => user.user_id);
+          setWorkers(
+            persons.reduce((acc, cur) => {
+              if (!ids.includes(cur.user_id)) acc.push(cur);
+              return acc;
+            }, [])
+          );
+        })
+      : "";
+  }, [active]);

  return (
    <div
      className={active ? "modal-add active" : "modal-add"}
      onClick={() => {
-        setActive(false)
-        setSelectWorkersOpen(false)
+        setActive(false);
+        setSelectWorkersOpen(false);
      }}
    >
      <div className="modal-add__content" onClick={(e) => e.stopPropagation()}>
@ -180,35 +183,49 @@ export const TrackerModal = ({
              {/*    onChange={(e) => setEmailWorker(e.target.value)}*/}
              {/*  />*/}
              {/*</div>*/}
-              <div className={selectWorkersOpen ? 'select__worker open' : 'select__worker'} onClick={() => setSelectWorkersOpen(!selectWorkersOpen)}>
-                <p>{selectedWorker ? selectedWorker.employee.fio : 'Выберите пользователя'}</p>
-                <img className='arrow' src={arrowDown} alt='arrow' />
-                {Boolean(selectWorkersOpen) &&
-                  <div className='select__worker__dropDown'>
-                    {Boolean(workers.length) ?
-                      workers.map((worker) => {
-                      if (worker === selectedWorker) {
-                        return
-                      }
-                      return <div className='worker' key={worker.id} onClick={() =>
-                        {
-                          setSelectedWorker(worker)
-                        }
-                      }>
-                        <p>{worker.employee.fio}</p>
-                        <img src={urlForLocal(worker.employee.avatar)} alt='avatar'/>
-                      </div>
-                    }) :
-                        <div>Нет пользователей</div>
-                    }
-                  </div>
+              <div
+                className={
+                  selectWorkersOpen ? "select__worker open" : "select__worker"
                }
+                onClick={() => setSelectWorkersOpen(!selectWorkersOpen)}
+              >
+                <p>
+                  {selectedWorker
+                    ? selectedWorker.employee.fio
+                    : "Выберите пользователя"}
+                </p>
+                <img className="arrow" src={arrowDown} alt="arrow" />
+                {Boolean(selectWorkersOpen) && (
+                  <div className="select__worker__dropDown">
+                    {Boolean(workers.length) ? (
+                      workers.map((worker) => {
+                        if (worker === selectedWorker) {
+                          return;
+                        }
+                        return (
+                          <div
+                            className="worker"
+                            key={worker.id}
+                            onClick={() => {
+                              setSelectedWorker(worker);
+                            }}
+                          >
+                            <p>{worker.employee.fio}</p>
+                            <img
+                              src={urlForLocal(worker.employee.avatar)}
+                              alt="avatar"
+                            />
+                          </div>
+                        );
+                      })
+                    ) : (
+                      <div>Нет пользователей</div>
+                    )}
+                  </div>
+                )}
              </div>
            </div>
-            <button
-              className="button-add"
-              onClick={addUserToProject}
-            >
+            <button className="button-add" onClick={addUserToProject}>
              Добавить
            </button>
          </div>