task add users

2023-05-24 01:20:53 +03:00 · 2023-05-24 01:20:53 +03:00 · 60354a3d09
commit 60354a3d09
parent c55376ecb3
5 changed files with 241 additions and 20 deletions
--- a/src/components/UI/ModalTicket/ModalTicket.jsx
+++ b/src/components/UI/ModalTicket/ModalTicket.jsx
@ -13,7 +13,6 @@ import {getCorrectDate} from '../../../components/Calendar/calendarHelper'
 import category from "../../../images/category.png";
 import watch from "../../../images/watch.png";
 import file from "../../../images/fileModal.svg";
-import taskImg from "../../../images/tasksMock.png";
 import arrow from "../../../images/arrowStart.png";
 import link from "../../../images/link.svg";
 import archive from "../../../images/archive.svg";
@ -22,8 +21,10 @@ import edit from "../../../images/edit.svg";
 import send from "../../../images/send.svg";
 import plus from "../../../images/plus.svg";
 import fullScreen from "../../../images/inFullScreen.svg";
+import close from "../../../images/closeProjectPersons.svg";

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

 export const ModalTiсket = ({
  active,
@ -31,6 +32,7 @@ export const ModalTiсket = ({
  task,
  projectId,
  projectName,
+  projectUsers
 }) => {
  const dispatch = useDispatch();
  const [addSubtask, setAddSubtask] = useState(false);
@ -39,6 +41,11 @@ export const ModalTiсket = ({
  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([])

  function deleteTask() {
    apiRequest("/task/update-task", {
@ -107,6 +114,56 @@ export const ModalTiсket = ({
    })
  }

+  function taskExecutor(person) {
+    apiRequest("/task/update-task", {
+      method: "PUT",
+      data: {
+        task_id: task.id,
+        executor_id: person.user_id
+      },
+    }).then((res) => {
+      setDropListOpen(false)
+      setExecutor(res.executor)
+    });
+  }
+
+  function deleteTaskExecutor() {
+    apiRequest("/task/update-task", {
+      method: "PUT",
+      data: {
+        task_id: task.id,
+        executor_id: null
+      },
+    }).then((res) => {
+      setExecutor(null)
+    });
+  }
+
+  function addMember(person) {
+    apiRequest("/task/add-user-to-task", {
+      method: "POST",
+      data: {
+        task_id: task.id,
+        user_id: person.user_id
+      },
+    }).then((res) => {
+      setDropListMembersOpen(false)
+      setMembers((prevValue) => ([...prevValue, res]))
+    });
+  }
+
+  function deleteMember(person) {
+    apiRequest("/task/del-user", {
+      method: "DELETE",
+      data: {
+        task_id: task.id,
+        user_id: person.user_id
+      },
+    }).then((res) => {
+      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)
@ -117,6 +174,15 @@ export const ModalTiсket = ({
    })
  }, [])

+  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])
+
+
  return (
    <div
      className={active ? "modal-tiket active" : "modal-tiket"}
@ -202,25 +268,66 @@ export const ModalTiсket = ({
          </div>
        </div>
        <div className="workers">
-          <div className="workers_box">
+          <div className="workers_box task__info">
            <span className="exit" onClick={() => setActive(false)}></span>
-            <span>{task.title}</span>
+            <span className='nameProject'>{task.title}</span>
            <p className="workers__creator">Создатель : {task.user?.fio}</p>
-            <div>
-              {Boolean(task.taskUsers?.length) &&
-                task.taskUsers.map((worker, index) => {
-                  return (
-                    <div className="worker" key={index}>
-                      <img src={worker.avatar}></img>
-                      <p>{worker.name}</p>
+
+            {executor ?
+              <div className='executor'>
+                <p>Исполнитель: {executor.fio}</p>
+                <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)} />
+                    {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>
-                  );
-                })}
+                    })
+                    }
                  </div>
+                }
+              </div>
+            }
+
+            {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>
+                  })
+                  }
+                </div>
+            </div>
+            }

            <div className="add-worker moreItems">
-              <button>+</button>
+              <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>
+              }
            </div>
          </div>

@ -228,7 +335,7 @@ export const ModalTiсket = ({
            <div className="time">
              <img src={watch}></img>
              <span>Длительность : </span>
-              <p>{"8:30:22"}</p>
+              <p>{"0:00:00"}</p>
            </div>

            <button className="start">
--- a/src/components/UI/ModalTicket/ModalTicket.scss
+++ b/src/components/UI/ModalTicket/ModalTicket.scss
@ -73,6 +73,10 @@
        font-size: 16px;
        line-height: 24px;
        color: #1a1919;
+        max-width: 500px;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
        margin-bottom: 0;
      }

@ -224,6 +228,18 @@
    }
  }

