diff --git a/src/components/Navigation/Navigation.js b/src/components/Navigation/Navigation.js deleted file mode 100644 index 45132792..00000000 --- a/src/components/Navigation/Navigation.js +++ /dev/null @@ -1,103 +0,0 @@ -import React, { useEffect, useState } from 'react' -import { NavLink } from 'react-router-dom' -import { urlForLocal } from '../../helper' -import { apiRequest } from '../../api/request'; -import { useDispatch, useSelector } from 'react-redux'; -import { getProfileInfo, setProfileInfo } from '../../redux/outstaffingSlice'; - -import avatarMok from "../../pages/PartnerTreaties/Images/avatarMok.png" - -export const Navigation = () => { - const dispatch = useDispatch(); - - - const profileInfo = useSelector(getProfileInfo); - const [user] = useState(localStorage.getItem('role_status') === '18' ? 'partner' : 'developer') - const [navInfo] = useState({ - developer: [ - { - path: '/summary', - name: 'Резюме' - }, - { - path: '/calendar', - name: 'Отчетность' - }, - { - path: '/tracker', - name: 'Трекер' - }, - { - path: '/payouts', - name: 'Выплаты' - }, - { - path: '/settings', - name: 'Настройки' - }, - ], - partner: [ - { - path: '/catalog', - name: 'Каталог' - }, - { - path: '/requests', - name: 'Запросы' - }, - { - path: '/categories', - name: 'Персонал' - }, - { - path: '/tracker', - name: 'Трекер' - }, - { - path: '/treaties', - name: 'Договора' - }, - { - path: '/settings', - name: 'Настройки' - }, - ] - }) - - useEffect(() => { - if (localStorage.getItem('role_status') === '18') { - return - } - apiRequest(`/profile/${localStorage.getItem('cardId')}`) - .then((profileInfo) => - dispatch(setProfileInfo(profileInfo)) - ); - - }, [dispatch]); - - return ( -
-
- - -
-

- {user === 'developer' ? - profileInfo?.fio : - '' - } -

- - avatar - -
-
-
- ) -} diff --git a/src/components/Navigation/Navigation.jsx b/src/components/Navigation/Navigation.jsx new file mode 100644 index 00000000..d8721287 --- /dev/null +++ b/src/components/Navigation/Navigation.jsx @@ -0,0 +1,107 @@ +import React, { useEffect, useState } from "react"; +import { NavLink } from "react-router-dom"; +import { urlForLocal } from "../../helper"; +import { apiRequest } from "../../api/request"; +import { useDispatch, useSelector } from "react-redux"; +import { getProfileInfo, setProfileInfo } from "../../redux/outstaffingSlice"; + +import avatarMok from "../../pages/PartnerTreaties/Images/avatarMok.png"; + +export const Navigation = () => { + const dispatch = useDispatch(); + + const profileInfo = useSelector(getProfileInfo); + const [user] = useState( + localStorage.getItem("role_status") === "18" ? "partner" : "developer" + ); + const [navInfo] = useState({ + developer: [ + { + path: "/summary", + name: "Резюме", + }, + { + path: "/calendar", + name: "Отчетность", + }, + { + path: "/tracker", + name: "Трекер", + }, + { + path: "/payouts", + name: "Выплаты", + }, + { + path: "/settings", + name: "Настройки", + }, + ], + partner: [ + { + path: "/catalog", + name: "Каталог", + }, + { + path: "/requests", + name: "Запросы", + }, + { + path: "/categories", + name: "Персонал", + }, + { + path: "/tracker", + name: "Трекер", + }, + { + path: "/treaties", + name: "Договора", + }, + { + path: "/settings", + name: "Настройки", + }, + ], + }); + + useEffect(() => { + if (localStorage.getItem("role_status") === "18") { + return; + } + apiRequest(`/profile/${localStorage.getItem("cardId")}`).then( + (profileInfo) => dispatch(setProfileInfo(profileInfo)) + ); + }, [dispatch]); + + return ( +
+
+ + +
+

+ {user === "developer" ? profileInfo?.fio : ""} +

+ + avatar + +
+
+
+ ); +}; diff --git a/src/components/ProfileCalendar/ProfileCalendarComponent.js b/src/components/ProfileCalendar/ProfileCalendarComponent.jsx similarity index 100% rename from src/components/ProfileCalendar/ProfileCalendarComponent.js rename to src/components/ProfileCalendar/ProfileCalendarComponent.jsx diff --git a/src/components/ProfileHeader/ProfileHeader.js b/src/components/ProfileHeader/ProfileHeader.js deleted file mode 100644 index d17872e2..00000000 --- a/src/components/ProfileHeader/ProfileHeader.js +++ /dev/null @@ -1,61 +0,0 @@ -import React, {useEffect, useState} from 'react'; -import {useNavigate, NavLink} from "react-router-dom"; -import {useDispatch, useSelector} from "react-redux"; - -import {Loader} from '../Loader/Loader' -import {apiRequest} from "../../api/request"; -import {auth, setProfileInfo} from "../../redux/outstaffingSlice"; -import {getRole} from "../../redux/roleSlice"; -import './profileHeader.scss' - - - -export const ProfileHeader = () => { - const navigate = useNavigate(); - const dispatch = useDispatch(); - - - const userRole = useSelector(getRole); - const [user] = useState(localStorage.getItem('role_status') === '18' ? 'partner' : 'developer') - - const [isLoggingOut, setIsLoggingOut] = useState(false); - - useEffect(() => { - if (localStorage.getItem('role_status') === '18') { - return - } - apiRequest(`/profile/${localStorage.getItem('cardId')}`) - .then((profileInfo) => - dispatch(setProfileInfo(profileInfo)) - ); - - }, [dispatch]); - - const handler = () => { - setIsLoggingOut(true); - localStorage.clear(); - dispatch(auth(false)); - setIsLoggingOut(false); - navigate(userRole === 'ROLE_DEV' ? '/authdev' : '/auth') - }; - - return ( -
-
-
- itguild. - - {user === 'developer' ? - 'для разработчиков' : - 'для партнеров' - } - - - -
-
-
- ) -}; diff --git a/src/components/ProfileHeader/ProfileHeader.jsx b/src/components/ProfileHeader/ProfileHeader.jsx new file mode 100644 index 00000000..f0fc4bf8 --- /dev/null +++ b/src/components/ProfileHeader/ProfileHeader.jsx @@ -0,0 +1,57 @@ +import React, { useEffect, useState } from "react"; +import { useNavigate, NavLink } from "react-router-dom"; +import { useDispatch, useSelector } from "react-redux"; + +import { Loader } from "../Loader/Loader"; +import { apiRequest } from "../../api/request"; +import { auth, setProfileInfo } from "../../redux/outstaffingSlice"; +import { getRole } from "../../redux/roleSlice"; + +import "./profileHeader.scss"; + +export const ProfileHeader = () => { + const navigate = useNavigate(); + const dispatch = useDispatch(); + + const userRole = useSelector(getRole); + const [user] = useState( + localStorage.getItem("role_status") === "18" ? "partner" : "developer" + ); + + const [isLoggingOut, setIsLoggingOut] = useState(false); + + useEffect(() => { + if (localStorage.getItem("role_status") === "18") { + return; + } + apiRequest(`/profile/${localStorage.getItem("cardId")}`).then( + (profileInfo) => dispatch(setProfileInfo(profileInfo)) + ); + }, [dispatch]); + + const handler = () => { + setIsLoggingOut(true); + localStorage.clear(); + dispatch(auth(false)); + setIsLoggingOut(false); + navigate(userRole === "ROLE_DEV" ? "/authdev" : "/auth"); + }; + + return ( +
+
+
+ + itguild. + + {user === "developer" ? "для разработчиков" : "для партнеров"} + + + +
+
+
+ ); +}; diff --git a/src/components/ProfileHeader/profileHeader.scss b/src/components/ProfileHeader/profileHeader.scss index 2a6f409d..92b1fa14 100644 --- a/src/components/ProfileHeader/profileHeader.scss +++ b/src/components/ProfileHeader/profileHeader.scss @@ -2,10 +2,10 @@ width: 100%; display: flex; flex-direction: column; - font-family: 'LabGrotesque', sans-serif; + font-family: "LabGrotesque", sans-serif; &__head { - background: #E1FCCF; + background: #e1fccf; } &__container { @@ -26,7 +26,7 @@ color: black; span { - color: #52B709; + color: #52b709; } &:hover { @@ -45,7 +45,7 @@ } &__info { - background: #FFFFFF; + background: #ffffff; } &__nav { diff --git a/src/components/ReportForm/ReportForm.js b/src/components/ReportForm/ReportForm.jsx similarity index 98% rename from src/components/ReportForm/ReportForm.js rename to src/components/ReportForm/ReportForm.jsx index 31389b42..82c2197d 100644 --- a/src/components/ReportForm/ReportForm.js +++ b/src/components/ReportForm/ReportForm.jsx @@ -13,20 +13,19 @@ registerLocale("ru", ru); import { Loader } from "../Loader/Loader"; import { Footer } from "../Footer/Footer"; import { ProfileHeader } from "../ProfileHeader/ProfileHeader"; -import { ProfileBreadcrumbs } from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs"; +import { ProfileBreadcrumbs } from "../ProfileBreadcrumbs/ProfileBreadcrumbs"; import { apiRequest } from "../../api/request"; - +import { Navigation } from "../Navigation/Navigation"; import { getReportDate } from "../../redux/reportSlice"; import calendarIcon from "../../images/calendar.svg"; import ellipse from "../../images/ellipse.png"; -import remove from "../../images/remove.png"; -import arrow from "../../images/right-arrow.png"; +import remove from "../../images/remove.svg"; +import arrow from "../../images/left-arrow.png"; import "./reportForm.scss"; import "react-datepicker/dist/react-datepicker.css"; -import { Navigation } from "../Navigation/Navigation"; const ReportForm = () => { if (localStorage.getItem("role_status") === "18") { diff --git a/src/components/Select/TagSelect.css b/src/components/Select/TagSelect.css deleted file mode 100644 index 6e778c7e..00000000 --- a/src/components/Select/TagSelect.css +++ /dev/null @@ -1,86 +0,0 @@ -.search { - margin-top: 73px; -} -.search__title { - font-family: 'GT Eesti Pro Display', sans-serif; - font-size: 2.4em; - font-weight: 500; - font-style: normal; - letter-spacing: normal; - line-height: normal; - text-align: center; - margin-bottom: 40px; -} - -.search__box { - display: flex; - justify-content: space-between; -} - -@media (max-width: 575.98px) { - .search__box { - flex-direction: column; - align-items: center; - } -} - -.search__box > button { - color: white; - width: 131px; - height: 40px; - border-radius: 10px; - border: none; - font-family: 'Muller', sans-serif; - font-size: 1.6em; - letter-spacing: 0.8px; - text-align: center; - background-color: #73c141; -} - -.search__box > button:hover { - background: rgba(0, 0, 0, 0); - color: #73c141; - box-shadow: inset 0 0 0 3px #73c141; -} - -@media (max-width: 575.98px) { - .search__box > button { - margin-top: 20px; - } -} - -.select { - width: 85%; -} - -[class$='-placeholder'] { - display: none; -} - -[class$='-control'] { - border-color: #e8e8e8 !important; - box-shadow: 0 0 0 0 #e8e8e8 !important; -} - -[class$='-value__label'] { - font-size: 1.4em !important; -} - -[class$='-option'] { - font-size: 1.6em !important; - color: gray !important; -} - -.search__submit { - font-weight: bold; -} - -.search__submit:hover .loader path { - fill: #6aaf5c; -} - -@media (max-width: 990px) { - .select { - margin-right: 1rem; - } -} \ No newline at end of file diff --git a/src/components/Select/TagSelect.js b/src/components/Select/TagSelect.js deleted file mode 100644 index 77e3a3ed..00000000 --- a/src/components/Select/TagSelect.js +++ /dev/null @@ -1,86 +0,0 @@ -import React, {useState} from 'react' -import {useSelector, useDispatch} from 'react-redux' -import Select from 'react-select' -import {Loader} from '../Loader/Loader' -import {apiRequest} from "../../api/request"; -import { - selectedItems, - selectItems, - selectTags, - profiles, - setPositionId -} from '../../redux/outstaffingSlice' - -import './TagSelect.css' - - -const TagSelect = () => { - - const [searchLoading, setSearchLoading] = useState(false); - const dispatch = useDispatch(); - - - const itemsArr = useSelector(selectItems); - const tagsArr = useSelector(selectTags); - - const handleSubmit = ({dispatch, setSearchLoading}) => { - setSearchLoading(true); - - dispatch(setPositionId(null)); - const filterItemsId = itemsArr.map((item) => item.id).join(); - const params = filterItemsId ? {skill: filterItemsId} : ''; - - - apiRequest('/profile', { - params: {...params, limit: 1000}, - }).then((res) => { - dispatch(profiles(res)); - setSearchLoading(false) - }) - - // dispatch(selectedItems([])); - }; - - return ( - <> -
-
-
-

- Найти специалиста по навыкам -

-
- dispatch(selectedItems(value))} + isMulti + name="tags" + className="select" + classNamePrefix="select" + options={ + tagsArr && + tagsArr.flat().map((item) => { + return { + id: item.id, + value: item.value, + label: item.value, + }; + }) + } + /> + +
+
+
+
+ + ); +}; + +export default TagSelect; diff --git a/src/components/Select/tagSelect.scss b/src/components/Select/tagSelect.scss new file mode 100644 index 00000000..b2b80f8b --- /dev/null +++ b/src/components/Select/tagSelect.scss @@ -0,0 +1,81 @@ +.search { + margin-top: 73px; + + &__title { + font-family: "GT Eesti Pro Display", sans-serif; + font-size: 2.4em; + font-weight: 500; + font-style: normal; + letter-spacing: normal; + line-height: normal; + text-align: center; + margin-bottom: 40px; + } + + &__box { + display: flex; + justify-content: space-between; + + button { + color: white; + width: 131px; + height: 40px; + border-radius: 10px; + border: none; + font-family: "Muller", sans-serif; + font-size: 1.6em; + letter-spacing: 0.8px; + text-align: center; + background-color: #73c141; + + &:hover { + background: rgba(0, 0, 0, 0); + color: #73c141; + box-shadow: inset 0 0 0 3px #73c141; + } + + @media (max-width: 575.98px) { + margin-top: 20px; + } + } + + @media (max-width: 575.98px) { + flex-direction: column; + align-items: center; + } + } + + &__submit { + font-weight: bold; + } + + .select { + width: 85%; + + @media (max-width: 990px) { + margin-right: 1rem; + } + } +} + +[class$="-placeholder"] { + display: none; +} + +[class$="-control"] { + border-color: #e8e8e8 !important; + box-shadow: 0 0 0 0 #e8e8e8 !important; +} + +[class$="-value__label"] { + font-size: 1.4em !important; +} + +[class$="-option"] { + font-size: 1.6em !important; + color: gray !important; +} + +.search__submit:hover .loader path { + fill: #6aaf5c; +} diff --git a/src/components/ShortReport/ShortReport.jsx b/src/components/ShortReport/ShortReport.jsx index 84eedd60..14e4333a 100644 --- a/src/components/ShortReport/ShortReport.jsx +++ b/src/components/ShortReport/ShortReport.jsx @@ -1,4 +1,6 @@ -import React, { useEffect, useState } from "react"; +import React, { useState } from "react"; +import { useDispatch, useSelector } from "react-redux"; +import { Link } from "react-router-dom"; import { apiRequest } from "../../api/request"; import { @@ -11,8 +13,6 @@ import { getSendRequest, setSendRequest, } from "../../redux/reportSlice"; -import { useDispatch, useSelector } from "react-redux"; -import { Link } from "react-router-dom"; import { Loader } from "../Loader/Loader"; import "./shortReport.scss"; diff --git a/src/components/SliderWorkers/SliderWorkers.jsx b/src/components/SliderWorkers/SliderWorkers.jsx index 28f3f155..7a67ced9 100644 --- a/src/components/SliderWorkers/SliderWorkers.jsx +++ b/src/components/SliderWorkers/SliderWorkers.jsx @@ -1,12 +1,11 @@ import React, { useState } from "react"; import Slider from "react-slick"; - +import { Link } from "react-router-dom"; import mockWorker from "../../images/mokPerson.png"; import "./sliderWorkers.scss"; import "slick-carousel/slick/slick.css"; import "slick-carousel/slick/slick-theme.css"; -import { Link } from "react-router-dom"; export const SliderWorkers = ({ title, titleInfo, subTitle }) => { const [workers] = useState([ diff --git a/src/components/StarRating/StarRating.js b/src/components/StarRating/StarRating.js index 58cdc0bd..9175d00f 100644 --- a/src/components/StarRating/StarRating.js +++ b/src/components/StarRating/StarRating.js @@ -1,44 +1,85 @@ -import React, { useEffect, useState } from 'react' -import './StarRating.scss' +import React, { useEffect, useState } from "react"; +import "./StarRating.scss"; -const StarRating = ({ countStars=1, countActiveStars=1, color='#52B709', size=61 }) => { - const [shadedStars, setShadedStars] = useState([]) - const [noShadedStars, setNoShadedStars] = useState([]) - const percent = (Math.abs(countActiveStars)) >= countStars ? 100 : (countActiveStars * 100 / countStars) - useEffect(() => { - for (let index = 0; index < countStars; index++) { - setShadedStars(prev => [...prev, '★']) - setNoShadedStars(prev => [...prev, '☆']) - } - }, []) +const StarRating = ({ + countStars = 1, + countActiveStars = 1, + color = "#52B709", + size = 61, +}) => { + const [shadedStars, setShadedStars] = useState([]); + const [noShadedStars, setNoShadedStars] = useState([]); + const percent = + Math.abs(countActiveStars) >= countStars + ? 100 + : (countActiveStars * 100) / countStars; + useEffect(() => { + for (let index = 0; index < countStars; index++) { + setShadedStars((prev) => [...prev, "★"]); + setNoShadedStars((prev) => [...prev, "☆"]); + } + }, []); - const ratingStyle = { - "--size": size+'px' - } - const activeStyle = { - "--width": percent + '%', - "--color": color, - "--content": shadedStars.join('') - } - const bodyStyle = { - "--content": noShadedStars.join(''), - "--color": color - } + const ratingStyle = { + "--size": size + "px", + }; + const activeStyle = { + "--width": percent + "%", + "--color": color, + "--content": shadedStars.join(""), + }; + const bodyStyle = { + "--content": noShadedStars.join(""), + "--color": color, + }; - return ( -
-
-
-
- - - - - -
-
-
- ) -} + return ( +
+
+
+
+ + + + + +
+
+
+ ); +}; -export default React.memo(StarRating); \ No newline at end of file +export default React.memo(StarRating); diff --git a/src/components/StarRating/StarRating.scss b/src/components/StarRating/StarRating.scss index 913b35b6..26730287 100644 --- a/src/components/StarRating/StarRating.scss +++ b/src/components/StarRating/StarRating.scss @@ -1,45 +1,44 @@ -.rating{ - display: flex; - align-items: center; - font-size: var(--size); - line-height: 0.75; - &__body{ - position: relative; - &::before{ - content: attr(data-content); - display: block; - color: var(--color); - } - } - &__active{ - position: absolute; - height: 100%; - width: var(--width); - top: 0; - left: 0; - overflow: hidden; - &::before{ - content: attr(data-content); - position: absolute; - left: 0; - top: 0; - width: 100%; - height: 100%; - color: var(--color); - } - } - &__items{ - display: flex; - position: absolute; - width: 100%; - height: 100%; - left: 0; - top: 0; - } - &__item{ - flex: 0 0 20%; - height: 100%; - opacity: 0; - } +.rating { + display: flex; + align-items: center; + font-size: var(--size); + line-height: 0.75; + &__body { + position: relative; + &::before { + content: attr(data-content); + display: block; + color: var(--color); + } + } + &__active { + position: absolute; + height: 100%; + width: var(--width); + top: 0; + left: 0; + overflow: hidden; + &::before { + content: attr(data-content); + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + color: var(--color); + } + } + &__items { + display: flex; + position: absolute; + width: 100%; + height: 100%; + left: 0; + top: 0; + } + &__item { + flex: 0 0 20%; + height: 100%; + opacity: 0; + } } - diff --git a/src/components/StepsForCandidate/StepsForCandidate.js b/src/components/StepsForCandidate/StepsForCandidate.js deleted file mode 100644 index 8656d458..00000000 --- a/src/components/StepsForCandidate/StepsForCandidate.js +++ /dev/null @@ -1,20 +0,0 @@ -import React from 'react'; - -import './stepForCandidate.scss' - -export const StepsForCandidate = ({step}) => { - return( -
-
- 2 -

шага для твоего входа в команду

-
-
-

{step}

- из 2 -
-
- ) -}; - -export default StepsForCandidate diff --git a/src/components/StepsForCandidate/StepsForCandidate.jsx b/src/components/StepsForCandidate/StepsForCandidate.jsx new file mode 100644 index 00000000..d3fe3748 --- /dev/null +++ b/src/components/StepsForCandidate/StepsForCandidate.jsx @@ -0,0 +1,20 @@ +import React from "react"; + +import "./stepForCandidate.scss"; + +export const StepsForCandidate = ({ step }) => { + return ( +
+
+ 2 +

шага для твоего входа в команду

+
+
+

{step}

+ из 2 +
+
+ ); +}; + +export default StepsForCandidate; diff --git a/src/components/StepsForCandidate/stepForCandidate.scss b/src/components/StepsForCandidate/stepForCandidate.scss index 1e703639..b78009b4 100644 --- a/src/components/StepsForCandidate/stepForCandidate.scss +++ b/src/components/StepsForCandidate/stepForCandidate.scss @@ -4,7 +4,7 @@ align-items: center; justify-content: space-between; top: -100px; - padding:0 55px 0 85px; + padding: 0 55px 0 85px; width: 100%; @media (max-width: 965px) { @@ -20,7 +20,7 @@ font-weight: 900; font-size: 258px; line-height: 32px; - color: #52B709; + color: #52b709; } p { @@ -41,7 +41,7 @@ display: flex; align-items: center; p { - background: #DDEEC6; + background: #ddeec6; border-radius: 44px; padding: 8px 26px; font-weight: 400; diff --git a/src/components/TaskItem/TaskItem.js b/src/components/TaskItem/TaskItem.js deleted file mode 100644 index 9a9c2467..00000000 --- a/src/components/TaskItem/TaskItem.js +++ /dev/null @@ -1,16 +0,0 @@ -import React from 'react' - -import './taskItem.scss' - -export const TaskItem = ({ index, text, hours }) => { - return ( -
-
{index}.
-
{text}
-
-
{hours}
-
Количество часов
-
-
- ) -} diff --git a/src/components/TaskItem/TaskItem.jsx b/src/components/TaskItem/TaskItem.jsx new file mode 100644 index 00000000..258f0d5d --- /dev/null +++ b/src/components/TaskItem/TaskItem.jsx @@ -0,0 +1,16 @@ +import React from "react"; + +import "./taskItem.scss"; + +export const TaskItem = ({ index, text, hours }) => { + return ( +
+
{index}.
+
{text}
+
+
{hours}
+
Количество часов
+
+
+ ); +}; diff --git a/src/components/TaskItem/taskItem.scss b/src/components/TaskItem/taskItem.scss index 0a6f10f5..9f965c5b 100644 --- a/src/components/TaskItem/taskItem.scss +++ b/src/components/TaskItem/taskItem.scss @@ -6,7 +6,7 @@ &__index { margin-top: 0.2rem; color: #282828; - font-family: 'GT Eesti Pro Display'; + font-family: "GT Eesti Pro Display"; font-size: 20px; font-weight: 700; line-height: 48.74px; @@ -19,7 +19,7 @@ max-width: 525px; margin-left: 1.6rem; color: #000000; - font-family: 'GT Eesti Pro Display'; + font-family: "GT Eesti Pro Display"; font-size: 15px; font-weight: 400; letter-spacing: normal; @@ -49,7 +49,7 @@ ); color: #ffffff; - font-family: 'Muller Extra Bold'; + font-family: "Muller Extra Bold"; font-size: 16px; font-weight: 400; text-align: left; @@ -61,7 +61,7 @@ width: 69px; height: 25px; color: #000000; - font-family: 'GT Eesti Pro Display - Thin'; + font-family: "GT Eesti Pro Display - Thin"; font-size: 13px; font-weight: 400; letter-spacing: normal; diff --git a/src/components/UI/CardArticle/CardArticle.jsx b/src/components/UI/CardArticle/CardArticle.jsx index be8ca4b1..e6a62e98 100644 --- a/src/components/UI/CardArticle/CardArticle.jsx +++ b/src/components/UI/CardArticle/CardArticle.jsx @@ -1,7 +1,8 @@ import React from "react"; -import cardCalendar from "../../../images/cardCalendar.svg"; import { Link } from "react-router-dom"; +import cardCalendar from "../../../images/cardCalendar.svg"; + import "./cardArticle.scss"; export const CardArticle = ({ images, title, data, id }) => { diff --git a/src/components/UI/ModalAspt/ModalAspt.jsx b/src/components/UI/ModalAspt/ModalAspt.jsx index aa60b69e..569c95a2 100644 --- a/src/components/UI/ModalAspt/ModalAspt.jsx +++ b/src/components/UI/ModalAspt/ModalAspt.jsx @@ -4,8 +4,8 @@ import { Link } from "react-router-dom"; import ModalLayout from "../ModalLayout/ModalLayout"; import avatar from "../../../images/mokPerson.png"; -import logoTg from "../../../images/TgLogo.svg"; -import arrow from "../../../images/right-arrow.png"; +import logoTg from "../../../images/tgLogo.svg"; +import arrow from "../../../images/left-arrow.png"; import interview from "../../../images/interviewLogo.svg"; import "./modalAspt.scss"; diff --git a/src/components/UI/ModalRegistration/ModalRegistration.jsx b/src/components/UI/ModalRegistration/ModalRegistration.jsx index da4f497a..8d4958a7 100644 --- a/src/components/UI/ModalRegistration/ModalRegistration.jsx +++ b/src/components/UI/ModalRegistration/ModalRegistration.jsx @@ -1,6 +1,6 @@ import React from "react"; -import telegramLogo from "../../../images/TgLogo.svg"; +import telegramLogo from "../../../images/tgLogo.svg"; import doc from "../../../images/doc.svg"; import anyMoment from "../../../images/anyMoment.svg"; diff --git a/src/components/UI/ModalTicket/ModalTicket.jsx b/src/components/UI/ModalTicket/ModalTicket.jsx index e2e3fe72..4b9f754f 100644 --- a/src/components/UI/ModalTicket/ModalTicket.jsx +++ b/src/components/UI/ModalTicket/ModalTicket.jsx @@ -1,17 +1,18 @@ -import React, {useEffect, useState} from "react"; +import React, { useEffect, useState } from "react"; import { Link } from "react-router-dom"; + import TrackerModal from "../TrackerModal/TrackerModal"; import { apiRequest } from "../../../api/request"; import { useDispatch } from "react-redux"; +import { urlForLocal } from "../../../helper"; import { modalToggle, setProjectBoardFetch, } from "../../../redux/projectsTrackerSlice"; +import { getCorrectDate } from "../../../components/Calendar/calendarHelper"; -import {getCorrectDate} from '../../../components/Calendar/calendarHelper' - -import category from "../../../images/category.png"; -import watch from "../../../images/watch.png"; +import category from "../../../images/category.svg"; +import watch from "../../../images/watch.svg"; import file from "../../../images/fileModal.svg"; import arrow from "../../../images/arrowStart.png"; import link from "../../../images/link.svg"; @@ -24,7 +25,6 @@ import fullScreen from "../../../images/inFullScreen.svg"; import close from "../../../images/closeProjectPersons.svg"; import "./ModalTicket.scss"; -import {urlForLocal} from "../../../helper"; export const ModalTiсket = ({ active, @@ -32,20 +32,24 @@ export const ModalTiсket = ({ task, projectId, projectName, - projectUsers + projectUsers, }) => { const dispatch = useDispatch(); const [addSubtask, setAddSubtask] = useState(false); const [editOpen, setEditOpen] = useState(false); - const [inputsValue, setInputsValue] = useState({title: task.title, description: task.description, comment: ''}); + const [inputsValue, setInputsValue] = useState({ + title: task.title, + description: task.description, + comment: "", + }); const [comments, setComments] = useState([]); - const [commentsEditOpen, setCommentsEditOpen] = useState({}) - const [commentsEditText, setCommentsEditText] = useState({}) - const [dropListOpen, setDropListOpen] = useState(false) - const [dropListMembersOpen, setDropListMembersOpen] = useState(false) - const [executor, setExecutor] = useState(task.executor) - const [members, setMembers] = useState(task.taskUsers) - const [users, setUsers] = useState([]) + const [commentsEditOpen, setCommentsEditOpen] = useState({}); + const [commentsEditText, setCommentsEditText] = useState({}); + const [dropListOpen, setDropListOpen] = useState(false); + const [dropListMembersOpen, setDropListMembersOpen] = useState(false); + const [executor, setExecutor] = useState(task.executor); + const [members, setMembers] = useState(task.taskUsers); + const [users, setUsers] = useState([]); function deleteTask() { apiRequest("/task/update-task", { @@ -66,7 +70,7 @@ export const ModalTiсket = ({ data: { task_id: task.id, title: inputsValue.title, - description: inputsValue.description + description: inputsValue.description, }, }).then((res) => { dispatch(setProjectBoardFetch(projectId)); @@ -79,39 +83,42 @@ export const ModalTiсket = ({ data: { text: inputsValue.comment, entity_type: 2, - entity_id: task.id - } + entity_id: task.id, + }, }).then((res) => { - let newComment = res - newComment.created_at = new Date() - setInputsValue((prevValue) => ({...prevValue, comment: ''})) - setComments((prevValue) => ([...prevValue, newComment])) - setCommentsEditOpen((prevValue) => ({...prevValue, [res.id]: false})) - setCommentsEditText((prevValue) => ({...prevValue, [res.id]: res.text})) - }) + let newComment = res; + newComment.created_at = new Date(); + setInputsValue((prevValue) => ({ ...prevValue, comment: "" })); + setComments((prevValue) => [...prevValue, newComment]); + setCommentsEditOpen((prevValue) => ({ ...prevValue, [res.id]: false })); + setCommentsEditText((prevValue) => ({ + ...prevValue, + [res.id]: res.text, + })); + }); } function deleteComment(commentId) { apiRequest("/comment/update", { method: "PUT", data: { comment_id: commentId, - status: 0 - } + status: 0, + }, }).then((res) => { - setComments((prevValue) => prevValue.filter((item) => item.id !== commentId)) - }) + setComments((prevValue) => + prevValue.filter((item) => item.id !== commentId) + ); + }); } function editComment(commentId) { - apiRequest("/comment/update", { method: "PUT", data: { comment_id: commentId, - text: commentsEditText[commentId] - } - }).then((res) => { - }) + text: commentsEditText[commentId], + }, + }).then((res) => {}); } function taskExecutor(person) { @@ -119,11 +126,11 @@ export const ModalTiсket = ({ method: "PUT", data: { task_id: task.id, - executor_id: person.user_id + executor_id: person.user_id, }, }).then((res) => { - setDropListOpen(false) - setExecutor(res.executor) + setDropListOpen(false); + setExecutor(res.executor); }); } @@ -132,10 +139,10 @@ export const ModalTiсket = ({ method: "PUT", data: { task_id: task.id, - executor_id: 0 + executor_id: 0, }, }).then((res) => { - setExecutor(null) + setExecutor(null); }); } @@ -144,11 +151,11 @@ export const ModalTiсket = ({ method: "POST", data: { task_id: task.id, - user_id: person.user_id + user_id: person.user_id, }, }).then((res) => { - setDropListMembersOpen(false) - setMembers((prevValue) => ([...prevValue, res])) + setDropListMembersOpen(false); + setMembers((prevValue) => [...prevValue, res]); }); } @@ -157,31 +164,40 @@ export const ModalTiсket = ({ method: "DELETE", data: { task_id: task.id, - user_id: person.user_id + user_id: person.user_id, }, }).then((res) => { - setMembers(members.filter((item) => item.user_id !== person.user_id)) + setMembers(members.filter((item) => item.user_id !== person.user_id)); }); } useEffect(() => { - apiRequest(`/comment/get-by-entity?entity_type=2&entity_id=${task.id}`).then((res) => { - setComments(res) + apiRequest( + `/comment/get-by-entity?entity_type=2&entity_id=${task.id}` + ).then((res) => { + setComments(res); res.forEach((item) => { - setCommentsEditOpen((prevValue) => ({...prevValue, [item.id]: false})) - setCommentsEditText((prevValue) => ({...prevValue, [item.id]: item.text})) - }) - }) - }, []) + setCommentsEditOpen((prevValue) => ({ + ...prevValue, + [item.id]: false, + })); + setCommentsEditText((prevValue) => ({ + ...prevValue, + [item.id]: item.text, + })); + }); + }); + }, []); useEffect(() => { - let ids = members.map((user) => user.user_id) - setUsers(projectUsers.reduce((acc, cur) => { - if (!ids.includes(cur.user_id)) acc.push(cur) - return acc - }, [])) - }, [members]) - + let ids = members.map((user) => user.user_id); + setUsers( + projectUsers.reduce((acc, cur) => { + if (!ids.includes(cur.user_id)) acc.push(cur); + return acc; + }, []) + ); + }, [members]); return (
Задача - {editOpen ? { - setInputsValue((prevValue) => ({...prevValue, title: e.target.value})) - }} /> :
{inputsValue.title}
} + {editOpen ? ( + { + setInputsValue((prevValue) => ({ + ...prevValue, + title: e.target.value, + })); + }} + /> + ) : ( +
{inputsValue.title}
+ )}
- {editOpen ? { - setInputsValue((prevValue) => ({...prevValue, description: e.target.value})) - }}/> :

