task priority

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

@@ -75,6 +75,7 @@ export const ModalTiсket = ({
   const [dropListOpen, setDropListOpen] = useState(false);
   const [dropListMembersOpen, setDropListMembersOpen] = useState(false);
   const [executor, setExecutor] = useState(task.executor);
+  const [taskPriority, setTaskPriority] = useState(task.execution_priority)
   const [members, setMembers] = useState(task.taskUsers);
   const [taskTags, setTaskTags] = useState(task.mark);
   const [users, setUsers] = useState([]);
@@ -94,6 +95,7 @@ export const ModalTiсket = ({
   const profileInfo = useSelector(getProfileInfo);
   const [acceptModalOpen, setAcceptModalOpen] = useState(false);
   const [selectTagsOpen, setSelectTagsOpen] = useState(false);
+  const [selectPriorityOpen, setSelectPriorityOpen] = useState(false)
   const { showNotification } = useNotification();
   const [commentSendDisable, setCommentSendDisable] = useState(false);
 
@@ -115,6 +117,28 @@ export const ModalTiсket = ({
     });
   }
 
+  const priority =
+      {
+        2: 'Высокий',
+        1: 'Средний',
+        0: 'Низкий'
+      }
+
+  const priorityTypes = [
+    {
+      name: 'Высокий',
+      key: 2
+    },
+    {
+      name: 'Средний',
+      key: 1
+    },
+    {
+      name: 'Низкий',
+      key: 0
+    },
+  ]
+
   function archiveTask() {
     setAcceptModalOpen(true);
   }
@@ -262,6 +286,19 @@ export const ModalTiсket = ({
     });
   }
 
+  function updateTaskPriority(key) {
+    setSelectPriorityOpen(false)
+    apiRequest("/task/update-task", {
+      method: "PUT",
+      data: {
+        task_id: task.id,
+        execution_priority: key
+      },
+    }).then(() => {
+      dispatch(setProjectBoardFetch(projectId));
+    });
+  }
+
   function addMember(person) {
     apiRequest("/task/add-user-to-task", {
       method: "POST",
@@ -969,6 +1006,30 @@ export const ModalTiсket = ({
               )}
             </div>
           </div>
+          <div className='workers_box-priority'>
+            <div className='priority__name' onClick={() => setSelectPriorityOpen(!selectPriorityOpen)}>
+              <span>{typeof taskPriority === "number" ?  priority[taskPriority] : 'Выберете приоритет'}</span>
+              <img
+                  className={selectPriorityOpen ? "open" : ""}
+                  src={arrowDown}
+                  alt="arrow"
+              />
+            </div>
+            {selectPriorityOpen &&
+                <div className='priority__dropDown'>
+                  {priorityTypes.map((item) => {
+                    return <div
+                        className='priority__dropDown__item'
+                        key={item.key}
+                        onClick={() => {
+                          setTaskPriority(item.key)
+                          updateTaskPriority(item.key)
+                        }}
+                    >{item.name}</div>
+                  })}
+                </div>
+            }
+          </div>
           <div className="workers_box-bottom">
             <div
               className={editOpen ? "edit" : ""}

src/components/Modal/Tracker/ModalTicket/modalTicket.scss

@@ -1091,6 +1091,64 @@
         }
       }
 
+      &-priority {
+        position: relative;
+        padding: 10px 40px 0 40px;
+        border-radius: 10px;
+        margin-bottom: 10px;
+        .priority {
+
+          &__name {
+            cursor: pointer;
+            width: 100%;
+            height: 42px;
+            border-radius: 8px;
+            background: #ddd;
+            padding: 8px 12px 9px 12px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+
+            span {
+              font-size: 14px;
+              color: black;
+            }
+
+            img {
+              transition: all 0.3s ease;
+            }
+
+            .open {
+              transform: rotate(180deg);
+            }
+          }
+
+          &__dropDown {
+            position: absolute;
+            padding: 5px;
+            background: #ebebeb;
+            width: 30%;
+            border-radius: 8px;
+            border: 1px solid #e4e4e4;
+            top: 105%;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            font-size: 16px;
+            row-gap: 6px;
+            z-index: 10;
+
+            &__item {
+              cursor: pointer;
+
+              &:hover {
+                font-weight: 700;
+              }
+            }
+          }
+        }
+      }
+
       &-bottom {
         padding: 10px 110px 15px 56px;
         font-weight: 400;