tracker fixes

2023-07-07 00:46:40 +03:00
parent e6689c315d
commit 7f0dc9612b
14 changed files with 226 additions and 97 deletions
--- a/src/assets/images/archiveIcon.png
+++ b/src/assets/images/archiveIcon.png
--- a/src/components/AuthBox/authBox.scss
+++ b/src/components/AuthBox/authBox.scss
@@ -133,13 +133,14 @@
      text-align: center;
      border: 2px solid #6aaf5c;
      margin-right: 1.5rem;
+      transition: 0.3s;

      &:hover {
-        background-image: none;
-        background-color: #ffffff;
-        border: 2px solid #6aaf5c;
-        color: #6aaf5c !important;
-        transition: 0.3s;
+        transform: scale(1.03);
+        //background-image: none;
+        //background-color: #ffffff;
+        //border: 2px solid #6aaf5c;
+        //color: #6aaf5c !important;

        .loader * {
          fill: #6aaf5c;
--- a/src/components/Common/Loader/loader.scss
+++ b/src/components/Common/Loader/loader.scss
@@ -6,9 +6,9 @@
  align-items: center;
  position: relative;

-  &:hover {
-    path {
-      fill: #6aaf5c;
-    }
-  }
+  //&:hover {
+  //  path {
+  //    fill: #6aaf5c;
+  //  }
+  //}
 }
--- a/src/components/Common/ModalLayout/modalLayout.scss
+++ b/src/components/Common/ModalLayout/modalLayout.scss
@@ -15,11 +15,60 @@
    position: relative;
    background: linear-gradient(180deg, #ffffff 0%, #ebebeb 100%);
    border-radius: 24px;
-    padding: 60px 60px 30px 60px;
+    padding: 20px 40px 30px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
+
+    .selectPerson {
+      align-items: start;
+
+      &__info {
+        font-size: 15px;
+        font-weight: 300;
+        margin: 12px 0 20px;
+      }
+    }
+
+    .invite__blocks {
+      display: flex;
+      column-gap: 20px;
+
+      span {
+        margin-top: 8px;
+        font-size: 15px;
+        font-weight: 300;
+      }
+
+      .invitePersonBlock {
+        display: flex;
+        flex-direction: column;
+        row-gap: 20px;
+        &__input {
+          margin: 0;
+          min-width: 320px;
+          height: 42px;
+
+          input {
+            height: 42px;
+          }
+        }
+
+        &__btn {
+          margin: 0 auto 0 0;
+          max-width: 242px;
+          width: 100%;
+        }
+      }
+    }
+
+    .select__person {
+      display: flex;
+      flex-direction: column;
+      row-gap: 10px;
+      padding: 39px 10px 29px 10px;
+    }
  }
 }