{inputsValue.description}

} + {editOpen ? ( + { + setInputsValue((prevValue) => ({ + ...prevValue, + description: e.target.value, + })); + }} + /> + ) : ( +

{inputsValue.description}

+ )} {/**/}
@@ -237,97 +273,163 @@ export const ModalTiсket = ({

- { - setInputsValue((prevValue) => ({...prevValue, comment: e.target.value})) - }} /> + { + setInputsValue((prevValue) => ({ + ...prevValue, + comment: e.target.value, + })); + }} + />
-
+
{comments.map((comment) => { - return
-
- {getCorrectDate(comment.created_at)} -
- edit { - if (commentsEditOpen[comment.id]) { - editComment(comment.id) + return ( +
+
+ {getCorrectDate(comment.created_at)} +
({...prevValue, [comment.id]: !prevValue[comment.id]})) - }} /> + > + edit { + if (commentsEditOpen[comment.id]) { + editComment(comment.id); + } + setCommentsEditOpen((prevValue) => ({ + ...prevValue, + [comment.id]: !prevValue[comment.id], + })); + }} + /> +
+ delete deleteComment(comment.id)} + />
- delete deleteComment(comment.id)} /> + {commentsEditOpen[comment.id] ? ( + { + setCommentsEditText((prevValue) => ({ + ...prevValue, + [comment.id]: e.target.value, + })); + }} + /> + ) : ( +

{commentsEditText[comment.id]}

+ )}
- {commentsEditOpen[comment.id] ? { - setCommentsEditText((prevValue) => ({...prevValue, [comment.id]: e.target.value})) - }} /> :

