Merge pull request #126 from apuc/tracker-tasks

Tracker tasks
2023-08-31 02:02:58 +03:00 · 2023-08-31 02:02:58 +03:00 · e7a1273d17
commit e7a1273d17
parent 870fe6d4b9 45438da61c
15 changed files with 440 additions and 176 deletions
--- a/src/components/AuthBox/authBox.scss
+++ b/src/components/AuthBox/authBox.scss
@ -4,6 +4,10 @@
  align-self: center;
  margin-bottom: 194px;

+  @media (max-width: 1200px) {
+    margin-bottom: 100px;
+  }
+
  &__header {
    font-family: "GT Eesti Pro Display";
    font-size: 5.3em;
@ -19,6 +23,15 @@
      letter-spacing: 0.56px;
      line-height: normal;
    }
+
+    @media (max-width: 1024px) {
+      margin-top: 25px;
+    }
+
+    @media (max-width: 450px) {
+      font-size: 4em;
+      text-align: center;
+    }
  }

  &__sign-in {
@ -63,6 +76,14 @@
      width: 6px;
      height: 6px;
      margin-left: 120px;
+
+      @media (max-width: 700px) {
+        margin-left: 0;
+      }
+    }
+
+    @media (max-width: 1024px) {
+      margin-bottom: 25px;
    }
  }

@ -175,7 +196,6 @@
    margin-bottom: 0px;

    &__header {
-      margin-top: 120px;
      line-height: 20px;
    }

@ -196,6 +216,7 @@
        height: 45px;
        border-radius: 22.5px;
        padding-left: 22px;
