select executor on create task

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

@@ -16,6 +16,8 @@ import {
   setProjectBoardFetch,
 } from "@redux/projectsTrackerSlice";
 
+import {getProfileInfo} from "@redux/outstaffingSlice";
+
 import { urlForLocal } from "@utils/helper";
 
 import { apiRequest } from "@api/request";
@@ -35,12 +37,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);
@@ -54,6 +58,9 @@ export const TrackerModal = ({
   const [selectColumnPriority, setSelectColumnPriority] = useState(
     "Выберите приоритет колонки"
   );
+  const [selectedExecutorTask, setSelectedExecutorTask] = useState('Выберите исполнителя задачи')
+  const [selectExecutorTaskOpen, setSelectExecutorTaskOpen] = useState(false)
+  const [correctProjectUsers, setCorrectProjectUsers] = useState([]);
   const [selectColumnPriorityOpen, setSelectColumnPriorityOpen] =
     useState(false);
 
@@ -94,13 +101,28 @@ export const TrackerModal = ({
         column_id: selectedTab,
         priority: priorityTask,
       },
-    }).then(() => {
-      dispatch(setProjectBoardFetch(projectBoard.id));
+    }).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));
+      }
     });
-
-    setActive(false);
-    setValueTiket("");
-    setDescriptionTicket("");
   }
 
   function editProject() {
@@ -214,6 +236,22 @@ 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 (
@@ -283,7 +321,7 @@ export const TrackerModal = ({
         </div>
       )}
       {modalType === "createTiketProject" && (
-        <div>
+        <>
           <div className="title-project">
             <h4>Введите название и описание задачи</h4>
             <div className="input-container">
@@ -302,11 +340,39 @@ 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>
@@ -390,7 +456,7 @@ export const TrackerModal = ({
             </div>
             <h4>Приоритет колонки</h4>
             <div
-              className="select-priority"
+              className={selectColumnPriorityOpen ? 'select-priority select-priority--open' : 'select-priority'}
               onClick={() =>
                 setSelectColumnPriorityOpen(!selectColumnPriorityOpen)
               }

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

@@ -25,6 +25,7 @@ export const ProjectTiket = ({ project, index }) => {
     initListeners();
   }, []);
 
+
   function initListeners() {
     document.addEventListener("click", closeByClickingOut);
   }

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" />}