{commentsEditText[comment.id]}

} -
- }) - - } + ); + })}
setActive(false)}> - {task.title} + {task.title}

Создатель : {task.user?.fio}

- {executor ? -
+ {executor ? ( +

Исполнитель: {executor.fio}

- avatar - deleteTaskExecutor()} /> -
: + avatar + deleteTaskExecutor()} + /> +
+ ) : (
Добавить исполнителя - {dropListOpen && -
- setDropListOpen(false)} /> + {dropListOpen && ( +
+ setDropListOpen(false)} + /> {projectUsers.map((person) => { - return
taskExecutor(person)}> - {person.user.fio} - -
- }) - } + return ( +
taskExecutor(person)} + > + {person.user.fio} + +
+ ); + })}
- } + )}
- } + )} - {Boolean(members.length) && -
-

Участники:

-
+ {Boolean(members.length) && ( +
+

Участники:

+
{members.map((member) => { - return
-

{member.fio}

- - deleteMember(member)} /> -
- }) - } + return ( +
+

{member.fio}

+ + deleteMember(member)} + /> +
+ ); + })}
-
- } +
+ )}
Добавить участников - {dropListMembersOpen && -
- setDropListMembersOpen(false)} /> - {users.length ? users.map((person) => { - return
addMember(person)}> - {person.user.fio} - -
- }) :