+  .members {
+    display: flex;
+    flex-direction: column;
+    font-size: 14px;
+
+    &__list {
+      display: flex;
+      flex-direction: column;
+      row-gap: 8px;
+    }
+  }
+
  .workers {
    position: relative;
    border-left: 1px solid #f1f1f1;
@ -258,9 +274,17 @@
      color: #807777;
    }

+    .nameProject {
+      max-width: 200px;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+
    .add-worker {
      display: flex;
      align-items: center;
+      position: relative;

      span {
        color: #000000;
@ -295,6 +319,8 @@
      color: white;
      background: #1458dd;
      border-radius: 44px;
+      opacity: 0.5;
+      pointer-events: none;

      img {
        margin-left: 10px;
@ -320,7 +346,6 @@
      line-height: 32px;
      font-weight: 500;
      color: #2d4a17;
-      display: flex;
      max-width: 200px;
      overflow: hidden;
      white-space: nowrap;
@ -339,12 +364,85 @@
      display: flex;
      flex-direction: row;
      align-items: center;
-      margin-bottom: 15px;

      p {
-        margin: 0 0 0 11px;
-        font-size: 12px;
-        color: #807777;
+        max-width: 170px;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        font-size: 14px;
+      }
+
+      img {
+        max-width: 25px;
+        max-height: 25px;
+        margin-left: 5px;
+      }
+    }
+
+    .task__info {
+      display: flex;
+      flex-direction: column;
+      row-gap: 5px;
+
+      .delete {
+        cursor: pointer;
+      }
+
+      .executor {
+        display: flex;
+        font-size: 14px;
+        align-items: center;
+
+        p {
+          max-width: 170px;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+        }
+
+        img {
+          margin-left: 5px;
+          max-width: 25px;
+          max-height: 25px;
+        }
+      }
+
+      .dropdownList {
+        position: absolute;
+        background: white;
+        padding: 10px;
+        border-radius: 10px;
+        top: 0;
+        z-index: 10;
+        border: 1px solid gray;
+        width: 260px;
+        display: flex;
+        flex-direction: column;
+        row-gap: 8px;
+
+        .noUsers {
+          font-size: 14px;
+          text-align: center;
+        }
+
+        &__close {
+          cursor: pointer;
+          margin-left: auto;
+          width: 12px;
+          margin-right: 5px;
+        }
+
+        &__person {
+          display: flex;
+          justify-content: space-between;
+          cursor: pointer;
+
+          img {
+            max-width: 30px;
+            max-height: 30px;
+          }
+        }
      }
    }

--- a/src/components/UI/TicketFullScreen/TicketFullScreen.jsx
+++ b/src/components/UI/TicketFullScreen/TicketFullScreen.jsx
@ -347,6 +347,17 @@ export const TicketFullScreen = ({}) => {
                  })}
              </div>

+              <div className="add-worker moreItems">
+                <button
+                    onClick={() => {
+                      dispatch(modalToggle("addWorker"));
+                      setModalAddWorker(true);
+                    }}
+                >
+                  +
+                </button>
+                <span>Добавить исполнителя</span>
+              </div>
              <div className="add-worker moreItems">
                <button
                  onClick={() => {
@ -364,7 +375,7 @@ export const TicketFullScreen = ({}) => {
              <div className="time">
                <img src={watch}></img>
                <span>Длительность : </span>
-                <p>{"8:30:22"}</p>
+                <p>{"0:00:00"}</p>
              </div>

              <button className="start">
--- a/src/pages/ProjectTracker/ProjectTracker.js
+++ b/src/pages/ProjectTracker/ProjectTracker.js
@ -297,6 +297,7 @@ export const ProjectTracker = () => {
                  task={selectedTicket}
                  projectId={projectBoard.id}
                  projectName={projectBoard.name}
+                  projectUsers={projectBoard.projectUsers}
              />}

              <div className="tasks__container">
--- a/src/pages/Tracker/tracker.scss
+++ b/src/pages/Tracker/tracker.scss
@ -555,6 +555,10 @@
              font-weight: 400;
              font-size: 14px;
              line-height: 140%;
+              max-width: 295px;
+              overflow: hidden;
+              white-space: nowrap;
+              text-overflow: ellipsis;
            }

            &__info {