Merge branch 'main' into quiz

This commit is contained in:
Mikola 2023-12-10 03:17:41 +03:00
commit 178fd4362a
82 changed files with 2790 additions and 1266 deletions

36
package-lock.json generated
View File

@ -1,5 +1,5 @@
{
"name": "outstaffing-react",
"name": "guild_front",
"version": "0.1.0",
"lockfileVersion": 3,
"requires": true,
@ -5197,18 +5197,18 @@
}
},
"node_modules/@testing-library/dom": {
"version": "9.0.0",
"resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-9.0.0.tgz",
"integrity": "sha512-+/TLgKNFsYUshOY/zXsQOk+PlFQK+eyJ9T13IDVNJEi+M+Un7xlJK+FZKkbGSnf0+7E1G6PlDhkSYQ/GFiruBQ==",
"version": "9.3.3",
"resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-9.3.3.tgz",
"integrity": "sha512-fB0R+fa3AUqbLHWyxXa2kGVtf1Fe1ZZFr0Zp6AIbIAzXb2mKbEXl+PCQNUOaq5lbTab5tfctfXRNsWXxa2f7Aw==",
"peer": true,
"dependencies": {
"@babel/code-frame": "^7.10.4",
"@babel/runtime": "^7.12.5",
"@types/aria-query": "^5.0.1",
"aria-query": "^5.0.0",
"aria-query": "5.1.3",
"chalk": "^4.1.0",
"dom-accessibility-api": "^0.5.9",
"lz-string": "^1.4.4",
"lz-string": "^1.5.0",
"pretty-format": "^27.0.2"
},
"engines": {
@ -5633,9 +5633,9 @@
}
},
"node_modules/@types/aria-query": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.1.tgz",
"integrity": "sha512-XTIieEY+gvJ39ChLcB4If5zHtPxt3Syj5rgZR+e1ctpmK8NjPf0zFqsz4JpLJT0xla9GFDKjy8Cpu331nrmE1Q==",
"version": "5.0.4",
"resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz",
"integrity": "sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==",
"peer": true
},
"node_modules/@types/babel__core": {
@ -16955,9 +16955,9 @@
}
},
"node_modules/jquery": {
"version": "3.6.3",
"resolved": "https://registry.npmjs.org/jquery/-/jquery-3.6.3.tgz",
"integrity": "sha512-bZ5Sy3YzKo9Fyc8wH2iIQK4JImJ6R0GWI9kL1/k7Z91ZBNgkRXE6U0JfHIizZbort8ZunhSI3jw9I6253ahKfg==",
"version": "3.7.1",
"resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.1.tgz",
"integrity": "sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg==",
"peer": true
},
"node_modules/js-base64": {
@ -17400,9 +17400,9 @@
}
},
"node_modules/lz-string": {
"version": "1.4.4",
"resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.4.4.tgz",
"integrity": "sha512-0ckx7ZHRPqb0oUm8zNr+90mtf9DQB60H1wMCjBtfi62Kl3a7JbHob6gA2bC+xRvZoOL+1hzUK8jeuEIQE8svEQ==",
"version": "1.5.0",
"resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz",
"integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==",
"bin": {
"lz-string": "bin/bin.js"
}
@ -23326,9 +23326,9 @@
"dev": true
},
"node_modules/sshpk": {
"version": "1.17.0",
"resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.17.0.tgz",
"integrity": "sha512-/9HIEs1ZXGhSPE8X6Ccm7Nam1z8KcoCqPdI7ecm1N33EzAetWahvQWVqLZtaZQ+IDKX4IyA2o0gBzqIMkAagHQ==",
"version": "1.18.0",
"resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.18.0.tgz",
"integrity": "sha512-2p2KJZTSqQ/I3+HX42EpYOa2l3f8Erv8MWKsy2I9uf4wA7yFIkXRffYdsx86y6z4vHtV8u7g+pPlr8/4ouAxsQ==",
"dev": true,
"optional": true,
"peer": true,

View File

@ -1,7 +1,7 @@
{
"version": "0.1.0",
"private": true,
"homepage": "https://html.craft-group.xyz/",
"homepage": "https://itguild.info/",
"dependencies": {
"@ckeditor/ckeditor5-build-classic": "^38.0.1",
"@ckeditor/ckeditor5-react": "^6.0.0",

View File

@ -8,8 +8,7 @@ import {
import { getNotification } from "@redux/outstaffingSlice";
import AuthForPartners from "./pages/AuthForPartners/AuthForPartners";
import AuthForDevelopers from "./pages/AuthForDevelopers/AuthForDevelopers";
import Auth from "./pages/Auth/Auth";
import { TrackerIntro } from "./pages/TrackerIntro/TrackerIntro"
import { CompanyInfo } from "@pages/CompanyInfo/CompanyInfo";
import { TrackerAuth } from "@pages/TrackerAuth/TrackerAuth";
@ -54,15 +53,13 @@ import "./assets/global.scss";
import "./assets/fonts/stylesheet.css";
import "bootstrap/dist/css/bootstrap.min.css";
const App = () => {
const notification = useSelector(getNotification)
return (
<>
<Router>
<Routes>
<Route exact path="/authdev" element={<AuthForDevelopers />} />
<Route exact path="/auth" element={<AuthForPartners />} />
<Route exact path="/auth" element={<Auth />} />
<Route exact path="/tracker-intro" element={<TrackerIntro />} />
<Route exact path="/tracker-auth" element={<TrackerAuth />} />
<Route exact path="/tracker-registration" element={<TrackerRegistration />} />
@ -79,6 +76,7 @@ const App = () => {
path="/tracker/project/:id"
element={<ProjectTracker />}
/>
<Route exact path="/auth-candidate" element={<AuthForCandidate />} />
<Route
exact
@ -135,6 +133,8 @@ const App = () => {
element={<PartnerEmployees />}
/>
</Route>
<Route exact path="profile-candidate/:id">
<Route index element={<ProfileCandidate />} />
</Route>

View File

@ -35,7 +35,7 @@ export const apiRequest = (
.then(
(response) =>
new Promise((resolve) => {
if (response.data.redirect || response.status === 401) {
if (response.data?.redirect || response.status === 401) {
window.location.replace("/auth");
localStorage.clear();
// dispatch(auth(false));

View File

@ -0,0 +1,10 @@
<svg width="7" height="6" viewBox="0 0 7 6" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_1895_1196)">
<path d="M1.05915 4.7073e-05C1.1835 -0.00182845 1.25965 0.0525618 1.33035 0.123644C1.98754 0.782517 2.64585 1.44026 3.30378 2.09839C3.36443 2.15903 3.42482 2.15909 3.48496 2.09857C4.12958 1.45377 4.7742 0.808962 5.419 0.164343C5.59024 -0.00670482 5.74591 -0.00576705 5.92052 0.165844C6.03193 0.275375 6.14371 0.38453 6.25436 0.494624C6.41491 0.654606 6.41585 0.820965 6.25436 0.982823C5.59887 1.63926 4.94337 2.29532 4.28562 2.94931C4.23179 3.00295 4.22767 3.02977 4.2845 3.08623C4.93887 3.7346 5.59005 4.38634 6.24217 5.03696C6.42129 5.2157 6.42072 5.37062 6.24086 5.55067C6.13039 5.66114 6.02067 5.77217 5.90964 5.88208C5.75116 6.03868 5.58611 6.03868 5.42838 5.88114C4.77213 5.22564 4.11551 4.57071 3.46208 3.9124C3.40506 3.85501 3.37937 3.86063 3.32591 3.91465C2.67848 4.56583 2.02842 5.21439 1.37874 5.86351C1.19719 6.04487 1.0449 6.04525 0.865035 5.86576C0.75888 5.75979 0.652725 5.65382 0.546945 5.54767C0.370833 5.37118 0.369708 5.21476 0.543945 5.03959C1.19363 4.38691 1.84294 3.73347 2.49506 3.08304C2.54982 3.02846 2.55245 3.00183 2.49693 2.9465C1.83224 2.28613 1.17056 1.62294 0.508122 0.960317C0.331822 0.784018 0.330697 0.627036 0.504371 0.453175C0.621404 0.335954 0.739187 0.219671 0.855657 0.102076C0.917362 0.0394332 0.990133 0.00304792 1.05915 4.7073e-05Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0_1895_1196">
<rect width="6.00113" height="6" fill="white" transform="translate(0.375)"/>
</clipPath>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 1.5 KiB

View File

@ -0,0 +1,5 @@
<svg width="1030" height="401" viewBox="0 0 1030 401" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="396" cy="359" r="42" fill="#55B030"/>
<path d="M76.154 0.207915V267.878H31.668V0.207915H76.154ZM328.417 0.207915V38.2849H245.854V267.878H200.991V38.2849H118.805V0.207915H328.417Z" fill="#55B030"/>
<path d="M451.354 78.6239H489.808V260.715C489.808 286.351 481.514 306.081 464.926 319.904C448.59 333.979 426.975 341.016 400.082 341.016C368.666 341.016 339.26 331.842 311.864 313.495L332.222 283.335C346.297 291.88 358.235 297.912 368.037 301.431C378.091 304.95 388.647 306.709 399.705 306.709C415.037 306.709 427.101 302.562 435.897 294.268C444.694 285.974 449.092 273.659 449.092 257.322V237.718C435.772 255.563 416.545 264.485 391.411 264.485C367.283 264.485 347.428 255.563 331.845 237.718C316.263 219.622 308.471 196.499 308.471 168.35C308.471 140.452 316.263 117.581 331.845 99.7359C347.428 81.6399 367.283 72.5919 391.411 72.5919C418.304 72.5919 438.285 82.5196 451.354 102.375V78.6239ZM450.223 168.35C450.223 150.505 445.574 136.054 436.274 124.995C426.975 113.685 414.911 108.03 400.082 108.03C385.002 108.03 372.938 113.559 363.89 124.618C354.842 135.677 350.318 150.254 350.318 168.35C350.318 186.697 354.842 201.526 363.89 212.836C372.938 223.895 385.002 229.424 400.082 229.424C414.911 229.424 426.975 223.769 436.274 212.459C445.574 201.149 450.223 186.446 450.223 168.35ZM633.861 78.6239H675.331V267.878H637.254V246.012C625.944 264.359 607.219 273.533 581.081 273.533C558.963 273.533 542.124 268.129 530.563 257.322C519.253 246.515 513.598 231.686 513.598 212.836V78.6239H555.068V201.526C555.068 213.087 558.084 222.01 564.116 228.293C570.148 234.576 578.819 237.718 590.129 237.718C603.449 237.718 614.005 233.822 621.797 226.031C629.839 218.24 633.861 207.307 633.861 193.232V78.6239ZM740.837 78.6239V267.878H699.367V78.6239H740.837ZM740.837 3.22392V45.8249H699.367V3.22392H740.837ZM806.963 0.207915V267.878H765.493V0.207915H806.963ZM965.032 0.207915H1006.5V267.878H968.048V240.357C954.476 262.223 933.615 273.156 905.466 273.156C881.086 273.156 860.98 263.982 845.146 245.635C829.563 227.036 821.772 202.908 821.772 173.251C821.772 143.594 829.689 119.591 845.523 101.244C861.608 82.6453 881.715 73.3459 905.843 73.3459C932.233 73.3459 951.962 82.5196 965.032 100.867V0.207915ZM951.837 220.376C961.639 208.563 966.54 192.855 966.54 173.251C966.54 153.647 961.639 138.064 951.837 126.503C942.286 114.942 929.719 109.161 914.137 109.161C899.057 109.161 886.867 115.067 877.568 126.88C868.52 138.441 863.996 153.898 863.996 173.251C863.996 192.855 868.52 208.563 877.568 220.376C886.616 231.937 898.68 237.718 913.76 237.718C929.594 237.718 942.286 231.937 951.837 220.376Z" fill="black"/>
</svg>

After

Width:  |  Height:  |  Size: 2.7 KiB

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 10 KiB

View File

@ -13,10 +13,10 @@ export const AuthBlock = ({ title, description, img, resetModal }) => {
<p>{description}</p>
</div>
<form className="auth__form">
<label htmlFor="login">Ваш email *</label>
<input id="login" type="text" name="username" placeholder="Email" />
<label htmlFor="login">Ваш e-mail</label>
<input id="login" type="text" name="username" placeholder="E-mail" />
<label htmlFor="password">Ваш пароль*</label>
<label htmlFor="password">Ваш пароль</label>
<input
id="password"
type="password"
@ -24,14 +24,8 @@ export const AuthBlock = ({ title, description, img, resetModal }) => {
placeholder="Пароль"
/>
<div className="auth__form__buttons">
<button
onClick={(e) => {
e.preventDefault();
}}
>
Войти
</button>
<span onClick={() => resetModal(true)}>Вспомнить пароль</span>
<button onClick={(e) => e.preventDefault()}>Войти</button>
<span onClick={() => resetModal(true)}>Восстановить пароль</span>
</div>
</form>
{img && <img src={img} alt="authImg" className="auth__img" />}

View File

@ -5,27 +5,33 @@
padding: 50px 0 35px 56px;
margin-top: 40px;
display: flex;
position: relative;
@media (max-width: 1000px) {
flex-direction: column;
padding: 25px;
margin-top: 0;
padding: 0;
@media (max-width: 1400px) {
margin-top: 100px;
}
@media (max-width: 900px) {
flex-direction: column-reverse;
padding: 20px;
margin-top: 100px;
}
}
&__info {
margin-right: 115px;
@media (max-width: 1000px) {
@media (max-width: 900px) {
order: 3;
flex-direction: column;
margin-bottom: 20px;
}
h3 {
font-weight: 500;
font-size: 30px;
line-height: 32px;
margin-bottom: 20px;
text-align: center;
}
p {
@ -35,7 +41,7 @@
font-size: 16px;
line-height: 30px;
@media (max-width: 1000px) {
@media (max-width: 900px) {
max-width: none;
margin: 15px 25px;
}
@ -46,7 +52,7 @@
}
}
@media (max-width: 1000px) {
@media (max-width: 900px) {
margin-right: 0;
display: flex;
align-items: center;
@ -70,7 +76,7 @@
font-size: 15px;
line-height: 18px;
@media (max-width: 1000px) {
@media (max-width: 900px) {
max-width: 550px;
}
}
@ -109,9 +115,8 @@
}
}
@media (max-width: 1000px) {
@media (max-width: 900px) {
order: 2;
margin-bottom: 55px;
}
}
@ -120,7 +125,7 @@
right: 48px;
top: -90px;
@media (max-width: 1000px) {
@media (max-width: 900px) {
order: 1;
position: inherit;
right: inherit;

View File

@ -11,6 +11,7 @@ import { apiRequest } from "@api/request";
import { Loader } from "@components/Common/Loader/Loader";
import ModalErrorLogin from "@components/Modal/ModalErrorLogin/ModalErrorLogin";
import ModalRegistration from "@components/Modal/ModalRegistration/ModalRegistration";
import ModalResetPassword from "@components/Modal/ModalResetPassword/ModalResetPassword";
import authHead from "assets/icons/authHead.svg";
import eyePassword from "assets/icons/passwordIcon.svg";
@ -27,6 +28,7 @@ export const AuthBox = ({ title }) => {
const [error, setError] = useState(null);
const [modalError, setModalError] = useState(false);
const [modalReset, setModalReset] = useState(false);
const [modalReg, setModalReg] = useState(false);
const [showPassword, setShowPassword] = useState(false);
@ -51,7 +53,7 @@ export const AuthBox = ({ title }) => {
data: formData,
}).then((res) => {
if (!res.access_token) {
setError("Введены некоректные данные для входа");
setError("Введены некорректные данные для входа");
setModalError(true);
dispatch(loading(false));
} else {
@ -77,14 +79,16 @@ export const AuthBox = ({ title }) => {
<h2 className="auth-box__header">
Вход <img src={authHead} alt="authImg" />
</h2>
{title && (
<div className="auth-box__title">
<span>{title}</span>
</div>
)}
<form ref={ref} className="auth-box__form">
<label htmlFor="login">Ваш email *</label>
<label htmlFor="login">Ваш e-mail</label>
<input id="login" type="text" name="username" placeholder="Логин" />
<label htmlFor="password">Ваш пароль*</label>
<label htmlFor="password">Ваш пароль</label>
<div className="inputWrapper">
<input
id="password"
@ -120,12 +124,14 @@ export const AuthBox = ({ title }) => {
>
{isLoading ? <Loader /> : "Войти"}
</button>
<span className="auth-box__reset">Вспомнить пароль</span>
<span className="auth-box__reset" onClick={() => setModalReset(true)}>
Восстановить пароль
</span>
<ModalResetPassword active={modalReset} setActive={setModalReset} />
<ModalRegistration active={modalReg} setActive={setModalReg} />
</div>
<p className="auth-box__registration">
У вас еще нет аккаунта? &nbsp;
У вас ещё нет аккаунта? &nbsp;
<span
onClick={(e) => {
e.preventDefault();

View File

@ -15,7 +15,8 @@
letter-spacing: normal;
line-height: 77.81px;
text-align: left;
margin-top: 164px;
margin-top: 150px;
margin-bottom: 30px;
span {
color: #52b709;
@ -55,7 +56,7 @@
margin-bottom: 54px;
span {
color: #8DC63F;
color: #8dc63f;
font-size: 50px;
font-weight: 700;
font-style: normal;
@ -88,12 +89,12 @@
letter-spacing: normal;
line-height: 19.2px;
text-align: left;
margin-bottom: 25px;
margin-bottom: 10px;
color: #000000;
}
.inputWrapper {
width: 366px;
width: 100%;
position: relative;
.eye {
@ -101,6 +102,10 @@
position: absolute;
right: 20px;
top: 15px;
@media (min-width: 576px) {
left: 330px;
}
}
}
@ -152,7 +157,6 @@
letter-spacing: normal;
line-height: 32px;
text-align: center;
border: 2px solid #6aaf5c;
margin-right: 1.5rem;
transition: 0.3s;
@ -193,7 +197,7 @@
&__reset {
color: #000000;
font-size: 13px;
font-size: 15px;
line-height: 16px;
cursor: pointer;
text-decoration: underline;
@ -203,12 +207,16 @@
color: #000000;
font-size: 17px;
font-weight: 400;
margin-top: 45px;
margin-top: 35px;
line-height: 32px;
@media (max-width: 700px) {
text-align: center;
}
span {
cursor: pointer;
color: #52B709;
color: #52b709;
font-weight: 700;
}
}

View File

@ -61,9 +61,7 @@ const Calendar = () => {
</div>
<div>
<Link to="/report">
<button className="calendar__btn">
Заполнить отчет за день
</button>
<button className="calendar__btn">Заполнить отчет</button>
</Link>
</div>
</div>

View File

@ -125,6 +125,10 @@
margin: 50px 0 0;
text-transform: capitalize;
@media (max-width: 500px) {
font-size: 1.7em;
}
span {
font-weight: 100;
font-style: normal;

View File

@ -13,7 +13,7 @@
display: flex;
justify-content: space-between;
@media (max-width: 560px) {
@media (max-width: 760px) {
flex-direction: column;
row-gap: 15px;
}
@ -21,20 +21,13 @@
&-info {
display: flex;
@media (max-width: 685px) {
font-size: 7px;
}
@media (max-width: 560px) {
@media (max-width: 760px) {
font-size: 10px;
}
@media (max-width: 560px) {
justify-content: center;
}
.calendar__hours {
margin: 0 10px;
margin: 0 5px;
line-height: 0;
font-weight: 500;
display: flex;
@ -45,18 +38,14 @@
&-switcher {
display: flex;
@media (max-width: 590px) {
font-size: 8px;
}
@media (max-width: 560px) {
@media (max-width: 760px) {
justify-content: center;
font-size: 12px;
}
}
h3 {
font-size: 2.5em;
font-size: 2.2em;
font-weight: 400;
font-style: normal;
letter-spacing: normal;
@ -165,6 +154,11 @@
justify-content: center;
font-weight: 500;
font-size: 12px;
@media (max-width: 500px) {
font-size: 10px;
font-weight: 400;
}
}
img {
@ -182,27 +176,25 @@
}
@media (max-width: 1200px) {
width: 90px;
height: 40px;
width: 110px;
}
@media (max-width: 968px) {
width: 62px;
height: 40px;
width: 90px;
font-size: 11px;
}
@media (max-width: 680px) {
width: 70px;
font-size: 10px;
@media (max-width: 610px) {
width: auto;
height: auto;
}
}
@media (max-width: 610px) {
width: 55px;
height: 45px;
@media (max-width: 550px) {
width: 60px;
height: 35px;
}
@media (max-width: 480px) {
@media (max-width: 450px) {
width: 45px;
height: 35px;
}
@ -294,12 +286,11 @@
.select {
border-radius: 5px;
border: 1px solid #c4c4c4;
border: 2px solid #c4c4c4;
box-shadow: 0 0 59px rgba(44, 44, 44, 0.05);
padding: 5px 8px;
cursor: pointer;
text-align: center;
min-width: 350px;
}
.close {

View File

@ -32,7 +32,7 @@ const Candidate = () => {
if (localStorage.getItem("role_status") !== "18") {
return <Navigate to="/profile" replace />;
}
const { id: candidateId } = useParams();
// const { id: candidateId } = useParams();
const navigate = useNavigate();
@ -47,10 +47,10 @@ const Candidate = () => {
}, []);
useEffect(() => {
apiRequest(`/profile/${candidateId}`, {
params: Number(candidateId),
}).then((el) => dispatch(currentCandidate(el)));
}, [dispatch, candidateId]);
apiRequest(`/user/me`, {}).then((el) =>
dispatch(currentCandidate(el.userCard))
);
}, [dispatch]);
const { position_id, skillValues, vc_text: text } = currentCandidateObj;
@ -174,7 +174,7 @@ const Candidate = () => {
<div className="candidate__works works">
<div className="works__body">
<div className="works__body__info">
<p>Страница портфолио кода разработчика</p>
<p>Портфолио разработчика</p>
</div>
<div className="works__item item-works">
<Link to="/" className="item-works__body">

View File

@ -12,7 +12,7 @@ export const AuthHeader = () => {
<div className="auth-header">
<div className="auth-header__logo">
<h3>
itguild.<span>аутстафинг ИТ специалистов</span>
itguild.<span>аутстаффинг IT-специалистов</span>
</h3>
</div>
<div className="auth-header__navigation">
@ -25,24 +25,10 @@ export const AuthHeader = () => {
</NavLink>
</li>
<li>
<a
onClick={(e) => {
e.preventDefault();
scrollToForm();
}}
>
Кабинет разработчика
</a>
<NavLink to={"/auth"}>Кабинет разработчика</NavLink>
</li>
<li>
<a
onClick={(e) => {
e.preventDefault();
scrollToForm();
}}
>
Трекер
</a>
<NavLink to={"/tracker-intro"}>Трекер</NavLink>
</li>
<li>
<NavLink to={"/auth-candidate"} className="candidate">

View File

@ -2,9 +2,13 @@ import React from "react";
import "./basebutton.scss";
export const BaseButton = ({ children, styles, ...props }) => {
export const BaseButton = ({ children, styles, onClick, ...props }) => {
return (
<button className={styles ? `${styles} button` : "button"} {...props}>
<button
onClick={onClick}
className={styles ? `${styles} button` : "button"}
{...props}
>
{children}
</button>
);

View File

@ -3,7 +3,7 @@ import React from "react";
import email from "assets/icons/emailLogo.svg";
import tg from "assets/icons/tgFooter.svg";
import vk from "assets/icons/vkLogo.svg";
import logo from "assets/images/logo/LogoITguild.svg";
import logo from "assets/images/logo/ITguild.svg";
import "./footer.scss";
@ -27,21 +27,19 @@ export const Footer = () => {
<div className="footer__bottom">
<div className="footer__social">
<div className="footer__social__icons">
<a>
<img src={vk} alt="vk" />
<a href="https://www.vk.com/">
<img src={vk} alt="vk" width={24} />
</a>
<a>
<img src={tg} alt="tg" />
<a href="https://www.telegram.org/">
<img src={tg} alt="tg" width={24} />
</a>
</div>
<p>Войти в команду</p>
</div>
<div className="footer__info">
<div className="footer__mail">
<a>
<img src={email} alt="email" />
</a>
<p>office@itguild.info</p>
<a href="mailto:office@itguild.info">office@itguild.info</a>
</div>
<a className="footer__policy">Политика конфиденциальности</a>
</div>

View File

@ -79,11 +79,11 @@ footer {
&__mail {
display: flex;
align-items: center;
column-gap: 13px;
column-gap: 5px;
p {
a {
font-weight: 400;
font-size: 12px;
font-size: 14px;
line-height: 16px;
color: #5b6871;
}
@ -91,7 +91,7 @@ footer {
&__policy {
font-weight: 400;
font-size: 10px;
font-size: 13px;
line-height: 16px;
color: #5b6871;
margin-left: 150px;
@ -108,6 +108,7 @@ footer {
&__copyright {
margin-left: auto;
font-size: 13px;
@media (max-width: 910px) {
min-width: 142px;

View File

@ -13,7 +13,11 @@ export const ModalLayout = ({
return (
<div
className={active ? `modal-layout active` : "modal-layout"}
onClick={() => setActive(false)}
onClick={(event) => {
if (event.target.className === "modal-layout active") {
setActive(false);
}
}}
{...props}
>
<div
@ -22,7 +26,6 @@ export const ModalLayout = ({
? `modal-layout__content ${styles}`
: `modal-layout__content ${type}`
}
onClick={(e) => e.stopPropagation()}
>
{children}
</div>

View File

@ -45,6 +45,16 @@
font-weight: 300;
}
.addPersonBlock {
display: flex;
flex-direction: column;
justify-content: space-between;
button {
// margin: 0 auto;
}
}
.invitePersonBlock {
display: flex;
flex-direction: column;
@ -64,7 +74,7 @@
}
&__btn {
margin: 0 auto 0 0;
margin: 0;
max-width: 242px;
width: 100%;
}
@ -96,7 +106,7 @@
display: flex;
flex-direction: column;
row-gap: 10px;
padding: 39px 10px 29px 10px;
padding: 19px 10px 29px 10px;
@media (max-width: 500px) {
padding: 10px;

View File

@ -98,7 +98,7 @@ const Description = ({ onLoadMore }) => {
<div className="description__footer">
<div className="description__footer-btn">
{candidatesListArr && (
<button onClick={() => onLoadMore(2)}>Загрузить еще</button>
<button onClick={() => onLoadMore(2)}>Загрузить ещё</button>
)}
</div>
</div>

View File

@ -85,13 +85,13 @@ const Form = () => {
<div className="row">
<div className="col-sm-12">
<form className="form" id="test">
<label htmlFor="email">Емейл:</label>
<label htmlFor="email">E-mail:</label>
<input
onChange={handleChange}
id="email"
name="Email"
type="email"
placeholder="Емейл"
placeholder="E-mail"
value={data.email}
/>

View File

@ -50,7 +50,7 @@ export const FreeDevelopers = () => {
<div className="free-dev__body">
<div className="free-dev__body-title">
<p>Описание опыта работы</p>
<p>Опыт работы</p>
</div>
<div className="free-dev__body-text">
@ -86,7 +86,7 @@ export const FreeDevelopers = () => {
</div>
<div className="login">
<h3>Для просмотра полного резюме разработчика авторизуйтесь</h3>
<h3>Для просмотра полного резюме разработчика, авторизуйтесь</h3>
<BaseButton styles={"dev-code"}>
<Link to={"/auth"}>Войти</Link>
</BaseButton>

View File

@ -1,9 +1,6 @@
import React, { useState } from "react";
import { useSelector } from "react-redux";
import { useNavigate } from "react-router-dom";
import { getRole } from "@redux/roleSlice";
import { useLogout } from "@hooks/useLogout";
import { Loader } from "@components/Common/Loader/Loader";
@ -12,8 +9,6 @@ import "./logoutButton.scss";
export const LogoutButton = () => {
const [isLoggingOut, setIsLoggingOut] = useState(false);
const userRole = useSelector(getRole);
const navigate = useNavigate();
const { logout } = useLogout();
@ -24,7 +19,7 @@ export const LogoutButton = () => {
setIsLoggingOut(true);
logout();
setIsLoggingOut(false);
navigate(userRole === "ROLE_DEV" ? "/authdev" : "/auth");
navigate("/auth");
}}
>
{isLoggingOut ? <Loader /> : "Выйти"}

View File

@ -4,15 +4,19 @@ import close from "assets/icons/closeProjectPersons.svg";
import "./acceptModal.scss";
export const AcceptModal = ({ closeModal, agreeHandler }) => {
export const AcceptModal = ({ title, closeModal, agreeHandler }) => {
return (
<div className="backDrop">
<div className="acceptModal">
<h3 className="acceptModal__title">
Вы точно хотите переместить задачу в архив?
</h3>
<h3 className="acceptModal__title">{title}</h3>
<div className="acceptModal__buttons">
<button className="agree" onClick={agreeHandler}>
<button
className="agree"
onClick={() => {
agreeHandler();
closeModal();
}}
>
Да
</button>
<button className="cancel" onClick={closeModal}>

View File

@ -12,7 +12,7 @@
.acceptModal {
border-radius: 20px;
background: linear-gradient(180deg, #FFF 0%, #EBEBEB 100%);
background: linear-gradient(180deg, #fff 0%, #ebebeb 100%);
padding: 50px 34px 25px;
display: flex;
flex-direction: column;
@ -43,16 +43,18 @@
}
.agree {
background: #52B709;
background: #52b709;
}
.cancel {
background: #B0BABF;
background: #b0babf;
}
}
&__close {
position: absolute;
width: 14px;
height: 14px;
top: 15px;
right: 22px;
cursor: pointer;

View File

@ -17,7 +17,7 @@ export const ModalErrorLogin = ({ active, setActive, title }) => {
setActive(false);
}}
>
Попробовать еще раз
Попробовать ещё раз
</BaseButton>
<span onClick={() => setActive(false)} className="exit"></span>
</ModalLayout>

View File

@ -1,6 +1,11 @@
import React from "react";
import React, { useState } from "react";
import { apiRequest } from "@api/request";
import { useNotification } from "@hooks/useNotification";
import BaseButton from "@components/Common/BaseButton/BaseButton";
import { Loader } from "@components/Common/Loader/Loader";
import ModalLayout from "@components/Common/ModalLayout/ModalLayout";
import anyMoment from "assets/icons/anyMoment.svg";
@ -10,47 +15,216 @@ import telegramLogo from "assets/icons/tgLogo.svg";
import "./modalRegistration.scss";
export const ModalRegistration = ({ active, setActive }) => {
const [inputsValue, setInputsValue] = useState({
userName: "",
email: "",
password: "",
});
const [inputsError, setInputsError] = useState({
name: false,
email: false,
password: false,
});
const [loader, setLoader] = useState(false);
const validateEmail = (email) => {
// регулярное выражение для проверки email
const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
// возвращаем true, если email проходит проверку, и false, если нет
return re.test(email);
};
const { showNotification } = useNotification();
const validateForm = () => {
if (inputsValue.password.length < 6) {
setInputsError((prevValue) => ({ ...prevValue, password: true }));
}
if (inputsValue.userName.length < 2) {
setInputsError((prevValue) => ({ ...prevValue, name: true }));
}
if (!validateEmail(inputsValue.email)) {
setInputsError((prevValue) => ({ ...prevValue, email: true }));
}
if (
inputsValue.password.length < 6 ||
inputsValue.userName.length < 6 ||
!validateEmail(inputsValue.email)
) {
return true;
}
};
const submitHandler = () => {
if (validateForm()) {
return;
}
setLoader(true);
apiRequest("/register/sign-up", {
method: "POST",
data: {
username: inputsValue.userName,
email: inputsValue.email,
password: inputsValue.password,
},
}).then((data) => {
setLoader(false);
if (!data) {
showNotification({
show: true,
text: "Аккаунт с таким логином или email уже существует",
type: "error",
});
} else {
closeModal();
showNotification({
show: true,
text: "Аккаунт успешно создан",
type: "success",
});
}
});
};
const closeModal = () => {
setInputsValue({
userName: "",
email: "",
password: "",
});
setInputsError({
name: false,
email: false,
password: false,
});
setActive(false);
};
return (
<ModalLayout active={active} setActive={setActive} styles={"registration"}>
<div className="registration-body__left">
<ModalLayout active={active} setActive={closeModal} styles={"registration"}>
<div className="registration-body__main">
<h2>
Подключайтесь к <p>itguild.</p>
Подключайтесь к <p>ITguild</p>
</h2>
<p className="registration-body__left-desc">
Зарегистрируйтесь и назначайте собеседования любым специалистам без
задержек
<p className="registration-body__main-desc">
Зарегистрируйтесь и начните работу уже сегодня
</p>
<div className="input-body">
<div className="input-body__box">
<div className="inputContainer">
<h5>Ваше имя</h5>
<input></input>
<input
className={inputsError.name ? "error" : ""}
onChange={(e) => {
setInputsError({
name: false,
email: false,
password: false,
});
setInputsValue((prevValue) => ({
...prevValue,
userName: e.target.value,
}));
}}
value={inputsValue.userName}
placeholder="Имя"
/>
{inputsError.name && <span>Минимум 2 символа</span>}
</div>
<div className="inputContainer">
<h5>E-mail</h5>
<input></input>
<input
type="email"
className={inputsError.email ? "error" : ""}
onChange={(e) => {
setInputsError({
name: false,
email: false,
password: false,
});
setInputsValue((prevValue) => ({
...prevValue,
email: e.target.value,
}));
}}
value={inputsValue.email}
placeholder="Почта"
/>
{inputsError.email && <span>Введите корректный e-mail</span>}
</div>
</div>
<div className="input-body__box">
<h5>Название компании</h5>
<input></input>
<div className="inputContainer">
<h5>Пароль</h5>
<input></input>
<input
className={inputsError.password ? "error" : ""}
type="password"
onChange={(e) => {
setInputsError({
name: false,
email: false,
password: false,
});
setInputsValue((prevValue) => ({
...prevValue,
password: e.target.value,
}));
}}
value={inputsValue.password}
placeholder="Пароль"
/>
{inputsError.password && <span>Минимум 6 символов</span>}
</div>
<div className="inputContainer">
<h5>Повторите пароль</h5>
<input
className={inputsError.password ? "error" : ""}
type="password"
onChange={(e) => {
setInputsError({
name: false,
email: false,
password: false,
});
setInputsValue((prevValue) => ({
...prevValue,
password: e.target.value,
}));
}}
value={inputsValue.password}
placeholder="Пароль"
/>
{inputsError.password && <span>Минимум 6 символов</span>}
</div>
</div>
</div>
<div className="button-box">
{loader ? (
<Loader style={"green"} />
) : (
<BaseButton
onClick={(e) => e.preventDefault()}
styles={"button-box__submit"}
onClick={(e) => {
e.preventDefault();
submitHandler();
}}
styles="button-box__submit"
>
Отправить
</BaseButton>
<h5>
У вас уже есть аккаунт? <p>Войти</p>
</h5>
)}
{/*<h5>*/}
{/* У вас уже есть аккаунт? <p>Войти</p>*/}
{/*</h5>*/}
</div>
</div>
<div className="registration-body__right">
<div className="registration-body__about">
<h4>Отказ от специалиста в любой момент</h4>
<div className="registration-body__right-text">
<div className="registration-body__about-text">
<img src={anyMoment}></img>
<p>
Поменяйте, откажитесь или возьмите еще специалиста в любой момент
@ -58,7 +232,7 @@ export const ModalRegistration = ({ active, setActive }) => {
</p>
</div>
<h4>100% постоплата</h4>
<div className="registration-body__right-text">
<div className="registration-body__about-text">
<img src={doc}></img>
<p>
Договор не подразумевает какуюлибо оплату до того, как вы
@ -66,12 +240,12 @@ export const ModalRegistration = ({ active, setActive }) => {
</p>
</div>
<h4>Есть вопросы?</h4>
<div className="registration-body__right-text">
<div className="registration-body__about-text">
<img src={telegramLogo}></img>
<p>Напишите нам в Телеграм. Мы с удовольствием ответим!</p>
</div>
</div>
<span onClick={() => setActive(false)} className="exit"></span>
<span onClick={() => closeModal()} className="exit"></span>
</ModalLayout>
);
};

View File

@ -6,12 +6,10 @@
justify-content: space-between;
border: 1px solid #dde2e4;
border-radius: 8px;
width: 1088px;
height: 529px;
&-body {
&__left {
padding: 60px 0 30px 77px;
&__main {
padding-left: 30px;
h2 {
font-weight: 500;
@ -51,6 +49,7 @@
font-weight: 400;
font-size: 15px;
line-height: 18px;
margin-left: 10px;
}
input {
@ -59,9 +58,24 @@
background: #eff2f7;
border-radius: 8px;
border: none;
margin-bottom: 35px;
margin-bottom: 5px;
padding-left: 20px;
}
.inputContainer {
height: 81px;
margin-bottom: 10px;
max-width: 294px;
}
span {
color: red;
font-size: 12px;
}
.error {
border: 1px solid red;
}
}
}
@ -72,11 +86,16 @@
&__submit {
width: 174px;
height: 46px;
height: 50px;
font-size: 18px;
margin-right: 55px;
}
.disable {
opacity: 0.5;
pointer-events: none;
}
h5 {
display: flex;
align-items: flex-end;
@ -92,14 +111,15 @@
}
}
&__right {
&__about {
border-left: 1px solid #f1f1f1;
padding: 80px 32px 46px 25px;
padding: 20px;
display: flex;
flex-direction: column;
justify-content: space-between;
h4 {
margin: 22px 0 22px 0;
font-weight: 900;
font-size: 14px;
line-height: 24px;
@ -120,9 +140,14 @@
}
img {
margin: 0 18px 20px 0;
margin: 0 18px 0 0;
}
}
}
}
.loader {
justify-content: start;
left: 80px;
}
}

View File

@ -10,7 +10,7 @@ export const ModalReset = ({ setModalReset }) => {
<h3 className="modalReset__title">Восстановление доступа</h3>
<div className="modalReset__input">
<span>Укажите e-mail, для которого хотите восстановить пароль.</span>
<input placeholder="email" />
<input placeholder="e-mail" />
</div>
<button className="modalReset__submit">Восстановить</button>
<img

View File

@ -0,0 +1,231 @@
import React, { useState } from "react";
import { apiRequest } from "@api/request";
import { useNotification } from "@hooks/useNotification";
import { Loader } from "@components/Common/Loader/Loader";
import ModalLayout from "@components/Common/ModalLayout/ModalLayout";
import arrow from "assets/icons/arrows/arrowCalendar.png";
import close from "assets/icons/close.png";
import "./modalResetPassword.scss";
export const ModalResetPassword = ({ active, setActive }) => {
const [step, setStep] = useState(false);
const [inputsValue, setInputsValue] = useState({
email: "",
token: "",
password: "",
});
const [inputsError, setInputsError] = useState({
email: false,
password: false,
token: false,
});
const validateEmail = (email) => {
// регулярное выражение для проверки email
const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
// возвращаем true, если email проходит проверку, и false, если нет
return re.test(email);
};
const [loader, setLoader] = useState(false);
const resetInputsValue = () => {
setInputsValue({
email: "",
token: "",
password: "",
});
};
const { showNotification } = useNotification();
const submitHandler = () => {
if (!validateEmail(inputsValue.email)) {
setInputsError((prevValue) => ({ ...prevValue, email: true }));
return showNotification({
show: true,
text: "Введите корректный e-mail",
type: "error",
});
}
setLoader(true);
apiRequest("/register/request-password-reset", {
method: "POST",
data: {
email: inputsValue.email,
},
}).then((data) => {
setLoader(false);
if (data) {
showNotification({
show: true,
text: "Письмо отправлено Вам на почту",
type: "success",
});
setStep(true);
}
});
};
const resetPassword = () => {
if (!inputsValue.password || !inputsValue.token) {
setInputsError((prevValue) => ({
...prevValue,
password: true,
token: true,
}));
return showNotification({
show: true,
text: "Введите данные",
type: "error",
});
}
if (inputsValue.password.length < 6) {
setInputsError((prevValue) => ({ ...prevValue, password: true }));
return;
}
setLoader(true);
apiRequest("/register/reset-password", {
method: "POST",
data: {
token: inputsValue.token,
password: inputsValue.password,
},
}).then((data) => {
setLoader(false);
if (data.code === 0) {
showNotification({
show: true,
text: "Введите корректные данные",
type: "error",
});
} else {
setActive(false);
resetInputsValue();
showNotification({
show: true,
text: "Пароль изменён",
type: "success",
});
}
});
};
return (
<ModalLayout active={active} setActive={setActive}>
<div className="resetPassword">
<img
className="resetPassword__close"
src={close}
alt="close"
onClick={() => setActive(false)}
/>
<h3 className="resetPassword__title">Восстановление пароля</h3>
{!step ? (
<div className="resetPassword__email">
<h5>Введите ваш e-mail:</h5>
<input
type="email"
onChange={(e) => {
setInputsValue((prevValue) => ({
...prevValue,
email: e.target.value,
}));
setInputsError({
email: false,
password: false,
token: false,
});
}}
placeholder="E-mail"
value={inputsValue.email}
className={inputsError.email ? "error" : ""}
/>
{loader ? (
<Loader style={"green"} />
) : (
<button
className="resetPassword__btn"
onClick={(e) => {
e.preventDefault();
submitHandler();
}}
>
Отправить
</button>
)}
</div>
) : (
<div className="resetPassword__email">
<img
src={arrow}
onClick={() => setStep(false)}
className="resetPassword__email__arrow"
/>
<h5>Введите код подтверждения:</h5>
<input
type="text"
onChange={(e) => {
setInputsError({
email: false,
password: false,
token: false,
});
setInputsValue((prevValue) => ({
...prevValue,
token: e.target.value,
}));
}}
value={inputsValue.token}
className={inputsError.token ? "error" : ""}
placeholder="token"
/>
{inputsError.token && (
<span className="warningText">Введите данные</span>
)}
<h5>Введите новый пароль:</h5>
<input
type="password"
onChange={(e) => {
setInputsValue((prevValue) => ({
...prevValue,
password: e.target.value,
}));
setInputsError({
email: false,
password: false,
token: false,
});
}}
placeholder="password"
value={inputsValue.password}
className={inputsError.password ? "error" : ""}
/>
{inputsError.password && (
<span className="warningText">Минимум 6 символов</span>
)}
{loader ? (
<Loader style={"green"} />
) : (
<button
className="resetPassword__btn"
onClick={(e) => {
e.preventDefault();
resetPassword();
}}
>
Отправить
</button>
)}
</div>
)}
</div>
</ModalLayout>
);
};
export default ModalResetPassword;

View File

@ -0,0 +1,72 @@
.resetPassword {
width: 280px;
position: relative;
&__close {
width: 20px;
height: 20px;
cursor: pointer;
position: absolute;
top: -10px;
right: -10px;
}
&__title {
font-size: 20px;
text-align: center;
margin-bottom: 20px;
}
&__email {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
h5 {
font-size: 16px;
margin-bottom: 10px;
align-self: flex-start;
}
input {
padding: 10px !important;
height: 40px !important;
margin-bottom: 5px !important;
}
&__arrow {
position: absolute;
width: 20px;
transform: rotate(180deg);
left: -10px;
top: -55px;
cursor: pointer;
}
}
&__btn {
width: 100px;
height: 35px;
border-radius: 44px;
display: flex;
justify-content: center;
align-items: center;
background-color: #ffffff;
background-image: linear-gradient(to top, #6aaf5c 0%, #52b709 100%), linear-gradient(36deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.16) 47%, rgba(255, 255, 255, 0.17) 50%, rgba(255, 255, 255, 0) 100%);
color: #ffffff;
font-weight: 500;
font-size: 15px;
border: 2px solid #6aaf5c;
transition: 0.3s;
margin-top: 15px;
}
.error {
border: 1px solid red;
}
.warningText {
color: red;
font-size: 12px;
margin-bottom: 10px;
}
}

View File

@ -5,7 +5,7 @@
background: #e1fccf;
border-radius: 12px;
transform: scale(0);
bottom: -90px;
bottom: -40px;
right: -120px;
@media (max-width: 1050px) {

View File

@ -34,6 +34,7 @@ import arrowDown from "assets/icons/arrows/selectArrow.png";
import calendarIcon from "assets/icons/calendar.svg";
import category from "assets/icons/category.svg";
import close from "assets/icons/closeProjectPersons.svg";
import crossWhite from "assets/icons/crossWhite.svg";
import del from "assets/icons/delete.svg";
import edit from "assets/icons/edit.svg";
import file from "assets/icons/fileModal.svg";
@ -74,12 +75,13 @@ export const ModalTiсket = ({
const [dropListOpen, setDropListOpen] = useState(false);
const [dropListMembersOpen, setDropListMembersOpen] = useState(false);
const [executor, setExecutor] = useState(task.executor);
const [taskPriority, setTaskPriority] = useState(task.execution_priority);
const [members, setMembers] = useState(task.taskUsers);
const [taskTags, setTaskTags] = useState(task.mark);
const [users, setUsers] = useState([]);
const [timerStart, setTimerStart] = useState(false);
const [timerInfo, setTimerInfo] = useState({});
const [uploadedFile, setUploadedFile] = useState(null);
// const [uploadedFile, setUploadedFile] = useState(null);
const [currentTimerCount, setCurrentTimerCount] = useState({
hours: 0,
minute: 0,
@ -93,7 +95,9 @@ export const ModalTiсket = ({
const profileInfo = useSelector(getProfileInfo);
const [acceptModalOpen, setAcceptModalOpen] = useState(false);
const [selectTagsOpen, setSelectTagsOpen] = useState(false);
const [selectPriorityOpen, setSelectPriorityOpen] = useState(false);
const { showNotification } = useNotification();
const [commentSendDisable, setCommentSendDisable] = useState(false);
function deleteTask() {
apiRequest("/task/update-task", {
@ -113,6 +117,27 @@ export const ModalTiсket = ({
});
}
const priority = {
2: "Высокий",
1: "Средний",
0: "Низкий",
};
const priorityTypes = [
{
name: "Высокий",
key: 2,
},
{
name: "Средний",
key: 1,
},
{
name: "Низкий",
key: 0,
},
];
function archiveTask() {
setAcceptModalOpen(true);
}
@ -144,6 +169,8 @@ export const ModalTiсket = ({
}
function createComment() {
if (!inputsValue.comment) return;
setCommentSendDisable(true);
apiRequest("/comment/create", {
method: "POST",
data: {
@ -153,6 +180,7 @@ export const ModalTiсket = ({
},
}).then((res) => {
let newComment = res;
setCommentSendDisable(false);
newComment.created_at = new Date();
newComment.subComments = [];
setInputsValue((prevValue) => ({ ...prevValue, comment: "" }));
@ -257,6 +285,19 @@ export const ModalTiсket = ({
});
}
function updateTaskPriority(key) {
setSelectPriorityOpen(false);
apiRequest("/task/update-task", {
method: "PUT",
data: {
task_id: task.id,
execution_priority: key,
},
}).then(() => {
dispatch(setProjectBoardFetch(projectId));
});
}
function addMember(person) {
apiRequest("/task/add-user-to-task", {
method: "POST",
@ -285,6 +326,7 @@ export const ModalTiсket = ({
}
useEffect(() => {
initListeners();
apiRequest(
`/comment/get-by-entity?entity_type=2&entity_id=${task.id}`
).then((res) => {
@ -373,25 +415,26 @@ export const ModalTiсket = ({
const data = await res.json();
setUploadedFile(data);
// setUploadedFile(data);
attachFile(data[0].id);
}
function deleteLoadedFile() {
setUploadedFile(null);
}
// function deleteLoadedFile() {
// setUploadedFile(null);
// }
function attachFile() {
function attachFile(id) {
apiRequest("/file/attach", {
method: "POST",
data: {
file_id: uploadedFile[0].id,
file_id: id,
entity_type: 2,
entity_id: task.id,
status: 1,
},
}).then((res) => {
setTaskFiles((prevValue) => [...prevValue, res]);
setUploadedFile(null);
// setUploadedFile(null);
});
}
@ -502,15 +545,59 @@ export const ModalTiсket = ({
setAcceptModalOpen(false);
}
const initListeners = () => {
document.addEventListener("click", closeByClickingOut);
};
const closeByClickingOut = (event) => {
const path = event.path || (event.composedPath && event.composedPath());
if (
event &&
!path.find(
(div) =>
div.classList &&
(div.classList.contains("button-add-worker") ||
div.classList.contains("dropdownList"))
)
) {
setDropListOpen(false);
setDropListMembersOpen(false);
}
if (
event &&
!path.find(
(div) =>
div.classList &&
(div.classList.contains("deadLine") ||
div.classList.contains("react-datepicker-popper"))
)
) {
setDatePickerOpen(false);
}
if (
event &&
!path.find(
(div) =>
div.classList &&
(div.classList.contains("tags") ||
div.classList.contains("tags__dropDown"))
)
) {
setSelectTagsOpen(false);
}
};
return (
<div
className={active ? "modal-tiket active" : "modal-tiket"}
onClick={() => setActive(false)}
>
<div
className="modal-tiket__content"
onClick={(e) => e.stopPropagation()}
onClick={(e) => {
if (e.target.className.includes("modal-tiket")) setActive(false);
}}
>
<div className="modal-tiket__content">
<div className="content">
<h3 className="title-project">
<img src={category} className="title-project__category"></img>
@ -586,24 +673,24 @@ export const ModalTiсket = ({
})}
</div>
)}
{uploadedFile && (
<div className="fileLoaded">
{uploadedFile.map((file) => {
return (
<div className="loadedFile" key={file.id}>
<img src={backendImg(file.url)} alt="img" key={file.id} />
<div
className="deleteFile"
onClick={() => deleteLoadedFile(file)}
>
<img src={close} alt="delete" />
</div>
</div>
);
})}
<button onClick={attachFile}>Загрузить</button>
</div>
)}
{/*{uploadedFile && (*/}
{/* <div className="fileLoaded">*/}
{/* {uploadedFile.map((file) => {*/}
{/* return (*/}
{/* <div className="loadedFile" key={file.id}>*/}
{/* <img src={backendImg(file.url)} alt="img" key={file.id} />*/}
{/* <div*/}
{/* className="deleteFile"*/}
{/* onClick={() => deleteLoadedFile(file)}*/}
{/* >*/}
{/* <img src={close} alt="delete" />*/}
{/* </div>*/}
{/* </div>*/}
{/* );*/}
{/* })}*/}
{/* <button onClick={attachFile}>Загрузить</button>*/}
{/* </div>*/}
{/*)}*/}
<div className="content__communication">
{/*<p className="tasks">*/}
{/* <button*/}
@ -646,7 +733,11 @@ export const ModalTiсket = ({
}));
}}
/>
<img src={send} onClick={createComment}></img>
<img
className={commentSendDisable ? "disable" : ""}
src={send}
onClick={createComment}
></img>
</div>
<div className="comments__list">
{comments.map((comment) => {
@ -855,7 +946,7 @@ export const ModalTiсket = ({
)}
</div>
<div className="workers_box-bottom">
<div className="workers_box-tag">
<div className="tags">
<div className="tags__selected">
{taskTags.map((tag) => {
@ -867,7 +958,7 @@ export const ModalTiсket = ({
>
<p>{tag.slug}</p>
<img
src={close}
src={crossWhite}
className="delete"
alt="delete"
onClick={() => deleteTagFromTask(tag.id)}
@ -889,12 +980,12 @@ export const ModalTiсket = ({
</div>
{selectTagsOpen && (
<div className="tags__dropDown">
<img
{/* <img
onClick={() => setSelectTagsOpen(false)}
className="tags__dropDown__close"
src={close}
alt="close"
/>
/> */}
{correctProjectTags.map((tag) => {
return (
<div
@ -913,6 +1004,43 @@ export const ModalTiсket = ({
</div>
)}
</div>
</div>
<div className="workers_box-priority">
<div
className="priority__name"
onClick={() => setSelectPriorityOpen(!selectPriorityOpen)}
>
<span>
{typeof taskPriority === "number"
? priority[taskPriority]
: "Выберите приоритет"}
</span>
<img
className={selectPriorityOpen ? "open" : ""}
src={arrowDown}
alt="arrow"
/>
</div>
{selectPriorityOpen && (
<div className="priority__dropDown">
{priorityTypes.map((item) => {
return (
<div
className="priority__dropDown__item"
key={item.key}
onClick={() => {
setTaskPriority(item.key);
updateTaskPriority(item.key);
}}
>
{item.name}
</div>
);
})}
</div>
)}
</div>
<div className="workers_box-bottom">
<div
className={editOpen ? "edit" : ""}
onClick={() => {
@ -958,6 +1086,7 @@ export const ModalTiсket = ({
</div>
{acceptModalOpen && (
<AcceptModal
title={"Вы точно хотите переместить задачу в архив?"}
closeModal={closeAcceptModal}
agreeHandler={deleteTask}
/>

View File

@ -20,7 +20,28 @@
border-radius: 8px;
display: flex;
flex-direction: row;
max-height: 750px;
max-height: 700px;
// overflow-y: auto;
@media (max-width: 880px) {
max-height: none;
overflow-y: inherit;
}
&::-webkit-scrollbar {
width: 3px;
border-radius: 10px;
}
&::-webkit-scrollbar-thumb {
background: #cbd9f9;
border-radius: 20px;
}
&::-webkit-scrollbar-track {
background: #c5c0c6;
border-radius: 20px;
}
.content {
position: relative;
@ -34,7 +55,7 @@
display: flex;
align-items: center;
flex-direction: row;
color: #1458DD;
color: #1458dd;
font-weight: 700;
font-size: 22px;
@ -125,27 +146,6 @@
-webkit-box-orient: vertical;
}
.taskDescription {
max-height: 150px;
overflow-y: auto;
padding-right: 10px;
&::-webkit-scrollbar {
width: 4px;
border-radius: 10px;
}
&::-webkit-scrollbar-thumb {
background: #cbd9f9;
border-radius: 10px;
}
&::-webkit-scrollbar-track {
background: #c5c0c6;
border-radius: 10px;
}
}
.fullName {
max-width: 800px;
}
@ -156,9 +156,9 @@
.comments__list {
display: flex;
overflow-y: auto;
height: 190px;
flex-direction: column;
max-height: 215px;
overflow: auto;
&::-webkit-scrollbar {
width: 4px;
@ -360,24 +360,8 @@
column-gap: 25px;
row-gap: 20px;
margin-top: 33px;
max-height: 170px;
overflow-y: auto;
&::-webkit-scrollbar {
width: 5px;
border-radius: 10px;
}
&::-webkit-scrollbar-thumb {
background: #cbd9f9;
border-radius: 20px;
}
&::-webkit-scrollbar-track {
background: #c5c0c6;
border-radius: 20px;
}
.taskFile {
cursor: pointer;
position: relative;
@ -584,6 +568,11 @@
margin-right: 18px;
}
.disable {
pointer-events: none;
opacity: 0.5;
}
//&:focus-within {
// border: 1px solid #0000004d;
//}
@ -970,6 +959,199 @@
border-bottom: 1px solid #f1f1f1;
}
&-tag {
.tags {
display: flex;
flex-direction: column;
position: relative;
row-gap: 15px;
padding: 22px 40px 0 40px;
border-radius: 10px;
margin-bottom: 10px;
&__selected {
display: flex;
flex-wrap: wrap;
padding: 0;
width: 100%;
gap: 8px;
max-width: 200px;
&__item {
display: flex;
padding: 8px 12px;
border-radius: 35px;
align-items: center;
column-gap: 8px;
cursor: default;
p {
color: #fff;
font-size: 12px;
font-style: normal;
font-weight: 500;
text-decoration: none !important;
margin: 0;
}
.delete {
cursor: pointer;
width: 12px;
height: 12px;
}
}
}
&__select {
cursor: pointer;
width: 100%;
height: 42px;
border-radius: 8px;
background: #ddd;
padding: 8px 12px 9px 12px;
display: flex;
justify-content: space-between;
align-items: center;
span {
font-size: 14px;
color: black;
}
img {
transition: all 0.3s ease;
}
.open {
transform: rotate(180deg);
}
}
&__dropDown {
position: absolute;
padding: 15px 9px 10px;
background: #ebebeb;
max-height: 350px;
overflow-y: auto;
width: 258px;
border-radius: 8px;
border: 1px solid #e4e4e4;
top: 105%;
display: flex;
flex-direction: column;
align-items: center;
row-gap: 6px;
z-index: 10;
&__close {
width: 8px;
height: 8px;
position: absolute;
right: 8px;
top: 5px;
}
.tagItem {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
height: 42px;
cursor: pointer;
column-gap: 8px;
padding: 5px 5px 5px 14px;
border-radius: 8px;
background: #fff;
p {
font-size: 15px;
font-weight: 500;
margin: 0;
line-height: 20px;
text-decoration: none;
}
span {
width: 23px;
height: 23px;
border-radius: 8px;
}
}
&__noItem {
line-height: 20px;
font-size: 15px;
margin: 0;
font-weight: 500;
text-decoration: none !important;
cursor: default;
}
}
}
}
&-priority {
position: relative;
padding: 10px 40px 0 40px;
border-radius: 10px;
margin-bottom: 10px;
.priority {
&__name {
cursor: pointer;
width: 100%;
height: 42px;
border-radius: 8px;
background: #ddd;
padding: 8px 12px 9px 12px;
display: flex;
justify-content: space-between;
align-items: center;
span {
font-size: 14px;
color: black;
}
img {
transition: all 0.3s ease;
}
.open {
transform: rotate(180deg);
}
}
&__dropDown {
position: absolute;
padding: 5px;
background: #ebebeb;
width: 30%;
border-radius: 8px;
border: 1px solid #e4e4e4;
top: 105%;
display: flex;
flex-direction: column;
align-items: center;
font-size: 16px;
row-gap: 6px;
z-index: 10;
&__item {
width: 66px;
font-size: 15px;
transition: 0.4s;
cursor: pointer;
&:hover {
transition: 0.4s;
font-weight: 700;
}
}
}
}
}
&-bottom {
padding: 10px 110px 15px 56px;
font-weight: 400;
@ -991,129 +1173,6 @@
}
}
.tags {
display: flex;
flex-direction: column;
position: relative;
row-gap: 5px;
padding: 5px;
border-radius: 10px;
border: 1px solid #e0e0e0;
margin-bottom: 10px;
&__selected {
display: flex;
flex-wrap: wrap;
padding: 0;
width: 100%;
gap: 8px;
max-width: 200px;
&__item {
display: flex;
padding: 3px 5px 3px 8px;
border-radius: 8px;
align-items: center;
column-gap: 8px;
cursor: default;
p {
font-weight: 600;
text-decoration: none !important;
font-size: 15px;
margin: 0;
line-height: 15px;
color: white;
}
.delete {
cursor: pointer;
width: 12px;
height: 12px;
}
}
}
&__select {
width: 100%;
height: 25px;
border-radius: 8px;
border: 1px solid gray;
padding: 5px 8px;
display: flex;
justify-content: space-between;
span {
font-size: 14px;
color: black;
}
img {
transition: all 0.3s ease;
}
.open {
transform: rotate(180deg);
}
}
&__dropDown {
position: absolute;
padding: 15px 10px 10px;
background: white;
width: 100%;
border-radius: 8px;
border: 1px solid #e4e4e4;
top: 110%;
display: flex;
flex-direction: column;
row-gap: 4px;
z-index: 10;
&__close {
width: 8px;
height: 8px;
position: absolute;
right: 8px;
top: 5px;
}
.tagItem {
display: flex;
width: 100%;
cursor: pointer;
column-gap: 8px;
padding: 5px;
border: 1px solid #ececec;
border-radius: 8px;
justify-content: space-between;
p {
font-size: 18px;
font-weight: 500;
margin: 0;
line-height: 20px;
text-decoration: none;
}
span {
width: 18px;
height: 18px;
border-radius: 50px;
}
}
&__noItem {
line-height: 20px;
font-size: 15px;
margin: 0;
font-weight: 500;
text-decoration: none !important;
cursor: default;
}
}
}
.edit {
background: #52b709;
border-radius: 50px;

View File

@ -11,6 +11,7 @@ import {
deletePersonOnProject,
getBoarderLoader,
modalToggle,
setProjectBoardFetch,
setToggleTab,
} from "@redux/projectsTrackerSlice";
@ -29,6 +30,7 @@ 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";
import FileTracker from "@components/FileTracker/FileTracker";
import AcceptModal from "@components/Modal/AcceptModal/AcceptModal";
import TrackerModal from "@components/Modal/Tracker/TrackerModal/TrackerModal";
import { Navigation } from "@components/Navigation/Navigation";
@ -38,6 +40,7 @@ import TrackerTaskComment from "@components/TrackerTaskComment/TrackerTaskCommen
import arrow from "assets/icons/arrows/arrowCalendar.png";
import arrowStart from "assets/icons/arrows/arrowStart.png";
import arrowDown from "assets/icons/arrows/selectArrow.png";
import calendarIcon from "assets/icons/calendar.svg";
import close from "assets/icons/close.png";
import fileDelete from "assets/icons/closeProjectPersons.svg";
@ -87,14 +90,43 @@ export const TicketFullScreen = () => {
const [startDate, setStartDate] = useState(null);
const [uploadedFile, setUploadedFile] = useState(null);
const [taskFiles, setTaskFiles] = useState([]);
const [taskPriority, setTaskPriority] = useState("");
const [acceptModalOpen, setAcceptModalOpen] = useState(false);
const [taskTags, setTaskTags] = useState([]);
const [selectTagsOpen, setSelectTagsOpen] = useState(false);
const [selectPriorityOpen, setSelectPriorityOpen] = useState(false);
const [correctProjectTags, setCorrectProjectTags] = useState([]);
const { showNotification } = useNotification();
const [commentSendDisable, setCommentSendDisable] = useState(false);
const priority = {
2: "Высокий",
1: "Средний",
0: "Низкий",
};
const priorityTypes = [
{
name: "Высокий",
key: 2,
},
{
name: "Средний",
key: 1,
},
{
name: "Низкий",
key: 0,
},
];
useEffect(() => {
initListeners();
apiRequest(`/task/get-task?task_id=${ticketId.id}&expand=mark`).then(
(taskInfo) => {
setTaskInfo(taskInfo);
setDeadLine(taskInfo.dead_line);
setTaskPriority(taskInfo.execution_priority);
setStartDate(
taskInfo.dead_line ? new Date(taskInfo.dead_line) : new Date()
);
@ -103,6 +135,7 @@ export const TicketFullScreen = () => {
description: taskInfo.description,
comment: "",
});
setTaskTags(taskInfo.mark);
apiRequest(
`/comment/get-by-entity?entity_type=2&entity_id=${taskInfo.id}`
).then((res) => {
@ -148,7 +181,7 @@ export const TicketFullScreen = () => {
});
});
apiRequest(
`/project/get-project?project_id=${taskInfo.project_id}&expand=columns`
`/project/get-project?project_id=${taskInfo.project_id}&expand=columns,mark`
).then((res) => {
setProjectInfo(res);
setCorrectProjectUsers(res.projectUsers);
@ -158,6 +191,18 @@ export const TicketFullScreen = () => {
);
}, []);
useEffect(() => {
let tagIds = taskTags.map((tag) => tag.id);
if (projectInfo.mark) {
setCorrectProjectTags(
projectInfo.mark.reduce((acc, cur) => {
if (!tagIds.includes(cur.id)) acc.push(cur);
return acc;
}, [])
);
}
}, [taskTags, projectInfo]);
function deleteTask() {
apiRequest("/task/update-task", {
method: "PUT",
@ -200,6 +245,8 @@ export const TicketFullScreen = () => {
}
function createComment() {
if (!inputsValue.comment) return;
setCommentSendDisable(true);
apiRequest("/comment/create", {
method: "POST",
data: {
@ -209,6 +256,7 @@ export const TicketFullScreen = () => {
},
}).then((res) => {
let newComment = res;
setCommentSendDisable(false);
newComment.created_at = new Date();
newComment.subComments = [];
setInputsValue((prevValue) => ({ ...prevValue, comment: "" }));
@ -461,26 +509,127 @@ export const TicketFullScreen = () => {
setUploadedFile(null);
}
function deleteFile(file) {
apiRequest("/file/detach", {
method: "DELETE",
function updateTaskPriority(key) {
setSelectPriorityOpen(false);
apiRequest("/task/update-task", {
method: "PUT",
data: {
file_id: file.id,
entity_type: 2,
entity_id: taskInfo.id,
status: 0,
task_id: taskInfo.id,
execution_priority: key,
},
}).then(() => {
}).then(() => {});
}
// function deleteFile(file) {
// apiRequest("/file/detach", {
// method: "DELETE",
// data: {
// file_id: file.id,
// entity_type: 2,
// entity_id: taskInfo.id,
// status: 0,
// },
// }).then(() => {
// setTaskFiles((prevValue) =>
// prevValue.filter((item) => item.id !== file.id)
// );
// });
// }
function deleteFile(file) {
setTaskFiles((prevValue) =>
prevValue.filter((item) => item.id !== file.id)
);
});
}
function closeAcceptModal() {
setAcceptModalOpen(false);
}
function deleteTagFromTask(tagId) {
apiRequest("/mark/detach", {
method: "DELETE",
data: {
mark_id: tagId,
entity_type: 2,
entity_id: taskInfo.id,
},
}).then(() => {
setTaskTags((prevValue) => prevValue.filter((tag) => tag.id !== tagId));
});
}
function addTagToTask(tagId) {
apiRequest("/mark/attach", {
method: "POST",
data: {
mark_id: tagId,
entity_type: 2,
entity_id: taskInfo.id,
},
}).then((data) => {
setSelectTagsOpen(false);
setTaskTags((prevValue) => [...prevValue, data.mark]);
});
}
const initListeners = () => {
document.addEventListener("click", closeByClickingOut);
};
const closeByClickingOut = (event) => {
const path = event.path || (event.composedPath && event.composedPath());
if (
event &&
!path.find(
(div) =>
div.classList &&
(div.classList.contains("button-add-worker") ||
div.classList.contains("dropdownList"))
)
) {
setDropListOpen(false);
setDropListMembersOpen(false);
}
if (
event &&
!path.find(
(div) =>
div.classList &&
(div.classList.contains("deadLine") ||
div.classList.contains("react-datepicker-popper"))
)
) {
setDatePickerOpen(false);
}
if (
event &&
!path.find(
(div) =>
div.classList &&
(div.classList.contains("tags") ||
div.classList.contains("tags__dropDown"))
)
) {
setSelectTagsOpen(false);
}
if (
event &&
!path.find(
(div) =>
div.classList &&
(div.classList.contains("addPerson") ||
div.classList.contains("persons__list"))
)
) {
setPersonListOpen(false);
}
};
return (
<section className="ticket-full-screen">
<ProfileHeader />
@ -623,9 +772,12 @@ export const TicketFullScreen = () => {
</div>
)}
</div>
<Link to={`/profile/tracker`} className="link">
<Link
to={`/tracker/project/${taskInfo.project_id}`}
className="link"
>
<div className="tasks__head__back">
<p>Вернуться на проекты</p>
<p>Вернуться на проект</p>
<img src={arrow} alt="arrow" />
</div>
</Link>
@ -691,19 +843,12 @@ export const TicketFullScreen = () => {
<div className="task__files filesFullScreen">
{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={taskInfo.id}
/>
<div
className="deleteFile"
onClick={() => deleteFile(file)}
>
<img src={fileDelete} alt="delete" />
</div>
</div>
);
})}
</div>
@ -776,7 +921,12 @@ export const TicketFullScreen = () => {
}));
}}
/>
<img src={send} onClick={createComment} alt="send"></img>
<img
className={commentSendDisable ? "disable" : ""}
src={send}
onClick={createComment}
alt="send"
></img>
</div>
<div className="comments__list">
{comments.map((comment) => {
@ -989,7 +1139,101 @@ export const TicketFullScreen = () => {
</button>
)}
</div>
<div className="workers_box-tag">
<div className="tags">
<div className="tags__selected">
{taskTags.map((tag) => {
return (
<div
className="tags__selected__item"
key={tag.id}
style={{ background: tag.color }}
>
<p>{tag.slug}</p>
<img
src={close}
className="delete"
alt="delete"
onClick={() => deleteTagFromTask(tag.id)}
/>
</div>
);
})}
</div>
<div
className="tags__select"
onClick={() => setSelectTagsOpen(!selectTagsOpen)}
>
<span>Выберите тег</span>
<img
className={selectTagsOpen ? "open" : ""}
src={arrowDown}
alt="arrow"
/>
</div>
{selectTagsOpen && (
<div className="tags__dropDown">
<img
onClick={() => setSelectTagsOpen(false)}
className="tags__dropDown__close"
src={close}
alt="close"
/>
{correctProjectTags.map((tag) => {
return (
<div
className="tagItem"
key={tag.id}
onClick={() => addTagToTask(tag.id)}
>
<p>{tag.slug}</p>
<span style={{ background: tag.color }} />
</div>
);
})}
{!Boolean(correctProjectTags.length) && (
<p className="tags__dropDown__noItem">Нет тегов</p>
)}
</div>
)}
</div>
</div>
<div className="workers_box-priority">
<div
className="priority__name"
onClick={() => setSelectPriorityOpen(!selectPriorityOpen)}
>
<span>
{typeof taskPriority === "number"
? priority[taskPriority]
: "Выберите приоритет"}
</span>
<img
className={selectPriorityOpen ? "open" : ""}
src={arrowDown}
alt="arrow"
/>
</div>
{selectPriorityOpen && (
<div className="priority__dropDown">
{priorityTypes.map((item) => {
return (
<div
className="priority__dropDown__item"
key={item.key}
onClick={() => {
setTaskPriority(item.key);
updateTaskPriority(item.key);
}}
>
{item.name}
</div>
);
})}
</div>
)}
</div>
<div className="workers_box-bottom">
<div
className={editOpen ? "edit" : ""}
@ -1039,7 +1283,11 @@ export const TicketFullScreen = () => {
)}
</div>
{acceptModalOpen && (
<AcceptModal closeModal={closeAcceptModal} agreeHandler={deleteTask} />
<AcceptModal
title={"Вы точно хотите переместить задачу в архив?"}
closeModal={closeAcceptModal}
agreeHandler={deleteTask}
/>
)}
<Footer />
</section>

View File

@ -32,10 +32,11 @@ import { getCorrectDate } from "@components/Calendar/calendarHelper";
import BaseButton from "@components/Common/BaseButton/BaseButton";
import ModalLayout from "@components/Common/ModalLayout/ModalLayout";
import arrowCreateTask from "assets/icons/arrows/arrowCreateTask.svg";
import arrowRight from "assets/icons/arrows/arrowRightCreateTask.svg";
import arrowDown from "assets/icons/arrows/selectArrow.png";
import close from "assets/icons/close.png";
import calendarImg from "assets/icons/createTaskCalendar.svg";
import crossWhite from "assets/icons/crossWhite.svg";
import avatarMok from "assets/images/avatarMok.png";
import "./trackerModal.scss";
@ -51,6 +52,7 @@ export const TrackerModal = ({
projectId,
priorityTask,
projectUsers,
projectMarks,
}) => {
const dispatch = useDispatch();
const projectBoard = useSelector(getProjectBoard);
@ -76,6 +78,11 @@ export const TrackerModal = ({
);
const [selectExecutorTaskOpen, setSelectExecutorTaskOpen] = useState(false);
const [correctProjectUsers, setCorrectProjectUsers] = useState([]);
const [correctProjectTags, setCorrectProjectTags] = useState([]);
const [taskTags, setTaskTags] = useState([]);
const [selectTagsOpen, setSelectTagsOpen] = useState(false);
const [selectedPriority, setSelectedPriority] = useState(null);
const [selectPriority, setSelectPriority] = useState(false);
const [selectColumnPriorityOpen, setSelectColumnPriorityOpen] =
useState(false);
const { showNotification } = useNotification();
@ -83,6 +90,21 @@ export const TrackerModal = ({
const [datePickerOpen, setDatePickerOpen] = useState(false);
const [startDate, setStartDate] = useState(new Date());
const priority = [
{
name: "Высокий",
key: 2,
},
{
name: "Средний",
key: 1,
},
{
name: "Низкий",
key: 0,
},
];
function createTab() {
if (!valueColumn) {
showNotification({ show: true, text: "Введите название", type: "error" });
@ -124,6 +146,7 @@ export const TrackerModal = ({
status: 1,
user_id: localStorage.getItem("id"),
column_id: selectedTab,
execution_priority: selectedPriority ? selectedPriority.key : "",
priority: priorityTask,
dead_line: deadLineDate ? getCorrectRequestDate(deadLineDate) : "",
},
@ -135,6 +158,18 @@ export const TrackerModal = ({
type: "error",
});
} else {
for (let i = 0; i < taskTags.length; i++) {
apiRequest("/mark/attach", {
method: "POST",
data: {
mark_id: taskTags[i].id,
entity_type: 2,
entity_id: res.id,
},
}).then(() => {
setTaskTags([]);
});
}
if (selectedExecutorTask.user_id) {
apiRequest("/task/update-task", {
method: "PUT",
@ -148,6 +183,7 @@ export const TrackerModal = ({
setValueTiket("");
setDescriptionTicket("");
setSelectedExecutorTask("Выберите исполнителя задачи");
setSelectedPriority(null);
});
} else {
setActive(false);
@ -304,8 +340,53 @@ export const TrackerModal = ({
} else {
setCorrectProjectUsers(projectUsers);
}
initListeners();
}, [active]);
useEffect(() => {
let tagIds = taskTags.map((tag) => tag.id);
if (projectMarks) {
setCorrectProjectTags(
projectMarks.reduce((acc, cur) => {
if (!tagIds.includes(cur.id)) acc.push(cur);
return acc;
}, [])
);
}
}, [taskTags, projectMarks]);
const initListeners = () => {
document.addEventListener("click", closeByClickingOut);
};
const closeByClickingOut = (event) => {
const path = event.path || (event.composedPath && event.composedPath());
if (
event &&
!path.find(
(div) =>
div.classList &&
(div.classList.contains("tags__selected__name") ||
div.classList.contains("tags__dropDown"))
)
) {
setSelectTagsOpen(false);
}
if (
event &&
!path.find(
(div) =>
div.classList &&
(div.classList.contains("select__executor") ||
div.classList.contains("select__executor__dropDown"))
)
) {
setSelectExecutorTaskOpen(false);
}
};
return (
<ModalLayout
active={active}
@ -387,7 +468,7 @@ export const TrackerModal = ({
<div className="input-container invitePersonBlock__input">
<input
className="name-project"
placeholder="email"
placeholder="e-mail"
type="email"
/>
</div>
@ -404,11 +485,22 @@ export const TrackerModal = ({
<>
<div className="title-project">
<div className="createTaskHead">
<span>Этап</span>
<div className="createTaskHead__selectColumn">
<span>Backlog</span>
<img src={arrowCreateTask} alt="arrow" />
<div className="createTaskBody__right__owner">
<p>Создатель : {profileInfo?.fio}</p>
<img
src={
profileInfo.photo
? urlForLocal(profileInfo.photo)
: avatarMok
}
alt="avatar"
/>
</div>
{/*<span>Этап</span>*/}
{/*<div className="createTaskHead__selectColumn">*/}
{/* <span>Backlog</span>*/}
{/* <img src={arrowCreateTask} alt="arrow" />*/}
{/*</div>*/}
</div>
<div className="createTaskBody">
<div className="createTaskBody__left">
@ -445,17 +537,107 @@ export const TrackerModal = ({
/>
</div>
<div className="createTaskBody__right">
<div className="createTaskBody__right__owner">
<p>Создатель : {profileInfo?.fio}</p>
<div className="createTaskBody__right__tags">
<div className="tags__selected">
<div className="tags__selected__items">
{taskTags.map((tag) => {
return (
<div
className="selectedTag"
key={tag.id}
style={{ background: tag.color }}
>
<p>{tag.slug}</p>
<img
src={
profileInfo.photo
? urlForLocal(profileInfo.photo)
: avatarMok
src={crossWhite}
className="delete"
alt="delete"
onClick={() =>
setTaskTags((prevState) =>
prevState.filter(
(prevTag) => prevTag.id !== tag.id
)
)
}
alt="avatar"
/>
</div>
);
})}
</div>
<div
className="tags__selected__name"
onClick={() => setSelectTagsOpen(!selectTagsOpen)}
>
Выберите тег
<img
className={
selectTagsOpen ? "arrow arrow--open" : "arrow"
}
src={arrowDown}
alt="arrow"
/>
</div>
</div>
{selectTagsOpen && (
<div className="tags__dropDown">
<img
src={close}
className="close"
onClick={() => setSelectTagsOpen(false)}
/>
{correctProjectTags.map((tag) => {
return (
<div
className="tag__item"
key={tag.id}
onClick={() =>
setTaskTags((prevState) => [...prevState, tag])
}
>
<p>{tag.slug}</p>
<span style={{ background: tag.color }} />
</div>
);
})}
{Boolean(!correctProjectTags.length) && (
<p className="noTags">Нет тегов</p>
)}
</div>
)}
</div>
<div className="select__priority">
<div
className="select__priority__name"
onClick={() => setSelectPriority(!selectPriority)}
>
{selectedPriority
? `Приоритет: ${selectedPriority.name}`
: "Выберите приоритет"}
<img
className={selectPriority ? "arrow arrow--open" : "arrow"}
src={arrowDown}
alt="arrow"
/>
</div>
{selectPriority && (
<div className="select__priority__dropDown">
{priority.map((item) => {
return (
<div
className="dropdown__item"
key={item.key}
onClick={() => {
setSelectPriority(false);
setSelectedPriority(item);
}}
>
{item.name}
</div>
);
})}
</div>
)}
</div>
<div
onClick={() =>
setSelectExecutorTaskOpen(!selectExecutorTaskOpen)

View File

@ -162,7 +162,7 @@
&__dropDown {
position: absolute;
background: #F1F1F1;
background: #f1f1f1;
border-radius: 8px;
top: 55px;
left: 0;
@ -233,6 +233,7 @@
text-overflow: ellipsis;
font-size: 14px;
max-width: 270px;
margin-left: 10px;
}
img {
@ -242,6 +243,8 @@
}
&__dropDown {
max-height: 155px;
overflow-y: auto;
display: flex;
flex-direction: column;
position: absolute;
@ -263,6 +266,21 @@
}
}
}
&::-webkit-scrollbar {
width: 3px;
border-radius: 10px;
}
&::-webkit-scrollbar-thumb {
background: #cbd9f9;
border-radius: 20px;
}
&::-webkit-scrollbar-track {
background: #c5c0c6;
border-radius: 20px;
}
}
@media (max-width: 500px) {
@ -282,7 +300,7 @@
display: flex;
column-gap: 9.5px;
align-items: center;
background: #F1F1F1;
background: #f1f1f1;
border-radius: 22px 22px 0 0;
span {
@ -297,10 +315,10 @@
span {
padding: 3.75px 16.25px 5.75px;
color: #FFFFFF;
color: #ffffff;
font-size: 12px;
font-weight: 500;
background: #52B709;
background: #52b709;
border-radius: 12px;
}
}
@ -322,13 +340,13 @@
}
.input-container {
background: #F1F1F1;
background: #f1f1f1;
margin: 0 0 17px;
width: 393px;
height: 47px;
input {
background: #F1F1F1;
background: #f1f1f1;
color: #000000;
font-size: 15px;
line-height: 18px;
@ -337,7 +355,7 @@
}
.ck-editor {
border: 1px solid #DDDDDD;
border: 1px solid #dddddd;
border-radius: 8px;
}
@ -357,9 +375,8 @@
display: flex;
align-items: center;
column-gap: 9.5px;
margin-bottom: 30px;
p {
color: #2D4A17;
color: #2d4a17;
font-size: 14px;
font-weight: 500;
line-height: 32px;
@ -371,14 +388,198 @@
}
}
&__tags {
display: flex;
flex-direction: column;
position: relative;
.tags {
&__selected {
width: 393px;
font-weight: 300;
line-height: 18px;
font-size: 15px;
margin-bottom: 17.5px;
border-radius: 8px;
display: flex;
flex-direction: column;
row-gap: 8px;
&__name {
color: #000;
font-size: 15px;
font-weight: 400;
line-height: normal;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
padding: 9.5px 12px;
border-radius: 8px;
height: 47px;
border: 1px solid #e4e4e4;
img {
transition: all 0.3s ease;
}
.arrow--open {
transform: rotate(180deg);
}
}
&__items {
display: flex;
flex-wrap: wrap;
padding: 0;
width: 100%;
gap: 8px;
max-width: 393px;
.selectedTag {
display: flex;
padding: 7px 7px 7px 8px;
border-radius: 35px;
align-items: center;
column-gap: 8px;
p {
color: #fff;
font-size: 13px;
font-style: normal;
font-weight: 500;
line-height: 0px;
margin: 0;
}
.delete {
cursor: pointer;
width: 12px;
height: 12px;
}
}
}
}
&__dropDown {
display: flex;
flex-direction: column;
width: 100%;
position: absolute;
border-radius: 8px;
border: 1px solid #e4e4e4;
top: 90%;
z-index: 101;
padding: 30px 10px 10px;
background: #ebebeb;
row-gap: 8px;
.close {
position: absolute;
cursor: pointer;
width: 22px;
height: 22px;
right: 9px;
top: 4px;
}
.tag__item {
display: flex;
align-items: center;
height: 42px;
background: white;
width: 100%;
cursor: pointer;
column-gap: 8px;
padding: 9px 14px;
border: 1px solid #ececec;
border-radius: 8px;
justify-content: space-between;
p {
color: #000;
font-size: 14px;
font-style: normal;
font-weight: 300;
line-height: 0px;
margin: 0;
text-decoration: none;
}
span {
width: 22px;
height: 23px;
border-radius: 8px;
}
}
.noTags {
text-align: center;
font-size: 18px;
}
}
}
}
.select__priority {
position: relative;
&__name {
color: #000;
width: 393px;
height: 47px;
font-size: 15px;
font-weight: 400;
line-height: normal;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
padding: 9.5px 12px;
border-radius: 8px;
height: 47px;
border: 1px solid #e4e4e4;
margin-bottom: 10px;
}
&__dropDown {
position: absolute;
border-radius: 8px;
padding: 9.5px 12px;
display: flex;
flex-direction: column;
row-gap: 5px;
width: 100%;
background: #f1f1f1;
z-index: 101;
.dropdown__item {
font-size: 16px;
cursor: pointer;
&:hover {
font-weight: 700;
}
}
}
img {
transition: all 0.3s ease;
}
.arrow--open {
transform: rotate(180deg);
}
}
.select__executor {
background: #F1F1F1;
background: #f1f1f1;
width: 393px;
height: 47px;
font-weight: 300;
line-height: 18px;
font-size: 15px;
margin-bottom: 17.5px;
margin-bottom: 27px;
z-index: 100;
}
@ -386,7 +587,7 @@
margin: 0;
width: 185px;
height: 42px;
color: #FFFFFF;
color: #ffffff;
font-weight: 500;
font-size: 16px;
}
@ -402,7 +603,7 @@
margin-bottom: 22px;
span {
color: #6F6F6F;
color: #6f6f6f;
}
p {
@ -541,7 +742,7 @@
.exit {
cursor: pointer;
position: absolute;
top: 36px;
top: 20px;
right: 20px;
width: 13px;
height: 13px;

View File

@ -26,7 +26,7 @@ export const Navigation = () => {
},
{
path: "/calendar",
name: "Отчетность",
name: "Отчеты",
},
{
path: "/tracker",
@ -73,8 +73,15 @@ export const Navigation = () => {
if (localStorage.getItem("role_status") === "18") {
return;
}
apiRequest(`/profile/${localStorage.getItem("cardId")}`).then(
(profileInfo) => dispatch(setProfileInfo(profileInfo))
if (Object.keys(profileInfo).length) {
return;
}
apiRequest(`/user/me`).then((profileInfo) =>
dispatch(
setProfileInfo(
profileInfo.userCard ? profileInfo.userCard : profileInfo
)
)
);
}, [dispatch]);
@ -93,12 +100,12 @@ export const Navigation = () => {
<div className="profileHeader__personalInfo">
<h3 className="profileHeader__personalInfoName">
{user === "developer" ? profileInfo?.fio : ""}
{profileInfo?.fio ? profileInfo?.fio : profileInfo?.username}
</h3>
<NavLink end to={"/profile"}>
<img
src={
profileInfo.photo ? urlForLocal(profileInfo.photo) : avatarMok
profileInfo?.photo ? urlForLocal(profileInfo.photo) : avatarMok
}
className="profileHeader__personalInfoAvatar"
alt="avatar"

View File

@ -1,7 +1,7 @@
.notification {
border-radius: 40px;
background: linear-gradient(180deg, #FFF 0%, #EBEBEB 100%);
padding: 20px 82px 17px 27px;
padding: 15px 60px 15px 15px;
position: fixed;
bottom: 25px;
right: 25px;
@ -13,7 +13,7 @@
align-items: center;
h2 {
max-width: 194px;
max-width: 210px;
font-weight: 500;
font-size: 16px;
margin-bottom: 0;
@ -27,8 +27,8 @@
&__close {
cursor: pointer;
position: absolute;
top: 15px;
right: 25px;
top: 10px;
right: 20px;
width: 15px;
height: 15px;
}

View File

@ -9,7 +9,7 @@
a {
color: #5b6871;
font-weight: 400;
font-size: 12px;
font-size: 13px;
line-height: 16px;
transition: 0.3s all ease;
position: relative;
@ -17,14 +17,6 @@
display: flex;
align-items: center;
@media (max-width: 525px) {
font-size: 10px;
}
@media (max-width: 455px) {
font-size: 9px;
}
&:hover {
text-decoration: none;
color: #000000;

View File

@ -22,6 +22,8 @@ import { Navigation } from "@components/Navigation/Navigation";
import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
import avatarMok from "assets/images/avatarMok.png";
import { ProfileCalendarComponent } from "./ProfileCalendarComponent";
import "./profileCalendar.scss";
@ -87,29 +89,30 @@ export const ProfileCalendar = () => {
<ProfileBreadcrumbs
links={[
{ name: "Главная", link: "/profile" },
{ name: "Ваша отчетность", link: "/profile/calendar" },
{ name: "Отчеты", link: "/profile/calendar" },
]}
/>
<h2 className="summary__title">Ваши отчеты</h2>
<div className="summary__info">
<div className="summary__person">
<img
src={urlForLocal(profileInfo.photo)}
src={
profileInfo?.photo ? urlForLocal(profileInfo.photo) : avatarMok
}
className="summary__avatar"
alt="avatar"
/>
<p className="summary__name">
{profileInfo.fio}, {profileInfo.specification} разработчик
{profileInfo?.fio ? profileInfo?.fio : profileInfo?.username},{" "}
{profileInfo.specification} разработчик
</p>
</div>
<Link to="/report">
<button
className="calendar__btn"
onClick={() => {
dispatch(setReportDate(""));
}}
onClick={() => dispatch(setReportDate(""))}
>
Заполнить отчет за день
Заполнить отчет
</button>
</Link>
</div>

View File

@ -205,11 +205,11 @@ export const ProfileCalendarComponent = React.memo(
<div className="calendar-component">
<div className="calendar-component__header">
<div className="calendar-component__header-info">
<h3>Мои отчеты:</h3>
<h3>Мои отчеты за </h3>
<p className="calendar__hours">
{month}&nbsp;
<span>
{totalHours} {hourOfNum(totalHours)}{" "}
({totalHours} {hourOfNum(totalHours)})
</span>
</p>
</div>
@ -316,19 +316,23 @@ export const ProfileCalendarComponent = React.memo(
? `${getCorrectDate(startDate)} - ${getCorrectDate(endDate)}`
: `${getCorrectDate(endDate)} - ${getCorrectDate(startDate)}`
: activePeriod
? "Выберите начало диапазона"
? "Выберите диапазон на календаре"
: "Выбрать диапазон"}
</span>
<span>
{totalRangeHours
? `${totalRangeHours} ${hourOfNum(totalRangeHours)}`
: "0 часов"}
: endDate
? "0 часов"
: ""}
</span>
{endDate && (
<BaseButton
styles={"clear-days"}
onClick={() => {
resetRangeDays();
toggleActivePeriod();
toggleRangeDays();
}}
>
Сбросить

View File

@ -78,7 +78,6 @@
margin: 0;
max-width: 220px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}

View File

@ -2,8 +2,7 @@ import React, { useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { NavLink, useNavigate } from "react-router-dom";
import { auth, setProfileInfo } from "@redux/outstaffingSlice";
import { getRole } from "@redux/roleSlice";
import { auth, getProfileInfo, setProfileInfo } from "@redux/outstaffingSlice";
import { apiRequest } from "@api/request";
@ -14,8 +13,7 @@ import "./profileHeader.scss";
export const ProfileHeader = () => {
const navigate = useNavigate();
const dispatch = useDispatch();
const userRole = useSelector(getRole);
const profileInfo = useSelector(getProfileInfo);
const [user] = useState(
localStorage.getItem("role_status") === "18" ? "partner" : "developer"
);
@ -26,9 +24,16 @@ export const ProfileHeader = () => {
if (localStorage.getItem("role_status") === "18") {
return;
}
apiRequest(`/profile/${localStorage.getItem("cardId")}`).then(
(profileInfo) => dispatch(setProfileInfo(profileInfo))
if (Object.keys(profileInfo).length) {
return;
}
apiRequest(`/user/me`).then((profileInfo) => {
dispatch(
setProfileInfo(
profileInfo.userCard ? profileInfo.userCard : profileInfo
)
);
});
}, [dispatch]);
const handler = () => {
@ -36,7 +41,7 @@ export const ProfileHeader = () => {
localStorage.clear();
dispatch(auth(false));
setIsLoggingOut(false);
navigate(userRole === "ROLE_DEV" ? "/authdev" : "/auth");
navigate("/auth");
};
return (

View File

@ -25,6 +25,7 @@ import "./projectTiket.scss";
export const ProjectTiket = ({ project, index }) => {
const [modalSelect, setModalSelect] = useState(false);
const [modalAdd, setModalAdd] = useState(false);
const [modalDelete, setModalDelete] = useState(false);
const [acceptModalOpen, setAcceptModalOpen] = useState(false);
const [path, setPath] = useState("");
const dispatch = useDispatch();
@ -43,7 +44,10 @@ export const ProjectTiket = ({ project, index }) => {
if (
event &&
!path.find((item) => item.classList && item.classList.contains("project"))
!path.find(
(div) =>
div.classList && div.classList.contains(`project-${project.id}`)
)
) {
setModalSelect(false);
}
@ -68,14 +72,18 @@ export const ProjectTiket = ({ project, index }) => {
function closeAcceptModal() {
setAcceptModalOpen(false);
setModalDelete(false);
}
function linkProject() {}
return (
<div className="project" key={index}>
<Link to={`/tracker/project/${project.id}`}>
<p className="project__link">{project.name}</p>
<div className={`project project-${project.id}`} key={index}>
<Link
to={`/tracker/project/${project.id}`}
className="project__open-traker"
>
<div className="project__link">{project.name}</div>
<div className="project__info">
<p>Открытые задачи</p>
@ -90,9 +98,15 @@ export const ProjectTiket = ({ project, index }) => {
</div>
</Link>
<span className="menu-settings" onClick={() => setModalSelect(true)}>
<span
className="menu-settings"
onClick={() => {
setModalSelect(!modalSelect);
}}
>
...
</span>
<Link
to={`/profile/statistics/${project.id}`}
className="project__statistics"
@ -132,7 +146,13 @@ export const ProjectTiket = ({ project, index }) => {
<img src={archiveSet}></img>
<p>в архив</p>
</div>
<div onClick={removeProject}>
<div
onClick={() => {
setModalDelete(true);
setModalSelect(false);
}}
>
<img src={del}></img>
<p>удалить</p>
</div>
@ -140,6 +160,15 @@ export const ProjectTiket = ({ project, index }) => {
</ModalSelect>
{acceptModalOpen && (
<AcceptModal
title={"Вы точно хотите переместить проект в архив?"}
closeModal={closeAcceptModal}
agreeHandler={removeProject}
/>
)}
{modalDelete && (
<AcceptModal
title={"Вы точно хотите удалить?"}
closeModal={closeAcceptModal}
agreeHandler={removeProject}
/>

View File

@ -1,10 +1,12 @@
.project {
display: flex;
flex-direction: column;
position: relative;
width: 322px;
background: #f1f1f1;
border-radius: 12px;
padding: 17px 26px 16px;
cursor: pointer;
max-width: 440px;
transition: 0.4s;
@ -24,14 +26,14 @@
&__link {
font-weight: 700;
width: 194px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 18px;
line-height: 32px;
color: #111112;
margin-bottom: 22px;
overflow: hidden;
white-space: nowrap;
display: flex;
text-overflow: ellipsis;
max-width: 380px;
&:hover {
@ -43,7 +45,7 @@
display: flex;
align-items: center;
position: relative;
margin-bottom: 27px;
margin-bottom: 45px;
p {
color: #6f6f6f;
@ -85,7 +87,7 @@
font-size: 21px;
color: #6f6f6f;
right: 26px;
top: 59px;
top: 10px;
}
&__avatar {
@ -94,12 +96,18 @@
margin-left: 56px;
}
&__open-traker {
padding: 17px 26px 16px;
}
&__statistics {
color: #678eda;
margin-top: 27px;
position: absolute;
bottom: 18px;
left: 26px;
color: #0042b4;
text-decoration: underline;
font-size: 12px;
font-weight: 300;
font-size: 14px;
font-weight: 400;
line-height: 17px;
}
}

View File

@ -125,8 +125,8 @@ const ReportForm = () => {
<ProfileBreadcrumbs
links={[
{ name: "Главная", link: "/profile" },
{ name: "Ваша отчетность", link: "/profile/calendar" },
{ name: "Страница добавления нового отчета", link: "/report" },
{ name: "Отчеты", link: "/profile/calendar" },
{ name: "Добавить отчет", link: "/report" },
]}
/>
<h2 className="summary__title">
@ -180,9 +180,7 @@ const ReportForm = () => {
<p className="report-form__task-title--description">
Краткое описание задачи
</p>
<p className="report-form__task-title--hours">
Количество часов
</p>
<p className="report-form__task-title--hours">Кол-во часов</p>
</div>
{inputs.map((input, index) => {
@ -260,7 +258,7 @@ const ReportForm = () => {
<p className="addMore" onClick={addInput}>
+
</p>
<span>Добавить еще </span>
<span>Добавить задачу</span>
</div>
</div>
</div>

View File

@ -54,7 +54,6 @@
font-weight: 700;
font-style: normal;
letter-spacing: normal;
line-height: 48.74px;
text-align: left;
@media (max-width: 555px) {
@ -75,7 +74,7 @@
@media (max-width: 555px) {
margin-top: 25px;
margin-bottom: 15px;
margin-bottom: 10px;
}
}
}
@ -115,12 +114,11 @@
font-weight: 700;
font-style: normal;
letter-spacing: normal;
line-height: 48.74px;
width: 12px;
}
&-list {
margin-top: 40px;
margin-top: 30px;
display: flex;
align-items: center;
@ -146,7 +144,7 @@
&-header {
display: flex;
justify-content: flex-start;
margin-top: 40px;
margin-top: 20px;
margin-left: 50px;
p {
@ -156,7 +154,7 @@
letter-spacing: normal;
line-height: normal;
text-align: left;
margin-bottom: 26px;
margin-bottom: 10px;
white-space: nowrap;
@media (max-width: 450px) {
@ -276,6 +274,7 @@
margin-left: 28px;
display: flex;
align-items: center;
justify-content: center;
.addMore {
display: flex;
@ -285,9 +284,9 @@
width: 38px;
height: 38px;
background: #e8e8e8;
margin-bottom: 0;
border-radius: 50px;
font-size: 32px;
cursor: pointer;
}
span {
@ -297,7 +296,8 @@
letter-spacing: normal;
line-height: normal;
text-align: left;
margin-left: 20px;
margin-left: 10px;
cursor: pointer;
}
}
@ -352,6 +352,7 @@
&__footer {
display: flex;
flex-direction: column-reverse;
align-items: center;
margin-top: 20px;
@ -380,16 +381,13 @@
&-text {
font-family: "GT Eesti Pro Display";
font-size: 1.9em;
font-weight: 600;
font-style: normal;
letter-spacing: normal;
line-height: 22.38px;
text-align: left;
margin-left: 40px;
margin-bottom: 0;
margin-bottom: 20px;
span {
font-weight: 100;
font-weight: 600;
}
}

View File

@ -2,7 +2,7 @@ import React, { useState } from "react";
import { Link } from "react-router-dom";
import arrow from "assets/icons/sideBarArrow.svg";
import LogoITguild from "assets/images/logo/LogoITguild.svg";
import ITguild from "assets/images/logo/ITguild.svg";
import "./sidebar.scss";
@ -37,13 +37,13 @@ export const SideBar = () => {
</div>
<p className="outstaffing">
<img src={arrow}></img>
2023 © Outstaffing
{new Date().getFullYear()} © Outstaffing
</p>
</div>
<div className={active ? "auth-body active" : "auth-body"}>
<div className="auth-body__title">
<img src={LogoITguild}></img>
<img src={ITguild}></img>
</div>
<ul className="auth-body__navigation">
<li>
@ -72,10 +72,10 @@ export const SideBar = () => {
</li>
</ul>
<p className="auth-body__politic">Политика конфиденциальности</p>
<div className="auth-body__contacts">
<h4>+7 812 363 17 87</h4>
<p>Перезвонить Вам?</p>
</div>
{/*<div className="auth-body__contacts">*/}
{/* <h4>+7 812 363 17 87</h4>*/}
{/* <p>Перезвонить Вам?</p>*/}
{/*</div>*/}
</div>
</div>
);

View File

@ -125,6 +125,10 @@
&__title {
display: flex;
margin-top: 24px;
img {
width: 160px;
}
}
&__navigation {
@ -143,7 +147,7 @@
&__politic {
margin-top: 42px;
font-size: 12px;
font-size: 14px;
line-height: 22px;
color: #000000;
}
@ -156,7 +160,7 @@
line-height: 33px;
}
p {
font-size: 12px;
font-size: 14px;
}
}
@ -190,6 +194,6 @@
@media (max-width: 1375px) {
left: 0;
width: 100%;
height: 605px;
height: 705px;
}
}

View File

@ -81,7 +81,7 @@ export const SliderWorkers = ({ title, titleInfo, subTitle }) => {
</Slider>
{Boolean(subTitle) ? (
<div className="slider-workers__description">
<h2>Дополните свою команду опытными ИТ-специалистами</h2>
<h2>Дополните Вашу команду опытными IT-специалистами</h2>
<p>
Даём финансовые, юридические и кадровые гарантии, предоставляем
SLA и отвечаем за работу команды. Вам не нужно искать, оформлять

View File

@ -46,11 +46,14 @@
padding: 8px 26px;
font-weight: 400;
font-size: 16px;
line-height: 32px;
@media (max-width: 450px) {
max-width: 180px;
}
}
span {
margin-left: 55px;
margin-left: 20px;
font-weight: 400;
font-size: 16px;
line-height: 32px;

View File

@ -47,7 +47,7 @@ export const Instruction = () => {
<img src={comment} alt="" />
</div>
<div className="instruction__text instruction__text_info">
Количество вопросов в тесте: <span>{countQuestions}</span>
Вопросов в тесте: <span>{countQuestions}</span>
</div>
</div>
</>

View File

@ -1,18 +1,16 @@
import { useDispatch, useSelector } from "react-redux";
import { useDispatch } from "react-redux";
import { useNavigate } from "react-router-dom";
import { auth } from "../redux/outstaffingSlice";
import { getRole } from "../redux/roleSlice";
export const useLogout = () => {
const dispatch = useDispatch();
const userRole = useSelector(getRole);
const navigate = useNavigate();
const logout = () => {
localStorage.clear();
dispatch(auth(false));
navigate(userRole === "ROLE_DEV" ? "/authdev" : "/auth");
navigate("/auth");
};
return { logout };

View File

@ -18,10 +18,6 @@ code {
monospace;
}
h1 {
}
.container {
position: relative !important;
}

View File

@ -73,7 +73,7 @@ export const Article = () => {
предпринимателями и тщательно проверяем своих партнеров.
Партнерами являются агентства, которые специализируются на
оказании услуг в формате аутстафф-модели и обладают глубокой
экспертизой в разработке и внедрении ИТ-проектов.
экспертизой в разработке и внедрении IT-проектов.
</p>
</div>
<img src={mockImgArticle} className="article-blog__body-img" />
@ -81,7 +81,7 @@ export const Article = () => {
<p>
С одной стороны, зарплаты в сфере разработки растут, с другой
стороны, появляется огромное количество новичков, которые хотят
легко и просто войти в ИТ-сферу на волне востребованности и
легко и просто войти в IT-сферу на волне востребованности и
больших зарплат. Разумеется, это приводит к осторожному отношению
работодателя к выпускникам различных курсов. Нет такого курса,
который даст на 100% готового джуна, слишком многое завязано на

View File

@ -1,18 +1,15 @@
import React, { useEffect } from "react";
import { useSelector } from "react-redux";
import { Link, useNavigate } from "react-router-dom";
import { useNavigate } from "react-router-dom";
import { selectAuth } from "@redux/outstaffingSlice";
import { scrollToForm } from "@utils/helper";
import { AuthBox } from "@components/AuthBox/AuthBox";
import AuthHeader from "@components/Common/AuthHeader/AuthHeader";
import { Footer } from "@components/Common/Footer/Footer";
import SideBar from "@components/SideBar/SideBar";
import SliderWorkers from "@components/SliderWorkers/SliderWorkers";
import arrowBtn from "assets/icons/arrows/arrowRight.svg";
import arrow from "assets/icons/arrows/arrow__login_page.png";
import text from "assets/images/Body_Text.png";
import vector from "assets/images/Vector_Smart_Object.png";
@ -20,9 +17,9 @@ import vectorBlack from "assets/images/Vector_Smart_Object_black.png";
import authImg from "assets/images/auth_img.png";
import cross from "assets/images/cross.png";
import "./authForPartners.scss";
import "./auth.scss";
const AuthForPartners = () => {
const Auth = () => {
const isAuth = useSelector(selectAuth);
let navigate = useNavigate();
@ -46,28 +43,10 @@ const AuthForPartners = () => {
<img className="auth-partners__vector" src={vector} alt="" />
<img className="auth-partners__vector-black" src={vectorBlack} alt="" />
<div className="container">
<div className="change-mode">
<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"}>
<button className="change-mode__partnersForPart">
Для партнёров
</button>
</Link>
</div>
</div>
<div className="row">
<div className="col-12 col-xl-6">
<div className="auth-partners__box">
<AuthBox title="для партнёров" />
<AuthBox />
</div>
</div>
<div className="col-xl-2">
@ -90,7 +69,6 @@ const AuthForPartners = () => {
<img className="cross" src={cross} alt="" />
</div>
<div>
{/* <img className='auth-specialists} src={specialists} alt="" /> */}
<p className="auth-partners__specialists">
300 Специалистов
</p>
@ -121,4 +99,4 @@ const AuthForPartners = () => {
);
};
export default AuthForPartners;
export default Auth;

View File

@ -181,7 +181,7 @@
&__img-text {
position: absolute;
right: -68px;
bottom: -84px;
bottom: 0px;
}
@media (max-width: 575.98px) {

View File

@ -146,14 +146,14 @@ export const AuthForCandidate = () => {
<AuthHeader />
<div className="container">
<AuthBlock
title="Войти, уже есть доступ"
description="если вы получили доступ пройдя
title="Войти, если есть доступ"
description="Если вы получили доступ, пройдя
2 шага для входа или хотите узнать
свои результаты в кабинете"
/>
<div className="auth-candidate__start">
<h2 className="auth-candidate__start__title">
Хочу в команду <span>Айти специалистов</span>
Хочу в команду <span>IT-специалистов</span>
</h2>
<div className="change-mode__arrow">
<img src={arrowBtn} alt="#"></img>
@ -162,7 +162,7 @@ export const AuthForCandidate = () => {
Для нас не имеет значение Ваша локация.
</p>
<div className="auth-candidate__start__categoriesWrapper">
<StepsForCandidate step="шаг 1 - выбери специализацтию" />
<StepsForCandidate step="шаг 1 - выберите специализацию" />
{personalInfoItems.map((item, index) => {
return (
<CategoriesItem

View File

@ -64,6 +64,6 @@
}
footer {
margin-top: 70px;
margin-top: 10px;
}
}

View File

@ -1,124 +0,0 @@
import React, { useEffect } from "react";
import { useSelector } from "react-redux";
import { Link, useNavigate } from "react-router-dom";
import { selectAuth } from "@redux/outstaffingSlice";
import { scrollToForm } from "@utils/helper";
import { AuthBox } from "@components/AuthBox/AuthBox";
import AuthHeader from "@components/Common/AuthHeader/AuthHeader";
import { Footer } from "@components/Common/Footer/Footer";
import SideBar from "@components/SideBar/SideBar";
import SliderWorkers from "@components/SliderWorkers/SliderWorkers";
import arrowBtn from "assets/icons/arrows/arrowRight.svg";
import arrow from "assets/icons/arrows/arrow__login_page.png";
import text from "assets/images/Body_Text.png";
import vector from "assets/images/Vector_Smart_Object.png";
import vectorBlack from "assets/images/Vector_Smart_Object_black.png";
import cross from "assets/images/cross.png";
import medium from "assets/images/medium_male_big.png";
import "./authForDevelopers.scss";
const AuthForDevelopers = () => {
const isAuth = useSelector(selectAuth);
let navigate = useNavigate();
const getToken = localStorage.getItem("auth_token");
useEffect(() => {
if (isAuth || getToken) {
navigate("/profile");
}
}, [getToken]);
return (
<section className="auth-developers">
<AuthHeader />
<SliderWorkers
title={"Свободные разработчики"}
titleInfo={"для Вашей команды"}
subTitle={true}
/>
<div className="auth-developers__background">
<img className="auth-developers__vector" src={vector} alt="" />
<img
className="auth-developers__vector-black"
src={vectorBlack}
alt="#"
/>
<div className="container">
<div className="change-mode">
<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"}>
<button className="change-mode__partnersForDev">
Для партнёров
</button>
</Link>
</div>
</div>
<div className="row">
<div className="col-12 col-xl-6">
<div className="auth-developers__box">
<AuthBox title="для разработчиков" />
</div>
</div>
<div className="col-xl-2">
<img className="auth-developers__arrow" src={arrow} alt="" />
</div>
<div className="col-12 col-xl-4">
<div className="auth-developers__info">
<div className="auth-developers__info-box">
<img src={medium} alt="" />
<h3>
Frontend разработчик,
<br /> Middle
</h3>
</div>
<div className="auth-developers__info-container">
<div className="auth-developers__info-img">
<div>
<img className="cross" src={cross} alt="" />
</div>
<div>
{/* <img className='auth-specialists} src={specialists} alt="" /> */}
<p className="auth-developers__specialists">
300 Специалистов
</p>
</div>
</div>
<ul className="auth-developers__info-list">
<li className="auth-developers__info-item">
Ruby on Rails
</li>
<li className="auth-developers__info-item">PHP</li>
<li className="auth-developers__info-item">Python</li>
<li className="auth-developers__info-item">Vue.js</li>
<li className="auth-developers__info-item">React. JS</li>
</ul>
</div>
<img className="auth-developers__img-text" src={text} alt="" />
</div>
</div>
</div>
<Footer />
</div>
</div>
<SideBar />
</section>
);
};
export default AuthForDevelopers;

View File

@ -1,240 +0,0 @@
.auth-developers {
font-family: "LabGrotesque", sans-serif;
overflow: hidden;
position: relative;
&__background {
background-color: #f1f1f1;
position: relative;
}
&__vector,
&__vector-black {
position: absolute;
}
&__vector {
top: -37px;
left: -285px;
}
&__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) {
&__vector,
&__vector-black,
&__arrow {
display: none;
}
}
&__info {
background-color: #e1fccf;
margin-top: 70px;
max-width: 310px;
padding-top: 30px;
position: relative;
padding-bottom: 310px;
@media (max-width: 1200px) {
display: none;
}
}
&__info-box {
display: flex;
align-items: center;
}
@media (max-width: 575.98px) {
&__info {
max-width: 380px;
}
&__info-box {
flex-direction: column;
justify-content: center;
}
}
@media (max-width: 375.98px) {
&__info {
max-width: 340px;
}
}
&__info-box > img {
width: 165px;
height: 165px;
margin-left: -84px;
margin-right: 30px;
}
@media (max-width: 575.98px) {
&__info-box > img {
margin-left: 0px;
margin-right: 0px;
}
}
&__info-box > h3 {
font-family: "GT Eesti Pro Display";
font-size: 2em;
font-weight: 100;
font-style: normal;
letter-spacing: normal;
line-height: 36px;
text-align: left;
}
@media (max-width: 575.98px) {
&__info-box > h3 {
margin-top: 20px;
}
}
&__info-container {
display: flex;
position: relative;
}
&__info-img {
display: flex;
flex-direction: column;
text-align: center;
margin-top: 28px;
margin-left: -40px;
}
&__info-img > div > img {
margin-bottom: 100px;
}
&__specialists {
font-family: "GT Eesti Pro Display";
font-size: 1.8em;
font-weight: 100;
font-style: normal;
letter-spacing: normal;
line-height: 26.12px;
text-align: left;
transform: rotate(-90deg);
text-transform: uppercase;
}
&__info-list {
list-style: none;
margin-top: 110px;
position: absolute;
right: -70px;
}
@media (max-width: 575.98px) {
&__info-list {
left: 34px;
}
}
&__info-item {
color: #1f1f1f;
font-family: "GT Eesti Pro Display";
font-size: 4em;
font-weight: 700;
font-style: normal;
letter-spacing: normal;
line-height: 56.95px;
text-align: left;
text-decoration: underline;
text-transform: uppercase;
}
@media (max-width: 575.98px) {
&__info-item {
font-size: 2.6em;
}
}
&__img-text {
position: absolute;
right: -68px;
bottom: -84px;
}
@media (max-width: 575.98px) {
&__img-text {
right: 0px;
bottom: -40px;
}
}
////////////////////////////////////
&__auth-link {
display: block;
}
&__auth-link a {
display: block;
width: 100%;
height: 100%;
color: #fff;
}
@media (max-width: 766px) {
&__form-buttons {
flex-direction: column;
}
&__form-btn {
margin: 0;
margin-bottom: 1.5rem;
}
}
}
.change-mode {
&__partnersForDev {
background: #52b7098c;
color: #2d6505;
margin-left: -35px;
}
&__partnersForDev,
&__developersForDev {
width: 220px;
height: 50px;
border-radius: 44px;
font-size: 16px;
border: none;
}
&__developersForDev {
position: relative;
background: #406128;
color: white;
}
@media (max-width: 768px) {
&__partnersForDev {
margin: 15px 0 0 0;
}
}
}

View File

@ -27,7 +27,7 @@ export const CompanyInfo = () => {
<img src={arrow} alt="arrow" />
</div>
<p className="companyInfo__subTitle">
Мы предоставляем вам «в аренду» it-специалистов. При этом они
Мы предоставляем вам «в аренду» IT-специалистов. При этом они
находятся в нашем штате. Оплата происходит за отработанные часы
</p>
<div className="companyInfo__info">
@ -36,7 +36,8 @@ export const CompanyInfo = () => {
<img src={countingImg} alt="countingImg" />
<div className="countingBlock__info">
<h3 className="countingBlock__title">
Экономия бюджета компании - главное преимущество аутстафинга
Экономия бюджета компании - главное преимущество
аутстаффинга
</h3>
<p className="countingBlock__subTitle">
Приблизительный просчет дал результаты в экономии до 50%

View File

@ -17,7 +17,7 @@ export const FrequentlyAskedQuestion = () => {
id: params.id,
title: "Это фриланс-платформа?",
answer:
"Нет, мы работаем только с юридическими лицами и индивидуальными предпринимателями и тщательно проверяем своих партнеров. Партнерами являются агентства, которые специализируются на оказании услуг в формате аутстафф-модели и обладают глубокой экспертизой в разработке и внедрении ИТ-проектов.",
"Нет, мы работаем только с юридическими лицами и индивидуальными предпринимателями и тщательно проверяем своих партнеров. Партнерами являются агентства, которые специализируются на оказании услуг в формате аутстафф-модели и обладают глубокой экспертизой в разработке и внедрении IT-проектов.",
});
useEffect(() => {

View File

@ -402,7 +402,7 @@ export const PartnerAddRequest = () => {
<h4>Процесс:</h4>
</div>
<p>
При аутстафе мы предоставляем вам it-специалистов при этом они
При аутстаффе мы предоставляем вам IT-специалистов при этом они
находятся в нашем штате.
<br />
<br />

View File

@ -98,7 +98,7 @@ export const PartnerRequests = () => {
<div className="partnerRequests__noItems__create">
<div className="partnerRequests__noItems__create__link">
<img src={cursorImg} alt="cursor" />
<p>У вас еще нет запросов на сотрудников</p>
<p>У вас ещё нет запросов на сотрудников</p>
<BaseButton>
<Link to={"/profile/add-request"}>
<span>+</span>

View File

@ -1,7 +1,12 @@
import React from "react";
import React, { useState } from "react";
import { apiRequest } from "@api/request";
import { useNotification } from "@hooks/useNotification";
import BaseButton from "@components/Common/BaseButton/BaseButton";
import { Footer } from "@components/Common/Footer/Footer";
import { Loader } from "@components/Common/Loader/Loader";
import { Navigation } from "@components/Navigation/Navigation";
import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
@ -12,6 +17,69 @@ import kontur from "assets/images/logo/konturLogo.png";
import "./partnerSettings.scss";
export const PartnerSettings = () => {
const { showNotification } = useNotification();
const [inputsValue, setInputsValue] = useState({
name: "",
oldPassword: "",
password: "",
});
const [inputsError, setInputsError] = useState({
name: false,
password: false,
});
const [loader, setLoader] = useState(false);
const setSettings = () => {
if (inputsValue.name.length < 2) {
setInputsError((prevValue) => ({ ...prevValue, name: true }));
return;
}
if (inputsValue.password.length < 6 || inputsValue.oldPassword.length < 6) {
setInputsError(() => ({ name: false, password: true }));
return;
}
setLoader(true);
apiRequest("/user/change-personal-data", {
method: "PUT",
data: {
newUsername: inputsValue.name,
},
}).then((data) => {
apiRequest("/user/change-password", {
method: "PUT",
data: {
password: inputsValue.oldPassword,
newPassword: inputsValue.password,
},
}).then((data) => {
setLoader(false);
if (data.status === "success") {
setInputsError({
name: false,
password: false,
});
setInputsValue({
name: "",
oldPassword: "",
password: "",
});
showNotification({
show: true,
text: "Данные изменены",
type: "success",
});
} else {
showNotification({
show: true,
text: "Неверные данные",
type: "error",
});
}
});
});
};
return (
<div className="settings">
<ProfileHeader />
@ -20,32 +88,95 @@ export const PartnerSettings = () => {
<ProfileBreadcrumbs
links={[
{ name: "Главная", link: "/profile" },
{ name: "Настройка профиля", link: "/profile/settings" },
{ name: "Настройки", link: "/profile/settings" },
]}
/>
<div className="partner-settings">
<h2 className="infoPersonal__title">Настройки акаунта</h2>
<h2 className="infoPersonal__title">Настройки профиля</h2>
<div className="partner-settings__body">
<div className="partner-settings__login">
<h3 className="settings__title">Вход в систему</h3>
<p className="settings__lable-first">Изменение логина</p>
<p className="settings__label">Изменение логина</p>
<div className="settings__input">
<input></input>
<input
className={inputsError.name ? "warning" : ""}
placeholder="Имя"
onChange={(e) => {
setInputsValue((prevValue) => ({
...prevValue,
name: e.target.value,
}));
setInputsError((prevValue) => ({
...prevValue,
name: false,
}));
}}
value={inputsValue.name}
/>
{inputsError.name && (
<span className="error">Минимум 2 символа</span>
)}
</div>
<p className="settings__lable-second">Изменение пароля</p>
<p className="settings__label">Изменение пароля</p>
<div className="settings__input oldPassword">
<input
className={inputsError.password ? "warning" : ""}
placeholder="Старый пароль"
type={"password"}
onChange={(e) => {
setInputsValue((prevValue) => ({
...prevValue,
oldPassword: e.target.value,
}));
setInputsError((prevValue) => ({
...prevValue,
password: false,
}));
}}
value={inputsValue.oldPassword}
/>
{inputsError.password && (
<span className="error">Введите верный пароль</span>
)}
</div>
<div className="settings__input">
<input></input>
<input
className={inputsError.password ? "warning" : ""}
placeholder="Новый пароль"
type={"password"}
onChange={(e) => {
setInputsValue((prevValue) => ({
...prevValue,
password: e.target.value,
}));
setInputsError((prevValue) => ({
...prevValue,
password: false,
}));
}}
value={inputsValue.password}
/>
{inputsError.password && (
<span className="error">Минимум 6 символов</span>
)}
</div>
<div className="settings__buttons">
<BaseButton styles={"settings__buttons-cancel"}>
Отмена
</BaseButton>
<BaseButton styles={"settings__buttons-save"}>
{loader ? (
<Loader style={"green"} width={"40px"} height={"40px"} />
) : (
<BaseButton
onClick={setSettings}
styles={"settings__buttons-save"}
>
Сохранить
</BaseButton>
)}
</div>
<span className="settings__agreement">
Нажимая "Сохранить", вы соглашаетесь с Правилами обработки и
@ -54,28 +185,26 @@ export const PartnerSettings = () => {
</div>
<div className="partner-settings__report">
<h3 className="settings__title">Документы и отчеты</h3>
<p className="settings__lable-first">Изменить провадера ЭДО</p>
<p className="settings__label">Изменить провадера ЭДО</p>
<div className="partner-settings__logo">
<div>
<label className="partner-settings__label-first">
<label className="partner-settings__label">
<img src={astral}></img>
<input type="checkbox" />
<span className="checkbox__first"></span>
<span className="checkbox"></span>
</label>
</div>
<div>
<label className="partner-settings__label-second">
<label className="partner-settings__label">
<img src={kontur}></img>
<input type="checkbox" />
<span className="checkbox__second"></span>
<span className="checkbox"></span>
</label>
</div>
</div>
<p className="settings__lable-second">
Изменение названия компании
</p>
<p className="settings__label">Изменение названия компании</p>
<div className="settings__input">
<input></input>
</div>

View File

@ -22,38 +22,39 @@
line-height: 24px;
}
&__lable {
&-first,
&-second {
&__label {
font-size: 15px;
line-height: 18px;
color: #000000;
}
&-first {
margin: 39px 0 10px 0;
}
&-second {
margin: 31px 0 10px 0;
}
margin: 15px 0 10px 0;
}
&__input {
display: flex;
flex-direction: column;
row-gap: 5px;
input {
padding: 5px 10px;
background: #eff2f7;
border-radius: 8px;
width: 373px;
height: 35px;
border: none;
input {
font-size: 15px;
background: #eff2f7;
height: 100%;
margin-left: 15px;
width: 85%;
border: none;
outline: none;
}
.error {
color: red;
font-size: 12px;
}
.warning {
border: 1px solid red;
}
}
.oldPassword {
margin-bottom: 25px;
}
&__agreement {
@ -64,15 +65,16 @@
}
&__buttons {
width: 87%;
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
margin: 36px 0 30px 0;
justify-content: flex-start;
gap: 20px;
margin: 30px 0 20px;
&-cancel,
&-save {
width: 151px;
min-width: 151px;
height: 40px;
font-size: 14px;
line-height: 32px;
@ -102,7 +104,7 @@
}
}
@media (max-width: 570px) {
@media (max-width: 800px) {
&__input {
width: 95%;
}
@ -112,6 +114,7 @@
width: 100%;
flex-direction: column-reverse;
align-items: center;
gap: 0px;
&-save {
margin-bottom: 15px;
@ -121,29 +124,22 @@
}
.checkbox {
&__first {
margin: 0px 0 0 20px;
}
&__second {
margin: 0px 20px 0 0;
}
}
.partner-settings {
margin-bottom: 110px;
&__body {
display: flex;
flex-direction: row;
justify-content: space-between;
justify-content: space-around;
margin-top: 27px;
}
&__report,
&__login {
width: 500px;
height: 435px;
background: #ffffff;
border-radius: 12px;
padding: 30px 60px;
@ -187,17 +183,10 @@
}
&__label {
&-first,
&-second {
display: flex;
align-items: center;
}
&-second {
flex-direction: row-reverse;
}
}
@media (max-width: 1200px) {
margin-bottom: 15px;
@ -217,12 +206,9 @@
}
&__label {
&-second,
&-first {
flex-direction: row;
}
}
}
@media (max-width: 950px) {
&__body {
@ -258,6 +244,7 @@
&__report {
margin-top: 55px;
margin-bottom: 10px;
}
&__logo {
@ -266,16 +253,7 @@
}
&__label {
&-second,
&-first {
flex-direction: row;
}
}
.checkbox {
&__second {
margin: 0px 0 0 20px;
}
}
}
}

View File

@ -36,7 +36,7 @@ export const Profile = () => {
{
path: "profile/summary",
img: summaryIcon,
title: "Данные и резюме",
title: "Резюме",
description: "Ваше резюме<br/><span>заполнено</span>",
},
{
@ -54,7 +54,7 @@ export const Profile = () => {
{
path: "profile/settings",
img: settingIcon,
title: "Настройки аккаунта",
title: "Настройки профиля",
description: "Перейдите чтобы начать<br/> редактирование",
},
],
@ -87,7 +87,7 @@ export const Profile = () => {
{
path: "profile/settings",
img: settingIcon,
title: "Настройки аккаунта",
title: "Настройки профиля",
description: "Перейдите чтобы начать<br/> редактирование",
},
],
@ -103,7 +103,7 @@ export const Profile = () => {
{user === "developer" ? (
<span>
<p>Добрый день,&nbsp;</p>
{profileInfo.fio}
{profileInfo?.fio ? profileInfo?.fio : profileInfo?.username}
</span>
) : (
"ООО НДВ Консалтинг"
@ -113,7 +113,7 @@ export const Profile = () => {
<div className="summary__person">
<img
src={
profileInfo.photo ? urlForLocal(profileInfo.photo) : avatarMok
profileInfo?.photo ? urlForLocal(profileInfo.photo) : avatarMok
}
className="summary__avatar"
alt="avatar"
@ -121,7 +121,8 @@ export const Profile = () => {
<p className="summary__name">
{user === "developer" ? (
<span>
{profileInfo.fio}, {profileInfo.specification} разработчик
{profileInfo?.fio ? profileInfo?.fio : profileInfo?.username},{" "}
{profileInfo?.specification} разработчик
</span>
) : (
"ООО НДВ Консалтинг"

View File

@ -1,8 +1,8 @@
.profile {
background: #F1F1F1;
background: #f1f1f1;
height: 100%;
min-height: 100vh;
font-family: 'LabGrotesque', sans-serif;
font-family: "LabGrotesque", sans-serif;
&__title {
font-weight: 700;
@ -14,7 +14,7 @@
p {
color: black;
}
color: #52B709;
color: #52b709;
}
@media (max-width: 560px) {
@ -28,7 +28,7 @@
}
&__info {
min-height: 128px;
min-height: 110px;
background: white;
border-radius: 12px;
margin-top: 30px;

View File

@ -25,7 +25,7 @@ export const ProfileCandidate = () => {
{
path: "profile/settings",
img: settingIcon,
title: "Настройки аккаунта",
title: "Настройки профиля",
description: "Перейдите чтобы начать редактирование",
},
]);

View File

@ -33,6 +33,7 @@ import { useNotification } from "@hooks/useNotification";
import BaseButton from "@components/Common/BaseButton/BaseButton";
import { Footer } from "@components/Common/Footer/Footer";
import { Loader } from "@components/Common/Loader/Loader";
import AcceptModal from "@components/Modal/AcceptModal/AcceptModal";
import ModalTicket from "@components/Modal/Tracker/ModalTicket/ModalTicket";
import TrackerModal from "@components/Modal/Tracker/TrackerModal/TrackerModal";
import { Navigation } from "@components/Navigation/Navigation";
@ -74,6 +75,8 @@ export const ProjectTracker = () => {
add: false,
edit: false,
});
const [acceptModalOpen, setAcceptModalOpen] = useState(false);
const [currentColumnDelete, setCurrentColumnDelete] = useState(null);
const [color, setColor] = useState("#aabbcc");
const [tagInfo, setTagInfo] = useState({ description: "", name: "" });
const [checkBoxParticipateTasks, setCheckBoxParticipateTasks] =
@ -87,9 +90,22 @@ export const ProjectTracker = () => {
const loader = useSelector(getBoarderLoader);
const { showNotification } = useNotification();
const priority = {
2: "Высокий",
1: "Средний",
0: "Низкий",
};
const priorityClass = {
2: "high",
1: "middle",
0: "low",
};
useEffect(() => {
dispatch(activeLoader());
dispatch(setProjectBoardFetch(projectId.id));
initListeners();
}, []);
useEffect(() => {
@ -335,6 +351,8 @@ export const ProjectTracker = () => {
...prevState,
edit: false,
}));
setTagInfo({ description: "", name: "" });
setColor("#aabbcc");
});
}
@ -351,6 +369,81 @@ export const ProjectTracker = () => {
});
}
const initListeners = () => {
document.addEventListener("click", closeByClickingOut);
};
const closeByClickingOut = (event) => {
const path = event.path || (event.composedPath && event.composedPath());
if (
event &&
!path.find(
(div) =>
div.classList &&
(div.classList.contains("addPerson") ||
div.classList.contains("persons__list"))
)
) {
setPersonListOpen(false);
}
if (
event &&
!path.find(
(div) =>
div.classList &&
(div.classList.contains("tasks__head__executor") ||
div.classList.contains("tasks__head__executorDropdown"))
)
) {
setSelectedExecutorOpen(false);
}
if (
event &&
!path.find(
(div) =>
div.classList &&
(div.classList.contains("tasks__head__tags") ||
div.classList.contains("tags__list"))
)
) {
setTags({
open: false,
add: false,
edit: false,
});
setTagInfo({
description: "",
name: "",
});
setColor("#aabbcc");
}
if (
event &&
!path.find(
(div) =>
div.classList &&
(div.classList.contains("board__head__more") ||
div.classList.contains("column__select"))
)
) {
setOpenColumnSelect((prevState) => {
const newState = {};
for (const key in prevState) {
newState[key] = false;
}
return newState;
});
}
};
function closeAcceptModal() {
setAcceptModalOpen(false);
}
return (
<div className="tracker">
<ProfileHeader />
@ -400,6 +493,7 @@ export const ProjectTracker = () => {
selectedTab={selectedTab}
priorityTask={priorityTask}
projectUsers={projectBoard.projectUsers}
projectMarks={projectBoard.mark}
/>
{loader && <Loader style="green" />}
@ -437,7 +531,13 @@ export const ProjectTracker = () => {
}
>
{Boolean(projectBoard.projectUsers?.length) && (
<div className="projectPersons">
<div
className={
projectBoard.projectUsers?.length == 1
? "onePerson"
: "projectPersons"
}
>
{projectBoard.projectUsers.slice(0, 3).map((person) => {
return (
<img
@ -614,23 +714,19 @@ export const ProjectTracker = () => {
</div>
{tags.open && (
<div className="tags__list">
<img
src={close}
className="close"
alt="close"
onClick={() => {
setTags({
open: false,
add: false,
edit: false,
});
setTagInfo({
description: "",
name: "",
});
setColor("#aabbcc");
}}
/>
<div
className="addNewTag"
onClick={() =>
setTags((prevState) => ({
...prevState,
add: true,
}))
}
>
<p>Добавить новый тег</p>
<span>+</span>
</div>
{!tags.add && !tags.edit && (
<div className="tags__list__created">
{projectBoard.mark.map((tag) => {
@ -647,8 +743,8 @@ export const ProjectTracker = () => {
className="tagItem__info__color"
style={{ background: tag.color }}
/>
</div>
<div className="tagItem__images">
<div className="tagItem__info__images">
<img
src={edit}
alt="edit"
@ -673,20 +769,9 @@ export const ProjectTracker = () => {
/>
</div>
</div>
</div>
);
})}
<div
className="addNewTag"
onClick={() =>
setTags((prevState) => ({
...prevState,
add: true,
}))
}
>
<p>Добавить новый тег</p>
<span>+</span>
</div>
</div>
)}
{(tags.add || tags.edit) && (
@ -835,7 +920,14 @@ export const ProjectTracker = () => {
</div>
<div
className="column__select__item"
onClick={() => deleteColumn(column)}
onClick={() => {
if (column.tasks.length) {
setAcceptModalOpen(true);
setCurrentColumnDelete(column);
} else {
deleteColumn(column);
}
}}
>
<img src={del} alt="delete" />
<span>Удалить</span>
@ -914,6 +1006,19 @@ export const ProjectTracker = () => {
})}
</div>
)}
{typeof task.execution_priority ===
"number" && (
<div className="tasks__board__item__priority">
<p>Приоритет:</p>
<span
className={
priorityClass[task.execution_priority]
}
>
{priority[task.execution_priority]}
</span>
</div>
)}
{task.dead_line && (
<div className="tasks__board__item__deadLine">
<p>Срок исполнения:</p>
@ -981,6 +1086,13 @@ export const ProjectTracker = () => {
)}
</div>
</div>
{acceptModalOpen && (
<AcceptModal
title={"В колонке ещё есть задачи, Вы точно хотите удалить её ?"}
closeModal={closeAcceptModal}
agreeHandler={() => deleteColumn(currentColumnDelete)}
/>
)}
<Footer />
</div>
);

View File

@ -17,7 +17,7 @@ export const RegistrationForCandidate = () => {
<div className="container">
<div className="registrationCandidate__start">
<h2 className="auth-candidate__start__title">
Хочу в команду <span>Айти специалистов</span>
Хочу в команду <span>IT-специалистов</span>
</h2>
<div className="change-mode__arrow">
<img src={arrowBtn}></img>
@ -41,7 +41,7 @@ export const RegistrationForCandidate = () => {
</div>
<form className="registrationCandidate__form">
<div className="registrationCandidate__form__input">
<label htmlFor="name">Ваше имя *</label>
<label htmlFor="name">Ваше имя</label>
<input id="name" type="text" placeholder="Имя" />
</div>
<div className="registrationCandidate__form__input">
@ -49,19 +49,19 @@ export const RegistrationForCandidate = () => {
<input id="summary" type="text" placeholder="Резюме" />
</div>
<div className="registrationCandidate__form__input">
<label htmlFor="email">Ваш email *</label>
<input id="email" type="text" placeholder="Email" />
<label htmlFor="email">Ваш e-mail</label>
<input id="email" type="text" placeholder="E-mail" />
</div>
<div className="registrationCandidate__form__input">
<label htmlFor="tg">Ваш телеграм*</label>
<input id="tg" type="text" placeholder="Телеграм" />
<label htmlFor="tg">Ваш telegram</label>
<input id="tg" type="text" placeholder="Telegram" />
</div>
<div className="registrationCandidate__form__input">
<label htmlFor="password">Придумайте пароль*</label>
<label htmlFor="password">Придумайте пароль</label>
<input id="password" type="text" placeholder="Пароль" />
</div>
<div className="registrationCandidate__form__input">
<label htmlFor="secondPassword">Повторите пароль*</label>
<label htmlFor="secondPassword">Повторите пароль</label>
<input id="secondPassword" type="text" placeholder="Пароль" />
</div>
<div className="registrationCandidate__form__submit">

View File

@ -1,3 +1,5 @@
import ClassicEditor from "@ckeditor/ckeditor5-build-classic";
import { CKEditor } from "@ckeditor/ckeditor5-react";
import React, { useEffect, useState } from "react";
import { useSelector } from "react-redux";
import { Navigate } from "react-router-dom";
@ -15,7 +17,10 @@ import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
import rightArrow from "assets/icons/arrows/arrowRight.svg";
import arrow from "assets/icons/arrows/left-arrow.png";
import arrowDown from "assets/icons/arrows/selectArrow.png";
import deleteIcon from "assets/icons/closeProjectPersons.svg";
import gitImgItem from "assets/icons/gitItemImg.svg";
import avatarMok from "assets/images/avatarMok.png";
import "./summary.scss";
@ -26,12 +31,49 @@ export const Summary = () => {
const profileInfo = useSelector(getProfileInfo);
const [openGit, setOpenGit] = useState(false);
const [gitInfo, setGitInfo] = useState([]);
const [editSummeryOpen, setEditSummeryOpen] = useState(false);
const [editSkills, setEditSkills] = useState(false);
const [summery, setSummery] = useState("");
const [selectedSkills, setSelectedSkills] = useState([]);
const [selectSkillsOpen, setSelectSkillsOpen] = useState(false);
const [skillsList, seSkillsList] = useState([]);
useEffect(() => {
apiRequest(
`/profile/portfolio-projects?card_id=${localStorage.getItem("cardId")}`
).then((responseGit) => setGitInfo(responseGit));
}, []);
useEffect(() => {
setSummery(profileInfo.vc_text);
setSelectedSkills(profileInfo.skillValues);
}, [profileInfo]);
useEffect(() => {
apiRequest(`/skills/get-skills-list`).then((el) => {
seSkillsList(el);
});
}, []);
function setSkills() {
apiRequest("/resume/edit-skills", {
method: "PUT",
data: {
UserCard: {
skill: selectedSkills.map((item) => item.skill_id),
},
},
}).then(() => {});
}
function editSummery() {
apiRequest("/resume/edit-text", {
method: "PUT",
data: {
resume: summery,
},
}).then(() => {});
}
return (
<div className="summary">
<ProfileHeader />
@ -41,7 +83,7 @@ export const Summary = () => {
<ProfileBreadcrumbs
links={[
{ name: "Главная", link: "/profile" },
{ name: "Данные и резюме", link: "/profile/summary" },
{ name: "Резюме", link: "/profile/summary" },
]}
/>
<h2 className="summary__title">
@ -56,12 +98,17 @@ export const Summary = () => {
<div className={openGit ? "summary__info openGit" : "summary__info"}>
<div className="summary__person">
<img
src={urlForLocal(profileInfo.photo)}
src={
profileInfo?.photo
? urlForLocal(profileInfo.photo)
: avatarMok
}
className="summary__avatar"
alt="avatar"
/>
<p className="summary__name">
{profileInfo.fio}, {profileInfo.specification} разработчик
{profileInfo?.fio ? profileInfo?.fio : profileInfo?.username},{" "}
{profileInfo.specification} разработчик
</p>
</div>
{!openGit && (
@ -75,18 +122,84 @@ export const Summary = () => {
<div className="summary__skills skills__section">
<div className="summary__sections__head">
<h3>Основной стек</h3>
<button>Редактировать раздел</button>
<button
className={editSkills ? "edit" : ""}
onClick={() => {
if (editSkills) {
setSkills();
}
setEditSkills(!editSkills);
}}
>
{editSkills ? "Сохранить" : "Редактировать"}
</button>
</div>
<div className="skills__section__items">
{editSkills ? (
<div className="editSkills">
{selectedSkills &&
selectedSkills.map((skill) => {
return (
<span key={skill.skill_id}>
{skill.skill.name}
<img
src={deleteIcon}
alt="deleteIcon"
onClick={() =>
setSelectedSkills((prevValue) =>
prevValue.filter(
(item) => item.skill_id !== skill.skill_id
)
)
}
/>
</span>
);
})}
<div className="selectSkills">
<div
className="selectSkills__name"
onClick={() => setSelectSkillsOpen(!selectSkillsOpen)}
>
Выберите скилл
<img
className={selectSkillsOpen ? "open" : ""}
src={arrowDown}
/>
</div>
{selectSkillsOpen && (
<div className="selectSkills__dropDown">
{skillsList.map((skill) => {
return (
<p
onClick={() =>
setSelectedSkills((prevValue) => [
...prevValue,
{ skill: skill, skill_id: skill.id },
])
}
key={skill.id}
className="selectSkills__item"
>
{skill.name}
</p>
);
})}
</div>
)}
</div>
</div>
) : (
<div className="skills__section__items__wrapper">
{profileInfo.skillValues &&
profileInfo.skillValues.map((skill, index) => (
{selectedSkills &&
selectedSkills.map((skill, index) => (
<span key={skill.id} className="skill_item">
{skill.skill.name}
{profileInfo.skillValues.length > index + 1 && ","}
{selectedSkills.length > index + 1 && ","}
</span>
))}
</div>
)}
</div>
</div>
)}
@ -94,21 +207,56 @@ export const Summary = () => {
<div className="summary__experience">
<div className="experience__block">
<div className="summary__sections__head">
<h3>Описание опыта работы</h3>
<button>Редактировать раздел</button>
<h3>Опыт работы</h3>
<button
className={editSummeryOpen ? "edit" : ""}
onClick={() => {
if (editSummeryOpen) {
editSummery();
}
setEditSummeryOpen(!editSummeryOpen);
}}
>
{editSummeryOpen ? "Сохранить" : "Редактировать"}
</button>
</div>
{editSummeryOpen ? (
<CKEditor
editor={ClassicEditor}
data={summery}
config={{
removePlugins: [
"CKFinderUploadAdapter",
"CKFinder",
"EasyImage",
"Image",
"ImageCaption",
"ImageStyle",
"ImageToolbar",
"ImageUpload",
"MediaEmbed",
"BlockQuote",
],
}}
onChange={(event, editor) => {
const data = editor.getData();
setSummery(data);
}}
/>
) : (
<div
className="experience__content"
dangerouslySetInnerHTML={{ __html: profileInfo.vc_text }}
dangerouslySetInnerHTML={{ __html: summery }}
></div>
)}
</div>
</div>
)}
{openGit && (
<div className="summary__sectionGit">
<div className="summary__sections__head">
<h3>Страница портфолио кода разработчика</h3>
<button>Редактировать раздел</button>
<h3>Ваши репозитории</h3>
<button>Редактировать</button>
</div>
<div className="summary__sectionGitItems">
{Boolean(gitInfo.length) &&
@ -145,6 +293,9 @@ export const Summary = () => {
</a>
);
})}
{!Boolean(gitInfo.length) && (
<p className="noGitItems">Нет актуальных проектов</p>
)}
</div>
</div>
)}

View File

@ -1,17 +1,8 @@
.summary {
background: #F1F1F1;
background: #f1f1f1;
height: 100%;
min-height: 100vh;
font-family: 'LabGrotesque', sans-serif;
//
//&__container {
// max-width: 1160px;
// padding: 0 10px;
// margin: 20px auto;
// position: relative;
// display: flex;
// flex-direction: column;
//}
font-family: "LabGrotesque", sans-serif;
&__content {
display: flex;
@ -25,7 +16,7 @@
margin-bottom: 0;
span {
color: #52B709;
color: #52b709;
}
}
@ -45,10 +36,10 @@
}
&__info {
min-height: 128px;
min-height: 110px;
background: white;
border-radius: 12px;
margin-top: 30px;
margin-top: 25px;
display: flex;
align-items: center;
padding: 0 25px 0 45px;
@ -110,14 +101,6 @@
font-size: 16px;
line-height: 32px;
position: relative;
white-space: nowrap;
//@media (max-width: 915px) {
// max-width: 220px;
// overflow: hidden;
// white-space: nowrap;
// text-overflow: ellipsis;
//}
@media (max-width: 690px) {
font-size: 14px;
@ -128,19 +111,18 @@
@media (max-width: 550px) {
max-width: 200px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
margin: 0;
}
@media (max-width: 450px) {
max-width: 150px;
max-width: 160px;
}
&:after {
content: '';
content: "";
position: absolute;
background: #52B709;
background: #52b709;
border-radius: 12px;
width: 70%;
height: 8px;
@ -159,7 +141,14 @@
color: white;
border: none;
transition: all 0.3s ease;
background-image: linear-gradient(to top, #6aaf5c 0%, #52b709 100%), linear-gradient(36deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.16) 47%, rgba(255, 255, 255, 0.17) 50%, rgba(255, 255, 255, 0) 100%);
background-image: linear-gradient(to top, #6aaf5c 0%, #52b709 100%),
linear-gradient(
36deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.16) 47%,
rgba(255, 255, 255, 0.17) 50%,
rgba(255, 255, 255, 0) 100%
);
&:hover {
box-shadow: 6px 5px 20px rgb(87 98 80 / 21%);
@ -170,10 +159,15 @@
width: 120px;
height: 50px;
}
@media (max-width: 450px) {
width: 80px;
height: 40px;
}
}
&__skills {
background: #FFFFFF;
background: #ffffff;
border-radius: 12px;
margin-top: 35px;
}
@ -181,7 +175,7 @@
&__sections__head {
display: flex;
min-height: 69px;
background: #E1FCCF;
background: #e1fccf;
border-radius: 12px 12px 0px 0px;
align-items: center;
padding: 0 35px 0 50px;
@ -195,6 +189,7 @@
font-style: normal;
font-size: 18px;
line-height: 32px;
margin: 0;
@media (max-width: 660px) {
line-height: 20px;
@ -202,7 +197,7 @@
}
button {
background: #FFFFFF;
background: #ffffff;
border-radius: 44px;
padding: 10px 20px;
display: flex;
@ -220,6 +215,11 @@
white-space: nowrap;
}
}
.edit {
background-color: green;
color: white;
}
}
.skills__section {
@ -227,7 +227,7 @@
padding: 25px 35px 25px 50px;
@media (max-width: 550px) {
padding: 15px 15px 20px;
padding: 15px;
}
&__wrapper {
@ -241,6 +241,94 @@
line-height: 32px;
white-space: nowrap;
text-transform: uppercase;
@media (max-width: 550px) {
font-size: 14px;
line-height: 20px;
}
}
}
}
.editSkills {
display: flex;
flex-wrap: wrap;
gap: 14px;
align-items: center;
span {
display: flex;
column-gap: 8px;
background-color: #f5f5f5;
border-radius: 15px;
padding: 3px 10px 3px 10px;
font-weight: 700;
font-size: 16px;
line-height: 32px;
white-space: nowrap;
text-transform: uppercase;
img {
cursor: pointer;
}
}
.selectSkills {
position: relative;
display: flex;
flex-direction: column;
font-weight: 700;
font-size: 16px;
&__name {
display: flex;
column-gap: 12px;
align-items: center;
cursor: pointer;
background-color: #f5f5f5;
border-radius: 15px;
padding: 3px 10px 3px 10px;
img {
transition: all 0.3s ease;
}
.open {
transform: rotate(180deg);
}
}
&__dropDown {
position: absolute;
background-color: white;
border-radius: 12px;
max-height: 300px;
overflow-y: auto;
display: flex;
flex-direction: column;
row-gap: 5px;
align-items: center;
padding: 7px;
top: 35px;
&::-webkit-scrollbar {
width: 3px;
border-radius: 10px;
}
&::-webkit-scrollbar-thumb {
background: #cbd9f9;
border-radius: 20px;
}
&::-webkit-scrollbar-track {
background: #c5c0c6;
border-radius: 20px;
}
p {
cursor: pointer;
}
}
}
}
@ -254,7 +342,7 @@
.experience {
&__block {
background: #FFFFFF;
background: #ffffff;
border-radius: 12px;
}
@ -287,6 +375,15 @@
}
}
.ck-toolbar {
border: none !important;
}
.ck-content {
border: none !important;
padding: 15px 35px 15px 50px !important;
}
&__sectionGit {
margin-top: 25px;
@ -298,14 +395,24 @@
column-gap: 25px;
justify-content: space-between;
.noGitItems {
width: 100%;
font-size: 20px;
background: #ffffff;
border-radius: 12px;
padding: 10px;
color: #000000;
font-weight: 600;
}
.gitItem {
width: 48%;
display: flex;
align-items: center;
justify-content: space-between;
background: #FFFFFF;
background: #ffffff;
border-radius: 12px;
padding: 35px 30px 30px 45px;
padding: 10px;
transition: all 0.3s ease;
color: #000000;
@ -350,29 +457,11 @@
p {
font-weight: 300;
font-size: 16px;
line-height: 32px;
margin-bottom: 0;
white-space: nowrap;
max-width: 300px;
overflow: hidden;
text-overflow: ellipsis;
@media (max-width: 1040px) {
max-width: 250px;
}
@media (max-width: 890px) {
max-width: 200px;
}
@media (max-width: 825px) {
max-width: 500px;
}
@media (max-width: 720px) {
max-width: 250px;
}
@media (max-width: 470px) {
max-width: 200px;
}
@ -380,7 +469,6 @@
}
&__specification {
margin-top: 30px;
display: flex;
align-items: center;
padding-left: 10px;
@ -391,7 +479,7 @@
}
span {
background: #D4F123;
background: #d4f123;
border-radius: 12px;
max-width: 260px;
width: 100%;
@ -409,7 +497,7 @@
&__link {
border-radius: 50%;
background: #DDEEC6;
background: #ddeec6;
min-width: 48px;
height: 48px;
cursor: pointer;
@ -422,7 +510,7 @@
}
footer {
margin-top: 70px;
margin-top: 10px;
}
.container {

View File

@ -129,7 +129,7 @@ export const Tracker = () => {
e.target.closest("img").classList.toggle("open-desc-item");
e.target
.closest("td")
.querySelector(".taskList__table__name-project")
?.querySelector(".taskList__table__name-project")
.classList.toggle("hide-desc");
}
@ -197,7 +197,7 @@ export const Tracker = () => {
!loader &&
projects.map((project, index) => {
return project.status !== 10 ? (
<ProjectTiket key={index} project={project}></ProjectTiket>
<ProjectTiket key={index} project={project} />
) : (
""
);
@ -317,7 +317,8 @@ export const Tracker = () => {
<tr key={task.id}>
<td>
<div className="taskList__table__title-task">
{task.title}
<p>{task.title}</p>
<div
onClick={(e) => {
toggleDescTask(e);
@ -452,7 +453,7 @@ export const Tracker = () => {
{Boolean(filterCompleteTasks.length) ? (
filterCompleteTasks.map((task, index) => {
return (
<tr>
<tr key={index}>
<td className="archive__completeTask__description">
<p className="completeTask__title">
{task.title}

View File

@ -322,6 +322,7 @@
display: flex;
position: relative;
left: 5px;
img {
position: relative;
display: flex;
@ -341,6 +342,19 @@
}
}
.onePerson {
display: flex;
position: relative;
left: -15px;
img {
position: relative;
display: flex;
width: 32px;
height: 32px;
}
}
span {
width: 32px;
height: 32px;
@ -390,10 +404,10 @@
display: flex;
flex-direction: column;
background: linear-gradient(180deg, #ffffff 0%, #ebebeb 100%);
border-radius: 40px;
padding: 31px 128px 41px 49px;
border-radius: 20px;
padding: 30px;
cursor: default;
width: 650px;
width: 800px;
&__close {
cursor: pointer;
@ -410,7 +424,6 @@
align-items: end;
color: #1458dd;
font-size: 22px;
margin-top: 10px;
span {
font-size: 44px;
font-weight: 700;
@ -462,7 +475,7 @@
display: flex;
justify-content: space-between;
align-items: center;
max-width: 190px;
max-width: 300px;
width: 100%;
.avatar {
@ -479,7 +492,7 @@
color: #807777;
width: auto;
height: auto;
max-width: 130px;
max-width: 215px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
@ -494,6 +507,7 @@
&__add {
display: flex;
margin-left: 3px;
cursor: pointer;
span {
@ -514,7 +528,8 @@
@media (max-width: 1000px) {
width: 390px;
padding: 15px 30px;
padding: 30px;
.persons__list__info {
margin: 10px;
}
@ -756,16 +771,18 @@
margin: 0 10px;
column-gap: 5px;
cursor: pointer;
padding: 4px;
padding: 5px 20px;
border-radius: 8px;
border: 1px solid #e3e2e2;
max-height: 30px;
p {
white-space: nowrap;
font-weight: 400;
font-size: 14px;
line-height: 17px;
}
span {
width: 14px;
height: 14px;
@ -783,12 +800,13 @@
}
&__list {
position: absolute;
background: #f8f9fa;
border-radius: 2px;
background: #d9d9d9;
z-index: 8;
border-radius: 8px;
padding: 20px 10px 10px;
// padding: 0 8px 10px;
top: 30px;
width: 220px;
width: 265px;
display: flex;
flex-direction: column;
@ -806,17 +824,27 @@
flex-direction: column;
row-gap: 8px;
margin-top: 8px;
padding: 0 8px 8px;
.tagItem {
position: relative;
display: flex;
flex-direction: column;
padding: 5px;
border: 1px solid #e3e2e2;
align-items: center;
flex-direction: row;
justify-content: space-between;
padding: 0px 8px;
border-radius: 8px;
height: 50px;
max-height: 50px;
background: #fff;
&__description {
font-size: 14px;
font-size: 12px;
word-break: break-word;
max-width: 115px;
max-height: 40px;
overflow: hidden;
text-wrap: wrap;
text-overflow: ellipsis;
}
&__info {
@ -825,24 +853,20 @@
column-gap: 10px;
&__name {
font-size: 16px;
font-size: 12px;
font-weight: 600;
}
&__color {
border: 1px solid #e3e2e2;
width: 20px;
height: 20px;
border-radius: 50px;
}
width: 22.25px;
height: 23.217px;
border-radius: 8px;
}
&__images {
position: absolute;
right: 5px;
top: 3px;
display: flex;
column-gap: 3px;
flex-direction: column-reverse;
row-gap: 6px;
img {
cursor: pointer;
@ -855,21 +879,26 @@
}
}
}
}
.addNewTag {
display: flex;
align-items: center;
column-gap: 8px;
column-gap: 15px;
border-radius: 8px;
background: #252c32;
color: white;
height: 42px;
cursor: pointer;
justify-content: center;
p {
font-size: 13px;
font-size: 15px;
}
span {
width: 16px;
height: 16px;
width: 19px;
height: 19px;
border-radius: 50px;
align-items: center;
justify-content: center;
@ -884,8 +913,9 @@
.formTag {
display: flex;
flex-direction: column;
padding-top: 8px;
padding: 8px;
row-gap: 8px;
.arrow {
position: absolute;
cursor: pointer;
@ -906,11 +936,12 @@
&__btn {
outline: none;
border: none;
background: #6f6f6f;
background: #252c32;
color: whitesmoke;
margin: 0 auto;
margin: 10px auto 0;
border-radius: 10px;
font-size: 15px;
padding: 5px 12px;
}
.disable {
@ -1125,6 +1156,35 @@
}
}
&__priority {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
p {
font-weight: 500;
font-size: 14px;
}
span {
font-weight: 500;
font-size: 14px;
}
.high {
color: red;
}
.middle {
color: #cece00;
}
.low {
color: green;
}
}
&__deadLine {
display: flex;
align-items: center;
@ -1288,6 +1348,7 @@
display: flex;
justify-content: space-between;
min-width: 300px;
padding-left: 18px;
&__more {
display: flex;
@ -1550,12 +1611,20 @@
gap: 10px;
align-items: center;
transition: 0.4s;
max-width: 350px;
p {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
div {
cursor: pointer;
width: 15px;
height: 15px;
min-width: 15px;
min-height: 15px;
display: flex;
background-color: #000;
align-items: center;

View File

@ -36,7 +36,7 @@ export const TrackerIntro = () => {
компании в одном месте: проекты, задачи, цели, сотрудники,
документы, переписки, отчеты
</p>
<NavLink to="/auth" className="trackerIntro__btn">
<NavLink to="/tracker-registration" className="trackerIntro__btn">
Начать работу
</NavLink>
</div>
@ -57,7 +57,7 @@ export const TrackerIntro = () => {
Управление большим количеством проектов и гибкая настройка
структуры под любые процессы
</p>
<NavLink to="/auth" className="trackerIntro__btn">
<NavLink to="/tracker-registration" className="trackerIntro__btn">
Начать работу
</NavLink>
</div>

View File

@ -31,19 +31,19 @@ export const TrackerRegistration = () => {
<div className="trackerRegistration__form">
<div className="trackerRegistration__form__inputs">
<div className="trackerRegistration__inputContainer">
<span>Ваше имя *</span>
<span>Ваше имя</span>
<input placeholder="Имя" />
</div>
<div className="trackerRegistration__inputContainer">
<span>Ваш email *</span>
<input placeholder="Email" type="email" />
<span>Ваш e-mail</span>
<input placeholder="E-mail" type="email" />
</div>
<div className="trackerRegistration__inputContainer">
<span>Придумайте пароль*</span>
<span>Придумайте пароль</span>
<input placeholder="Пароль" />
</div>
<div className="trackerRegistration__inputContainer">
<span>Повторите пароль*</span>
<span>Повторите пароль</span>
<input placeholder="Повторите пароль" />
</div>
</div>

View File

@ -14,7 +14,7 @@ export function createMarkup(text) {
// `<div class='experience__block'>
// <div class="summary__sections__head">
// <h3>Описание опыта работы</h3>
// <button>Редактировать раздел</button>
// <button>Редактировать</button>
// </div>
// <div class="experience__content">${item.split("<h3>")[0]}</div>
// </div>`