Нет пользователей

- } -
- } + {dropListMembersOpen && ( +
+ setDropListMembersOpen(false)} + /> + {users.length ? ( + users.map((person) => { + return ( +
addMember(person)} + > + {person.user.fio} + +
+ ); + }) + ) : ( +

Нет пользователей

+ )} +
+ )}
@@ -344,16 +446,19 @@ export const ModalTiсket = ({
-
{ - if(editOpen) { - setEditOpen(!editOpen) - editTask() - } else { - setEditOpen(!editOpen) - } - }}> +
{ + if (editOpen) { + setEditOpen(!editOpen); + editTask(); + } else { + setEditOpen(!editOpen); + } + }} + > -

{editOpen ? 'сохранить' : 'редактировать'}

+

{editOpen ? "сохранить" : "редактировать"}

diff --git a/src/components/UI/TicketFullScreen/TicketFullScreen.jsx b/src/components/UI/TicketFullScreen/TicketFullScreen.jsx index 6be108e7..1daa4d22 100644 --- a/src/components/UI/TicketFullScreen/TicketFullScreen.jsx +++ b/src/components/UI/TicketFullScreen/TicketFullScreen.jsx @@ -6,23 +6,24 @@ import { Footer } from "../../Footer/Footer"; import { Link, useParams, useNavigate } from "react-router-dom"; import TrackerModal from "../TrackerModal/TrackerModal"; import { Navigation } from "../../Navigation/Navigation"; -import {Loader} from "../../Loader/Loader"; +import { Loader } from "../../Loader/Loader"; -import {useDispatch, useSelector} from "react-redux"; +import { useDispatch, useSelector } from "react-redux"; import { deletePersonOnProject, modalToggle, setProjectBoardFetch, setToggleTab, getProjectBoard, - getBoarderLoader + getBoarderLoader, } from "../../../redux/projectsTrackerSlice"; import { apiRequest } from "../../../api/request"; +import { urlForLocal } from "../../../helper"; +import { getCorrectDate } from "../../Calendar/calendarHelper"; import project from "../../../images/trackerProject.svg"; -import watch from "../../../images/watch.png"; +import watch from "../../../images/watch.svg"; import file from "../../../images/fileModal.svg"; -import task from "../../../images/tasksMock.png"; import send from "../../../images/send.svg"; import arrow2 from "../../../images/arrowStart.png"; import plus from "../../../images/plus.svg"; @@ -34,11 +35,9 @@ import link from "../../../images/link.svg"; import archive2 from "../../../images/archive.svg"; import del from "../../../images/delete.svg"; import edit from "../../../images/edit.svg"; +import close from "../../../images/closeProjectPersons.svg"; import "./ticketFullScreen.scss"; -import close from "../../../images/closeProjectPersons.svg"; -import {urlForLocal} from "../../../helper"; -import {getCorrectDate} from "../../Calendar/calendarHelper"; export const TicketFullScreen = ({}) => { const [modalAddWorker, setModalAddWorker] = useState(false); @@ -52,23 +51,35 @@ export const TicketFullScreen = ({}) => { const [inputsValue, setInputsValue] = useState({}); const [loader, setLoader] = useState(true); const [comments, setComments] = useState([]); - const [commentsEditOpen, setCommentsEditOpen] = useState({}) - const [commentsEditText, setCommentsEditText] = useState({}) - const [personListOpen, setPersonListOpen] = useState(false) + const [commentsEditOpen, setCommentsEditOpen] = useState({}); + const [commentsEditText, setCommentsEditText] = useState({}); + const [personListOpen, setPersonListOpen] = useState(false); useEffect(() => { apiRequest(`/task/get-task?task_id=${ticketId.id}`).then((taskInfo) => { setTaskInfo(taskInfo); - setInputsValue({title: taskInfo.title, description: taskInfo.description, comment: ''}) - apiRequest(`/comment/get-by-entity?entity_type=2&entity_id=${taskInfo.id}`).then((res) => { - setComments(res) + setInputsValue({ + title: taskInfo.title, + description: taskInfo.description, + comment: "", + }); + apiRequest( + `/comment/get-by-entity?entity_type=2&entity_id=${taskInfo.id}` + ).then((res) => { + setComments(res); res.forEach((item) => { - setCommentsEditOpen((prevValue) => ({...prevValue, [item.id]: false})) - setCommentsEditText((prevValue) => ({...prevValue, [item.id]: item.text})) - }) - }) + setCommentsEditOpen((prevValue) => ({ + ...prevValue, + [item.id]: false, + })); + setCommentsEditText((prevValue) => ({ + ...prevValue, + [item.id]: item.text, + })); + }); + }); dispatch(setProjectBoardFetch(taskInfo.project_id)); - setLoader(boardLoader) + setLoader(boardLoader); }); }, []); @@ -90,10 +101,9 @@ export const TicketFullScreen = ({}) => { data: { task_id: taskInfo.id, title: inputsValue.title, - description: inputsValue.description + description: inputsValue.description, }, - }).then((res) => { - }); + }).then((res) => {}); } function createComment() { @@ -102,16 +112,19 @@ export const TicketFullScreen = ({}) => { data: { text: inputsValue.comment, entity_type: 2, - entity_id: taskInfo.id - } + entity_id: taskInfo.id, + }, }).then((res) => { - let newComment = res - newComment.created_at = new Date() - setInputsValue((prevValue) => ({...prevValue, comment: ''})) - setComments((prevValue) => ([...prevValue, newComment])) - setCommentsEditOpen((prevValue) => ({...prevValue, [res.id]: false})) - setCommentsEditText((prevValue) => ({...prevValue, [res.id]: res.text})) - }) + let newComment = res; + newComment.created_at = new Date(); + setInputsValue((prevValue) => ({ ...prevValue, comment: "" })); + setComments((prevValue) => [...prevValue, newComment]); + setCommentsEditOpen((prevValue) => ({ ...prevValue, [res.id]: false })); + setCommentsEditText((prevValue) => ({ + ...prevValue, + [res.id]: res.text, + })); + }); } function deleteComment(commentId) { @@ -119,11 +132,13 @@ export const TicketFullScreen = ({}) => { method: "PUT", data: { comment_id: commentId, - status: 0 - } + status: 0, + }, }).then((res) => { - setComments((prevValue) => prevValue.filter((item) => item.id !== commentId)) - }) + setComments((prevValue) => + prevValue.filter((item) => item.id !== commentId) + ); + }); } function editComment(commentId) { @@ -131,10 +146,9 @@ export const TicketFullScreen = ({}) => { method: "PUT", data: { comment_id: commentId, - text: commentsEditText[commentId] - } - }).then((res) => { - }) + text: commentsEditText[commentId], + }, + }).then((res) => {}); } function deletePerson(userId) { @@ -142,10 +156,10 @@ export const TicketFullScreen = ({}) => { method: "DELETE", data: { project_id: projectBoard.id, - user_id: userId + user_id: userId, }, }).then((res) => { - dispatch(deletePersonOnProject(userId)) + dispatch(deletePersonOnProject(userId)); }); } @@ -195,223 +209,308 @@ export const TicketFullScreen = ({}) => {

Архив

- {loader ? : - <> -
-
-
-

Проект : {projectBoard.name}

+ {loader ? ( + + ) : ( + <> +
+
+
+

Проект : {projectBoard.name}

- + -
- {/*avatar*/} - {/*avatar*/} - {projectBoard.projectUsers?.length} - { - setPersonListOpen(true) - }} - > - + - -

добавить участника

- {personListOpen && -
- close setPersonListOpen(false)} /> -
{projectBoard.projectUsers?.length}участник
-
В проекте - “{projectBoard.name}”
-
- {projectBoard.projectUsers?.map((person) => { - return
- avatar - {person.user.fio} - delete deletePerson(person.user_id)}/> +
+ {/*avatar*/} + {/*avatar*/} + + {projectBoard.projectUsers?.length} + + { + setPersonListOpen(true); + }} + > + + + +

добавить участника

+ {personListOpen && ( +
+ close setPersonListOpen(false)} + /> +
+ {projectBoard.projectUsers?.length} + участник +
+
+ В проекте - “{projectBoard.name}” +
+
+ {projectBoard.projectUsers?.map((person) => { + return ( +
+ avatar + {person.user.fio} + delete deletePerson(person.user_id)} + /> +
+ ); + })} +
+
{ + dispatch(modalToggle("addWorker")); + setModalAddWorker(true); + setPersonListOpen(false); + }} + > + + +

Добавить участников

+
- }) - } + )}
-
{ - dispatch(modalToggle("addWorker")); - setModalAddWorker(true); - setPersonListOpen(false) - }} - > - + -