+        max-width: none;
      }

      &-btn {
--- a/src/components/FileTracker/FileTracker.jsx
+++ b/src/components/FileTracker/FileTracker.jsx
@ -0,0 +1,50 @@
+import React, { useState } from "react";
+
+import { backendImg } from "@utils/helper";
+
+import { apiRequest } from "@api/request";
+
+import close from "assets/icons/closeProjectPersons.svg";
+
+const FileTracker = ({ file, setDeletedTask, taskId }) => {
+  const [openImg, setOpenImg] = useState(false);
+  function deleteFile(file) {
+    apiRequest("/file/detach", {
+      method: "DELETE",
+      data: {
+        file_id: file.id,
+        entity_type: 2,
+        entity_id: taskId,
+        status: 0,
+      },
+    }).then(() => {
+      setDeletedTask(file);
+    });
+  }
+
+  return (
+    <div
+      className={openImg ? "taskFile ImgOpened" : "taskFile"}
+      key={file.id}
+      onClick={() => {
+        if (openImg) setOpenImg(!openImg);
+      }}
+    >
+      <img
+        className="imgFile"
+        src={backendImg(file.file?.url)}
+        alt="img"
+        onClick={() => {
+          if (!openImg) setOpenImg(!openImg);
+        }}
+      />
+      {!openImg && (
+        <div className="deleteFile" onClick={() => deleteFile(file)}>
+          <img src={close} alt="delete" />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default FileTracker;
--- a/src/components/Modal/Tracker/ModalTicket/ModalTicket.jsx
+++ b/src/components/Modal/Tracker/ModalTicket/ModalTicket.jsx
@ -22,6 +22,7 @@ import { apiRequest } from "@api/request";

 import { useNotification } from "@hooks/useNotification";

+import FileTracker from "@components/FileTracker/FileTracker";
 import AcceptModal from "@components/Modal/AcceptModal/AcceptModal";
 import TrackerModal from "@components/Modal/Tracker/TrackerModal/TrackerModal";
 import TrackerTaskComment from "@components/TrackerTaskComment/TrackerTaskComment";
@ -52,6 +53,7 @@ export const ModalTiсket = ({
  projectId,
  projectName,
  projectUsers,
+  projectOwnerId,
 }) => {
  const dispatch = useDispatch();
  const [addSubtask, setAddSubtask] = useState(false);
@ -120,6 +122,11 @@ export const ModalTiсket = ({
      },
    }).then((res) => {
      dispatch(setProjectBoardFetch(projectId));
+      showNotification({
+        show: true,
+        text: "Изменения сохранены",
+        type: "success",
+      });
    });
  }

@ -366,19 +373,9 @@ export const ModalTiсket = ({
  }

  function deleteFile(file) {
-    apiRequest("/file/detach", {
-      method: "DELETE",
-      data: {
-        file_id: file.id,
-        entity_type: 2,
-        entity_id: task.id,
-        status: 0,
-      },
-    }).then(() => {
    setTaskFiles((prevValue) =>
      prevValue.filter((item) => item.id !== file.id)
    );
-    });
  }

  function startTimer() {
@ -528,19 +525,12 @@ export const ModalTiсket = ({
              <div className="task__files">
                {taskFiles.map((file) => {
                  return (
-                    <div className="taskFile" key={file.id}>
-                      <img
-                        className="imgFile"
-                        src={backendImg(file.file?.url)}
-                        alt="img"
+                    <FileTracker
+                      key={file.id}
+                      file={file}
+                      setDeletedTask={deleteFile}
+                      taskId={task.id}
                    />
-                      <div
-                        className="deleteFile"
-                        onClick={() => deleteFile(file)}
-                      >
-                        <img src={close} alt="delete" />
-                      </div>
-                    </div>
                  );
                })}
              </div>
@ -833,11 +823,27 @@ export const ModalTiсket = ({
              <img src={link}></img>
              <p onClick={copyTicketLink}>ссылка на задачу</p>
            </div>
-            <div onClick={archiveTask}>
+            <div
+              onClick={archiveTask}
+              className={
+                profileInfo.id_user === projectOwnerId ||
+                profileInfo.id_user === task.user_id
+                  ? ""
+                  : "disable"
+              }
+            >
              <img src={archive}></img>
              <p>в архив</p>
            </div>
-            <div onClick={deleteTask}>
+            <div
+              onClick={deleteTask}
+              className={
+                profileInfo.id_user === projectOwnerId ||
+                profileInfo.id_user === task.user_id
+                  ? ""
+                  : "disable"
+              }
+            >
              <img src={del}></img>
              <p>удалить</p>
            </div>
--- a/src/components/Modal/Tracker/ModalTicket/modalTicket.scss
+++ b/src/components/Modal/Tracker/ModalTicket/modalTicket.scss
@ -20,6 +20,7 @@
  border-radius: 8px;
  display: flex;
  flex-direction: row;
+  max-height: 750px;

  .content {
    position: relative;
@ -116,45 +117,35 @@
      }

      .taskName {
+        display: -webkit-box;
        max-width: 550px;
        overflow: hidden;
-        white-space: nowrap;
        text-overflow: ellipsis;
-        -webkit-line-clamp: 5;
+        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }

      .taskDescription {
+        display: -webkit-box;
        max-width: 550px;
        overflow: hidden;
-        white-space: nowrap;
        text-overflow: ellipsis;
-        -webkit-line-clamp: 5;
+        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
      }

      .fullName {
        max-width: 800px;
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        -webkit-line-clamp: 5;
-        -webkit-box-orient: vertical;
      }

      .fullDescription {
        max-width: 800px;
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        -webkit-line-clamp: 5;
-        -webkit-box-orient: vertical;
      }

      .comments__list {
        display: flex;
        flex-direction: column;
-        max-height: 300px;
+        max-height: 215px;
        overflow: auto;

        &::-webkit-scrollbar {
@ -357,7 +348,7 @@
      column-gap: 25px;
      row-gap: 20px;
      margin-top: 33px;
-      max-height: 350px;
+      max-height: 170px;
      overflow-y: auto;

      &::-webkit-scrollbar {
@ -376,6 +367,7 @@
      }

      .taskFile {
+        cursor: pointer;
        position: relative;
        .imgFile {
          max-width: 170px;
@ -409,6 +401,26 @@
          }
        }
      }
+
+      .ImgOpened {
+        position: fixed;
+        width: 100vw;
+        height: 100vh;
+        top: 0;
+        left: 0;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        z-index: 100;
+        background-color: rgba(0, 0, 0, 0.2);
+
+        .imgFile {
+          width: 90vw;
+          height: 90vh;
+          max-width: none;
+          max-height: none;
+        }
+      }
    }

    .fileLoaded {
--- a/src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx
+++ b/src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx
@ -6,6 +6,7 @@ import DatePicker, { registerLocale } from "react-datepicker";
 import { useDispatch, useSelector } from "react-redux";
 import { Link, useNavigate, useParams } from "react-router-dom";

+import { getProfileInfo } from "@redux/outstaffingSlice";
 import {
  deletePersonOnProject,
  getBoarderLoader,
@ -23,6 +24,8 @@ import {

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

+import { useNotification } from "@hooks/useNotification";
+
 import { getCorrectDate } from "@components/Calendar/calendarHelper";
 import { Footer } from "@components/Common/Footer/Footer";
 import { Loader } from "@components/Common/Loader/Loader";
@ -73,6 +76,7 @@ export const TicketFullScreen = () => {
    minute: 0,
    seconds: 0,
  });
+  const profileInfo = useSelector(getProfileInfo);
  const [timerId, setTimerId] = useState(null);
  const [dropListOpen, setDropListOpen] = useState(false);
  const [correctProjectUsers, setCorrectProjectUsers] = useState([]);
@ -84,6 +88,7 @@ export const TicketFullScreen = () => {
  const [uploadedFile, setUploadedFile] = useState(null);
  const [taskFiles, setTaskFiles] = useState([]);
  const [acceptModalOpen, setAcceptModalOpen] = useState(false);
+  const { showNotification } = useNotification();

  useEffect(() => {
    apiRequest(`/task/get-task?task_id=${ticketId.id}`).then((taskInfo) => {
@ -175,7 +180,13 @@ export const TicketFullScreen = () => {
        title: inputsValue.title,
        description: inputsValue.description,
      },
-    }).then(() => {});
+    }).then(() => {
+      showNotification({
+        show: true,
+        text: "Изменения сохранены",
+        type: "success",
+      });
+    });
  }

  function createComment() {
@ -988,11 +999,27 @@ export const TicketFullScreen = () => {
                    <img src={link} alt="link"></img>
                    <p onClick={copyTicketLink}>ссылка на задачу</p>
                  </div>
-                  <div onClick={archiveTask}>
+                  <div
+                    onClick={archiveTask}
+                    className={
+                      profileInfo.id_user === projectInfo.owner_id ||
+                      profileInfo.id_user === taskInfo.user_id
+                        ? ""
+                        : "disable"
+                    }
+                  >
                    <img src={archive} alt="arch"></img>
                    <p>в архив</p>
                  </div>
-                  <div onClick={deleteTask}>
+                  <div
+                    onClick={deleteTask}
+                    className={
+                      profileInfo.id_user === projectInfo.owner_id ||
+                      profileInfo.id_user === taskInfo.user_id
+                        ? ""
+                        : "disable"
+                    }
+                  >
                    <img src={del} alt="delete"></img>
                    <p>удалить</p>
                  </div>
--- a/src/components/Navigation/Navigation.jsx
+++ b/src/components/Navigation/Navigation.jsx
@ -17,6 +17,7 @@ export const Navigation = () => {
  const [user] = useState(
    localStorage.getItem("role_status") === "18" ? "partner" : "developer"
  );
+
  const [navInfo] = useState({
    developer: [
      {
--- a/src/components/SideBar/sidebar.scss
+++ b/src/components/SideBar/sidebar.scss
@ -11,7 +11,6 @@
    position: fixed;
    width: 100% !important;
    height: 80px;
-    margin-bottom: 50px;
  }

  @media (max-width: 1440px) {
--- a/src/components/SliderWorkers/sliderWorkers.scss
+++ b/src/components/SliderWorkers/sliderWorkers.scss
@ -32,6 +32,15 @@
      line-height: 22px;
      color: #000000;
    }
+
+    @media (max-width: 1024px) {
+      text-align: center;
+      margin-top: 20px;
+
+      p {
+        margin-top: 15px;
+      }
+    }
  }

  .slick-list {
--- a/src/pages/AuthForDevelopers/authForDevelopers.scss
+++ b/src/pages/AuthForDevelopers/authForDevelopers.scss
@ -21,11 +21,23 @@
  &__vector-black {
    top: 460px;
    right: -224px;
+
+    @media (max-width: 1200px) {
+      top: 370px;
+    }
+
+    @media (max-width: 1024px) {
+      top: 180px;
+    }
  }

  &__arrow {
    margin-top: 360px;
    z-index: 99;
+
+    @media (max-width: 1200px) {
+      display: none;
+    }
  }

  @media (max-width: 575.98px) {
@ -42,6 +54,10 @@
    padding-top: 30px;
    position: relative;
    padding-bottom: 310px;
+
+    @media (max-width: 1200px) {
+      display: none;
+    }
  }

  &__info-box {
--- a/src/pages/AuthForPartners/authForPartners.scss
+++ b/src/pages/AuthForPartners/authForPartners.scss
@ -21,11 +21,23 @@
  &__vector-black {
    top: 460px;
    right: -224px;
+
+    @media (max-width: 1200px) {
+      top: 370px;
+    }
+
+    @media (max-width: 1024px) {
+      top: 180px;
+    }
  }

  &__arrow {
    margin-top: 360px;
    cursor: pointer;
+
+    @media (max-width: 1200px) {
+      display: none;
+    }
  }

  @media (max-width: 575.98px) {
@ -43,6 +55,10 @@
    padding-top: 30px;
    position: relative;
    padding-bottom: 310px;
+
+    @media (max-width: 1200px) {
+      display: none;
+    }
  }

  @media (max-width: 575.98px) {
@ -305,7 +321,7 @@
      transform: rotate(90deg);
    }

-    @media (max-width: 660px) {
+    @media (max-width: 1024px) {
      margin: 15px 0;
    }
  }
--- a/src/pages/CompanyInfo/companyInfo.scss
+++ b/src/pages/CompanyInfo/companyInfo.scss
@ -3,6 +3,10 @@
    font-family: "LabGrotesque", sans-serif;
    background-color: #F1F1F1;
    padding-top: 60px;
+
+    @media (max-width: 1375px) {
+      padding-top: 120px;
+    }
  }

  &__title {
@ -17,6 +21,10 @@
      color: #52B709;
      font-weight: 700;
    }
+
+    @media (max-width: 500px) {
+      font-size: 35px;
+    }
  }

  &__subTitle {
@ -25,6 +33,10 @@
    text-align: center;
    font-size: 22px;
    line-height: 32px;
+
+    @media (max-width: 500px) {
+      font-size: 18px;
+    }
  }

  .arrowElement {
@ -35,6 +47,10 @@
    display: flex;
    justify-content: center;
    align-items: center;
+
+    @media (max-width: 850px) {
+      display: none;
+    }
  }

  .arrowDown {
@ -42,6 +58,10 @@
    img {
      transform: rotate(90deg);
    }
+
+    @media (max-width: 500px) {
+      margin: 15px auto;
+    }
  }

  &__info {
@ -68,6 +88,19 @@
        ul {
          padding-left: 18px;
        }
+
+        @media (max-width: 700px) {
+          width: 100%;
+        }
+
+        @media (max-width: 600px) {
+          padding: 15px;
+        }
+      }
+
+      @media (max-width: 700px) {
+        flex-direction: column;
+        row-gap: 10px;
      }
    }

@ -78,6 +111,12 @@
      margin: 20px auto 70px;
      max-width: 1000px;

+      @media (max-width: 700px) {
+        margin: 10px auto 30px;
+        text-align: center;
+        row-gap: 5px;
+      }
+
      span {
        color: #52B709;
        font-weight: 700;
@ -94,10 +133,18 @@
        font-size: 18px;
        line-height: 22px;
        row-gap: 20px;
+
+        @media (max-width: 700px) {
+          row-gap: 8px;
        }
      }
    }

+    @media (max-width: 500px) {
+      padding-top: 30px;
+    }
+  }
+
  &__countingBlock {
    padding: 27px 185px 26px 45px;
    border-radius: 12px;
@ -108,10 +155,34 @@
    row-gap: 16px;
    position: relative;

+    @media (max-width: 1125px) {
+      padding-right: 45px;
+    }
+
+    @media (max-width: 850px) {
+      padding: 20px 25px;
+    }
+
+    @media (max-width: 780px) {
+      row-gap: 5px;
+      padding: 15px;
+    }
+
    &__head {
      display: flex;
      justify-content: space-between;
      align-items: center;
+
+      @media (max-width: 850px) {
+        justify-content: space-evenly;
+      }
+
+      @media (max-width: 750px) {
+        text-align: center;
+        img {
+          display: none;
+        }
+      }
    }

    &__bottom {
@ -135,12 +206,21 @@
      span {
        color: #52B709;
      }
+
+      @media (max-width: 780px) {
+        text-align: center;
+        row-gap: 5px;
+      }
    }

    .countingBlock__info {
      display: flex;
      flex-direction: column;
      row-gap: 12px;
+
+      @media (max-width: 850px) {
+        row-gap: 5px;
+      }
    }

    .countingBlock {
@ -162,6 +242,18 @@
      position: absolute;
      right: -140px;
      top: -55px;
+
+      @media (max-width: 1440px) {
+        right: -25px;
+      }
+
+      @media (max-width: 1210px) {
+        right: 25px;
+      }
+
+      @media (max-width: 1125px) {
+        display: none;
+      }
    }
  }
 }
--- a/src/pages/ProjectTracker/ProjectTracker.js
+++ b/src/pages/ProjectTracker/ProjectTracker.js
@ -546,6 +546,7 @@ export const ProjectTracker = () => {
                  projectId={projectBoard.id}
                  projectName={projectBoard.name}
                  projectUsers={projectBoard.projectUsers}
+                  projectOwnerId={projectBoard.owner_id}
                />
              )}

@ -621,6 +622,7 @@ export const ProjectTracker = () => {
                            </div>
                          </div>
                        )}
+                        <div className="tasksContainer">
                          {column.tasks.map((task) => {
                            return (
                              <div
@ -677,20 +679,26 @@ export const ProjectTracker = () => {
                                    />
                                  )}
                                </div>
+                                {task.dead_line && (
                                  <div className="tasks__board__item__deadLine">
                                    <p>Срок исполнения:</p>
                                    <span>
-                                  {task.dead_line
-                                    ? getCorrectDate(task.dead_line)
-                                    : "Не выбран"}
+                                      {getCorrectDate(task.dead_line)}
                                    </span>
                                  </div>
+                                )}
                                <div className="tasks__board__item__info">
                                  <div className="tasks__board__item__info__more">
-                                  <img src={commentsBoard} alt="commentsImg" />
+                                    <img
+                                      src={commentsBoard}
+                                      alt="commentsImg"
+                                    />
                                    <span>
                                      {task.comment_count}{" "}
-                                    {caseOfNum(task.comment_count, "comments")}
+                                      {caseOfNum(
+                                        task.comment_count,
+                                        "comments"
+                                      )}
                                    </span>
                                  </div>
                                  <div className="tasks__board__item__info__more">
@ -712,6 +720,7 @@ export const ProjectTracker = () => {
                            );
                          })}
                        </div>
+                      </div>
                    );
                  })}
                {Boolean(projectBoard?.columns) &&
--- a/src/pages/Tracker/Tracker.js
+++ b/src/pages/Tracker/Tracker.js
@ -9,7 +9,7 @@ import {
  setToggleTab,
 } from "@redux/projectsTrackerSlice";

-import { urlForLocal } from "@utils/helper";
+import { caseOfNum, urlForLocal } from "@utils/helper";

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

@ -295,7 +295,10 @@ export const Tracker = () => {
            <div className="archive__tasks">
              <div className="archive__title">
                <h3>Архив задач:</h3>
-                <p>{filterCompleteTasks.length} задач(а)</p>
+                <p>
+                  {`${filterCompleteTasks.length} 
+                    ${caseOfNum(filterCompleteTasks.length, "tasks")}`}
+                </p>
                <div className="archive__tasks__search">
                  <img src={search} alt="search" />
                  <input
@ -354,8 +357,14 @@ export const Tracker = () => {
              <div className="archive__title">
                <h3>Архив проектов:</h3>
                <p>
-                  {projects.filter((project) => project.status === 10).length}{" "}
-                  проект(ов)
+                  {`${
+                    projects.filter((project) => project.status === 10).length
+                  } 
+                     ${caseOfNum(
+                       projects.filter((project) => project.status === 10)
+                         .length,
+                       "projects"
+                     )}`}
                </p>
              </div>
              <div className="archive__tasksWrapper">
--- a/src/pages/Tracker/tracker.scss
+++ b/src/pages/Tracker/tracker.scss
@ -801,16 +801,17 @@
            0px 0px 0px 1px rgba(60, 66, 87, 0.08),
            0px 1px 1px rgba(0, 0, 0, 0.06);
          border-radius: 8px;
-          padding: 16px 14px 16px 8px;
-          min-width: 353px;
-          max-width: 353px;
+          padding: 12px 10px 12px 8px;
+          min-width: 365px;
+          max-width: 380px;
          display: flex;
          flex-direction: column;
-          row-gap: 16px;
+          row-gap: 10px;
          height: fit-content;
          position: relative;
          transition: all 0.3s ease;
          transform: scaleY(-1);
+          min-height: 815px;

          @media (max-width: 900px) {
            min-width: auto;
@ -819,6 +820,14 @@
            transform: scaleX(1);
          }

+          .tasksContainer {
+            display: flex;
+            flex-direction: column;
+            row-gap: 16px;
+            max-height: 750px;
+            overflow: auto;
+            padding: 8px;
+
            &::-webkit-scrollbar {
              width: 3px;
              border-radius: 10px;
@ -833,6 +842,7 @@
              background: #c5c0c6;
              border-radius: 20px;
            }
+          }

          &__hover {
            box-shadow: 0px 2px 10px #9cc480,
--- a/src/utils/helper.js
+++ b/src/utils/helper.js
@ -65,30 +65,17 @@ export function getCorrectRequestDate(date) {
 }

 export function caseOfNum(number, type) {
-  const comments = ["коментарий", "комментария", " коментариев"];
-  const files = ["файл", "файла", "файлов"];
-  const persons = ["участник", "участника", "участников"];
+  const allTypes = {
+    comments: ["коментарий", "комментария", " коментариев"],
+    files: ["файл", "файла", "файлов"],
+    persons: ["участник", "участника", "участников"],
+    tasks: ["задача", "задачи", "задач"],
+    projects: ["проект", "проекта", "проектов"],
+  };
  const cases = [2, 0, 1, 1, 1, 2];
-  if (type === "comments") {
-    return comments[
+  return allTypes[type][
    number % 100 > 4 && number % 100 < 20
      ? 2
      : cases[number % 10 < 5 ? number % 10 : 5]
  ];
-  }
-  if (type === "files") {
-    return files[
-      number % 100 > 4 && number % 100 < 20
-        ? 2
-        : cases[number % 10 < 5 ? number % 10 : 5]
-    ];
-  }
-
-  if (type === "persons") {
-    return persons[
-      number % 100 > 4 && number % 100 < 20
-        ? 2
-        : cases[number % 10 < 5 ? number % 10 : 5]
-    ];
-  }
 }