Merge pull request #109 from apuc/select-priority-column

Select priority column

src/components/Modal/Tracker/ModalTicket/ModalTicket.jsx

@@ -335,7 +335,9 @@ export const ModalTiсket = ({
   }, [members]);
 
   function copyProjectLink() {
-    navigator.clipboard.writeText(`https://itguild.info/tracker/project/${projectId}`)
+    navigator.clipboard.writeText(
+      `https://itguild.info/tracker/project/${projectId}`
+    );
   }
 
   return (

src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx

@@ -211,7 +211,9 @@ export const TicketFullScreen = () => {
   };
 
   function copyTicketLink() {
-    navigator.clipboard.writeText(`https://itguild.info/tracker/task/${taskInfo.id}`)
+    navigator.clipboard.writeText(
+      `https://itguild.info/tracker/task/${taskInfo.id}`
+    );
   }
 
   return (

src/components/Modal/Tracker/TrackerModal/TrackerModal.jsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 
+import { getProfileInfo } from "@redux/outstaffingSlice";
 import {
   addPersonToProject,
   editColumnName,
@@ -35,12 +36,14 @@ export const TrackerModal = ({
   titleProject,
   projectId,
   priorityTask,
+  projectUsers,
 }) => {
   const dispatch = useDispatch();
   const projectBoard = useSelector(getProjectBoard);
   const columnName = useSelector(getColumnName);
   const columnId = useSelector(getColumnId);
   const columnPriority = useSelector(getColumnPriority);
+  const profileInfo = useSelector(getProfileInfo);
 
   const modalType = useSelector(getValueModalType);
   const [projectName, setProjectName] = useState(defautlInput);
@@ -51,8 +54,16 @@ export const TrackerModal = ({
   const [workers, setWorkers] = useState([]);
   const [selectWorkersOpen, setSelectWorkersOpen] = useState(false);
   const [selectedWorker, setSelectedWorker] = useState(null);
-  const [selectColumnPriority, setSelectColumnPriority] = useState('Выберите приоритет колонки')
+  const [selectColumnPriority, setSelectColumnPriority] = useState(
-  const [selectColumnPriorityOpen, setSelectColumnPriorityOpen] = useState(false)
+    "Выберите приоритет колонки"
+  );
+  const [selectedExecutorTask, setSelectedExecutorTask] = useState(
+    "Выберите исполнителя задачи"
+  );
+  const [selectExecutorTaskOpen, setSelectExecutorTaskOpen] = useState(false);
+  const [correctProjectUsers, setCorrectProjectUsers] = useState([]);
+  const [selectColumnPriorityOpen, setSelectColumnPriorityOpen] =
+    useState(false);
 
   function createTab() {
     if (!valueColumn) {
@@ -91,13 +102,28 @@ export const TrackerModal = ({
         column_id: selectedTab,
         priority: priorityTask,
       },
+    }).then((res) => {
+      if (selectedExecutorTask.user_id) {
+        apiRequest("/task/update-task", {
+          method: "PUT",
+          data: {
+            task_id: res.id,
+            executor_id: selectedExecutorTask.user_id,
+          },
         }).then(() => {
           dispatch(setProjectBoardFetch(projectBoard.id));
-    });
-
           setActive(false);
           setValueTiket("");
           setDescriptionTicket("");
+          setSelectedExecutorTask("Выберите исполнителя задачи");
+        });
+      } else {
+        setActive(false);
+        setValueTiket("");
+        setDescriptionTicket("");
+        dispatch(setProjectBoardFetch(projectBoard.id));
+      }
+    });
   }
 
   function editProject() {
@@ -211,6 +237,26 @@ export const TrackerModal = ({
           );
         })
       : "";
+    if (
+      localStorage.getItem("role_status") !== "18" &&
+      projectUsers &&
+      Boolean(
+        !projectUsers.find((item) => item.user_id === profileInfo.id_user)
+      )
+    ) {
+      setCorrectProjectUsers([
+        ...projectUsers,
+        {
+          user: {
+            avatar: profileInfo.photo,
+            fio: profileInfo.fio,
+          },
+          user_id: profileInfo.id_user,
+        },
+      ]);
+    } else {
+      setCorrectProjectUsers(projectUsers);
+    }
   }, [active]);
 
   return (
@@ -280,7 +326,7 @@ export const TrackerModal = ({
         </div>
       )}
       {modalType === "createTiketProject" && (
-        <div>
+        <>
           <div className="title-project">
             <h4>Введите название и описание задачи</h4>
             <div className="input-container">
@@ -299,11 +345,59 @@ export const TrackerModal = ({
                 placeholder="Описание задачи"
               />
             </div>
+            <div
+              onClick={() => setSelectExecutorTaskOpen(!selectExecutorTaskOpen)}
+              className={
+                selectExecutorTaskOpen
+                  ? "select__executor select__executor--open"
+                  : "select__executor"
+              }
+            >
+              <div className="selected__executor">
+                {selectedExecutorTask.user_id ? (
+                  <>
+                    <span>{selectedExecutorTask.user.fio}</span>
+                    <img
+                      className="avatar"
+                      src={urlForLocal(selectedExecutorTask.user.avatar)}
+                      alt="avatar"
+                    />
+                  </>
+                ) : (
+                  <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={urlForLocal(person.user.avatar)}
+                            alt="avatar"
+                          />
+                        </div>
+                      );
+                    })
+                  ) : (
+                    <span>Нет пользователей</span>
+                  )}
+                </div>
+              )}
+            </div>
           </div>
           <BaseButton styles={"button-add"} onClick={createTiket}>
             Создать
           </BaseButton>
-        </div>
+        </>
       )}
       {modalType === "editProject" && (
         <div>
@@ -386,19 +480,35 @@ export const TrackerModal = ({
               />
             </div>
             <h4>Приоритет колонки</h4>
-            <div className='select-priority' onClick={() => setSelectColumnPriorityOpen(!selectColumnPriorityOpen)}>
+            <div
+              className={
+                selectColumnPriorityOpen
+                  ? "select-priority select-priority--open"
+                  : "select-priority"
+              }
+              onClick={() =>
+                setSelectColumnPriorityOpen(!selectColumnPriorityOpen)
+              }
+            >
               <span>{selectColumnPriority}</span>
-              <img src={arrowDown} alt='arrow' />
+              <img src={arrowDown} alt="arrow" />
-              {selectColumnPriorityOpen &&
+              {selectColumnPriorityOpen && (
-                  <div className='select-priority__dropDown'>
+                <div className="select-priority__dropDown">
                   {projectBoard.columns.map((column, index) => {
-                      return <span key={column.id} onClick={() => {
+                    return (
-                        setSelectColumnPriority(index + 1)
+                      <span
-                        dispatch(setColumnPriority(index + 1))
+                        key={column.id}
-                      }}>{index + 1}</span>
+                        onClick={() => {
+                          setSelectColumnPriority(index + 1);
+                          dispatch(setColumnPriority(index + 1));
+                        }}
+                      >
+                        {index + 1}
+                      </span>
+                    );
                   })}
                 </div>
-              }
+              )}
             </div>
             {/*<div className="input-container">*/}
             {/*  <input*/}

src/components/Modal/Tracker/TrackerModal/trackerModal.scss

@@ -48,6 +48,7 @@
     img {
       width: 15px;
       height: 15px;
+      transition: all 0.3s ease;
     }
 
     &__dropDown {
@@ -68,6 +69,12 @@
         }
       }
     }
+
+    &--open {
+      img {
+        transform: rotate(180deg);
+      }
+    }
   }
 
   .input-container {
@@ -75,13 +82,83 @@
     height: 35px;
     background: #ffffff;
     border-radius: 8px;
-    margin: 12px 0;
+    margin: 5px 0;
 
     input::-webkit-inner-spin-button {
       -webkit-appearance: none;
     }
   }
 
+  .select__executor {
+    width: 287px;
+    background: white;
+    border-radius: 8px;
+    margin: 5px 0;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 9.5px 12px;
+    font-size: 14px;
+    cursor: pointer;
+    position: relative;
+
+    .arrow {
+      transition: all 0.3s ease;
+      width: 16px;
+      height: 16px;
+    }
+
+    &--open {
+      .arrow {
+        transform: rotate(180deg);
+      }
+    }
+
+    .selected__executor {
+      display: flex;
+      align-items: center;
+
+      span {
+        max-width: 205px;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+      img {
+        margin-left: 15px;
+      }
+    }
+
+    .avatar {
+      width: 20px;
+      height: 20px;
+    }
+
+    &__dropDown {
+      position: absolute;
+      background: white;
+      border-radius: 8px;
+      top: 50px;
+      left: 0;
+      width: 100%;
+      padding: 9.5px 12px;
+      display: flex;
+      flex-direction: column;
+      row-gap: 10px;
+
+      .executor {
+        display: flex;
+        justify-content: space-between;
+
+        &:hover {
+          span {
+            font-weight: 600;
+          }
+        }
+      }
+    }
+  }
+
   h4 {
     font-weight: 500;
     font-size: 22px;

src/components/ProjectTiket/ProjectTiket.jsx

@@ -53,7 +53,9 @@ export const ProjectTiket = ({ project, index }) => {
   }
 
   function copyProjectLink() {
-    navigator.clipboard.writeText(`https://itguild.info/tracker/project/${project.id}`)
+    navigator.clipboard.writeText(
+      `https://itguild.info/tracker/project/${project.id}`
+    );
   }
 
   return (

src/pages/ProjectTracker/ProjectTracker.js

@@ -291,6 +291,7 @@ export const ProjectTracker = () => {
             setActive={setModalAdd}
             selectedTab={selectedTab}
             priorityTask={priorityTask}
+            projectUsers={projectBoard.projectUsers}
           />
 
           {loader && <Loader style="green" />}
@@ -324,12 +325,26 @@ export const ProjectTracker = () => {
                     <span className="countPersons">
                       {projectBoard.projectUsers?.length}
                     </span>
-                    <div className='projectPersons'>
+                    <div className="projectPersons">
                       {projectBoard.projectUsers?.length &&
-                          projectBoard.projectUsers.slice(0, projectBoard.length > 3 ? 3 : projectBoard.length).map((person) => {
+                        projectBoard.projectUsers
-                            return <img key={person.user_id} src={person.user?.avatar ? urlForLocal(person.user.avatar) : avatarMok} alt='avatar' />
+                          .slice(
-                          })
+                            0,
+                            projectBoard.length > 3 ? 3 : projectBoard.length
+                          )
+                          .map((person) => {
+                            return (
+                              <img
+                                key={person.user_id}
+                                src={
+                                  person.user?.avatar
+                                    ? urlForLocal(person.user.avatar)
+                                    : avatarMok
                                 }
+                                alt="avatar"
+                              />
+                            );
+                          })}
                     </div>
                     <span
                       className="addPerson"
@@ -524,15 +539,21 @@ export const ProjectTracker = () => {
                                 className="tasks__board__item__description"
                               ></p>
                               <div className="tasks__board__item__executor">
-                                <span>{task.executor?.fio ? task.executor?.fio : 'Исполнитель не назначен'}</span>
+                                <span>
-                                {task.executor?.avatar &&
+                                  {task.executor?.fio
+                                    ? task.executor?.fio
+                                    : "Исполнитель не назначен"}
+                                </span>
+                                {task.executor?.avatar && (
                                   <img
                                     src={
-                                          task.executor?.avatar ? urlForLocal(task.executor?.avatar) : avatarMok
+                                      task.executor?.avatar
+                                        ? urlForLocal(task.executor?.avatar)
+                                        : avatarMok
                                     }
                                     alt="avatar"
                                   />
-                                }
+                                )}
                               </div>
                               <div className="tasks__board__item__info">
                                 <div className="tasks__board__item__info__more">