Добавить участников

+
+ Учавствую + arrow
-
- } -
-
- Учавствую - arrow -
-
- Мои - arrow -
- -
-

Вернуться на проекты

- arrow -
- -
-
-
-
-
-
- Задача - {editOpen ? { - setInputsValue((prevValue) => ({...prevValue, title: e.target.value})) - }} /> :
{inputsValue.title}
} -
- {editOpen ? { - setInputsValue((prevValue) => ({...prevValue, description: e.target.value})) - }}/> :

{inputsValue.description}

} - {/**/} -
-
-

- -

-

- - {0} - Файлов -

-
-
- { - setInputsValue((prevValue) => ({...prevValue, comment: e.target.value})) - }} /> - -
-
- {comments.map((comment) => { - return
-
- {getCorrectDate(comment.created_at)} -
- edit { - if (commentsEditOpen[comment.id]) { - editComment(comment.id) - } - setCommentsEditOpen((prevValue) => ({...prevValue, [comment.id]: !prevValue[comment.id]})) - }} /> -
- delete deleteComment(comment.id)} /> +
+ Мои + arrow +
+ +
+

Вернуться на проекты

+ arrow
- {commentsEditOpen[comment.id] ? { - setCommentsEditText((prevValue) => ({...prevValue, [comment.id]: e.target.value})) - }} /> :

{commentsEditText[comment.id]}

} + +
+
+
+
+
+
+ Задача + {editOpen ? ( + { + setInputsValue((prevValue) => ({ + ...prevValue, + title: e.target.value, + })); + }} + /> + ) : ( +
{inputsValue.title}
+ )} +
+ {editOpen ? ( + { + setInputsValue((prevValue) => ({ + ...prevValue, + description: e.target.value, + })); + }} + /> + ) : ( +

{inputsValue.description}

+ )} + {/**/}
- }) - - } -
-
-
-
-
-

