Merge remote-tracking branch 'origin/parthners-area-fix-modal' into parthners-area

2023-03-28 14:42:58 +03:00 · 2023-03-28 14:42:58 +03:00 · c1eb60d3ab
commit c1eb60d3ab
parent dedf0588b1 76334aec99
11 changed files with 233 additions and 83 deletions
--- a/src/components/SideBar/sidebar.scss
+++ b/src/components/SideBar/sidebar.scss
@ -135,9 +135,10 @@
      line-height: 32px;
      color: #000000;
    }
+
    span {
-      font-size: 5px;
-      margin-left: 41px;
+      font-size: 12px;
+      margin-left: 0px;
    }
  }

@ -194,6 +195,10 @@
  width: 424px;
  left: 140px;

+  @media (max-width: 1440px) {
+    left: 79px;
+  }
+
  @media (max-width: 1024px) {
    left: 0;
    width: 100%;
--- a/src/components/SliderWorkers/SliderWorkers.js
+++ b/src/components/SliderWorkers/SliderWorkers.js
@ -30,11 +30,14 @@ export const SliderWorkers = ({title, titleInfo, subTitle}) => {
      skils: "React / Vue Front end, Middle разработчик",
    },
  ]);
+
  const settings = {
    infinite: true,
-    speed: 300,
+    speed: 1000,
    slidesToShow: 3,
    slidesToScroll: 1,
+    autoplay: true,
+    autoplaySpeed: 4500,
  };

  if (window.innerWidth < 575) {
@ -54,9 +57,9 @@ export const SliderWorkers = ({title, titleInfo, subTitle}) => {
            : ""
        }
        <Slider {...settings}>
-          {workers.map((worker) => {
+          {workers.map((worker, index) => {
            return (
-              <div className="worker">
+              <div className="worker" key={index}>
                <img src={worker.avatar}></img>
                <div className="worker-description">
                  <p>{worker.skils}</p>
--- a/src/components/UI/ModalCreate/ModalCreate.js
+++ b/src/components/UI/ModalCreate/ModalCreate.js
@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { useDispatch } from "react-redux";
-import {  setProject } from "../../../redux/projectsTrackerSlice";
+import { setProject } from "../../../redux/projectsTrackerSlice";

 import "./ModalCreate.scss";

@ -9,13 +9,17 @@ export const ModalCreate = ({ active, setActive, title }) => {
  const dispatch = useDispatch();

  function createName() {
-    let newItem = {
-      name: inputValue,
-      count: 0,
-    };
-    dispatch(setProject(newItem));
-    setActive(false);
-    setInputValue("")
+    if (inputValue === "") {
+      return;
+    } else {
+      let newItem = {
+        name: inputValue,
+        count: 0,
+      };
+      dispatch(setProject(newItem));
+      setActive(false);
+      setInputValue("");
+    }
  }

  return (
--- a/src/components/UI/ModalTiket/ModalTiket.js
+++ b/src/components/UI/ModalTiket/ModalTiket.js
@ -17,7 +17,7 @@ export const ModalTiket = ({ active, setActive }) => {
    code: "PR - 2245",
    creator: "Василий Тарасов",
    descriptions:
-      "На многих страницах сайта отсутствуют или некорректно заполнены метатеги Description. Это может негативно повлиять на представление сайта в результатах поиска.Необходимо исправить все страницы где есть ошибки или отсутствует Title и  Description.",
+      "На многих страницах сайта отсутствуют или некорректно заполнены метатеги Description. Это может негативно повлиять на представление сайта в результатах поиска. Необходимо исправить все страницы где есть ошибки или отсутствует Title и  Description.",
  });

  const [workers] = useState([
@ -44,7 +44,12 @@ export const ModalTiket = ({ active, setActive }) => {
          <h3 className="title-project">
            <img src={category} className="title-project__category"></img>
            Проект: {tiket.name}
+            <div className="title-project__menu">
+              <p>Редактировать</p>
+              <p>Удалить</p>
+            </div>
          </h3>
+
          <div className="content__task">
            <h5>{tiket.code}</h5>
            <div className="content__description">
--- a/src/components/UI/ModalTiket/ModalTiket.scss
+++ b/src/components/UI/ModalTiket/ModalTiket.scss
@ -39,6 +39,24 @@
      &__category {
        margin-right: 17px;
      }
+
+      &__menu {
+        display: flex;
+        align-items: center;
+        margin-left: 110px;
+
+        p {
+          font-weight: 400;
+          font-size: 14px;
+          color: #252c32;
+          margin: 0 30px 0 0;
+
+          &:hover {
+            cursor: pointer;
+            text-decoration: underline;
+          }
+        }
+      }
    }

    &__task {
--- a/src/pages/AuthForDevelopers/AuthForDevelopers.js
+++ b/src/pages/AuthForDevelopers/AuthForDevelopers.js
@ -31,6 +31,13 @@ const AuthForDevelopers = () => {
    }
  }, [getToken]);

+  function scrollToForm() {
+    window.scrollTo({
+      top: 850,
+      behavior: "smooth",
+    });
+  }
+
  return (
    <section className="auth-developers">
      <AuthHeader />
@ -44,13 +51,13 @@ const AuthForDevelopers = () => {
        />
        <div className="container">
          <div className="change-mode">
-            <div className="change-mode__arrow">
+            <div className="change-mode__arrow" onClick={() => scrollToForm()}>
              <img src={arrowBtn}></img>
            </div>
            <div className="buttons">
              <Link to={"/authdev"}>
                <button className="change-mode__developersForDev">
-                  Для разработчика
+                  Для разработчиков
                </button>
              </Link>
              <Link to={"/auth"}>
--- a/src/pages/AuthForDevelopers/authForDevelopers.scss
+++ b/src/pages/AuthForDevelopers/authForDevelopers.scss
@ -25,6 +25,7 @@

  &__arrow {
    margin-top: 360px;
+    z-index: 99;
  }

  @media (max-width: 575.98px) {
--- a/src/pages/AuthForPartners/AuthForPartners.js
+++ b/src/pages/AuthForPartners/AuthForPartners.js
@ -30,6 +30,13 @@ const AuthForPartners = () => {
    }
  }, [getToken]);

+  function scrollToForm() {
+    window.scrollTo({
+      top: 850,
+      behavior: "smooth",
+    });
+  }
+
  return (
    <section className="auth-partners">
      <AuthHeader />
@ -39,13 +46,13 @@ const AuthForPartners = () => {
        <img className="auth-partners__vector-black" src={vectorBlack} alt="" />
        <div className="container">
          <div className="change-mode">
-            <div className="change-mode__arrow">
+            <div className="change-mode__arrow" onClick={() => scrollToForm()}>
              <img src={arrowBtn}></img>
            </div>
            <div className="buttons">
              <Link to={"/authdev"}>
                <button className="change-mode__developersForPart">
-                  Для разработчика
+                  Для разработчиков
                </button>
              </Link>
              <Link to={"/auth"}>
--- a/src/pages/AuthForPartners/authForPartners.scss
+++ b/src/pages/AuthForPartners/authForPartners.scss
@ -25,6 +25,7 @@

  &__arrow {
    margin-top: 360px;
+    cursor: pointer;
  }

  @media (max-width: 575.98px) {
@ -286,6 +287,7 @@
  align-items: center;

  &__arrow {
+    cursor: pointer;
    margin: 49px 0 43px 0;
    width: 48px;
    height: 48px;
--- a/src/pages/Tracker/Tracker.js
+++ b/src/pages/Tracker/Tracker.js
@ -4,6 +4,9 @@ import { ProfileHeader } from "../../components/ProfileHeader/ProfileHeader";
 import {ProfileBreadcrumbs} from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs";
 import { Footer } from "../../components/Footer/Footer";

+import { useDispatch, useSelector } from "react-redux";
+import { getProjects } from "../../redux/projectsTrackerSlice";
+
 import ModalTiket from "../../components/UI/ModalTiket/ModalTiket";
 import ModalCreate from "../../components/UI/ModalCreate/ModalCreate";

@ -17,25 +20,10 @@ import filesBoard from "../../images/filesBoard.svg";
 import search from "../../images/search.svg";

 import "./tracker.scss";
-import { useDispatch, useSelector } from "react-redux";
-import { getProjects } from "../../redux/projectsTrackerSlice";

 export const Tracker = () => {
  const [toggleTab, setToggleTab] = useState(1);
-  // const [projects] = useState([
-  //   {
-  //     name: "Разработка трекера",
-  //     count: 4,
-  //   },
-  //   {
-  //     name: "Кинотеатр",
-  //     count: 4,
-  //   },
-  //   {
-  //     name: "Проект страхование",
-  //     count: 4,
-  //   },
-  // ]);
+
  const [tabTaskMok, setTabTaskMok] = useState([
    {
      name: "Открытые",
@ -245,9 +233,20 @@ export const Tracker = () => {

  const [filterCompleteTasks, setFilterCompleteTasks] = useState(completeTasks);

+  // Modal State
  const [modalActiveTicket, setModalActiveTicket] = useState(false);
  const [modalCreateProject, setModalCreateProject] = useState(false);
  const [modalCreateColl, setModalCreateColl] = useState(false);
+  const [modalCreateTiket, setModalCreateTiket] = useState(false);
+  const [valueTiket, setValueTiket] = useState("");
+  const [valueColl, setValueColl] = useState("");
+  //
+
+  const [selectedTab, setSelectedTab] = useState({
+    name: "",
+    indexTab: 0,
+    task: [],
+  });

  const [startWrapperIndex, setStartWrapperIndex] = useState(null);
  const [wrapperHover, setWrapperHover] = useState([
@ -258,7 +257,6 @@ export const Tracker = () => {
  ]);

  const projects = useSelector(getProjects);
-  const dispatch = useDispatch();

  const toggleTabs = (index) => {
    setToggleTab(index);
@ -357,8 +355,42 @@ export const Tracker = () => {
    );
  }

-  function createProject() {
-    setModalCreateProject(true);
+  function selectedTabTask(e, wrapperIndex, name, tasks) {
+    let tab = { name: name, indexTab: wrapperIndex, task: tasks };
+    setSelectedTab(tab);
+    setModalCreateTiket(true);
+  }
+
+  function createTiket() {
+    tabTaskMok.filter((item) => {
+      if (item.name == selectedTab.name) {
+        let newTiket = {
+          task: valueTiket,
+          description: "Сверстать часть таблицы. Сверстать часть таблицы",
+          comments: 0,
+          files: 0,
+          avatarCreated: avatarTest,
+          avatarDo: avatarTest,
+          id: item.tasks.length + 1,
+        };
+
+        item.tasks.push(newTiket);
+      }
+    });
+    setModalCreateTiket(false);
+    setValueTiket("");
+  }
+
+  function createTab() {
+    let newTab = {
+      name: valueColl,
+      open: false,
+      tasks: [],
+    };
+
+    tabTaskMok.unshift(newTab);
+    setValueColl("");
+    setModalCreateColl(false);
  }

  return (
@ -421,7 +453,7 @@ export const Tracker = () => {
                  setActive={setModalCreateProject}
                  title={"Укажите название проекта:"}
                />
-                <button onClick={createProject}>
+                <button onClick={() => setModalCreateProject(true)}>
                  <span>+</span>Создать проект
                </button>
              </div>
@ -433,12 +465,32 @@ export const Tracker = () => {
                }
              >
                <div className="tasks__head">
-                  <ModalCreate
-                    active={modalCreateColl}
-                    setActive={setModalCreateColl}
-                    title={"Добавить колонку: "}
-                  />
                  <h4>Проект : Разработка трекера</h4>
+                  <div
+                    className={
+                      modalCreateColl ? "modal-project active" : "modal-project"
+                    }
+                    onClick={() => setModalCreateColl(false)}
+                  >
+                    <div
+                      className="modal-project__content"
+                      onClick={(e) => e.stopPropagation()}
+                    >
+                      <div className="title-project">
+                        <h4>Введите название карточки</h4>
+                        <div className="input-container">
+                          <input
+                            className="name-project"
+                            value={valueColl}
+                            onChange={(e) => setValueColl(e.target.value)}
+                          ></input>
+                        </div>
+                      </div>
+                      <button className="create-project" onClick={createTab}>
+                        Создать
+                      </button>
+                    </div>
+                  </div>
                  <span
                    className="tasks__head__add"
                    onClick={() => setModalCreateColl(true)}
@ -461,11 +513,38 @@ export const Tracker = () => {
                    <img src={selectArrow} alt="arrow" />
                  </div>
                </div>
+
                <ModalTiket
                  active={modalActiveTicket}
                  setActive={setModalActiveTicket}
                />

+                <div
+                  className={
+                    modalCreateTiket ? "modal-project active" : "modal-project"
+                  }
+                  onClick={() => setModalCreateTiket(false)}
+                >
+                  <div
+                    className="modal-project__content"
+                    onClick={(e) => e.stopPropagation()}
+                  >
+                    <div className="title-project">
+                      <h4>Введите название карточки</h4>
+                      <div className="input-container">
+                        <input
+                          className="name-project"
+                          value={valueTiket}
+                          onChange={(e) => setValueTiket(e.target.value)}
+                        ></input>
+                      </div>
+                    </div>
+                    <button className="create-project" onClick={createTiket}>
+                      Создать
+                    </button>
+                  </div>
+                </div>
+
                <div className="tasks__container">
                  {tabTaskMok.map((section, wrapperIndex) => {
                    return (
@ -487,7 +566,19 @@ export const Tracker = () => {
                            {section.name}
                          </span>
                          <div>
-                            <span className="add">+</span>
+                            <span
+                              className="add"
+                              onClick={(e) =>
+                                selectedTabTask(
+                                  e,
+                                  wrapperIndex,
+                                  section.name,
+                                  section.tasks
+                                )
+                              }
+                            >
+                              +
+                            </span>
                            <span className="more">...</span>
                          </div>
                        </div>
@ -510,7 +601,6 @@ export const Tracker = () => {
                            >
                              <div className="tasks__board__item__title">
                                <p>{task.task}</p>
-                                <span>...</span>
                              </div>
                              <p className="tasks__board__item__description">
                                {task.description}
--- a/src/pages/Tracker/tracker.scss
+++ b/src/pages/Tracker/tracker.scss
@ -1,5 +1,5 @@
 .tracker {
-  background: #F1F1F1;
+  background: #f1f1f1;
  height: 100%;
  min-height: 100vh;
  font-family: "LabGrotesque", sans-serif;
@ -22,7 +22,7 @@
    margin-top: 70px;

    .row {
-      margin-right: 0px
+      margin-right: 0px;
    }
  }

@ -66,9 +66,8 @@
        width: calc(100% - 150px);
      }

-
      &__projects {
-        background: #FFFFFF;
+        background: #ffffff;
        border-radius: 0 12px 12px 12px;
        padding: 26px 24px 40px;
        flex-wrap: wrap;
@ -87,7 +86,7 @@

        .project {
          width: 48%;
-          background: #F1F1F1;
+          background: #f1f1f1;
          border-radius: 12px;
          padding: 17px 26px 16px;
          cursor: pointer;
@ -122,7 +121,7 @@
            }

            p {
-              color: #6F6F6F;
+              color: #6f6f6f;
              font-weight: 500;
              font-size: 12px;
              line-height: 24px;
@ -136,16 +135,16 @@
              display: flex;
              align-items: center;
              justify-content: center;
-              background: #DDDDDD;
+              background: #dddddd;
              border-radius: 4px;
              font-weight: 500;
              font-size: 14px;
              line-height: 24px;
-              color: #6F6F6F;
+              color: #6f6f6f;
            }

            .add {
-              color: #6F6F6F;
+              color: #6f6f6f;
              font-size: 17px;
              margin: 0 25px 0 auto;

@ -155,10 +154,10 @@
            }

            &:after {
-              content: '...';
+              content: "...";
              position: absolute;
              font-size: 21px;
-              color: #6F6F6F;
+              color: #6f6f6f;
              right: 0;
              top: -35%;

@ -170,7 +169,7 @@
        }

        button {
-          background: #52B709;
+          background: #52b709;
          border-radius: 44px;
          max-width: 188px;
          height: 50px;
@ -179,7 +178,7 @@
          font-weight: 400;
          font-size: 15px;
          line-height: 32px;
-          color: #FFFFFF;
+          color: #ffffff;
          display: flex;
          align-items: center;
          justify-content: center;
@ -194,7 +193,7 @@

      &__tasks {
        display: none;
-        background: #FFFFFF;
+        background: #ffffff;
        border-radius: 12px;
        padding: 13px 23px 65px;
        flex-direction: column;
@ -217,10 +216,9 @@
      }

      .tasks {
-
        &__head {
          display: flex;
-          border-bottom: 1px solid #DDE2E4;
+          border-bottom: 1px solid #dde2e4;
          padding: 0 25px 15px;
          align-items: center;
          width: 1525px;
@ -236,7 +234,7 @@
          &__add {
            width: 33px;
            height: 33px;
-            background: #52B709;
+            background: #52b709;
            border-radius: 44px;
            color: whitesmoke;
            cursor: pointer;
@ -276,14 +274,14 @@
            }

            span {
-              color: #252C32;
+              color: #252c32;
              font-weight: 500;
              font-size: 12px;
              line-height: 16px;
              display: flex;
              width: 32px;
              height: 32px;
-              border: 1px solid #DDE2E4;
+              border: 1px solid #dde2e4;
              border-radius: 50px;
              align-items: center;
              justify-content: center;
@ -298,7 +296,7 @@
              margin-left: 18px;
            }
            span {
-              color: #252C32;
+              color: #252c32;
              font-weight: 400;
              font-size: 14px;
              line-height: 24px;
@ -314,8 +312,10 @@
        }

        &__board {
-          background: #F5F7F9;
-          box-shadow: 0px 2px 5px rgba(60, 66, 87, 0.04), 0px 0px 0px 1px rgba(60, 66, 87, 0.08), 0px 1px 1px rgba(0, 0, 0, 0.06);
+          background: #f5f7f9;
+          box-shadow: 0px 2px 5px rgba(60, 66, 87, 0.04),
+            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;
          width: 350px;
@ -326,17 +326,21 @@
          position: relative;
          transition: all 0.3s ease;

-
          &__hover {
-            box-shadow: 0px 2px 10px #9cc480, 0px 0px 0px 1px rgba(60, 66, 87, 0.08), 0px 1px 1px rgba(0, 0, 0, 0.06);
+            box-shadow: 0px 2px 10px #9cc480,
+              0px 0px 0px 1px rgba(60, 66, 87, 0.08),
+              0px 1px 1px rgba(0, 0, 0, 0.06);
          }

          &__item {
+            width: 328px;
+            height: 154px;
            padding: 16px;
            position: relative;
-            box-shadow: 0px 3px 2px -2px rgba(0, 0, 0, 0.06), 0px 5px 3px -2px rgba(0, 0, 0, 0.02);
+            box-shadow: 0px 3px 2px -2px rgba(0, 0, 0, 0.06),
+              0px 5px 3px -2px rgba(0, 0, 0, 0.02);
            border-radius: 6px;
-            background: #FFFFFF;
+            background: #ffffff;
            cursor: pointer;

            &__hide {
@ -346,8 +350,10 @@
            &__title {
              display: flex;
              justify-content: space-between;
+              position: relative;
+
              p {
-                color: #1A1919;
+                color: #1a1919;
                font-weight: 500;
                font-size: 16px;
                line-height: 24px;
@ -364,13 +370,13 @@
                padding-bottom: 13px;
                width: 24px;
                height: 24px;
-                border: 1px solid #DDDDDD;
+                border: 1px solid #dddddd;
              }
            }

            &__description {
              margin: 8px 0 15px;
-              color: #5C6165;
+              color: #5c6165;
              font-weight: 400;
              font-size: 14px;
              line-height: 140%;
@ -388,7 +394,7 @@
                  font-weight: 500;
                  font-size: 12px;
                  line-height: 15px;
-                  color: #6E7C87;
+                  color: #6e7c87;
                  margin-left: 5px;
                }
              }
@ -422,7 +428,7 @@
          }

          .moreItems {
-            background: #8BCC60;
+            background: #8bcc60;
          }

          .lessItems {
@ -439,8 +445,10 @@
            position: relative;
            display: flex;
            justify-content: space-between;
+            min-width: 300px;
+
            span {
-              color: #6F6F6F;
+              color: #6f6f6f;
              font-weight: 500;
              font-size: 16px;
              line-height: 24px;
@ -448,7 +456,7 @@
            }

            .add {
-              color: #6F6F6F;
+              color: #6f6f6f;
              font-size: 19px;
            }

@ -482,7 +490,7 @@
        .archive {
          &__title {
            padding-bottom: 8px;
-            border-bottom: 1px solid #DDE2E4;
+            border-bottom: 1px solid #dde2e4;
            display: flex;
            align-items: center;

@ -503,7 +511,7 @@

          &__search {
            border: 2px solid;
-            border-color: var(--ds-border-input, #DFE1E6);
+            border-color: var(--ds-border-input, #dfe1e6);
            margin-left: auto;
            padding: 5px;
            display: flex;
@ -535,7 +543,7 @@
            &::-webkit-scrollbar {
              width: 4px;
              background: 0 0;
-              box-shadow: 0 0 14px rgba(0,0,0,.04);
+              box-shadow: 0 0 14px rgba(0, 0, 0, 0.04);
              border-radius: 20px;
            }

@ -558,13 +566,13 @@
          &__completeTask {
            display: flex;
            justify-content: space-between;
-            border: 1px solid var(--ds-border,#dfe1e6);
+            border: 1px solid var(--ds-border, #dfe1e6);
            padding: 8px 10px;
            cursor: pointer;
            transition: all 0.3s ease;

            &:hover {
-              background: var(--ds-background-neutral-subtle-hovered,#f4f5f7);
+              background: var(--ds-background-neutral-subtle-hovered, #f4f5f7);
            }

            p {