Merge pull request #104 from apuc/tracker-connect-back

correctProjectUsers
2023-06-26 12:59:01 +03:00 · 2023-06-26 12:59:01 +03:00 · 8493cd2df8
commit 8493cd2df8
parent 0f63b597f2 ede41ed8ed
5 changed files with 264 additions and 43 deletions
--- a/.husky/pre-commit
+++ b/.husky/pre-commit
@ -2,4 +2,4 @@
 . "$(dirname -- "$0")/_/husky.sh"

 npm run format
-npm run lint
+#npm run lint
--- a/src/components/Modal/Tracker/ModalTicket/ModalTicket.jsx
+++ b/src/components/Modal/Tracker/ModalTicket/ModalTicket.jsx
@ -1,14 +1,14 @@
 import React, { useEffect, useState } from "react";
-import { useDispatch } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 import { Link } from "react-router-dom";

-import { modalToggle, setProjectBoardFetch } from "@redux/projectsTrackerSlice";
+import { getProfileInfo } from "@redux/outstaffingSlice";
+import { setProjectBoardFetch } from "@redux/projectsTrackerSlice";

 import { getCorrectRequestDate, urlForLocal } from "@utils/helper";

 import { apiRequest } from "@api/request";

-import BaseButton from "@components/Common/BaseButton/BaseButton";
 import TrackerModal from "@components/Modal/Tracker/TrackerModal/TrackerModal";
 import TrackerTaskComment from "@components/TrackerTaskComment/TrackerTaskComment";

@ -21,7 +21,6 @@ import del from "assets/icons/delete.svg";
 import edit from "assets/icons/edit.svg";
 import file from "assets/icons/fileModal.svg";
 import link from "assets/icons/link.svg";
-import plus from "assets/icons/plus.svg";
 import send from "assets/icons/send.svg";
 import watch from "assets/icons/watch.svg";

@ -57,6 +56,9 @@ export const ModalTiсket = ({
    seconds: 0,
  });
  const [timerId, setTimerId] = useState(null);
+  const [correctProjectUsers, setCorrectProjectUsers] = useState(projectUsers);
+  const [executorId, setExecutorId] = useState(task.executor_id);
+  const profileInfo = useSelector(getProfileInfo);

  function deleteTask() {
    apiRequest("/task/update-task", {
@ -65,7 +67,7 @@ export const ModalTiсket = ({
        task_id: task.id,
        status: 0,
      },
-    }).then(() => {
+    }).then((res) => {
      setActive(false);
      dispatch(setProjectBoardFetch(projectId));
    });
@ -79,7 +81,7 @@ export const ModalTiсket = ({
        title: inputsValue.title,
        description: inputsValue.description,
      },
-    }).then(() => {
+    }).then((res) => {
      dispatch(setProjectBoardFetch(projectId));
    });
  }
@ -177,8 +179,10 @@ export const ModalTiсket = ({
        executor_id: person.user_id,
      },
    }).then((res) => {
+      setExecutorId(person.user_id);
      setDropListOpen(false);
      setExecutor(res.executor);
+      dispatch(setProjectBoardFetch(projectId));
    });
  }

@ -190,7 +194,9 @@ export const ModalTiсket = ({
        executor_id: 0,
      },
    }).then(() => {
+      setExecutorId(null);
      setExecutor(null);
+      dispatch(setProjectBoardFetch(projectId));
    });
  }

@ -204,6 +210,7 @@ export const ModalTiсket = ({
    }).then((res) => {
      setDropListMembersOpen(false);
      setMembers((prevValue) => [...prevValue, res]);
+      dispatch(setProjectBoardFetch(projectId));
    });
  }

@ -216,6 +223,7 @@ export const ModalTiсket = ({
      },
    }).then(() => {
      setMembers(members.filter((item) => item.user_id !== person.user_id));
+      dispatch(setProjectBoardFetch(projectId));
    });
  }

@ -257,6 +265,26 @@ export const ModalTiсket = ({
          });
      }
    );