- Создатель : {taskInfo.user?.fio} -

-
- {Boolean(taskInfo.taskUsers?.length) && - taskInfo.taskUsers.map((worker, index) => { - return ( -
- -

{worker.name}

-
- ); - })} +
+

+ +

+

+ + {0} + Файлов +

+
+
+ { + setInputsValue((prevValue) => ({ + ...prevValue, + comment: e.target.value, + })); + }} + /> + +
+
+ {comments.map((comment) => { + return ( +
+
+ {getCorrectDate(comment.created_at)} +
+ edit { + if (commentsEditOpen[comment.id]) { + editComment(comment.id); + } + setCommentsEditOpen((prevValue) => ({ + ...prevValue, + [comment.id]: !prevValue[comment.id], + })); + }} + /> +
+ delete deleteComment(comment.id)} + /> +
+ {commentsEditOpen[comment.id] ? ( + { + setCommentsEditText((prevValue) => ({ + ...prevValue, + [comment.id]: e.target.value, + })); + }} + /> + ) : ( +

{commentsEditText[comment.id]}

+ )} +
+ ); + })} +
+
+
+
+

+ Создатель : {taskInfo.user?.fio} +

+
+ {Boolean(taskInfo.taskUsers?.length) && + taskInfo.taskUsers.map((worker, index) => { + return ( +
+ +

{worker.name}

+
+ ); + })} +
-
- + Добавить исполнителя +
+
+ + Добавить участников +
+
+ +
+
+ + Длительность : +

{"0:00:00"}

+
+ + +
+ +
+
{ - dispatch(modalToggle("addWorker")); - setModalAddWorker(true); + if (editOpen) { + setEditOpen(!editOpen); + editTask(); + } else { + setEditOpen(!editOpen); + } }} - > - + - - Добавить исполнителя -
-
- - Добавить участников + > + +

{editOpen ? "сохранить" : "редактировать"}

+
+
+ +

ссылка на проект

+
+
+ +

в архив

+
+
+ +

удалить

+
+
- -
-
- - Длительность : -

{"0:00:00"}

-
- - -
- -
-
{ - if(editOpen) { - setEditOpen(!editOpen) - editTask() - } else { - setEditOpen(!editOpen) - } - }}> - -

{editOpen ? 'сохранить' : 'редактировать'}

-
-
- -

ссылка на проект

-
-
- -

в архив

-
-
- -

удалить

-
-
-
-
- - } + + )}