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,202 +214,211 @@ export const TrackerModal = ({
   }, [active]);
 
   return (
-    <div
-      className={active ? "modal-add active" : "modal-add"}
-      onClick={() => {
-        setActive(false);
-        setSelectWorkersOpen(false);
-      }}
+    <ModalLayout
+      active={active}
+      setActive={setActive}
+      // onClick={() => {
+      //   setSelectWorkersOpen(false);
+      // }}
     >
-      <div className="modal-add__content" onClick={(e) => e.stopPropagation()}>
-        {modalType === "addWorker" && (
-          <div>
-            <div className="title-project">
-              <h4>Добавьте участника</h4>
-              {/*<div className="input-container">*/}
-              {/*  <input*/}
-              {/*    className="name-project"*/}
-              {/*    value={emailWorker}*/}
-              {/*    onChange={(e) => setEmailWorker(e.target.value)}*/}
-              {/*  />*/}
-              {/*</div>*/}
-              <div
-                className={
-                  selectWorkersOpen ? "select__worker open" : "select__worker"
-                }
-                onClick={() => setSelectWorkersOpen(!selectWorkersOpen)}
-              >
-                <p>
-                  {selectedWorker
-                    ? selectedWorker.employee.fio
-                    : "Выберите пользователя"}
-                </p>
-                <img className="arrow" src={arrowDown} alt="arrow" />
-                {Boolean(selectWorkersOpen) && (
-                  <div className="select__worker__dropDown">
-                    {Boolean(workers.length) ? (
-                      workers.map((worker) => {
-                        if (worker === selectedWorker) {
-                          return;
-                        }
-                        return (
-                          <div
-                            className="worker"
-                            key={worker.id}
-                            onClick={() => {
-                              setSelectedWorker(worker);
-                            }}
-                          >
-                            <p>{worker.employee.fio}</p>
-                            <img
-                              src={urlForLocal(worker.employee.avatar)}
-                              alt="avatar"
-                            />
-                          </div>
-                        );
-                      })
-                    ) : (
-                      <div>Нет пользователей</div>
-                    )}
-                  </div>
-                )}
-              </div>
-            </div>
-            <BaseButton styles={"button-add"} onClick={addUserToProject}>
-              Добавить
-            </BaseButton>
-          </div>
-        )}
-        {modalType === "createTiketProject" && (
-          <div>
-            <div className="title-project">
-              <h4>Введите название и описание задачи</h4>
-              <div className="input-container">
-                <input
-                  className="name-project"
-                  value={valueTiket}
-                  onChange={(e) => setValueTiket(e.target.value)}
-                  placeholder="Название задачи"
-                />
-              </div>
-              <div className="input-container">
-                <input
-                  className="name-project"
-                  value={descriptionTicket}
-                  onChange={(e) => setDescriptionTicket(e.target.value)}
-                  placeholder="Описание задачи"
-                />
-              </div>
-            </div>
-            <BaseButton styles={"button-add"} onClick={createTiket}>
-              Создать
-            </BaseButton>
-          </div>
-        )}
-        {modalType === "editProject" && (
-          <div>
-            <div className="title-project">
-              <h4>Введите новое название</h4>
-              <div className="input-container">
-                <input
-                  className="name-project"
-                  value={projectName}
-                  onChange={(e) => setProjectName(e.target.value)}
-                />
-              </div>
-            </div>
-
-            <BaseButton styles={"button-add"} onClick={editProject}>
-              Сохранить
-            </BaseButton>
-          </div>
-        )}
-        {modalType === "createProject" && (
-          <div>
-            <div className="title-project">
-              <h4>{titleProject}</h4>
-              <div className="input-container">
-                <input
-                  className="name-project"
-                  value={nameProject}
-                  onChange={(e) => setNameProject(e.target.value)}
-                />
-              </div>
-              <BaseButton styles={"button-add"} onClick={createProject}>
-                Создать
-              </BaseButton>
-            </div>
-          </div>
-        )}
-        {modalType === "addSubtask" && (
-          <div>
-            <div className="title-project subtask">
-              <h4>
-                Вы добавляете подзадачу{" "}
-                <p>в колонку(id) задачи "{defautlInput}"</p>
-              </h4>
-              <p className="title-project__decs">Введите текст</p>
-              <div>
-                <textarea className="title-project__textarea"></textarea>
-              </div>
-            </div>
-            <BaseButton
-              styles={"button-add"}
-              onClick={(e) => e.preventDefault()}
+      {modalType === "addWorker" && (
+        <div>
+          <div className="title-project">
+            <h4>Добавьте участника</h4>
+            {/*<div className="input-container">*/}
+            {/*  <input*/}
+            {/*    className="name-project"*/}
+            {/*    value={emailWorker}*/}
+            {/*    onChange={(e) => setEmailWorker(e.target.value)}*/}
+            {/*  />*/}
+            {/*</div>*/}
+            <div
+              className={
+                selectWorkersOpen ? "select__worker open" : "select__worker"
+              }
+              onClick={() => setSelectWorkersOpen(!selectWorkersOpen)}
             >
-              Добавить
-            </BaseButton>
-          </div>
-        )}
-        {modalType === "createColumn" && (
-          <div>
-            <div className="title-project">
-              <h4>Введите название колонки</h4>
-              <div className="input-container">
-                <input
-                  className="name-project"
-                  value={valueColumn}
-                  onChange={(e) => setValueColumn(e.target.value)}
-                />
-              </div>
+              <p>
+                {selectedWorker
+                  ? selectedWorker.employee.fio
+                  : "Выберите пользователя"}
+              </p>
+              <img className="arrow" src={arrowDown} alt="arrow" />
+              {Boolean(selectWorkersOpen) && (
+                <div className="select__worker__dropDown">
+                  {Boolean(workers.length) ? (
+                    workers.map((worker) => {
+                      if (worker === selectedWorker) {
+                        return;
+                      }
+                      return (
+                        <div
+                          className="worker"
+                          key={worker.id}
+                          onClick={() => {
+                            setSelectedWorker(worker);
+                          }}
+                        >
+                          <p>{worker.employee.fio}</p>
+                          <img
+                            src={urlForLocal(worker.employee.avatar)}
+                            alt="avatar"
+                          />
+                        </div>
+                      );
+                    })
+                  ) : (
+                    <div>Нет пользователей</div>
+                  )}
+                </div>
+              )}
             </div>
-            <BaseButton styles={"button-add"} onClick={createTab}>
+          </div>
+          <BaseButton styles={"button-add"} onClick={addUserToProject}>
+            Добавить
+          </BaseButton>
+        </div>
+      )}
+      {modalType === "createTiketProject" && (
+        <div>
+          <div className="title-project">
+            <h4>Введите название и описание задачи</h4>
+            <div className="input-container">
+              <input
+                className="name-project"
+                value={valueTiket}
+                onChange={(e) => setValueTiket(e.target.value)}
+                placeholder="Название задачи"
+              />
+            </div>
+            <div className="input-container">
+              <input
+                className="name-project"
+                value={descriptionTicket}
+                onChange={(e) => setDescriptionTicket(e.target.value)}
+                placeholder="Описание задачи"
+              />
+            </div>
+          </div>
+          <BaseButton styles={"button-add"} onClick={createTiket}>
+            Создать
+          </BaseButton>
+        </div>
+      )}
+      {modalType === "editProject" && (
+        <div>
+          <div className="title-project">
+            <h4>Введите новое название</h4>
+            <div className="input-container">
+              <input
+                className="name-project"
+                value={projectName}
+                onChange={(e) => setProjectName(e.target.value)}
+              />
+            </div>
+          </div>
+
+          <BaseButton styles={"button-add"} onClick={editProject}>
+            Сохранить
+          </BaseButton>
+        </div>
+      )}
+      {modalType === "createProject" && (
+        <div>
+          <div className="title-project">
+            <h4>{titleProject}</h4>
+            <div className="input-container">
+              <input
+                className="name-project"
+                value={nameProject}
+                onChange={(e) => setNameProject(e.target.value)}
+              />
+            </div>
+            <BaseButton styles={"button-add"} onClick={createProject}>
               Создать
             </BaseButton>
           </div>
-        )}
-        {modalType === "editColumn" && (
-          <div>
-            <div className="title-project">
-              <h4>Введите новое название</h4>
-              <div className="input-container">
-                <input
-                  className="name-project"
-                  value={columnName}
-                  onChange={(e) => dispatch(setColumnName(e.target.value))}
-                />
-              </div>
-              <h4>Приоритет колонки</h4>
-              <div className="input-container">
-                <input
-                  className="name-project"
-                  placeholder="Приоритет колонки"
-                  type="number"
-                  step="1"
-                  value={columnPriority}
-                  onChange={(e) => dispatch(setColumnPriority(e.target.value))}
-                />
-              </div>
+        </div>
+      )}
+      {modalType === "addSubtask" && (
+        <div>
+          <div className="title-project subtask">
+            <h4>
+              Вы добавляете подзадачу{" "}
+              <p>в колонку(id) задачи "{defautlInput}"</p>
+            </h4>
+            <p className="title-project__decs">Введите текст</p>
+            <div>
+              <textarea className="title-project__textarea"></textarea>
             </div>
-            <BaseButton styles={"button-add"} onClick={changeColumnParams}>
-              Сохранить
-            </BaseButton>
           </div>
-        )}
+          <BaseButton styles={"button-add"} onClick={(e) => e.preventDefault()}>
+            Добавить
+          </BaseButton>
+        </div>
+      )}
+      {modalType === "createColumn" && (
+        <div>
+          <div className="title-project">
+            <h4>Введите название колонки</h4>
+            <div className="input-container">
+              <input
+                className="name-project"
+                value={valueColumn}
+                onChange={(e) => setValueColumn(e.target.value)}
+              />
+            </div>
+          </div>
+          <BaseButton styles={"button-add"} onClick={createTab}>
+            Создать
+          </BaseButton>
+        </div>
+      )}
+      {modalType === "editColumn" && (
+        <div>
+          <div className="title-project">
+            <h4>Введите новое название</h4>
+            <div className="input-container">
+              <input
+                className="name-project"
+                value={columnName}
+                onChange={(e) => dispatch(setColumnName(e.target.value))}
+              />
+            </div>
+            <h4>Приоритет колонки</h4>
+            <div className='select-priority' onClick={() => setSelectColumnPriorityOpen(!selectColumnPriorityOpen)}>
+              <span>{selectColumnPriority}</span>
+              <img src={arrowDown} alt='arrow' />
+              {selectColumnPriorityOpen &&
+                  <div className='select-priority__dropDown'>
+                    {projectBoard.columns.map((column, index) => {
+                      return <span key={column.id} onClick={() => {
+                        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}>
+            Сохранить
+          </BaseButton>
+        </div>
+      )}
 
-        <span className="exit" onClick={() => setActive(false)}></span>
-      </div>
-    </div>
+      <span className="exit" onClick={() => setActive(false)}></span>
+    </ModalLayout>
   );
 };
 

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;
 
-            img {
+            .projectPersons {
+              display: flex;
               position: relative;
-              width: 32px;
-              height: 32px;
-            }
+              left: -10px;
+              img {
+                position: relative;
+                display: flex;
+                width: 32px;
+                height: 32px;
+              }
 
-            img:nth-child(2) {
-              right: 12px;
+              img:nth-child(1) {
+                left: -5px;
+              }
+
+              img:nth-child(2) {
+                left: -10px;
+              }
+              img:nth-child(3) {
+                left: -15px;
+              }
             }
 
             span {
@@ -282,15 +295,14 @@
               color: #252c32;
               border: 1px solid #dde2e4;
               background: white;
-              left: -18px;
-              z-index: 2;
+              left: -5px;
             }
 
             .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 {