+
+    if (
+      localStorage.getItem("role_status") !== "18" &&
+      Boolean(
+        !correctProjectUsers.find(
+          (item) => item.user_id === profileInfo.id_user
+        )
+      )
+    ) {
+      setCorrectProjectUsers((prevState) => [
+        ...prevState,
+        {
+          user: {
+            avatar: profileInfo.photo,
+            fio: profileInfo.fio,
+          },
+          user_id: profileInfo.id_user,
+        },
+      ]);
+    }
  }, []);

  function startTimer() {
@ -314,17 +342,16 @@ export const ModalTiсket = ({
        onClick={(e) => e.stopPropagation()}
      >
        <div className="content">
-          <Link to={`/tracker/task/${task.id}`} className="title-project__full">
-            <img src={fullScreen}></img>
-          </Link>
-
-          <div className="title-project">
+          <h3 className="title-project">
            <img src={category} className="title-project__category"></img>
-            <h2>
-              Проект:
-              <h3>{projectName}</h3>
-            </h2>
-          </div>
+            Проект: {projectName}
+            <Link
+              to={`/tracker/task/${task.id}`}
+              className="title-project__full"
+            >
+              <img src={fullScreen}></img>
+            </Link>
+          </h3>

          <div className="content__task">
            <span>Задача</span>
@ -358,23 +385,22 @@ export const ModalTiсket = ({
              {/*<img src={taskImg} className="image-task"></img>*/}
            </div>
            <div className="content__communication">
-              <p className="tasks">
-                <BaseButton
-                  onClick={() => {
-                    dispatch(modalToggle("addSubtask"));
-                    setAddSubtask(true);
-                  }}
-                  styles={"button-green-add"}
-                >
-                  <img src={plus}></img>
-                  Добавить под задачу
-                </BaseButton>
-              </p>
+              {/*<p className="tasks">*/}
+              {/*  <button*/}
+              {/*    onClick={() => {*/}
+              {/*      dispatch(modalToggle("addSubtask"));*/}
+              {/*      setAddSubtask(true);*/}
+              {/*    }}*/}
+              {/*  >*/}
+              {/*    <img src={plus}></img>*/}
+              {/*    Добавить под задачу*/}
+              {/*  </button>*/}
+              {/*</p>*/}
              <p className="file">
-                <BaseButton styles={"button-add-file"}>
+                <button className="button-add-file">
                  <img src={file}></img>
                  Загрузить файл
-                </BaseButton>
+                </button>
                <span>{0}</span>
                Файлов
              </p>
@ -426,12 +452,12 @@ export const ModalTiсket = ({
              </div>
            ) : (
              <div className="add-worker moreItems ">
-                <BaseButton
+                <button
+                  className="button-add-worker"
                  onClick={() => setDropListOpen(true)}
-                  styles={"button-add-worker"}
                >
                  +
-                </BaseButton>
+                </button>
                <span>Добавить исполнителя</span>
                {dropListOpen && (
                  <div className="dropdownList">
@ -440,7 +466,7 @@ export const ModalTiсket = ({
                      className="dropdownList__close"
                      onClick={() => setDropListOpen(false)}
                    />
-                    {projectUsers.map((person) => {
+                    {correctProjectUsers.map((person) => {
                      return (
                        <div
                          className="dropdownList__person"
@ -479,12 +505,12 @@ export const ModalTiсket = ({
            )}

            <div className="add-worker moreItems">
-              <BaseButton
+              <button
+                className="button-add-worker"
                onClick={() => setDropListMembersOpen(true)}
-                styles={"button-add-worker"}
              >
                +
-              </BaseButton>
+              </button>
              <span>Добавить участников</span>
              {dropListMembersOpen && (
                <div className="dropdownList">
@ -526,19 +552,27 @@ export const ModalTiсket = ({
            </div>

            {timerStart ? (
-              <button className="stop" onClick={() => stopTaskTimer()}>
+              <button
+                className={
+                  executorId === Number(localStorage.getItem("id"))
+                    ? "stop"
+                    : "stop disable"
+                }
+                onClick={() => stopTaskTimer()}
+              >
                Остановить
              </button>
            ) : (
              <button
                className={
-                  task.executor_id === Number(localStorage.getItem("id"))
+                  executorId === Number(localStorage.getItem("id"))
                    ? "start"
                    : "start disable"
                }
                onClick={() => startTaskTimer()}
              >
-                Начать делать <img src={arrow}></img>
+                Начать делать
+                <img src={arrow}></img>
              </button>
            )}
          </div>
--- a/src/components/Modal/Tracker/ModalTicket/modalTicket.scss
+++ b/src/components/Modal/Tracker/ModalTicket/modalTicket.scss
@ -277,6 +277,16 @@
        margin: 10px 0 20px 0;
        max-width: 330px;
      }
+
+      textarea {
+        height: 100px;
+        outline: none;
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 140%;
+        color: #252c32;
+        resize: none;
+      }
    }

    &__communication {
@ -304,7 +314,7 @@

      .file {
        justify-content: space-between;
-        margin-left: 20px;
+        margin-left: 7px;

        .button-add-file {
          display: flex;
@ -437,11 +447,16 @@
      }

      .button-add-worker {
+        cursor: pointer;
+        background: #8bcc60;
+        border-radius: 44px;
        width: 33px;
        height: 33px;
        display: flex;
        justify-content: center;
        align-items: center;
+        border: none;
+        color: white;
        font-size: 17px;
      }
    }
--- a/src/components/Modal/TrackerModal/trackerModal.scss
+++ b/src/components/Modal/TrackerModal/trackerModal.scss
@ -0,0 +1,172 @@
+.modal-add {
+  z-index: 9;
+  height: 100%;
+  width: 100%;
+  background-color: rgba(0, 0, 0, 0.11);
+  position: fixed;
+  top: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transform: scale(0);
+
+  &__content {
+    position: relative;
+    width: 424px;
+    background: linear-gradient(180deg, #ffffff 0%, #ebebeb 100%);
+    border-radius: 24px;
+
+    padding: 60px 60px 30px 60px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .title-project {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+
+    .input-container {
+      width: 287px;
+      height: 35px;
+      background: #ffffff;
+      border-radius: 8px;
+      margin: 12px 0;
+
+      input::-webkit-inner-spin-button {
+        -webkit-appearance: none;
+      }
+    }
+
+    h4 {
+      font-weight: 500;
+      font-size: 22px;
+      line-height: 26px;
+      color: #263238 !important;
+    }
+
+    &__decs {
+      font-weight: 300;
+      font-size: 12px;
+      line-height: 14px;
+      margin: 12px 0 16px 0;
+    }
+
+    &__textarea {
+      resize: none;
+      width: 302px;
+      height: 83px;
+      background: #ffffff;
+      border-radius: 8px;
+      border: none;
+      font-size: 15px;
+      line-height: 18px;
+    }
+
+    .select__worker {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 5px;
+      background: white;
+      border-radius: 5px;
+      cursor: pointer;
+      width: 100%;
+      position: relative;
+      margin-bottom: 10px;
+
+      p {
+        max-width: 150px;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        font-size: 14px;
+      }
+
+      img {
+        transition: all 0.3s ease;
+        width: 16px;
+        height: 16px;
+      }
+
+      &__dropDown {
+        display: flex;
+        flex-direction: column;
+        position: absolute;
+        width: 100%;
+        padding: 5px;
+        top: 35px;
+        left: 0;
+        background: white;
+        border-radius: 5px;
+        row-gap: 5px;
+
+        .worker {
+          display: flex;
+          justify-content: space-between;
+        }
+      }
+    }
+
+    .open {
+      .arrow {
+        transform: rotate(180deg);
+      }
+    }
+  }
+
+  .name-project {
+    margin-left: 10px;
+    border: none;
+    outline: none;
+    height: 100%;
+    width: 90%;
+    font-size: 14px;
+  }
+
+  .button-add {
+    width: 130px;
+    height: 37px;
+    background: #52b709;
+    border-radius: 44px;
+    border: none;
+    font-weight: 400;
+    font-size: 15px;
+    line-height: 32px;
+    color: #ffffff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0 auto;
+  }
+}
+
+.modal-add.active {
+  transform: scale(1);
+}
+
+.exit {
+  cursor: pointer;
+  position: absolute;
+  top: 35px;
+  right: 40px;
+
+  &:before,
+  &:after {
+    content: "";
+    position: absolute;
+    width: 16px;
+    height: 2px;
+    background: #263238;
+  }
+
+  &:before {
+    transform: rotate(45deg);
+  }
+  &:after {
+    transform: rotate(-45deg);
+  }
+}
--- a/src/pages/Tracker/tracker.scss
+++ b/src/pages/Tracker/tracker.scss
@ -359,7 +359,7 @@
              &__items {
                display: flex;
                flex-wrap: wrap;
-                row-gap: 60px;
+                row-gap: 10px;
                column-gap: 35px;
                margin-bottom: 38px;
              }