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

select priority column, project persons avatars, copy links on button…

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

@@ -334,6 +334,10 @@ export const ModalTiсket = ({
     );
   }, [members]);
 
+  function copyProjectLink () {
+    navigator.clipboard.writeText(`https://itguild.info/tracker/project/${projectId}`)
+  }
+
   return (
     <div
       className={active ? "modal-tiket active" : "modal-tiket"}
@@ -614,7 +618,7 @@ export const ModalTiсket = ({
             </div>
             <div>
               <img src={link}></img>
-              <p>ссылка на проект</p>
+              <p onClick={copyProjectLink}>ссылка на проект</p>
             </div>
             <div onClick={deleteTask}>
               <img src={archive}></img>

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

@@ -210,6 +210,10 @@ export const TicketFullScreen = () => {
     dispatch(setToggleTab(index));
   };
 
+  function copyTicketLink () {
+    navigator.clipboard.writeText(`https://itguild.info/tracker/task/${taskInfo.id}`)
+  }
+
   return (
     <section className="ticket-full-screen">
       <ProfileHeader />
@@ -510,7 +514,7 @@ export const TicketFullScreen = () => {
                   </div>
                   <div>
                     <img src={link} alt="link"></img>
-                    <p>ссылка на проект</p>
+                    <p onClick={copyTicketLink}>ссылка на задачу</p>
                   </div>
                   <div>
                     <img src={archive2} alt="arch"></img>

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

@@ -21,6 +21,7 @@ import { urlForLocal } from "@utils/helper";
 import { apiRequest } from "@api/request";
 
 import BaseButton from "@components/Common/BaseButton/BaseButton";
+import ModalLayout from "@components/Common/ModalLayout/ModalLayout";
 
 import arrowDown from "assets/icons/arrows/selectArrow.png";
 
@@ -50,6 +51,8 @@ export const TrackerModal = ({
   const [workers, setWorkers] = useState([]);
   const [selectWorkersOpen, setSelectWorkersOpen] = useState(false);
   const [selectedWorker, setSelectedWorker] = useState(null);
+  const [selectColumnPriority, setSelectColumnPriority] = useState('Выберите приоритет колонки')
+  const [selectColumnPriorityOpen, setSelectColumnPriorityOpen] = useState(false)
 
   function createTab() {
     if (!valueColumn) {
@@ -211,14 +214,13 @@ export const TrackerModal = ({
   }, [active]);
 
   return (
-    <div
+    <ModalLayout
-      className={active ? "modal-add active" : "modal-add"}
+      active={active}
-      onClick={() => {
+      setActive={setActive}
-        setActive(false);
+      // onClick={() => {
-        setSelectWorkersOpen(false);
+      //   setSelectWorkersOpen(false);
-      }}
+      // }}
     >
-      <div className="modal-add__content" onClick={(e) => e.stopPropagation()}>
       {modalType === "addWorker" && (
         <div>
           <div className="title-project">
@@ -350,10 +352,7 @@ export const TrackerModal = ({
               <textarea className="title-project__textarea"></textarea>
             </div>
           </div>
-            <BaseButton
+          <BaseButton styles={"button-add"} onClick={(e) => e.preventDefault()}>
-              styles={"button-add"}
-              onClick={(e) => e.preventDefault()}
-            >
             Добавить
           </BaseButton>
         </div>
@@ -387,16 +386,30 @@ export const TrackerModal = ({
               />
             </div>
             <h4>Приоритет колонки</h4>
-              <div className="input-container">
+            <div className='select-priority' onClick={() => setSelectColumnPriorityOpen(!selectColumnPriorityOpen)}>
-                <input
+              <span>{selectColumnPriority}</span>
-                  className="name-project"
+              <img src={arrowDown} alt='arrow' />
-                  placeholder="Приоритет колонки"
+              {selectColumnPriorityOpen &&
-                  type="number"
+                  <div className='select-priority__dropDown'>
-                  step="1"
+                    {projectBoard.columns.map((column, index) => {
-                  value={columnPriority}
+                      return <span key={column.id} onClick={() => {
-                  onChange={(e) => dispatch(setColumnPriority(e.target.value))}
+                        setSelectColumnPriority(index + 1)
-                />
+                        dispatch(setColumnPriority(index + 1))
+                      }}>{index + 1}</span>
+                    })}
                   </div>
+              }
+            </div>
+            {/*<div className="input-container">*/}
+            {/*  <input*/}
+            {/*    className="name-project"*/}
+            {/*    placeholder="Приоритет колонки"*/}
+            {/*    type="number"*/}
+            {/*    step="1"*/}
+            {/*    value={columnPriority}*/}
+            {/*    onChange={(e) => dispatch(setColumnPriority(e.target.value))}*/}
+            {/*  />*/}
+            {/*</div>*/}
           </div>
           <BaseButton styles={"button-add"} onClick={changeColumnParams}>
             Сохранить
@@ -405,8 +418,7 @@ export const TrackerModal = ({
       )}
 
       <span className="exit" onClick={() => setActive(false)}></span>
-      </div>
+    </ModalLayout>
-    </div>
   );
 };
 

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

@@ -32,6 +32,44 @@
   flex-direction: column;
   margin: 0 0 15px 0;
 
+  .select-priority {
+    background-color: white;
+    width: 100%;
+    margin: 12px 0;
+    padding: 10px 8px;
+    border-radius: 8px;
+    font-size: 14px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    cursor: pointer;
+    position: relative;
+
+    img {
+      width: 15px;
+      height: 15px;
+    }
+
+    &__dropDown {
+      position: absolute;
+      width: 100%;
+      background: white;
+      left: 0;
+      padding: 8px;
+      top: 50px;
+      display: flex;
+      border-radius: 8px;
+      row-gap: 5px;
+      flex-direction: column;
+
+      span {
+        &:hover {
+          font-weight: 700;
+        }
+      }
+    }
+  }
+
   .input-container {
     width: 287px;
     height: 35px;

src/components/ProjectTiket/ProjectTiket.jsx

@@ -52,6 +52,10 @@ export const ProjectTiket = ({ project, index }) => {
     });
   }
 
+  function copyProjectLink () {
+    navigator.clipboard.writeText(`https://itguild.info/tracker/project/${project.id}`)
+  }
+
   return (
     <div className="project" key={index}>
       <Link to={`/tracker/project/${project.id}`}>{project.name}</Link>
@@ -90,7 +94,7 @@ export const ProjectTiket = ({ project, index }) => {
           </div>
           <div>
             <img src={link}></img>
-            <p>ссылка на проект</p>
+            <p onClick={copyProjectLink}>ссылка на проект</p>
           </div>
           <div>
             <img src={archiveSet}></img>

src/pages/ProjectTracker/ProjectTracker.js

@@ -43,6 +43,7 @@ import filesBoard from "assets/icons/filesBoard.svg";
 import project from "assets/icons/trackerProject.svg";
 import tasks from "assets/icons/trackerTasks.svg";
 import accept from "assets/images/accept.png";
+import avatarMok from "assets/images/avatarMok.png";
 
 export const ProjectTracker = () => {
   const dispatch = useDispatch();
@@ -323,6 +324,13 @@ export const ProjectTracker = () => {
                     <span className="countPersons">
                       {projectBoard.projectUsers?.length}
                     </span>
+                    <div className='projectPersons'>
+                      {projectBoard.projectUsers?.length &&
+                          projectBoard.projectUsers.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"
                       onClick={() => {
@@ -515,6 +523,17 @@ export const ProjectTracker = () => {
                                 }}
                                 className="tasks__board__item__description"
                               ></p>
+                              <div className="tasks__board__item__executor">
+                                <span>{task.executor?.fio ? task.executor?.fio : 'Исполнитель не назначен'}</span>
+                                {task.executor?.avatar &&
+                                    <img
+                                        src={
+                                          task.executor?.avatar ? urlForLocal(task.executor?.avatar) : avatarMok
+                                        }
+                                        alt="avatar"
+                                    />
+                                }
+                              </div>
                               <div className="tasks__board__item__info">
                                 <div className="tasks__board__item__info__more">
                                   <img src={commentsBoard} alt="commentsImg" />

src/pages/Tracker/tracker.scss

@@ -255,14 +255,27 @@
             cursor: pointer;
             align-items: center;
 
+            .projectPersons {
+              display: flex;
+              position: relative;
+              left: -10px;
               img {
                 position: relative;
+                display: flex;
                 width: 32px;
                 height: 32px;
               }
 
+              img:nth-child(1) {
+                left: -5px;
+              }
+
               img:nth-child(2) {
-              right: 12px;
+                left: -10px;
+              }
+              img:nth-child(3) {
+                left: -15px;
+              }
             }
 
             span {
@@ -282,15 +295,14 @@
               color: #252c32;
               border: 1px solid #dde2e4;
               background: white;
-              left: -18px;
+              left: -5px;
-              z-index: 2;
             }
 
             .addPerson {
               background: #00c5a8;
               color: white;
               font-size: 14px;
-              left: -30px;
+              left: -28px;
               z-index: 2;
             }
 
@@ -586,7 +598,7 @@
             }
 
             &__description {
-              margin: 8px 0 15px;
+              margin: 8px 0 4px;
               color: #5c6165;
               font-weight: 400;
               font-size: 14px;
@@ -629,6 +641,28 @@
                 }
               }
             }
+
+            &__executor {
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+              margin: 10px 0 15px;
+              padding-right: 10px;
+              font-size: 14px;
+              font-weight: 500;
+
+              span {
+                max-width: 210px;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+              }
+
+              img {
+                width: 25px;
+                height: 25px;
+              }
+            }
           }
 
           .openItems {