Added new modal Aspt and fixed pages/modals

2023-04-12 22:20:05 +03:00
parent 1e4e79897a
commit 2e7375f18e
12 changed files with 444 additions and 149 deletions
--- a/src/components/AuthHeader/AuthHeader.js
+++ b/src/components/AuthHeader/AuthHeader.js
@ -1,18 +1,12 @@
 import React from "react";
 import { NavLink } from "react-router-dom";
+import { scrollToForm } from "../../helper";

 import userIcon from "../../images/userIcon.png";

 import "./authHeader.scss";

 export const AuthHeader = ({}) => {
-  function scrollToForm() {
-    window.scrollTo({
-      top: 850,
-      behavior: "smooth",
-    });
-  }
-
  return (
    <div className="auth-header">
      <div className="auth-header__logo">
@ -25,10 +19,8 @@ export const AuthHeader = ({}) => {
          <div className="auth-nav">
            <ul>
              <li>
-                <NavLink to={'/auth'}>
-                  <span>
-                    Главная
-                  </span>
+                <NavLink to={"/auth"}>
+                  <span>Главная</span>
                </NavLink>
              </li>
              <li>
@ -38,10 +30,8 @@ export const AuthHeader = ({}) => {
                <a href="#">Школа</a>
              </li>
              <li>
-                <NavLink to={'/auth-candidate'} className="candidate">
-                  <span>
-                    Войти в команду
-                  </span>
+                <NavLink to={"/auth-candidate"} className="candidate">
+                  <span>Войти в команду</span>
                </NavLink>
              </li>
            </ul>
--- a/src/components/CandidateSidebar/CandidateSidebar.js
+++ b/src/components/CandidateSidebar/CandidateSidebar.js
@ -1,79 +1,85 @@
-import React from 'react'
-import {Link} from 'react-router-dom'
-import {Achievement} from '../Achievement/Achievement'
+import React, { useState } from "react";
+import { Link } from "react-router-dom";
+import { Achievement } from "../Achievement/Achievement";

-import {LEVELS, SKILLS} from '../../constants/constants'
+import ModalAspt from "../UI/ModalAspt/ModalAspt";
+import { urlForLocal } from "../../helper";
+import { LEVELS, SKILLS } from "../../constants/constants";

-import './candidateSidebar.scss'
-import {urlForLocal} from "../../helper";
+import "./candidateSidebar.scss";

 const getYearsString = (years) => {
  let yearsString;
  if (years % 10 === 1) {
-    yearsString = 'год'
+    yearsString = "год";
  } else if (years === 11 || years === 12 || years === 13 || years === 14) {
-    yearsString = 'лет'
+    yearsString = "лет";
  } else if (years % 10 === 2 || years % 10 === 3 || years % 10 === 4) {
-    yearsString = 'года'
+    yearsString = "года";
  } else {
-    yearsString = 'лет'
+    yearsString = "лет";
  }
-  return `${years} ${yearsString}`
+  return `${years} ${yearsString}`;
 };

-const CandidateSidebar = ({candidate, setActiveSnippet, activeSnippet}) => {
-  const userId = localStorage.getItem('id');
+const CandidateSidebar = ({ candidate, setActiveSnippet, activeSnippet }) => {
+  const userId = localStorage.getItem("id");
  const showSnippet = () => {
-    setActiveSnippet(!activeSnippet)
+    setActiveSnippet(!activeSnippet);
  };

+  const [addAspt, setAddAspt] = useState(false);
+
  return (
-      <div className='candidate-sidebar'>
-        <div className='candidate-sidebar__info'>
-          <div className='candidate-sidebar__position'>
-            <h2>
-              {candidate.specification} {SKILLS[candidate.position_id]},{' '}
-              {LEVELS[candidate.level]}{' '}
-            </h2>
-          </div>
-          {candidate.photo && <img src={urlForLocal(candidate.photo)} alt=''/>}
-          {candidate && candidate.years_of_exp && (
-              <>
-                <p className='candidate-sidebar__experience-title'>Опыт работы</p>
-                <p className='candidate-sidebar__experience'>
-                  {getYearsString(candidate.years_of_exp)}
-                </p>
-              </>
-          )}
-          <Link to={`/candidate/${candidate.id}/form`}>
-            <button className='candidate-sidebar__select'>
-              Выбрать к собеседованию
-            </button>
-          </Link>
-          {userId && (
-              <>
-                <Link to={`/${candidate.id}/calendar`}>
-                  <button className='candidate-sidebar__select'>
-                    Отчёты
-                  </button>
-                </Link>
-                <button
-                    className='candidate-sidebar__select'
-                    onClick={showSnippet}
-                >
-                  {activeSnippet ? "Показать" : "Скрыть"}
-                </button>
-                <div className='candidate-sidebar__achievements'>
-                  {candidate &&
-                  candidate.achievements &&
-                  candidate.achievements.map((item) => {
-                    return <Achievement key={item.id} achievement={item.achievement}/>
-                  })}
-                </div>
-              </>)}
+    <div className="candidate-sidebar">
+      <div className="candidate-sidebar__info">
+        <div className="candidate-sidebar__position">
+          <h2>
+            {candidate.specification} {SKILLS[candidate.position_id]},{" "}
+            {LEVELS[candidate.level]}{" "}
+          </h2>
        </div>
+        {candidate.photo && <img src={urlForLocal(candidate.photo)} alt="" />}
+        {candidate && candidate.years_of_exp && (
+          <>
+            <p className="candidate-sidebar__experience-title">Опыт работы</p>
+            <p className="candidate-sidebar__experience">
+              {getYearsString(candidate.years_of_exp)}
+            </p>
+          </>
+        )}
+
+        <ModalAspt active={addAspt} setActive={setAddAspt}></ModalAspt>
+
+        <button
+          className="candidate-sidebar__select"
+          onClick={() => setAddAspt(true)}
+        >
+          Выбрать к собеседованию
+        </button>
+
+        {userId && (
+          <>
+            <Link to={`/${candidate.id}/calendar`}>
+              <button className="candidate-sidebar__select">Отчёты</button>
+            </Link>
+            <button className="candidate-sidebar__select" onClick={showSnippet}>
+              {activeSnippet ? "Показать" : "Скрыть"}
+            </button>
+            <div className="candidate-sidebar__achievements">
+              {candidate &&
+                candidate.achievements &&
+                candidate.achievements.map((item) => {
+                  return (
+                    <Achievement key={item.id} achievement={item.achievement} />
+                  );
+                })}
+            </div>
+          </>
+        )}
      </div>
-  )
+    </div>
+  );
 };

-export default CandidateSidebar
+export default CandidateSidebar;
--- a/src/components/UI/FreeDevelopers/FreeDevelopers.js
+++ b/src/components/UI/FreeDevelopers/FreeDevelopers.js
@ -3,13 +3,15 @@ import React from "react";
 import AuthHeader from "../../AuthHeader/AuthHeader";
 import SideBar from "../../SideBar/SideBar";
 import { Footer } from "../../Footer/Footer";
+
+import { Link } from "react-router-dom";
+import { scrollToForm } from "../../../helper";
 import { ProfileBreadcrumbs } from "../../ProfileBreadcrumbs/ProfileBreadcrumbs";

 import mockWorker from "../../../images/mokPerson.png";
 import arrow from "../../../images/arrow_left.png";

 import "./freeDevelopers.scss";
-import { Link } from "react-router-dom";

 export const FreeDevelopers = ({}) => {
  return (
@ -40,7 +42,9 @@ export const FreeDevelopers = ({}) => {
              <div></div>
            </div>
          </div>
-          <button className="button-green">Код разработчика</button>
+          <button className="button-green" onClick={scrollToForm}>
+            Код разработчика
+          </button>
        </div>

        <div className="free-dev__body">
--- a/src/components/UI/ModalAdd/modalAdd.scss
+++ b/src/components/UI/ModalAdd/modalAdd.scss
@ -87,31 +87,31 @@
    align-items: center;
    justify-content: center;
  }
-
-  .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);
-    }
-  }
 }

 .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/components/UI/ModalAspt/ModalAspt.js
+++ b/src/components/UI/ModalAspt/ModalAspt.js
@ -0,0 +1,96 @@
+import React, { useState } from "react";
+
+import avatar from "../../../images/mokPerson.png";
+import logoTg from "../../../images/TgLogo.svg";
+import arrow from "../../../images/right-arrow.png";
+import interview from "../../../images/interviewLogo.svg";
+
+import ModalAdd from "../ModalAdd/ModalAdd";
+
+import "./modalAspt.scss";
+
+export const ModalAspt = ({ active, setActive }) => {
+  const [date, setDate] = useState("");
+  const [time, setTime] = useState("");
+  const [modalSend, setModalSend] = useState(false);
+
+  const send = () => {
+    if (date != "" && time != "") {
+      setModalSend(true);
+
+      setTimeout(() => {
+        setModalSend(false);
+        setActive(false);
+      }, 3200);
+    }
+  };
+
+  return (
+    <div
+      className={active ? "modal-aspt active" : "modal-aspt"}
+      onClick={() => setActive(false)}
+    >
+      <div className="modal-aspt__content" onClick={(e) => e.stopPropagation()}>
+        <div className="aspt-decs">
+          <h1>Выбранный кандидат</h1>
+          <div className="aspt-decs__avatar">
+            <div className="aspt-decs__avatar_title">
+              <img src={avatar}></img>
+              <p>Full-stack Back end - разработчик, Senior</p>
+            </div>
+            <div className="aspt-decs__avatar_back">
+              <div>
+                <img src={arrow}></img>
+              </div>
+              <p>Вернуться к списку</p>
+            </div>
+          </div>
+
+          <div className="aspt-decs__telega">
+            <h4>Есть вопросы?</h4>
+            <div className="aspt-decs__telega-logo">
+              <img src={logoTg}></img>
+              <p>Напишите нам в Телеграм. Мы с удовольствием ответим!</p>
+            </div>
+          </div>
+        </div>
+        <div className="form-interview">
+          <p>Дата собеседования</p>
+          <div className="input">
+            <input
+              type="date"
+              value={date}
+              onChange={(e) => setDate(e.target.value)}
+            ></input>
+          </div>
+
+          <p>Время собеседования</p>
+          <div className="input">
+            <input
+              type="time"
+              value={time}
+              onChange={(e) => setTime(e.target.value)}
+            ></input>
+          </div>
+
+          <button onClick={send}>Отправить</button>
+        </div>
+        <span className="exit" onClick={() => setActive(false)}></span>
+      </div>
+      <ModalAdd active={modalSend} setActive={setModalSend}>
+        <div className="send">
+          <img src={interview}></img>
+          <h2>Спасибо,собеседование назначено</h2>
+          <p>
+            Дата: <span>{date}</span>
+          </p>
+          <p>
+            Время собеседования: <span>{time}</span>
+          </p>
+        </div>
+      </ModalAdd>
+    </div>
+  );
+};
+
+export default ModalAspt;
--- a/src/components/UI/ModalAspt/modalAspt.scss
+++ b/src/components/UI/ModalAspt/modalAspt.scss
@ -0,0 +1,188 @@
+.modal-aspt {
+  z-index: 99;
+  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;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    background: #ffffff;
+    border: 1px solid #dde2e4;
+    border-radius: 8px;
+
+    .aspt-decs {
+      padding: 54px 25px 51px 61px;
+      border-right: 1px solid #f1f1f1;
+
+      h1 {
+        display: block;
+        font-weight: 500;
+        font-size: 30px;
+        line-height: 32px;
+        color: #000000;
+        text-align: left;
+      }
+
+      &__avatar {
+        margin-top: 76px;
+
+        &_title {
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+
+          img {
+            width: 48px;
+            height: 48px;
+            margin: 0 22px 0 0;
+          }
+
+          p {
+            font-weight: 500;
+            font-size: 16px;
+            line-height: 24px;
+          }
+        }
+
+        &_back {
+          display: flex;
+          align-items: center;
+          margin: 40px 0 0 0;
+
+          div {
+            background: #8dc63f;
+            opacity: 0.3;
+            width: 48px;
+            height: 48px;
+            border-radius: 44px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin: 0 15px 0 0;
+
+            img {
+              margin: 0;
+              width: 50%;
+            }
+          }
+
+          p {
+            font-size: 12px;
+            line-height: 16px;
+            color: #5b6871;
+          }
+        }
+      }
+
+      &__telega {
+        text-align: left;
+
+        h4 {
+          color: #52b709;
+          font-size: 14px;
+          margin: 55px 0 34px 0;
+        }
+
+        p,
+        h4 {
+          font-weight: 900;
+          line-height: 24px;
+        }
+
+        p {
+          width: 50%;
+          font-size: 12px;
+        }
+
+        &-logo {
+          display: flex;
+          flex-direction: row;
+
+          img {
+            margin: 0 19px 0 0;
+          }
+        }
+      }
+    }
+
+    .form-interview {
+      text-align: left;
+      padding: 54px 61px 51px 72px;
+
+      p {
+        font-weight: 400;
+        font-size: 15px;
+        line-height: 18px;
+        margin-bottom: 10px;
+      }
+
+      button {
+        width: 174px;
+        height: 46px;
+        color: white;
+        border: none;
+        font-size: 18px;
+        line-height: 32px;
+        background: #52b709;
+        border-radius: 44px;
+      }
+
+      .input {
+        background: #eff2f7;
+        border-radius: 8px;
+        display: flex;
+        justify-content: center;
+        width: 294px;
+        height: 35px;
+        margin: 0 0 36px 0;
+
+        input {
+          background: #eff2f7;
+          width: 90%;
+          border: none;
+          outline: none;
+          font-size: 15px;
+        }
+      }
+    }
+  }
+
+  .send {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    h2 {
+      text-align: center;
+      margin: 25px 0 31px 0;
+    }
+
+    p {
+      font-size: 14px;
+      line-height: 17px;
+      font-weight: 700;
+      text-align: center;
+      color: #000000;
+      margin-bottom: 10px;
+
+      span {
+        color: #406128;
+      }
+    }
+  }
+}
+
+.modal-aspt.active {
+  transform: scale(1);
+}
--- a/src/components/UI/ModalCreate/ModalCreate.scss
+++ b/src/components/UI/ModalCreate/ModalCreate.scss
@ -69,29 +69,6 @@
      align-items: center;
      justify-content: center;
    }
-
-    .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/components/UI/ModalTiket/ModalTiket.js
+++ b/src/components/UI/ModalTiket/ModalTiket.js
@ -14,8 +14,8 @@ import edit from "../../../images/edit.svg";
 import send from "../../../images/send.svg";
 import plus from "../../../images/plus.svg";

-import "./ModalTiket.scss";
 import ModalAdd from "../ModalAdd/ModalAdd";
+import "./ModalTiket.scss";

 export const ModalTiket = ({ active, setActive }) => {
  const [tiket] = useState({