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

src/components/SideBar/sidebar.scss

@@ -135,9 +135,10 @@
       line-height: 32px;
       color: #000000;
     }
+
     span {
-      font-size: 5px;
+      font-size: 12px;
-      margin-left: 41px;
+      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%;

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>

src/components/UI/ModalCreate/ModalCreate.js

@@ -9,13 +9,17 @@ export const ModalCreate = ({ active, setActive, title }) => {
   const dispatch = useDispatch();
 
   function createName() {
+    if (inputValue === "") {
+      return;
+    } else {
       let newItem = {
         name: inputValue,
         count: 0,
       };
       dispatch(setProject(newItem));
       setActive(false);
-    setInputValue("")
+      setInputValue("");
+    }
   }
 
   return (

src/components/UI/ModalTiket/ModalTiket.js

@@ -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">

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 {

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"}>

src/pages/AuthForDevelopers/authForDevelopers.scss

@@ -25,6 +25,7 @@
 
   &__arrow {
     margin-top: 360px;
+    z-index: 99;
   }
 
   @media (max-width: 575.98px) {

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"}>

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;

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() {
+  function selectedTabTask(e, wrapperIndex, name, tasks) {
-    setModalCreateProject(true);
+    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}

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;
+          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);
+          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;
             }