--- a/src/components/Modal/Tracker/ModalTicket/ModalTicket.jsx
+++ b/src/components/Modal/Tracker/ModalTicket/ModalTicket.jsx
@@ -363,9 +363,9 @@ export const ModalTiсket = ({
          </h3>

          <div className="content__task">
-            <span>Задача</span>
            {editOpen ? (
              <input
+                maxLength="100"
                value={inputsValue.title}
                onChange={(e) => {
                  setInputsValue((prevValue) => ({
@@ -463,8 +463,8 @@ export const ModalTiсket = ({
        </div>
        <div className="workers">
          <div className="workers_box task__info">
-            <span className="exit" onClick={() => setActive(false)}></span>
-            <span className="nameProject">{task.title}</span>
+            <span className="exit" onClick={() => setActive(false)}>
+            </span>
            <p className="workers__creator">Создатель : {task.user?.fio}</p>

            {executor ? (
--- a/src/components/Modal/Tracker/ModalTicket/modalTicket.scss
+++ b/src/components/Modal/Tracker/ModalTicket/modalTicket.scss
@@ -33,6 +33,9 @@
      display: flex;
      align-items: center;
      flex-direction: row;
+      color: #1458DD;
+      font-weight: 700;
+      font-size: 22px;

      &__category {
        margin-right: 17px;
@@ -104,9 +107,9 @@

      h5 {
        font-family: "Inter", sans-serif;
-        font-weight: 500;
+        font-weight: 600;
        font-style: normal;
-        font-size: 16px;
+        font-size: 19px;
        line-height: 24px;
        color: #1a1919;
        margin-bottom: 0;
@@ -280,7 +283,7 @@
    &__description {
      display: flex;
      flex-direction: column;
-      margin-top: 10px;
+      margin-top: 12px;

      textarea {
        min-height: 120px;
@@ -405,6 +408,7 @@
    display: flex;
    flex-direction: column;
    font-size: 14px;
+    margin-top: 8px;

    &__list {
      display: flex;
@@ -420,13 +424,17 @@
    .exit {
      cursor: pointer;
      position: absolute;
-      top: 35px;
-      right: 40px;
+      top: 25px;
+      right: 30px;
+      width: 13px;
+      height: 13px;
+      display: flex;
+      align-items: center;
+      justify-content: center;

      &:before,
      &:after {
        content: "";
-        position: absolute;
        width: 16px;
        height: 2px;
        background: #263238;
@@ -459,6 +467,7 @@
      align-items: center;
      position: relative;
      margin-bottom: 5px;
+      margin-top: 12px;

      span {
        color: #000000;
@@ -552,6 +561,7 @@
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
+      margin-bottom: 8px;

      span {
        margin-left: 5px;
@@ -585,7 +595,6 @@
    .task__info {
      display: flex;
      flex-direction: column;
-      row-gap: 5px;

      .delete {
        cursor: pointer;
@@ -669,6 +678,10 @@
          align-items: center;
          padding-left: 10px;

+          img {
+            width: 11px;
+          }
+
          p {
            margin: 0 0 0 12px;
          }
--- a/src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx
+++ b/src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx
@@ -24,8 +24,7 @@ import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadc
 import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
 import TrackerTaskComment from "@components/TrackerTaskComment/TrackerTaskComment";

-import archive from "assets/icons/archive.svg";
-import archive2 from "assets/icons/archive.svg";
+import archive from "assets/images/archiveIcon.png";
 import arrow from "assets/icons/arrows/arrowCalendar.png";
 import arrowStart from "assets/icons/arrows/arrowStart.png";
 import close from "assets/icons/close.png";
@@ -412,7 +411,7 @@ export const TicketFullScreen = () => {
          <>
            <div className="tracker__tabs__content content-tabs">
              <div className="tasks__head">
-                <div className="tasks__head__wrapper">
+                <div className="tasks__head__wrapper tasks__head__wrapper__fullScreen">
                  <h5>Проект : {projectInfo.name}</h5>

                  <TrackerModal
@@ -518,9 +517,9 @@ export const TicketFullScreen = () => {
            <div className="modal-tiket__content ticket">
              <div className="content ticket-whith">
                <div className="content__task">
-                  <span>Задача</span>
                  {editOpen ? (
                    <input
+                      maxLength="100"
                      value={inputsValue.title}
                      onChange={(e) => {
                        setInputsValue((prevValue) => ({
@@ -810,7 +809,7 @@ export const TicketFullScreen = () => {
                    <p onClick={copyTicketLink}>ссылка на задачу</p>
                  </div>
                  <div>
-                    <img src={archive2} alt="arch"></img>
+                    <img src={archive} alt="arch"></img>
                    <p>в архив</p>
                  </div>
                  <div onClick={deleteTask}>
--- a/src/components/Modal/Tracker/TrackerModal/TrackerModal.jsx
+++ b/src/components/Modal/Tracker/TrackerModal/TrackerModal.jsx
@@ -53,7 +53,7 @@ export const TrackerModal = ({
  const [valueColumn, setValueColumn] = useState("");
  const [nameProject, setNameProject] = useState("");
  const [valueTiket, setValueTiket] = useState("");
-  const [descriptionTicket, setDescriptionTicket] = useState("Описание задачи");
+  const [descriptionTicket, setDescriptionTicket] = useState("");
  const [workers, setWorkers] = useState([]);
  const [selectWorkersOpen, setSelectWorkersOpen] = useState(false);
  const [selectedWorker, setSelectedWorker] = useState(null);
@@ -271,62 +271,78 @@ export const TrackerModal = ({
      // }}
    >
      {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 className='select__person'>
+            <div className="title-project selectPerson">
+              <h4>Добавьте участника</h4>
+              {/*<div className="input-container">*/}
+              {/*  <input*/}
+              {/*    className="name-project"*/}
+              {/*    value={emailWorker}*/}
+              {/*    onChange={(e) => setEmailWorker(e.target.value)}*/}
+              {/*  />*/}
+              {/*</div>*/}
+              <p className='selectPerson__info'>Выберите пользователя в проекте или добавьте по e- mail</p>
+              <div className='invite__blocks'>
+                <div className='addPersonBlock'>
+                  <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>
+                  <BaseButton styles={"button-add addPersonBtn"} onClick={addUserToProject}>
+                    Добавить
+                  </BaseButton>
                </div>
-              )}
+                <span>или</span>
+                <div className='invitePersonBlock'>
+                  <div className='input-container invitePersonBlock__input'>
+                    <input className="name-project" placeholder='email' type="email" />
+                  </div>
+                  <BaseButton styles={"button-add invitePersonBlock__btn"}>
+                    Отправить приглашение
+                  </BaseButton>
+                </div>
+              </div>
            </div>
          </div>
-          <BaseButton styles={"button-add"} onClick={addUserToProject}>
-            Добавить
-          </BaseButton>
-        </div>
+        </>
      )}
      {modalType === "createTiketProject" && (
        <>
@@ -334,6 +350,7 @@ export const TrackerModal = ({
            <h4>Введите название и описание задачи</h4>
            <div className="input-container">
              <input
+                maxLength="100"
                className="name-project"
                value={valueTiket}
                onChange={(e) => setValueTiket(e.target.value)}
@@ -355,6 +372,7 @@ export const TrackerModal = ({
                  "blockQuote",
                ],
                removePlugins: ["BlockQuote"],
+                placeholder: "Описание задачи"
              }}
              onChange={(event, editor) => {
                const data = editor.getData();
@@ -443,6 +461,7 @@ export const TrackerModal = ({
            <h4>{titleProject}</h4>
            <div className="input-container">
              <input
+                maxLength="30"
                className="name-project"
                value={nameProject}
                onChange={(e) => setNameProject(e.target.value)}
@@ -477,6 +496,7 @@ export const TrackerModal = ({
            <h4>Введите название колонки</h4>
            <div className="input-container">
              <input
+                maxLength="100"
                className="name-project"
                value={valueColumn}
                onChange={(e) => setValueColumn(e.target.value)}
--- a/src/components/Modal/Tracker/TrackerModal/trackerModal.scss
+++ b/src/components/Modal/Tracker/TrackerModal/trackerModal.scss
@@ -30,7 +30,6 @@
  display: flex;
  align-items: center;
  flex-direction: column;
-  margin: 0 0 15px 0;
  row-gap: 5px;

  .select-priority {
@@ -79,7 +78,7 @@
  }

  .input-container {
-    width: 320px;
+    width: 100%;
    height: 35px;
    background: #ffffff;
    border-radius: 8px;
@@ -91,7 +90,7 @@
  }

  .ck-editor {
-    max-width: 320px;
+    width: 100%;
  }

  .ck-editor__editable.ck-rounded-corners {
@@ -104,6 +103,10 @@
    border-radius: 8px 8px 0 0 !important;
  }

+  .ck-placeholder {
+    display: block !important;
+  }
+
  .ck-content {
    border: none !important;
    border-radius: 0 0 8px 8px !important;
@@ -111,7 +114,7 @@
  }

  .select__executor {
-    width: 320px;
+    width: 100%;
    background: white;
    border-radius: 8px;
    margin: 5px 0;
@@ -215,6 +218,7 @@
    cursor: pointer;
    position: relative;
    min-width: 320px;
+    height: 42px;
    width: 100%;

    p {
@@ -237,7 +241,7 @@
      position: absolute;
      width: 100%;
      padding: 9.5px 12px;
-      top: 35px;
+      top: 48px;
      left: 0;
      background: white;
      border-radius: 5px;
@@ -286,6 +290,11 @@
  margin: 0 auto;
 }

+.addPersonBtn {
+  margin: 0 auto 0 0;
+  margin-top: 20px;
+}
+
 .modal-add.active {
  transform: scale(1);
 }
@@ -293,8 +302,13 @@
 .exit {
  cursor: pointer;
  position: absolute;
-  top: 35px;
-  right: 40px;
+  top: 15px;
+  right: 20px;
+  width: 13px;
+  height: 13px;
+  display: flex;
+  align-items: center;
+  justify-content: center;

  &:before,
  &:after {
--- a/src/components/Modal/TrackerModal/trackerModal.scss
+++ b/src/components/Modal/TrackerModal/trackerModal.scss
@@ -153,11 +153,15 @@
  position: absolute;
  top: 35px;
  right: 40px;
+  width: 13px;
+  height: 13px;
+  display: flex;
+  align-items: center;
+  justify-content: center;

  &:before,
  &:after {
    content: "";
-    position: absolute;
    width: 16px;
    height: 2px;
    background: #263238;
--- a/src/pages/ProjectTracker/ProjectTracker.js
+++ b/src/pages/ProjectTracker/ProjectTracker.js
@@ -34,7 +34,7 @@ import { Navigation } from "@components/Navigation/Navigation";
 import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
 import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";

-import archive from "assets/icons/archiveTracker.svg";
+import archive from "assets/images/archiveIcon.png";
 import arrow from "assets/icons/arrows/arrowCalendar.png";
 import arrowDown from "assets/icons/arrows/selectArrow.png";
 import close from "assets/icons/close.png";
@@ -390,7 +390,7 @@ export const ProjectTracker = () => {
                        />
                        <div className="persons__list__count">
                          <span>{projectBoard.projectUsers?.length}</span>
-                          участник
+                          {caseOfNum(projectBoard.projectUsers?.length, "persons")}
                        </div>
                        <div className="persons__list__info">
                          <span>В проекте - </span>
@@ -480,7 +480,7 @@ export const ProjectTracker = () => {
                        setSelectedExecutorOpen(!selectExecutorOpen)
                      }
                    >
-                      <p>Выберите исполнитель</p>
+                      <p>Выберите исполнителя</p>
                      <img
                        className={selectExecutorOpen ? "open" : ""}
                        src={arrowDown}
--- a/src/pages/Tracker/Tracker.js
+++ b/src/pages/Tracker/Tracker.js
@@ -23,7 +23,7 @@ import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadc
 import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
 import ProjectTiket from "@components/ProjectTiket/ProjectTiket";

-import archive from "assets/icons/archiveTracker.svg";
+import archive from "assets/images/archiveIcon.png";
 import search from "assets/icons/serchIcon.png";
 import project from "assets/icons/trackerProject.svg";
 import tasks from "assets/icons/trackerTasks.svg";
--- a/src/pages/Tracker/tracker.scss
+++ b/src/pages/Tracker/tracker.scss
@@ -55,6 +55,11 @@
      align-items: center;
      color: black;

+      img {
+        width: 16px;
+        height: 16px;
+      }
+
      @media (max-width: 490px) {
        padding: 8px 20px 8px 14px;
      }
@@ -214,6 +219,10 @@
            justify-content: space-between;
            padding: 0 10px;
            align-items: center;
+
+            &__fullScreen {
+              max-width: 1160px;
+            }
          }

          h5 {
@@ -616,6 +625,8 @@
          margin: 0 auto;
          overflow: auto;
          max-width: 100%;
+          transform: scaleY(-1);
+          align-items: end;

          &::-webkit-scrollbar {
            height: 8px;
@@ -650,6 +661,7 @@
          transition: all 0.3s ease;
          //max-height: 500px;
          //overflow-y: auto;
+          transform: scaleY(-1);

          &::-webkit-scrollbar {
            width: 3px;
@@ -692,9 +704,8 @@
            transition: 0.4s;

            &:hover {
-              transform: scale(0.99);
-              box-shadow: 4px 4px 8px 0px rgba(34, 60, 80, 0.11);
-              transition: 0.4s;
+              transform: scale(1.025);
+              transition: 0.3s;
            }

            &__hide {
@@ -712,6 +723,12 @@
                font-size: 16px;
                line-height: 24px;
                margin-bottom: 0;
+                max-height: 100px;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                display: -webkit-box;
+                -webkit-line-clamp: 5;
+                -webkit-box-orient: vertical;
              }

              span {
@@ -852,11 +869,13 @@
          &__noItems {
            font-weight: 500;
            font-size: 25px;
+            transform: scaleY(-1);
          }

          &__noTasks {
            display: flex;
            flex-direction: column;
+            transform: scaleY(-1);

            &Info {
              display: flex;
@@ -1057,6 +1076,7 @@
              &__info {
                display: flex;
                flex-direction: column;
+                max-width: 730px;

                h5 {
                  font-weight: 700;
@@ -1068,7 +1088,7 @@
                p {
                  font-size: 16px;
                  line-height: 32px;
-                  max-width: 400px;
+                  max-width: 710px;
                  overflow: hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;
--- a/src/utils/helper.js
+++ b/src/utils/helper.js
@@ -64,7 +64,8 @@ export function getCorrectRequestDate(date) {

 export function caseOfNum(number, type) {
  const comments = ["коментарий", "комментария", " коментариев"];
-  const files = ["файлов", "файла", "файлов"];
+  const files = ["файл", "файла", "файлов"];
+  const persons = ["участник", "участника", "участников"]
  const cases = [2, 0, 1, 1, 1, 2];
  if (type === "comments") {
    return comments[
@@ -80,4 +81,12 @@ export function caseOfNum(number, type) {
        : 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]
+        ];
+  }
 }